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

投稿日: 2022-07-16 2022-10-16
タグ: API, Development, Django, Programming Project

序章

フルスタック開発の需要が拡大し続けるにつれて、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 ファイルのセクション：

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、内部 display_droplets アプリの views.py ファイル。この関数は、ドロップレットデータの表示に使用するテンプレートを次のようにレンダリングします。 context、APIから。 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 ファイルですが、最初に構成しましょう urls.py 開発サーバーのルートディレクトリにアクセスしたときにこの関数を呼び出すには（127.0.0.1:8000).

に切り替えます do_django_project ディレクトリ：

cd ..
cd do_django_project

開ける urls.py 編集用：

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**）、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

The 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 この場合、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

次のコードを追加します。

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にコマンドを発行すると、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()

このコードスニペットには追加のコードスニペットがあります os.path.dirname() なぜなら wsgi.py を見つけるために2つのディレクトリを振り返る必要があります .env ファイル。このスニペットは、 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データをテンプレートに送信する必要があります。関数のスタブに戻りましょう。 GetDroplets 以前に作成した views.py. 関数で送信します 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

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

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

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

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

結論

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

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

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

getdocs

13036