Quickstarters
Come costruire un backend per Ionic?

35min
Introduzione
In questo tutorial, imparerai come costruire un backend completo per un'app Ionic utilizzando Back4App. 
Tratteremo la gestione del database, le Funzioni Cloud Code, le API REST e GraphQL, l'autenticazione degli utenti, la gestione dei file e altro ancora. 
Il nostro obiettivo è mostrarti come costruire un backend per Ionic che sia sicuro, scalabile e facile da mantenere.
Utilizzeremo l'ambiente intuitivo di Back4App per semplificare la configurazione del server, risparmiandoti dalla necessità di configurare manualmente server o database. 
Imparerai strumenti essenziali come la pianificazione di attività con Cloud Jobs, l'applicazione di regole di sicurezza avanzate e l'integrazione di webhook con altri servizi. 
Alla fine, sarai pronto per espandere questo backend fondamentale in un sistema pronto per la produzione per la tua app Ionic.
Requisiti
Un account Back4App e un nuovo progetto Back4App
Iniziare con Back4App.
Se non hai un account, creane uno gratuitamente e segui la guida sopra per impostare il tuo progetto.
Ambiente di sviluppo Ionic di base
Assicurati di avere il Ionic CLI installato e di poter creare e eseguire un'app Ionic.
Node.js (versione 14 o superiore) installato
Scarica Node.js per gestire le dipendenze e costruire il tuo progetto.
Familiarità con JavaScript/TypeScript e concetti Ionic
Documentazione ufficiale di Ionic.
Una buona comprensione delle strutture, dei componenti e dei lifecycle hooks di Ionic sarà utile.
Passo 1 – Creare un nuovo progetto su Back4App e connettersi
Accedi al tuo account Back4App.
Crea una nuova app utilizzando il pulsante “Nuova App” nel tuo dashboard di Back4App.
Dai un nome alla tua app (ad esempio, “Ionic-Backend-Tutorial”).
﻿
Questo progetto Back4App è la base per il tuo backend. A differenza dell'utilizzo di un SDK Parse lato client, questo tutorial dimostrerà come effettuare chiamate tramite REST e GraphQL dalla tua app Ionic.
Recuperare le tue credenziali
Nel dashboard di Back4App, vai a Impostazioni dell'app o Sicurezza e chiavi.
Annota il tuo ID applicazione, Chiave API REST, e Endpoint GraphQL. Avrai bisogno di questi per inviare richieste dalla tua app Ionic.
Passo 2 – Configurazione del Database
Avere un database ben strutturato è la spina dorsale di ogni app. Il dashboard di Back4App rende facile progettare modelli di dati e gestire le relazioni.
1. Creazione di un Modello di Dati
Vai alla sezione Database nel tuo dashboard di Back4App.
Crea una nuova classe (ad esempio, “Todo”) e aggiungi colonne (es. titolo come Stringa, isCompleted come Boolean).
Crea Nuova Classe
﻿
2. Creazione di un Modello di Dati Utilizzando l'Agente AI
Apri l' AI Agent dal tuo dashboard di Back4App.
Descrivi il tuo schema desiderato, come “Crea una classe Todo con campi per titolo (String) e isCompleted (Boolean).”
L'AI Agent genererà automaticamente lo schema.
﻿
3. Lettura e Scrittura dei Dati usando REST API
Dal tuo codice Ionic, puoi eseguire richieste HTTP. Ad esempio, per creare 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
﻿
Per recuperare tutti i Todo:
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
﻿
Puoi integrare queste chiamate utilizzando fetch, Axios, o qualsiasi libreria client HTTP all'interno dei file di servizio o componente della tua app Ionic.
4. Lettura e Scrittura dei Dati utilizzando l'API GraphQL
Allo stesso modo, puoi inviare mutazioni e query GraphQL dalla tua app Ionic. Ad esempio, per creare un nuovo Todo:
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
    }
  }
}
﻿
Esempio Le chiamate REST o GraphQL possono essere collocate in un file provider/servizio nella tua struttura Ionic, quindi chiamate dalle tue pagine.
5. Lavorare con le Query Live (Opzionale)
Le Query Live forniscono aggiornamenti in tempo reale ai dati della tua app, anche se richiedono il Parse SDK o un approccio di abbonamento specializzato. Se hai bisogno di dati in tempo reale, puoi abilitare Live Queries dalle impostazioni del server Back4App. Di solito utilizzeresti una connessione WebSocket per monitorare le modifiche nelle tue classi. Tuttavia, per le chiamate standard basate su HTTP, puoi interrogare periodicamente gli endpoint REST o GraphQL.
Passo 3 – Applicare la Sicurezza con ACL e CLP
Panoramica Breve
Le ACL (Liste di Controllo degli Accessi) ti consentono di impostare permessi di lettura/scrittura su singoli oggetti. Le CLP (Permessi a Livello di Classe) ti permettono di gestire accessi più ampi a livello di classe. Queste funzionalità sono cruciali per proteggere i dati privati e garantire che solo gli utenti autorizzati possano modificare le informazioni.
Impostazione dei Permessi a Livello di Classe
Nel tuo dashboard di Back4App, vai a Database > Permessi a Livello di Classe.
Configura i tuoi valori predefiniti per la classe (ad esempio, solo gli utenti autenticati possono creare nuovi Todo).
Configurazione delle ACL
Quando crei o aggiorni record, puoi passare ACL campi tramite 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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
﻿
Per ulteriori informazioni, consulta le Linee guida sulla sicurezza dell'app.
Passo 4 – Scrivere Funzioni di Cloud Code
Perché Cloud Code
Il Cloud Code ti consente di eseguire JavaScript lato server per attività come la validazione dei dati, i trigger o le integrazioni. Puoi creare endpoint personalizzati per centralizzare la logica, il che è particolarmente utile se desideri mantenere il codice al di fuori del client.
Esempio di Funzione e Trigger
Nel tuo main.js sul lato server (Back4App), potresti scrivere:
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Distribuisci questo tramite il Back4App CLI o nella sezione Cloud Code del dashboard.
Chiamare il Cloud Code da Ionic
Puoi inviare una richiesta POST:
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
﻿
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Distribuisci questo tramite il Back4App CLI o nella sezione Cloud Code del dashboard.
Riceverai una risposta JSON contenente eventuali dati restituiti o un messaggio di errore.
Moduli NPM
Puoi installare pacchetti come axios nel tuo ambiente Cloud Code per integrare servizi di terze parti. Includili in main.js:
JS
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
﻿
Distribuisci e chiamalo allo stesso modo in cui faresti con qualsiasi funzione Cloud Code.
Passo 5 – Configurazione dell'Autenticazione
Abilitare l'Autenticazione Utente
La registrazione e il login degli utenti possono essere effettuati con chiamate REST alla classe User . Ad esempio, per registrarsi:
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": "jon",
    "password": "somePassword",
    "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": "jon",
    "password": "somePassword",
    "email": "jon@example.com"
  }' \
  https://parseapi.back4app.com/users
