Como criar uma API REST?

Cobertura da API REST

Este artigo apresenta uma introdução às APIs, especificamente às APIs RESTful. Examinaremos seus benefícios, limitações e alternativas. Além disso, demonstraremos como criar uma API REST usando o Back4app, um dos melhores provedores de BaaS.

O que é uma API?

Uma interface de programação de aplicativos (API) é um conjunto de regras que define como dois dispositivos ou sistemas podem se comunicar entre si. As APIs são criadas por desenvolvedores e destinadas a serem usadas por outros desenvolvedores ou sistemas, e não diretamente pelos usuários finais. Os usuários finais geralmente as utilizam indiretamente por meio dos chamados frontends ou clientes.

Você pode pensar em uma API como um mediador entre um cliente e um recurso ou um serviço da Web. O cliente envia uma solicitação, a solicitação é processada e, por fim, um recurso ou uma resposta é retornada.

Atualmente, as APIs são usadas em quase todos os lugares. A maioria das empresas tem várias APIs internas e acessíveis ao público. Hoje mesmo, você provavelmente já interagiu com mais de cem APIs. Por exemplo, quando verificou a hora, o clima, percorreu o Facebook ou assistiu a um vídeo do YouTube.

Quais são as diferenças entre uma API e um SDK?

Conforme mencionado acima, uma API é um conjunto de regras que define como dois dispositivos ou sistemas podem se comunicar. Um kit de desenvolvimento de software (SDK), por outro lado, é um conjunto de ferramentas, bibliotecas e documentação que ajuda os desenvolvedores a criar software para uma plataforma específica (por exemplo, Windows, Web, Android, iOS).

Os SDKs geralmente utilizam várias APIs nos bastidores. Veremos um exemplo prático na segunda parte do artigo.

O que é REST?

A abordagem arquitetônica de software denominada REST (Representational State Transfer) caracteriza a estrutura da Internet. Ela não constitui um protocolo ou padrão, permitindo diversos métodos de implementação por parte dos desenvolvedores. Roy Fielding apresentou o REST em 2000, e ele tem servido como padrão predominante para a criação de APIs da Web há mais de dez anos.

O REST é baseado no protocolo HTTP e utiliza diferentes métodos HTTP, como GET, POST, PUT e DELETE, para manipular os recursos. Essas operações são muitas vezes chamadas de CRUD (Create Retrieve Update Delete). O REST é compatível com vários formatos de dados, incluindo JSON, HTML, XLT, Python, JavaScript e assim por diante. O formato de dados mais comumente usado é o JSON.

Para que uma API seja considerada RESTful, ela deve estar alinhada com as seis restrições a seguir:

  1. Arquitetura de cliente e servidor: os componentes do cliente e do servidor devem ser separados.
  2. Ausência de estado: os aplicativos de servidor não podem armazenar nenhum dado do cliente entre as solicitações.
  3. Capacidade de armazenamento em cache: quando possível, os recursos devem ser armazenados em cache no lado do cliente ou do servidor.
  4. Sistema em camadas: as APIs devem permitir intermediários, mas isso não deve afetar o cliente.
  5. Interface uniforme: a interface entre o servidor e o cliente deve ser uniforme.
  6. Código sob demanda (opcional) — permite que o servidor envie código executável para o cliente.

A diferença entre REST e RESTful é que REST se refere ao conjunto de restrições, enquanto RESTful se refere a uma API que está em conformidade com essas restrições.

Como funcionam as APIs RESTful?

As APIs RESTful funcionam de forma semelhante aos navegadores. A principal diferença é que os navegadores usam HTTP para solicitar páginas da Web e outros recursos dos servidores, enquanto as APIs RESTful usam HTTP para solicitar e manipular recursos de dados.

Uma chamada típica de API RESTful segue estas etapas:

  1. O cliente envia uma solicitação ao servidor.
  2. O servidor autentica o cliente e verifica se ele tem permissões suficientes para a solicitação.
  3. O servidor processa a solicitação, por exemplo, realiza cálculos e obtém dados do banco de dados.
  4. O servidor retorna uma resposta ao cliente.
  5. O cliente processa a resposta.

