One place for hosting & domains

      Verwenden der JavaScript-Fetch-API zum Abrufen von Daten


      Einführung

      Es gab eine Zeit, als XMLHttpRequest verwendet wurde, um API-Anfragen zu erstellen. Es enthielt keine Promises und sorgte nicht für einen sauberen JavaScript-Code. Mit jQuery verwendeten Sie die saubere Syntax mit jQuery.ajax().

      Jetzt verfügt JavaScript über eine eigene integrierte Möglichkeit, API-Anfragen zu erstellen. Dies ist die Fetch-API, ein neuer Standard, um Serveranfragen mit Promises zu erstellen, der aber noch viele andere Funktionen enthält.

      In diesem Tutorial erstellen Sie mit der Fetch-API sowohl GET- als auch POST-Anfragen.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

      Schritt 1 — Erste Schritte mit der Fetch-API-Syntax

      Um die Fetch-API zu verwenden, rufen Sie die Methode fetch auf, die die URL der API als Parameter akzeptiert:

      fetch(url)
      

      Fügen Sie nach der Methode fetch() die Promise-Methode then() ein:

      .then(function() {
      
      })
      

      Die Methode fetch() gibt ein Promise zurück. Wenn das zurückgegebene Promise resolve ist, wird die Funktion innerhalb der Methode then() ausgeführt. Diese Funktion enthält den Code für die Handhabung der von der API empfangenen Daten.

      Fügen Sie unter der Methode then() die Methode catch() ein:

      .catch(function() {
      
      });
      

      Die API, die Sie mit fetch() aufrufen, kann außer Betrieb sein oder es können andere Fehler auftreten. Wenn dies geschieht, wird das Promise reject zurückgegeben. Die Methode catch wird verwendet, um reject zu handhaben. Der Code innerhalb von catch() wird ausgeführt, wenn ein Fehler beim Aufruf der API Ihrer Wahl auftritt.

      Zusammengefasst sieht die Verwendung der Fetch-API wie folgt aus:

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

      Mit einem Verständnis der Syntax zur Verwendung der Fetch-API können Sie nun mit der Verwendung von fetch() für eine echte API fortfahren.

      Schritt 2 — Verwenden von Fetch zum Abrufen von Daten aus einer API

      Die folgenden Codebeispiele basieren auf der Random User API. Mithilfe der API erhalten Sie zehn Benutzer und zeigen sie auf der Seite mit Vanilla JavaScript an.

      Die Idee ist, alle Daten von der Random User API zu erhalten und in Listenelementen innerhalb der Liste des Autors anzuzeigen. Beginnen Sie mit der Erstellung einer HTML-Datei und dem Hinzufügen einer Überschrift und einer ungeordneten Liste mit der id der authors:

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

      Fügen Sie nun script-Tags am Ende Ihrer HTML-Datei und verwenden Sie einen DOM-Selektor zum Ergreifen von ul. Verwenden Sie getElementById mit authors als Argument. Denken Sie daran: authors ist die id für die zuvor erstellte ul:

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

      Erstellen Sie eine konstante Variable namens url, die die API enthält, die zehn zufällige Benutzer zurückgibt:

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

      Mit erstellten ul und url ist es an der Zeit, die Funktionen zu erstellen, die zur Erstellung der Listenelemente verwendet werden. Erstellen Sie eine Funktion namens createNode, die einen Parameter namens element aufnimmt:

      function createNode(element) {
      
      }
      

      Wenn createNode später aufgerufen wird, müssen Sie den Namen eines tatsächlichen HTML-Elements übergeben, das erstellt werden soll.

      Fügen Sie innerhalb der Funktion eine Anweisung return hinzu, die element unter Verwendung von document.createElement() zurückgibt:

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

      Sie müssen auch eine Funktion namens append erstellen, die zwei Parameter aufnimmt: parent und el:

      function append(parent, el) {
      
      }
      

      Diese Funktion fügt el an parent mit document.createElement an:

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

      Sowohl createNode als auch append sind einsatzbereit. Rufen Sie nun mit der Fetch-API die Random User API unter Verwendung von fetch() mit url als Argument auf:

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

      Im obigen Code rufen Sie die Fetch-API auf, und übergeben die URL an die Random User API. Dann wird eine Antwort empfangen. Die Antwort, die Sie erhalten, ist jedoch nicht JSON, sondern ein Objekt mit einer Reihe von Methoden, die je nachdem, was Sie mit den Informationen tun möchten, verwendet werden können. Um das zurückgegebene Objekt in JSON zu konvertieren, verwenden Sie die Methode json().

      Fügen Sie die Methode then() hinzu, die eine Funktion mit einem Parameter namens resp enthält:

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

      Der Parameter resp nimmt den Wert des von fetch(url) zurückgegebenen Objekts an. Verwenden Sie die Methode json(), um resp in JSON-Daten zu konvertieren:

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

      Die JSON-Daten müssen noch verarbeitet werden. Fügen Sie eine weitere Anweisung then() mit einer Funktion hinzu, die ein Argument namens data aufweist:

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

      Erstellen Sie innerhalb dieser Funktion eine Variable namens authors, die gleich data.results gesetzt wird:

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

      Sie sollten für jeden Autor in authors ein Listenelement erstellen, das ein Bild und den Namen des Autors anzeigt. Dafür eignet sich die Methode map() hervorragend:

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

      Erstellen Sie innerhalb Ihrer Funktion map eine Variable namens li, die gleich createNode mit li (dem HTML-Element) als Argument gesetzt wird:

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

      Wiederholen Sie dies, um ein Element span und ein Element img zu erstellen:

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

      Die API bietet einen Namen für den Autor und ein Bild, das zu diesem Namen gehört. Setzen Sie img.src auf das Bild des Autors:

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

      Das Element span sollte den Vor- und Nachnamen des author enthalten. Mit der Eigenschaft innerHTML und der String-Interpolation können Sie dies tun:

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

      Mit dem Bild und dem Listenelement, die zusammen mit dem Element span erstellt wurden, können Sie die zuvor erstellte Funktion append verwenden, um diese Elemente auf der Seite anzuzeigen:

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

      Da beide Funktionen then() abgeschlossen sind, können Sie nun die Funktion catch() hinzufügen. Diese Funktion protokolliert den potenziellen Fehler auf der Konsole:

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

      Dies ist der vollständige Code der von Ihnen erstellten Anfrage:

      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);
      });
      

      Sie haben gerade erfolgreich eine GET-Anfrage mit der Random User API und der Fetch-API durchgeführt. Im nächsten Schritt lernen Sie, wie Sie POST-Anfragen ausführen.

      Schritt 3 — Handhaben von POST-Anfragen

      Fetch ist standardmäßig auf GET-Anfragen eingestellt, doch Sie können auch alle anderen Arten von Anfragen verwenden, die Kopfzeilen ändern und Daten senden. Dazu müssen Sie Ihr Objekt festlegen und als zweites Argument der Funktion fetch übergeben.

      Erstellen Sie vor der Erstellung einer POST-Anfrage die Daten, die Sie an die API senden möchten. Dies wird ein Objekt namens data mit dem Schlüssel name und dem Wert Sammy (oder Ihrem Namen) sein:

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

      Stellen Sie sicher, dass Sie eine konstante Variable einfügen, die den Link der Random User API enthält.

      Da es sich um eine POST-Anfrage handelt, müssen Sie dies explizit angeben. Erstellen Sie ein Objekt namens fetchData:

      let fetchData = {
      
      }
      

      Dieses Objekt muss drei Schlüssel enthalten: method, body und headers. Der Schlüssel method sollte den Wert 'POST' haben. body sollte gleich dem gerade erstellten Objekt data gesetzt werden. headers sollte den Wert von new Headers() haben:

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

      Die Schnittstelle Headers ist eine Eigenschaft der Fetch-API, mit der Sie verschiedene Aktionen für HTTP-Anfragen und Antwort-Header durchführen können. Wenn Sie mehr darüber erfahren möchten, finden Sie in diesem Artikel namens Definieren von Routen und HTTP-Anfragemethoden in Express weitere Informationen.

      Mit diesem Code kann die POST-Anfrage unter Verwendung der Fetch-API erstellt werden. Sie schließen url und fetchData als Argumente für Ihre POST-Anfrage fetch ein:

      fetch(url, fetchData)
      

      Die Funktion then() enthält Code, der die vom Random User API-Server empfangene Antwort verarbeitet:

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

      Es gibt auch eine andere Möglichkeit zur Erstellung eines Objekts und der Verwendung der Funktion fetch(). Anstatt ein Objekt wie fetchData zu erstellen, können Sie den Anfragekonstruktor verwenden, um Ihr Anfrageobjekt zu erstellen. Erstellen Sie dazu eine Variable namens request:

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

      Die Variable request sollte gleich new Request gesetzt werden. Das Konstrukt new Request nimmt zwei Argumente an: die API-URL (url) und ein Objekt. Das Objekt sollte auch die Schlüssel method, body und headers enthalten, genau wie fetchData:

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

      Jetzt kann request als einziges Argument für fetch() verwendet werden, da es auch die API-URL enthält:

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

      Insgesamt sieht Ihr Code wie folgt aus:

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

      Jetzt kennen Sie zwei Methoden zur Erstellung und Ausführung von POST-Anfragen mit der Fetch-API.

      Zusammenfassung

      Obwohl die Fetch-API noch nicht von allen Browsern unterstützt wird, ist sie eine gute Alternative zu XMLHttpRequest. Wenn Sie lernen möchten, wie Sie Web-APIs mit React aufrufen, lesen Sie diesen Artikel zu diesem Thema.



      Source link

      Anzeigen von Daten aus der DigitalOcean-API mit Django


      Der Autor hat die Mozilla Foundation dazu ausgewählt, im Rahmen des Programms Write for DOnations eine Spende zu erhalten.

      Einführung

      Da der Bedarf nach einer Full-Stack-Entwicklung weiter wächst, sorgen Web-Frameworks für Entwicklungsabläufe, die einfacher und effizienter sind; Django ist eines dieser Frameworks. Django kommt bei bekannten Websites wie Mozilla, Pinterest und Instagram zum Einsatz. Im Gegensatz zu Flask, das ein neutrales Mikro-Framework ist, enthält das Django PyPI-Paket alles, was Sie zur Full-Stack-Entwicklung benötigen; eine Datenbank oder Kontrolltafel für die Entwicklung muss nicht eingerichtet werden.

      Ein verbreitetes Anwendungsbeispiel für Django besteht in der Anzeige von Informationen aus APIs (wie Instagram-Posts oder GitHub-Repositorys) in Ihren eigenen Websites und Web-Apps. Zwar ist dies auch mit anderen Frameworks möglich, doch bedeutet das Motto “Batterien inbegriffen” von Django, dass der Aufwand geringer ist und weniger Pakete benötigt werden, um dasselbe Ergebnis zu erzielen.

      In diesem Tutorial erstellen Sie ein Django-Projekt, das die Droplet-Informationen Ihres DigitalOcean-Kontos mit der DigitalOcean v2 API anzeigt. Genauer gesagt werden Sie eine Website erstellen, die eine Tabelle mit Droplets anzeigt, in der ihre jeweiligen IP-Adressen, IDs, Hosting-Regionen und Ressourcen aufgeführt werden. Ihre Website wird BulmaCSS verwenden, um die Seite so zu gestalten, dass Sie sich auf die Entwicklung konzentrieren können und die Seite am Ende trotzdem gut aussieht.

      Nach Abschluss dieses Tutorials werden Sie über ein Django-Projekt verfügen, das eine Webseite erstellen kann, die wie folgt aussieht:

      Vorlage mit Tabelle von Droplet-Daten

      Voraussetzungen

      Bevor Sie diese Anleitung beginnen, benötigen Sie Folgendes:

      • Ein DigitalOcean-Konto mit mindestens einem Droplet und einem persönlichen Zugriffstoken. Stellen Sie sicher, dass Sie das Token an einem sicheren Ort aufbewahren; Sie werden es später in dem Tutorial noch benötigen.
      • Vertrautheit mit dem Richten von Anfragen an APIs. Ein umfassendes Tutorial zur Arbeit mit APIs finden Sie unter Verwenden von Web-APIs in Python3.
      • Eine lokale virtuelle Umgebung für Python zur Aufrechterhaltung von Abhängigkeiten. In diesem Tutorial verwenden wir den Namen do_django_api für unser Projektverzeichnis und env für unsere virtuelle Umgebung.
      • Vertrautheit mit der Vorlagenlogik von Django beim Rendern von Seiten mit API-Daten.
      • Vertrautheit mit der Anzeigelogik von Django bei der Handhabung von Daten, die von der API empfangen werden, und Übergabe an eine Vorlage für das Rendering.

      Schritt 1 — Einrichten eines einfachen Django-Projekts

      Installieren Sie Django aus der virtuellen Umgebung env heraus:

      Jetzt können Sie ein Django-Projekt starten und einige anfängliche Einrichtungsbefehle ausführen.

      Verwenden Sie django-admin startproject <name>, um im Projektordner, der den Namen Ihres Django-Projekts trägt, ein Unterverzeichnis zu erstellen; wechseln Sie anschließend in dieses Verzeichnis.

      • django-admin startproject do_django_project
      • cd do_django_project

      Nach der Erstellung finden Sie in diesem Unterverzeichnis manage.py; das ist die übliche Methode, um mit Django zu interagieren und Ihr Projekt auszuführen. Verwenden Sie migrate, um die Entwicklungsdatenbank von Django zu aktualisieren:

      • python3 manage.py migrate

      Sie werden eine Ausgabe sehen, die folgendermaßen aussieht, während die Datenbank aktualisiert wird:

      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

      Verwenden Sie als Nächstes den Befehl runserver, um das Projekt auszuführen, damit Sie es testen können:

      • python3 manage.py runserver

      Die Ausgabe sieht wie folgt aus, während der Server gestartet wird:

      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.

      Sie verfügen nun über ein einfaches Django-Projekt und einen Entwicklungsserver, der ausgeführt wird. Um Ihren ausgeführten Entwicklungsserver anzuzeigen, rufen Sie in einem Browser 127.0.0.1:8000 auf. Damit wird die Startseite von Django angezeigt:

      Allgemeine Django-Startseite

      Als Nächstes erstellen Sie eine Django-App und konfigurieren Ihr Projekt, um eine Ansicht von dieser App auszuführen, damit Sie etwas Aufregenderes als die Standardseite sehen.

      Schritt 2 — Einrichten einer einfachen Django-App

      In diesem Schritt schaffen Sie das Fundament für die App, die Ihre Droplet-Ergebnisse enthalten wird. Sie werden später wieder zu dieser App zurückkehren, sobald Sie den API-Aufruf eingerichtet haben, um die App mit Daten zu füllen.

      Stellen Sie sicher, dass Sie sich im Verzeichnis do_django_project befinden, und erstellen Sie mit dem folgenden Befehl eine Django-App:

      • python3 manage.py startapp display_droplets

      Jetzt müssen Sie die neue App INSTALLED_APPS in der Datei settings.py hinzufügen, damit Django sie erkennen kann. settings.py ist eine Django-Konfigurationsdatei, die sich im Django-Projekt in einem anderen Unterverzeichnis befindet und den gleichen Namen trägt wie der Projektordner (do_django_project). Django hat beide Ordner für Sie erstellt. Wechseln Sie zum Verzeichnis do_django_project:

      Bearbeiten Sie settings.py in einem Editor Ihrer Wahl:

      Fügen Sie Ihre neue App dem Abschnitt INSTALLED_APPS der Datei hinzu:

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

      Speichern und schließen Sie die Datei, wenn Sie fertig sind.

      Anzeigefunktion GetDroplets

      Als Nächstes erstellen Sie eine Funktion namens GetDroplets in der Datei views.py der App display_droplets. Diese Funktion rendert die Vorlage,die Sie zur Anzeige von Droplet-Daten verwenden werden, als context von der API. context ist ein Wörterbuch, das es erlaubt, Daten aus Python-Code zu übernehmen und an eine HTML-Vorlage zu senden, damit sie sich in einer Webseite anzeigen lassen.

      Wechseln Sie zum Verzeichnis display_droplets:

      • cd ..
      • cd display_droplets

      Öffnen Sie views.py, um die Datei zu bearbeiten:

      Fügen Sie den folgenden Code zur Datei hinzu:

      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
      

      Speichern und schließen Sie die Datei.

      Später werden Sie diese Funktion ausfüllen und die Datei droplets.html erstellen. Zuerst konfigurieren wir aber urls.py, um diese Funktion anzurufen, wenn Sie das Stammverzeichnis des Entwicklungsservers (127.0.0.1:8000) aufrufen.

      Wechseln Sie wieder zum Verzeichnis do_django_project:

      • cd ..
      • cd do_django_project

      Öffnen Sie urls.py, um die Datei zu bearbeiten:

      Fügen Sie eine import-Anweisung für GetDroplets und dann einen zusätzlichen Pfad zu urlpatterns hinzu, der auf die neue Ansicht verweist.

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

      Wenn Sie Ihre eigenen Pfade einrichten möchten, ist der erste Parameter die URL (wie z. B. example.com/**admin**), der zweite Parameter die Funktion, die zum Erstellen der Webseite aufgerufen wird, und der dritte nur ein Name für den Pfad.

      Speichern und schließen Sie die Datei.

      Droplets-Vorlage

      Als Nächstes arbeiten Sie mit Vorlagen. Vorlagen sind HTML-Dateien, die Django zur Erstellung von Webseiten verwendet. In diesem Fall verwenden Sie eine Vorlage, um eine HTML-Seite zu erstellen, die die API-Daten anzeigt.

      Wechseln Sie wieder zum Verzeichnis display_droplets:

      • cd ..
      • cd display_droplets

      Erstellen Sie in diesem Verzeichnis einen Ordner template und wechseln Sie in dieses Verzeichnis:

      • mkdir templates
      • cd templates

      Erstellen Sie droplets.html und öffnen Sie die Datei, um sie zu bearbeiten:

      Um kein CSS für dieses Projekt schreiben zu müssen, verwenden wir Bulma CSS, da es sich dabei um ein kostenloses und schlankes CSS-Framework für die Erstellung von übersichtlichen Webseiten handelt. Sie müssen der HTML lediglich einige Klassenattribute hinzufügen.

      Jetzt erstellen wir eine Vorlage mit einer einfachen Navigationsleiste. Fügen Sie der Datei droplets.html den folgenden Code hinzu:

      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>
      

      Speichern und schließen Sie die Datei.

      Dieser Code sorgt dafür, dass Bulma in den HTML-Baustein importiert und eine nav-Leiste zur Anzeige von “Droplets” erstellt wird.

      Aktualisieren Sie Ihren Browser-Tab, um die Änderungen, die Sie an der Vorlage vorgenommen haben, anzuzeigen.

      Vorlage mit einfacher Kopfzeile

      Bisher haben Sie noch keine APIs verwendet; Sie haben vielmehr ein Fundament für das Projekt geschaffen. Als Nächstes nutzen Sie diese Seite sinnvoll, indem Sie einen API-Aufruf einrichten und die Droplet-Daten bereitstellen.

      Schritt 3 — Einrichten des API-Aufrufs

      In diesem Schritt richten Sie einen API-Aufruf ein und senden die Droplet-Daten als Kontext an die Vorlage, um in einer Tabelle angezeigt zu werden.

      Abrufen von Droplet-Daten

      Navigieren Sie zurück zum App-Verzeichnis display_droplets:

      Installieren Sie die Bibliothek requests, damit Sie mit der API kommunizieren können:

      Mithilfe der Bibliothek requests kann Ihr Code Daten von APIs anfordern und Kopfzeilen hinzufügen (zusätzliche Daten, die mit unserer Anfrage gesendet werden).

      Als Nächstes erstellen Sie eine Datei services.py, über die Sie den API-Aufruf vornehmen. Diese Funktion verwendet requests, um mit https://api.digitalocean.com/v2/droplets zu kommunizieren und jedes Droplet in der JSON-Datei anzufügen, das an eine Liste zurückgegeben wird.

      Öffnen Sie services.py, um die Datei zu bearbeiten:

      Fügen Sie den folgenden Code zur Datei hinzu:

      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
      

      Innerhalb der Funktion get_droplets passieren zwei Dinge: Es wird eine Anfrage vorgenommen und Daten werden analysiert. url enthält die URL, die Droplet-Daten von der DigitalOcean-API anfordert. r speichert die angeforderten Daten.

      requests übernimmt in diesem Fall zwei Parameter: url und headers. Wenn Sie Daten von einer anderen API nutzen möchten, ersetzen Sie den Wert url durch die entsprechende URL. headers sendet DigitalOcean Ihr Zugriffstoken, damit das Unternehmen weiß, dass Sie die Anfrage vornehmen dürfen und für welches Konto die Anfrage vorgenommen wird.

      droplets enthält die Informationen aus der Variable r, wurde nun jedoch von JSON, dem Format, in dem die API Informationen sendet, in ein Wörterbuch konvertiert, das bequem in einer for-Schleife zu verwenden ist.

      Die nächsten drei Zeilen erstellen ein Array namens droplet_list[]. Dann iteriert eine for-Schleife über die Informationen in droplets und fügt jedes Element der Liste hinzu. Alle von der API übernommenen und in droplets gespeicherten Informationen finden Sie in der Entwicklerdokumentation von DigitalOcean.

      Anmerkung: Vergessen Sie nicht, access_token durch Ihr Zugriffstoken zu ersetzen. Bewahren Sie das Token außerdem sicher auf und veröffentlichen Sie es niemals online.

      Speichern und schließen Sie die Datei.

      Schutz Ihres Zugriffstokens

      Sie sollten Ihr Zugriffstoken stets verstecken. Wenn aber auch andere Personen das Projekt ausführen dürfen, sollten Sie ihnen eine einfache Möglichkeit bieten, um eigene Zugriffstoken hinzuzufügen, ohne dass Python-Code bearbeitet werden muss. DotENV ist die Lösung, wenn Variablen in einer .env-Datei aufbewahrt werden, die bequem bearbeitet werden kann.

      Wechseln Sie wieder zum Verzeichnis do_django_project:

      Um mit Umgebungsvariablen zu arbeiten, installieren Sie python-dotenv:

      • pip install python-dotenv

      Nach der Installation müssen Sie Django für den Umgang mit Umgebungsvariablen konfigurieren, damit Sie in Code auf sie verweisen können. Dazu müssen Sie einige Codezeilen zu manage.py und wsgi.py hinzufügen.

      Öffnen Sie manage.py, um die Datei zu bearbeiten:

      Fügen Sie folgenden Code hinzu:

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

      Das Hinzufügen von dem Code in manage.py bedeutet, dass bei der Ausgabe von Befehlen an Django in der Entwicklung Umgebungsvariablen von Ihrer .env-Datei verarbeitet werden.

      Speichern und schließen Sie die Datei.

      Wenn Sie in Ihren Produktionsprojekten Umgebungsvariablen bearbeiten müssen, können Sie dies mit der Datei wsgi.py tun. Wechseln Sie zum Verzeichnis do_django_project:

      Öffnen Sie anschließend wsgi.py, um die Datei zu bearbeiten:

      Fügen Sie wsgi.py folgenden Code hinzu:

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

      Dieser Codeausschnitt weist einen zusätzlichen os.path.dirname() auf, weil wsgi.py zwei Verzeichnisse zurückgehen muss, um die Datei .env zu finden. Dieser Ausschnitt ist nicht identisch mit dem, der für manage.py verwendet wird.

      Speichern und schließen Sie die Datei.

      Nun können Sie anstelle Ihres Zugriffstokens eine Umgebungsvariable in services.py verwenden. Wechseln Sie wieder zum Verzeichnis display_droplets:

      • cd ..
      • cd display_droplets

      Öffnen Sie services.py, um die Datei zu bearbeiten:

      Ersetzen Sie nun Ihr Zugriffstoken durch eine Umgebungsvariable:

      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
      

      Speichern und schließen Sie die Datei.

      Der nächste Schritt besteht aus der Erstellung einer .env-Datei. Wechseln Sie wieder zum Verzeichnis do_django_project:

      Erstellen Sie eine .env-Datei und öffnen Sie die Datei, um sie zu bearbeiten:

      Fügen Sie in .env Ihr Token als Variable DO_ACCESS_TOKEN hinzu:

      do_django_api/do_django_project/.env

      DO_ACCESS_TOKEN=access_token
      

      Speichern und schließen Sie die Datei.

      Anmerkung: Fügen Sie .env zu Ihrer .gitignore-Datei hinzu, damit sie nie in Ihren Commits enthalten ist.

      Die API-Verbindung ist nun eingerichtet und konfiguriert; zudem haben Sie Ihr Zugriffstoken geschützt. Es ist an der Zeit, die Informationen, die Sie für den Benutzer abgerufen haben, bereitzustellen.

      Schritt 4 — Umgang mit Droplet-Daten in Ansichten und Vorlagen

      Nachdem Sie nun API-Aufrufe vornehmen können, müssen Sie die Droplet-Daten zum Rendern an die Vorlage senden. Kehren wir zum Stub der Funktion GetDroplets zurück, die Sie zuvor in views.py erstellt haben. In der Funktion senden Sie droplet_list als Kontext an die Vorlage droplets.html.

      Wechseln Sie zum Verzeichnis display_droplets:

      Öffnen Sie views.py, um die Datei zu bearbeiten:

      Fügen Sie views.py folgenden Code hinzu:

      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
      

      Die an die Vorlage droplets.html gesendeten Informationen werden mit dem Wörterbuch context verwaltet. Aus diesem Grund dient droplets als Schlüssel, während das von get_droplets() zurückgegebene Array als Wert fungiert.

      Speichern und schließen Sie die Datei.

      Bereitstellen der Daten in der Vorlage

      In der Vorlage droplets.html erstellen Sie eine Tabelle und befüllen sie mit den Droplet-Daten.

      Wechseln Sie zum Verzeichnis templates:

      Öffnen Sie droplets.html, um die Datei zu bearbeiten:

      Fügen Sie nach dem Element nav in droplets.html folgenden Code hinzu:

      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 %} ist eine Schleife, die durch das Array von Droplets, die aus views.py abgerufen wurden, iteriert. Jedes Droplet wird in eine Tabellenzeile eingefügt. Die verschiedenen {{ droplet.<attribute> }}-Zeilen rufen dieses Attribut für jedes Droplet in der Schleife ab und fügen es in eine Tabellenzelle ein.

      Speichern und schließen Sie die Datei.

      Aktualisieren Sie Ihren Browser; es wird eine Liste von Droplets angezeigt.

      Vorlage mit Tabelle an Droplet-Daten

      Nun können Sie die DigitalOcean-API in Ihren Django-Projekten verwenden. Sie haben die von der API abgerufenen Daten übernommen und in die zuvor erstellte Vorlage eingespeist, um die Informationen auf lesbare und flexible Weise anzuzeigen.

      Zusammenfassung

      In diesem Artikel haben Sie ein Django-Projekt erstellt, das Droplet-Daten aus der DigitalOcean-API im Bulma CSS-Stil anzeigen kann. In diesem Tutorial haben Sie drei wichtige Fähigkeiten erlernt:

      • Verwalten von API-Anfragen in Python mit den Modulen requests und json.
      • Anzeigen von API-Daten in einem Django-Projekt unter Verwendung der Logiken view und template.
      • Sicheres Verwalten Ihrer API-Token in Django mit dotenv.

      Nachdem Sie eine Einführung in die Handhabung von APIs in Django erhalten haben, können Sie nun ein eigenes Projekt erstellen: entweder mit einer anderen Funktion aus der DigitalOcean-API oder einer ganz anderen API. Zudem können Sie andere Django-Tutorials bzw. ein ähnliches Tutorial mit dem React-Framework konsultieren.





      Source link