Comment créer une API REST ?

Cet article est une introduction aux API, en particulier aux API RESTful. Nous examinerons leurs avantages, leurs limites et leurs alternatives. En outre, nous montrerons comment construire une API REST en utilisant Back4app – l’un des meilleurs fournisseurs de BaaS.

Qu’est-ce qu’une API ?

Une interface de programmation d’application (API) est un ensemble de règles qui définit comment deux appareils ou systèmes peuvent communiquer entre eux. Les API sont créées par des développeurs et destinées à être utilisées par d’autres développeurs ou systèmes, et non par les utilisateurs finaux directement. Les utilisateurs finaux les utilisent généralement de manière indirecte par le biais de ce que l’on appelle des frontaux ou des clients.

On peut considérer une API comme un médiateur entre un client et une ressource ou un service web. Le client envoie une demande, la demande est ensuite traitée et enfin, une ressource ou une réponse est renvoyée.

De nos jours, les API sont utilisées presque partout. La plupart des entreprises disposent de plusieurs API internes et accessibles au public. Aujourd’hui même, vous avez probablement déjà interagi avec plus d’une centaine d’API. Par exemple, lorsque vous avez consulté l’heure ou la météo, fait défiler Facebook ou regardé une vidéo sur YouTube.

Quelles sont les différences entre une API et un SDK ?

Comme mentionné ci-dessus, une API est un ensemble de règles qui définit comment deux appareils ou systèmes peuvent communiquer. Un kit de développement logiciel (SDK), quant à lui, est un ensemble d’outils, de bibliothèques et de documentation qui aident les développeurs à créer des logiciels pour une plateforme spécifique (par exemple Windows, Web, Android, iOS).

Les SDK utilisent souvent diverses API dans les coulisses. Nous examinerons un exemple pratique dans la deuxième partie de l’article.

Qu’est-ce que REST ?

L’approche architecturale logicielle appelée Representational State Transfer (REST) caractérise le cadre de l’internet. Il ne s’agit pas d’un protocole ou d’une norme, ce qui permet aux développeurs d’utiliser diverses méthodes de mise en œuvre. Roy Fielding a présenté REST en 2000, et il a servi de norme prédominante pour la création d’API web pendant plus de dix ans.

REST est basé sur le protocole HTTP et utilise différentes méthodes HTTP telles que GET, POST, PUT et DELETE pour manipuler les ressources. Ces opérations sont souvent appelées CRUD (Create Retrieve Update Delete). REST prend en charge de nombreux formats de données, notamment JSON, HTML, XLT, Python, JavaScript, etc. Le format de données le plus couramment utilisé est JSON.

Pour qu’une API soit considérée comme RESTful, elle doit respecter les six contraintes suivantes :

1. Architecture client et serveur – les composants du client et du serveur doivent être séparés.
2. L‘apatridie: les applications serveur ne sont pas autorisées à stocker des données client entre les requêtes.
3. Possibilité de mise en cache : dans la mesure du possible, les ressources doivent pouvoir être mises en cache du côté du client ou du serveur.
4. Système à plusieurs niveaux: les API doivent permettre l’intervention d’intermédiaires, sans pour autant affecter le client.
5. Interface uniforme: l’interface entre le serveur et le client doit être uniforme.
6. Code à la demande (optionnel) — permet au serveur d’envoyer du code exécutable au client.

La différence entre REST et RESTful est que REST fait référence à l’ensemble des contraintes, tandis que RESTful fait référence à une API qui respecte ces contraintes.

Comment fonctionnent les API RESTful ?

Les API RESTful fonctionnent de la même manière que les navigateurs. La principale différence est que les navigateurs utilisent HTTP pour demander des pages web et d’autres ressources à des serveurs, alors que les API RESTful utilisent HTTP pour demander et manipuler des ressources de données.

Un appel API RESTful typique suit les étapes suivantes :

1. Le client envoie une demande au serveur.
2. Le serveur authentifie le client et vérifie s’il dispose des autorisations suffisantes pour répondre à la demande.
3. Le serveur traite la demande, par exemple en effectuant des calculs et en récupérant des données dans la base de données.
4. Le serveur renvoie une réponse au client.
5. Le client traite la réponse.

Les étapes peuvent varier en fonction de la mise en œuvre de l’API. Les instructions relatives à l’utilisation d’une API sont définies dans la référence de l’API (ou dans la documentation de l’API).

Structure de la demande

Une demande contient les éléments suivants :

Un exemple de demande ressemble à ceci :

Structure de la réponse

Une réponse contient les éléments suivants :

