DjangoでDigitalOceanAPIからデータを表示する方法

著者は、 Write for DOnations プログラムの一環として、 MozillaFoundationを選択して寄付を受け取りました。

序章

フルスタック開発の需要が拡大し続けるにつれて、Webフレームワークにより、開発ワークフローの煩わしさが軽減され、効率が向上しています。 Djangoはそれらのフレームワークの1つです。 Djangoは、 Mozilla 、 Pinterest 、Instagramなどの主要なWebサイトで使用されています。ニュートラルなマイクロフレームワークであるFlaskとは異なり、Django PyPIパッケージには、フルスタック開発に必要なすべてのものが含まれています。開発のためにデータベースやコントロールパネルを設定する必要はありません。

Djangoの一般的な使用例の1つは、Djangoを使用してAPI（Instagramの投稿やGitHubリポジトリなど）からの情報を自分のWebサイトやWebアプリに表示することです。これは他のフレームワークでも可能ですが、Djangoの「バッテリーを含む」という哲学は、同じ結果を作成するために必要な手間とパッケージが少なくなることを意味します。

このチュートリアルでは、 DigitalOcean v2 API を使用して、DigitalOceanアカウントのドロップレット情報を表示するDjangoプロジェクトを構築します。具体的には、各IPアドレス、ID、ホスティングリージョン、およびリソースを一覧表示するドロップレットのテーブルを表示するWebサイトを作成します。あなたのウェブサイトはBulmaCSSを使用してページのスタイルを設定するので、最終的に見栄えのするものを持ちながら、開発に集中することができます。

このチュートリアルを完了すると、次のようなWebページを作成できるDjangoプロジェクトが作成されます。

前提条件

このガイドを開始する前に、次のものが必要です。

少なくとも1つのドロップレットとパーソナルアクセストークンを持つDigitalOceanアカウント。トークンは必ず安全な場所に記録してください。このチュートリアルの後半で必要になります。
APIへのリクエストの作成に精通していること。 APIの操作に関する包括的なチュートリアルについては、Python3でWebAPIを使用する方法を参照してください。
依存関係を維持するためのPythonのローカル仮想環境。このチュートリアルでは、プロジェクトディレクトリにdo_django_apiという名前を使用し、仮想環境にenvという名前を使用します。
APIデータを使用してページをレンダリングするためのDjangoのテンプレートロジックに精通していること。
APIから受信したデータを処理し、レンダリング用のテンプレートに提供するためのDjangoのビューロジックに精通していること。

ステップ1—基本的なDjangoプロジェクトを作成する

仮想環境env内から、Djangoをインストールします。

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

データベースが更新されると、次のような出力が表示されます。

OutputOperations 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

サーバーが起動すると、出力は次のようになります。

OutputWatching 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アプリを作成する

このステップでは、Dropletの結果を保持するアプリのスケルトンを作成します。 API呼び出しを設定してデータを入力したら、後でこのアプリに戻ります。

do_django_projectディレクトリにいることを確認し、次のコマンドを使用してDjangoアプリを作成します。

python3 manage.py startapp display_droplets

次に、settings.pyファイルのINSTALLED_APPSに新しいアプリを追加して、Djangoがそれを認識できるようにする必要があります。 settings.pyは、Djangoプロジェクトの別のサブディレクトリ内にあり、プロジェクトフォルダー（do_django_project）と同じ名前のDjango構成ファイルです。 Djangoは両方のフォルダーを作成しました。 do_django_projectディレクトリに切り替えます。

cd do_django_project

選択したエディターでsettings.pyを編集します。

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ビュー関数

次に、display_dropletsアプリのviews.pyファイル内に関数GetDropletsを作成します。この関数は、APIからcontextとしてドロップレットデータを表示するために使用するテンプレートをレンダリングします。 contextは、Pythonコードからデータを取得し、それをHTMLテンプレートに送信して、Webページに表示できるようにするために使用される辞書です。

display_dropletsディレクトリに切り替えます。

cd ..
cd display_droplets

views.pyを開いて編集します。

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ファイルを作成しますが、最初に、開発サーバーのルートディレクトリ（127.0.0.1:8000）にアクセスしたときにこの関数を呼び出すようにurls.pyを構成しましょう。

do_django_projectディレクトリに戻ります。

cd ..
cd do_django_project

urls.pyを開いて編集します。

nano urls.py

GetDropletsのimportステートメントを追加してから、新しいビューを指す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**など）、2番目のパラメーターはWebページを作成するために呼び出す関数、3番目のパラメーターは単なる名前です。道。

ファイルを保存して閉じます。

液滴テンプレート

次に、テンプレートを使用します。テンプレートは、DjangoがWebページを作成するために使用するHTMLファイルです。この場合、テンプレートを使用して、APIデータを表示するHTMLページを作成します。

display_dropletsディレクトリに戻ります。

cd ..
cd display_droplets

このディレクトリ内にtemplateフォルダを作成し、そのディレクトリに切り替えます。

mkdir templates
cd templates

droplets.htmlを作成し、編集用に開きます。

nano droplets.html

このプロジェクトでCSSを作成する必要がないように、 Bullma CSS を使用します。これは無料で軽量のCSSフレームワークであり、いくつかのクラス属性を追加するだけで見栄えの良いWebページを作成できます。 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バーを作成します。

ブラウザタブを更新して、テンプレートに加えた変更を表示します。

これまでのところ、APIに関連するものには触れていません。プロジェクトの基盤を作成しました。次に、API呼び出しを行い、Dropletデータを表示することで、このページを有効に活用します。

