Como Construir um Frontend Blitz.js e Conectá-lo a um Backend?

neste guia, você construirá um aplicativo de lista de tarefas usando blitz js e o conectará a um backend gerenciado no back4app este tutorial passo a passo foi projetado para ajudá lo a implementar operações crud essenciais e criar uma interface de usuário dinâmica usando blitz js construir um aplicativo full stack pode ser complexo se você precisar gerenciar tanto os sistemas frontend quanto backend ao aproveitar o back4app, você pode simplificar a gestão do backend através de um baas escalável , permitindo que você se concentre em construir uma interface envolvente com blitz js o back4app fornece um conjunto de serviços de backend, incluindo um banco de dados nosql pronto para uso, autenticação, funções em nuvem e endpoints de api esses recursos permitem que você desenvolva e implante rapidamente seu aplicativo sem o ônus da manutenção do servidor principais conclusões ao final deste tutorial, você será capaz de configurar um projeto moderno de blitz js usando ferramentas padrão da indústria integrar um backend do back4app com seu aplicativo blitz js usando o parse sdk implementar operações crud para gerenciar sua lista de tarefas containerizar e implantar seu aplicativo blitz js usando a implantação web do back4app pré requisitos antes de começar, certifique se de que você tem o seguinte node js e npm instalados em sua máquina verifique a instalação com node v e npm v no seu terminal conhecimento básico de blitz js , incluindo roteamento, consultas e mutações familiaridade com react é benéfica, pois o blitz js se baseia nele uma conta back4app para configurar e gerenciar seus serviços de backend inscreva se em back4app https //www back4app com/ se você ainda não tiver com esses pré requisitos atendidos, você está pronto para inicializar seu projeto blitz js e integrá lo a um backend robusto configuração do projeto comece configurando sua aplicação blitz js o blitz js oferece uma experiência de desenvolvedor simplificada ao combinar o poder do next js com um framework full stack execute o seguinte comando para criar um novo projeto blitz js substitua todo app pelo nome do seu projeto escolhido npx blitz new todo app navegue até o diretório do seu projeto cd todo app execute seu servidor de desenvolvimento para verificar se tudo está configurado corretamente npm run dev visite a url exibida no seu terminal para confirmar que seu aplicativo blitz js está em execução configurando o backend de tarefas no back4app back4app oferece um backend parse gerenciado que simplifica a gestão de dados para seu aplicativo nesta seção, você criará um modelo de dados para armazenar tarefas para sua lista de tarefas criando seu aplicativo backend faça login no seu painel do back4app https //www back4app com/ e clique em "criar um novo aplicativo " forneça um nome para seu aplicativo (por exemplo, todoblitzapp ) e selecione nodejs/parse como o tipo de backend na seção "banco de dados" > "navegador" clique em "criar uma classe" e selecione "personalizado " nomeie a classe tarefa e defina as permissões de nível de classe para permitir leitura e escrita públicas (você pode ajustar essas configurações mais tarde) adicione os seguintes campos à classe tarefa título (string) – o título da tarefa descrição (string) – detalhes sobre a tarefa concluído (booleano) – se a tarefa está finalizada datadevencimento (data) – o prazo para a tarefa clique em "salvar" para criar o esquema integrando back4app com blitz js para conectar seu aplicativo blitz js ao back4app, instale o sdk javascript do parse npm install parse em seguida, configure o sdk do parse em seu projeto blitz js crie um novo arquivo de configuração (por exemplo, src/parseclient js ) e inicialize o parse conforme mostrado abaixo substitua os espaços reservados pelas suas credenciais do back4app de configurações do app > segurança e chaves // src/parseclient js import parse from "parse/dist/parse min js"; const parse app id = "your application id"; const parse js key = "your javascript key"; const parse server url = "https //parseapi back4app com/"; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; agora você pode importar esta configuração em suas consultas e mutações do blitz js para interagir com seu backend construindo o frontend com blitz js com o backend configurado, é hora de construir a interface da lista de tarefas no blitz js você usará as consultas e mutações integradas do blitz js para realizar operações crud estruturando suas páginas e chamadas de api no blitz js, as páginas estão localizadas na src/pages diretório abra src/pages/index tsx e adicione o seguinte código para configurar a página, consultar tarefas do back4app e definir mutações para adicionar, alternar e excluir tarefas // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { const task = parse object extend("task") const task = new task() task set("title", title) task set("description", description) task set("completed", false) await task save() } const toggletask = async (id string, currentstatus boolean) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) task set("completed", !currentstatus) await task save() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} classname="form" \> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home esta página utiliza os hooks de consulta do tanstack para buscar tarefas e lidar com ações do usuário, garantindo uma integração perfeita com seu backend do back4app para garantir que o usequery funcione, você precisa envolver toda a sua aplicação em um queryclientprovider você faz isso no arquivo src/pages/ app tsx substitua o código no arquivo src/pages/ app tsx pelo bloco de código abaixo // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) adicionando estilos globais para definir o estilo básico do seu aplicativo, adicione o bloco de código ao arquivo css em src/styles/globals css / src/styles/globals css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } importe seus estilos globais adicionando a seguinte linha em src/pages/ app tsx (ou no seu arquivo de componente app personalizado) / src/pages/ app tsx / import " /styles/globals css"; seu aplicativo blitz js agora exibe uma interface de lista de tarefas totalmente funcional integrada ao back4app containerizando e implantando seu aplicativo blitz js no back4app a implantação web do back4app fornece um ambiente containerizado que simplifica o processo de implantação você irá empacotar seu aplicativo blitz js em um contêiner docker e implantá lo de forma contínua preparando seu aplicativo blitz js para produção primeiro, construa sua aplicação blitz js para produção blitz build criando um dockerfile crie um dockerfile no diretório raiz do seu projeto com o seguinte conteúdo from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] este dockerfile constrói seu projeto blitz js e prepara uma imagem de produção usando um runtime node js leve após criar seu dockerfile, crie um dockerignore e copie e cole seu arquivo gitignore construindo e testando seu contêiner docker construa a imagem docker localmente docker build t todo blitz frontend execute o contêiner para testá lo docker run p 3000 3000 todo blitz frontend visite http //localhost 3000 no seu navegador para verificar se seu aplicativo blitz js está funcionando corretamente implantando seu aplicativo via back4app web deployment envie seu projeto para o github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main em seguida, faça login em back4app web deployment https //www back4app com/containers e siga estas etapas clique "criar novo app" e insira os detalhes do seu projeto escolha repositório github e autorize o back4app selecione seu todo blitz repositório escolha implantação dockerfile e verifique as configurações de build clique "implantar" para iniciar o processo de implantação uma vez implantado, use o painel do back4app para monitorar logs, gerenciar builds e configurar domínios personalizados, se necessário testando e depurando seu aplicativo após a implantação, certifique se de que seu aplicativo funcione como esperado verificando a conectividade da api use as ferramentas de desenvolvedor do seu navegador para verificar se as solicitações da api para adicionar, alternar e excluir tarefas são bem sucedidas verificando a persistência de dados adicione tarefas através da interface do usuário e atualize a página para confirmar que elas estão salvas no banco de dados back4app testando operações crud valide se as tarefas podem ser alternadas e excluídas, e inspecione os logs do console em busca de erros tratando casos especiais tente enviar entradas inválidas para testar a robustez de suas validações melhores práticas e dicas de otimização considere as seguintes recomendações para um aplicativo seguro e eficiente otimize as solicitações da api use processamento em lote e limite os campos consultados para reduzir a sobrecarga da rede proteja variáveis de ambiente armazene credenciais sensíveis (id do aplicativo e chave javascript) em um arquivo seguro env implemente controle de acesso use acls dinâmicas para garantir que apenas usuários autorizados possam modificar dados aproveite o cloud code desloque lógica complexa para o cloud code do back4app para melhorar o desempenho e a segurança conclusão você agora construiu um aplicativo de lista de tarefas full stack usando blitz js integrado com um backend back4app este tutorial o guiou pela inicialização do projeto, integração do backend e implantação em contêiner à medida que você avança, considere expandir seu aplicativo com recursos como gerenciamento avançado de usuários, atualizações em tempo real e integrações de terceiros para mais insights, explore a documentação do back4app https //www back4app com/docs e recursos do blitz js