Un exemple de réponse ressemble à ceci :

Quels sont les avantages des API RESTful ?

Évolutivité

Les API RESTful sont très évolutives et peuvent s’adapter aussi bien verticalement qu’horizontalement. L’ajout de nouveaux points d’extrémité ou de nouvelles ressources a un impact minimal sur les performances de l’API, ce qui facilite son évolution en fonction des besoins.

Formats de données multiples

Les API RESTful peuvent renvoyer des données dans différents formats en fonction des en-têtes de requête du client. Cela les rend extrêmement flexibles et faciles à intégrer dans les systèmes existants. Les données peuvent être renvoyées sous forme de JSON, XLT, Python, HTML, JavaScript, etc.

Efficacité

Les API RESTful sont légères et ont un surcoût plus faible que le protocole SOAP (Simple Object Access Protocol). Elles sont donc rapides et efficaces dans le traitement des demandes. Une API RESTful typique peut traiter entre 10 000 et 15 000 demandes par seconde.

Indépendance de la plate-forme

Un autre grand avantage des API RESTful est que le serveur et le client sont complètement indépendants. Cela permet aux développeurs de mettre en œuvre des API RESTful et des clients dans plusieurs langages de programmation tels que Java, JavaScript, Python, et bien d’autres encore !

Facile à comprendre

REST étant basé sur HTTP, il est extrêmement facile à comprendre. La plupart des développeurs ont certainement déjà travaillé ou mis en œuvre une API RESTful au moins une fois.

Quelles sont les limites des API RESTful ?

Sous-réception et surréception des données

L’un des plus gros problèmes des API RESTful est la récupération insuffisante ou excessive des données. L’extraction excessive se produit lorsque le nombre de données renvoyées est supérieur au nombre requis et l’extraction insuffisante se produit lorsque le nombre de données renvoyées est insuffisant (principalement dans le cadre de la gestion des relations).

Pas d’abonnement aux données en temps réel

Les API RESTful ne permettent pas de s’abonner aux modifications de données. Cela signifie que les clients doivent interroger le serveur pour les détecter. L’interrogation est extrêmement inefficace et peut entraîner un trafic réseau inutile, une augmentation de la latence, une utilisation accrue de la bande passante et une réduction de l’évolutivité.

Pas de système de gestion des versions

Les API RESTful ne disposent pas d’un système intégré de gestion des versions. En outre, il n’existe aucun moyen de déprécier les champs, ce qui rend difficile l’évolution des API dans le temps. Chaque fois que vous publiez une mise à jour majeure de l’API, vous êtes obligé de modifier tous les clients.

Pour résoudre les problèmes susmentionnés, plusieurs alternatives REST ont vu le jour. Parmi les plus populaires, citons le protocole SOAP (Simple Object Access Protocol), GraphQL et gRPC.

Quelles sont les méthodes d’authentification RESTful ?

Les API RESTful peuvent utiliser différentes méthodes d’authentification pour sécuriser leurs points de terminaison. Les méthodes d’authentification les plus couramment utilisées sont les suivantes :

• Authentification HTTP
• Clés API
• OAuth 2.0
• OpenID Connect
• Authentification JWT

La plupart de ces méthodes exigent que le client envoie ses informations d’identification ou sa clé API dans l’en-tête de la requête. Différentes méthodes d’authentification doivent être envisagées lors du lancement d’un projet.

Comment construire une API RESTful ?

Cette partie de l’article examine la construction d’une API RESTful à l’aide de Back4app et l’établissement d’une connexion avec un frontend Next.js.

Conditions préalables

• Expérience avec JavaScript ES6
• Expérience avec React et Next.js
• Compréhension de base de REST

Qu’est-ce que Back4app ?

Back4app est une solution BaaS – Backend as a Service. Elle utilise des logiciels open-source et offre de nombreuses fonctionnalités pour aider les développeurs à créer des applications mobiles et web plus rapidement. Les entreprises peuvent ainsi se concentrer sur leur logique commerciale, sans se préoccuper de l’infrastructure en nuage.

Dotée d’un tableau de bord convivial et d’une interface en ligne de commande, la plateforme propose des kits de développement logiciel (SDK) compatibles avec des outils largement utilisés tels que Node.js, Flutter, React Native, Android, Angular et iOS.

Back4app a un modèle de prix simple qui peut convenir à n’importe quelle application. Ils ont également un plan gratuit, qui ne nécessite pas de carte de crédit, qui est une bonne option pour le développement, les tests et le prototypage.

Pour en savoir plus sur Back4app, lisez Qu’est-ce que Back4app ?

