TOC

Anzeigen von Daten aus der DigitalOcean-API mit React

Der Autor hat das Programm Wikimedia Foundation ausgewählt, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten .

Einführung

In den letzten Jahren haben Open-Source-Webframeworks das Codieren einer Anwendung erheblich vereinfacht. React hat zum Beispiel die Popularität von JavaScript nur dadurch erhöht, dass die Sprache für neue Entwickler zugänglicher wurde und die Produktivität erfahrener Entwickler gesteigert wurde. Mit React, das von Facebook erstellt wurde, können Entwickler schnell High-End-Benutzeroberflächen für hochskalierbare Webanwendungen erstellen, indem Funktionen wie deklarative Ansichten, Statusverwaltung und clientseitiges Rendern unterstützt werden, die die Komplexität der Erstellung von und erheblich reduzieren können App in JavaScript.

Sie können Frameworks wie React zum Laden und Anzeigen von Daten aus der DigitalOcean API verwenden, mit denen Sie Ihre Droplets und andere Produkte in der DigitalOcean-Cloud mithilfe von HTTP-Anforderungen verwalten können. Obwohl mit vielen anderen JavaScript-Frameworks Daten von einer API abgerufen werden können, bietet React nützliche Vorteile wie Lebenszyklen und Verwaltung des lokalen Status, die es für den Job besonders geeignet machen. Mit React werden die von der API abgerufenen Daten beim Start der Anwendung zum lokalen Status hinzugefügt und können verschiedene Lebenszyklen durchlaufen, während Komponenten aktiviert und deaktiviert werden. Sie können die Daten jederzeit von Ihrem lokalen Status abrufen und entsprechend anzeigen.

In diesem Lernprogramm erstellen Sie eine einfache React-Anwendung, die mit der DigitalOcean API v2 interagiert, um Anrufe zu tätigen und Informationen zu Ihren Droplets abzurufen. Ihre App zeigt eine Liste mit Ihren aktuellen Droplets und deren Details wie Name, Region und technischen Spezifikationen an. Sie verwenden das Front-End-Framework Bootstrap, um Ihre Anwendung zu gestalten.

Sobald Sie dieses Tutorial beendet haben, wird eine grundlegende Benutzeroberfläche mit einer Liste Ihrer DigitalOcean-Tröpfchen angezeigt, die so gestaltet ist, dass sie wie folgt aussieht:

image: https://assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [Die endgültige Version Ihrer React-Anwendung]

Voraussetzungen

Bevor Sie mit diesem Handbuch beginnen, benötigen Sie ein DigitalOcean-Konto und mindestens ein https://www.digitalocean.com/docs/droplets/how-to/ create / [Droplet setup] zusätzlich zu den folgenden:

Schritt 1 - Erstellen einer Basisreaktionsanwendung

In diesem ersten Schritt erstellen Sie eine grundlegende React-Anwendung mit dem Paket Create React App von npm. Dieses Paket installiert und konfiguriert automatisch die wesentlichen Abhängigkeiten, die zum Ausführen von React erforderlich sind, z. B. den Modul-Builder Webpack und den JavaScript-Compiler Babel. Nach der Installation führen Sie das Create React App-Paket mit dem Paket-Runner npx aus, der mit vorinstalliert ist Node.js.

Führen Sie den folgenden Befehl aus, um Create React App zu installieren und die erste Version Ihrer Anwendung zu erstellen. Ersetzen Sie dabei "+ my-app +" durch den Namen, den Sie Ihrer Anwendung geben möchten:

npx create-react-app

Wechseln Sie nach Abschluss der Installation in das neue Projektverzeichnis und starten Sie die Anwendung mit den folgenden Befehlen:

cd
npm start

Der vorstehende Befehl startet einen von Create React App bereitgestellten lokalen Entwicklungsserver, der die Eingabeaufforderung in Ihrem Terminal deaktiviert. Um mit dem Tutorial fortzufahren, öffnen Sie ein neues Terminalfenster und navigieren Sie zurück zum Projektverzeichnis, bevor Sie mit dem nächsten Schritt fortfahren.

