How to Develop a CRUD App with TypeScript?

panoramica in questa guida, imparerai come costruire un'applicazione crud (crea, leggi, aggiorna, elimina) utilizzando typescript utilizzeremo back4app come piattaforma backend, rendendo la gestione dei dati semplice questa guida copre la configurazione di un progetto back4app, la modellazione dei tuoi dati e l'integrazione della funzionalità crud in un'applicazione typescript inizialmente, creerai un progetto su back4app chiamato basic crud app typescript che offre una soluzione di archiviazione nosql flessibile progetterai la tua struttura dati definendo classi e campi manualmente o con l'assistenza dell'ai agent di back4app successivamente, utilizzerai l'app admin di back4app per la gestione del backend tramite un'interfaccia user friendly che semplifica le operazioni sui dati infine, collegherai la tua applicazione typescript con back4app utilizzando il parse javascript sdk, garantendo accesso e autenticazione sicuri entro la fine di questo tutorial, avrai un'applicazione typescript completamente operativa in grado di gestire attività crud di base, inclusa l'autenticazione degli utenti e la gestione dei dati cosa imparerai come costruire un'applicazione crud basata su typescript con un backend nosql metodi per progettare un backend scalabile integrato con un front end typescript come sfruttare l'admin app di back4app per gestire i tuoi dati senza sforzo strategie per il deployment, inclusa la containerizzazione con docker, per lanciare la tua app typescript senza problemi prerequisiti prima di iniziare, assicurati di avere un account back4app con un progetto configurato hai bisogno di aiuto? visita iniziare con back4app https //www back4app com/docs/get started/new parse app un ambiente di sviluppo typescript usa un editor come visual studio code e assicurati di avere node js installato conoscenze di base di typescript, programmazione orientata agli oggetti e api restful se necessario, fai riferimento alla documentazione di typescript https //www typescriptlang org/docs/ passo 1 – inizializzazione del progetto impostare un nuovo progetto back4app accedi al tuo account back4app clicca sul pulsante “nuova app” nella tua dashboard inserisci il nome del progetto basic crud app typescript e segui i passaggi per completare la creazione del progetto crea nuovo progetto dopo che il progetto è stato creato, apparirà sulla tua dashboard, fungendo da base per il tuo backend passo 2 – creazione dello schema dei dati definire le tue strutture dati per questa applicazione, creerai un paio di collezioni (classi) su back4app di seguito sono riportati esempi di classi essenziali con campi che facilitano le operazioni crud 1\ collezione articoli campo tipo di dato descrizione id objectid identificatore unico generato automaticamente titolo stringa nome o titolo dell'elemento descrizione stringa una breve descrizione dell'oggetto creatoil data timestamp quando l'elemento è stato creato aggiornatoa data timestamp per l'ultimo aggiornamento 2\ raccolta utenti campo tipo di dato descrizione id objectid identificatore unico generato automaticamente nome utente stringa nome unico per l'utente email stringa indirizzo email unico hashpassword stringa password crittografata in modo sicuro per il login creatoil data timestamp di creazione dell'account aggiornatoil data timestamp per l'ultimo aggiornamento dell'account puoi creare queste collezioni e campi manualmente nel dashboard di back4app crea nuova classe quando si aggiungono campi, scegliere il tipo di dato, dare un nome al campo, impostare un valore predefinito se necessario e indicare se è obbligatorio crea colonna utilizzare l'agente ai di back4app per la configurazione dello schema l'agente ai integrato in back4app può generare automaticamente il tuo schema di dati da una descrizione questo semplifica la configurazione e garantisce che il tuo modello sia pronto per le operazioni crud come utilizzare l'agente ai apri l'agente ai accedi al tuo dashboard di back4app e individua l'agente ai nelle impostazioni del tuo progetto descrivi il tuo schema fornisci una descrizione dettagliata delle collezioni e dei campi di cui hai bisogno esamina e conferma l'agente ai proporrà uno schema esaminalo e conferma per applicare le modifiche 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 fa risparmiare tempo e garantisce uno schema ben strutturato passo 3 – utilizzare l'app admin per operazioni crud panoramica dell'app admin l'app admin di back4app fornisce un'interfaccia senza codice che rende semplice la gestione dei dati del tuo backend le sue funzionalità di trascinamento e rilascio ti consentono di eseguire operazioni crud—come aggiungere, leggere, aggiornare e eliminare record—senza problemi abilitare l'app admin vai al menu “altro” nel tuo dashboard di back4app scegli “app admin” e clicca su “abilita app admin ” configura le tue credenziali admin creando un account admin iniziale, che definirà anche ruoli come b4aadminuser e classi di sistema abilita app admin dopo l'attivazione, accedi all'app admin per gestire i tuoi dati dashboard app admin gestire le operazioni crud con l'app admin all'interno dell'app admin puoi inserisci record usa la funzione “aggiungi record” in qualsiasi collezione (ad es , articoli) per inserire nuovi dati rivedi e modifica clicca su un record per visualizzare i dettagli o modificare i campi elimina record rimuovi le voci che non sono più necessarie questa interfaccia intuitiva migliora la gestione dei dati semplificando le attività di routine passo 4 – collegare la tua app typescript a back4app con il tuo backend pronto, il passo successivo è collegare la tua applicazione typescript a back4app opzione a utilizzare il parse javascript sdk installa il parse javascript sdk utilizzando npm, esegui npm install parse inizializza parse nella tua applicazione typescript crea un file di configurazione (ad es , parseconfig ts ) // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 3\ implement crud functions in typescript for example, create a service for managing items ```typescript // itemsservice ts import parse from 'parse'; export async function fetchitems() promise\<parse object\[]> { const query = new parse query('items'); try { return await query find(); } catch (error) { console error('error fetching items ', error); return \[]; } } export async function additem(title string, description string) promise\<void> { const item = new parse object('items'); item set('title', title); item set('description', description); try { await item save(); console log('item added successfully '); } catch (error) { console error('error adding item ', error); } } export async function updateitem(objectid string, newtitle string, newdescription string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); item set('title', newtitle); item set('description', newdescription); await item save(); console log('item updated successfully '); } catch (error) { console error('error updating item ', error); } } export async function removeitem(objectid string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); await item destroy(); console log('item removed successfully '); } catch (error) { console error('error removing item ', error); } } opzione b utilizzare rest o graphql se preferisci non utilizzare il parse sdk, puoi eseguire operazioni crud tramite rest ad esempio, per recuperare elementi utilizzando rest import fetch from 'node fetch'; export async function getitemsviarest() { try { 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(); console log('data retrieved ', data); } catch (error) { console error('error retrieving items ', error); } } integra queste chiamate api secondo necessità all'interno dei tuoi moduli typescript passo 5 – garantire la sicurezza del backend impostazione delle liste di controllo degli accessi (acl) proteggi i tuoi dati applicando le acl ai tuoi oggetti ad esempio, per creare un elemento a cui può accedere solo il suo proprietario import parse from 'parse'; export async function createsecureitem(title string, description string, owner parse user) { const item = new parse object('items'); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log('secure item created successfully '); } catch (error) { console error('error creating secure item ', error); } } gestione dei permessi a livello di classe (clp) regola i clp tramite il dashboard di back4app per imporre restrizioni di accesso in modo che solo gli utenti autenticati possano interagire con determinate collezioni passo 6 – implementazione dell'autenticazione utente gestione degli account utente back4app sfrutta la classe utente integrata di parse per gestire l'autenticazione nella tua applicazione typescript, implementa la registrazione e il login degli utenti come segue import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } questo approccio può essere esteso per la gestione delle sessioni, il ripristino delle password e altre funzionalità di autenticazione passo 7 – distribuzione della tua applicazione typescript back4app semplifica il processo di distribuzione puoi distribuire la tua applicazione typescript utilizzando metodi come la containerizzazione docker 7 1 costruire la tua app typescript compila e bundla usa il tuo strumento di build (come webpack o tsc) per compilare e bundlare la tua applicazione ad esempio, per compilare con tsc tsc conferma l'output assicurati che i file generati includano tutte le risorse e i moduli necessari 7 2 organizzare la struttura del tuo progetto un tipico progetto typescript potrebbe apparire così basic crud app typescript/ \| src/ \| | index ts \| | parseconfig ts \| | services/ \| | itemsservice ts \| | authservice ts \| package json \| tsconfig json \| readme md esempio parseconfig ts // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 7 3 dockerizzare la tua applicazione typescript se scegli la containerizzazione, aggiungi un dockerfile alla radice del tuo progetto \# use an official node js runtime as a parent image from node 18 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# bundle app source code copy \# build the typescript app run npm run build \# expose port (adjust as needed) expose 3000 \# start the app cmd \[ "node", "dist/index js" ] 7 4 distribuzione tramite back4app web deployment collega il tuo repository github assicurati che il tuo progetto typescript sia ospitato su github imposta le impostazioni di distribuzione nel dashboard di back4app, usa l'opzione web deployment per collegare il tuo repository (ad esempio, basic crud app typescript ) e seleziona il ramo appropriato definisci i comandi di build e output specifica il comando di build (come npm run build ) e indica la directory di output distribuisci la tua applicazione clicca su distribuisci e segui i log fino a quando la tua applicazione è attiva passo 8 – considerazioni finali e miglioramenti futuri congratulazioni! hai creato con successo un'applicazione crud basata su typescript integrata con back4app hai impostato un progetto chiamato basic crud app typescript , progettato collezioni per articoli e utenti, e gestito i tuoi dati utilizzando l'app di amministrazione di back4app inoltre, hai collegato la tua app typescript tramite il parse javascript sdk (o rest/graphql) e implementato misure di sicurezza robuste cosa c'è dopo? espandi la tua applicazione integra funzionalità aggiuntive come filtri avanzati, visualizzazioni dettagliate degli articoli o aggiornamenti dei dati in tempo reale migliora le capacità del backend esplora funzioni cloud, integra api di terze parti o implementa permessi basati sui ruoli ulteriore apprendimento visita la documentazione di back4app https //www back4app com/docs e dai un'occhiata a guide aggiuntive per ottimizzare la tua applicazione buon coding e divertiti a costruire la tua applicazione crud in typescript!