ステップ3—API呼び出しを行う

このステップでは、API呼び出しを設定し、Dropletデータをコンテキストとしてテンプレートに送信してテーブルに表示します。

ドロップレットデータの取得

display_dropletsアプリディレクトリに戻ります。

cd ..

requestsライブラリをインストールして、APIと通信できるようにします。

pip install requests

requestsライブラリを使用すると、コードでAPIにデータをリクエストし、ヘッダー（リクエストとともに送信される追加データ）を追加できます。

次に、services.pyファイルを作成します。このファイルで、API呼び出しを行います。この関数は、requestsを使用してhttps://api.digitalocean.com/v2/dropletsと通信し、リストに返されたJSONファイルの各ドロップレットを追加します。

services.pyを開いて編集します。

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関数内では、2つのことが発生します。要求が行われることとデータが解析されることです。 urlには、DigitalOceanAPIからのドロップレットデータを要求するURLが含まれています。 rは要求されたデータを保存します。

この場合、requestsは、urlとheadersの2つのパラメーターを取ります。別のAPIからのデータが必要な場合は、urlの値を適切なURLに置き換えます。 headersはDigitalOceanにアクセストークンを送信するため、リクエストが許可されていることと、リクエストが行われているアカウントがわかります。

dropletsにはr変数からの情報が含まれていますが、APIが情報を送信する形式であるJSONから、で使いやすい辞書に変換されています。 forループ。

次の3行は、配列droplet_list[]を作成します。次に、forループは、dropletsの情報を繰り返し処理し、各項目をリストに追加します。 APIから取得され、dropletsに保存されているすべての情報は、DigitalOceanの開発者向けドキュメントにあります。

注：access_tokenをアクセストークンに置き換えることを忘れないでください。また、安全を確保し、そのトークンをオンラインで公開しないでください。

ファイルを保存して閉じます。

アクセストークンの保護

アクセストークンは常に非表示にする必要がありますが、誰かがプロジェクトを実行したい場合は、Pythonコードを編集せずに、簡単に独自のアクセストークンを追加できるようにする必要があります。 DotENVは、変数が.envファイルに保持されているため、便利に編集できるソリューションです。

do_django_projectディレクトリに戻ります。

cd ..

環境変数の操作を開始するには、python-dotenvをインストールします。

pip install python-dotenv

インストールしたら、環境変数を処理するようにDjangoを構成して、コードでそれらを参照できるようにする必要があります。そのためには、manage.pyとwsgi.pyに数行のコードを追加する必要があります。

manage.pyを開いて編集します。

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ディレクトリに移動します。

cd do_django_project

そして、編集のためにwsgi.pyを開きます。

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()

wsgi.pyは.envファイルを見つけるために2つのディレクトリをさかのぼる必要があるため、このコードスニペットには追加のos.path.dirname()があります。このスニペットは、manage.pyに使用されているものと同じではありません。

ファイルを保存して閉じます。

これで、アクセストークンの代わりにservices.pyで環境変数を使用できます。 display_dropletsディレクトリに戻ります。

cd ..
cd display_droplets

services.pyを開いて編集します。

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ディレクトリに戻ります。

cd ..

.envファイルを作成し、編集用にファイルをペンで書きます。

nano .env

.envで、トークンを変数DO_ACCESS_TOKENとして追加します。

do_django_api / do_django_project / .env

DO_ACCESS_TOKEN=access_token

ファイルを保存して閉じます。

注： .envを.gitignoreファイルに追加して、コミットに含まれないようにします。

これでAPI接続がセットアップおよび構成され、アクセストークンも保護されました。取得した情報をユーザーに提示するときが来ました。

ステップ4—ビューとテンプレートでのドロップレットデータの処理

API呼び出しを行うことができるようになったので、レンダリングのためにDropletデータをテンプレートに送信する必要があります。以前にviews.pyで作成した関数のスタブGetDropletsに戻りましょう。この関数では、droplet_listをコンテキストとしてdroplets.htmlテンプレートに送信します。

display_dropletsディレクトリに切り替えます。

cd display_droplets

views.pyを開いて編集します。

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ディレクトリに切り替えます。

cd templates

droplets.htmlを開いて編集します。

nano droplets.html

droplets.htmlのnav要素の後に次のコードを追加します。

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> }}行は、ループ内の各ドロップレットのその属性を取得し、それをテーブルセルに挿入します。

ファイルを保存して閉じます。

ブラウザを更新すると、ドロップレットのリストが表示されます。

これで、Djangoプロジェクト内でDigitalOceanAPIを処理できます。 APIから取得したデータを取得し、前に作成したテンプレートにプラグインして、情報を読みやすく柔軟な方法で表示しました。

結論

この記事では、BulmaCSSスタイルでDigitalOceanAPIからのドロップレット情報を表示できるDjangoプロジェクトを構築しました。このチュートリアルに従うことで、3つの重要なスキルを学びました。

requestsおよびjsonモジュールを使用してPythonでAPIリクエストを処理する方法。
viewおよびtemplateロジックを使用してDjangoプロジェクトでAPIデータを表示する方法。
Djangoでdotenvを使用してAPIトークンを安全に処理する方法。

DjangoでのAPIの処理の概要を理解したので、DigitalOceanAPIの別の機能または別のAPIをすべて使用して独自のプロジェクトを作成できます。他のDjangoチュートリアルまたはReactフレームワークを使用した同様のチュートリアルを確認することもできます。