Como criar um backend para Astro.js?

O Astro.js é um gerador de sites estáticos (SSG) e uma estrutura de front-end para a criação de aplicativos da Web rápidos e modernos.

Ele permite que você crie sites rápidos e leves por meio da pré-renderização de arquivos HTML, CSS e JavaScript estáticos no momento da criação.

Diferentemente dos SSGs tradicionais, o Astro.js também permite que você hidrate suas páginas estáticas com JavaScript em tempo de execução, oferecendo a flexibilidade de criar sites dinâmicos e interativos.

Este artigo fornece um tutorial abrangente sobre como criar um aplicativo Astro.js usando o Back4app como um Backend as a Service (BaaS).

Ele fornecerá uma visão geral do Astro.js, suas vantagens e limitações, e um guia passo a passo sobre como criar e hospedar um aplicativo Astro.js.

Vantagens do Astro.js

O Astro.js é alimentado por vários recursos importantes que o tornam uma ótima opção para a criação de sites modernos, incluindo:

Arquitetura da ilha

A arquitetura de ilha é um padrão de arquitetura da Web que envolve a divisão de uma página da Web em ilhas de funcionalidade encapsuladas e independentes.

Cada ilha pode ser representada por um único componente, um grupo de componentes ou até mesmo uma página inteira.

O Astro.js extrai sua interface de usuário (UI) em componentes menores e isolados, conhecidos como “Astro Islands”. Você pode usar essas ilhas em qualquer página, substituindo assim o JavaScript não utilizado por HTML leve.

A arquitetura em ilha tem várias vantagens, incluindo melhor desempenho, maior flexibilidade e desenvolvimento simplificado.

JavaScript mínimo

O Astro adota uma abordagem “menos JavaScript”. Ele só envia JavaScript para o cliente quando é necessário para a interatividade. Isso ajuda a reduzir o tamanho do pacote de JavaScript e melhora o tempo de carregamento.

O JavaScript mínimo no Astro.js oferece vários benefícios tangíveis, incluindo melhor desempenho do site, melhor SEO, consumo reduzido de recursos, segurança aprimorada e uma experiência de usuário mais responsiva.

Essa abordagem se alinha para fornecer aplicativos da Web eficientes e de alto desempenho, tornando o Astro.js uma opção atraente para o desenvolvimento moderno da Web.

Integração com estruturas populares

Você pode usar o Astro.js com várias estruturas JavaScript populares, incluindo React, Svelte, Vue e Lit.

Isso permite que você escolha as ferramentas de sua preferência, reutilize os componentes e o conhecimento existentes, aproveite os ecossistemas estabelecidos e mantenha um processo de desenvolvimento tranquilo.

Essa flexibilidade e compatibilidade tornam o Astro.js uma opção atraente para vários projetos.

Carregamento otimizado

O carregamento otimizado é uma das principais vantagens do Astro.js. Ele transforma fundamentalmente a maneira como as páginas da Web são projetadas e fornecidas, concentrando-se em aprimorar a experiência do usuário e o desempenho do site.

O Astro otimiza o carregamento e a renderização para diferentes dispositivos, inclusive dispositivos de baixa potência, como smartphones. Seu objetivo é proporcionar uma experiência tranquila, independentemente do dispositivo do usuário ou das condições da rede.

Limitações do Astro.js

O Astro.js possui algumas limitações das quais você deve estar ciente. Aqui estão algumas delas:

Compatibilidade com o ecossistema

O Astro.js foi projetado para funcionar com estruturas de front-end populares, como React, Svelte e Vue.js. No entanto, seu ecossistema é menos maduro do que o de estruturas como React ou Vue, portanto, é possível que você encontre menos bibliotecas e componentes de terceiros criados explicitamente para o Astro.

Requisito de familiaridade com a estrutura

O Astro.js permite o uso de várias estruturas de front-end, o que exige familiaridade com cada estrutura escolhida.

Essa amplitude de conhecimento pode ser esmagadora para os desenvolvedores que se especializam em uma estrutura ou que são novos no desenvolvimento da Web.

Trabalhar em um projeto que requer várias estruturas envolverá a manutenção da consistência entre as várias estruturas.