Sie haben jetzt die erste Version Ihrer React-Anwendung im Entwicklungsmodus, die Sie anzeigen können, indem Sie "+ http: // localhost: 3000 +" in einem Webbrowser öffnen. Zu diesem Zeitpunkt zeigt Ihre App nur den Begrüßungsbildschirm von Create React App an:

image: https://assets.digitalocean.com/articles/cart_61768/React_App_BoilerPlate.jpg [Die erste Version Ihrer React-Anwendung]

Nachdem Sie die erste Version Ihrer React-Anwendung installiert und erstellt haben, können Sie Ihrer App eine Tabellenkomponente hinzufügen, in der die Daten der DigitalOcean-API gespeichert werden.

Schritt 2 - Erstellen einer Komponente zum Anzeigen der Tropfendaten

In diesem Schritt erstellen Sie die erste Komponente, die Informationen zu Ihren Droplets anzeigt. Diese Komponente ist eine Tabelle, in der alle Ihre Tröpfchen und die zugehörigen Details aufgelistet sind.

In der DigitalOcean-Dokumentation API wird angegeben, dass Sie eine Liste mit all Ihren Droplets abrufen können, indem Sie mit cURL eine Anforderung an den folgenden Endpunkt senden: `+ https: // api .digitalocean.com / v2 / droplets + `. Mit der Ausgabe dieser Anforderung können Sie für jedes Droplet eine Tabellenkomponente erstellen, die "+ id ", " name ", " region ", " memory ", " vcpus " und " disk +" enthält. Später in diesem Lernprogramm fügen Sie die von der API abgerufenen Daten in die Tabellenkomponente ein.

Um eine klare Struktur für Ihre Anwendung zu definieren, erstellen Sie ein neues Verzeichnis mit dem Namen "+ components " im Verzeichnis " src ", in dem Sie den gesamten Code speichern, den Sie schreiben. Erstellen Sie eine neue Datei mit dem Namen " Table.js " im Verzeichnis " src / components +" und öffnen Sie sie mit nano oder einem Texteditor Ihrer Wahl:

mkdir src/components
nano src/components/Table.js

Definieren Sie die Tabellenkomponente, indem Sie der Datei den folgenden Code hinzufügen:

src / components / Table.js

import React from 'react';

const Table = () => {
 return (
   <table>
     <thead>
       <tr>
         <th>Id</th>
         <th>Name</th>
         <th>Region</th>
         <th>Memory</th>
         <th>CPUs</th>
         <th>Disk Size</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
       </tr>
     </tbody>
   </table>
 );
}

export default Table

Der obige Codeblock importiert das React-Framework und definiert eine neue Komponente namens "+ Table", die aus einer Tabelle mit einer Überschrift und einem Text besteht.

Wenn Sie diese Codezeilen hinzugefügt haben, speichern und schließen Sie die Datei. Mit dem Nano-Texteditor können Sie dies tun, indem Sie "+ STRG + X " drücken, " y " eingeben und " ENTER +" drücken.

Nachdem Sie die Tabellenkomponente erstellt haben, ist es an der Zeit, diese Komponente in Ihre Anwendung aufzunehmen. Dazu importieren Sie die Komponente in den Einstiegspunkt der Anwendung, der sich in der Datei "+ src / App.js +" befindet. Öffnen Sie diese Datei mit dem folgenden Befehl:

nano src/App.js

Entfernen Sie als nächstes den Code, der die Begrüßungsnachricht "Create React App" in "+ src / App.js +" anzeigt, die im folgenden Codeblock hervorgehoben ist.

src / App.js

import React, { Component } from 'react';



class App extends Component {
 render() {
   return (
     <div className="App">














     </div>
   );
 }
}

export default App;

Fügen Sie nach dem Entfernen der Zeilen, in denen die Begrüßungsnachricht angezeigt wurde, die Tabellenkomponente in dieselbe Datei ein, indem Sie die folgenden hervorgehobenen Zeilen hinzufügen:

src / App.js

import React, { Component } from 'react';


class App extends Component {
 render() {
   return (
     <div className="App">

     </div>
   );
 }
}

export default App;

Wenn Sie in Ihrem Webbrowser erneut auf + http: // localhost: 3000 + zugreifen, zeigt Ihre Anwendung jetzt eine Basistabelle mit Tabellenköpfen an:

image: https: //assets.digitalocean.com/articles/cart_61768/React_App_TableComponent.jpg [Die React-Anwendung mit einer Basistabelle]

In diesem Schritt haben Sie eine Tabellenkomponente erstellt und diese Komponente in den Einstiegspunkt Ihrer Anwendung aufgenommen. Als Nächstes richten Sie eine Verbindung zur DigitalOcean-API ein, mit der Sie die Daten abrufen, die in dieser Tabelle angezeigt werden.

Schritt 3 - Sichern Ihrer API-Anmeldeinformationen

Das Einrichten einer Verbindung zur DigitalOcean-API umfasst mehrere Aktionen, beginnend mit dem sicheren Speichern Ihres persönlichen Zugriffstokens als Umgebungsvariable. Verwenden Sie dazu dotenv, ein Paket, mit dem Sie vertrauliche Informationen in einer "+ .env +" - Datei speichern können, auf die Ihre Anwendung später über die Umgebung zugreifen kann.

Benutze npm um das + dotenv + Paket zu installieren:

npm install dotenv

Erstellen Sie nach der Installation von "+ dotenv " eine Umgebungsdatei mit dem Namen " .env +" im Stammverzeichnis Ihrer Anwendung, indem Sie den folgenden Befehl ausführen:

nano .env

Fügen Sie Folgendes zu + .env + hinzu, das Ihr persönliches Zugriffstoken und die URL für die DigitalOcean-API enthält:

env
DO_API_URL=https://api.digitalocean.com/v2
DO_ACCESS_TOKEN=

Um sicherzustellen, dass diese vertraulichen Daten nicht in ein Repository übertragen werden, fügen Sie sie mit dem folgenden Befehl zu Ihrer "+ .gitignore +" - Datei hinzu:

echo ".env" >> .gitignore

Sie haben jetzt eine sichere und einfache Konfigurationsdatei für Ihre Umgebungsvariablen erstellt, die Ihrer Anwendung die Informationen liefert, die zum Senden von Anforderungen an die DigitalOcean-API erforderlich sind. Um sicherzustellen, dass Ihre API-Anmeldeinformationen auf der Clientseite nicht sichtbar sind, richten Sie als Nächstes einen Proxyserver ein, um Anforderungen und Antworten zwischen Ihrem Anwendungsserver und der DigitalOcean-API weiterzuleiten.

Installieren Sie die _https: //www.redhat.com/en/topics/middleware/what-is-middleware [middleware] _ + http-proxy-middleware +, indem Sie den folgenden Befehl ausführen:

npm install http-proxy-middleware

Nach der Installation ist der nächste Schritt, Ihren Proxy einzurichten. Erstellen Sie die Datei "+ setupProxy.js" im Verzeichnis "+ src":

nano src/setupProxy.js

Fügen Sie in dieser Datei den folgenden Code hinzu, um den Proxyserver einzurichten:

src / setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {

 require('dotenv').config()

 const apiUrl =
 const apiToken =
 const headers  = {
   "Content-Type": "application/json",
   "Authorization": "Bearer " + apiToken
 }

 // define http-proxy-middleware
 let DOProxy = proxy({
   target: apiUrl,
   changeOrigin: true,
 pathRewrite: {
   '^/api/' : '/'
 },
   headers: headers,
 })

 // define the route and map the proxy
 app.use('/api', DOProxy)

};

Im vorhergehenden Codeblock legt "+ const apiURL = " die URL für die DigitalOcean-API als Endpunkt fest, und " const apiToken = " lädt Ihr persönliches Zugriffstoken in den Proxyserver. Mit der Option " pathRewrite" wird der Proxyserver an "+ / api" und nicht an "+ / +" angehängt, sodass der Anwendungsserver nicht gestört wird, aber dennoch mit der DigitalOcean-API übereinstimmt.

Sie haben jetzt erfolgreich einen Proxyserver erstellt, der alle API-Anforderungen aus Ihrer React-Anwendung an die DigitalOcean-API sendet. Dieser Proxyserver stellt sicher, dass Ihr persönliches Zugriffstoken, das sicher als Umgebungsvariable gespeichert ist, nicht auf der Clientseite verfügbar gemacht wird. Als Nächstes erstellen Sie die tatsächlichen Anforderungen zum Abrufen Ihrer Droplet-Daten für Ihre Anwendung.

