Comment afficher les données de l'API DigitalOcean avec Django

L’auteur a choisi Mozilla Foundation pour recevoir un don dans le cadre du programme Write for Donations.

Introduction

Comme la demande de développement full-stack continue de croître, les cadres web rendent les flux de développement moins lourds et plus efficaces ; Django est l’un de ces cadres. Django a été utilisé sur de grands sites web tels que Mozilla, Pinterest et Instagram. Contrairement à Flask, qui est un micro-cadre neutre, le package Django PyPI comprend tout ce dont vous auriez besoin pour un développement full-stack ; il n’est pas nécessaire de mettre en place une base de données ou un panneau de contrôle pour le développement.

Un cas d’utilisation courant de Django consiste à l’utiliser pour afficher des informations provenant d’API (telles que les posts Instagram ou les référentiels GitHub) dans vos propres sites et apps web. Bien que cela soit possible avec d’autres cadres, la philosophie " batteries incluses " de Django signifie qu’il y aura moins de problèmes et qu’il faudra moins de paquets pour obtenir le même résultat.

Dans ce tutoriel, vous allez construire un projet Django qui affichera les informations droplet de votre compte DigitalOcean en utilisant l’API DigitalOcean v2. Plus précisément, vous allez créer un site web qui affichera un tableau de Droplets énumérant chacun(e) de leurs adresses IP, ID, régions d’hébergement et ressources. Votre site web utilisera BulmaCSS pour le style de la page afin que vous puissiez vous concentrer sur le développement tout en ayant quelque chose d’agréable à regarder à la fin.

Une fois que vous avez terminé ce tutoriel, vous aurez un projet Django capable de produire une page web qui ressemble à ceci :

Conditions préalables

Avant de commencer ce guide, vous aurez besoin des éléments suivants :

• Un compte DigitalOcean avec au moins un droplet, et un jeton d’accès personnel. Veillez à enregistrer le jeton dans un endroit sûr ; vous en aurez besoin plus tard dans ce tutoriel.
• Être familiarisé avec les requêtes adressées aux API. Pour obtenir un tutoriel complet sur le travail avec API, consultez Comment utiliser les API web en Python3.
• Un environnement virtuel local pour Python afin de maintenir les dépendances. Dans ce tutoriel, nous utiliserons le nom do_django_api pour notre répertoire de projet et env pour notre environnement virtuel.
• Être familiarisé avec la logique du modèle de Django pour le rendu de pages avec des données API.
• Être familiarisé avec la logique de vue de Django pour traiter les données reçues de l’API et les donner à un modèle pour le rendu.

Étape 1 - Création d’un projet Django de base

À partir de l’environnement virtuel env, installez Django

pip install Django

Vous pouvez maintenant démarrer un projet Django et exécuter certaines commandes initiales d’installation.

Utilisez django-admin startproject <nom> pour créer un sous-répertoire dans le dossier du projet nommé d’après votre projet Django, puis passez dans ce répertoire.

django-admin startproject do_django_project
cd do_django_project

Une fois qu’il est créé, à l’intérieur de ce sous-répertoire, vous trouverez manage.py, qui est le moyen habituel d’interagir avec Django et d’exécuter votre projet. Utilisez migrate pour mettre à jour la base de données de développement de Django :

python3 manage.py migrate

Vous verrez des sorties qui ressemblent à ceci pendant que la base de données se met à jour :

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

Ensuite, utilisez la commande runserver pour exécuter le projet afin que vous puissiez le tester :

python3 manage.py runserver

La sortie ressemblera à ceci pendant que le serveur démarre :

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.

Vous avez maintenant un projet Django de base et un serveur de développement qui fonctionne. Pour visualiser votre serveur de développement en cours de fonctionnement, visitez le site 127.0.0.1:8000 dans un navigateur. Cela affichera la page de démarrage Django :

Ensuite, vous allez créer une app Django et configurer votre projet pour qu’il lance une vue à partir de cette app, de façon à voir quelque chose de plus intéressant que la page par défaut.

Étape 1 - Création d’une app Django de base

Dans cette étape, vous allez créer le squelette de l’app qui contiendra vos résultats Droplet. Vous reviendrez dans cette app plus tard, une fois que vous aurez configuré l’appel API pour l’alimenter avec des données.

Vérifiez que vous vous trouvez dans le répertoire do_django_project et créez une app Django en utilisant la commande suivante :

python3 manage.py startapp display_droplets

Vous devez maintenant ajouter la nouvelle app à INSTALLED_APPS dans le fichier settings.py, de sorte que Django la reconnaisse. settings.py est un fichier de configuration Django qui est situé dans un autre sous-répertoire du projet Django et qui a le même nom que le dossier du projet (do_django_project). Django a créé les deux dossiers pour vous. Passez au répertoire do_django_project

cd do_django_project

Modifiez settings.py dans l’éditeur de votre choix :

nano settings.py

Ajoutez votre nouvelle app à la section INSTALLED_APPS du fichier :

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',
]

