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フレームワークを使用した同様のチュートリアルを確認することもできます。