Isso pode ser muito desafiador, pois diferentes estruturas têm suas próprias convenções e práticas recomendadas, e harmonizá-las em um único projeto pode levar a uma estrutura de código fragmentada.

Aprendizado de otimização

O aprendizado de otimização refere-se à compreensão e à implementação de estratégias específicas para maximizar o desempenho de aplicativos da Web criados com uma estrutura.

Embora o Astro.js tenha sido projetado para ser eficiente e rápido, o aproveitamento total de seus recursos exige que você compreenda profundamente suas técnicas de otimização e as implemente no processo de desenvolvimento. Isso pode ser complexo e exigir conhecimento avançado.

Criação do aplicativo de diário

Neste tutorial, você criará um aplicativo de diário básico usando a estrutura Astro.js juntamente com o React.js.

O aplicativo de diário fornecerá a funcionalidade CRUD (criar, ler, atualizar, excluir) e usará o Back4app para armazenamento e recuperação de dados.

Você pode criar um projeto Astro.js executando este comando em seu terminal:

npm create astro@latest

O comando acima gerará um projeto básico do Astro.js e o guiará na configuração do aplicativo, incluindo aspectos como o uso do TypeScript e seu nível de rigor.

Para adicionar o React.js ao seu projeto Astro.js, execute este comando em seu terminal:

npx astro add react

Agora, seu projeto está pronto. Você pode começar a desenvolver o aplicativo com seu IDE favorito. Primeiro, você define seus estilos globais e o layout do aplicativo.

Para definir seus estilos globais, crie uma pasta de estilos dentro do diretório src. Dentro da pasta de estilos, crie um arquivo chamado global.css e defina seus estilos globais nesse arquivo.

Assim:

Com os estilos globais instalados, é hora de definir seu layout. Você encontrará um arquivo Layout.astro na pasta de layouts do diretório src.

Substitua o código existente no arquivo Layout.astro pelo seguinte bloco de código:

O bloco de código acima representa o componente de layout. Ele importa os estilos globais, configura metadados e fornece um espaço reservado para conteúdo dinâmico usando o elemento slot.

O conteúdo principal do componente é um cabeçalho h1 com um estilo específico definido na tag style.

Para aplicar o layout e os estilos globais às suas páginas, importe o componente de layout para o arquivo de página e inclua a seção HTML no componente de layout.

Para aplicar o layout à sua página inicial, siga as mesmas etapas no arquivo index.astro localizado no diretório src/pages.

Assim:

Esse bloco de código define a página inicial do seu aplicativo. Ele define um menu de navegação com um link para a página “/journal” e aplica estilos específicos para centralizar e espaçar o elemento de navegação.

Para criar a página do diário, crie um arquivo chamado journal.astro no diretório src/pages e inclua o seguinte bloco de código no arquivo.

O bloco de código acima representa a página do diário do seu aplicativo. Ele importa o componente de layout e envolve a seção HTML para fornecer uma estrutura de página consistente.

O código também define um formulário para capturar entradas de diário, equipado com campos de entrada para o título e o corpo, além de um botão “Log”. Os estilos CSS definidos na tag style controlam a aparência do formulário e de seus elementos.

Para iniciar o aplicativo no navegador da Web, inicie o servidor de desenvolvimento do aplicativo. Navegue até o diretório do projeto em seu terminal e execute o seguinte comando para iniciar o servidor de desenvolvimento.

npm run dev

O comando acima fornecerá o link http://localhost:4321/. Navegue até esse link no navegador da Web para visualizar o aplicativo.

A página inicial deve ter a seguinte aparência:

Para visualizar a página do diário, clique no link de navegação “Registre sua experiência”.

Integração do Back4app com seu aplicativo

A Back4App é uma plataforma de serviços de back-end baseada na nuvem, projetada para simplificar o desenvolvimento e o gerenciamento de aplicativos, e usará a Back4app como back-end do Astro.js.

Aproveitando a estrutura de código aberto do Parse Server, ele oferece um conjunto robusto de ferramentas que permite que os desenvolvedores se concentrem no desenvolvimento de front-end, simplificando as complexidades de back-end.

Em sua essência, o Back4App oferece funcionalidades cruciais para o desenvolvimento de aplicativos modernos, como armazenamento de dados, autenticação de usuários e um banco de dados em tempo real.

