Come creare un'app CRUD con Ember.js?

introduzione in questo tutorial, imparerai a costruire una semplice applicazione crud (crea, leggi, aggiorna, elimina) utilizzando ember js ci affideremo a back4app come servizio backend per gestire i tuoi dati senza sforzo questa guida copre tutte le operazioni di base di un sistema crud, mostrandoti come impostare un progetto back4app, progettare un modello di dati dinamico e integrare le operazioni crud in un'applicazione ember js all'inizio, stabilirai un progetto back4app chiamato basic crud app ember che fornisce una soluzione di archiviazione dati non relazionale affidabile per la tua app definirai la tua struttura dati impostando modelli e campi manualmente o con l'aiuto dell'ai agent di back4app successivamente, esplorerai l'app admin di back4app—un'interfaccia senza codice che ti consente di gestire i dati con semplici interazioni di trascinamento infine, integrerai la tua app ember js con back4app tramite chiamate api, implementando controlli di accesso sicuri lungo il percorso alla fine di questo tutorial, avrai un'applicazione ember js pronta per la produzione in grado di eseguire tutte le operazioni crud, inclusa l'autenticazione sicura degli utenti e una gestione efficace dei dati punti chiave costruire un'applicazione crud basata su ember js supportata da una robusta piattaforma backend comprendere come strutturare e integrare un backend scalabile con un front end ember js utilizzare l'intuitiva admin app di back4app per eseguire senza sforzo operazioni di creazione, lettura, aggiornamento e cancellazione imparare le strategie di distribuzione, inclusa la containerizzazione docker, per una consegna dell'applicazione senza interruzioni requisiti prima di iniziare, conferma di avere un account back4app con un progetto appena creato hai bisogno di aiuto? visita iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo ember js installa ember cli e configura il tuo ambiente seguendo le guide di ember js https //guides emberjs com/release/ familiarità di base con ember js, javascript e api rest ripassa questi argomenti se necessario passo 1 – configurazione del progetto iniziare un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” dalla tua dashboard assegna il nome del progetto basic crud app ember e segui le istruzioni successive per completare la configurazione del progetto crea nuovo progetto una volta creato il progetto, apparirà nella tua dashboard e costituirà la base per la configurazione del tuo backend passo 2 – progettazione del modello dati strutturare i tuoi modelli dati per questa applicazione crud, definirai diversi modelli nel tuo progetto back4app di seguito sono riportati esempi che delineano i modelli principali e i loro campi necessari per eseguire operazioni crud 1\ modello degli articoli questo modello memorizza informazioni su ciascun articolo campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa nome dell'oggetto descrizione stringa breve riassunto dell'elemento creatoil data timestamp che segna quando l'elemento è stato aggiunto aggiornatoa data timestamp che segna l'ultimo aggiornamento 2\ modello utenti questo modello gestisce l'autenticazione degli utenti e le credenziali campo tipo di dato descrizione id objectid identificatore unico generato automaticamente nome utente stringa nome utente unico per l'utente email stringa indirizzo email unico dell'utente hashpassword stringa password utente crittografata creatoil data timestamp quando l'account è stato creato aggiornatoa data timestamp quando l'account è stato aggiornato puoi creare questi modelli e definire i loro campi direttamente all'interno del dashboard di back4app crea nuova classe puoi aggiungere campi selezionando un tipo di dato, inserendo il nome del campo, impostando un valore predefinito e contrassegnando se è obbligatorio crea colonna utilizzare l'agente ai di back4app per la generazione dello schema l'agente ai di back4app è una funzione intelligente all'interno del tuo dashboard che può configurare automaticamente il tuo schema di dati in base alle tue specifiche questo strumento semplifica l'inizializzazione del progetto assicurando che il tuo modello di dati sia ottimizzato per le operazioni crud come utilizzare l'agente ai apri l'agente ai accedi al tuo dashboard di back4app e trova l'agente ai nelle impostazioni del progetto fornisci i dettagli del tuo modello invia una descrizione dettagliata dei modelli e dei campi di cui hai bisogno rivedi e conferma l'agente ai genererà uno schema suggerito conferma i dettagli per applicare la configurazione esempio di richiesta create the following models in my back4app project 1\) model items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) model users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) questo approccio assistito dall'ai fa risparmiare tempo e garantisce che la tua struttura dati sia coerente e ottimizzata passo 3 – abilitare l'app admin e gestire le operazioni crud una panoramica dell'app admin l'app admin di back4app fornisce una piattaforma user friendly e senza codice per gestire i tuoi dati di backend la sua interfaccia drag and drop ti consente di eseguire facilmente operazioni crud come aggiungere, visualizzare, aggiornare e rimuovere record abilitare l'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca su “abilita app admin ” configura le tue credenziali di amministratore creando un account admin iniziale questo configurerà anche i ruoli (ad es , b4aadminuser ) e i modelli di sistema abilita app admin una volta attivata, accedi all'app admin per gestire i dati della tua applicazione dashboard app admin gestire le operazioni crud tramite l'app admin all'interno dell'app admin, puoi inserire record clicca sul pulsante “aggiungi record” all'interno di un modello (ad es , articoli) per inserire nuovi dati ispezionare/modificare record seleziona qualsiasi record per visualizzarne i dettagli o modificare i suoi campi eliminare record rimuovi le voci che non sono più necessarie questa interfaccia semplificata migliora significativamente l'efficienza della gestione dei dati passo 4 – collegare la tua applicazione ember js con back4app con il tuo backend configurato, è tempo di collegare la tua applicazione ember js a back4app utilizzare le chiamate api in ember js ember js sfrutta ember data per gestire le operazioni sui dati in questo tutorial, utilizzerai l'adattatore rest per interagire con il tuo backend back4app 1\ configurare l'adattatore rest crea o aggiorna l'adattatore della tua applicazione (ad es , app/adapters/application js ) con la seguente configurazione import restadapter from '@ember data/adapter/rest'; export default class applicationadapter extends restadapter { host = 'https //parseapi back4app com'; headers = { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }; } 2\ definire i modelli di ember data crea un modello ember per item (ad es , app/models/item js ) import model, { attr } from '@ember data/model'; export default class itemmodel extends model { @attr('string') title; @attr('string') description; @attr('date') createdat; @attr('date') updatedat; } e in modo simile per user (ad es , app/models/user js ) import model, { attr } from '@ember data/model'; export default class usermodel extends model { @attr('string') username; @attr('string') email; @attr('string') passwordhash; @attr('date') createdat; @attr('date') updatedat; } 3\ implementare le operazioni crud utilizza il servizio store di ember data per eseguire operazioni crud ad esempio, per recuperare tutti gli elementi, potresti creare una rotta simile a import route from '@ember/routing/route'; export default class itemsroute extends route { model() { return this store findall('item'); } } puoi aggiungere, aggiornare o eliminare record in modo simile utilizzando i metodi api di ember data alternative utilizzare fetch nativo per le chiamate api se preferisci non utilizzare ember data, puoi utilizzare chiamate fetch native ad esempio, per recuperare gli elementi async function fetchitems() { try { let response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let data = await response json(); console log('fetched items ', data); } catch (error) { console error('error fetching items ', error); } } integra queste chiamate api nei tuoi componenti o servizi ember secondo necessità passo 5 – migliorare la sicurezza per il tuo backend implementazione dei controlli di accesso proteggi i tuoi dati configurando le liste di controllo degli accessi (acl) per ogni oggetto ad esempio, quando crei un elemento che dovrebbe essere visibile solo al suo proprietario, puoi regolare le impostazioni acl tramite le tue chiamate api permessi a livello di classe (clp) all'interno del dashboard di back4app, imposta i clp per garantire che solo gli utenti autenticati abbiano accesso a determinati modelli questo aggiunge un ulteriore livello di sicurezza imponendo regole di accesso predefinite passo 6 – implementazione dell'autenticazione utente in ember js impostazione degli account utente back4app sfrutta il modello utente di parse per gestire l'autenticazione nella tua applicazione ember js, puoi creare servizi per gestire la registrazione e il login degli utenti tramite chiamate api ad esempio, crea un servizio di autenticazione ( app/services/auth js ) import service from '@ember/service'; export default class authservice extends service { async register(username, password, email) { try { let 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, password, email }) }); let result = await response json(); console log('user registered successfully ', result); } catch (error) { console error('registration error ', error); } } async login(username, password) { try { let response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); let result = await response json(); console log('user logged in ', result); } catch (error) { console error('login error ', error); } } } questo servizio può essere iniettato nelle tue rotte o componenti per gestire la gestione delle sessioni, il ripristino delle password e altre attività relative all'autenticazione passo 7 – distribuire la tua applicazione ember js back4app supporta varie strategie di distribuzione puoi distribuire la tua applicazione ember js utilizzando metodi come la containerizzazione docker 7 1 costruire la tua applicazione ember costruisci la tua applicazione esegui il seguente comando nel tuo terminale ember build environment=production verifica l'output assicurati che la dist/ cartella contenga le tue risorse pronte per la produzione 7 2 panoramica della struttura del progetto un tipico progetto ember js potrebbe essere organizzato come segue basic crud app ember/ \| app/ \| | adapters/ \| | | application js \| | models/ \| | | item js \| | | user js \| | routes/ \| | | items js \| | services/ \| | auth js \| config/ \| | environment js \| public/ \| tests/ \| ember cli build js \| package json \| readme md 7 3 dockerizzare la tua applicazione ember se preferisci un deployment containerizzato, includi un dockerfile nella radice del tuo progetto \# use an official node js image as the base from node 16 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the rest of the application code copy \# build the ember application run npm run build environment=production \# use a lightweight web server to serve static files from nginx\ stable alpine copy from=0 /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 distribuzione tramite back4app web deployment collega il tuo repository github ospita il tuo progetto ember js su github configura le impostazioni di distribuzione nel tuo dashboard di back4app, vai a web deployment , collega il tuo repository (ad esempio, basic crud app ember ), e seleziona il branch desiderato imposta i comandi di build definisci il tuo comando di build (ad esempio, ember build environment=production ) e specifica la directory di output distribuisci la tua app clicca su distribuisci e monitora i log fino a quando la tua app non è attiva passo 8 – conclusione e prossimi passi ottimo lavoro! hai ora costruito un'applicazione crud basata su ember js integrata con back4app in questo tutorial, hai impostato un progetto chiamato basic crud app ember , progettato modelli per articoli e utenti, e gestito il tuo backend tramite l'app admin di back4app hai anche collegato la tua app ember js utilizzando chiamate api e implementato pratiche di sicurezza robuste prossimi passi migliora la tua applicazione considera di aggiungere funzionalità come ricerca avanzata, visualizzazioni dettagliate o aggiornamenti in tempo reale espandi le capacità del backend esplora funzioni cloud, integra api di terze parti o imposta il controllo degli accessi basato sui ruoli approfondisci la tua comprensione visita la documentazione di back4app https //www back4app com/docs e altre risorse di ember js per argomenti più avanzati buon coding e migliori auguri nel tuo viaggio con ember js!