// Tutorial //

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

Published on April 9, 2020
Default avatar
By Ari Birnbaum
CS Undergraduate and Writer
Отображение данных с помощью 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:

  1. pip install Django

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

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

  1. django-admin startproject do_django_project
  2. cd do_django_project

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

  1. 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 для запуска проекта, чтобы протестировать его:

  1. 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

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

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

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

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

  1. python3 manage.py startapp display_droplets

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

  1. cd do_django_project

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

  1. nano settings.py

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

do_django_api/do_django_project/do_django_project/settings.py
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:

  1. cd ..
  2. cd display_droplets

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

  1. nano views.py

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

do_django_api/do_django_project/display_droplets/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​​:

  1. cd ..
  2. cd do_django_project

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

  1. nano urls.py

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

do_django_api/do_django_project/do_django_project/urls.py
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​​​​​​:

  1. cd ..
  2. cd display_droplets

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

  1. mkdir templates
  2. cd templates

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

  1. nano droplets.html

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

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

do_django_api/do_django_project/display_droplets/templates/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:

  1. cd ..

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

  1. pip install requests

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

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

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

  1. nano services.py

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

do_django_api/do_django_project/display_droplets/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.

Примечание. Не забудьте заменить access_token на свой токен доступа. Также не забывайте о безопасности и никогда не публикуйте этот токен онлайн.

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

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

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

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

  1. cd ..

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

  1. pip install python-dotenv

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

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

  1. nano manage.py

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

do_django_api/do_django_project/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​​​​​:

  1. cd do_django_project

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

  1. nano wsgi.py

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

do_django_api/do_django_project/do_django_project/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​​​​​​:

  1. cd ..
  2. cd display_droplets

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

  1. nano services.py

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

do_django_api/display_droplets/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​​:

  1. cd ..

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

  1. nano .env

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

do_django_api/do_django_project/.env
DO_ACCESS_TOKEN=access_token

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

Примечание: Добавьте .env в ваш файл .gitignore, чтобы он никогда не включался в ваши операции подтверждения.

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

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

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

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

  1. cd display_droplets

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

  1. nano views.py

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

do_django_api/do_django_project/display_droplets/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​​​:

  1. cd templates

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

  1. nano droplets.html

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

do_django_api/do_django_project/display_droplets/templates/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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
CS Undergraduate and Writer

CS Student at Stevens Institute of Technology.


Default avatar
Senior Acquisitions Editor

Editor at DigitalOcean, former book editor at Pragmatic, O’Reilly, and others. Occasional conference speaker. Highly nerdy.


Still looking for an answer?

Was this helpful?
Leave a comment