Isso a torna valiosa para a criação de experiências de usuário interativas e dinâmicas. A plataforma oferece suporte a várias linguagens e estruturas de programação, atendendo a diversas necessidades de desenvolvimento.

Criação de uma conta Back4app

Para integrar os recursos que o Back4app oferece em seus aplicativos, é necessário ter uma conta no Back4app. Você pode criar uma seguindo estas etapas simples:

1. Visite o site da Back4app.
2. Clique no botão “Sign up” (Registrar-se ).
3. Preencha o formulário de registro e envie-o.

Apresentando o plug-in Back4app ChatGPT

Recentemente, a Back4app apresentou seu plug-in ChatGPT para ajudar os desenvolvedores e entusiastas não técnicos a criar e interagir com os aplicativos Back4app.

Usando o plugin Back4app ChatGPT, você pode converter suas conversas em aplicativos reais. Isso significa que você não precisa ter experiência com a plataforma Back4app antes de interagir.

Para acessar os plug-ins do ChatGPT, você deve assinar o ChatGPT Plus. Após a assinatura, clique no botão “GPT-4” para exibir um menu pop-up. Selecione a opção “Plugins” para continuar.

Uma lista de plug-ins disponíveis será exibida na tela. Localize e selecione o plug-in Back4app (digite “Back4app” na barra de pesquisa).

Criar um aplicativo Back4app com o plug-in

Criar um aplicativo Back4app usando o plugin Back4app no ChatGPT é uma tarefa simples. Informe o ChatGPT sobre o tipo de aplicativo que você deseja criar, e ele cuidará do resto.

Por exemplo:

Como visto na imagem acima, o plug-in Back4app ChatGPT cria um aplicativo Back4app chamado “aplicativo Journal”.

Para verificar se o plug-in Back4app ChatGPT criou o aplicativo com êxito, navegue até o site do Back4app, faça login na sua conta e verifique seus aplicativos. Você deve encontrar um aplicativo chamado “aplicativo de diário” listado entre seus aplicativos.

Usando o plug-in, crie uma classe de diário no aplicativo de diário.

Como visto na imagem acima, o plug-in Back4app ChatGPT cria a classe de diário e adiciona um título, conteúdo e campo de data.

Adição de dados ao aplicativo Back4app

Usando o plugin Back4app ChatGPT, você também pode adicionar dados personalizados ao aplicativo. Por exemplo, você pode adicionar texto personalizado aos campos de título e conteúdo.

Depois de adicionar os textos, navegue até o painel do aplicativo, clique na classe do diário e confirme que o texto foi adicionado.

Conectando-se ao Back4app

Para conectar seu aplicativo de diário ao aplicativo Back4app, você precisa instalar o Parse JavaScript SDK em seu aplicativo.

Para fazer isso, execute o seguinte comando em seu terminal:

npm install parse 

Depois de instalar o Parse JavaScript SDK, você precisa das credenciais Application ID e Javascript KEY.

Você pode encontrar essas credenciais na seção Security & Keys (Segurança e chaves ) no painel do seu aplicativo Back4app. Armazene o ID do aplicativo e a CHAVE Javascript de forma segura em seu aplicativo.

Como adicionar dados ao Back4app a partir do aplicativo

Anteriormente neste artigo, você aprendeu como adicionar dados ao Back4app usando o plug-in Back4app ChatGPT. Para fazer isso usando seu aplicativo de diário, você utilizará o Parse Javascript SDK.

No arquivo journal.astro, adicione o bloco de código abaixo:

Esse bloco de código representa um script JavaScript que se integra ao Parse para criar e salvar entradas de diário. Ele importa a versão reduzida do Parse de parse/dist/parse.min.js e chama o método initialize.

Esse método usa as credenciais Application_ID e Javascript_KEY como argumentos. Depois de chamar o método initialize no Parse, defina a propriedade serverURL no Parse como https://parseapi.back4app.com/.

O código seleciona os elementos input, textarea e botão do DOM e os atribui às variáveis title, body e button.

O campo de entrada recebe o título do registro no diário e o campo de área de texto recebe o corpo do registro no diário.