Introduction du projet

Dans cet article, nous allons créer une application web simple pour un blog. L’application web va permettre aux éditeurs d’ajouter des articles et aux utilisateurs de les lire. L’application aura deux parties : le backend (basé sur REST) et le frontend. Pour le backend, nous utiliserons Back4app et pour le frontend, nous utiliserons React avec Next.js.

Backend

Créer l’application Back4app

Les étapes suivantes requièrent que vous ayez un compte Back4app. Allez-y et connectez-vous ou créez un compte si vous n’en avez pas encore.

Naviguez vers votre tableau de bord Back4app et créez une nouvelle application en cliquant sur “Build new app”.

Sélectionnez “Backend as a Service (BaaS)”, donnez-lui un nom personnalisé et sélectionnez “NoSQL Database” comme base de données. Enfin, cliquez sur “Créer” pour lancer le processus de création de l’application.

Back4app va prendre quelques instants pour préparer tout ce qui est nécessaire à votre application comme la base de données, la mise à l’échelle et la sécurité. Une fois que votre application est prête, vous serez redirigé vers la vue “Base de données”.

Définir les classes de base de données

Passons maintenant à la définition des classes de base de données.

Nous aurons les deux classes suivantes :

1. ArticleCategory représente une catégorie d’article (par exemple, blockchain, IA, programmation)
2. Article représente un article. Un article peut avoir plusieurs catégories (M:N).

Pour créer une classe, allez sur votre tableau de bord Back4app et sélectionnez “Base de données” sur la barre latérale. Cliquez ensuite sur “Créer une classe”, nommez-la ArticleCategoy et activez “Lecture et écriture publiques”.

Lorsque vous passez à la production, vous devez désactiver les fonctions de lecture et d’écriture publiques et renforcer la sécurité à l’aide d’ACL et de CLP. Pour plus d’informations, consultez la section Sécurité de Parse Server.

Ensuite, ajoutez-y les champs suivants :

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | name            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | description     | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

Procédez de la même manière pour la deuxième classe nommée Article. Ajoutez les champs suivants :

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | title           | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | shortContent    | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | content         | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| Relation -> ArticleCategory | categories      | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

C’est bien, c’est tout.

Alimentation de la base de données

Dans les prochaines étapes, lorsque nous testerons l’API, nous aurons besoin de données pour travailler. Allez-y et remplissez la base de données avec quelques exemples de catégories d’articles et d’articles.

Pour ajouter une nouvelle catégorie d'article, sélectionnez-la dans la barre latérale et cliquez sur “Ajouter une ligne”.

Vous pouvez utiliser ces catégories d’articles ou en créer de nouvelles :

+------------+------------+---------------------------------------------------------+
| name       | slug       | description                                             |
+------------+------------+---------------------------------------------------------+
| Blockchain | blockchain | Blockchain, crypto & more!                              |
+------------+------------+---------------------------------------------------------+
| AI         | ai         | Artificial intelligence, LLMs, stable diffusion.        |
+------------+------------+---------------------------------------------------------+

Vous pouvez également utiliser ChatGPT pour générer des échantillons de données. Pour en savoir plus sur ChatGPT, consultez Comment utiliser ChatGPT pour créer une application ?

Faites de même pour la classe Article :

+------------------+---------------+--------------+---------+-----------------------+
| title            | slug          | shortContent | content | categories            |
+------------------+---------------+--------------+---------+-----------------------+
| Beyond Crypto    | beyond-crypto | ...          | ...     | <blockchain.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| The Rise of AI   | rise-of-ai    | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+
| What is ChatGPT? | chatgpt       | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+

Veillez à remplacer et par l’ID de l'objet ArticleCategory. Dans mon cas, il s’agit de SxS0yiWDij et Hf8yBDTO79 (image ci-dessus pour référence).

API REST

L’avantage de Back4app est que lorsque vous définissez les classes de la base de données, Back4app met automatiquement en place une API REST pour vous. L’API REST générée vous permet d’effectuer des opérations CRUD de base sur toutes les classes de votre base de données.

Console API REST

Pour tester l’API, naviguez dans votre tableau de bord Back4app et sélectionnez “API > Console > REST” dans la barre latérale. Sélectionnez ensuite GET comme type de requête, et classes/Article comme point d’arrivée. Enfin, cliquez sur “Send Query” en bas à droite de l’écran pour envoyer la requête.

Cette requête va renvoyer tous les articles de votre base de données. Vous devriez obtenir une réponse similaire :

