DjangoでDigitalOceanAPIからデータを表示する方法
序章
フルスタック開発の需要が拡大し続けるにつれて、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プロジェクトと開発サーバーが実行されました。 実行中の開発サーバーを表示するには、次のWebサイトにアクセスしてください。 127.0.0.1:8000
ブラウザで。 Djangoのスタートアップページが表示されます。
次に、Djangoアプリを作成し、そのアプリからビューを実行するようにプロジェクトを構成して、デフォルトのページよりも興味深いものが表示されるようにします。
ステップ2—基本的なDjangoアプリを作成する
このステップでは、Dropletの結果を保持するアプリのスケルトンを作成します。 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
、内部 display_droplets
アプリの views.py
ファイル。 この関数は、ドロップレットデータの表示に使用するテンプレートを次のようにレンダリングします。 context
、APIから。 context
は、Pythonコードからデータを取得し、それをHTMLテンプレートに送信して、Webページに表示できるようにするために使用される辞書です。
に切り替えます 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**
)、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
ファイル。
<!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
The requests
ライブラリを使用すると、コードでAPIからデータをリクエストし、ヘッダーを追加できます(リクエストとともに送信される追加データ)。
次に、を作成します services.py
ファイル。これは、API呼び出しを行う場所です。 この関数は使用します requests
と話す 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
関数では、2つのことが発生します。要求が行われ、データが解析されます。 url
DigitalOceanAPIからのドロップレットデータを要求するURLが含まれています。 r
要求されたデータを保存します。
requests
この場合、2つのパラメーターを取ります。 url
と headers
. 別のAPIからのデータが必要な場合は、 url
適切なURLの値。 headers
DigitalOceanにアクセストークンを送信するので、リクエストを行うことが許可されていることと、リクエストが行われているアカウントがわかります。
droplets
からの情報が含まれています r
変数ですが、現在は JSON
、APIが情報を送信する形式、で使いやすい辞書に 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
次のコードを追加します。
"""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にコマンドを発行すると、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
を見つけるために2つのディレクトリを振り返る必要があります .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
ファイルを保存して閉じます。
注:追加 .env
あなたに .gitignore
ファイルなので、コミットに含まれることはありません。
これでAPI接続がセットアップおよび構成され、アクセストークンも保護されました。 取得した情報をユーザーに提示するときが来ました。
ステップ4—ビューとテンプレートでのドロップレットデータの処理
API呼び出しを行うことができるようになったので、レンダリングのためにDropletデータをテンプレートに送信する必要があります。 関数のスタブに戻りましょう。 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> }}
行は、ループ内の各ドロップレットのその属性を取得し、それをテーブルセルに挿入します。
ファイルを保存して閉じます。
ブラウザを更新すると、ドロップレットのリストが表示されます。
これで、Djangoプロジェクト内でDigitalOceanAPIを処理できます。 APIから取得したデータを取得し、前に作成したテンプレートにプラグインして、情報を読みやすく柔軟な方法で表示しました。
結論
この記事では、BulmaCSSスタイルでDigitalOceanAPIからのドロップレット情報を表示できるDjangoプロジェクトを構築しました。 このチュートリアルに従うことで、3つの重要なスキルを学びました。
- を使用してPythonでAPIリクエストを処理する方法
requests
とjson
モジュール。 - を使用してDjangoプロジェクトでAPIデータを表示する方法
view
とtemplate
論理。 - を使用してAPIトークンを安全に処理する方法
dotenv
Djangoで。
DjangoでのAPIの処理の概要を理解したので、DigitalOceanAPIの別の機能または別のAPIをすべて使用して独自のプロジェクトを作成できます。 他のDjangoチュートリアルまたはReactフレームワークを使用した同様のチュートリアルを確認することもできます。