TOC

Comment afficher les données de l’API DigitalOcean avec React

L’auteur a sélectionné le Wikimedia Foundation pour recevoir un don dans le cadre du programme Write for DOnations .

introduction

Au cours des dernières années, les infrastructures Web à code source ouvert ont grandement simplifié le processus de codage d’une application. React, par exemple, n’a fait qu’ajouter à la popularité de JavaScript en rendant le langage plus accessible aux nouveaux développeurs et en augmentant la productivité de développeurs chevronnés. Créé par Facebook, React permet aux développeurs de créer rapidement des interfaces utilisateur haut de gamme pour des applications Web hautement évolutives, en prenant en charge des fonctionnalités telles que les vues déclaratives, la gestion des états et le rendu côté client, qui permettent de réduire considérablement la complexité application en JavaScript.

Vous pouvez utiliser des frameworks tels que React pour charger et afficher des données à partir de l’API DigitalOcean, grâce à lesquelles vous pouvez gérer vos gouttelettes et autres produits dans le nuage DigitalOcean à l’aide de requêtes HTTP. Bien que l’on puisse extraire des données d’une API avec de nombreux autres frameworks JavaScript, React offre des avantages utiles, tels que les cycles de vie et la gestion des états locaux, qui le rendent particulièrement bien adapté au travail. Avec React, les données extraites de l’API sont ajoutées à l’état local au démarrage de l’application et peuvent suivre différents cycles de vie lors du montage et du démontage des composants. À tout moment, vous pouvez récupérer les données de votre état local et les afficher en conséquence.

Dans ce didacticiel, vous allez créer une application React simple qui interagit avec les DigitalOcean API v2 pour passer des appels et récupérer des informations sur vos gouttelettes. Votre application affiche une liste contenant vos gouttelettes actuelles et leurs détails, tels que le nom, la région et les spécifications techniques, et vous utiliserez la structure frontale Bootstrap pour le style de votre application.

Une fois que vous avez terminé ce didacticiel, vous aurez une interface de base affichant une liste de vos gouttelettes DigitalOcean, dont le style ressemble à celui-ci:

image: https: //assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [La version finale de votre application React]

Conditions préalables

Avant de commencer ce guide, vous devez posséder un compte DigitalOcean et au moins un https://www.digitalocean.com/docs/droplets/how-to/. create / [Droplet set up], en plus des éléments suivants:

Étape 1 - Création d’une application Basic React

Dans cette première étape, vous allez créer une application React de base à l’aide du package Create React App à partir de npm. Ce paquet installe et configure automatiquement les dépendances essentielles nécessaires à l’exécution de React, telles que le générateur de module Webpack et le compilateur JavaScript Babel. Après l’installation, vous exécuterez le package Create React App à l’aide du programme runner npx, fourni avec le logiciel pré-installé. Node.js.

Pour installer Create React App et créer la première version de votre application, exécutez la commande suivante en remplaçant «+ my-app +» par le nom que vous souhaitez donner à votre application:

npx create-react-app

Une fois l’installation terminée, accédez au nouveau répertoire du projet et lancez l’exécution de l’application à l’aide des commandes suivantes:

cd
npm start

La commande précédente démarre un serveur de développement local fourni par Create React App, qui désactive l’invite de ligne de commande dans votre terminal. Pour poursuivre le didacticiel, ouvrez une nouvelle fenêtre de terminal et revenez au répertoire du projet avant de passer à l’étape suivante.

Vous avez maintenant la première version de votre application React en mode développement, que vous pouvez afficher en ouvrant + http: // localhost: 3000 + dans un navigateur Web. À ce stade, votre application affiche uniquement l’écran de bienvenue de Create React App:

image: https: //assets.digitalocean.com/articles/cart_61768/React_App_BoilerPlate.jpg [La première version de votre application React]

Maintenant que vous avez installé et créé la première version de votre application React, vous pouvez ajouter à votre application un composant de tableau qui contiendra éventuellement les données de l’API DigitalOcean.

