Come creare un'app CRUD con Astro?

panoramica in questa guida, imparerai come creare un'applicazione web crud (crea, leggi, aggiorna ed elimina) utilizzando astro questo tutorial ti guiderà nella configurazione di un progetto back4app—il nostro robusto backend—e nella progettazione di una struttura dati che supporti operazioni fondamentali costruiremo quindi un frontend astro che comunica con back4app tramite api rest/graphql, garantendo una gestione dei dati sicura ed efficiente alla fine di questa guida, avrai un'applicazione web pronta per la produzione completa di autenticazione utente e gestione sicura dei dati cosa imparerai come strutturare un'applicazione crud con astro e back4app progettare un backend scalabile con collezioni personalizzate utilizzare un'interfaccia di amministrazione drag and drop per una gestione dei dati senza sforzo integrare il tuo frontend astro con back4app utilizzando rest o graphql distribuire il tuo progetto astro e containerizzarlo con docker se necessario requisiti prima di iniziare, ti preghiamo di confermare di avere un account back4app con un nuovo progetto pronto controlla iniziare con back4app https //www back4app com/docs/get started/new parse app per indicazioni un ambiente di sviluppo astro configurato usa la documentazione ufficiale di astro https //docs astro build per iniziare assicurati che node js (versione 14+) sia installato una conoscenza di base di javascript, astro e rest api visita la documentazione di astro https //docs astro build se hai bisogno di un ripasso passo 1 – inizializzare il tuo progetto avviare un nuovo progetto back4app accedi al tuo account back4app clicca su “nuova app” dalla tua dashboard nomina il tuo progetto basic crud app astro e segui le istruzioni per completare la configurazione crea nuovo progetto dopo la creazione, il tuo progetto apparirà sulla tua dashboard di back4app—la tua base per la configurazione del backend passo 2 – creazione del tuo schema di database strutturazione del tuo modello di dati per la nostra applicazione crud, definirai diverse collezioni di seguito sono riportate collezioni di esempio con campi e tipi per aiutarti a configurare efficacemente il tuo schema di database questa struttura supporta operazioni crud efficienti 1\ raccolta di articoli campo tipo scopo id objectid chiave primaria generata automaticamente titolo stringa nome o titolo dell'elemento descrizione stringa una breve panoramica dell'oggetto creato il data timestamp di creazione aggiornato a data timestamp per l'ultima modifica 2\ raccolta utenti campo tipo scopo id objectid chiave primaria generata automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email dell'utente hash password stringa password crittografata per l'autenticazione creato il data quando è stato creato l'account aggiornato a data ultimo aggiornamento per l'account puoi configurare manualmente queste collezioni nel tuo dashboard di back4app creando nuove classi e aggiungendo colonne appropriate crea nuova classe per aggiungere un campo, seleziona un tipo di dato, fornisci un nome per il campo, definisci un valore predefinito se necessario e indica se il campo è obbligatorio crea colonna sfruttare l'agente ai di back4app per la configurazione dello schema l'agente ai integrato in back4app può generare automaticamente il tuo schema descrivi le collezioni e i campi desiderati nell'interfaccia dell'agente ai, rivedi le sue raccomandazioni e applicale al tuo progetto esempio di prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto created) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) questo strumento accelera la configurazione garantendo che il tuo schema soddisfi i requisiti dell'applicazione passo 3 – attivazione dell'interfaccia di amministrazione e azioni crud esplorare l'interfaccia di amministrazione l'app admin di back4app è uno strumento senza codice che fornisce un'interfaccia visiva per gestire i tuoi dati di backend il suo design drag and drop ti consente di eseguire facilmente operazioni crud attivazione dell'interfaccia di amministrazione apri il menu “altro” nel tuo dashboard di back4app seleziona “admin app” e clicca su “abilita admin app ” configura le tue credenziali di amministratore creando l'utente amministratore iniziale questo configurerà anche i ruoli predefiniti (ad es , b4aadminuser ) e le collezioni di sistema abilita l'app admin dopo l'attivazione, accedi all'app admin per gestire le tue collezioni dashboard dell'app admin gestire i dati con l'interfaccia admin all'interno dell'app admin puoi aggiungere record clicca su “aggiungi record” in una collezione (come articoli) per creare nuove voci visualizzare/modificare record clicca su un record per ispezionare o modificare i suoi campi rimuovere record elimina senza sforzo le voci obsolete questo strumento semplifica le operazioni crud con un'interfaccia intuitiva passo 4 – collegare astro con back4app con il tuo backend configurato, è tempo di integrare il tuo frontend astro utilizzare le api rest/graphql poiché astro è un generatore di siti statici ottimizzato per le prestazioni, interagirà con back4app utilizzando le api rest o graphql questo approccio evita la necessità del parse sdk esempio recupero di elementi tramite rest di seguito è riportato un esempio di una chiamata api rest all'interno di un componente astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); setitems(data results); } catch (error) { console error('failed to fetch items ', error); } }; fetchitems(); }, \[]); \ \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} – {item description} \</li> ))} \</ul> \</div> integra chiamate api simili per creare, aggiornare e eliminare record all'interno dei tuoi componenti astro passo 5 – salvaguardare il tuo backend implementazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati impostando acl sugli oggetti ad esempio, per creare un elemento che solo il proprietario può modificare async function createprivateitem(data, owner) { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title data title, description data description, acl { \[owner id] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } configurazione delle autorizzazioni a livello di classe (clp) all'interno del dashboard di back4app, regola i clp per ogni collezione per definire chi può accedere e modificare i tuoi dati passo 6 – aggiunta dell'autenticazione utente impostazione della registrazione e del login degli utenti back4app utilizza la classe user di parse per l'autenticazione nel tuo progetto astro, crea componenti per la registrazione e il login degli utenti sfruttando le chiamate api rest esempio registrazione dell'utente // src/components/signup astro \ import { usestate } from 'react'; const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (event) => { event preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username, password, email }) }); const result = await response json(); alert('sign up successful!'); } catch (error) { alert('error during sign up ' + error message); } }; \ \<form on\ submit={handlesignup}> \<input type="text" placeholder="username" value={username} oninput={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} oninput={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} oninput={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> puoi costruire componenti simili per il login degli utenti e la gestione delle sessioni passo 7 – distribuzione del tuo frontend astro la funzione di distribuzione web di back4app consente di ospitare il tuo progetto astro senza problemi collegando il tuo repository github 7 1 creare la tua versione di produzione apri un terminale nella directory del tuo progetto esegui il comando di build npm run build questo genera una cartella ottimizzata dist con le tue risorse statiche controlla la build assicurati che la dist cartella contenga un index html insieme ad altre directory di risorse 7 2 organizzare il tuo repository di progetto il tuo repository dovrebbe includere il codice sorgente completo di astro una struttura di esempio potrebbe essere basic crud app astro/ ├── node modules/ ├── public/ │ └── favicon ico ├── src/ │ ├── components/ │ │ ├── itemslist astro │ │ └── signup astro │ └── pages/ │ └── index astro ├── package json └── readme md esempio di file src/components/itemslist astro // src/components/itemslist astro \ import { usestate, useeffect } from 'react'; const \[items, setitems] = usestate(\[]); useeffect(() => { const getitems = async () => { try { const res = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const json = await res json(); setitems(json results); } catch (err) { console error('error retrieving items ', err); } }; getitems(); }, \[]); \ \<div> \<h2>item list\</h2> \<ul> {items map(item => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> 7 3 impegnare e inviare il tuo codice a github inizializza un repository git (se non fatto) git init aggiungi tutti i file git add esegui il commit delle tue modifiche git commit m "commit iniziale per il frontend di astro" crea un repository su github (ad esempio, basic crud app astro ) e fai push git remote add origin https //github com/your username/basic crud app astro git git push u origin main 7 4 collegare github con il deployment web di back4app accesso alla distribuzione web accedi al tuo dashboard di back4app, naviga al tuo progetto ( basic crud app astro ) e seleziona l'opzione distribuzione web collega il tuo account github segui le istruzioni per autorizzare back4app ad accedere al tuo repository scegli il tuo repository e branch seleziona il repository (ad es , basic crud app astro ) e il branch (tipicamente main ) 7 5 configurazione delle impostazioni di distribuzione comando di build specifica il comando di build (ad es , npm run build ) se il tuo repository non ha un output pre costruito directory di output impostala su dist affinché back4app sappia dove trovare i tuoi file statici variabili di ambiente aggiungi eventuali variabili richieste, come le chiavi api 7 6 dockerizzazione della tua applicazione astro (opzionale) se preferisci distribuzioni containerizzate, includi un dockerfile come \# use an official node image for building from node 16 alpine as builder \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy source files and build the project copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] integra le impostazioni di docker nella tua configurazione di distribuzione web se desiderato 7 7 avviare la tua applicazione premi il pulsante distribuisci nella sezione di distribuzione web monitora il processo di costruzione back4app recupererà il tuo codice, lo costruirà e distribuirà la tua applicazione ricevi il tuo url una volta distribuito, back4app fornirà un url dove il tuo sito è attivo passo 8 – conclusione e miglioramenti futuri ottimo lavoro! hai ora creato un'applicazione crud completa con astro e back4app il tuo progetto include un backend con collezioni dettagliate per articoli e utenti, e un frontend che esegue tutte le operazioni crud tramite api rest/graphql prossimi passi migliora il frontend aggiungi funzionalità come viste dettagliate, capacità di ricerca e notifiche in tempo reale espandi la funzionalità del backend considera di integrare funzioni cloud o endpoint api aggiuntivi per logiche più complesse approfondisci esplora ulteriori risorse nella documentazione di back4app https //www back4app com/docs e nella documentazione di astro https //docs astro build per argomenti avanzati seguendo questo tutorial, ora possiedi le conoscenze per costruire un'applicazione crud robusta e scalabile utilizzando astro e back4app buon coding e buona esplorazione di nuove possibilità!