Enregistrez et fermez le fichier lorsque vous avez fini de le modifier.

Fonction GetDroplets View

Ensuite, vous allez créer une fonction, GetDroplets, dans le fichier views.py de l’app display_droplets. Cette fonction rendra le modèle que vous utiliserez pour afficher les données Droplet, en tant que context, à partir de l’API. context est un dictionnaire qui est utilisé pour prendre des données du code Python et les envoyer à un modèle HTML afin qu’elles puissent être affichées dans une page web.

Passez au répertoire display_droplets :

cd ..
cd display_droplets

Ouvrez views.py pour le modifier :

nano views.py

Ajoutez le code suivant au fichier :

from django.views.generic import TemplateView

class GetDroplets(TemplateView):
    template_name = 'droplets.html'
    def get_context_data(self, *args, **kwargs):
        pass

Enregistrez et fermez le fichier.

Plus tard, vous allez alimenter cette fonction et créer le fichier droplets.html ; mais d’abord, configurons urls.py pour appeler cette fonction lorsque vous visiterez le répertoire root du serveur de développement (127.0.0.1:8000).

Revenez au répertoire do_django_project :

cd ..
cd do_django_project

Ouvrez urls.py pour le modifier :

nano urls.py

Ajoutez une déclaration import pour GetDroplets, puis ajoutez un chemin supplémentaire à urlpatterns qui pointera vers la nouvelle vue.

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'),
]

