Отображение данных с помощью DigitalOcean API в Django

Автор выбрал фонд FreeBSD Foundation для получения пожертвования в рамках программы Write for DOnations.

Введение

По мере роста спроса на развитие full-stack разработки появляются структуры веб-приложений, делающие разработку менее обременительной и более эффективной. Django является одной из таких структур. Django используется на крупных сайтах, в том числе Mozilla, Pinterest и Instagram. В отличие от нейтральной микроинфраструктуры Flask, пакет Django PyPI содержит все, что требуется для разработки полного цикла, и не требует настраивать для разработки базу данных или панель управления.

Django часто используется для вывода информации с API (например, посты Instagram или репозитории GitHub) на ваших сайтах и в веб-приложениях. Хотя это можно сделать и с помощью других структур веб-приложений, политика Django «батарейки в комплекте» означает, что для достижения того же результата потребуется меньше работы и меньше пакетов.

В этом обучающем модуле мы создадим проект Django, который будет отображать информацию дроплетов вашей учетной записи DigitalOcean с помощью API DigitalOcean v2. В частности, мы создадим сайт, который будет отображать таблицу дроплетов с указанием каждого IP-адреса, идентификатора, региона хостинга и ресурса. Для стилизации страницы на вашем сайте будет использоваться BulmaCSS, чтобы вы могли сосредоточиться на разработке и получить красивый результат.

После прохождения этого обучающего модуля у вас будет проект Django, который сможет создать веб-страницу следующего вида:

Предварительные требования

Для прохождения этого обучающего руководства вам потребуется следующее:

• Учетная запись DigitalOcean с не менее чем одним дроплетом и персональным токеном доступа. Обязательно запишите токен в безопасном месте, он потребуется позднее в этом обучающем модуле.
• Умение делать запросы в API. Подробный обучающий модуль по работе с API можно найти в документе Использование веб-API для Python3.
• Локальная виртуальная среда для Python для поддержания зависимостей. В этом обучающем модуле мы будем использовать имя do_django_api для нашего каталога проекта и env для нашей виртуальной среды.
• Знакомство с логикой шаблонов Django для отображения страниц с помощью данных API.
• Знакомство с логикой представления данных Django для обработки данных, полученных в API, и их передачи в шаблон для отображения.

Шаг 1 — Создание базового проекта Django

Установите Django из виртуальной среды env:

pip install Django

Теперь вы можете запустить проект Django и выполнить некоторые первоначальные команды по настройке.

Используйте django-admin startproject <name>​​​​​ для создания подкаталога в папке проекта с именем вашего проекта Django, затем переключитесь на этот каталог.

django-admin startproject do_django_project
cd do_django_project

После создания подкаталога вы найдете в нем файл manage.py, который обычно используется для взаимодействия с Django и работы вашего проекта. Используйте migrate для обновления базы данных по разработке Django:

python3 manage.py migrate

Вы увидите результат, который будет выглядеть следующим образом, по мере обновления базы данных:

Output
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying sessions.0001_initial... OK

Далее воспользуйтесь командой runserver для запуска проекта, чтобы протестировать его:

python3 manage.py runserver

Когда запустится сервер, результат будет выглядеть следующим образом:

Output
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
September 22, 2019 - 22:57:07
Django version 2.2.5, using settings 'do_django_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Теперь у нас есть базовый проект Django и работающий сервер разработки. Чтобы просмотреть работающий сервер разработки, откройте в браузере адрес 127.0.0.1:8000. В результате откроется стартовая страница Django:

Далее вы создадите приложение Django и настроите ваш проект для представления в этом приложении, чтобы увидеть нечто более интересное, чем страницу по умолчанию.

Шаг 2 — Создание базового приложения Django

На этом шаге вы создадите скелет приложения, который будет хранить ваши результаты дроплета. Вы вернетесь к этому приложению позже, когда настроите вызов API, чтобы наполнить его данными.

Убедитесь, что находитесь в каталоге do_django_project, и создайте приложение Django с помощью следующей команды:

python3 manage.py startapp display_droplets

Теперь вам нужно добавить новое приложение в INSTALLED_APPS в файле settings.py, чтобы Django распознавал его. settings.py — файл конфигурации Django, расположенный в другом подкаталоге проекта Django; у него такое же имя, как у папки проекта (do_django_project). Django создал для вас обе папки. Перейдите в каталог do_django_project​​​:

cd do_django_project

Отредактируйте файл settings.py в редакторе на ваш выбор:

nano settings.py

Добавьте ваше новое приложение в раздел INSTALLED_APPS файла:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # The new app
    'display_droplets',
]

Сохраните и закройте файл после завершения.

Функция просмотра GetDroplets

Далее вы создадите функцию GetDroplets в файле views.py приложения display_droplets​​​2​​​. Эта функция отобразит шаблон, который вы будете использовать для показа данных дроплета как context​​​ из ​​API. context — словарь, используемый для передачи данных из кода Python и отправки их в шаблон HTML для показа на веб-странице.

Перейдите в каталог display_droplets:

cd ..
cd display_droplets

Откройте файл views.py для редактирования:

nano views.py

Добавьте в файл следующий код:

from django.views.generic import TemplateView

class GetDroplets(TemplateView):
    template_name = 'droplets.html'
    def get_context_data(self, *args, **kwargs):
        pass

Сохраните и закройте файл.

Позже вы заполните эту функцию и создадите файл droplets.html, но сначала давайте настроим файл urls.py для вызова этой функции при посещении корневого каталога сервера разработки (127.0.0.1:8000).

Перейдите обратно в каталог do_django_project​​:

cd ..
cd do_django_project

Откройте файл urls.py​​​​​​ для редактирования:

nano urls.py

Добавьте заявление import для GetDroplets​​, затем добавьте дополнительный путь к urlpatterns, который будет указывать на новое представление.

from django.contrib import admin
from django.urls import path
from display_droplets.views import GetDroplets

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', GetDroplets.as_view(template_name='droplets.html'), name='Droplet View'),
]

