Wie erstellt man eine REST-API?

Dieser Artikel bietet eine Einführung in APIs, insbesondere in RESTful APIs. Wir befassen uns mit ihren Vorteilen, Einschränkungen und Alternativen. Außerdem zeigen wir, wie man mit Back4app – einem der besten BaaS-Anbieter – eine REST-API erstellt.

Was ist eine API?

Eine Anwendungsprogrammierschnittstelle (API) ist eine Reihe von Regeln, die festlegen, wie zwei Geräte oder Systeme miteinander kommunizieren können. APIs werden von Entwicklern erstellt und sind dafür gedacht, von anderen Entwicklern oder Systemen genutzt zu werden, und nicht von den Endnutzern direkt. Endnutzer nutzen sie in der Regel indirekt über so genannte Frontends oder Clients.

Sie können sich eine API als Vermittler zwischen einem Client und einer Ressource oder einem Webdienst vorstellen. Der Client sendet eine Anfrage, die Anfrage wird verarbeitet und schließlich wird eine Ressource oder eine Antwort zurückgegeben.

Heutzutage werden APIs fast überall verwendet. Die meisten Unternehmen haben mehrere interne und öffentlich zugängliche APIs. Allein heute haben Sie wahrscheinlich schon mit mehr als hundert APIs interagiert. Zum Beispiel, als Sie die Uhrzeit oder das Wetter abgerufen, durch Facebook gescrollt oder ein YouTube-Video angesehen haben.

Was sind die Unterschiede zwischen einer API und einem SDK?

Wie bereits erwähnt, ist eine API eine Reihe von Regeln, die festlegen, wie zwei Geräte oder Systeme miteinander kommunizieren können. Ein Software Development Kit (SDK) hingegen ist eine Sammlung von Tools, Bibliotheken und Dokumentation, die Entwicklern helfen, Software für eine bestimmte Plattform (z. B. Windows, Web, Android, iOS) zu erstellen.

SDKs nutzen oft verschiedene APIs im Hintergrund. Im zweiten Teil des Artikels werden wir uns ein praktisches Beispiel ansehen.

Was ist REST?

Der Software-Architekturansatz namens Representational State Transfer (REST) prägt den Rahmen des Internets. Es handelt sich dabei nicht um ein Protokoll oder eine Norm, so dass die Entwickler verschiedene Implementierungsmethoden anwenden können. Roy Fielding führte REST im Jahr 2000 ein, und seit mehr als zehn Jahren dient es als vorherrschender Standard für die Erstellung von Web-APIs.

REST basiert auf dem HTTP-Protokoll und verwendet verschiedene HTTP-Methoden wie GET, POST, PUT und DELETE, um die Ressourcen zu manipulieren. Diese Vorgänge werden oft als CRUD (Create Retrieve Update Delete) bezeichnet. REST unterstützt mehrere Datenformate wie JSON, HTML, XLT, Python, JavaScript usw. Das am häufigsten verwendete Datenformat ist JSON.

Damit eine API als RESTful gilt, muss sie die folgenden sechs Bedingungen erfüllen:

1. Client- und Server-Architektur – Client- und Server-Komponenten sollten getrennt sein.
2. Zustandslosigkeit – Serveranwendungen dürfen keine Client-Daten zwischen Anfragen speichern.
3. Cache-Fähigkeit – wenn möglich sollten Ressourcen auf der Client- oder Serverseite cache-fähig sein.
4. Mehrschichtiges System – APIs sollten Vermittler zulassen, ohne dass dies Auswirkungen auf den Kunden hat.
5. Einheitliche Schnittstelle – die Schnittstelle zwischen dem Server und dem Client sollte einheitlich sein.
6. Code on demand (optional) — ermöglicht es dem Server, ausführbaren Code an den Client zu senden.

Der Unterschied zwischen REST und RESTful besteht darin, dass sich REST auf eine Reihe von Einschränkungen bezieht, während sich RESTful auf eine API bezieht, die diesen Einschränkungen gerecht wird.

Wie funktionieren RESTful APIs?

RESTful-APIs funktionieren auf ähnliche Weise wie Browser. Der Hauptunterschied besteht darin, dass Browser HTTP verwenden, um Webseiten und andere Ressourcen von Servern anzufordern, während RESTful-APIs HTTP verwenden, um Datenressourcen anzufordern und zu bearbeiten.

Ein typischer RESTful-API-Aufruf folgt diesen Schritten:

1. Der Client sendet eine Anfrage an den Server.
2. Der Server authentifiziert den Client und prüft, ob er über ausreichende Berechtigungen für die Anfrage verfügt.
3. Der Server verarbeitet die Anfrage, führt z. B. Berechnungen durch und holt Daten aus der Datenbank.
4. Der Server sendet eine Antwort an den Client.
5. Der Client verarbeitet die Antwort.

Die Schritte können je nach API-Implementierung variieren. Die Anweisungen zur Verwendung einer API sind in der API-Referenz (oder API-Dokumentation) definiert.

Struktur der Anfrage

Ein Antrag enthält Folgendes:

Ein Beispiel für eine Anfrage sieht wie folgt aus:

Struktur der Antwort

Eine Antwort enthält Folgendes:

Ein Beispiel für eine Antwort sieht so aus:

Was sind die Vorteile von RESTful APIs?

Skalierbarkeit

RESTful-APIs sind hoch skalierbar und können sowohl vertikal als auch horizontal skaliert werden. Das Hinzufügen neuer Endpunkte oder Ressourcen hat nur minimale Auswirkungen auf die Leistung der API, so dass sie leicht nach Bedarf skaliert werden kann.

Mehrere Datenformate

RESTful APIs können Daten in verschiedenen Formaten zurückgeben, die auf den Kopfzeilen der Client-Anfrage basieren. Dadurch sind sie äußerst flexibel und lassen sich leicht in bestehende Systeme integrieren. Die Daten können in Form von JSON, XLT, Python, HTML, JavaScript und so weiter zurückgegeben werden.

Effizienz

RESTful APIs sind leichtgewichtig und haben einen geringeren Overhead als SOAP (Simple Object Access Protocol). Das macht sie schnell und effizient bei der Bearbeitung von Anfragen. Eine typische RESTful-API kann zwischen 10.000 und 15.000 Anfragen pro Sekunde verarbeiten.

Plattformunabhängigkeit

Ein weiterer großer Vorteil von RESTful-APIs ist, dass der Server und der Client völlig unabhängig voneinander sind. Das ermöglicht es Entwicklern, RESTful-APIs und -Clients in verschiedenen Programmiersprachen wie Java, JavaScript, Python und anderen zu implementieren!

Leicht zu verstehen

Da REST auf HTTP basiert, ist es extrem einfach zu verstehen. Die meisten Entwickler haben mit Sicherheit schon einmal mit einer RESTful-API gearbeitet oder eine solche implementiert.

Was sind die Grenzen von RESTful APIs?

Unterabruf und Überabruf von Daten

Eines der größten Probleme von RESTful-APIs ist die Unter- und Überabrufung von Daten. Ein Überabruf findet statt, wenn mehr Daten als erforderlich zurückgegeben werden, und ein Unterabruf, wenn nicht genügend Daten zurückgegeben werden (meist bei der Verarbeitung von Beziehungen).

Keine Echtzeit-Datenabonnements

RESTful-APIs erlauben es nicht, sich bei Datenänderungen anzumelden. Dies bedeutet, dass die Clients den Server abfragen müssen, um sie zu erkennen. Das Polling ist äußerst ineffizient und kann zu unnötigem Netzwerkverkehr, erhöhter Latenz, höherer Bandbreitennutzung und geringerer Skalierbarkeit führen.

Kein Versionierungssystem

RESTful-APIs haben kein eingebautes Versionierungssystem. Darüber hinaus gibt es keine Möglichkeit, Felder zu verwerfen, was die Weiterentwicklung von APIs im Laufe der Zeit erschwert. Jedes Mal, wenn Sie ein größeres API-Update veröffentlichen, sind Sie gezwungen, alle Clients zu ändern.

Um die oben genannten Probleme zu lösen, haben sich mehrere REST-Alternativen herausgebildet. Zu den beliebtesten gehören Simple Object Access Protocol (SOAP), GraphQL und gRPC.

Was sind RESTful-Authentifizierungsmethoden?

RESTful APIs können verschiedene Authentifizierungsmethoden verwenden, um ihre Endpunkte zu sichern. Die am häufigsten verwendeten Authentifizierungsmethoden sind:

• HTTP-Authentifizierung
• API-Schlüssel
• OAuth 2.0
• OpenID-Verbindung
• JWT-Authentifizierung

