Come costruire un’API REST?

Questo articolo fornisce un’introduzione alle API, in particolare alle API RESTful. Ne analizzeremo i vantaggi, i limiti e le alternative. Inoltre, dimostreremo come costruire un’API REST utilizzando Back4app, uno dei migliori fornitori di BaaS.

Che cos’è un’API?

Un’interfaccia di programmazione delle applicazioni (API) è un insieme di regole che definisce come due dispositivi o sistemi possono comunicare tra loro. Le API sono create dagli sviluppatori e destinate a essere utilizzate da altri sviluppatori o sistemi, e non direttamente dagli utenti finali. Gli utenti finali di solito le utilizzano indirettamente attraverso i cosiddetti frontend o client.

Si può pensare a un’API come a un mediatore tra un client e una risorsa o un servizio web. Il client invia una richiesta, questa viene elaborata e infine viene restituita una risorsa o una risposta.

Oggigiorno le API sono utilizzate quasi ovunque. La maggior parte delle aziende dispone di più API interne e accessibili pubblicamente. Oggi probabilmente avete già interagito con più di un centinaio di API. Ad esempio, quando avete controllato l’ora, il meteo, scorrete Facebook o guardate un video su YouTube.

Quali sono le differenze tra un’API e un SDK?

Come già detto, un’API è un insieme di regole che definisce come due dispositivi o sistemi possono comunicare. Un kit di sviluppo software (SDK), invece, è una raccolta di strumenti, librerie e documentazione che aiutano gli sviluppatori a creare software per una piattaforma specifica (ad esempio, Windows, Web, Android, iOS).

Gli SDK utilizzano spesso varie API dietro le quinte. Nella seconda parte dell’articolo vedremo un esempio pratico.

Che cos’è REST?

L’approccio architettonico del software chiamato Representational State Transfer (REST) caratterizza la struttura di Internet. Non costituisce un protocollo o uno standard, consentendo agli sviluppatori di adottare diversi metodi di implementazione. Roy Fielding ha introdotto REST nel 2000 e da oltre dieci anni è lo standard predominante per la creazione di API web.

REST si basa sul protocollo HTTP e utilizza diversi metodi HTTP come GET, POST, PUT e DELETE per manipolare le risorse. Queste operazioni sono spesso chiamate CRUD (Create Retrieve Update Delete). REST supporta diversi formati di dati, tra cui JSON, HTML, XLT, Python, JavaScript e così via. Il formato di dati più comunemente utilizzato è JSON.

Affinché un’API sia considerata RESTful, deve rispettare i seguenti sei vincoli:

1. Architettura client e server: i componenti client e server devono essere separati.
2. Statelessness: le applicazioni server non possono memorizzare alcun dato del client tra una richiesta e l’altra.
3. Cacheability — quando possibile, le risorse devono essere cachetizzabili sul lato client o server.
4. Sistema a strati: le API devono consentire l’uso di intermediari, ma questo non deve influire sul cliente.
5. Interfaccia uniforme: l’interfaccia tra il server e il client deve essere uniforme.
6. Codice su richiesta (opzionale): consente al server di inviare codice eseguibile al client.

La differenza tra REST e RESTful è che REST si riferisce all’insieme di vincoli, mentre RESTful si riferisce a un’API che rispetta tali vincoli.

Come funzionano le API RESTful?

Le API RESTful funzionano in modo simile ai browser. La differenza principale è che i browser utilizzano l’HTTP per richiedere pagine web e altre risorse dai server, mentre le API RESTful utilizzano l’HTTP per richiedere e manipolare risorse di dati.

Una tipica chiamata API RESTful segue questi passaggi:

1. Il client invia una richiesta al server.
2. Il server autentica il client e verifica se dispone di autorizzazioni sufficienti per la richiesta.
3. Il server elabora la richiesta, ad esempio esegue i calcoli e recupera i dati dal database.
4. Il server restituisce una risposta al client.
5. Il client elabora la risposta.

I passaggi possono variare a seconda dell’implementazione dell’API. Le istruzioni su come utilizzare un’API sono definite nel riferimento dell’API (o nella documentazione dell’API).

Struttura della richiesta

Una richiesta contiene quanto segue:

Un esempio di richiesta si presenta come segue:

Struttura di risposta

Una risposta contiene quanto segue:

Un esempio di risposta è il seguente:

Quali sono i vantaggi delle API RESTful?

Scalabilità

Le API RESTful sono altamente scalabili e possono scalare sia verticalmente che orizzontalmente. L’aggiunta di nuovi endpoint o risorse ha un impatto minimo sulle prestazioni dell’API, rendendo facile la scalabilità in base alle esigenze.