Schritt 4 - API-Aufrufe an DigitalOcean senden

Nachdem Ihre Anzeigekomponente bereit ist und die Verbindungsdetails zu DigitalOcean über einen Proxyserver gespeichert und gesichert wurden, können Sie mit dem Abrufen von Daten von der DigitalOcean-API beginnen. Fügen Sie zuerst die folgenden hervorgehobenen Codezeilen zu "+ src / App.js " hinzu, unmittelbar bevor und nachdem Sie die Klasse " App +" deklarieren:

src / App.js

import React, { Component } from 'react';
...
class App extends Component {







   render() {
...

Diese Codezeilen rufen eine "+ Konstruktor " -Methode in Ihrer Klassenkomponente auf, die in React den lokalen Zustand initialisiert, indem sie " this.state +" mit einem Objekt oder Objekten versieht. In diesem Fall sind die Objekte Ihre Tröpfchen. Aus dem obigen Codeblock können Sie ersehen, dass das Array mit Ihren Droplets leer ist, sodass Sie es mit den Ergebnissen des API-Aufrufs füllen können.

Um Ihre aktuellen Droplets anzuzeigen, müssen Sie diese Informationen aus der DigitalOcean-API abrufen. Mit der JavaScript-Funktion Fetch senden Sie eine Anfrage an die DigitalOcean-API und aktualisieren den Status für "+ droplets " mit Daten, die Sie abrufen. Sie können dies mit der Methode ` componentDidMount +` tun, indem Sie nach dem Konstruktor die folgenden Codezeilen einfügen:

src / App.js

class App extends Component {
 constructor(props) {
   super(props);
   this.state = {
     droplets: []
   }
 }







...

Wenn Ihre Droplet-Daten im Status "" gespeichert sind, ist es an der Zeit, sie innerhalb der Funktion " render " Ihrer Anwendung abzurufen und diese Daten als " prop " an die Tabellenkomponente zu senden. Fügen Sie der Tabellenkomponente in ` App.js` die folgende hervorgehobene Anweisung hinzu:

src / App.js

...
class App extends Component {
 render() {
   return (
     <div className="App">
       <Table  />
     </div>
   );
 }
}
...

Sie haben jetzt die Funktion zum Abrufen von Daten von der API erstellt, müssen diese Daten jedoch weiterhin über einen Webbrowser zugänglich machen. Im nächsten Schritt führen Sie dies durch, indem Sie Ihre Droplet-Daten in Ihrer Tabellenkomponente anzeigen.

Schritt 5 - Anzeigen von Tropfendaten in Ihrer Tabellenkomponente

Nachdem Sie die Droplet-Daten in die Tabellenkomponente übertragen haben, können Sie diese Daten über die Zeilen in der Tabelle iterieren. Da die Anwendung die Anforderung an die API sendet, nachdem "+ App.js" bereitgestellt wurde, ist der Eigenschaftswert für "+ Droplets" zunächst leer. Daher müssen Sie auch Code hinzufügen, um sicherzustellen, dass "+ droplets " nicht leer ist, bevor Sie versuchen, die Daten anzuzeigen. Fügen Sie dazu die folgenden hervorgehobenen Zeilen in den Abschnitt " body" von "+ Table.js" ein:

src / components / Table.js

const Table = () => {
 return (
   <table>
     <thead>
       <tr>
         <th>Id</th>
         <th>Name</th>
         <th>Region</th>
         <th>Memory</th>
         <th>CPUs</th>
         <th>Disk Size</th>
       </tr>
     </thead>
     <tbody>












     </tbody>
   </table>
 );
}

Mit dem obigen Code wird in Ihrer Anwendung die Meldung "+ Loading …​ +" angezeigt, wenn keine Droplet-Daten vorhanden sind. Wenn die DigitalOcean-API Droplet-Daten zurückgibt, iteriert Ihre Anwendung diese über Tabellenzeilen mit Spalten für jeden Datentyp und zeigt das Ergebnis Ihrem Webbrowser an:

image: https://assets.digitalocean.com/articles/cart_61768/React_App_WithData.jpg [Die Anwendung mit Tropfendaten reagieren]

In diesem Schritt haben Sie die Tabellenkomponente Ihrer Anwendung so geändert, dass Ihre Droplet-Daten in einem Webbrowser angezeigt werden, und eine Platzhalternachricht für den Fall hinzugefügt, dass keine Droplets gefunden werden. Als Nächstes verwenden Sie ein Front-End-Webframework, um Ihre Daten optisch ansprechender und übersichtlicher zu gestalten.

Schritt 6 - Gestalten der Tabellenkomponente mit Bootstrap

Ihre Tabelle ist jetzt mit Daten gefüllt, aber die Informationen werden nicht auf ansprechende Weise angezeigt. Um dies zu beheben, können Sie Ihre Anwendung formatieren, indem Sie Ihrem Projekt Bootstrap hinzufügen. Bootstrap ist eine Open-Source-Stil- und Komponentenbibliothek, mit der Sie einem Projekt mit CSS-Vorlagen einen ansprechenden Stil hinzufügen können.

Installieren Sie Bootstrap mit npm mit dem folgenden Befehl:

npm install bootstrap

Nachdem Bootstrap die Installation abgeschlossen hat, importieren Sie die CSS-Datei in Ihr Projekt, indem Sie die folgende hervorgehobene Zeile zu + src / App.js + hinzufügen:

src / App.js

import React, { Component } from 'react';
import Table from './components/Table.js';


class App extends Component {
...

Nachdem Sie das CSS importiert haben, wenden Sie das Bootstrap-Styling auf Ihre Tabellenkomponente an, indem Sie die Klasse "+ table " zum Tag " <table> " in " src / components / Table.js +" hinzufügen.

src / components / Table.js

import React from 'react';

const Table = ({ droplets }) => {
 return (
   <table >
     <thead>
...

Beenden Sie die Gestaltung Ihrer Anwendung, indem Sie eine Überschrift mit einem Titel und dem DigitalOcean-Logo über Ihrem Tisch platzieren. Klicken Sie auf * Download Logos * im Bereich * Brand Assets * von DigitalOcean’s Press page, um eine Reihe von Logos herunterzuladen, und wählen Sie Ihren Favoriten aus dem Verzeichnis + SVG + (this Das Tutorial verwendet "+ DO_Logo_icon_blue.svg " und fügt es Ihrem Projekt hinzu, indem Sie die Logodatei in ein neues Verzeichnis mit dem Namen " assets " im Verzeichnis " src " Ihres Projekts kopieren. Importieren Sie das Logo nach dem Hochladen in die Kopfzeile, indem Sie die hervorgehobenen Zeilen zu ` src / App.js +` hinzufügen:

src / App.js

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';


class App extends Component {
...
 render() {
   return (
     <div className="App">





       <Table droplets={ this.state.droplets } />
     </div>
   );
 }
}

export default App;

Im vorhergehenden Codeblock fügen die Klassen innerhalb des Tags "+ nav +" Ihrem Header einen bestimmten Stil von Bootstrap hinzu.

Nachdem Sie Bootstrap importiert und das Design auf Ihre Anwendung angewendet haben, werden Ihre Daten in Ihrem Webbrowser mit einer übersichtlichen und lesbaren Anzeige angezeigt:

image: https://assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [Die endgültige Version Ihrer React-Anwendung]

Fazit

In diesem Artikel haben Sie eine grundlegende React-Anwendung erstellt, die Daten von der DigitalOcean-API über einen gesicherten Proxyserver abruft und im Bootstrap-Stil anzeigt. Nachdem Sie mit dem React-Framework vertraut sind, können Sie die hier erlernten Konzepte auf komplexere Anwendungen anwenden, z. B. die unter https://www.digitalocean.com/community/tutorials/how-to-build-a -moderne-Webanwendung-zum-Verwalten-von-Kundeninformationen-mit-Django-und-Reagieren-auf-Ubuntu-18-04 # step-3-% E2% 80% 94-Erstellen-des-Reagieren-Frontends [ Erstellen einer modernen Webanwendung zum Verwalten von Kundeninformationen mit Django und Reagieren auf Ubuntu 18.04]. Weitere Informationen zu den mit der DigitalOcean-API möglichen Aktionen finden Sie auf der Website von DigitalOcean unter API documentation.

Related