Come costruire una semplice app CRUD con Riot.js: Una guida passo passo

panoramica in questa guida, imparerai a creare un'applicazione crud (crea, leggi, aggiorna e cancella) utilizzando riot js passeremo attraverso la configurazione di un progetto back4app—chiamato basic crud app riotjs —per servire come backend, e poi integrarlo con un frontend riot js questo tutorial copre tutto, dalla progettazione dello schema del database e gestione dei dati con l'app admin di back4app all'integrazione del tuo frontend utilizzando sia l'sdk (se applicabile) che le chiamate api rest/graphql alla fine, avrai un'applicazione web completamente operativa e pronta per la produzione, con autenticazione utente e gestione sicura dei dati principali vantaggi masterizza le operazioni crud utilizzando un sistema backend scalabile ottieni informazioni sull'integrazione di un frontend riot js con back4app utilizza l'intuitiva app admin di back4app per una gestione dei dati senza sforzo impara strategie di distribuzione, inclusa la containerizzazione con docker requisiti prima di iniziare, assicurati di avere un account back4app con un nuovo progetto fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app per indicazioni un ambiente di sviluppo per riot js puoi utilizzare il riot cli o includere riot tramite un tag script assicurati che node js (v14 o successivo) sia installato conoscenze di base di javascript, riot js e rest api se necessario, consulta la documentazione di riot js https //riot js org/ per ulteriori approfondimenti passo 1 – inizializzazione del progetto creazione di un progetto back4app accedi al tuo account back4app clicca su “nuova app” nella tua dashboard dai un nome al tuo progetto basic crud app riotjs e segui le istruzioni di configurazione crea nuovo progetto il tuo progetto apparirà ora sul tuo dashboard di back4app, fungendo da spina dorsale per i dati della tua applicazione passo 2 – progettazione del tuo schema di database creazione del tuo modello dati per la nostra applicazione crud, definirai più collezioni di seguito sono riportate collezioni e campi di esempio per aiutarti a strutturare il tuo database per operazioni crud efficienti 1\ collezione articoli questa collezione contiene dettagli su ciascun articolo campo tipo descrizione id objectid identificatore unico generato automaticamente titolo stringa titolo dell'oggetto descrizione stringa breve descrizione dell'oggetto creato il data timestamp quando l'elemento è stato aggiunto aggiornato a data timestamp quando l'elemento è stato modificato 2\ raccolta utenti questa collezione contiene dettagli dell'utente e informazioni di autenticazione campo tipo descrizione id objectid identificatore unico generato automaticamente nome utente stringa nome utente unico email stringa indirizzo email unico hash password stringa password crittografata creato il data timestamp di creazione dell'account aggiornato il data ultimo aggiornamento dell'account puoi configurare queste collezioni manualmente nel dashboard di back4app creando nuove classi e definendo colonne crea nuova classe puoi aggiungere campi selezionando un tipo di dato, assegnando un nome, impostando valori predefiniti e contrassegnando se il campo è obbligatorio crea colonna sfruttare l'agente ai di back4app per la creazione dello schema l'agente ai di back4app, accessibile dalla tua dashboard, può generare automaticamente il tuo schema elaborando un prompt dettagliato che descrive le collezioni e i campi richiesti utilizzare l'agente ai apri l'agente ai trovalo nelle impostazioni del tuo progetto o nel menu inserisci il tuo modello di dati incolla un prompt che delinea le tue collezioni e i loro campi rivedi e conferma valida lo schema generato e applicalo 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 generated) \ 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 il processo e garantisce una configurazione dello schema coerente passo 3 – attivazione dell'app admin & azioni crud panoramica dell'app admin l'app admin di back4app offre un'interfaccia senza codice, drag and drop per una gestione del backend senza sforzo, permettendoti di eseguire rapidamente operazioni crud attivazione dell'app admin apri il menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca “abilita app admin ” configura il tuo account admin creando l'utente admin iniziale, che stabilisce anche i ruoli predefiniti abilita app admin una volta abilitato, accedi all'app admin per gestire i tuoi dati di backend dashboard dell'app admin esecuzione di operazioni crud tramite l'app admin all'interno di questa interfaccia, puoi aggiungere record usa il pulsante “aggiungi record” all'interno di una collezione (ad es , articoli) per creare nuove voci modificare record clicca su qualsiasi record per visualizzarne e modificarne i dettagli rimuovere record elimina qualsiasi record che non è più necessario questo strumento semplifica il tuo flusso di lavoro offrendo un'interfaccia semplice per gestire i dati passo 4 – collegare riot js con back4app ora che il tuo backend è configurato, è tempo di collegare il tuo frontend riot js a back4app opzione a utilizzare il parse sdk installa il parse sdk npm install parse inizializza parse nel tuo progetto riot js crea un file (ad esempio, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; usa parse in un tag riot crea un tag riot (ad esempio, items riot ) per recuperare e visualizzare gli elementi items { item get("title") } — { item get("description") } opzione b utilizzo di api rest o graphql se il parse sdk non è adatto, esegui operazioni crud tramite chiamate api ad esempio, per recuperare elementi utilizzando rest // rest api example to get items async function fetchitems() { 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } fetchitems(); integra queste chiamate api all'interno dei tuoi tag riot js come necessario passo 5 – proteggere il tuo backend configurazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati impostando acl sui tuoi oggetti ad esempio, per creare un elemento privato async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } regolazione dei permessi a livello di classe (clp) all'interno del tuo dashboard di back4app, configura i clp per ogni collezione per garantire che solo gli utenti autenticati o autorizzati possano accedere ai dati sensibili passo 6 – autenticazione utente configurazione degli account utente le applicazioni riot js possono gestire la registrazione e il login degli utenti utilizzando la classe parse user integrata di back4app di seguito è riportato un esempio di tag riot per la registrazione dell'utente sign up una strategia simile può essere applicata per la gestione del login e delle sessioni funzionalità aggiuntive come il login sociale, la verifica dell'email o il recupero della password possono essere impostate nel tuo dashboard di back4app passo 7 – distribuzione del tuo frontend riot js la funzione di distribuzione web di back4app ti consente di ospitare la tua app riot js collegando il tuo repository github segui questi passaggi per distribuire la tua build di produzione 7 1 crea i tuoi file di produzione apri la directory del tuo progetto in un terminale esegui il tuo comando di build npm run build questo crea una build cartella con file statici ottimizzati (html, js, css, immagini) conferma la build verifica che la build cartella includa un index html e le directory di asset richieste 7 2 organizza e carica il tuo codice su github il tuo repository dovrebbe contenere il codice sorgente completo del frontend di riot js una struttura tipica potrebbe essere basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md esempio src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; esempio src/app riot riot js crud app esegui il commit e il push del tuo codice inizializza un repo git (se non fatto) git init aggiungi i tuoi file git add esegui il commit delle tue modifiche git commit m "commit iniziale per il frontend di riot js" crea un repository github (ad esempio, basic crud app riotjs frontend ) e fai il push del tuo codice git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 integra il tuo repository github con il deployment web di back4app apri il deployment web accedi al tuo dashboard di back4app, seleziona il tuo progetto ( basic crud app riotjs ) e clicca su deployment web collegati a github segui le istruzioni per collegare il tuo account e repository github scegli il tuo repository e branch seleziona il tuo repository (ad esempio, basic crud app riotjs frontend ) e il branch appropriato (come main ) 7 4 configurazione del deployment comando di build se il tuo repository non ha una cartella build pre costruita, specifica il comando di build (ad es , npm run build ) back4app lo eseguirà directory di output imposta questo su build per indicare dove si trovano i tuoi file statici variabili d'ambiente includi tutte le variabili necessarie (come le chiavi api) nella tua configurazione 7 5 dockerizzare la tua app riot js (opzionale) se preferisci un deployment containerizzato, aggiungi un dockerfile al tuo progetto \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it copy run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] se scegli questa opzione, seleziona l'opzione docker nelle impostazioni di deployment web 7 6 lancia la tua applicazione distribuisci clicca sul distribuisci pulsante dopo aver configurato le tue impostazioni monitora il processo back4app recupererà il tuo codice, eseguirà il comando di build e distribuirà la tua app in un contenitore ottieni il tuo url una volta distribuito, back4app fornisce un url dove è ospitata la tua applicazione riot js 7 7 valida la tua distribuzione visita l'url apri l'url fornito nel tuo browser testa l'app conferma che tutte le rotte e le risorse (css, javascript, immagini) funzionino correttamente risolvi i problemi utilizza gli strumenti per sviluppatori del browser e i log di back4app se si verificano problemi passo 8 – conclusione e direzioni future congratulazioni! hai costruito un'app crud completamente funzionale utilizzando riot js e back4app hai impostato un progetto chiamato basic crud app riotjs , progettato uno schema di database robusto per articoli e utenti, e gestito i tuoi dati con l'app admin hai integrato il tuo frontend riot js e implementato misure di sicurezza come le acl prossimi passi migliora il frontend aggiungi funzionalità come viste dettagliate, capacità di ricerca e aggiornamenti in tempo reale espandi la funzionalità esplora operazioni avanzate sul backend come cloud functions o integra api di terze parti approfondisci il tuo apprendimento visita la documentazione di back4app https //www back4app com/docs e altre risorse per ottimizzare ed espandere la tua applicazione con questi passaggi, ora hai le competenze per costruire applicazioni crud scalabili utilizzando riot js e back4app buon coding!