As etapas podem variar de acordo com a implementação da API. As instruções sobre como usar uma API são definidas na referência da API (ou na documentação da API).

Estrutura da solicitação

Uma solicitação contém o seguinte:

PropriedadeDescrição
URIDefine o recurso que o servidor deve manipular. O URL também pode conter parâmetros de consulta para filtrar ou classificar os resultados.
Método HTTPInforma ao servidor o que fazer com esse recurso. Por exemplo, GET retorna o recurso, POST adiciona um novo recurso, PUT atualiza um recurso existente e DELETE exclui o recurso.
Cabeçalhos (opcional)Contém metadados sobre a solicitação, como informações de autenticação, cookies, agente do usuário e tipo de conteúdo.
Corpo (opcional)Contém informações adicionais para executar a operação solicitada.

Uma solicitação de exemplo é semelhante a esta:

Exemplo de solicitação de API REST

Estrutura de resposta

Uma resposta contém o seguinte:

PropriedadeDescrição
Código de statusOs códigos de status definem se a solicitação foi bem-sucedida(2xx) ou não(4xx, 5xx).
CabeçalhosContém metadados sobre a resposta, como a hora do servidor, a duração do conteúdo e o tipo de conteúdo. Além disso, o servidor pode usar o cabeçalho Set-Cookie para definir cookies no cliente.
CorpoContém a representação do recurso. O formato da representação é baseado no cabeçalho Content-Type da solicitação (por exemplo, application/json).

Um exemplo de resposta é o seguinte:

Exemplo de resposta da API REST

Quais são os benefícios das APIs RESTful?

Escalabilidade

As APIs RESTful são altamente dimensionáveis e podem ser dimensionadas tanto vertical quanto horizontalmente. A adição de novos endpoints ou recursos tem um impacto mínimo no desempenho da API, facilitando o dimensionamento conforme necessário.

Vários formatos de dados

As APIs RESTful podem retornar dados em diferentes formatos com base nos cabeçalhos de solicitação do cliente. Isso as torna extremamente flexíveis e fáceis de integrar aos sistemas existentes. Os dados podem ser retornados na forma de JSON, XLT, Python, HTML, JavaScript e assim por diante.

Eficiência

As APIs RESTful são leves e têm uma sobrecarga menor do que o SOAP (Simple Object Access Protocol). Isso as torna rápidas e eficientes no tratamento de solicitações. Uma API RESTful típica pode tratar de 10.000 a 15.000 solicitações por segundo.

Independência da plataforma

Outro grande benefício das APIs RESTful é que o servidor e o cliente são completamente independentes. Isso permite que os desenvolvedores implementem APIs RESTful e clientes em várias linguagens de programação, como Java, JavaScript, Python e muito mais!

Fácil de entender

Como a REST é baseada em HTTP, é extremamente fácil de entender. É quase certo que a maioria dos desenvolvedores já trabalhou ou implementou uma API RESTful pelo menos uma vez.

Quais são as limitações das APIs RESTful?

Sub-busca e super-busca de dados

Um dos maiores problemas das APIs RESTful é a busca excessiva e a busca insuficiente de dados. A busca excessiva ocorre quando são retornados mais dados do que o necessário e a busca insuficiente ocorre quando não são retornados dados suficientes (principalmente ao lidar com relacionamentos).

Sem assinaturas de dados em tempo real

As APIs RESTful não permitem a assinatura de alterações nos dados. Isso significa que os clientes precisam consultar o servidor para detectá-las. A sondagem é extremamente ineficiente e pode resultar em tráfego de rede desnecessário, aumento da latência, maior uso de largura de banda e redução da escalabilidade.

Nenhum sistema de controle de versão