Bei den meisten dieser Methoden muss der Kunde seine Anmeldedaten oder seinen API-Schlüssel in der Kopfzeile der Anfrage übermitteln. Beim Start eines Projekts sollten verschiedene Authentifizierungsmethoden in Betracht gezogen werden.

Wie erstellt man eine RESTful API?

Dieser Teil des Artikels befasst sich mit dem Aufbau einer RESTful API mit Back4app und dem Aufbau einer Verbindung mit einem Next.js-Frontend.

Voraussetzungen

• Erfahrung mit JavaScript ES6
• Erfahrung mit React und Next.js
• Grundlegendes Verständnis von REST

Was ist Back4app?

Back4app ist eine erstaunliche BaaS – Backend as a Service Lösung. Sie nutzt Open-Source-Software und bietet viele Funktionen, die Entwicklern helfen, mobile und Web-Anwendungen schneller zu erstellen. So können sich Unternehmen auf ihre Geschäftslogik konzentrieren, ohne sich um die Cloud-Infrastruktur kümmern zu müssen.

Die Plattform verfügt über ein benutzerfreundliches Dashboard und eine Befehlszeilenschnittstelle und bietet Software Development Kits (SDKs), die mit weit verbreiteten Tools wie Node.js, Flutter, React Native, Android, Angular und iOS kompatibel sind.

Back4app hat ein einfaches Preismodell, das für jede App geeignet ist. Es gibt auch einen kostenlosen Plan, für den keine Kreditkarte erforderlich ist und der eine gute Option für die Entwicklung, das Testen und Prototyping ist.

Um mehr über Back4app zu erfahren, lesen Sie bitte Was ist Back4app?

Projekt-Einführung

In diesem Artikel werden wir eine einfache Blog-Webanwendung erstellen. Die Webanwendung wird es Redakteuren ermöglichen, Artikel hinzuzufügen, und Benutzern, diese zu lesen. Die Anwendung wird aus zwei Teilen bestehen: dem Backend (REST-basiert) und dem Frontend. Für das Backend werden wir Back4app und für das Frontend React mit Next.js verwenden.

Backend

Back4app App erstellen

Für die folgenden Schritte benötigen Sie ein Back4app-Konto. Melden Sie sich an oder erstellen Sie ein Konto, wenn Sie noch keines haben.

Navigieren Sie zu Ihrem Back4app-Dashboard und erstellen Sie eine neue App, indem Sie auf “Neue App erstellen” klicken.

Wählen Sie “Backend as a Service (BaaS)”, geben Sie einen benutzerdefinierten Namen ein und wählen Sie “NoSQL Database” als Datenbank. Klicken Sie abschließend auf “Erstellen”, um den Erstellungsprozess der App zu starten.

Back4app wird sich einen Moment Zeit nehmen, um alles vorzubereiten, was für Ihre App erforderlich ist, z. B. die Datenbank, die Skalierung und die Sicherheit. Sobald Ihre App fertig ist, werden Sie zur Ansicht “Datenbank” weitergeleitet.

Datenbank-Klassen definieren

Lassen Sie uns nun die Datenbankklassen definieren.

Wir werden die folgenden zwei Klassen haben:

1. ArticleCategory steht für eine Artikelkategorie (z. B. Blockchain, KI, Programmierung)
2. Artikel steht für einen Artikel. Ein Artikel kann mehrere Kategorien haben (M:N).

Um eine Klasse zu erstellen, navigieren Sie zu Ihrem Back4app Dashboard und wählen Sie “Datenbank” in der Seitenleiste. Klicken Sie dann auf “Create a class”, nennen Sie sie ArticleCategoy und aktivieren Sie “Public Read and Write”.

Wenn Sie in die Produktion gehen, sollten Sie “Public Read and Write” deaktivieren und die Sicherheit mit ACLs und CLPs verstärken. Weitere Informationen finden Sie unter Parse Server Security.

Fügen Sie dann die folgenden Felder hinzu:

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

Führen Sie die gleichen Schritte für die zweite Klasse namens Artikel durch. Fügen Sie die folgenden Felder hinzu:

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

Gut, das war’s.

Datenbank bevölkern

In den nächsten Schritten, wenn wir die API testen, benötigen wir einige Daten, mit denen wir arbeiten können. Füllen Sie die Datenbank mit einigen Beispiel-Artikelkategorien und -artikeln auf.

Um eine neue ArtikelKategorie hinzuzufügen, wählen Sie sie in der Seitenleiste aus und klicken Sie auf “Zeile hinzufügen”.

