One place for hosting & domains

      Comment utiliser l’API Fetch de JavaScript pour récupérer des données


      Introduction

      Il fut un temps où l’on utilisait XMLHttpRequest pour créer des requêtes API. Il n’intégrait pas les promesses et n’était pas conçu pour générer des codes JavaScript propres. En utilisant jQuery, vous avez utilisé la syntaxe de nettoyage avec jQuery.ajax().

      Maintenant, JavaScript intègre un moyen qui lui est propre de créer des requêtes API. Il s’agit de l’API Fetch, une nouvelle norme qui permet de réaliser des requêtes sur un serveur en utilisant des promesses. Elle intègre cependant bien d’autres fonctionnalités.

      Au cours de ce tutoriel, vous allez apprendre à utiliser API Fetch pour réaliser des requêtes GET et POST.

      Conditions préalables

      Pour terminer ce tutoriel, vous aurez besoin des éléments suivants :

      Étape 1 — Premiers pas avec la syntaxe de l’API Fetch

      Pour utiliser l’API Fetch, appelez la méthode fetch, qui accepte l’URL de l’API comme paramètre :

      fetch(url)
      

      Après la méthode fetch(), ajoutez la méthode de promesse then() :

      .then(function() {
      
      })
      

      La méthode fetch() retourne une promesse. Si la promesse renvoyée est resolve, cela signifie que la fonction dans la méthode then() est bien exécutée. Cette fonction contient le code qui permet de traiter les données reçues à partir de l’API.

      Sous la méthode then(), ajoutez la méthode catch() :

      .catch(function() {
      
      });
      

      Il se peut que l’API que vous appelez en utilisant fetch() soit défaillante ou que d’autres erreurs se produisent. Le cas échéant, le système renverra la promesse reject. Vous pouvez utiliser la méthode cath pour gérer reject. Le code dans catch() sera exécuté dans le cas où une erreur se produit lors de l’appel de l’API de votre choix.

      Pour résumer, l’utilisation de l’API Fetch ressemblera à l’exemple suivant :

      fetch(url)
      .then(function() {
      
      })
      .catch(function() {
      
      });
      

      En ayant une compréhension de la syntaxe qui permet d’utiliser l’API Fetch, vous pouvez désormais passer à l’utilisation de fetch() sur une API réelle.

      Étape 2 — Utilisation de Fetch pour obtenir des données à partir d’une API

      Les échantillons de code suivants seront basés sur l’API Random User. En utilisant l’API, vous obtiendrez dix utilisateurs que vous pourrez afficher sur la page en utilisant Vanilla JavaScript.

      L’idée est de récupérer toutes les données de l’API Random User et de les afficher dans les éléments de la liste de l’auteur. Commencez par créer un fichier HTML, ajoutez un titre et une liste non ordonnée avec l’id des authors :

      <h1>Authors</h1>
      <ul id="authors"></ul>
      

      Ajoutez maintenant les balises script au bas de votre fichier HTML et utilisez un sélecteur DOM pour récupérer l’ul. Utilisez l’argument getElementById avec authors. N’oubliez pas, authors est l’id de l’ul précédemment créé :

      <script>
      
          const ul = document.getElementById('authors');
      
      </script>
      

      Créez une variable constante nommée url qui contiendra l’URL de l’API qui renverra dix utilisateurs aléatoires :

      const url="https://randomuser.me/api/?results=10";
      

      Une fois que ul et url sont créés, il est temps pour vous de créer les fonctions qui serviront à créer les éléments de la liste. Créez une fonction appelée createNode qui prend un paramètre appelé element :

      function createNode(element) {
      
      }
      

      Plus tard, lorsque vous appellerez createNode, vous devrez transmettre le nom d’un élément HTML réel à créer.

      Dans la fonction, ajoutez une instruction return qui renvoie element en utilisant document.createElement() :

      function createNode(element) {
          return document.createElement(element);
      }
      

      En outre, vous devrez créer une fonction appelée append qui intègre deux paramètres : parent et el :

      function append(parent, el) {
      
      }
      

      Cette fonction ajoutera el au parent en utilisant document.createElement :

      function append(parent, el) {
          return parent.appendChild(el);
      }
      

      createNode et append sont tous deux prêts à être utilisés. Maintenant, en utilisant l’API Fetch, appelez l’API Random User en utilisant fetch() avec l’argument url :

      fetch(url)
      
      fetch(url)
        .then(function(data) {
      
          })
        })
        .catch(function(error) {
      
        });
      

      Dans le code ci-dessus, vous appelez l’API Fetch et passez l’URL à l’API Random User. Ensuite, vous recevrez une réponse. Cependant, la réponse que vous obtenez n’est pas JSON, mais plutôt un objet avec une série de méthodes utilisables en fonction de ce que vous voulez faire avec les informations. Pour convertir l’objet renvoyé en JSON, utilisez la méthode json().

      Ajoutez la méthode then() qui contiendra une fonction avec un paramètre appelé resp :

      fetch(url)
      .then((resp) => )
      

      Le paramètre resp prend la valeur de l’objet renvoyé de fetch(url). Utilisez la méthode json() pour convertir resp en données JSON :

      fetch(url)
      .then((resp) => resp.json())
      

      Il vous reste encore à traiter les données JSON. Ajoutez une autre instruction then() avec une fonction dont l’argument s’appelle data :

      .then(function(data) {
      
          })
      })
      

      Dans cette fonction, créez une variable appelée authors, qui est définie comme égale à data.results :

      .then(function(data) {
          let authors = data.results;
      

      Pour chaque auteur dans authors, il vous faudra créer un élément de liste qui affiche leur photographie et leur nom respectifs. La méthode map() est idéale pour faire cela :

      let authors = data.results;
      return authors.map(function(author) {
      
      })
      

      Dans votre fonction map, créez une variable appelée li qui sera définie comme égale à createNode avec li (l’élément HTML) comme argument :

      return authors.map(function(author) {
          let li = createNode('li');
      })
      

      Répétez cette manœuvre pour créer un élément span et un élément img :

      let li = createNode('li');
      let img = createNode('img');
      let span = createNode('span');
      

      L’API propose un nom pour l’auteur et une image qui accompagne le nom. Définissez l’img.src sur l’image de l’auteur :

      let img = createNode('img');
      let span = createNode('span');
      
      img.src = author.picture.medium;
      

      L’élément span doit contenir le prénom et le nom de famille de l’auteur. Pour cela, utilisez la propriété innerHTML et l’interpolation des chaînes de caractères :

      img.src = author.picture.medium;
      span.innerHTML = `${author.name.first} ${author.name.last}`;
      

      Une fois l’image et l’élément de liste créés avec l’élément span, vous pouvez utiliser la fonction append précédemment créée pour afficher ces éléments sur la page :

      append(li, img);
      append(li, span);
      append(ul, li);
      

      Une fois les deux fonctions then() terminées, vous pouvez maintenant ajouter la fonction catch(). Cette fonction enregistrera l’erreur potentielle sur la console :

      .catch(function(error) {
        console.log(error);
      });
      

      Voici le code complet de la requête que vous avez créée :

      function createNode(element) {
          return document.createElement(element);
      }
      
      function append(parent, el) {
        return parent.appendChild(el);
      }
      
      const ul = document.getElementById('authors');
      const url="https://randomuser.me/api/?results=10";
      
      fetch(url)
      .then((resp) => resp.json())
      .then(function(data) {
        let authors = data.results;
        return authors.map(function(author) {
          let li = createNode('li');
          let img = createNode('img');
          let span = createNode('span');
          img.src = author.picture.medium;
          span.innerHTML = `${author.name.first} ${author.name.last}`;
          append(li, img);
          append(li, span);
          append(ul, li);
        })
      })
      .catch(function(error) {
        console.log(error);
      });
      

      Vous avez réussi à réaliser une requête GET en utilisant l’API Random User et l’API Fetch. Au cours de la prochaine étape, vous allez apprendre à réaliser des requêtes POST.

      Étape 3 — Traitement des requêtes POST

      Fetch utilise par défaut les requêtes GET, mais vous pouvez utiliser tous les autres types de requêtes, changer les en-têtes et envoyer des données. Pour ce faire, vous devez configurer votre objet et le passer comme le deuxième argument de la fonction fetch.

      Avant de créer une requête POST, créez les données que vous souhaitez envoyer à l’API. Il s’agira d’un objet appelé data avec le name clé et la valeur Sammy (ou votre nom) :

      const url="https://randomuser.me/api";
      
      let data = {
        name: 'Sammy'
      }
      

      Veillez à bien inclure une variable constante qui contient le lien vers l’API Random User.

      Comme il s’agit d’une requête POST, vous devrez l’indiquer de manière explicite. Créez un objet appelé fetchData :

      let fetchData = {
      
      }
      

      Cet objet doit inclure trois clés : method, body et headers. La clé method doit avoir la valeur 'POST'. body doit être défini comme égal à l’objet data qui vient d’être créé. headers devrait avoir la valeur des new Headers() :

      let fetchData = {
        method: 'POST',
        body: data,
        headers: new Headers()
      }
      

      L’interface Headers est une propriété de l’API Fetch qui vous permet d’effectuer diverses actions sur les en-têtes des requêtes et des réponses HTTP. Si vous souhaitez en savoir plus à ce sujet, vous pourrez trouver de plus amples informations dans l’article suivant : Comment définir les routes et les méthodes de requête HTTP dans Express.

      Une fois ce code en place, vous pouvez réaliser la requête POST en utilisant l’API Fetch. Vous allez inclure url et fetchData comme arguments pour votre requête POST fetch :

      fetch(url, fetchData)
      

      La fonction then() comprendra un code qui gère la réponse reçue du serveur API Random User :

      fetch(url, fetchData)
      .then(function() {
          // Handle response you get from the server
      });
      

      Vous disposez également d’une autre option pour créer un objet et utiliser la fonction fetch(). Au lieu de créer un objet comme fetchData, vous pouvez utiliser le constructeur de requêtes pour créer votre objet de requête. Pour ce faire, créez une variable appelée request :

      const url="https://randomuser.me/api";
      
      let data = {
        name: 'Sara'
      }
      
      var request =
      

      La variable request doit être configurée comme new Request. La construction New Request prend deux arguments : l’url de l’API url (url) et un objet. L’objet doit également inclure les clés method, body et headers tout comme fetchData :

      var request = new Request(url, {
          method: 'POST',
          body: data,
          headers: new Headers()
      });
      

      Maintenant, vous pouvez utiliser request comme le seul argument de fetch() car il inclut également l’url de l’API :

      fetch(request)
      .then(function() {
          // Handle response we get from the API
      })
      

      L’ensemble de votre code ressemblera à ce qui suit :

      const url="https://randomuser.me/api";
      
      let data = {
        name: 'Sara'
      }
      
      var request = new Request(url, {
          method: 'POST',
          body: data,
          headers: new Headers()
      });
      
      fetch(request)
      .then(function() {
          // Handle response we get from the API
      })
      

      Vous connaissez maintenant deux méthodes qui vous permettront de créer et d’exécuter des requêtes POST avec l’API Fetch.

      Conclusion

      Même si la plupart des navigateurs ne prennent pas l’API Fetch en charge, il s’agit d’une superbe alternative à XMLHttpRequest. Si vous souhaitez apprendre à appeler les API Web en utilisant React, consultez cet article sur ce même sujet.



      Source link

      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 :

      Modèle avec tableau de données droplet

      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

      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 :

      Page d'accueil générique de 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

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

      Ajoutez votre nouvelle app à la section INSTALLED_APPS du fichier :

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

      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 :

      Ajoutez le code suivant au fichier :

      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
      

      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 :

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

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

      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 :

      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​​​ :

      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>
      

      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.

      Modèle avec Header basique

      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

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

      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 :

      Ajoutez le code suivant au fichier :

      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
      

      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.

      Remarque : n’oubliez pas de remplacer access_token par votre jeton d’accès. En outre, conservez-le et ne publiez jamais ce jeton en ligne.

      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 :

      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 :

      Ajoutez le code suivant :

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

      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 :

      Et ouvrez wsgi.py pour le modifier :

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

      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 :

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

      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
      

      Enregistrez et fermez le fichier.

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

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

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

      do_django_api/do_django_project/.env

      DO_ACCESS_TOKEN=access_token
      

      Enregistrez et fermez le fichier.

      Remarque : ajoutez .env à votre fichier .gitignore afin qu’il ne soit jamais inclus dans vos validations.

      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 :

      Ouvrez views.py pour le modifier :

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

      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 :

      Ouvrez droplets.html pour le modifier :

      Ajoutez le code suivant après l’élément nav dans 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 %} ... {% 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.

      Modèle avec tableau de données droplet

      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.





      Source link