As APIs RESTful não têm um sistema de controle de versão incorporado. Além disso, não há como preterir campos, o que dificulta a evolução das APIs ao longo do tempo. Toda vez que você lançar uma atualização importante da API, será forçado a modificar todos os clientes.

Para resolver os problemas mencionados acima, surgiram várias alternativas REST. Algumas das mais populares incluem o protocolo SOAP (Simple Object Access Protocol), GraphQL e gRPC.

O que são métodos de autenticação RESTful?

As APIs RESTful podem usar diferentes métodos de autenticação para proteger seus pontos de extremidade. Os métodos de autenticação mais comumente usados são:

  • Autenticação HTTP
  • Chaves de API
  • OAuth 2.0
  • Conexão OpenID
  • Autenticação JWT

A maioria desses métodos exige que o cliente envie suas credenciais ou sua chave de API no cabeçalho da solicitação. Diferentes métodos de autenticação devem ser considerados ao iniciar um projeto.

Como criar uma API RESTful?

Esta parte do artigo examina a criação de uma API RESTful usando o Back4app e o estabelecimento de uma conexão com um frontend Next.js.

Pré-requisitos

  • Experiência com JavaScript ES6
  • Experiência com React e Next.js
  • Conhecimento básico de REST

O que é o Back4app?

O Back4app é uma solução incrível de BaaS – Backend as a Service. Ele usa software de código aberto e oferece muitos recursos para ajudar os desenvolvedores a criar aplicativos móveis e da Web com mais rapidez. Isso permite que as empresas se concentrem em sua lógica de negócios, sem se preocupar com a infraestrutura de nuvem.

Com um painel fácil de usar e uma interface de linha de comando, a plataforma oferece kits de desenvolvimento de software (SDKs) compatíveis com ferramentas amplamente utilizadas, como Node.js, Flutter, React Native, Android, Angular e iOS.

O Back4app tem um modelo de preços simples que pode se adequar a qualquer aplicativo. Eles também têm um plano gratuito, que não exige cartão de crédito, que é uma boa opção para desenvolvimento, teste e prototipagem.

Para saber mais sobre a Back4app, leia O que é a Back4app?

Introdução ao projeto

Neste artigo, criaremos um aplicativo Web de blog simples. O aplicativo Web permitirá que os editores adicionem artigos e que os usuários os leiam. O aplicativo terá duas partes: o backend (baseado em REST) e o frontend. Para o backend, usaremos o Back4app e, para o frontend, usaremos o React com o Next.js.

Visualização do aplicativo Back4app REST

Backend

Criar o aplicativo Back4app

As etapas a seguir exigirão que você tenha uma conta Back4app. Vá em frente e faça login ou crie uma conta se ainda não tiver uma.

Navegue até o painel de controle do Back4app e crie um novo aplicativo clicando em “Build new app” (Criar novo aplicativo).

Back4app Criar novo aplicativo

Selecione “Backend as a Service (BaaS)”, dê a ele um nome personalizado e selecione “NoSQL Database” como seu banco de dados. Por fim, clique em “Create” para iniciar o processo de criação do aplicativo.

A Back4app levará alguns minutos para preparar tudo o que é necessário para seu aplicativo, como o banco de dados, o dimensionamento e a segurança. Quando seu aplicativo estiver pronto, você será redirecionado para a visualização “Database” (Banco de dados).

Painel de controle do Back4app

Definir classes de banco de dados

Continuando, vamos definir as classes de banco de dados.

Teremos as duas classes a seguir:

  1. ArticleCategory representa uma categoria de artigo (por exemplo, blockchain, IA, programação)
  2. Article representa um artigo. Um artigo pode ter várias categorias (M:N).

Para criar uma classe, navegue até o painel do Back4app e selecione “Database” (Banco de dados) na barra lateral. Em seguida, clique em “Create a class” (Criar uma classe), nomeie-a ArticleCategoy e ative “Public Read and Write” (Leitura e gravação públicas).

