Building a Basic CRUD Application with Cycle.js: A Comprehensive Guide

panoramica questa guida ti guiderà nella costruzione di un'applicazione crud (crea, leggi, aggiorna e cancella) completa utilizzando cycle js in questo tutorial, configurerai un progetto back4app intitolato basic crud app cyclejs che servirà come un robusto backend per la tua applicazione imparerai a progettare un modello di dati scalabile, gestire i tuoi dati tramite l'intuitiva app di amministrazione di back4app e integrare il tuo frontend cycle js con back4app utilizzando chiamate rest/graphql alla fine, avrai un'app web pronta per la produzione in grado di eseguire operazioni crud insieme all'autenticazione degli utenti e alla gestione sicura dei dati principali intuizioni costruisci un sistema crud funzionale con un backend affidabile acquisisci esperienza pratica nella progettazione di un modello di dati scalabile utilizza uno strumento di amministrazione drag and drop per una gestione dei dati senza soluzione di continuità integra un frontend cycle js con back4app tramite rest/graphql impara strategie di distribuzione, inclusa la containerizzazione docker requisiti prima di iniziare, assicurati di avere un account back4app con un progetto attivo se hai bisogno di assistenza, consulta iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo cycle js usa strumenti come create cycle app https //github com/cyclejs community/create cycle app e assicurati che node js (versione 14 o successiva) sia installato familiarità con javascript, cycle js e rest api per un ripasso, consulta la documentazione di cycle js https //cycle js org/ passo 1 – inizializzazione del progetto creazione di un nuovo progetto back4app accedi al tuo account back4app premi il pulsante “nuova app” sulla tua dashboard assegna il nome del progetto basic crud app cyclejs e segui le istruzioni di configurazione crea nuovo progetto dopo la creazione, il tuo progetto sarà visibile nella dashboard, pronto per la configurazione e la gestione del backend passo 2 – definire il tuo schema di database strutturare il tuo modello di dati per questa applicazione crud, creerai diverse collezioni per gestire i tuoi dati di seguito sono riportate collezioni di esempio con campi e tipi di dati essenziali 1\ collezione articoli questa collezione memorizzerà i dettagli di ciascun elemento campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa il titolo dell'oggetto descrizione stringa un breve riassunto dell'elemento creato il data il timestamp per quando l'elemento è stato aggiunto aggiornato a data il timestamp per l'ultimo aggiornamento 2\ raccolta utenti questa raccolta gestisce i dettagli degli utenti e l'autenticazione campo tipo di dato descrizione id objectid identificatore unico generato automaticamente nome utente stringa l'identificatore unico dell'utente email stringa l'indirizzo email dell'utente hash password stringa password crittografata per un'autenticazione sicura creato il data timestamp di creazione dell'account aggiornato a data timestamp per l'aggiornamento più recente puoi definire queste collezioni manualmente tramite il pannello di controllo di back4app creando nuove classi e configurando i campi corrispondenti crea nuova classe per aggiungere campi, scegli il tipo di dati, fornisci un nome per il campo, imposta facoltativamente un valore predefinito e contrassegna il campo come obbligatorio se necessario crea colonna automatizzare la creazione dello schema con l'agente ai di back4app l'agente ai di back4app semplifica la creazione dello schema generando automaticamente il tuo modello di dati basato su un prompt fornito questo garantisce un design del database coerente ed efficiente passaggi per utilizzare l'agente ai accedi all'agente ai accedi al tuo dashboard di back4app e seleziona l'agente ai dal menu o dalle impostazioni del progetto dettaglia i tuoi requisiti di dati inserisci un prompt completo che elenchi le collezioni necessarie e i loro campi esamina e applica esamina lo schema generato automaticamente 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) questa funzionalità non solo fa risparmiare tempo, ma garantisce anche uno schema ben strutturato e ottimizzato passo 3 – attivare l'app admin e gestire le operazioni crud esplorare l'app admin l'app admin di back4app fornisce un'interfaccia senza codice, drag and drop per una gestione dei dati di backend senza sforzo semplifica le operazioni crud per le tue collezioni abilitare l'app admin apri il menu “altro” nel tuo dashboard di back4app seleziona “app admin” e poi clicca su “abilita app admin ” configura le tue credenziali admin creando il tuo primo utente admin questa azione inizializzerà anche i ruoli di sistema (ad es , b4aadminuser ) abilita app admin dopo l'attivazione, accedi all'app admin per iniziare a gestire le tue collezioni dashboard app admin eseguire operazioni crud tramite l'app admin all'interno dell'app admin, puoi aggiungere record clicca sul pulsante “aggiungi record” in qualsiasi collezione (ad es , articoli) per inserire nuove voci visualizzare/modificare record seleziona un record esistente per ispezionare i dettagli o modificare i campi rimuovere record utilizza l'opzione di eliminazione per scartare voci indesiderate questa interfaccia user friendly migliora notevolmente la gestione e l'amministrazione dei tuoi dati passo 4 – integrazione di cycle js con back4app ora che il tuo backend è operativo tramite back4app, è tempo di integrare il tuo frontend cycle js opzione utilizzare le api rest/graphql ci concentreremo sulle chiamate api rest per interagire con il tuo backend di seguito è riportato un esempio di componente cycle js che recupera e visualizza gli elementi dal tuo database back4app utilizzando il driver http di cycle esempio recupero e visualizzazione di elementi con cycle js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); questo codice di esempio dimostra come utilizzare cycle js per eseguire una richiesta http get per recuperare elementi e renderizzarli dinamicamente passo 5 – sicurezza del tuo backend applicazione delle liste di controllo degli accessi (acl) proteggi i tuoi oggetti definendo le acl ad esempio, quando crei un elemento privato async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem acl = { \[owneruser id] { read true, write true }, ' ' { read false, write false } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } configurazione delle autorizzazioni a livello di classe (clp) all'interno del dashboard di back4app, regola le clp per ogni collezione per garantire che solo gli utenti autenticati possano accedere a informazioni sensibili passo 6 – implementazione dell'autenticazione utente impostazione della registrazione e del login dell'account back4app utilizza una classe user per l'autenticazione utilizza chiamate api rest per gestire le registrazioni e i login degli utenti all'interno della tua applicazione cycle js di seguito è riportato un esempio di gestione della registrazione degli utenti async function signupuser(userdata) { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } puoi replicare schemi simili per il login degli utenti e la gestione delle sessioni passo 7 – distribuire il tuo frontend cycle js con il web deployment la funzione di web deployment di back4app ti consente di ospitare la tua applicazione cycle js senza sforzo tramite integrazione con il tuo repository github 7 1 preparare la tua build di produzione apri la directory del tuo progetto in un terminale esegui il comando di build npm run build questo crea una build directory con file statici ottimizzati conferma la build assicurati che la build cartella contenga un index html e le relative directory di asset 7 2 organizzare e caricare il tuo codice sorgente il tuo repository git dovrebbe includere l'intera applicazione cycle js sorgente un esempio di struttura dei file basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md esempio di file src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); impegnarsi su github inizializza un repository git (se non è già stato fatto) git init metti in fase i tuoi file git add impegnati nel tuo lavoro git commit m "impegno iniziale per il frontend di cycle js" crea un repository github (ad esempio, basic crud app cyclejs frontend ) pusha il tuo repository git remote add origin https //github com/your username/basic crud app cyclejs frontend git git push u origin main 7 3 collegare il tuo repository con il web deployment accedi al web deployment accedi a back4app, vai al tuo progetto ( basic crud app cyclejs ) e seleziona la funzione web deployment collegati a github segui le istruzioni per collegare il tuo account github in modo che back4app possa accedere al tuo repository seleziona il repository e il branch scegli il tuo repository (ad esempio, basic crud app cyclejs frontend ) e il branch (tipicamente main ) 7 4 impostazioni di distribuzione comando di costruzione se il tuo repository non ha una build pre costruita, specifica un comando di costruzione (ad es , npm run build ) directory di output imposta questo su build in modo che back4app sappia dove trovare i file statici variabili di ambiente includi eventuali chiavi api o dettagli di configurazione necessari 7 5 dockerizzazione della tua applicazione cycle js se scegli di distribuire con docker, aggiungi un dockerfile al tuo repository \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application run npm run build \# use nginx to serve the built files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] se scegli di containerizzare la tua app, seleziona l'opzione di distribuzione docker nella tua configurazione di distribuzione web 7 6 lancio della tua applicazione distribuisci la tua app clicca sul distribuisci pulsante dopo aver configurato le tue impostazioni monitora la distribuzione back4app preleverà il tuo codice da github, costruirà l'app (se configurata) e la distribuirà accedi alla tua applicazione una volta completata la distribuzione, back4app fornirà un url per la tua applicazione cycle js live 7 7 testare la tua distribuzione visita l'url distribuito apri l'url fornito nel tuo browser conferma la funzionalità assicurati che tutte le rotte e le risorse si carichino correttamente debugga se necessario usa gli strumenti per sviluppatori del browser e rivedi i log di distribuzione di back4app per risolvere eventuali problemi passo 8 – conclusione e miglioramenti futuri congratulazioni! hai costruito con successo un'applicazione crud utilizzando cycle js e back4app hai impostato un progetto intitolato basic crud app cyclejs , definito il tuo schema di database per articoli e utenti, e gestito i tuoi dati tramite l'intuitiva admin app inoltre, hai integrato il tuo frontend cycle js con il tuo backend utilizzando rest/graphql e protetto i tuoi dati con controlli di accesso appropriati prossimi passi espandi il tuo frontend aggiungi viste più avanzate, filtri o aggiornamenti in tempo reale integra funzionalità backend aggiuntive considera di aggiungere funzioni cloud, api di terze parti o controlli di accesso basati sui ruoli ulteriore apprendimento esplora la documentazione di back4app https //www back4app com/docs per ulteriori approfondimenti sull'ottimizzazione delle prestazioni e integrazioni personalizzate con questa guida, ora possiedi le competenze per costruire un backend crud scalabile per la tua applicazione cycle js utilizzando back4app buon coding!