Come creare un'app CRUD con Remix?

panoramica in questa guida, imparerai a costruire un'applicazione crud (crea, leggi, aggiorna, elimina) utilizzando remix js utilizzeremo back4app come nostro servizio backend per gestire il salvataggio dei dati senza problemi questa guida copre la configurazione di un progetto back4app, la progettazione di uno schema dati dinamico e l'implementazione delle operazioni crud nella tua applicazione remix js inizialmente, configurerai un progetto back4app, che chiameremo basic crud app remix , fornendo un'archiviazione dati non relazionale scalabile poi creerai un modello di dati stabilendo manualmente collezioni e campi tramite il dashboard di back4app, oppure potrai utilizzare l'ai agent integrato per una configurazione automatizzata successivamente, esplorerai l'app admin di back4app—un'interfaccia user friendly che ti consente di gestire facilmente i tuoi dati utilizzando operazioni di trascinamento infine, collegherai la tua applicazione remix js a back4app tramite chiamate api rest, assicurando che le tue funzionalità crud, insieme all'autenticazione degli utenti, siano robuste e sicure entro la fine di questo tutorial, avrai un'applicazione remix js pronta per la produzione in grado di eseguire operazioni crud di base insieme a una gestione sicura degli utenti cosa imparerai come costruire un'app crud con remix js e un backend affidabile le migliori pratiche per strutturare il tuo backend e integrarlo con un frontend remix js come utilizzare l'app admin di back4app per semplificare le attività di gestione dei dati tecniche per distribuire la tua applicazione remix js, inclusa la containerizzazione con docker requisiti preliminari prima di iniziare, assicurati di avere un account back4app con un nuovo progetto pronto hai bisogno di aiuto? visita iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo remix js funzionante puoi utilizzare qualsiasi editor di codice moderno come vs code node js (versione 14 o successiva) dovrebbe essere installato conoscenze di base di javascript, react e api restful per un ripasso, dai un'occhiata alla documentazione di remix https //remix run/docs passo 1 – configurare il tuo progetto avviare un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” dalla tua dashboard nomina il tuo progetto basic crud app remix e segui i passaggi per completare il processo di creazione crea nuovo progetto una volta che il tuo progetto è pronto, apparirà sulla tua dashboard, fornendo la base per il tuo backend passo 2 – creare il tuo modello di dati stabilire le strutture dati per questa applicazione crud, definirai diverse collezioni in back4app di seguito sono riportati esempi delle principali collezioni e campi che supporteranno le tue funzionalità crud 1\ collezione articoli questa collezione memorizzerà i dettagli su ciascun elemento campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa il nome o titolo dell'elemento descrizione stringa un breve riassunto che descrive l'oggetto creatoil data timestamp per quando l'elemento è stato aggiunto aggiornatoa data timestamp per l'ultima modifica 2\ raccolta utenti questa collezione gestisce le credenziali degli utenti e le informazioni di autenticazione 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 hashata per un'autenticazione sicura creatoil data timestamp per quando è stato creato l'account aggiornatoa data timestamp per quando l'account è stato aggiornato puoi creare queste collezioni e aggiungere campi direttamente dal dashboard di back4app crea nuova classe per aggiungere un nuovo campo, basta scegliere un tipo di dato, inserire il nome del campo e impostare i valori predefiniti o le opzioni obbligatorie secondo necessità crea colonna utilizzare l'agente ai di back4app per la generazione dello schema l'agente ai integrato in back4app può generare automaticamente il tuo schema in base alla tua descrizione, semplificando la configurazione iniziale come utilizzare l'agente ai accedi all'agente ai accedi al tuo dashboard di back4app e trova l'agente ai nelle impostazioni del tuo progetto descrivi il tuo modello di dati fornisci una spiegazione dettagliata delle collezioni e dei campi di cui hai bisogno rivedi e conferma l'agente ai presenterà uno schema proposto verifica i dettagli e conferma la configurazione esempio di richiesta create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) questo metodo assistito dall'ai accelera il processo e garantisce che il tuo schema sia perfettamente adattato alle esigenze della tua app passaggio 3 – attivazione dell'app admin e gestione delle operazioni crud panoramica dell'app admin l'app admin di back4app fornisce un'interfaccia senza codice che semplifica la gestione dei dati di backend le sue funzionalità di trascinamento e rilascio rendono le operazioni crud—come aggiungere, modificare e eliminare record—più intuitive abilitare l'app admin vai al menu “altro” nel tuo dashboard di back4app seleziona “app admin” e clicca su “abilita app admin ” configura il tuo account admin inserendo le tue credenziali questo configurerà anche i ruoli (ad es , b4aadminuser ) e le classi di sistema abilita app admin dopo l'attivazione, accedi all'app admin per gestire i tuoi dati con facilità dashboard app admin esecuzione di operazioni crud tramite l'app admin all'interno dell'app admin, puoi inserire nuovi record usa il pulsante “aggiungi record” all'interno di una collezione (come articoli) per creare nuove voci ispezionare e modificare record clicca su qualsiasi record per vedere i suoi dettagli e apportare modifiche eliminare record rimuovi qualsiasi record che non è più necessario questa interfaccia intuitiva migliora notevolmente la tua esperienza di gestione dei dati passo 4 – collegare la tua applicazione remix js con back4app ora che il tuo backend è impostato, è tempo di integrare la tua app remix js con back4app utilizzare le chiamate api rest in remix js poiché il parse sdk non è tipicamente utilizzato con remix js, eseguirai operazioni crud tramite richieste api rest 1\ impostare il tuo progetto remix js se non lo hai già fatto, crea un nuovo progetto remix npx create remix\@latest segui le istruzioni per scegliere il tuo obiettivo di distribuzione 2\ effettuare richieste api da remix crea file di route api sotto il app/routes directory per gestire le operazioni crud ad esempio, potresti avere un file chiamato items server js che include funzioni per recuperare, creare, aggiornare e eliminare elementi esempio recuperare elementi // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { const 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", }, }); const data = await response json(); return json(data); } allo stesso modo, puoi creare route post, put e delete per gestire la creazione, gli aggiornamenti e le eliminazioni degli elementi 3\ collegare i componenti ui nei tuoi componenti remix, puoi utilizzare hook come useloaderdata per recuperare dati e fetch funzioni api o di azione per inviare dati a back4app ad esempio, nel tuo componente react // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } integra chiamate api simili per operazioni di aggiornamento e cancellazione nelle tue azioni remix passo 5 – sicurezza del tuo backend implementazione delle liste di controllo degli accessi (acl) rafforza la sicurezza dei dati impostando acl per i tuoi oggetti ad esempio, per creare un articolo accessibile solo dal suo creatore // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { 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", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } permessi a livello di classe (clp) regola i clp nel tuo dashboard di back4app per applicare politiche di sicurezza predefinite, assicurando che solo gli utenti autenticati possano accedere a collezioni specifiche passo 6 – aggiunta dell'autenticazione utente configurazione della gestione degli utenti back4app utilizza la classe utente integrata di parse per gestire l'autenticazione nella tua applicazione remix, gestisci la registrazione e il login degli utenti utilizzando chiamate api esempio endpoint di registrazione utente // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); 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, password, email }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } implementa endpoint simili per il login, la gestione delle sessioni e il ripristino delle password passo 7 – distribuzione della tua applicazione remix js back4app supporta una distribuzione senza soluzione di continuità puoi distribuire la tua app remix js utilizzando varie strategie, incluso docker 7 1 costruzione della tua applicazione remix js compila e raggruppa usa il tuo gestore di pacchetti e gli script di build (ad es , tramite npm run build ) per compilare la tua app verifica l'output assicurati che l'output della tua build contenga tutti i file necessari 7 2 esempio di struttura del progetto un tipico progetto remix js potrebbe apparire così basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 1 costruzione della tua applicazione remix js 7 3 dockerizzare la tua applicazione se scegli la containerizzazione, aggiungi un dockerfile nella radice del tuo progetto \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 distribuzione tramite back4app web deployment collega il tuo repository ospita il tuo codice sorgente remix js su github configura la distribuzione nel tuo dashboard di back4app, seleziona la web deployment funzione, collega il tuo repository (ad esempio, basic crud app remix ), e scegli il ramo corretto imposta i comandi di build e output specifica il tuo comando di build (come npm run build ) e la directory di output distribuisci la tua app clicca su distribuisci e monitora i log fino a quando la tua app è attiva passo 8 – conclusione e direzioni future ben fatto! hai ora costruito un'applicazione crud utilizzando remix js integrato con back4app in questa guida, hai impostato un progetto chiamato basic crud app remix , definito collezioni per articoli e utenti, e gestito i dati tramite l'app di amministrazione di back4app hai poi collegato la tua app remix js a back4app tramite chiamate api rest e implementato misure di autenticazione sicura degli utenti e protezione dei dati prossimi passi migliora la tua applicazione considera di aggiungere più funzionalità come la ricerca, visualizzazioni dettagliate degli articoli o aggiornamenti in tempo reale espandi le capacità del backend esamina le funzioni cloud, integrazioni api esterne o controlli di accesso più avanzati continua a imparare visita la documentazione di back4app https //www back4app com/docs e esplora ulteriori tutorial su remix js per ottimizzare ulteriormente la tua app buon coding e migliori auguri per il tuo viaggio con remix js!