Più formati di dati

Le API RESTful possono restituire i dati in diversi formati in base alle intestazioni della richiesta del cliente. Questo le rende estremamente flessibili e facili da integrare nei sistemi esistenti. I dati possono essere restituiti in forma di JSON, XLT, Python, HTML, JavaScript e così via.

Efficienza

Le API RESTful sono leggere e hanno un overhead minore rispetto a SOAP (Simple Object Access Protocol). Questo le rende veloci ed efficienti nella gestione delle richieste. Una tipica API RESTful può gestire da 10.000 a 15.000 richieste al secondo.

Indipendenza dalla piattaforma

Un altro grande vantaggio delle API RESTful è che il server e il client sono completamente indipendenti. Ciò consente agli sviluppatori di implementare API RESTful e client in diversi linguaggi di programmazione, come Java, JavaScript, Python e altri ancora!

Facile da capire

Poiché REST si basa su HTTP, è estremamente facile da capire. La maggior parte degli sviluppatori ha quasi sicuramente lavorato o implementato almeno una volta un’API RESTful.

Quali sono i limiti delle API RESTful?

Sottoinfezione e sovrainfezione dei dati

Uno dei maggiori problemi delle API RESTful è l’under-fetching e l’over-fetching dei dati. L’overfetching si verifica quando vengono restituiti più dati del necessario, mentre l’under-fetching si verifica quando non vengono restituiti dati sufficienti (soprattutto quando si gestiscono le relazioni).

Nessun abbonamento ai dati in tempo reale

Le API RESTful non consentono di sottoscrivere le modifiche ai dati. Ciò significa che i client devono eseguire il polling del server per rilevarle. Il polling è estremamente inefficiente e può causare traffico di rete non necessario, aumento della latenza, maggiore utilizzo della larghezza di banda e riduzione della scalabilità.

Nessun sistema di versioning

Le API RESTful non hanno un sistema di versioning integrato. Inoltre, non c’è modo di deprecare i campi, il che rende difficile l’evoluzione delle API nel tempo. Ogni volta che si rilascia un aggiornamento importante delle API, si è costretti a modificare tutti i client.

Per risolvere i problemi sopra citati sono emerse diverse alternative REST. Alcune delle più popolari includono il Simple Object Access Protocol (SOAP), GraphQL e gRPC.

Quali sono i metodi di autenticazione RESTful?

Le API RESTful possono utilizzare diversi metodi di autenticazione per proteggere i loro endpoint. I metodi di autenticazione più comunemente utilizzati sono:

• Autenticazione HTTP
• Chiavi API
• OAuth 2.0
• OpenID Connect
• Autenticazione JWT

La maggior parte di questi metodi richiede che il client invii le proprie credenziali o la propria chiave API nell’intestazione della richiesta. Quando si avvia un progetto, si devono prendere in considerazione diversi metodi di autenticazione.

Come costruire un’API RESTful?

Questa parte dell’articolo esamina la costruzione di un’API RESTful utilizzando Back4app e stabilendo una connessione con un frontend Next.js.

Prerequisiti

• Esperienza con JavaScript ES6
• Esperienza con React e Next.js
• Conoscenza di base di REST

Che cos’è Back4app?

Back4app è una straordinaria soluzione BaaS – Backend as a Service. Utilizza un software open-source e offre molte funzionalità per aiutare gli sviluppatori a realizzare più velocemente applicazioni mobili e web. Ciò consente alle aziende di concentrarsi sulla logica aziendale, senza preoccuparsi dell’infrastruttura cloud.

Dotata di una dashboard di facile utilizzo e di un’interfaccia a riga di comando, la piattaforma offre kit di sviluppo software (SDK) compatibili con strumenti molto diffusi come Node.js, Flutter, React Native, Android, Angular e iOS.

Back4app ha un modello di prezzo semplice che si adatta a qualsiasi applicazione. Ha anche un piano gratuito, che non richiede una carta di credito, ed è una buona opzione per lo sviluppo, il test e la prototipazione.

Per saperne di più su Back4app, leggere Cos’è Back4app?

Introduzione al progetto

In questo articolo, costruiremo una semplice applicazione web per blog. L’applicazione web consentirà ai redattori di aggiungere articoli e agli utenti di leggerli. L’applicazione avrà due parti: il backend (basato su REST) e il frontend. Per il backend utilizzeremo Back4app e per il frontend React con Next.js.

Backend

Creare l’applicazione Back4app

Per eseguire i passaggi seguenti è necessario disporre di un account Back4app. Procedete con l’accesso o create un account se non ne avete ancora uno.

Accedere alla dashboard di Back4app e creare una nuova applicazione facendo clic su “Build new app”.

