Construindo o App de Ingressos com Next.js, Vercel e Back4App

neste tutorial, vamos construir um sistema de bilhetagem usando next js com o roteador de aplicativos, back4app como o serviço de backend, e tailwind css para estilização o aplicativo permite que os usuários criem, atualizem, visualizem e excluam bilhetes, enquanto utilizam parse server no back4app para gerenciamento de banco de dados 1\ pré requisitos antes de começar, certifique se de que você tem node js instalado em sua máquina ( https //nodejs org/ ) conta do back4app ( https //www back4app com/ ) conta do vercel para implantação ( https //vercel com/ ) 2\ configurando o back4app faça login no seu painel do back4app e crie um novo projeto navegue até o navegador de dados e crie uma nova classe chamada bilhete com o seguinte esquema nome do campo tipo título string descrição string categoria string prioridade número progresso número status string criadoem data (gerado automaticamente) atualizadoem data (gerado automaticamente) 3\ configurando o frontend (next js) 3 1 criar um novo projeto next js execute o seguinte comando para criar um novo projeto next js npx create next app\@latest ticketing app cd ticketing app 3 2 instalar dependências instalar tailwind css , font awesome , e parse sdk para operações de backend npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 configurar o tailwind css edite o tailwind config js arquivo para configurar os caminhos de conteúdo do tailwind css module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } em styles/globals css , adicione as importações do tailwind @tailwind base; @tailwind components; @tailwind utilities; 3 4 criar a estrutura do projeto seguindo a estrutura fornecida, crie os diretórios e componentes necessários estrutura de diretórios /app /tickets /\[id] page js layout js page js /components deleteblock jsx nav jsx prioritydisplay jsx progressdisplay jsx statusdisplay jsx ticketcard jsx ticketform jsx /lib parseclient js 4\ configurando o cliente parse na /lib pasta, crie um parseclient js arquivo para configurar o sdk do parse import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; substitua 'your app id' e 'your js key' pelas credenciais do seu projeto back4app 5\ criando os componentes principais 5 1 formulário de ticket este componente irá lidar tanto com criação quanto com atualização de tickets em /components/ticketform jsx , crie o seguinte import { usestate } from 'react'; import parse from ' /lib/parseclient'; export default function ticketform({ ticket }) { const \[title, settitle] = usestate(ticket? title || ''); const \[description, setdescription] = usestate(ticket? description || ''); const handlesubmit = async (e) => { e preventdefault(); const ticket = parse object extend('ticket'); const newticket = ticket || new ticket(); newticket set('title', title); newticket set('description', description); try { await newticket save(); alert('ticket saved successfully!'); } catch (error) { console error('error saving ticket ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" value={title} onchange={(e) => settitle(e target value)} placeholder="title" required /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description" required /> \<button type="submit">save ticket\</button> \</form> ); } 5 2 cartão de ticket este componente exibirá informações individuais do ticket em /components/ticketcard jsx import link from 'next/link'; import progressdisplay from ' /progressdisplay'; export default function ticketcard({ ticket }) { return ( \<div classname="border p 4"> \<h2>{ticket title}\</h2> \<p>{ticket description}\</p> \<progressdisplay progress={ticket progress} /> \<link href={`/tickets/${ticket objectid}`}>edit\</link> \</div> ); } 5 3 deleteblock um componente de confirmação para excluir tickets em /components/deleteblock jsx import parse from ' /lib/parseclient'; export default function deleteblock({ ticketid, ondelete }) { const handledelete = async () => { const query = new parse query('ticket'); const ticket = await query get(ticketid); try { await ticket destroy(); alert('ticket deleted successfully'); ondelete(); } catch (error) { console error('error deleting ticket ', error); } }; return ( \<button onclick={handledelete}>delete ticket\</button> ); } 5 4 progressdisplay este componente mostra o progresso como uma barra percentual em /components/progressdisplay jsx export default function progressdisplay({ progress }) { return ( \<div> \<div classname="w full bg gray 200 rounded"> \<div classname="bg blue 600 text xs font medium text blue 100 text center p 0 5 leading none rounded" style={{ width `${progress}%` }} \> {progress}% \</div> \</div> \</div> ); } 5 4 progressdisplay 6\ páginas e roteamento 6 1 lista de tickets em /app/page js , exiba a lista de tickets import { useeffect, usestate } from 'react'; import parse from ' /lib/parseclient'; import ticketcard from ' /components/ticketcard'; export default function home() { const \[tickets, settickets] = usestate(\[]); useeffect(() => { const fetchtickets = async () => { const query = new parse query('ticket'); const results = await query find(); settickets(results); }; fetchtickets(); }, \[]); return ( \<div> \<h1>tickets\</h1> {tickets map(ticket => ( \<ticketcard key={ticket id} ticket={ticket} /> ))} \</div> ); } 6 2 detalhe e edição do ticket em /app/tickets/\[id]/page js import { useeffect, usestate } from 'react'; import { userouter } from 'next/router'; import parse from ' / / /lib/parseclient'; import ticketform from ' / / /components/ticketform'; import deleteblock from ' / / /components/deleteblock'; export default function ticketdetail() { const router = userouter(); const { id } = router query; const \[ticket, setticket] = usestate(null); useeffect(() => { if (!id) return; const fetchticket = async () => { const query = new parse query('ticket'); const result = await query get(id); setticket(result); }; fetchticket(); }, \[id]); const handledelete = () => { router push('/'); }; if (!ticket) return \<div>loading \</div>; return ( \<div> \<ticketform ticket={ticket} /> \<deleteblock ticketid={ticket id} ondelete={handledelete} /> \</div> ); } 7\ implantando no vercel 7 1 crie uma conta no vercel se você ainda não tem uma conta no vercel, acesse https //vercel com/ e crie uma conta você pode se inscrever com github, gitlab ou bitbucket o vercel facilita a vinculação do seu repositório diretamente para implantações 7 2 envie seu código para o github para implantar seu aplicativo no vercel, você precisa ter seu projeto hospedado em uma plataforma de controle de versão como github (ou gitlab/bitbucket) se seu projeto ainda não está no github, siga estas etapas inicialize o git no diretório do seu projeto bashcopy codegit init adicione seu projeto ao github bashcopy codegit add git commit m "commit inicial" git branch m main git remote add origin https //github com/your github username/ticketing app git git push u origin main 7 3 instale o vercel cli (opcional) se você preferir implantar diretamente da linha de comando, instale o vercel cli globalmente bashcopy codenpm install g vercel alternativamente, você pode implantar através do painel do vercel, que abordaremos a seguir 7 4 conecte seu repositório github ao vercel vá para https //vercel com/ clique novo projeto escolha o repositório git que contém seu projeto next js configure seu projeto a vercel detectará automaticamente que é um projeto next js e aplicará as configurações de build corretas defina o diretório raiz para a pasta do projeto (se necessário) 7 5 defina variáveis de ambiente você precisará configurar suas credenciais back4app e quaisquer outras variáveis de ambiente na vercel nas configurações do projeto , vá para a seção variáveis de ambiente adicione as seguintes variáveis de ambiente 7 6 configure o parse no env local (opcional) se você usar variáveis de ambiente locais durante o desenvolvimento, certifique se de criar um arquivo env local no diretório raiz do seu projeto com as seguintes variáveis bashcopy codenext public parse app id=your app id next public parse js key=your js key next public parse server url=https //parseapi back4app com essas variáveis de ambiente também serão usadas pelo vercel uma vez que estejam configuradas no painel do vercel 7 7 configurar configurações de build (opcional) certifique se de que a versão do node js e o comando de build estão configurados corretamente (o vercel detecta isso automaticamente) para aplicativos next js , as configurações padrão devem ser comando de build npm run build diretório de saída next/ 7 8 implantar o projeto depois de vincular seu repositório do github, o vercel acionará automaticamente um processo de construção e implantação você pode visualizar o status da sua construção no painel do vercel 7 9 verificar logs de implantação se surgirem problemas durante a implantação, você pode inspecionar os logs de implantação para depurá los 7 10 acessar seu app implantado uma vez que a implantação seja bem sucedida, o vercel fornecerá uma url única onde seu app next js está ao vivo você pode visitar a url para acessar seu app de bilhetagem implantado por exemplo https //your app name vercel app/ 8\ garantindo uma implantação suave credenciais do back4app verifique se suas variáveis de ambiente do back4app estão configuradas corretamente tanto no env local (para desenvolvimento local) quanto no painel do vercel (para produção) cors (compartilhamento de recursos de origem cruzada) certifique se de que o back4app permite sua url do vercel em suas configurações de cors, que você pode configurar no painel do back4app em segurança teste sua api antes de implantar, teste suas interações com a api do back4app localmente para garantir que tudo funcione sem problemas 9\ conclusão com esses passos, seu app de bilhetagem next js agora deve estar implantado no vercel , usando back4app para o backend isso completa o ciclo completo de desenvolvimento, desde a configuração do back4app, criação do frontend em next js, até a implantação do app ao vivo no vercel se você quiser fazer atualizações, basta enviar as alterações para o seu repositório do github, e o vercel acionará automaticamente uma nova implantação