Sie können diese Artikelkategorien verwenden oder sich eigene Kategorien ausdenken:

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

Sie können ChatGPT auch verwenden, um Beispieldaten zu erzeugen. Um mehr über ChatGPT zu erfahren, lesen Sie Wie verwende ich ChatGPT, um eine App zu erstellen?

Machen Sie dasselbe für die Klasse Artikel:

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

Stellen Sie sicher, dass Sie die und durch die tatsächliche ArticleCategory objectId ersetzen. In meinem Fall sind das SxS0yiWDij und Hf8yBDTO79 (Bild oben als Referenz).

REST-API

Das Tolle an Back4app ist, dass Back4app bei der Definition der Datenbankklassen automatisch eine REST-API für Sie einrichtet. Mit der generierten REST-API können Sie grundlegende CRUD-Operationen für alle Klassen in Ihrer Datenbank durchführen.

REST-API-Konsole

Um die API zu testen, navigieren Sie zu Ihrem Back4app-Dashboard und wählen Sie “API > Konsole > REST” in der Seitenleiste. Wählen Sie dann GET als Anfragetyp und Klassen/Artikel als Endpunkt. Klicken Sie abschließend unten rechts auf dem Bildschirm auf “Send Query”, um die Anfrage zu senden.

Diese Anfrage wird alle Artikel in Ihrer Datenbank zurückgeben. Sie sollten eine ähnliche Antwort erhalten:

{
   "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"
         }
      }
      // ...
   ]
}

Mit der REST-Konsole können Sie auch POST-, PUT- und DELETE-Vorgänge durchführen. Darüber hinaus können Sie Parse Query-Parameter verwenden, um Daten zu filtern, Beziehungen zu behandeln und vieles mehr.

Wenn Sie beispielsweise Artikel abrufen möchten, die zur Kategorie “Blockchain” gehören, könnten Sie die folgende where-Anweisung verwenden:

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

Stellen Sie sicher, dass Sie durch die objectId der Blockchain ersetzen.

Weitere Informationen über Abfrageparameter finden Sie im Parse REST API Guide.

cURL

Die REST-Konsole ist großartig, aber wenn Sie an tatsächlichen Anwendungen arbeiten, werden Sie einen eher programmiererorientierten Ansatz für API-Anfragen benötigen. Eines der Tools, die Sie verwenden können, ist cURL – ein Befehlszeilentool für verschiedene Protokolle wie HTTP, FTP und SMTP.

Ein Beispiel für einen cURL-Befehl zur Auflistung der Artikelkategorien würde wie folgt aussehen:

$ 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

Die Schlüssel erhalten Sie über “Back4app Dashboard > App Settings > Security & Keys”.

Wie Sie sehen können, müssen Sie bei der Verwendung von cURL den Typ der HTTP-Methode angeben und Ihre Anwendungs-ID und den REST-API-Schlüssel übermitteln. Darüber hinaus können Sie die Antwort über die Pipeline in jq leiten, um sie automatisch zu formatieren und farblich hervorzuheben.

API-Referenz

Eine weitere großartige Eigenschaft von Back4app ist, dass es automatisch API-Referenzen für alle Ihre Datenbankklassen erzeugt. Jedes Mal, wenn Sie eine Änderung vornehmen, wird die Änderung in der Dokumentation wiedergegeben.

Um auf die API-Referenz zuzugreifen, wählen Sie in der Seitenleiste “Datenbank” und verwenden Sie die drei Punkte oben rechts auf dem Bildschirm, um alle Optionen zu sehen. Wählen Sie abschließend “API-Referenz”.

Die API-Referenz enthält die Beschreibungen aller Ihrer Datenbankklassen, Anweisungen für CRUD-Vorgänge, Beispielanfragen, Antworten und Codeschnipsel.

Das war’s mit dem Backend. Im nächsten Abschnitt sehen wir uns an, wie man ein Frontend implementiert, das mit dem Backend kommunizieren kann.

Frontend

Wie bereits erwähnt, werden wir React mit Next.js 13 verwenden, um das Frontend zu erstellen. Im Allgemeinen gibt es drei Möglichkeiten, sich von einem JavaScript-Frontend mit einem Parse-basierten Backend zu verbinden:

1. Durch Verwendung der REST-API (HTTP-Anfragen und -Antworten)
2. Durch die Verwendung von GraphQL API (in diesem Artikel behandelt)
3. Durch die Verwendung von JavaScript SDK