Если хотите создать собственные настраиваемые пути, первый параметр — URL (например, example.com/**admin**), второй параметр — функция для вызова создания веб-страницы, а третий — только имя пути.

Сохраните и закройте файл.

Шаблон дроплетов

Далее вы будете работать с шаблонами. Шаблоны — файлы HTML, которые Django использует для создания веб-страниц. В этом случае вы будете использовать шаблон для создания страницы HTML, которая отображает данные API.

Перейдите обратно в каталог display_droplets​​​​​​:

cd ..
cd display_droplets

В этом каталоге создайте папку template и перейдите в нее:

mkdir templates
cd templates

Создайте файл droplets.html и откройте его для редактирования:

nano droplets.html

Во избежание необходимости писать какой-либо CSS для этого проекта, будем использовать Bulma CSS, так как он является бесплатным и компактным CSS-каркасом, позволяющим создавать готовые веб-страницы простым добавлением нескольких атрибутов классов в HTML.

Теперь создадим шаблон с базовой навигационной панелью. Добавьте в файл droplets.html​​​ следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DigitalOcean Droplets</title>
    <link crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"
          integrity="sha256-8B1OaG0zT7uYA572S2xOxWACq9NXYPQ+U5kHPV1bJN4="
          rel="stylesheet"/>
    <link rel="shortcut icon" type="image/png" href="https://assets.digitalocean.com/logos/favicon.png"/>
</head>
<body>
<nav aria-label="main navigation" class="navbar is-light" role="navigation">
    <div class="navbar-brand">
        <div class="navbar-item">
            <img atl="DigitalOcean" src="https://assets.digitalocean.com/logos/DO_Logo_icon_blue.png"
                 style="margin-right: 0.5em;">Droplets
        </div>
    </div>
</nav>
</body>
</html>

Сохраните и закройте файл.

Этот код импортирует команду Bulma в стандартный HTML и создает панель nav, показывающую ​​​«Droplets».

Обновите вкладку браузера, чтобы просмотреть изменения, внесенные в шаблон.

До сих пор вы не касались ничего, связанного с API; вы создали основу для проекта. Далее вы найдете применение этой странице, создав вызов API и представив данные дроплета.

Шаг 3 — Создание вызова API

На этом шаге вы выполните настройку вызова API и отправите данные дроплета как контекст в шаблон для показа в таблице.

Получение данных дроплета

Перейдите обратно в каталог display_droplets:

cd ..

Установите библиотеку requests, чтобы связываться с API:

pip install requests

Библиотека requests позволяет коду запрашивать данные в API и добавлять заголовки (дополнительные данные, отправленные вместе с нашим запросом).

Далее вы создадите файл services.py, в котором будете совершать вызов API. Эта функция будет использовать запросы для связи с https://api.digitalocean.com/v2/droplets и наращивать каждый дроплет в файле JSON, возвращаемом в список.

Откройте файл services.py​​​​​​​​​​​​ для редактирования:

nano services.py

Добавьте в файл следующий код:

import os
import requests

def get_droplets():
    url = 'https://api.digitalocean.com/v2/droplets'
    r = requests.get(url, headers={'Authorization':'Bearer %s' % 'access_token'})
    droplets = r.json()
    droplet_list = []
    for i in range(len(droplets['droplets'])):
        droplet_list.append(droplets['droplets'][i])
    return droplet_list

Внутри функции get_droplets происходит два события: делается запрос и разбираются данные. url содержит URL, запрашивающий данные дроплета из API DigitalOcean. r хранит запрошенные данные.

requests в этом случае принимает два параметра: url и headers. Если вам нужны данные из другого API, вы можете заменить значение url на соответствующий URL. headers отправляет в DigitalOcean ваш токен доступа, чтобы они знали, что вы можете сделать запрос, а также для какой учетной записи делается запрос.

droplets содержит информацию из переменной r, но теперь она преобразована из JSON — формата, в котором API направляет информацию — в словарь, который легко использовать в цикле for.

Следующие три строки создают массив droplet_list[]. После этого цикл for перебирает информацию в дроплетах и добавляет каждый элемент в список. Вся информация, полученная от API и хранимая в дроплетах, находится в документации разработчиков DigitalOcean.

Сохраните и закройте файл.

Защита вашего токена доступа

Вы всегда должны скрывать токен доступа, но если кто-то когда-нибудь захочет запустить ваш проект, у вас должен быть простой способ дать им возможность добавлять собственный токен доступа без необходимости редактировать код Python. Для этого подойдет решение DotENV, поскольку переменные хранятся в файле .env, который можно легко отредактировать.

Перейдите обратно в каталог do_django_project​​:

cd ..

Для начала работы с переменными среды установите python-dotenv:

pip install python-dotenv

После установки вам нужно будет настроить Django для обработки переменных среды, чтобы вы могли указывать их в коде. Для этого нужно добавить несколько строк кода в файлы manage.py и wsgi.py.

Откройте файл manage.py​​ для редактирования:

nano manage.py

Добавьте следующий код:

"""Django's command-line utility for administrative tasks."""
import os
import sys
import dotenv

def main():
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'do_django_project.settings')
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc
    execute_from_command_line(sys.argv)

if __name__ == '__main__':
    main()

dotenv.load_dotenv(
    os.path.join(os.path.dirname(__file__), '.env')
)

Если вы добавляете это в manage.py, это означает, что при подаче команд в Django при разработке он будет обрабатывать переменные среды из вашего файла .env.

Сохраните и закройте файл.

Если вам когда-либо потребуется обрабатывать переменные среды в своих производственных проектах, вы можете сделать это из файла wsgi.py. Перейдите в каталог do_django_project​​​​​:

cd do_django_project

Откройте файл wsgi.py​​ для редактирования:

nano wsgi.py

Добавьте следующий код в wsgi.py:

import os
import dotenv

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'do_django_project.settings')

dotenv.load_dotenv(
    os.path.join(os.path.dirname(os.path.dirname(__file__)), '.env')
)

application = get_wsgi_application()

В этом фрагменте кода есть дополнительный элемент os.path.dirname(), поскольку wsgi.py должен просмотреть два каталога, чтобы найти файл .env. Этот фрагмент — не тот же, что используется для manage.py.

Сохраните и закройте файл.

Теперь вы можете использовать переменную среды в файле services.py вместо токена доступа. Перейдите обратно в каталог display_droplets​​​​​​:

cd ..
cd display_droplets

Откройте файл services.py​​​​​​​​​​​​ для редактирования:

nano services.py

Теперь замените свой токен доступа на переменную среды:

import os
import requests

def get_droplets():
    url = "https://api.digitalocean.com/v2/droplets"
    r = requests.get(url, headers={'Authorization':'Bearer %s' % os.getenv('DO_ACCESS_TOKEN')})
    droplets = r.json()
    droplet_list = []
    for i in range(len(droplets['droplets'])):
        droplet_list.append(droplets['droplets'][i])
    return droplet_list

Сохраните и закройте файл.

Следующий шаг — создать файл .env. Перейдите обратно в каталог do_django_project​​:

cd ..

Создайте файл .env и откройте его для редактирования:

nano .env

В .env добавьте свой токен в качестве переменной DO_ACCESS_TOKEN:

DO_ACCESS_TOKEN=access_token

Сохраните и закройте файл.

Теперь подключение API настроено и сконфигурировано, и вы также защитили свой токен доступа. Теперь пришло время предоставить пользователю информацию, которую вы нашли.

Шаг 4 — Обработка данных дроплета в представлениях и шаблонах

Теперь, когда вы можете делать вызовы API, вам нужно направить данные дроплета в шаблон для рендеринга. Давайте вернемся к заготовке функции GetDroplets, созданной вами ранее в файле views.py. В данной функции вы отправите droplet_list в качестве контекста в шаблон droplets.html.

Перейдите в каталог display_droplets:

cd display_droplets

Откройте файл views.py для редактирования:

nano views.py

Добавьте следующий код в views.py:

from django.shortcuts import render
from django.views.generic import TemplateView
from .services import get_droplets

class GetDroplets(TemplateView):
    template_name = 'droplets.html'
    def get_context_data(self, *args, **kwargs):
        context = {
            'droplets' : get_droplets(),
        }
        return context

Информация, отправленная в шаблон droplets.html, обрабатывается через словарь context. Поэтому droplets действует как ключ, а массив,возвращаемый от get_droplets(), действует как значение.

Сохраните и закройте файл.

Представление данных в шаблоне

В шаблоне droplets.html вы будете создавать таблицу и заполнять ее с помощью данных дроплета.

Перейдите в каталог templates​​​:

cd templates

Откройте файл droplets.html​​​​​​ для редактирования:

nano droplets.html

Добавьте следующий код после элемента nav в droplets.html​​:

<table class="table is-fullwidth is-striped is-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>IPv4 Address(es)</th>
        <th>Id</th>
        <th>Region</th>
        <th>Memory</th>
        <th>CPUs</th>
        <th>Disk Size</th>
    </tr>
    </thead>
    <tbody>
    {% for droplet in droplets %}
    <tr>
        <th>{{ droplet.name }}</th>
        {% for ip in droplet.networks.v4 %}
        <td>{{ ip.ip_address }}</td>
        {% endfor %}
        <td>{{ droplet.id }}</td>
        <td>{{ droplet.region.name }}</td>
        <td>{{ droplet.memory }}</td>
        <td>{{ droplet.vcpus }}</td>
        <td>{{ droplet.disk }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>

{% for droplet in droplets %} ... {% endfor %} — цикл итераций через массив дроплетов, полученный из views.py. Каждый дроплет вставляется в строку таблицы. Различные строки {{ droplet.<attribute> }} получают этот атрибут для каждого дроплета в цикле и вставляют его в ячейку таблицы

Сохраните и закройте файл.

Обновите браузер и увидите список дроплетов.

Теперь вы можете обрабатывать API DigitalOcean внутри ваших проектов Django. Вы взяли данные, извлеченные из API, и вставили их в созданный вами ранее шаблон, чтобы отобразить информацию с обеспечением читаемости и гибкости.

Заключение

В этой статье вы создали проект Django, который может отображать информацию дроплета из API DigitalOcean со стилями Bulma CSS. Выполнив этот обучающий модуль, вы научились трем важным навыкам:

• Как обрабатывать запросы API в Python при помощи запросов и модулей json.
• Как отображать данные API в проекте Django с использованием логики просмотра и шаблона.
• Как безопасно обрабатывать ваши токены API при помощи dotenv в Django.

Теперь, когда вы получили представление об обработке API в Django, вы можете создать собственный проект — либо с использованием другой функции из API DigitalOcean, либо с другим API. Также вы можете ознакомиться с другими обучающими руководствами Django или с аналогичным руководством по микроструктуре веб-приложений React.