Quickstarters
Come costruire un backend per Gatsby?

36min
Introduzione
In questo tutorial, imparerai come costruire un backend per Gatsby utilizzando Back4App. 
Ti mostreremo come integrare le funzionalità di Back4App—come la gestione del database, le Funzioni Cloud Code, REST API e capacità di query GraphQL, autenticazione degli utenti e query in tempo reale (Live Queries)—per creare un backend sicuro, scalabile e robusto che può essere accessibile dal tuo sito Gatsby.
Vedrai anche come la configurazione rapida di Back4App e l'ambiente intuitivo possono ridurre drasticamente il tempo e lo sforzo necessari per gestire i compiti di backend. 
Alla fine, saprai esattamente come costruire un backend per Gatsby che memorizza e recupera dati, gestisce l'autenticazione, integra funzioni cloud e altro ancora. 
Questo ti prepara a incorporare facilmente logica personalizzata, aggiungere API di terze parti o espandere il tuo modello di dati senza dover preoccuparti della manutenzione tradizionale del server.
Cosa Costruirai e Perché È Prezioso
Integrazione Completa del Backend: Creerai una struttura di backend scalabile per il tuo sito Gatsby, incorporando Parse SDK, che è perfetto per le esigenze di dati dinamici.
Risparmio di Tempo: Back4App fornisce strumenti come l'AI Agent, query in tempo reale e lavori cloud che accelerano la creazione del backend.
Competenze Estensibili: Dopo aver finito, sarai in grado di adattare questi concetti per funzionalità Gatsby più avanzate, come creare pagine al momento della costruzione o collegarsi a funzioni serverless per operazioni dinamiche.
Requisiti
Un account Back4App e un nuovo progetto Back4App
Iniziare con Back4app.
Se non hai un account, puoi crearne uno gratuitamente. Segui la guida sopra per preparare il tuo progetto.
Ambiente di sviluppo Gatsby di base
Puoi configurarlo installando il Gatsby CLI e eseguendo:
Node.js (versione 14 o superiore) installato
Installare Node.js﻿
Familiarità con JavaScript e i concetti di Gatsby
Documentazione ufficiale di Gatsby.
Leggi la documentazione o un tutorial per principianti se sei nuovo in Gatsby.
Assicurati di avere questi requisiti impostati. Questo garantisce un'esperienza fluida mentre crei un nuovo file per la configurazione o esegui query GraphQL nel tuo ambiente Gatsby.
Passo 1 – Impostare il progetto Back4App
Crea un nuovo progetto
Il primo passo in come costruire un backend per Gatsby su Back4App è creare un nuovo progetto. Se non lo hai già fatto:
Accedi al tuo account Back4App.
Clicca sul pulsante “Nuova App” nella tua dashboard.
Dai un nome alla tua app (ad esempio, “Gatsby-Backend-Tutorial”).
﻿
Dopo aver creato il progetto, apparirà nel tuo dashboard di Back4App. Useremo questo progetto come il nucleo del nostro backend.
Collegare il Parse SDK
Back4App utilizza la Parse Platform per gestire i tuoi dati, offrire funzionalità in tempo reale, gestire l'autenticazione degli utenti e altro ancora. Per Gatsby, puoi ancora npm install parse e poi integrarlo nei tuoi file sorgente:
Recupera le tue chiavi Parse:
Nel tuo dashboard di Back4App, trova il tuo Application ID e JavaScript Key, tipicamente sotto “Impostazioni App” o “Sicurezza e Chiavi.” Troverai anche il Parse Server URL (spesso qualcosa come https://parseapi.back4app.com).
﻿
Installa il Parse SDK nel tuo sito Gatsby:
Bash
npm install parse
npm install parse
﻿
Crea un parseConfig.js nella directory principale del tuo progetto Gatsby o all'interno di src/:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Ogni volta che importi Parse da parseConfig.js nei tuoi file Gatsby (ad esempio, in gatsby-node.js, gatsby-browser.js, o pagine/componenti), avrai un'istanza preconfigurata pronta per effettuare query al tuo backend di Back4App.
Passo 2 – Configurazione del Database
Creazione di un Modello di Dati
In Back4App, i dati sono gestiti come “classi” (simili a tabelle) con campi per i tuoi dati. Creiamo una classe “Todo” per dimostrazione. Mostreremo alcuni modi in cui puoi salvare e recuperare dati in Gatsby con Parse.
Naviga nella sezione “Database” nel tuo dashboard di Back4app.
Crea una nuova classe (ad esempio, “Todo”) e aggiungi colonne come titolo (String) e isCompleted (Boolean).
Crea Nuova Classe
﻿
Oppure puoi lasciare che Parse crei automaticamente colonne quando gli oggetti vengono salvati per la prima volta dal tuo codice.
Creare un Modello di Dati con l'Agente AI
Back4App fornisce un Agente AI per aiutarti a definire la tua struttura dati.
Apri l'Agente AI dal tuo Dashboard dell'App o dal menu.
Descrivi il tuo modello di dati (ad esempio, “Per favore crea un nuovo schema dell'app Todo con un titolo e uno stato di completamento.”).
Lascia che l'Agente AI generi lo schema per te.
﻿
Leggere e Scrivere Dati Utilizzando SDK
Un esempio di codice in Gatsby potrebbe apparire così (ad esempio, in una pagina basata su React o in gatsby-browser.js):
JS
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Lettura e Scrittura dei Dati Utilizzando l'API REST
In alternativa, puoi interagire con il database tramite l' API REST:
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
﻿
Lettura e Scrittura dei Dati Utilizzando l'API GraphQL
Back4App supporta anche un' API GraphQL, quindi puoi eseguire query o mutazioni come:
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
    }
  }
}
﻿
Questo è particolarmente conveniente se vuoi che il tuo sito Gatsby estragga dati tramite query GraphQL al momento della costruzione.
Lavorare con le Query Live
Gatsby è un generatore di siti statici, ma puoi comunque impostare connessioni dinamiche in tempo reale utilizzando Parse Live Queries. Questo può essere utile nel codice eseguito nel browser o nei tuoi stessi hook senza server.
Abilita le Query Live nel tuo dashboard di Back4app (sotto Impostazioni del server).
Aggiungi l'URL del server delle Query Live a parseConfig.js:
JS
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
﻿
Iscriviti a una classe per notifiche in tempo reale:
JS
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Questo invierà aggiornamenti di dati in tempo reale al front-end del tuo progetto Gatsby.
Passo 3 – Applicare la Sicurezza con ACL e CLP
Cosa sono ACL e CLP?
Le ACL (Liste di Controllo degli Accessi) ti permettono di definire permessi su singoli oggetti, mentre le CLP (Permessi a Livello di Classe) si applicano a intere classi nel tuo database di Back4App.
﻿
Impostare i Permessi a Livello di Classe
Vai a Database nel tuo Back4App Dashboard.
Seleziona la classe (ad es., Todo).
Clicca sulla Class-Level Permissions scheda.
Configura se la classe è leggibile pubblicamente, richiede autenticazione o è riservata a determinati ruoli.
Utilizzare le ACL nel codice
Nel tuo codice Gatsby, puoi definire le ACL per ogni nuovo oggetto:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
﻿
Passo 4 – Scrivere Funzioni Cloud Code
Perché Cloud Code?
Con Cloud Code, puoi aggiungere logica personalizzata lato server al tuo backend Back4App. Questo è ottimo per le regole aziendali, REST API trasformazioni, trigger o validazioni dei dati che potresti voler mantenere sicure e lontane dal lato client.
Esempio di Funzione Cloud
JS
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
Distribuzione del Cloud Code
Via Back4App CLI: Installa e configura il CLI, poi esegui b4a deploy.
Via Dashboard: Vai a Cloud Code > Functions nel tuo dashboard, incolla il tuo codice in main.js, e clicca Deploy.
﻿
Chiamare la tua funzione
Da Gatsby/Parse SDK:
JS
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
﻿
Passo 5 – Configurazione dell'autenticazione
Classe Utente Parse
Back4App utilizza la Parse.User classe per l'autenticazione. Per impostazione predefinita, gestisce l'hashing delle password, le sessioni e lo storage sicuro.
Registrazione e Accesso in Gatsby
JS
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
﻿
Dopo aver effettuato l'accesso, puoi chiamare Parse.User.current() per controllare se un utente è connesso.
Accesso Sociale
Puoi integrare Google, Facebook, Apple, e altri provider con configurazioni aggiuntive. Leggi di più nella Documentazione Accesso Sociale.﻿
Passo 6 – Gestione dello Storage dei File
Caricamento File
Usa Parse.File per caricare immagini o altri file. Ad esempio, in un componente Gatsby:
JS
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
﻿
Puoi quindi allegare questo file a un Oggetto Parse, memorizzarlo e successivamente recuperare l'URL del file per visualizzarlo nel tuo sito Gatsby.
Passo 7 – Verifica Email e Ripristino Password
Perché è importante
La verifica dell'email conferma l'indirizzo email dell'utente e i flussi di reset della password migliorano l'esperienza dell'utente. Entrambi sono facilmente configurabili in Back4App.
Naviga alle Impostazioni Email della tua app nel dashboard.
Abilita la verifica dell'email e imposta il modello di email per il reset della password.
Usa i metodi del Parse SDK (ad es., Parse.User.requestPasswordReset(email)) per attivare le email di reset.
Passo 8 – Pianificazione dei Compiti con Cloud Jobs
Panoramica dei Cloud Jobs
Usa Cloud Jobs per automatizzare compiti ricorrenti, come rimuovere dati obsoleti o inviare riepiloghi giornalieri. Ad esempio:
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);
  }
});
﻿
Poi pianificalo sotto Impostazioni App > Impostazioni Server > Lavori in Background.
Pianificazione di un lavoro nel cloud
﻿
Passo 9 – Integrazione dei Webhook
I webhook consentono alla tua app Back4App di inviare richieste HTTP a servizi esterni quando si verificano eventi specifici, come la creazione di un nuovo record.
Vai a il tuo dashboard di Back4App > Altro > WebHooks.
Aggiungi un nuovo Webhook, specificando l'URL dell'endpoint per un servizio esterno.
Seleziona cosa attiva il Webhook (ad esempio, afterSave sulla classe Todo).
Aggiunta di un Webhook
﻿
Puoi anche integrare con Slack o gateway di pagamento aggiungendo il corretto endpoint.
Passo 10 – Esplorare il pannello di amministrazione di Back4App
L' Admin App di Back4App è un'interfaccia centrata sul modello per la gestione dei dati. Puoi dare accesso sicuro agli utenti non tecnici per eseguire operazioni CRUD sulle tue classi.
Abilitare l'Admin App
Vai a App Dashboard > Altro > Admin App e clicca su “Abilita Admin App.”
Abilita Admin App
﻿
Poi crea un Utente Admin e scegli un sottodominio per l'interfaccia admin.
﻿
Ora puoi accedere alla tua Admin App per visualizzare e modificare i dati senza scrivere codice.
﻿
Conclusione
In questo tutorial, hai scoperto come costruire un backend per Gatsby utilizzando Back4App. Hai imparato a:
Configurare un database sicuro con classi, campi personalizzati e relazioni.
Utilizzare il Parse SDK, insieme a REST API e opzioni di query GraphQL per le transazioni di dati.
Impostare ACL e CLP per la sicurezza dei dati.
Scrivere e distribuire Cloud Code per estendere la logica aziendale e i trigger.
Gestire l'autenticazione degli utenti con registrazione, accesso, ripristino della password e verifica dell'email.
Gestire lo storage dei file per immagini e documenti.
Pianificare attività automatizzate con Cloud Jobs.
Integrare servizi esterni tramite Webhooks.
Sfruttare l'Admin App per una facile amministrazione dei dati.
Con queste competenze, il tuo sito Gatsby può sfruttare potenti funzionalità dinamiche pur continuando a beneficiare del rendering statico di Gatsby. Da qui, puoi:
Espandere il tuo modello di dati e aggiungere logica aziendale avanzata.
Integrare più API esterne per una piattaforma veramente completa.
Segui la documentazione ufficiale di Back4App per approfondimenti su sicurezza, prestazioni e analisi.
Sperimenta con le funzionalità di build-time di Gatsby—ad esempio, “creare pagine” da dati dinamici o impostare un “gatsby source” plugin per il tuo backend Back4App.
Ora hai una solida base per costruire app data-driven a prova di futuro con Gatsby e Back4App.
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un backend per Flutter?
AVANTI IL PROSSIMO
Come costruire un backend per jQuery?