Sie sollten sich für die letzte oder die vorletzte Option entscheiden. Die direkte Verwendung der REST-API wird in Client-Apps, die Parse SDKs verwenden können (z. B. JavaScript, Flutter, Android, iOS, Xamarin), nicht empfohlen. Der Grund dafür ist, dass Parse SDK es Ihnen ermöglicht, saubereren Code zu schreiben und weniger fehleranfällig zu sein. Hinter den Kulissen verwenden die Parse SDKs die REST-API.

Nächste App erstellen

Starten Sie ein Next.js-Projekt mit Hilfe des Dienstprogramms create-next-app. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

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

Starten Sie dann den Entwicklungsserver:

$ yarn dev

Navigieren Sie zu http://localhost:3000 und Sie sollten die Next.js Landing Page sehen.

ChakraUI

Um den UI/UX-Erstellungsprozess zu vereinfachen, werden wir ChakraUI verwenden. Chakra UI ist eine unkomplizierte, modulare und benutzerfreundliche Komponentenbibliothek, die alle notwendigen Elemente für die Entwicklung Ihrer React-Anwendungen bietet.

Falls Sie auf Probleme stoßen, lesen Sie bitte ChakraUI: Erste Schritte mit Next.js.

Installieren Sie zunächst Chakra und seine Abhängigkeiten durch Ausführen:

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

Als nächstes navigieren Sie zu Ihrer _pages/app.tsx und umhüllen Ihre App mit dem ChakraProvider wie folgt:

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

Vergessen Sie nicht, den ChakraProvider zu importieren:

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

Laden Sie das Farbmodus-Skript vor dem Inhalt, um zufällige Farbblitze zu vermeiden. Dazu können Sie _document.js wie folgt verwenden:

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

Großartig, Sie haben ChakraUI erfolgreich installiert.

Benutzeroberfläche

Lassen Sie uns nun die Benutzeroberfläche implementieren. Wir werden die folgenden zwei Seiten erstellen:

1. / zeigt die Liste der Artikel an
2. / / zeigt einen bestimmten Artikel an

Beginnen Sie mit dem Index. Ersetzen Sie den Inhalt von pages/index.js durch den folgenden Text:

// 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. Wir haben die Zustände articles und isLoading vorbereitet, die wir später beim Abrufen von Daten verwenden werden.
2. Für die Gestaltung der Benutzeroberfläche haben wir grundlegende ChakraUI-Komponenten verwendet.
3. Um alle Artikel anzuzeigen, durchlaufen wir eine Schleife durch den Artikelstatus.

Navigieren Sie dann zu pages/[slug].js und ändern Sie die Datei wie folgt:

// 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. Wir haben den Artikelzustand vorbereitet, um den Artikel zu halten.
2. Wir haben Next Router verwendet, um den Slug-Parameter aus der URL zu holen.

Backend-Integration

In diesem letzten Abschnitt werden wir das Frontend mit dem Backend verbinden.

Um das Parse SDK zu verwenden, müssen wir es zunächst installieren. Führen Sie dazu den folgenden Befehl aus:

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

Navigieren Sie dann zu Ihrer pages/_app.js und initialisieren Sie Parse wie folgt:

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

Vergessen Sie die Einfuhr nicht:

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

Um die Artikel auf der Indexseite abzurufen, können wir eine Parse.Query verwenden. Sobald die Daten abgerufen sind, können wir sie in articles speichern und isLoading auf false setzen:

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

Ähnliches können wir dann für den Artikel in pages/[slug].js tun:

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

Vergessen Sie auch hier nicht, Parse in beide Dateien zu importieren.

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

Starten Sie den Next-Entwicklungsserver (falls er nicht bereits läuft) und besuchen Sie http://localhost:3000 in Ihrem bevorzugten Webbrowser. Sie sollten die Liste Ihrer Artikel sehen und die Artikel sollten lesbar sein.

Schlussfolgerung

In diesem Artikel haben Sie etwas über APIs, RESTful APIs und deren Vor- und Nachteile gelernt. Sie sollten jetzt in der Lage sein, einfache RESTful-APIs zu erstellen und von einer Frontend-Anwendung aus eine Verbindung zu ihnen herzustellen.

Sie können den endgültigen Quellcode auf GitHub herunterladen.

Wenn Ihnen dieser Artikel gefallen hat, schauen Sie sich bitte auch den Artikel How to make a GraphQL API an.