Come sviluppare un'applicazione CRUD con Deno? Una guida completa

panoramica questa guida dimostra come creare un'applicazione crud semplice (crea, leggi, aggiorna, elimina) utilizzando deno sfrutteremo back4app come nostra piattaforma di gestione del backend, configurandola per funzionare come una soluzione di database affidabile e utilizzeremo l'approccio api per interagire con i nostri servizi backend in questo tutorial, tu imposta un progetto back4app chiamato basic crud app deno progetta e configura il tuo schema di database con collezioni e campi su misura per le operazioni crud utilizza l'app admin di back4app per gestire le tue collezioni tramite un'interfaccia intuitiva e drag and drop collega il tuo frontend deno con back4app utilizzando chiamate rest/graphql proteggi il tuo backend con robuste misure di controllo degli accessi alla fine di questa guida, avrai costruito un'applicazione web pronta per la produzione che supporta operazioni di dati essenziali e autenticazione degli utenti informazioni essenziali padroneggia le funzionalità crud per gestire i dati in modo efficiente scopri come progettare un backend scalabile integrato con un frontend basato su deno utilizza l'app admin di back4app per una gestione dei dati senza soluzione di continuità scopri strategie di distribuzione, inclusa la containerizzazione con docker requisiti prima di iniziare, assicurati di avere un account back4app e un progetto inizializzato fai riferimento a iniziare con back4app https //www back4app com/docs/get started/new parse app se necessario un ambiente di sviluppo deno assicurati che deno sia installato e aggiornato (si consiglia la versione 1 10+) familiarità con javascript/typescript, deno e concetti di rest api consulta il manuale di deno https //deno land/manual per ulteriori letture passo 1 – inizializzare il tuo progetto avviare un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” nella tua dashboard nomina il tuo progetto basic crud app deno e segui le istruzioni sullo schermo crea nuovo progetto dopo che il progetto è stato creato, sarà visibile nella tua dashboard, ponendo le basi per la configurazione del backend passo 2 – creazione dello schema del database strutturare il tuo modello di dati per questa applicazione crud, definirai più collezioni di seguito sono riportate collezioni di esempio con campi suggeriti per facilitare le operazioni di base 1\ collezione articoli questa collezione contiene dettagli per ogni articolo campo tipo scopo id objectid chiave primaria generata automaticamente titolo stringa nome dell'oggetto descrizione stringa breve riassunto dell'elemento creato il data timestamp per quando l'elemento è stato aggiunto aggiornato a data timestamp per l'ultimo aggiornamento 2\ raccolta utenti questa raccolta memorizza i profili utente e i dati di autenticazione campo tipo scopo id objectid chiave primaria generata automaticamente nome utente stringa identificatore unico per l'utente email stringa indirizzo email unico dell'utente hash password stringa password crittografata in modo sicuro creato il data timestamp di creazione dell'account aggiornato a data ultimo aggiornamento puoi creare manualmente queste collezioni nel dashboard di back4app stabilendo una nuova classe per ciascuna e aggiungendo colonne per definire ciascun campo crea nuova classe puoi anche aggiungere campi selezionando il loro tipo, nominandoli, impostando i valori predefiniti e contrassegnandoli come obbligatori crea colonna utilizzare l'agente ai di back4app per la creazione di schemi l'agente ai di back4app semplifica la generazione di schemi consentendoti di inserire un prompt descrittivo, che poi crea automaticamente le collezioni e i campi richiesti passaggi per utilizzare l'agente ai accedi all'agente ai apri il tuo dashboard di back4app e trova l'opzione agente ai inserisci la descrizione del tuo modello di dati fornisci un prompt dettagliato elencando le tue collezioni e i tuoi campi esamina e applica controlla le proposte di schema generate e implementale nel tuo progetto esempio di prompt create the following collections in my back4app application 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 coerenza ed efficienza nella configurazione del tuo schema backend passo 3 – attivazione dell'interfaccia di amministrazione e delle funzioni crud panoramica dell'interfaccia di amministrazione l'app admin di back4app offre un'interfaccia senza codice per gestire i tuoi dati backend il suo design intuitivo drag and drop facilita la gestione delle operazioni crud attivazione dell'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “admin app” e clicca su “abilita admin app ” imposta le tue credenziali di amministratore creando un utente amministratore iniziale, che configura anche i ruoli (ad es , b4aadminuser ) e le collezioni di sistema abilita admin app una volta attivata, accedi all'admin app per gestire le tue collezioni senza sforzo dashboard admin app gestire le operazioni crud tramite l'admin app nell'admin app, puoi aggiungere record clicca su “aggiungi record” in qualsiasi collezione (ad es , articoli) per creare nuove voci visualizzare/modificare record seleziona i record per ispezionare o modificare i dettagli rimuovere record elimina le voci che non sono più necessarie questo strumento semplice semplifica il processo di esecuzione delle operazioni di base sui dati passo 4 – collegare deno con back4app con il tuo backend configurato, è tempo di collegare il tuo frontend deno utilizzando le api rest o graphql opzione utilizzare chiamate api rest/graphql ci affideremo alle chiamate api per interagire con back4app esempio recuperare dati tramite rest in deno crea un modulo (ad esempio, fetchitems ts ) con il seguente codice const application id = "your application id"; const rest api key = "your rest api key"; const server url = "https //parseapi back4app com/classes/items"; export async function fetchitems() { try { const response = await fetch(server url, { headers { "x parse application id" application id, "x parse rest api key" rest api key, }, }); const data = await response json(); console log("retrieved items ", data results); } catch (error) { console error("error retrieving items ", error); } } fetchitems(); integra queste chiamate api nella tua applicazione deno secondo necessità passo 5 – rafforzare la sicurezza del tuo backend implementazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati assegnando acl a ciascun oggetto ad esempio, per garantire che un elemento sia privato async function createprivateitem(itemdata { title string; description string }, ownertoken string) { const server url = "https //parseapi back4app com/classes/items"; const response = await fetch(server url, { method "post", headers { "content type" "application/json", "x parse application id" "your application id", "x parse rest api key" "your rest api key", "x parse session token" ownertoken, }, body json stringify({ title itemdata title, description itemdata description, acl { " " { read false, write false }, \[ownertoken] { read true, write true } } }), }); const result = await response json(); console log("private item created ", result); } configurazione delle autorizzazioni a livello di classe (clp) all'interno del dashboard di back4app, regola le clp per ciascuna collezione per definire le politiche di accesso predefinite, assicurandoti che solo gli utenti autenticati o autorizzati possano accedere o modificare dati sensibili passo 6 – gestione dell'autenticazione degli utenti creazione di account utente back4app utilizza la classe utente di parse per l'autenticazione nella tua applicazione deno, gestisci la registrazione e il login degli utenti tramite chiamate api rest esempio registrazione utente in deno async function registeruser(username string, password string, email string) { const server url = "https //parseapi back4app com/users"; try { const response = await fetch(server url, { 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 data = await response json(); console log("user registered ", data); } catch (error) { console error("registration error ", error); } } registeruser("newuser", "securepassword", "user\@example com"); questo approccio può essere applicato in modo simile per il login e la gestione delle sessioni passo 7 – distribuire il tuo frontend deno con il web deployment la funzione di web deployment di back4app ti consente di ospitare il tuo frontend basato su deno distribuendo il codice direttamente da un repository github 7 1 – costruire la tua versione di produzione apri la directory del tuo progetto nel terminale esegui il comando di build ad esempio, se utilizzi un bundler come esbuild deno run allow read allow write build script ts conferma l'output della build assicurati che la directory di output (ad esempio, dist ) contenga i file statici necessari come index html , javascript impacchettato, css e immagini 7 2 – organizzare e impegnare il tuo codice il tuo repository dovrebbe includere tutti i file sorgente per il tuo frontend deno una struttura di esempio potrebbe essere basic crud app deno/ ├── deps ts ├── controllers/ ├── public/ │ └── index html ├── routes/ ├── src/ │ ├── app ts │ └── fetchitems ts ├── dockerfile ├── build script ts └── readme md file di esempio deps ts export { serve } from "https //deno land/std\@0 140 0/http/server ts"; file di esempio src/app ts import { serve } from " /deps ts"; import { fetchitems } from " /fetchitems ts"; serve(async (req) => { const { pathname } = new url(req url); if (pathname === "/api/items") { const items = await fetchitems(); return new response(json stringify(items), { headers { "content type" "application/json" }, }); } return new response(await deno readtextfile(" /public/index html"), { headers { "content type" "text/html" }, }); }); impegnare il tuo codice su github inizializza git git init metti in staging tutti i file git add impegnare le tue modifiche git commit m "impegno iniziale per il frontend deno crud" invia a github crea un repository (ad esempio, basic crud app deno ) e invia git remote add origin https //github com/your username/basic crud app deno git git push u origin main 7 3 – collegare github con il deployment web di back4app accedi a back4app e naviga al tuo progetto clicca sulla funzione di deployment web collega il tuo account github seguendo le istruzioni seleziona il tuo repository e branch (ad esempio, main ) che contiene il tuo codice deno 7 4 – configurare le impostazioni di deployment specifica comando di costruzione se non esiste una cartella dist pre costruita, impostare il comando (ad es , deno run allow read allow write build script ts ) directory di output definire la cartella di output, come dist variabili di ambiente aggiungere eventuali variabili di ambiente necessarie (ad es , chiavi api) 7 5 – dockerizzare la tua applicazione deno per distribuire con docker, includere un dockerfile nel tuo progetto \# use the official deno image from denoland/deno\ alpine 1 25 0 \# set the working directory workdir /app \# cache dependencies copy deps ts run deno cache deps ts \# copy the application code copy \# expose port 8000 expose 8000 \# run the application cmd \["run", " allow net", " allow read", "src/app ts"] scegli l'opzione di distribuzione docker in back4app se preferisci la containerizzazione 7 6 – lancio della tua applicazione iniziare il deployment clicca sul deploy pulsante nel tuo dashboard di back4app monitora il processo back4app recupererà il tuo codice, eseguirà i passaggi di build e distribuirà la tua app accedi al tuo sito dopo il deployment, verrà fornito un url dove la tua applicazione deno è attiva 7 7 – confermare il successo del deployment visita l'url fornito apri l'url nel tuo browser testa la tua applicazione assicurati che tutte le rotte, le risorse statiche e gli endpoint api funzionino correttamente risolvi i problemi se si presentano problemi, consulta i log di deployment e verifica la tua configurazione passo 8 – conclusione e direzioni future congratulazioni! hai costruito con successo un'applicazione crud di base utilizzando deno con back4app come backend hai impostato il progetto basic crud app deno , strutturato il tuo database, gestito i dati tramite l'admin app, collegato il tuo frontend deno tramite chiamate api e protetto i tuoi dati con acl e clp miglioramenti futuri espandi il frontend aggiungi funzionalità come viste dettagliate, filtri di ricerca o aggiornamenti in tempo reale logica backend avanzata integra funzioni cloud o integrazioni api aggiuntive approfondisci la sicurezza esplora l'accesso basato sui ruoli e ulteriori misure di autenticazione per ulteriori dettagli, controlla la documentazione di back4app https //www back4app com/docs e esplora risorse aggiuntive buon coding e divertiti a costruire la tua applicazione crud scalabile in deno!