Come costruire un backend per React Native?

introduzione in questo tutorial, imparerai come costruire un backend per react native utilizzando back4app ci concentreremo sulla compatibilità multipiattaforma e illustreremo come puoi integrare le funzionalità essenziali di back4app per la gestione dei dati, l'autenticazione degli utenti e i dati in tempo reale sfruttando le api rest e graphql, puoi sviluppare il tuo progetto react native per funzionare su entrambe le piattaforme ios e android, garantendo un'esperienza fluida tra componenti nativi e applicazioni mobili implementare accessi utente sicuri, pianificare attività e utilizzare applicazioni in tempo reale renderà più facile il tuo percorso come sviluppatore full stack vedrai anche come l'ambiente di back4app può ridurre il tempo necessario per configurare servizi tra cui hosting, database e livelli di sicurezza alla fine, avrai una struttura backend robusta che supporta la tua app react native e apre la strada alla creazione di soluzioni mobili su larga scala dopo aver completato questa guida, sarai pronto per espandere la tua app con funzionalità avanzate, integrare servizi di terze parti o trasformare il tuo progetto in una piattaforma pronta per la produzione immergiamoci nello sviluppo moderno di app mobili con back4app e react native! requisiti per completare questo tutorial, avrai bisogno di un account back4app e un nuovo progetto back4app iniziare con back4app https //www back4app com/docs/get started/new parse app se non hai un account, registrati gratuitamente quindi, segui la guida per preparare il tuo progetto ambiente di sviluppo di base per react native puoi utilizzare il react native cli quickstart https //reactnative dev/docs/environment setup o expo cli https //docs expo dev/get started/installation/ assicurati di avere node js installato node js (versione 14 o superiore) installato hai bisogno di node js per installare pacchetti npm e eseguire server di sviluppo locali installare node js https //nodejs org/en/download/ familiarità con javascript e concetti di base di react native documentazione ufficiale di react native https //reactnative dev/ se sei nuovo nello sviluppo di react native, rivedi prima la documentazione o un tutorial per principianti assicurati di avere questi requisiti in atto prima di iniziare avere il tuo progetto back4app creato e il tuo ambiente locale di react native configurato garantirà un processo fluido passo 1 – creare un nuovo progetto su back4app e connettersi crea un nuovo progetto il primo passo per costruire backend mobili per la tua app react native è creare un nuovo progetto su back4app segui questi passaggi accedi al tuo account back4app clicca sul pulsante “nuova app” nel tuo dashboard di back4app dai un nome alla tua app (ad esempio, “reactnative backend tutorial”) una volta creato il progetto, apparirà nel tuo dashboard di back4app utilizzerai questo nuovo progetto per gestire i dati e configurare la sicurezza per la tua app react native ottenere le chiavi della tua applicazione a differenza delle app react basate sul web, lo sviluppo di react native richiede spesso richieste http dirette per il recupero e la manipolazione dei dati poiché ci stiamo concentrando su rest apis (o graphql apis ) invece del parse sdk, avrai comunque bisogno delle tue chiavi back4app per inviare richieste autenticate recupera le tue chiavi parse nel dashboard di back4app, apri le impostazioni dell'app o la sezione sicurezza e chiavi per trovare il tuo id dell'applicazione , chiave api rest , e endpoint graphql (di solito https //parseapi back4app com/graphql ) annota la tua chiave api rest la includerai nelle intestazioni fetch o axios di react native per autenticare ogni richiesta questo passaggio garantisce che le tue applicazioni mobili possano comunicare in modo sicuro con back4app passaggio 2 – configurazione del database back4app offre una vasta gamma di opzioni backend per le app react native, comprese robuste capacità di gestione dei dati puoi creare classi, aggiungere campi e definire relazioni tramite il dashboard che tu stia costruendo applicazioni in tempo reale o app crud più semplici, il dashboard di back4app ti aiuta a memorizzare e organizzare i dati facilmente creare un modello di dati naviga nella sezione “database” nel tuo dashboard di back4app crea una nuova classe (ad esempio, “todo”) e aggiungi colonne pertinenti come title (stringa) e iscompleted (booleano) back4app supporta vari tipi di dati stringa , numero , booleano , oggetto , data , file , puntatore , array , relazione , geopoint , e poligono puoi anche lasciare che parse crei automaticamente i campi quando invii nuovi dati creare un modello di dati con l'agente ai se preferisci, puoi utilizzare l'agente ai di back4app apri l'ai agent dal tuo app dashboard descrivi il tuo modello di dati in linguaggio semplice (ad esempio, “crea una classe todo con un titolo e campi iscompleted ”) lascia che l'ai agent crei lo schema per te questo può far risparmiare tempo durante le fasi iniziali del tuo progetto react native lettura e scrittura dei dati usando rest api per lo sviluppo tipico di react native, puoi utilizzare l'api nativa fetch o una libreria di terze parti come axios per gestire le rest api di seguito è riportato un esempio che utilizza curl, che puoi adattare per fetch post (crea un todo) curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo get (recupera todos) curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo nella tua app react native, puoi fare lo stesso con fetch async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } lettura e scrittura dei dati utilizzando l'api graphql se preferisci graphql, back4app fornisce un endpoint graphql di seguito è riportato un esempio di mutazione per creare un nuovo record mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } puoi eseguire query graphql utilizzando una libreria come apollo client o anche una semplice fetch chiamata async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { 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({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } lavorare con le query live (opzionale) per i dati in tempo reale, back4app ha le query live, anche se tipicamente richiede il parse sdk poiché ci stiamo concentrando sulle chiamate rest in questo tutorial, puoi abilitare le query live nelle impostazioni del server della tua app se prevedi di usarle in seguito i dati in tempo reale possono aiutarti a tenere gli utenti aggiornati istantaneamente in un'app react native per un approccio più semplice, potresti interrogare il server con i tuoi intervalli o fare affidamento su strumenti di terze parti passo 3 – applicare la sicurezza con acl e clp panoramica breve back4app protegge il tuo backend con acl (liste di controllo degli accessi) e clp (permessi a livello di classe) questi ti permettono di proteggere i dati sia a livello di oggetto che di classe sono vitali per implementare permessi utente sicuri nello sviluppo di app mobili di livello produzione passo dopo passo permessi a livello di classe (clp) vai alla sezione database della tua app, apri qualsiasi classe e passa a “sicurezza e permessi ” regola i permessi di lettura/scrittura per vari ruoli utente o accesso pubblico acl puoi applicare il controllo degli accessi per oggetto includendo i campi acl nelle tue richieste rest ad esempio per ulteriori dettagli, controlla le linee guida sulla sicurezza dell'app https //www back4app com/docs/security/parse security passo 4 – scrivere funzioni cloud code perché cloud code cloud code ti consente di eseguire script lato server su back4app per attività come validazioni, trigger e elaborazione di chiamate api esterne ti aiuta a controllare la logica che dovrebbe rimanere nascosta al client, fornendo una migliore sicurezza per il tuo progetto react native esempio di funzione di seguito è riportato un esempio che scriveresti nel tuo main js sul lato server puoi chiamarlo dalla tua app react native tramite rest // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); distribuzione back4app cli installa il cli, configura la tua chiave account e esegui b4a deploy dashboard puoi anche andare su cloud code > functions , incolla il tuo codice in main js , e clicca su deploy chiamare la tua funzione (via rest) usa le api rest direttamente dalla tua app react native async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } questa flessibilità ti rende uno sviluppatore full stack più efficiente, poiché puoi integrare la logica aziendale senza esporre dettagli sensibili al client passo 5 – configurazione dell'autenticazione abilita o configura l'autenticazione utente back4app utilizza la parse user classe per gestire l'autenticazione degli utenti anche se non stai utilizzando il parse sdk in react native, puoi registrarti, accedere o disconnetterti utilizzando richieste http dirette registrare un utente (rest) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users accedi (rest) curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secretpassword' \\ https //parseapi back4app com/login queste richieste restituiscono un token di sessione che puoi memorizzare nella tua app react native per gestire le sessioni utente questo assicura che ogni richiesta che fai possa essere autorizzata, creando esperienze mobili che rimangono sicure accesso sociale back4app supporta i login sociali (google, facebook, apple) attraverso flussi specializzati dovrai seguire il documenti di login sociale https //www back4app com/docs/platform/sign in with apple per configurare le app oauth e poi inviare i token appropriati a back4app passo 6 – gestione dello storage dei file impostazione dello storage dei file back4app può memorizzare file per la tua app react native puoi allegarli agli oggetti o caricarli direttamente poiché stiamo usando rest, qui di seguito c'è un esempio di caricamento di un file (codificato in base64) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary '@path to your file png' \\ https //parseapi back4app com/files/image png la risposta restituisce un url che puoi memorizzare nel tuo database dalla tua app react native, puoi farlo con fetch inviando il file come blob o dati di modulo considerazioni sulla sicurezza per prevenire caricamenti non autorizzati, configura le opzioni di fileupload nelle tue impostazioni del server parse ad esempio, potresti consentire i caricamenti solo da utenti autenticati questo garantisce che i servizi, incluso lo storage dei file, rimangano protetti passo 7 – verifica email e ripristino password panoramica confermare la proprietà dell'email è fondamentale per implementare flussi utente sicuri back4app offre strumenti integrati per la verifica dell'email e il ripristino delle password configurazione del dashboard di back4app apri le impostazioni della tua app abilita la verifica dell'email nelle impostazioni email personalizza i modelli per il ripristino della password e i messaggi di verifica codice/implementazione un utente che dimentica la propria password può attivare una richiesta di ripristino curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset back4app invia un'email di reimpostazione della password all'utente questa comodità ti evita di dover configurare server di posta separati nella tua app react native passo 8 – pianificazione dei compiti con cloud jobs cosa fanno i cloud jobs i cloud jobs ti aiutano ad automatizzare compiti ricorrenti come la pulizia dei dati o l'invio di report giornalieri di seguito è riportato un esempio di lavoro in main js // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); distribuisci questo codice, poi vai su impostazioni del server > lavori in background per programmarlo questo mantiene i tuoi dati aggiornati sulle piattaforme ios e android senza intervento manuale passo 9 – integrazione dei webhook definizione i webhook consentono al tuo backend di notificare servizi esterni ogni volta che si verifica un evento ad esempio, potresti notificare slack o un gateway di pagamento al momento della creazione di un nuovo todo configurazione vai a altro > webhooks nel tuo dashboard di back4app aggiungi un nuovo webhook che punta a un endpoint esterno desiderato imposta i trigger per definire quando le modifiche ai dati della tua app react native dovrebbero attivare il webhook puoi anche codificare webhook all'interno dei trigger del cloud code, consentendoti di inviare richieste http o integrarti con api di terze parti questo estende le capacità del tuo backend a un'ampia gamma di servizi esterni passo 10 – esplorare il pannello di amministrazione di back4app dove trovarlo il pannello di amministrazione di back4app è un'interfaccia user friendly per persone non tecniche per gestire i dati è particolarmente utile per i proprietari di prodotto, i rappresentanti dei clienti o il personale di supporto che necessitano di accesso diretto al modello di dati caratteristiche abilita l'app di amministrazione nel tuo dashboard app > altro > app di amministrazione crea un utente amministratore (nome utente/password) scegli un sottodominio per un accesso rapido e senza codice al database una volta effettuato l'accesso, i tuoi utenti o il tuo team possono visualizzare, modificare o eliminare record senza scrivere alcun codice questo approccio supporta una gestione dei dati e una collaborazione più rapida conclusione in questa guida, hai imparato come costruire un backend per le applicazioni react native utilizzando back4app questo includeva creare un backend sicuro e implementare la compatibilità cross platform per la tua app react native impostare la gestione dei dati con api rest e graphql configurare acl e clp per proteggere i dati sensibili scrivere cloud code per la logica lato server gestire l'autenticazione degli utenti e la verifica dell'email gestire lo storage dei file con upload diretti pianificare attività in background con cloud jobs utilizzare webhook per integrare servizi esterni esplorare il pannello di amministrazione di back4app per una facile amministrazione del database con questi strumenti e funzionalità, il tuo progetto react native può crescere in una soluzione full stack affidabile e scalabile ora sei attrezzato per gestire dati in tempo reale, sicurezza degli utenti e altri aspetti cruciali delle applicazioni mobili continua a esplorare la documentazione di back4app https //www back4app com/docs/ per affinare le tue competenze e creare esperienze mobili potenti su piattaforme ios e android prossimi passi rinforza la tua app react native con sicurezza avanzata e controllo degli accessi basato sui ruoli sperimenta con aggiornamenti in tempo reale utilizzando live queries per applicazioni in tempo reale (se necessario) integra api esterne e servizi inclusi gateway di pagamento o accessi social migliora le prestazioni attraverso caching o ottimizzazione delle funzioni cloud approfondisci in la documentazione ufficiale di back4app https //www back4app com/docs/ per sbloccare funzionalità aggiuntive