Selezionare “Backend as a Service (BaaS)”, assegnare un nome personalizzato e selezionare “NoSQL Database” come database. Infine, fare clic su “Crea” per avviare il processo di creazione dell’applicazione.

Back4app impiegherà qualche istante per preparare tutto ciò che è necessario per la vostra applicazione, come il database, il ridimensionamento e la sicurezza. Una volta che l’applicazione è pronta, si verrà reindirizzati alla vista “Database”.

Definire le classi del database

Procediamo con la definizione delle classi del database.

Avremo le seguenti due classi:

1. ArticleCategory rappresenta una categoria di articoli (ad esempio, blockchain, AI, programmazione).
2. Articolo rappresenta un articolo. Un articolo può avere più categorie (M:N).

Per creare una classe, visitate la dashboard di Back4app e selezionate “Database” nella barra laterale. Cliccare quindi su “Crea una classe”, denominarla ArticleCategoy e abilitare “Public Read and Write”.

Quando si passa alla produzione, si dovrebbe disabilitare “Public Read and Write” e rafforzare la sicurezza con ACL e CLP. Per ulteriori informazioni, consultare Parse Server Security.

Quindi, aggiungere i seguenti campi:

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

Eseguire gli stessi passaggi per la seconda classe, denominata Articolo. Aggiungere i seguenti campi:

+-----------------------------+-----------------+--------------------+-------------+
| 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          |
+-----------------------------+-----------------+--------------------+-------------+

Bene, è tutto.

Popolazione del database

Nelle fasi future, quando testeremo l’API, avremo bisogno di alcuni dati con cui lavorare. Procedere con il popolamento del database con alcune categorie di articoli e articoli di esempio.

Per aggiungere una nuova categoria di articoli, selezionarla nella barra laterale e fare clic su “Aggiungi una riga”.

Potete utilizzare queste categorie di articoli o crearne di vostre:

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

È inoltre possibile utilizzare ChatGPT per generare dati di esempio. Per saperne di più su ChatGPT, date un’occhiata a Come usare ChatGPT per costruire un’applicazione?

Procedere allo stesso modo per la classe Articolo:

+------------------+---------------+--------------+---------+-----------------------+
| 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>         |
+------------------+---------------+--------------+---------+-----------------------+

Assicurarsi di sostituire e con l’effettivo ID dell’oggetto ArticleCategory. Nel mio caso, sono SxS0yiWDij e Hf8yBDTO79 (l’immagine sopra è un riferimento).

API REST

Il bello di Back4app è che, mentre si definiscono le classi del database, Back4app imposta automaticamente un’API REST per l’utente. L’API REST generata consente di eseguire operazioni CRUD di base su tutte le classi del database.

Console API REST

Per testare l’API, accedere alla dashboard di Back4app e selezionare “API > Console > REST” nella barra laterale. Selezionare quindi GET come tipo di richiesta e Classi/Articolo come endpoint. Infine, fare clic su “Invia query” in basso a destra per inviare la richiesta.

Questa richiesta restituirà tutti gli articoli presenti nel database. Si dovrebbe ottenere una risposta simile:

{
   "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 consente anche di eseguire operazioni di POST, PUT e DELETE. Inoltre, è possibile utilizzare i parametri di Parse Query per filtrare i dati, gestire le relazioni e altro ancora.

Ad esempio, se si desidera recuperare gli articoli che appartengono alla categoria “Blockchain”, si può utilizzare la seguente istruzione where:

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

Assicurarsi di sostituire con l’objectId della blockchain.

Per saperne di più sui parametri di interrogazione, consultare la Guida alle API REST di Parse.

cURL

La REST Console è ottima, ma quando si lavora su applicazioni reali si desidera un approccio alle richieste API più orientato ai programmatori. Uno degli strumenti che si possono usare è cURL, uno strumento a riga di comando per vari protocolli come HTTP, FTP e SMTP.

Un esempio di comando cURL per elencare le categorie di articoli è il seguente:

$ 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

È possibile ottenere le chiavi da “Back4app Dashboard > Impostazioni app > Sicurezza e chiavi”.

Come si può vedere, quando si usa cURL è necessario specificare il tipo di metodo HTTP e fornire l’ID dell’applicazione e la chiave API REST. Inoltre, è possibile inviare la risposta in jq per formattarla automaticamente ed evidenziarla con i colori.

Riferimento API

Un’altra grande caratteristica di Back4app è che genera automaticamente i riferimenti alle API per tutte le classi del database. Ogni volta che si apporta una modifica, questa si riflette nella documentazione.

Per accedere al riferimento API, selezionare “Database” nella barra laterale e utilizzare i tre punti in alto a destra per visualizzare tutte le opzioni. Infine, selezionare “Riferimento API”.

Il riferimento all’API contiene le descrizioni di tutte le classi del database, le istruzioni per le operazioni CRUD, le richieste di esempio, le risposte e gli snippet di codice.

Questo è tutto per il backend. Nella prossima sezione vedremo come implementare un frontend in grado di comunicare con il backend.

Frontend

Come già detto, useremo React con Next.js 13 per costruire il frontend. In generale, ci sono tre modi per collegarsi a un backend basato su Parse da un frontend JavaScript:

1. Utilizzando l’API REST (richieste e risposte HTTP)
2. Utilizzando l’API GraphQL (descritta in questo articolo)
3. Utilizzando l’SDK JavaScript

Si dovrebbe optare per l’ultima o la penultima opzione. L’uso diretto dell’API REST non è consigliato nelle applicazioni client che possono utilizzare gli SDK Parse (ad esempio JavaScript, Flutter, Android, iOS, Xamarin). Questo perché Parse SDK consente di scrivere codice più pulito e meno soggetto a errori. Dietro le quinte, gli SDK Parse utilizzano l’API REST.

Creare la prossima applicazione

Procedete con il bootstrap di un progetto Next.js utilizzando l’utility create-next-app. Aprite il vostro terminale ed eseguite il seguente comando:

$ 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.

Quindi, eseguire il server di sviluppo:

$ yarn dev

Andate su http://localhost:3000 e dovreste vedere la pagina di destinazione di Next.js.

ChakraUI

Per semplificare il processo di costruzione dell’interfaccia utente (UI/UX), utilizzeremo ChakraUI. Chakra UI è una libreria di componenti semplice, modulare e facile da usare che fornisce tutti gli elementi necessari per lo sviluppo di applicazioni React.

In caso di problemi, consultare ChakraUI: Come iniziare con Next.js.

Per prima cosa installate Chakra e le sue dipendenze eseguendo:

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

Quindi, spostarsi in _pages/app.tsx e avvolgere l’applicazione con ChakraProvider in questo modo:

// 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;

Non dimenticate di importare il ChakraProvider:

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

Caricare lo script della modalità colore prima del contenuto per evitare lampi di colore casuali. Per farlo, si può utilizzare _document.js in questo modo:

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

Bene, avete installato ChakraUI con successo.

Interfaccia utente

Procediamo con l’implementazione dell’interfaccia utente. Creeremo le due pagine seguenti:

1. / visualizza l’elenco degli articoli
2. / / visualizza un articolo specifico

Iniziare con l’indice. Sostituire il contenuto di pages/index.js con il seguente:

// 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. Abbiamo preparato gli stati articles e isLoading, che utilizzeremo in seguito per recuperare i dati.
2. Per progettare l’interfaccia utente abbiamo utilizzato i componenti di base di ChakraUI.
3. Per visualizzare tutti gli articoli, si scorre in loop lo stato degli articoli.

Quindi, spostarsi su pages/[slug].js e modificarlo come segue:

// 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. Abbiamo preparato lo stato dell’articolo per contenere l’articolo.
2. Abbiamo usato Next Router per recuperare il parametro slug dall’URL.

Integrazione del backend

In quest’ultima sezione, collegheremo il frontend al backend.

Per utilizzare l’SDK di Parse dobbiamo innanzitutto installarlo. Eseguire il seguente comando:

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

Quindi, spostarsi in pages/_app.js e inizializzare Parse in questo modo:

// 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 (
      // ...
  );
}

Non dimenticatevi dell’importazione:

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

Per recuperare gli articoli nella pagina indice, possiamo usare una Parse.Query. Una volta recuperati i dati, possiamo memorizzarli negli articoli e impostare isLoading su 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 (
    // ...
  );
}

Possiamo quindi fare una cosa simile per l’articolo in 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 (
    // ...
  );
}

Anche in questo caso, non dimenticate di importare Parse in entrambi i file.

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

Avviare il server di sviluppo Next (se non è già in funzione) e visitare http://localhost:3000 nel browser web preferito. Dovreste vedere l’elenco dei vostri articoli e gli articoli dovrebbero essere leggibili.

Conclusione

In questo articolo abbiamo imparato a conoscere le API, le API RESTful e i loro vantaggi e svantaggi. Ora dovreste essere in grado di costruire delle semplici API RESTful e di connettervi ad esse da un’applicazione frontend.

È possibile ottenere il codice sorgente finale su GitHub.

Se questo articolo vi è piaciuto, consultate anche l’articolo Come creare un’API GraphQL.