{
   "results":[
      {
         "objectId": "yEaR8K44il",
         "title": "Beyond Crypto",
         "slug": "beyond-crypto",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:26:19.016Z",
         "updatedAt": "2023-04-17T14:26:30.922Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      },
      {
         "objectId": "l46nMkHElH",
         "title": "What is ChatGPT?",
         "slug": "chatgpt",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:27:34.931Z",
         "updatedAt": "2023-04-17T14:27:42.636Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      }
      // ...
   ]
}

La console REST vous permet également d’effectuer des opérations POST, PUT et DELETE. En outre, vous pouvez utiliser les paramètres Parse Query pour filtrer les données, gérer les relations, etc.

Par exemple, si vous souhaitez récupérer les articles appartenant à la catégorie “Blockchain”, vous pouvez utiliser l’instruction where suivante :

where={"categories": {
    "__type": "Pointer", "className": "ArticleCategory", "objectId": "<objectId>"
}}

Veillez à remplacer par l’objectId de la blockchain.

Pour en savoir plus sur les paramètres de requête, consultez le Guide de l’API REST de Parse.

cURL

La console REST est excellente, mais lorsque vous travaillez sur des applications réelles, vous souhaitez une approche plus orientée vers le programmeur pour les demandes d’API. L’un des outils que vous pouvez utiliser est cURL – un outil de ligne de commande pour divers protocoles tels que HTTP, FTP et SMTP.

Un exemple de commande cURL pour lister les catégories d’articles ressemblerait à ceci :

$ curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/ArticleCategory | jq

Vous pouvez obtenir les clés à partir de “Back4app Dashboard > App Settings > Security & Keys”.

Comme vous pouvez le voir, lorsque vous utilisez cURL, vous devez spécifier le type de méthode HTTP et fournir votre ID d’application et votre clé d’API REST. De plus, vous pouvez diriger la réponse vers jq pour la formater automatiquement et la mettre en évidence par des couleurs.

Référence API

Un autre avantage de Back4app est qu’il génère automatiquement des références API pour toutes vos classes de base de données. Chaque fois que vous effectuez un changement, celui-ci est reflété dans la documentation.

Pour accéder à la référence API, sélectionnez “Database” dans la barre latérale et utilisez les trois points en haut à droite de l’écran pour voir toutes les options. Enfin, sélectionnez “Référence API”.

La référence API contient les descriptions de toutes les classes de votre base de données, des instructions pour les opérations CRUD, des exemples de requêtes, de réponses et d’extraits de code.

C’est tout pour le backend. Dans la prochaine section, nous verrons comment mettre en œuvre un frontend qui peut communiquer avec le backend.

Frontend

Comme mentionné ci-dessus, nous utiliserons React avec Next.js 13 pour construire le frontend. En général, il y a trois façons de se connecter à un backend basé sur Parse à partir d’un frontend JavaScript :

1. En utilisant l’API REST (demandes et réponses HTTP)
2. En utilisant l’API GraphQL (abordée dans cet article)
3. En utilisant le SDK JavaScript

Vous devriez opter pour la dernière ou l’avant-dernière option. L’utilisation directe de l’API REST n’est pas recommandée dans les applications clientes qui peuvent utiliser les SDK Parse (par exemple JavaScript, Flutter, Android, iOS, Xamarin). En effet, Parse SDK permet d’écrire un code plus propre et moins sujet aux erreurs. En coulisses, les SDK Parse utilisent l’API REST.

Créer l’application suivante

Allez-y et démarrez un projet Next.js en utilisant l’utilitaire create-next-app. Ouvrez votre terminal et exécutez la commande suivante :

$ yarn create next-app

√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Successfully created a Next.js app.

Ensuite, lancez le serveur de développement :

$ yarn dev

Naviguez vers http://localhost:3000 et vous devriez voir la page d’accueil Next.js.

ChakraUI

Pour faciliter le processus de construction de l’interface utilisateur et de l’interface utilisateur, nous utiliserons ChakraUI. Chakra UI est une bibliothèque de composants simple, modulaire et conviviale qui fournit tous les éléments nécessaires au développement de vos applications React.

Si vous rencontrez des problèmes, reportez-vous à ChakraUI : Démarrer avec Next.js.

Installez d’abord Chakra et ses dépendances :

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Ensuite, naviguez vers votre _pages/app.tsx et enveloppez votre application avec le ChakraProvider comme suit :

// pages/_app.tsx

import "../styles/globals.css";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme({});

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

N’oubliez pas d’importer le ChakraProvider:

import {ChakraProvider} from "@chakra-ui/provider";

Chargez le script de mode de couleur avant le contenu pour éviter les flashs de couleur aléatoires. Pour ce faire, vous pouvez utiliser _document.js comme suit :

// pages/_document.js

import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Vous avez installé ChakraUI avec succès.

Interface utilisateur

Passons maintenant à l’implémentation de l’interface utilisateur. Nous allons créer les deux pages suivantes :

1. / affiche la liste des articles
2. / / affiche un article spécifique

Commencez par l’index. Remplacez le contenu de pages/index.js par ce qui suit :

// pages/index.js

import {Card, CardBody, Container, Heading, 
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Home() {

  const [isLoading, setIsLoading] = useState(true);
  const [articles, setArticles] = useState([]);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <Stack spacing="4" direction="column">
              {articles.map((article, index) => (
                <Card key={index} w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">
                        <Link as={NextLink} href={article.get("slug")}>
                          {article.get("title")}
                        </Link>
                      </Heading>
                      <Text>
                        {article.get("shortContent")}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              ))}
            </Stack>
          )}
        </Container>
      </main>
    </>
  );
}