Étape 2 - Création d’un composant pour afficher les données de la droplet

Dans cette étape, vous allez créer le premier composant qui affiche des informations sur vos gouttelettes. Ce composant sera un tableau qui répertorie toutes vos gouttelettes et leurs détails correspondants.

Le document DigitalOcean API documentation indique que vous pouvez récupérer une liste contenant toutes vos gouttelettes en envoyant une demande au point de terminaison suivant à l’aide de cURL: + https: // api .digitalocean.com / v2 / droplets + `. En utilisant le résultat de cette requête, vous pouvez créer un composant de table contenant `+ id +, + nom +, + région +, + mémoire +, + vcpus + et + disque + `pour chaque droplet. Dans la suite de ce didacticiel, vous insérerez les données extraites de l’API dans le composant table.

Pour définir une structure claire pour votre application, créez un nouveau répertoire appelé + components + à l’intérieur du répertoire + src + où vous stockerez tout le code que vous écrivez. Créez un nouveau fichier nommé + Table.js + dans le répertoire + src / components + et ouvrez-le avec nano ou un éditeur de texte de votre choix:

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

Définissez le composant de table en ajoutant le code suivant au fichier:

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

Le bloc de code ci-dessus importe le cadre React et définit un nouveau composant appelé + Table, qui consiste en un tableau avec un en-tête et un corps.

Lorsque vous avez ajouté ces lignes de code, enregistrez et quittez le fichier. Pour ce faire, vous pouvez utiliser nano text editor en appuyant sur + CTRL + X +, en tapant + y + et en appuyant sur + + ENTER +.

Maintenant que vous avez créé le composant table, il est temps d’inclure ce composant dans votre application. Pour ce faire, vous importerez le composant dans le point d’entrée de l’application, qui se trouve dans le fichier + src / App.js +. Ouvrez ce fichier avec la commande suivante:

nano src/App.js

Ensuite, supprimez le code standard qui affiche le message de bienvenue Créer une application React dans + src / App.js +, qui est mis en surbrillance dans le bloc de code suivant.

src / App.js

import React, { Component } from 'react';



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














     </div>
   );
 }
}

export default App;

Après avoir supprimé les lignes affichant le message de bienvenue, incluez le composant table dans ce même fichier en ajoutant les lignes en surbrillance suivantes:

src / App.js

import React, { Component } from 'react';


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

     </div>
   );
 }
}

export default App;

Si vous accédez à nouveau à + ​​http: // localhost: 3000 + dans votre navigateur Web, votre application affiche désormais un tableau de base avec des en-têtes de tableau:

image: https: //assets.digitalocean.com/articles/cart_61768/React_App_TableComponent.jpg [L’application React avec une table de base]

Dans cette étape, vous avez créé un composant de table et inclus ce composant dans le point d’entrée de votre application. Ensuite, vous allez configurer une connexion à l’API DigitalOcean, que vous utiliserez pour extraire les données que cette table affichera.

Étape 3 - Sécuriser vos informations d’identification d’API

La configuration d’une connexion à l’API DigitalOcean comprend plusieurs actions, à commencer par le stockage en toute sécurité de votre jeton d’accès personnel en tant que variable d’environnement. Cela peut être fait en utilisant dotenv, un package qui vous permet de stocker des informations sensibles dans un fichier + .env + auquel votre application pourra accéder ultérieurement à partir de l’environnement.

Utilisez npm pour installer le paquet + dotenv +:

npm install dotenv

Après avoir installé + dotenv +, créez un fichier d’environnement appelé + .env + dans le répertoire racine de votre application en exécutant la commande suivante:

nano .env

Ajoutez ce qui suit dans + .env +, qui contient votre jeton d’accès personnel et l’URL de l’API DigitalOcean:

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

Pour vous assurer que ces données sensibles ne sont pas validées dans un référentiel, ajoutez-les à votre fichier + .gitignore + à l’aide de la commande suivante:

echo ".env" >> .gitignore

Vous avez maintenant créé un fichier de configuration simple et sécurisé pour vos variables d’environnement, qui fournira à votre application les informations nécessaires pour envoyer des demandes à l’API DigitalOcean. Pour vous assurer que les informations d’identification de votre API ne sont pas visibles côté client, vous allez ensuite configurer un serveur proxy pour transférer les demandes et les réponses entre votre serveur d’applications et l’API DigitalOcean.

Installez _https: //www.redhat.com/en/topics/middleware/what-is-middleware [middleware] _ + http-proxy-middleware + en exécutant la commande suivante:

npm install http-proxy-middleware

Après l’avoir installé, l’étape suivante consiste à configurer votre proxy. Créez le fichier + setupProxy.js dans le répertoire` + src`:

nano src/setupProxy.js

Dans ce fichier, ajoutez le code suivant pour configurer le serveur proxy:

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)

};

Dans le bloc de code précédent, + const apiURL = + définit l’URL de l’API DigitalOcean en tant que point de terminaison et + const apiToken = + charge votre jeton d’accès personnel dans le serveur proxy. L’option + pathRewrite monte le serveur proxy sur` + / api` plutôt que + / + afin qu’il n’interfère pas avec le serveur d’applications mais qu’il corresponde toujours à l’API DigitalOcean.

Vous avez maintenant créé avec succès un serveur proxy qui enverra toutes les demandes d’API effectuées à partir de votre application React à l’API DigitalOcean. Ce serveur proxy s’assurera que votre jeton d’accès personnel, qui est stocké en toute sécurité en tant que variable d’environnement, n’est pas exposé côté client. Vous allez ensuite créer les demandes réelles pour récupérer vos données Droplet pour votre application.

Étape 4 - Passer des appels d’API à DigitalOcean

Maintenant que votre composant d’affichage est prêt et que les informations de connexion à DigitalOcean sont stockées et sécurisées via un serveur proxy, vous pouvez commencer à récupérer les données à partir de l’API DigitalOcean. Commencez par ajouter les lignes de code surlignées suivantes à + ​​src / App.js + juste avant et après la déclaration de la classe + App +:

src / App.js

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







   render() {
...

Ces lignes de code appellent une méthode + constructor + dans votre composant de classe qui, dans React, initialise l’état local en fournissant + this.state + avec un ou plusieurs objets. Dans ce cas, les objets sont vos gouttelettes. Dans le bloc de code ci-dessus, vous pouvez voir que le tableau contenant vos gouttelettes est vide, ce qui permet de le remplir avec les résultats de l’appel d’API.

Pour afficher vos gouttelettes actuelles, vous devez extraire ces informations de l’API DigitalOcean. En utilisant la fonction JavaScript Fetch, vous envoyez une demande à l’API DigitalOcean et mettez à jour l’état de + droplets + avec données que vous récupérez. Vous pouvez le faire en utilisant la méthode + composantDidMount + en ajoutant les lignes de code suivantes après le constructeur:

src / App.js

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







...

Avec vos données Droplet stockées dans + state +, il est temps de les récupérer dans la fonction + render + de votre application et d’envoyer ces données sous forme de + prop + au composant table. Ajoutez l’instruction en surbrillance suivante au composant de table dans + App.js:

src / App.js

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

Vous avez maintenant créé la fonctionnalité permettant de récupérer des données à partir de l’API, mais vous devez toujours rendre ces données accessibles via un navigateur Web. Dans la prochaine étape, vous réaliserez cela en affichant vos données Droplet dans votre composant de table.

Étape 5 - Affichage des données de gouttelettes dans votre composant de table

Maintenant que vous avez transféré les données Droplet au composant de table, vous pouvez itérer ces données sur les lignes de la table. Mais puisque l’application fait la demande à l’API après le montage de + App.js, la valeur de la propriété pour` + droplets` sera vide au début. Par conséquent, vous devez également ajouter du code pour vous assurer que + droplets + n’est pas vide avant d’essayer d’afficher les données. Pour ce faire, ajoutez les lignes en surbrillance suivantes à la section + body de` + Table.js`:

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

Avec l’ajout du code précédent, votre application affichera un message de substitution + Loading …​ + lorsqu’aucune donnée Droplet n’est présente. Lorsque l’API DigitalOcean renvoie les données Droplet, votre application les itérera sur des lignes de table contenant des colonnes pour chaque type de données et affichera le résultat dans votre navigateur Web:

image: https: //assets.digitalocean.com/articles/cart_61768/React_App_WithData.jpg [L’application React avec les données Droplet]

Au cours de cette étape, vous avez modifié le composant de tableau de votre application pour afficher vos données Droplet dans un navigateur Web et ajouté un message de substitution pour indiquer qu’aucune gouttelette n’a été trouvée. Ensuite, vous utiliserez une infrastructure Web frontale pour styler vos données afin de les rendre plus attrayantes et plus faciles à lire.

Étape 6 - Mise en forme de votre composant de table à l’aide de Bootstrap

Votre table contient maintenant des données, mais les informations ne sont pas affichées de la manière la plus attrayante. Pour résoudre ce problème, vous pouvez personnaliser votre application en ajoutant Bootstrap à votre projet. Bootstrap est une bibliothèque de styles et de styles open source qui vous permet d’ajouter des styles réactifs à un projet avec des modèles CSS.

Installez Bootstrap avec npm en utilisant la commande suivante:

npm install bootstrap

Une fois l’installation de Bootstrap terminée, importez son fichier CSS dans votre projet en ajoutant la ligne mise en surbrillance suivante à + ​​src / App.js +:

src / App.js

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


class App extends Component {
...

Maintenant que vous avez importé le CSS, appliquez le style Bootstrap à votre composant de table en ajoutant la classe + table + à la balise + <table> + dans + src / components / Table.js +.

src / components / Table.js

import React from 'react';

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

Terminez ensuite le style de votre application en plaçant un en-tête au-dessus de votre tableau avec un titre et le logo DigitalOcean. Cliquez sur * Télécharger les logos * dans la section * Brand Assets * de la page Presse DigitalOcean pour télécharger un ensemble de logos. Choisissez votre favori dans le répertoire + SVG + Le didacticiel utilise + DO_Logo_icon_blue.svg +) et l’ajoute à votre projet en copiant le fichier du logo dans un nouveau répertoire appelé + assets + dans le répertoire + src + de votre projet. Après avoir téléchargé le logo, importez-le dans l’en-tête en ajoutant les lignes en surbrillance à + ​​src / App.js +:

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;

Dans le bloc de code précédent, les classes de la balise + nav + ajoutent un style particulier de Bootstrap à votre en-tête.

Maintenant que vous avez importé Bootstrap et appliqué son style à votre application, vos données s’affichent dans votre navigateur Web avec un affichage organisé et lisible:

image: https: //assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [La version finale de votre application React]

Conclusion

Dans cet article, vous avez créé une application de base de React qui extrait les données de l’API DigitalOcean via un serveur proxy sécurisé et les affiche avec un style Bootstrap. Maintenant que vous connaissez le framework React, vous pouvez appliquer les concepts que vous avez appris ici à des applications plus complexes, telles que celle disponible à l’adresse https://www.digitalocean.com/community/tutorials/how-to-build-a. une application web moderne pour gérer les informations client avec Django et réagir sur Ubuntu-18-04 # step-3-% E2% 80% 94-créer-le-réactif-frontend [ Comment créer une application Web moderne pour gérer les informations client avec Django et React sur Ubuntu 18.04]. Si vous souhaitez savoir quelles autres actions sont possibles avec l’API DigitalOcean, consultez la page API sur le site Web de DigitalOcean.

Related