How to Build a Basic CRUD App with Marko? A Step-by-Step Guide

panoramica questa guida ti accompagna nella creazione di un'applicazione crud completa (crea, leggi, aggiorna, elimina) utilizzando marko e back4app in questo tutorial, configurerai un progetto—chiamato basic crud app marko —su back4app, progetterai uno schema di database robusto e integrerai il tuo frontend marko con l'api di back4app il tutorial spiega anche come proteggere il tuo backend e distribuire la tua applicazione per l'uso in produzione cosa imparerai come costruire applicazioni crud che gestiscono i dati in modo efficiente utilizzando un backend affidabile suggerimenti per progettare uno schema scalabile e collegarlo a un frontend basato su marko utilizzare l'interfaccia di amministrazione user friendly di back4app per gestire i dati senza sforzo strategie di distribuzione, inclusa la containerizzazione con docker, per lanciare la tua applicazione web requisiti prima di iniziare, assicurati di avere un account back4app e un nuovo progetto segui le istruzioni in iniziare con back4app https //www back4app com/docs/get started/new parse app se necessario un ambiente di sviluppo marko configurato usa il marko cli o il tuo metodo di configurazione preferito assicurati che node js (v14 o successivo) sia installato conoscenze di base di javascript, marko e rest api visita la documentazione di marko https //markojs com/docs/ per ulteriori dettagli passo 1 – configurare il tuo progetto avviare un nuovo progetto back4app accedi al tuo account back4app seleziona “nuova app” nella tua dashboard inserisci il nome del progetto basic crud app marko e segui le istruzioni sullo schermo crea nuovo progetto il tuo nuovo progetto apparirà ora sul tuo dashboard di back4app, ponendo le basi per il tuo backend passo 2 – creazione del tuo schema di database costruire il tuo modello di dati per questa app crud, creerai un paio di collezioni di seguito sono riportati esempi di collezioni con campi suggeriti per aiutarti a progettare uno schema di database pratico 1\ collezione prodotti questa collezione conterrà dettagli su ciascun prodotto campo tipo dettagli id objectid identificatore primario generato automaticamente nome stringa il nome del prodotto dettagli stringa una breve descrizione del prodotto creato il data timestamp che segna la creazione del prodotto aggiornato a data timestamp dell'ultimo aggiornamento 2\ raccolta utenti questa collezione contiene dati utente e di autenticazione campo tipo dettagli id objectid identificatore unico generato automaticamente nome utente stringa un nome unico per l'utente email stringa un indirizzo email unico password stringa una versione hash della password dell'utente creato il data timestamp di creazione del record aggiornato a data ultima modifica timestamp puoi definire manualmente queste collezioni nel dashboard di back4app creando una nuova classe per ogni collezione e poi aggiungendo le colonne appropriate crea nuova classe puoi aggiungere rapidamente campi scegliendo un tipo, nominando la tua colonna, impostando valori predefiniti e contrassegnandola come obbligatoria se necessario crea colonna utilizzare l'agente ai di back4app per la creazione di schemi l'agente ai di back4app semplifica la progettazione degli schemi generando definizioni di collezioni e campi in base al tuo prompt questa funzionalità fa risparmiare tempo e garantisce coerenza nella configurazione del tuo database come utilizzare l'agente ai accedi all'agente ai naviga nel tuo dashboard di back4app e trova l'agente ai nelle impostazioni del tuo progetto descrivi il tuo schema fornisci un prompt dettagliato che descriva le collezioni e i campi di cui hai bisogno rivedi e implementa dopo la generazione, rivedi lo schema suggerito e applica le modifiche esempio di prompt create the following collections for my back4app project 1\) collection products \ fields \ id objectid (auto generated) \ name string \ details 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 string \ created at date (auto generated) \ updated at date (auto updated) questo approccio semplifica il processo di creazione dello schema passo 3 – attivazione dell'interfaccia di amministrazione e funzionalità crud introduzione all'interfaccia di amministrazione l'app admin di back4app è un'interfaccia senza codice che rende la gestione dei dati semplice le sue funzionalità di trascinamento e rilascio ti consentono di aggiungere, modificare, visualizzare o rimuovere facilmente i record abilitare l'interfaccia di amministrazione vai alla sezione “altro” nel tuo dashboard di back4app seleziona “admin app” e poi clicca su “abilita admin app ” imposta le credenziali dell'amministratore crea il tuo primo account amministratore che assegnerà anche ruoli di sistema come b4aadminuser abilita admin app una volta attivato, accedi all'admin app per gestire il tuo backend dashboard admin app gestire le operazioni crud tramite l'interfaccia di amministrazione all'interno dell'admin app puoi aggiungere nuove voci usa l'opzione “aggiungi record” in una collezione (ad es , prodotti) visualizzare/modificare record clicca su qualsiasi voce per rivedere o aggiornare i suoi dettagli rimuovere voci utilizza la funzione di eliminazione per rimuovere record obsoleti questa interfaccia semplificata migliora l'esperienza dell'utente semplificando le attività di gestione dei dati passo 4 – collegare marko con back4app ora che il tuo backend è configurato, è tempo di integrare il tuo frontend marko con back4app utilizzando l'api opzione a utilizzare l'api utilizzerai chiamate api rest per eseguire operazioni crud nella tua applicazione marko esempio recupero dati tramite rest // in a marko component script file (e g , fetchproducts marko) import { onmount } from 'marko/src/runtime/client'; onmount(async () => { try { const response = await fetch('https //parseapi back4app com/classes/products', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('products ', data results); } catch (error) { console error('failed to fetch products ', error); } }); questo frammento di codice mostra come estrarre i dati dei prodotti da back4app utilizzando una chiamata api rest passo 5 – proteggere il tuo backend configurare i controlli di accesso migliora la sicurezza applicando le liste di controllo degli accessi (acl) ai tuoi record ad esempio, per creare un'entrata prodotto privata async function createsecureproduct(productdata, owner) { const product = { name productdata name, details productdata details }; // setup acl only the owner has read/write privileges product acl = { " " { read false, write false }, \[owner id] { read true, write true } }; try { const response = await fetch('https //parseapi back4app com/classes/products', { 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(product) }); const result = await response json(); console log('secure product created ', result); } catch (error) { console error('error creating product ', error); } } impostare i permessi predefiniti utilizza il dashboard di back4app per configurare i permessi a livello di classe (clp) per ogni collezione, assicurandoti che solo gli utenti autorizzati possano accedere ai dati sensibili passo 6 – configurazione dell'autenticazione utente creazione di account utente back4app utilizza una classe utente per l'autenticazione nella tua app marko, implementa la registrazione e il login degli utenti in questo modo // in a marko component script (e g , auth marko) import { onmount } from 'marko/src/runtime/client'; async function registeruser(username, email, password) { const userdata = { username, email, password }; 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(userdata) }); const result = await response json(); console log('user registered ', result); } catch (error) { console error('registration error ', error); } } questo frammento dimostra un semplice flusso di registrazione utente utilizzando chiamate rest passo 7 – distribuire il tuo frontend marko la funzione di distribuzione web di back4app ti consente di ospitare il tuo progetto marko direttamente da un repository github 7 1 – creare la tua versione di produzione apri la directory del tuo progetto in un terminale esegui il comando di build npm run build questo produce una build directory con i tuoi file statici ottimizzati conferma la build controlla che la build cartella includa un index html e tutte le directory degli asset 7 2 – organizzazione e caricamento del tuo codice il tuo repository dovrebbe contenere il codice sorgente completo del tuo progetto marko un layout di directory tipico potrebbe apparire così basic crud app marko frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── components/ │ │ ├── fetchproducts marko │ │ └── auth marko │ ├── app marko │ └── api js ├── package json └── readme md esempio src/api js // src/api js export const api headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; export async function fetchproducts() { const response = await fetch('https //parseapi back4app com/classes/products', { headers api headers }); const data = await response json(); return data results; } impegnarsi su github inizializza git (se necessario) git init aggiungi i tuoi file git add impegna le tue modifiche git commit m "impegno iniziale per il frontend crud di marko" crea e invia al tuo repository github ad esempio, usa un repository chiamato basic crud app marko frontend 7 3 – collegare github con il deployment web accedi al deployment web accedi a back4app, vai al tuo progetto (basic crud app marko) e apri la sezione deployment web collega il tuo account github segui le istruzioni per collegare il tuo account github seleziona il repository e il branch scegli il repository (ad esempio, basic crud app marko frontend ) e il branch (ad esempio, main ) da distribuire 7 4 – configurare il deployment imposta parametri aggiuntivi comando di costruzione se non esiste una cartella build pre costruita, imposta un comando di costruzione (ad es , npm run build ) directory di output specifica build come cartella di output variabili di ambiente inserisci eventuali variabili necessarie (come le chiavi api) 7 5 – contenere con docker se preferisci docker, includi un dockerfile nel tuo repository di progetto \# use a node image for building the app from node 16 alpine as build \# set working directory workdir /app \# install dependencies copy package json / run npm install \# copy all files and build the app copy run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] nelle impostazioni di distribuzione, scegli l'opzione di distribuzione docker 7 6 – distribuire la tua applicazione premi il pulsante distribuisci back4app preleverà il tuo repository, eseguirà la build e distribuirà la tua app monitora il processo controlla i log di distribuzione per eventuali problemi di build o runtime accedi al tuo sito una volta distribuito, back4app fornisce un url per la tua applicazione marko ospitata 7 7 – confermare la tua distribuzione apri l'url fornito controlla che la tua applicazione si carichi correttamente esegui l'app verifica che tutte le pagine si carichino e che le funzionalità crud funzionino come previsto risolvi i problemi se necessario utilizza gli strumenti per sviluppatori del browser e i log di back4app per affrontare eventuali problemi passo 8 – considerazioni finali e miglioramenti futuri ottimo lavoro! hai ora costruito un'applicazione crud completa con marko e back4app hai impostato un progetto chiamato basic crud app marko , creato collezioni dettagliate per prodotti e utenti, gestito i dati tramite un'interfaccia di amministrazione intuitiva, integrato il tuo frontend marko utilizzando le api rest e protetto il tuo backend con controlli robusti prossimi passi migliora la tua ui considera di aggiungere funzionalità avanzate come pagine di dettagli dei prodotti, funzionalità di ricerca e notifiche in tempo reale espandi le capacità del backend valuta l'integrazione di funzioni serverless o api di terze parti per funzionalità aggiuntive approfondisci le tue conoscenze fai riferimento alla documentazione di back4app https //www back4app com/docs e a tutorial aggiuntivi per ulteriori approfondimenti sull'ottimizzazione delle prestazioni e integrazioni personalizzate buon coding con marko e back4app!