Come costruire una app CRUD di base con Ractive.js: Una guida passo passo

panoramica in questa guida, imparerai come costruire un'applicazione crud (crea, leggi, aggiorna, elimina) completamente funzionale utilizzando ractive js questo tutorial copre l'intero flusso di lavoro dalla configurazione del tuo progetto back4app alla progettazione dello schema del database, e infine all'integrazione di un'interfaccia ractive js con il tuo backend il progetto, soprannominato basic crud app ractive , servirà come una soluzione robusta per la gestione dei dati per la tua applicazione web inizierai inizializzando un progetto back4app, configurando collezioni e campi manualmente o con l'aiuto dell'agente ai di back4app successivamente, utilizzerai l'intuitiva app admin di back4app per una gestione dei dati semplice, seguita dall'integrazione della tua interfaccia ractive js con back4app tramite chiamate api rest questa guida spiega anche come proteggere il tuo backend utilizzando metodi avanzati di controllo degli accessi alla fine, avrai un'app crud di livello produzione che non solo esegue operazioni essenziali, ma supporta anche l'autenticazione degli utenti e la gestione sicura dei dati punti essenziali masterizzare la creazione di applicazioni crud che gestiscono abilmente i dati con un backend affidabile comprendere come progettare uno schema dati estensibile e collegarlo a un frontend ractive js utilizzare un'interfaccia di gestione drag and drop (back4app admin app) per azioni crud senza sforzo imparare strategie di distribuzione, inclusa la containerizzazione docker per lanci rapidi di app web requisiti prima di iniziare, assicurati di avere un account back4app attivo con un nuovo progetto creato fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app per indicazioni un setup di sviluppo ractive js configura il tuo progetto utilizzando un boilerplate o la tua configurazione preferita, assicurandoti di avere node js (v14 o successivo) installato conoscenze di base di javascript, ractive js e rest api rivedi la documentazione di ractive js https //ractive js org/ secondo necessità passo 1 – inizializzazione del progetto avviare un nuovo progetto back4app accedi al tuo account back4app seleziona l'opzione “nuova app” nella tua dashboard nomina il tuo progetto basic crud app ractive e segui le istruzioni sullo schermo per crearlo crea nuovo progetto dopo la configurazione, il tuo progetto sarà visibile sulla dashboard, pronto per ulteriori configurazioni del backend passo 2 – progettazione del tuo schema di database creazione del tuo modello dati per questa applicazione crud, definirai diverse collezioni per gestire i tuoi dati di seguito sono riportati esempi delle collezioni con campi e tipi di dati suggeriti, assicurando che il backend sia ottimizzato per le funzionalità crud 1\ collezione articoli questa collezione contiene dettagli per ogni articolo campo tipo scopo id objectid identificatore primario generato automaticamente titolo stringa titolo dell'oggetto descrizione stringa breve riassunto dell'elemento creato il data timestamp di creazione del record aggiornato a data ultimo aggiornamento timestamp 2\ raccolta utenti questa collezione gestisce i dati degli utenti e l'autenticazione campo tipo scopo id objectid identificatore primario generato automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico dell'utente hash password stringa password hashata per un'autenticazione sicura creato il data timestamp per la creazione dell'account aggiornato a data timestamp per l'ultimo aggiornamento dell'account puoi stabilire manualmente queste collezioni tramite il dashboard di back4app creando nuove classi e aggiungendo le colonne richieste crea nuova classe definisci i campi selezionando il tipo di dato appropriato, nominando la colonna e impostando valori predefiniti o richiesti crea colonna utilizzare l'agente ai di back4app per l'automazione dello schema l'agente ai di back4app può generare automaticamente il tuo schema in base al tuo prompt questo strumento efficiente semplifica la gestione del progetto stabilendo rapidamente le tue collezioni e i tuoi campi come operare l'agente ai accedi all'agente ai dalla dashboard del tuo progetto inserisci un prompt dettagliato che descriva le collezioni e i campi desiderati rivedi e applica lo schema generato automaticamente al tuo progetto esempio di prompt create these collections for 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 approccio garantisce che il tuo schema sia coerente e adattato alle esigenze della tua app passo 3 – attivazione dell'app admin e gestione delle operazioni crud informazioni sull'interfaccia admin l'app admin di back4app offre una soluzione senza codice per gestire i tuoi dati di backend la sua interfaccia drag and drop consente operazioni crud senza sforzo come aggiungere, modificare o eliminare record come abilitare l'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca “abilita app admin ” configura il tuo primo utente admin, che configura anche i ruoli (come b4aadminuser ) e le collezioni di sistema abilita app admin una volta attivata, accedi all'app admin per gestire le tue collezioni dashboard app admin gestire i dati tramite l'app admin aggiungere voci usa l'opzione “aggiungi record” in una collezione (come articoli) per inserire nuovi dati visualizzare/modificare record seleziona qualsiasi record per ispezionare i dettagli o aggiornare i campi rimuovere voci usa la funzione di eliminazione per eliminare record obsoleti questa interfaccia user friendly semplifica tutte le funzioni crud passo 4 – collegare ractive js con back4app ora che il tuo backend è pronto, è tempo di collegare il tuo frontend ractive js a back4app utilizzare le chiamate api rest con ractive js poiché ractive js non ha un sdk parse dedicato, utilizzerai chiamate api rest per eseguire operazioni crud esempio recupero degli elementi crea un componente ractive che recupera e visualizza i dati dalla tua collezione di elementi back4app items html items list {{#each items}} {{title}} {{description}} edit delete {{/each}} add new item add items js import ractive from "ractive"; const api url = "https //parseapi back4app com/classes/items"; const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; const ractive = new ractive({ target "#items container", template "#items template", data { items \[], newtitle "", newdescription "" } }); // function to load items async function loaditems() { try { const response = await fetch(api url, { headers headers }); const result = await response json(); ractive set("items", result results map(item => ({ id item objectid, title item title, description item description }))); } catch (error) { console error("error fetching items ", error); } } ractive on("additem", async function () { const title = ractive get("newtitle"); const description = ractive get("newdescription"); try { await fetch(api url, { method "post", headers headers, body json stringify({ title, description }) }); ractive set({ newtitle "", newdescription "" }); loaditems(); } catch (error) { console error("error adding item ", error); } }); // additional functions for editing and deleting would follow a similar rest approach loaditems(); puoi incorporare queste interazioni api nei tuoi componenti ractive js per gestire tutte le operazioni crud passo 5 – rafforzare la sicurezza del backend implementazione dei controlli di accesso migliora la sicurezza impostando le liste di controllo degli accessi (acl) sui tuoi oggetti ad esempio, per rendere un elemento privato async function createprivateitem(itemdata, owneruserid) { const data = { title itemdata title, description itemdata description, acl { \[owneruserid] { read true, write true }, " " { read false, write false } } }; try { const response = await fetch(api url, { method "post", headers headers, body json stringify(data) }); const result = await response json(); console log("private item created ", result); } catch (error) { console error("error creating private item ", error); } } configurazione dei permessi a livello di classe all'interno del dashboard di back4app, regola le autorizzazioni a livello di classe (clp) per ogni collezione per definire le politiche di accesso predefinite questo passaggio garantisce che solo gli utenti autorizzati possano accedere ai dati sensibili passo 6 – gestione dell'autenticazione degli utenti configurazione degli account utente back4app utilizza la classe user di parse per gestire l'autenticazione implementa la registrazione e il login degli utenti tramite chiamate api rest nella tua applicazione ractive js esempio registrazione utente async function signupuser(username, email, password) { const response = await fetch("https //parseapi back4app com/users", { method "post", headers headers, body json stringify({ username, email, password }) }); const result = await response json(); if (result objectid) { alert("user registered successfully!"); } else { alert("error during sign up " + result error); } } implementa routine simili per il login e la gestione delle sessioni funzionalità aggiuntive come il recupero della password e la verifica dell'email possono essere configurate tramite il dashboard di back4app passo 7 – distribuzione del tuo frontend ractive js la funzionalità di distribuzione web di back4app ti consente di ospitare la tua applicazione ractive js collegandola al tuo repository github 7 1 creazione della tua versione di produzione apri la cartella del tuo progetto in un terminale esegui il processo di build (questo potrebbe essere un comando personalizzato in base alla tua configurazione, ad esempio, utilizzando rollup o webpack) assicurati che la tua cartella di produzione (comunemente chiamata dist o build ) contenga i tuoi file statici 7 2 organizzare e impegnare il tuo codice il tuo repository di progetto dovrebbe avere una struttura chiara, ad esempio basic crud app ractive/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── main js \| ├── ractiveconfig js \| └── components/ \| ├── items html \| └── auth html \| package json \| readme md file di esempio ractiveconfig js // ractiveconfig js // this file can include global configuration for your ractive app export const api url = "https //parseapi back4app com"; export const headers = { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json" }; impegnare il tuo codice inizializza un repository git git init aggiungi i tuoi file git add impegnare le modifiche git commit m "impegno iniziale per il frontend di ractive js" crea un repository github (ad esempio, basic crud app ractive ) e invia il tuo codice git remote add origin https //github com/your username/basic crud app ractive git git push u origin main 7 3 collegare il tuo repository al deployment web di back4app accedi al tuo dashboard di back4app, seleziona il tuo progetto ( basic crud app ractive ) e scegli l'opzione web deployment collega il tuo account github come richiesto seleziona il repository e il branch (tipicamente main ) che contiene il tuo codice ractive js 7 4 configurazione dei parametri di deployment configura i seguenti comando di build specifica il tuo comando di build (ad esempio, npm run build ) directory di output impostala sulla tua cartella di produzione (ad es , build o dist ) variabili d'ambiente includi eventuali chiavi api o variabili di configurazione necessarie 7 5 containerizzazione con docker (opzionale) se desideri effettuare il deployment tramite docker, includi un dockerfile nel tuo progetto \# base build stage using node js from node 16 alpine as build \# set the 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 \# production stage using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 lancio della tua applicazione clicca sul pulsante di distribuzione in back4app monitora il processo di distribuzione mentre back4app estrae e costruisce il tuo repository una volta completato, back4app fornirà un url per la tua app ractive js ospitata 7 7 verifica della distribuzione apri l'url fornito nel tuo browser testa tutti i percorsi, assicurandoti che ogni risorsa (css, js, immagini) venga caricata correttamente se si verificano problemi, consulta i log di distribuzione e controlla le impostazioni di build passo 8 – conclusione e direzioni future ottimo lavoro! hai costruito con successo un'applicazione crud completa utilizzando ractive js e back4app hai impostato un progetto chiamato basic crud app ractive , definito collezioni precise per articoli e utenti, e utilizzato l'intuitiva admin app per la gestione del backend inoltre, hai integrato il tuo frontend ractive js con il backend e rafforzato la sicurezza dei tuoi dati prossimi passi migliora la tua interfaccia utente aggiungi funzionalità come viste dettagliate, funzioni di ricerca o aggiornamenti in tempo reale espandi il tuo backend integra logiche backend avanzate come funzioni cloud o servizi api di terze parti approfondisci il tuo apprendimento esplora la documentazione di back4app https //www back4app com/docs per configurazioni e ottimizzazioni più avanzate con questo tutorial, ora hai le competenze per creare un backend crud scalabile per la tua applicazione ractive js utilizzando back4app buon coding!