Si vous souhaitez créer vos propres chemins personnalisés, le premier paramètre est l’URL (comme exemple.com/**admin**), le deuxième paramètre est la fonction à appeler pour produire la page web, et le troisième est juste un nom pour le chemin.

Enregistrez et fermez le fichier.

Modèle de droplets

Ensuite, vous allez travailler avec des modèles. Les modèles sont des fichiers HTML que Django utilise pour créer des pages web. Dans le cas présent, vous utiliserez un modèle pour construire une page HTML qui affiche les données API.

Revenez au répertoire display_droplets​​​​ :

cd ..
cd display_droplets

À l’intérieur de ce répertoire, créez un dossier modèle et passez à ce répertoire :

mkdir templates
cd templates

Créez droplets.html et ouvrez-le pour le modifier :

nano droplets.html

Afin d’éviter d’avoir à écrire un quelconque CSS pour ce projet, nous utiliserons Bulma CSS car c’est un cadre CSS gratuit et léger qui vous permet de créer des pages web soignées simplement en ajoutant quelques attributs de classe au HTML.

Maintenant, créons un modèle avec une barre de navigation de base. Ajoutez le code suivant au fichier 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>

Enregistrez et fermez le fichier.

Ce code importe Bulma en HTML standard et crée une barre nav affichant “Droplets”.

Rafraîchissez l’onglet de votre navigateur pour visualiser les modifications que vous avez apportées au modèle.

Jusqu’à présent, vous n’avez touché à rien en rapport avec les API ; vous avez créé une base pour le projet. Ensuite, vous mettrez cette page à profit en faisant un appel API et en présentant les données des Droplets.

Étape 3 - Création de l’appel API

Au cours de cette étape, vous allez mettre en place un appel API et envoyer les données des Droplets comme contexte au modèle à afficher dans un tableau.

Obtenir des données de Droplets

Revenez au répertoire de l’app display_droplets

cd ..

Installez la bibliothèque de requêtes afin que vous puissiez parler à l’API :

pip install requests

La bibliothèque de requêtes permet à votre code de demander des données aux API et d’ajouter des en-têtes (données supplémentaires envoyées avec notre requête).

Maintenant, vous allez créer un fichier services.py, dans lequel vous effectuerez l’appel API. Cette fonction utilisera requests pour parler à https://api.digitalocean.com/v2/droplets et ajouter chaque Droplet du fichier JSON renvoyé à une liste.

Ouvrez services.py pour le modifier :

nano services.py

Ajoutez le code suivant au fichier :

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

Dans la fonction get_droplets, deux choses se produisent : une requête est faite et les données sont analysées. url contient l’URL demandant les données des Droplets de l’API DigitalOcean. r stocke les données demandées.

requests a deux paramètres dans ce cas : url et headers. Si vous voulez des données provenant d’une API différente, vous devez remplacer la valeur url par l’URL appropriée. headers envoie à DigitalOcean votre jeton d’accès, afin qu’il sache que vous êtes autorisé à faire la demande et pour quel compte la demande est effectuée.

droplets contient les informations de la variable r, mais maintenant elle a été convertie à partir de JSON (format dans lequel l’API envoie des informations), dans un dictionnaire facile à utiliser au sein d’une boucle for.

Les trois lignes suivantes créent un tableau,droplet_list[]. Ensuite, une boucle for itère les informations en droplets et ajoute chaque élément à la liste. Toutes les informations extraites de l’API et stockées dans les droplets peuvent être trouvées dans les Developer Docs de DigitalOcean.

Enregistrez et fermez le fichier.

Protéger votre jeton d’accès

Vous devez toujours cacher votre jeton d’accès, mais au cas où quelqu’un voudrait exécuter votre projet, vous devez disposer d’un moyen facile pour qu’il puisse ajouter son propre jeton d’accès sans avoir à modifier le code Python. DotENV est la solution, car les variables sont conservées dans un fichier .env qui peut être facilement modifié.

Revenez au répertoire do_django_project :

cd ..

Pour commencer à travailler avec des variables d’environnement, installez python-dotenv :

pip install python-dotenv

Une fois qu’il est installé, vous devez configurer Django pour gérer les variables d’environnement, afin de pouvoir les référencer dans le code. Pour ce faire, vous devez ajouter quelques lignes de code à manage.py et à wsgi.py.

Ouvrez manage.py pour le modifier :

nano manage.py

Ajoutez le code suivant :

"""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')
)

L’ajout de ceci dans manage.py signifie que lorsque vous envoyez des commandes à Django en cours de développement, il gère les variables d’environnement de votre fichier .env.

Enregistrez et fermez le fichier.

Si jamais vous avez de besoin de gérer des variables d’environnement dans vos projets de production, vous pouvez le faire à partir du fichier wsgi.py. Passez au répertoire do_django_project :

cd do_django_project

Et ouvrez wsgi.py pour le modifier :

nano wsgi.py

Ajoutez le code suivant à 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()

Ce fragment de code a un os.path.dirname() supplémentaire parce que wsgi.py doit remonter deux répertoires pour trouver le fichier .env. Ce fragment n’est pas le même que celui utilisé pour manage.py.

Enregistrez et fermez le fichier.

Vous pouvez maintenant utiliser une variable d’environnement dans services.py au lieu de votre jeton d’accès. Revenez au répertoire display_droplets​​​​ :

cd ..
cd display_droplets

Ouvrez services.py pour le modifier :

nano services.py

Maintenant, remplacez votre jeton d’accès par une variable d’environnement :

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

Enregistrez et fermez le fichier.

L’étape suivante consiste à créer un fichier .env. Revenez au répertoire do_django_project :

cd ..

Créez un fichier .env et gardez le ouvert le fichier pour le modifier :

nano .env

Dans .env, ajoutez votre jeton en tant que variable DO_ACCESS_TOKEN

DO_ACCESS_TOKEN=access_token

Enregistrez et fermez le fichier.

La connexion API est maintenant installée et configurée, et vous avez également protégé votre jeton d’accès. Il est temps de présenter à l’utilisateur les informations que vous avez récupérées.

Étape 4 - Traitement des données de droplets dans Vues et Modèles

Maintenant que vous savez faire des appels API, vous devez envoyer les données des Droplets au modèle, pour le rendu. Revenons au fragment de la fonction, GetDroplets, que vous avez créé plus tôt dans views.py. Dans la fonction, vous enverrez droplet_list comme contexte au modèle droplets.html.

Passez au répertoire display_droplets :

cd display_droplets

Ouvrez views.py pour le modifier :

nano views.py

Ajoutez le code suivant à 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

Les informations envoyées au modèle droplets.html sont traitées via le dictionnaire context. C’est pourquoi droplets agit comme une clé et le tableau renvoyé à partir de get_droplets() agit comme une valeur.

Enregistrez et fermez le fichier.

Présenter les données dans le modèle

Dans le modèle droplets.html, vous allez créer un tableau et le remplir avec les données des droplets.

Passez au répertoire templates :

cd templates

Ouvrez droplets.html pour le modifier :

nano droplets.html

Ajoutez le code suivant après l’élément nav dans 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 %} ... {% end for %} est une boucle qui itére à travers le tableau de Droplets récupéré dans views.py. Chaque droplet est inséré dans une rangée de table. Les différentes lignes {{ droplet.<attribut> }} récupèrent cet attribut pour chaque Droplet de la boucle, et l’insèrent dans une cellule de la table.

Enregistrez et fermez le fichier.

Actualisez votre navigateur et vous verrez une liste de Droplets.

Vous pouvez maintenant gérer l’API DigitalOcean dans vos projets Django. Vous avez pris les données extraites de l’API et les avez insérées dans le modèle que vous avez créé précédemment, pour afficher les informations de manière lisible et souple.

Conclusion

Dans cet article, vous avez construit un projet Django qui peut afficher les informations de Droplets à partir de l’API DigitalOcean avec un style Bulma CSS. Vous avez acquis trois compétences importantes en suivant ce tutoriel :

• Comment gérer les requêtes API en Python en utilisant les modules requests et json.
• Comment afficher des données API dans un projet Django en utilisant les logiques view et template.
• Comment manipuler en toute sécurité vos jetons d’API en utilisant dotenv dans Django.

Maintenant que vous avez été initié à la manipulation des API dans Django, vous pouvez créer votre propre projet en utilisant soit une autre fonctionnalité de l’API DigitalOcean, soit une toute autre API. Vous pouvez également consulter d’autres tutoriels Django, ou un tutoriel similaire avec le cadre React.