Ao passar para a produção, você deve desativar a opção “Public Read and Write” e reforçar a segurança com ACLs e CLPs. Para obter mais informações, consulte Segurança do Parse Server.

Back4app Define Class

Em seguida, adicione os seguintes campos a ele:

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

Execute as mesmas etapas para a segunda classe denominada Article. Adicione os seguintes campos:

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

Ótimo, é isso.

Preencher o banco de dados

Nas etapas futuras, quando testarmos a API, precisaremos de alguns dados para trabalhar. Vá em frente e preencha o banco de dados com alguns exemplos de categorias de artigos e artigos.

Para adicionar uma nova ArticleCategory, selecione-a na barra lateral e clique em “Add a row” (Adicionar uma linha).

Back4app Criar linha

Você pode usar essas categorias de artigos ou criar suas próprias categorias:

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

Você também pode usar o ChatGPT para gerar dados de amostra. Para saber mais sobre o ChatGPT, consulte Como usar o ChatGPT para criar um aplicativo?

Faça o mesmo com a 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>         |
+------------------+---------------+--------------+---------+-----------------------+

Certifique-se de substituir e pelo ArticleCategory objectId real. No meu caso, esses são SxS0yiWDij e Hf8yBDTO79 (imagem acima para referência).

API REST

A grande vantagem do Back4app é que, à medida que você define as classes do banco de dados, o Back4app configura automaticamente uma API REST para você. A API REST gerada permite que você execute operações CRUD básicas em todas as classes do seu banco de dados.

Console da API REST

Para testar a API, navegue até o painel do Back4app e selecione “API > Console > REST” na barra lateral. Em seguida, selecione GET como o tipo de solicitação e classes/Article como o ponto de extremidade. Por fim, clique em “Send Query” (Enviar consulta) no canto inferior direito da tela para enviar a solicitação.

Console REST do Back4app

Essa solicitação retornará todos os artigos em seu banco de dados. Você deverá obter uma resposta semelhante:

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

O console REST também permite que você execute operações POST, PUT e DELETE. Além disso, você pode usar os parâmetros do Parse Query para filtrar dados, manipular relacionamentos e muito mais.

Por exemplo, se você quiser buscar artigos que pertençam à categoria “Blockchain”, poderá usar a seguinte instrução where:

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

Certifique-se de substituir pelo objectId da blockchain.

Para saber mais sobre parâmetros de consulta, consulte o Guia da API REST do Parse.

cURL

O console REST é ótimo, mas quando estiver trabalhando em aplicativos reais, você desejará uma abordagem mais orientada ao programador para solicitações de API. Uma das ferramentas que você pode usar é o cURL, uma ferramenta de linha de comando para vários protocolos, como HTTP, FTP e SMTP.

Um exemplo de comando cURL para listar as categorias de artigos seria o seguinte:

$ 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

Você pode obter as chaves em “Back4app Dashboard > App Settings > Security & Keys”.

Como você pode ver, ao usar o cURL, é necessário especificar o tipo de método HTTP e fornecer o ID do aplicativo e a chave da API REST. Além disso, você pode canalizar a resposta para o jq para formatá-la automaticamente e destacá-la com cores.

Referência da API

Outra grande vantagem do Back4app é que ele gera automaticamente referências de API para todas as classes de banco de dados. Toda vez que você faz uma alteração, ela é refletida na documentação.

Para acessar a referência da API, selecione “Database” (Banco de dados) na barra lateral e use os três pontos no canto superior direito da tela para ver todas as opções. Por fim, selecione “API Reference”.

Documentação de acesso ao Back4app

A referência da API contém as descrições de todas as classes do banco de dados, instruções para operações CRUD, solicitações de amostra, respostas e trechos de código.

Documentos gerados pelo Back4app

Isso é tudo para o backend. Na próxima seção, veremos como implementar um frontend que possa se comunicar com o backend.

Front-end