1. Nous avons préparé les états articles et isLoading que nous utiliserons ultérieurement lors de la collecte des données.
2. Nous avons utilisé les composants de base de ChakraUI pour concevoir l’interface utilisateur.
3. Pour afficher tous les articles, nous parcourons en boucle l’état des articles.

Ensuite, naviguez jusqu’à pages/[slug].js et modifiez-le comme suit :

// pages/[slug].js

import {useRouter} from "next/router";
import {Card, CardBody, Container, Heading,
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Article() {

  const router = useRouter();
  const {slug} = router.query;

  const [isLoading, setIsLoading] = useState(true);
  const [article, setArticle] = useState(null);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <>
              {article == null ? (
                <Text>This article does not exist.</Text>
              ) : (
                <Card w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">{article.get("title")}</Heading>
                      <Text>
                        {article.get("content")}
                      </Text>
                      <Text fontSize="sm">
                        Posted on {new Date(article.get("createdAt")).toDateString()}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              )}
            </>
          )}
          <Text size="sm" mt="2" align="right">
              <Link as={NextLink} href="/">← Go back</Link>
          </Text>
        </Container>
      </main>
    </>
  );
}

1. Nous avons préparé l’état de l’article pour qu’il soit conservé.
2. Nous avons utilisé Next Router pour récupérer le paramètre slug de l’URL.

Intégration du backend

Dans cette dernière section, nous allons connecter le frontend au backend.

Pour utiliser le SDK Parse, nous devons d’abord l’installer. Exécutez la commande suivante :

$ yarn add parse @react-native-async-storage/async-storage

Ensuite, naviguez vers vos pages/_app.js et initialisez Parse comme suit :

// pages/_app.js

const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  // replace me
Parse.serverURL = PARSE_HOST_URL;

export default function App({ Component, pageProps }) {
  return (
      // ...
  );
}

N’oubliez pas les importations :

import Parse from "parse/dist/parse.min.js";

Pour récupérer les articles sur la page d’index, nous pouvons utiliser une requête Parse.Query. Une fois les données récupérées, nous pouvons les stocker dans articles et définir isLoading à false:

// pages/index.js

export default function Home() {

  // ...

  const getArticles = async () => {
    const query = new Parse.Query("Article");
    setArticles(await query.find());
    setIsLoading(false);
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    // ...
  );
}

Nous pouvons ensuite faire la même chose pour l’article dans pages/[slug].js:

// pages/[slug].js

export default function Article() {

  // ...

  const getArticle = async () => {
    const query = new Parse.Query("Article");
    query.equalTo("slug", slug);
    const results = await query.find();
    setIsLoading(false);
    if (results.length === 0) return;
    setArticle(results[0]);
  };

  useEffect(() => {
    getArticle();
  }, []);

  return (
    // ...
  );
}

Là encore, n’oubliez pas d’importer Parse dans les deux fichiers.

import Parse from "parse/dist/parse.min.js";

Démarrez le serveur de développement Next (s’il n’est pas déjà en cours d’exécution) et visitez http://localhost:3000 dans votre navigateur web préféré. Vous devriez voir la liste de vos articles et les articles devraient être lisibles.

Conclusion

Dans cet article, vous avez découvert les API, les API RESTful, ainsi que leurs avantages et leurs inconvénients. Vous devriez maintenant être en mesure de créer vos API RESTful simples et de vous y connecter à partir d’une application frontale.

Vous pouvez télécharger le code source final sur GitHub.

Si vous avez apprécié cet article, consultez également l’article Comment créer une API GraphQL.