A função addJournal contém a lógica necessária para adicionar dados ao banco de dados do Back4app. Ela cria uma nova instância de um objeto Journal, define suas propriedades de título e conteúdo para os valores dos elementos de entrada e de área de texto e salva-o no Back4app.

Com o método addEventListener, o código adiciona um ouvinte de eventos ao botão, garantindo que clicar nele acione a função addJournal.

Obtenção de dados do Back4app

Para buscar dados do Back4app e exibi-los em seu aplicativo, você utilizará um componente React. Crie um arquivo Journal.tsx no diretório src/components. No arquivo, importe e inicialize a biblioteca Parse.

Assim:

Em seguida, defina os elementos JSX do componente:

Em seguida, crie um estado de diário e defina uma função que contenha a lógica para buscar dados do Back4app.

Assim:

Com o método Parse.Query, a função fetchJournal usa o Parse SDK para construir uma consulta que recupera dados da classe Journal.

O método find do objeto de consulta retorna uma matriz que contém os resultados da consulta, e a função setJournal atualiza o estado do diário com os dados recuperados.

Esse código usa o gancho useEffect para executar efeitos colaterais no componente. Ele chama fetchJournal para buscar dados quando o componente é montado. Agora, no componente, exiba o conteúdo do estado do diário.

Assim:

O bloco de código acima renderiza a lista de entradas do diário como uma coleção de elementos div, cada um com conteúdo específico e um botão “Excluir” dedicado.

Ele exibe o título e o conteúdo de cada entrada do diário dentro das tags h3 e p e tem um botão “Excluir” para permitir que os usuários removam as entradas facilmente.

Para estilizar os elementos JSX definidos em seu componente de diário, adicione os seguintes estilos ao seu arquivo global.css:

Agora, exiba o componente do diário em sua página inicial. Para fazer isso, substitua o código existente no arquivo index.astro pelo bloco de código abaixo:

Esse bloco de código importa o componente de diário e o renderiza. A diretiva client:load garante que o componente journal seja carregado imediatamente no carregamento da página, proporcionando uma experiência de usuário suave e responsiva.

Exclusão de dados do Back4app

Para garantir que o botão de exclusão do seu aplicativo ao lado de cada entrada funcione, você precisa definir uma função que exclua uma entrada de sua escolha. Usando o evento de clique, você vinculará essa função ao botão de exclusão.

Assim:

A função deleteJournal cria uma nova instância de um objeto Journal usando o método Parse.Object.extend. Depois de criar o objeto, ela define a propriedade id do objeto como o parâmetro id passado para a função.

Em seguida, a função chama o método assíncrono destroy do objeto “Journal” para excluir o registro do diário com o ID fornecido do Back4app.

Com o método filter, a função filtra o registro do diário com o ID especificado do estado do diário, criando uma nova matriz que exclui o registro excluído.

Por fim, com o método setJournal, a função atualiza o estado do diário com essa nova matriz.

Agora vincule a função deleteJournal ao botão "Delete" usando o manipulador de eventos de clique. Isso fará com que seus elementos JSX no arquivo Journal.tsx tenham a seguinte aparência:

Teste do aplicativo

Agora que você terminou de criar o aplicativo, é importante testá-lo. Para fazer isso, navegue até o terminal, execute o servidor de desenvolvimento e visualize o aplicativo no navegador da Web.

O aplicativo deve ter a seguinte aparência:

Clique em “Log your experience” (Registre sua experiência) para acessar a página do diário do aplicativo e preencha os campos de entrada.

Depois de preencher os campos de entrada, clique em registrar para adicionar os dados ao banco de dados do Back4app. Retorne à sua página inicial.

Agora, para testar se você pode excluir uma entrada, clique no botão excluir da entrada “My First Day Journaling”. Sua página inicial deve se parecer com a imagem abaixo.

Conclusão

Neste artigo, você se aprofundou na estrutura do Astro.js, conhecendo suas vantagens e possíveis desvantagens. Você aprendeu a criar um aplicativo Astro perfeitamente integrado à biblioteca React.

O Astro.js é uma excelente opção para a criação de vários sites, desde páginas de destino simples até aplicativos da Web complexos. Ele é especialmente adequado para sites que precisam ser rápidos, leves e escalonáveis.

Para saber mais, por favor, leia o tutorial detalhado Como criar um backend para Astro.js.