﻿
Login
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  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" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
﻿
In caso di successo, riceverai un sessionToken. Conservalo in modo sicuro e includilo negli header delle richieste future per operazioni autenticate.
Accessi Sociali
Puoi configurare accessi sociali (come Google o Facebook) impostando il flusso OAuth tramite Back4App o utilizzando fornitori esterni. Fai riferimento alla Documentazione Accesso Sociale per passaggi dettagliati.
Passo 6 – Gestione dello Storage dei File
Impostazione dello Storage dei File
Back4App offre uno storage sicuro per i file. Puoi allegare file agli oggetti o memorizzarli in modo indipendente. Ad esempio:
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/image.png" \
  https://parseapi.back4app.com/files/myImage.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/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
La risposta includerà un URL del file che puoi memorizzare in una classe:
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
﻿
Considerazioni sulla Sicurezza
Puoi abilitare le regole di sicurezza dei file nelle Impostazioni del Server di Back4App per richiedere l'autenticazione o limitare i caricamenti dei file a ruoli specifici.
Passo 7 – Verifica Email e Ripristino Password
Perché la Verifica è Importante
La verifica dell'email garantisce la legittimità delle email degli utenti. Il ripristino della password fornisce un modo sicuro per recuperare le credenziali smarrite. Questo aiuta a mantenere la fiducia e una corretta gestione degli utenti nella tua app Ionic.
Configurazione del Dashboard di Back4App
Vai a Impostazioni App > Impostazioni Email.
Abilita Verifica Email.
Personalizza i modelli di email per la verifica e il ripristino della password.
Passo 8 – Pianificazione dei Compiti con i Cloud Jobs
Cosa Fanno i Cloud Jobs
I Cloud Jobs ti permettono di pianificare compiti ricorrenti come la pulizia dei dati o l'invio di email di riepilogo. Li scrivi nel tuo main.js:
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Dopo il deployment:
Vai a Impostazioni App > Impostazioni Server > Compiti in Background.
Pianifica cleanupOldTodos per essere eseguito quotidianamente.
Pianificazione di un Cloud Job
﻿
Passaggio 9 – Integrazione dei Webhook
I webhook ti permettono di inviare dati a servizi esterni quando si verificano determinati eventi nel tuo progetto Back4App. Se la tua app Ionic deve attivare un'azione in Stripe o Slack dopo aver creato un nuovo record, puoi utilizzare i webhook per automatizzare questo.
Vai a Altro > WebHooks nel tuo dashboard di Back4App.
Aggiungi un nuovo Webhook e imposta il suo endpoint (ad es., https://your-service.com/webhook-endpoint).
Scegli l' evento (ad es., “Dopo Salvataggio” nella classe Todo).
Aggiunta di un Webhook
﻿
Puoi anche avviare richieste in uscita dai trigger del Cloud Code in main.js utilizzando librerie HTTP standard.
Passaggio 10 – Esplorare il Pannello di Amministrazione di Back4App
Il Back4App Admin App è un'interfaccia più semplice per i soggetti non tecnici. Fornisce un modo facile per eseguire operazioni CRUD sulle tue classi senza dover accedere al principale Parse Dashboard.
Abilitare l'Admin App
Nel dashboard, vai su Altro > Admin App.
Clicca su Abilita Admin App e crea un utente admin.
Scegli un sottodominio per accedere alla tua interfaccia admin.
Abilita Admin App
﻿
﻿
Questo pannello ti aiuta a gestire i dati senza scrivere query, rendendolo ideale per clienti o membri del team che preferiscono un'interfaccia grafica.
Conclusione
Completando questa guida su come costruire un backend per Ionic, hai:
Creato un backend sicuro su Back4App con modelli di dati robusti e relazioni.
Integrato con API REST e GraphQL per leggere e scrivere dati dalla tua app Ionic.
Implementato la sicurezza con ACL e CLP.
Distribuito Cloud Code per logica personalizzata e trigger.
Configurato l'autenticazione degli utenti e lo storage dei file.
Impostato Cloud Jobs per pianificare attività.
Sfruttato i webhooks per integrazioni esterne.
Esplorato il Pannello di Amministrazione per semplificare l'amministrazione dei dati.
Con questa base, la tua app Ionic può evolversi in una piattaforma pronta per la produzione. Aggiungi più logica, collega API di terze parti o affina le regole di sicurezza per adattarle al tuo caso d'uso.
Prossimi Passi
Migliora la tua build di produzione implementando caching, accesso basato su ruoli e monitoraggio delle prestazioni.
Integra funzionalità avanzate come Live Queries in tempo reale o autenticazione a più fattori.
Consulta la documentazione ufficiale di Back4App per un'esplorazione approfondita di analisi, log e ottimizzazione delle prestazioni.
Esplora altri tutorial che dimostrano applicazioni di chat, integrazioni IoT o funzionalità basate sulla posizione combinate con i robusti servizi backend di Back4App.
﻿
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un backend per Symfony?
AVANTI IL PROSSIMO
Come creare un backend per Dart?