Conforme mencionado acima, usaremos o React com Next.js 13 para criar o frontend. De modo geral, há três maneiras de se conectar a um backend baseado no Parse a partir de um frontend JavaScript:

  1. Usando a API REST (solicitações e respostas HTTP)
  2. Usando a API GraphQL (abordada neste artigo)
  3. Usando o JavaScript SDK

Você deve optar pela última ou pela penúltima opção. O uso direto da API REST não é recomendado em aplicativos clientes que podem utilizar SDKs do Parse (por exemplo, JavaScript, Flutter, Android, iOS, Xamarin). Isso ocorre porque o Parse SDK permite que você escreva um código mais limpo e menos propenso a erros. Nos bastidores, os SDKs do Parse usam a API REST.

Criar o próximo aplicativo

Vá em frente e crie um projeto Next.js usando o utilitário create-next-app. Abra seu terminal e execute o seguinte 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.

Em seguida, execute o servidor de desenvolvimento:

$ yarn dev

Navegue até http://localhost:3000 e você verá a página de destino Next.js.

PróximoPágina de destino padrão do JS

ChakraUI

Para facilitar o processo de criação de UI/UX, utilizaremos o ChakraUI. O Chakra UI é uma biblioteca de componentes descomplicada, modular e fácil de usar que fornece todos os elementos necessários para o desenvolvimento de seus aplicativos React.

Caso você tenha algum problema, consulte ChakraUI: Introdução ao Next.js.

Primeiro, instale o Chakra e suas dependências em execução:

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

Em seguida, navegue até _pages/app.tsx e envolva seu aplicativo com o ChakraProvider da seguinte forma:

// 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ão se esqueça de importar o ChakraProvider:

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

Carregue o script do modo de cor antes do conteúdo para evitar flashes de cores aleatórios. Para fazer isso, você pode utilizar _document.js da seguinte forma:

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

Ótimo, você instalou o ChakraUI com sucesso.

Interface do usuário

Continuando, vamos implementar a interface do usuário. Criaremos as duas páginas a seguir:

  1. / exibe a lista de artigos
  2. / / exibe um artigo específico

Comece com o índice. Substitua o conteúdo de pages/index.js pelo seguinte:

// 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. Preparamos os estados articles e isLoading que usaremos posteriormente ao buscar dados.
  2. Usamos componentes básicos do ChakraUI para projetar a interface do usuário.
  3. Para exibir todos os artigos, percorremos o estado dos artigos.

Em seguida, navegue até pages/[slug].js e altere-o para o seguinte:

// 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. Preparamos o estado do artigo para manter o artigo.
  2. Usamos o Next Router para buscar o parâmetro slug no URL.

Integração de back-end

Nesta última seção, conectaremos o frontend ao backend.

Para usar o Parse SDK, primeiro precisamos instalá-lo. Vá em frente e execute o seguinte comando:

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

Em seguida, navegue até pages/_app.js e inicialize o Parse da seguinte forma:

// 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ão se esqueça da importação:

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

Para buscar os artigos na página de índice, podemos usar um Parse.Query. Depois que os dados forem obtidos, podemos armazená-los em articles e definir isLoading como 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 (
    // ...
  );
}

Em seguida, podemos fazer algo semelhante para o artigo em 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 (
    // ...
  );
}

Novamente, não se esqueça de importar o Parse em ambos os arquivos.

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

Inicie o servidor de desenvolvimento do Next (se ele ainda não estiver em execução) e acesse http://localhost:3000 em seu navegador da Web favorito. Você deverá ver a lista de seus artigos e os artigos deverão estar legíveis.

Detalhes do artigo do back4app-rest

Conclusão

Neste artigo, você aprendeu sobre APIs, APIs RESTful e suas vantagens e desvantagens. Agora você deve ser capaz de criar APIs RESTful simples e se conectar a elas a partir de um aplicativo front-end.

Você pode obter o código-fonte final no GitHub.

Se você gostou deste artigo, dê uma olhada também no artigo Como criar uma API GraphQL.


Leave a reply

Your email address will not be published.