How to Create a Basic CRUD App with StencilJS? A Comprehensive Tutorial

panoramica in questa guida, imparerai come costruire un'applicazione crud di base (crea, leggi, aggiorna e cancella) utilizzando stenciljs questo tutorial ti guiderà nella creazione di un'app web che esegue operazioni essenziali per gestire i dati in modo efficace inizieremo lanciando un progetto back4app chiamato basic crud app stenciljs , che servirà come il tuo robusto backend successivamente, progetterai un database scalabile definendo collezioni e campi—sia manualmente che con l'assistenza dell'ai agent di back4app questo passaggio garantisce che il tuo database sia progettato per supportare tutte le operazioni crud in modo affidabile poi, utilizzerai l'app admin di back4app, un'interfaccia intuitiva drag and drop, per gestire le tue collezioni senza problemi questo strumento no code semplifica la gestione delle azioni crud infine, collegherai il tuo frontend stenciljs a back4app tramite api rest/graphql sebbene il parse sdk sia disponibile, ci concentreremo sulle integrazioni api che si adattano perfettamente a stenciljs, garantendo che il tuo backend rimanga sicuro attraverso controlli di accesso avanzati alla fine di questo tutorial, avrai un'applicazione web pronta per la produzione che supporta funzioni crud essenziali insieme all'autenticazione degli utenti e a una gestione robusta dei dati informazioni essenziali padroneggia il processo di costruzione di app crud con un sistema backend affidabile comprendi come progettare un backend scalabile e collegarlo a un frontend stenciljs impara a utilizzare uno strumento di amministrazione senza codice (l'app back4app admin) per operazioni sui dati efficienti scopri strategie di distribuzione, inclusa la containerizzazione docker, per lanciare rapidamente la tua applicazione web requisiti prima di iniziare, assicurati di avere un account back4app con un progetto attivo hai bisogno di assistenza? dai un'occhiata a iniziare con back4app https //www back4app com/docs/get started/new parse app un setup di sviluppo stenciljs usa la documentazione ufficiale di stenciljs https //stenciljs com/docs/introduction per configurare il tuo ambiente assicurati che node js (v14 o successivo) sia installato conoscenze di base di javascript, componenti web e api rest ripassa i concetti di stenciljs https //stenciljs com/docs se necessario passo 1 – inizia il tuo progetto avviare un nuovo progetto back4app accedi al tuo account back4app seleziona l'opzione “nuova app” dalla tua dashboard nomina il tuo progetto basic crud app stenciljs e segui le istruzioni sullo schermo per completare la configurazione crea nuovo progetto una volta configurato, il tuo progetto sarà visibile sulla dashboard, fornendo una base solida per la configurazione del tuo backend passo 2 – creazione del tuo schema di database definizione del modello dati per questa applicazione crud, dovrai impostare più collezioni di seguito sono riportate collezioni di esempio insieme ai loro campi e tipi di dati per aiutarti a strutturare il tuo database per operazioni crud efficienti 1\ collezione articoli questa collezione contiene dettagli per ogni articolo campo tipo di dato dettagli id objectid chiave primaria generata automaticamente titolo stringa nome o titolo dell'elemento descrizione stringa breve descrizione dell'oggetto creato il data timestamp quando l'elemento è stato creato aggiornato a data timestamp per l'ultimo aggiornamento 2\ raccolta utenti questa collezione gestisce i profili utente e l'autenticazione campo tipo di dato dettagli id objectid identificatore unico generato automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico hash password stringa password crittografata per l'autenticazione creato il data timestamp di creazione dell'account aggiornato a data ultimo timestamp aggiornato per l'account utente puoi aggiungere queste collezioni manualmente nel dashboard di back4app creando una nuova classe per ciascuna e aggiungendo colonne con i tipi di dati appropriati crea nuova classe segui le istruzioni per selezionare un tipo di dato, specificare un nome di campo, impostare valori predefiniti e contrassegnare se il campo è obbligatorio crea colonna utilizzare l'agente ai di back4app per la creazione dello schema l'agente ai di back4app è uno strumento innovativo disponibile all'interno della tua dashboard che automatizza la generazione del tuo schema di database basato su un semplice prompt questa funzionalità accelera la configurazione del progetto e garantisce che il tuo schema sia allineato con le esigenze della tua applicazione come sfruttare l'agente ai accedi all'agente ai apri la tua dashboard di back4app e trova l'agente ai nel menu o nelle impostazioni del progetto inserisci i tuoi requisiti per lo schema fornisci un prompt dettagliato che descriva le collezioni e i campi di cui hai bisogno rivedi e conferma una volta che l'agente ai elabora il tuo prompt, rivedi le proposte di schema generate 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 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 metodo garantisce che il tuo schema sia sia coerente che ottimizzato passo 3 – attivazione dell'app admin e funzioni crud introduzione all'app admin l'app admin di back4app offre un'interfaccia senza codice che rende semplice gestire i dati di backend il suo sistema intuitivo di trascinamento e rilascio ti consente di eseguire tutte le operazioni crud—creare, leggere, aggiornare e eliminare—con facilità abilitazione dell'app admin apri il menu “altro” nella tua dashboard di back4app seleziona “admin app” e poi clicca su “abilita admin app ” imposta le tue credenziali di amministratore creando un utente amministratore questo processo configura anche i ruoli predefiniti come b4aadminuser e le collezioni di sistema abilita admin app una volta attivato, accedi all'admin app per iniziare a gestire i tuoi dati dashboard admin app gestire le azioni crud tramite l'admin app all'interno di questa interfaccia puoi aggiungere record clicca sull'opzione “aggiungi record” all'interno di qualsiasi collezione (ad es , articoli) per creare nuove voci visualizzare e modificare record seleziona un record per ispezionare o modificare i suoi campi rimuovere record utilizza la funzione di eliminazione per eliminare record obsoleti questo strumento semplificato migliora l'esperienza dell'utente semplificando le attività di gestione dei dati passo 4 – collegare stenciljs con back4app con il tuo backend configurato e gestito tramite l'admin app, il passo successivo è collegare il tuo frontend stenciljs a back4app opzione a utilizzare le api rest o graphql per stenciljs ci concentreremo sulle integrazioni api per mantenere le cose semplici esempio recuperare dati tramite rest // example rest api call to retrieve items 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(); console log('items retrieved ', data results); } catch (error) { console error('error retrieving items ', error); } }; fetchitems(); integra queste chiamate api nei tuoi componenti stenciljs secondo necessità opzione b utilizzare il parse sdk (se desiderato) se preferisci utilizzare il parse sdk, puoi comunque integrarlo nel tuo progetto stenciljs poiché è una libreria javascript tuttavia, il nostro esempio qui si concentra sulle chiamate api passo 5 – rafforzare il tuo backend implementazione delle liste di controllo degli accessi (acl) assicurati della sicurezza dei dati impostando le acl sui tuoi oggetti ad esempio, per creare un elemento privato async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } configurazione dei permessi a livello di classe (clp) all'interno del dashboard di back4app, imposta i clp per ogni collezione per garantire che solo gli utenti autorizzati possano accedere ai dati sensibili passo 6 – gestire l'autenticazione degli utenti stabilire account utente back4app utilizza la classe utente di parse per gestire l'autenticazione nel tuo progetto stenciljs, implementa la registrazione e il login degli utenti come segue // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } una struttura simile può essere applicata per la gestione del login e delle sessioni puoi anche abilitare funzionalità come login social, verifica email e reset della password direttamente dal dashboard di back4app passo 7 – lancio del tuo frontend stenciljs con distribuzione web la funzione di distribuzione web di back4app ti consente di ospitare la tua applicazione stenciljs distribuendo il codice direttamente da un repository github 7 1 creazione del tuo pacchetto di produzione apri la directory del tuo progetto in un terminale esegui il comando di build npm run build questo produce una www cartella contenente risorse statiche ottimizzate conferma la build assicurati che la www cartella includa un index html insieme ai necessari file css, js e immagini 7 2 organizzazione e caricamento del codice sorgente il tuo repository dovrebbe comprendere tutti i file sorgente per la tua applicazione stenciljs una struttura di esempio potrebbe essere basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md esempio di file sorgente src/parseconfig ts // src/parseconfig ts import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; esempio di file sorgente src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error('error fetching items ', error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error('error adding item ', error); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } impegnare il tuo codice su github inizializza un repository git nella tua directory di progetto (se non è già stato fatto) git init aggiungi i tuoi file git add esegui il commit delle tue modifiche git commit m "commit iniziale del codice frontend di stenciljs" crea un nuovo repository github chiamalo qualcosa come basic crud app stenciljs frontend carica il tuo codice su github git remote add origin https //github com/your username/basic crud app stenciljs frontend git git push u origin main 7 3 collegare il tuo repository tramite web deployment accedi a web deployment accedi al tuo dashboard di back4app, seleziona il tuo progetto ( basic crud app stenciljs ) e fai clic sulla sezione web deployment integra github collega il tuo account github seguendo le istruzioni fornite questo permetterà a back4app di accedere al tuo repository seleziona il repository e il branch scegli il tuo repository (ad esempio, basic crud app stenciljs frontend ) e seleziona il branch appropriato (ad esempio, main ) 7 4 configurare il tuo deployment inserisci ulteriori dettagli sul deployment comando di build se il tuo repository non include una www cartella pre costruita, specifica un comando di build (ad es , npm run build ) back4app eseguirà questo durante il deployment directory di output imposta la directory di output su www in modo che back4app sappia dove trovare i tuoi file statici variabili d'ambiente aggiungi eventuali variabili d'ambiente richieste (ad es , chiavi api) nelle impostazioni di deployment 7 5 contenere il tuo progetto stenciljs con docker se preferisci docker per il deployment, includi un dockerfile nel tuo repository simile a \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] includi questo file nel tuo repo e scegli il deployment docker in back4app 7 6 distribuire la tua applicazione iniziare la distribuzione clicca sul deploy pulsante dopo aver configurato le tue impostazioni guarda il processo di build back4app recupererà il tuo codice da github, eseguirà il comando di build (se impostato) e distribuirà la tua applicazione containerizzata accedi alla tua applicazione una volta distribuita, back4app fornirà un url dove la tua app stenciljs è attiva 7 7 validare la tua distribuzione visita l'url apri l'url fornito nel tuo browser web testa la funzionalità assicurati che l'applicazione si carichi correttamente, che le rotte funzionino correttamente e che tutte le risorse (css, js, immagini) siano servite senza problemi debug se necessario usa gli strumenti per sviluppatori del browser per ispezionare eventuali errori controlla i log di back4app e verifica le configurazioni di github e di build se si verificano problemi passo 8 – riepilogo e direzioni future ben fatto! hai costruito con successo un'applicazione crud completa utilizzando stenciljs e back4app hai impostato un progetto intitolato basic crud app stenciljs , progettato collezioni per articoli e utenti, e gestito i dati con l'app admin inoltre, hai collegato il tuo frontend stenciljs al tuo backend e implementato misure di sicurezza robuste prossimi passi migliora il frontend considera di espandere la tua app stenciljs con funzionalità avanzate come visualizzazioni dettagliate degli articoli, capacità di ricerca e notifiche in tempo reale aggiungi altre funzionalità integra logiche backend complesse (ad es , cloud functions), integrazioni api di terze parti o implementa permessi basati sui ruoli approfondisci le tue conoscenze esplora la documentazione di back4app https //www back4app com/docs e altri tutorial per ulteriori approfondimenti sull'ottimizzazione delle prestazioni e integrazioni personalizzate seguendo questo tutorial, hai acquisito le competenze necessarie per creare un robusto