Quickstarters
Come costruire un backend per React Native?

39min
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 ad 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.
Se non hai un account, registrati gratuitamente. Poi, segui la guida per preparare il tuo progetto.
Ambiente di sviluppo di base per React Native
Puoi utilizzare il React Native CLI Quickstart o Expo CLI. Assicurati di avere Node.js installato.
Node.js (versione 14 o superiore) installato
Hai bisogno di Node.js per installare pacchetti npm e far funzionare server di sviluppo locali. Installare Node.js﻿
Familiarità con JavaScript e concetti di base di React Native
Documentazione ufficiale di React Native.
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 React Native locale 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 (String) e isCompleted (Boolean).
Crea Nuova Classe
﻿
Back4App supporta vari tipi di dati: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, e Polygon. 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):
Bash
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
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):
Bash
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
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:
JS
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);
  }
}
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:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
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:
JS
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);
  }
}
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 di solito 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.
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 lato server. Puoi chiamarlo dalla tua app React Native tramite REST:
JS
// 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.`;
});
// 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:
JS
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);
  }
}
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 sul 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):
Bash
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": "[email protected]"
     }' \
  https://parseapi.back4app.com/users
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):
Bash
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
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 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):
Bash
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
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:
Bash
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": "[email protected]"}' \
  https://parseapi.back4app.com/requestPasswordReset
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:
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);
  }
});
// 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 tue piattaforme iOS e Android senza intervento manuale.
Pianificazione di un Cloud Job
﻿
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.
Aggiunta di un 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.
Prima di Salvare WebHook
﻿
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 tuo 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.
Abilita l'App di Amministrazione
﻿
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 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 per sbloccare funzionalità aggiuntive.
﻿
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un backend per Xamarin?
AVANTI IL PROSSIMO
Come costruire un backend per Objective-C?