How to Build a Blitz.js Frontend and Connect It to a Backend?

in questa guida, costruirai un'applicazione to do list utilizzando blitz js e la collegherai a un backend gestito su back4app questo tutorial passo passo è progettato per aiutarti a implementare operazioni crud essenziali e creare un'interfaccia utente dinamica utilizzando blitz js costruire un'applicazione full stack può essere complesso se devi gestire sia i sistemi frontend che backend sfruttando back4app, puoi semplificare la gestione del backend attraverso un baas scalabile , permettendoti di concentrarti sulla costruzione di un'interfaccia coinvolgente con blitz js back4app fornisce una suite di servizi backend, inclusi un database nosql pronto all'uso, autenticazione, funzioni cloud e endpoint api queste funzionalità ti consentono di sviluppare e distribuire rapidamente la tua applicazione senza il peso della manutenzione del server punti chiave entro la fine di questo tutorial, sarai in grado di impostare un progetto moderno blitz js utilizzando strumenti standard del settore integrare un backend back4app con la tua applicazione blitz js utilizzando il parse sdk implementare operazioni crud per gestire il tuo to do list containerizzare e distribuire la tua app blitz js utilizzando il web deployment di back4app prerequisiti prima di iniziare, assicurati di avere quanto segue node js e npm installati sul tuo computer verifica l'installazione con node v e npm v nel tuo terminale conoscenze di base di blitz js , inclusi routing, query e mutazioni la familiarità con react è utile poiché blitz js si basa su di esso un account back4app per configurare e gestire i tuoi servizi backend registrati su back4app https //www back4app com/ se non lo hai già fatto con questi requisiti soddisfatti, sei pronto per inizializzare il tuo progetto blitz js e integrarlo con un robusto backend impostazione del progetto inizia configurando la tua applicazione blitz js blitz js offre un'esperienza di sviluppo semplificata combinando la potenza di next js con un framework full stack esegui il seguente comando per creare un nuovo progetto blitz js sostituisci todo app con il nome del tuo progetto scelto npx blitz new todo app naviga nella directory del tuo progetto cd todo app esegui il tuo server di sviluppo per verificare che tutto sia impostato correttamente npm run dev visita l'url visualizzato nel tuo terminale per confermare che la tua app blitz js è in esecuzione impostare il backend todo su back4app back4app offre un backend parse gestito che semplifica la gestione dei dati per la tua applicazione in questa sezione, creerai un modello di dati per memorizzare le attività della tua lista to do creare la tua applicazione backend accedi al tuo dashboard di back4app https //www back4app com/ e clicca su "crea una nuova app " fornisci un nome per la tua applicazione (ad esempio, todoblitzapp ) e seleziona nodejs/parse come tipo di backend nella sezione "database" > "browser" clicca su "crea una classe" e seleziona "personalizzata " nomina la classe task e imposta le autorizzazioni di livello classe per consentire lettura e scrittura pubbliche (puoi modificare queste impostazioni in seguito) aggiungi i seguenti campi alla classe task titolo (stringa) – il titolo del compito descrizione (stringa) – dettagli sul compito completato (booleano) – se il compito è completato datascadenza (data) – la scadenza per il compito clicca su "salva" per creare lo schema integrazione di back4app con blitz js per connettere la tua app blitz js a back4app, installa il parse javascript sdk npm install parse successivamente, configura il parse sdk nel tuo progetto blitz js crea un nuovo file di configurazione (ad esempio, src/parseclient js ) e inizializza parse come mostrato di seguito sostituisci i segnaposto con le tue credenziali back4app da impostazioni app > sicurezza e chiavi // 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; ora puoi importare questa configurazione nelle tue query e mutazioni di blitz js per interagire con il tuo backend costruire il frontend con blitz js con il backend impostato, è tempo di costruire l'interfaccia della to do list in blitz js utilizzerai le query e le mutazioni integrate di blitz js per eseguire operazioni crud strutturare le tue pagine e chiamate api in blitz js, le pagine si trovano sotto la src/pages directory apri src/pages/index tsx e aggiungi il seguente codice per impostare la pagina, interrogare i compiti da back4app e definire le mutazioni per aggiungere, attivare/disattivare e eliminare i compiti // 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 questa pagina sfrutta i hook di query di tanstack per recuperare i compiti e gestire le azioni degli utenti, garantendo un'integrazione fluida con il tuo backend di back4app per garantire che il usequery funzioni, è necessario avvolgere l'intera applicazione in un queryclientprovider lo fai nel file src/pages/ app tsx sostituisci il codice nel file src/pages/ app tsx con il blocco di codice qui sotto // 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) aggiungere stili globali per definire lo stile di base della tua app, aggiungi il blocco di codice al file css in 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; } } importa i tuoi stili globali aggiungendo la seguente riga in src/pages/ app tsx (o nel tuo file componente app personalizzato) / src/pages/ app tsx / import " /styles/globals css"; la tua app blitz js ora visualizza un'interfaccia to do list completamente funzionale integrata con back4app containerizzazione e distribuzione della tua app blitz js su back4app la distribuzione web di back4app fornisce un ambiente containerizzato che semplifica il processo di distribuzione imballerai la tua app blitz js in un container docker e la distribuirai senza problemi preparare la tua app blitz js per la produzione per prima cosa, costruisci la tua applicazione blitz js per la produzione blitz build creazione di un dockerfile crea un dockerfile nella directory principale del tuo progetto con il seguente contenuto 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"] questo dockerfile costruisce il tuo progetto blitz js e prepara un'immagine di produzione utilizzando un runtime node js leggero dopo aver creato il tuo dockerfile, crea un dockerignore file e copia e incolla il tuo gitignore file costruzione e test del tuo contenitore docker costruisci l'immagine docker localmente docker build t todo blitz frontend esegui il contenitore per testarlo docker run p 3000 3000 todo blitz frontend visita http //localhost 3000 nel tuo browser per verificare che la tua app blitz js funzioni correttamente distribuzione della tua app tramite back4app web deployment carica il tuo progetto su 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 poi, accedi a back4app web deployment https //www back4app com/containers e segui questi passaggi clicca "crea nuova app" e inserisci i dettagli del tuo progetto scegli repository github e autorizza back4app seleziona il tuo todo blitz repository scegli distribuzione dockerfile e verifica le impostazioni di build clicca "distribuisci" per avviare il processo di distribuzione una volta distribuita, utilizza il dashboard di back4app per monitorare i log, gestire le build e configurare domini personalizzati se necessario testare e fare debug della tua applicazione dopo la distribuzione, assicurati che la tua app funzioni come previsto controllo della connettività api usa gli strumenti per sviluppatori del tuo browser per verificare che le richieste api per aggiungere, attivare e eliminare attività siano riuscite verifica della persistenza dei dati aggiungi attività tramite l'interfaccia utente e aggiorna la pagina per confermare che siano salvate nel database di back4app test delle operazioni crud verifica che le attività possano essere attivate e eliminate, e controlla i log della console per eventuali errori gestione dei casi limite prova a inviare input non validi per testare la robustezza delle tue convalide migliori pratiche e suggerimenti per l'ottimizzazione considera le seguenti raccomandazioni per un'applicazione sicura ed efficiente ottimizza le richieste api usa l'elaborazione in batch e limita i campi interrogati per ridurre il sovraccarico di rete proteggi le variabili d'ambiente memorizza le credenziali sensibili (id applicazione e chiave javascript) in un file env sicuro implementa il controllo degli accessi usa acl dinamici per garantire che solo gli utenti autorizzati possano modificare i dati sfrutta il cloud code scarica la logica complessa nel cloud code di back4app per migliorare le prestazioni e la sicurezza conclusione hai ora costruito un'applicazione to do list full stack utilizzando blitz js integrato con un backend di back4app questo tutorial ti ha guidato attraverso l'inizializzazione del progetto, l'integrazione del backend e il deployment containerizzato man mano che procedi, considera di espandere la tua app con funzionalità come la gestione avanzata degli utenti, aggiornamenti in tempo reale e integrazioni di terze parti per ulteriori approfondimenti, esplora la documentazione di back4app https //www back4app com/docs e le risorse di blitz js