Quickstarters
Come costruire un backend per Javascript?

52min
Introduzione
In questo tutorial, imparerai come costruire un backend completo per un'applicazione Vanilla JavaScript utilizzando Back4app.
Esploreremo l'integrazione delle funzionalità essenziali di Back4app – come la gestione del database, le Funzioni Cloud Code, le API REST e GraphQL, l'autenticazione degli utenti e le query in tempo reale (Live Queries) – per creare un backend sicuro, scalabile e robusto che comunica senza problemi con il tuo front-end scritto in JavaScript puro.
Vedrai anche come la rapida configurazione e l'ambiente intuitivo di Back4app possano ridurre drasticamente il tempo e lo sforzo rispetto alla configurazione manuale di server e database.
Durante il percorso, acquisirai esperienza pratica con funzionalità chiave, inclusi avanzati strumenti di sicurezza, pianificazione di attività con Cloud Jobs e configurazione di webhook per integrazioni esterne.
Alla fine di questo tutorial, sarai ben preparato per migliorare questa configurazione di base in un'applicazione pronta per la produzione, o per incorporare facilmente logica personalizzata e API di terze parti secondo necessità.
Requisiti
Per completare questo tutorial, avrai bisogno di:
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 JavaScript Vanilla di base
Puoi configurarlo semplicemente creando un index.html file e facendo riferimento a script esterni. Assicurati di avere un browser web moderno o un ambiente che possa eseguire JavaScript.
Node.js (versione 14 o superiore) (opzionale)
Avrai bisogno di Node.js se intendi installare il Parse JavaScript SDK localmente o gestire il deployment del codice tramite la riga di comando. Installare Node.js﻿
Familiarità con i fondamenti di JavaScript
MDN Web Docs su JavaScript.
Ripassa i concetti di base di JavaScript se sei nuovo nel linguaggio.
Assicurati di avere tutti questi requisiti in ordine prima di iniziare. Avere il tuo progetto Back4app configurato e un ambiente JavaScript di base pronto ti aiuterà a seguire più facilmente.
Passo 1 – Configurare il Progetto Back4app
Crea un Nuovo Progetto
Il primo passo per costruire il tuo backend in Vanilla JavaScript su Back4app è creare un nuovo progetto. Se non ne hai già creato uno, 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, “VanillaJS-Backend-Tutorial”).
﻿
Una volta creato il progetto, lo vedrai elencato nel tuo dashboard di Back4app. Questo progetto sarà la base per tutte le configurazioni del backend discusse in questo tutorial.
Collegare il Parse SDK
Back4app si basa sulla Parse Platform per gestire i tuoi dati, fornire funzionalità in tempo reale, gestire l'autenticazione degli utenti e altro ancora. Collegare la tua applicazione Vanilla JavaScript a Back4app può essere fatto includendo il Parse SDK nel tuo HTML o installandolo con npm se stai eseguendo un processo di build.
Recupera le tue chiavi Parse:
Nel tuo dashboard di Back4app, vai alla sezione “Impostazioni App” o “Sicurezza e Chiavi” della tua app per trovare il tuo ID Applicazione e Chiave JavaScript. Troverai anche l'URL del Server Parse (spesso nel formato https://parseapi.back4app.com).
﻿
Opzione 1: Aggiungi Parse tramite un Tag Script
Aggiungi questo script al tuo index.html (sostituisci VERSION con una versione valida dal repository Parse JS SDK):
HTML
<script src="https://cdn.jsdelivr.net/npm/parse@VERSION/dist/parse.min.js"></script>
<script>
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
  Parse.serverURL = "https://parseapi.back4app.com";
</script>
<script src="https://cdn.jsdelivr.net/npm/parse@VERSION/dist/parse.min.js"></script>
<script>
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");
  Parse.serverURL = "https://parseapi.back4app.com";
</script>
﻿
Opzione 2: Usa NPM (se hai un processo di build)
Bash
npm install parse
npm install parse
﻿
Quindi nel tuo file JavaScript principale (ad esempio, main.js):
JS
import Parse from 'parse/dist/parse.min.js';

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

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
﻿
Completando questo passaggio, hai stabilito una connessione sicura tra il tuo front-end JavaScript Vanilla e il backend di Back4app. Tutte le richieste e le transazioni di dati vengono instradate in modo sicuro attraverso questo SDK, riducendo la complessità delle chiamate REST o GraphQL manuali (anche se puoi comunque usarle quando necessario).
Passo 2 – Configurazione del Database
Salvataggio e Query dei Dati
Con il tuo progetto Back4app configurato e l'SDK Parse integrato nel tuo codice JavaScript, puoi ora iniziare a salvare e recuperare dati. Il modo più semplice per creare un record è utilizzare la Parse.Object classe:
JS
// Example: Create a Todo item

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);
  }
}

// Example: Query all Todo items
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);
  }
}
// Example: Create a Todo item

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);
  }
}

// Example: Query all Todo items
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);
  }
}
﻿
In alternativa, puoi utilizzare gli endpoint API REST di Back4app:
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
﻿
Back4app fornisce anche un'interfaccia GraphQL:
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
    }
  }
}
﻿
Queste opzioni diverse ti permettono di integrare le operazioni sui dati nel modo che meglio si adatta al tuo processo di sviluppo – sia attraverso il Parse SDK, REST o GraphQL.
Progettazione dello Schema e Tipi di Dati
Per impostazione predefinita, Parse consente la creazione di schemi al volo, ma puoi anche definire le tue classi e i tipi di dati nel dashboard di Back4app per avere maggiore controllo.
Naviga nella sezione “Database” nel tuo dashboard di Back4app.
Crea una nuova classe (ad esempio, “Todo”) e aggiungi colonne pertinenti, come titolo (String) e isCompleted (Boolean).
Crea Nuova Classe
﻿
Back4app supporta anche vari tipi di dati: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, e  Polygon. Puoi scegliere il tipo appropriato per ciascun campo. Se preferisci, puoi anche lasciare che Parse crei automaticamente queste colonne quando salvi per la prima volta un oggetto dal tuo codice JavaScript.
Crea Colonna
﻿
Back4app offre un Agente AI che può aiutarti a progettare il tuo modello di dati:
Apri l'Agente AI dal tuo App Dashboard o dal menu.
Descrivi il tuo modello di dati in linguaggio semplice (ad esempio, “Per favore, crea una nuova App ToDo su back4app con uno schema di classe completo.”).
Lascia che l'Agente AI crei lo Schema per te. 
﻿
Utilizzare l'agente AI può farti risparmiare tempo nella configurazione della tua architettura dati e garantire coerenza nella tua applicazione.
Dati Relazionali
Se hai dati relazionali – ad esempio, un Categoria oggetto che punta a più Todo elementi – puoi utilizzare Puntatori o Relazioni in Parse. Ad esempio, aggiungere un puntatore a una Categoria:
JS
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');
  
  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
// Linking a Task to a Category with a pointer
async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');
  
  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
﻿
Quando interroghi, puoi anche includere i dati dei puntatori:
JS
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
﻿
Questa include('category') chiamata recupera i dettagli della categoria insieme a ciascun Todo, rendendo i tuoi dati relazionali facilmente accessibili.
Query Live
Per aggiornamenti in tempo reale, Back4app fornisce Query Live. Nella tua app Vanilla JavaScript, puoi iscriverti ai cambiamenti in una classe specifica:
Abilita le Query Live nel tuo dashboard di Back4app sotto le Impostazioni del Server. Assicurati che “Query Live” sia attivato.
Inizializza una Sottoscrizione a Query Live nel tuo codice:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse/dist/parse.min.js';

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

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

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

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

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

export default Parse;
﻿
JS
import Parse from './parseConfig.js';

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

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
import Parse from './parseConfig.js';

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

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Iscrivendoti, ricevi notifiche in tempo reale ogni volta che un nuovo Todo viene creato, aggiornato o eliminato. Questa funzionalità è particolarmente preziosa per app collaborative o dinamiche in cui più utenti devono vedere i dati più recenti senza aggiornare la pagina.
Passo 3 – Applicare la Sicurezza con ACL e CLP
Meccanismo di Sicurezza di Back4app
Back4app prende sul serio la sicurezza fornendo Liste di Controllo degli Accessi (ACL) e Permessi a Livello di Classe (CLP). Queste funzionalità ti consentono di limitare chi può leggere o scrivere dati su base per oggetto o per classe, garantendo che solo gli utenti autorizzati possano modificare i tuoi dati.
﻿
Liste di Controllo degli Accessi (ACL)
Un ACL è applicato a singoli oggetti per determinare quali utenti, ruoli o il pubblico possono eseguire operazioni di lettura/scrittura. Ad esempio:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  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);

  // Create an ACL granting read/write access only to the owner
  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);
  }
}
﻿
Quando salvi l'oggetto, ha un ACL che impedisce a chiunque tranne l'utente specificato di leggerlo o modificarlo.
Modifica ACL
﻿
Permessi a Livello di Classe (CLP)
CLP governano i permessi predefiniti di un'intera classe, come se la classe sia leggibile o scrivibile pubblicamente, o se solo determinati ruoli possano accedervi.
Vai al tuo Dashboard di Back4app, seleziona la tua app e apri la Database sezione.
Seleziona una classe (ad esempio, “Todo”).
Apri le Permessi a Livello di Classe tab.
Configura i tuoi predefiniti, come “Richiede Autenticazione” per leggere o scrivere, o “Nessun Accesso” per il pubblico.
﻿
Questi permessi impostano la base, mentre gli ACL affinano i permessi per oggetti individuali. Un modello di sicurezza robusto combina tipicamente sia i CLP (restrizioni ampie) che gli ACL (restrizioni dettagliate per oggetto). Per ulteriori informazioni vai a Linee Guida sulla Sicurezza dell'App.﻿
Passo 4 – Scrivere e Distribuire Funzioni Cloud
Il Cloud Code è una funzionalità dell'ambiente Parse Server che consente di eseguire codice JavaScript personalizzato sul lato server, senza la necessità di gestire i propri server o infrastruttura. Scrivendo Cloud Code, puoi estendere il tuo backend di Back4app con logica aziendale aggiuntiva, validazioni, trigger e integrazioni che vengono eseguiti in modo sicuro ed efficiente sul Parse Server.
Come Funziona
Quando scrivi Cloud Code, di solito posizioni le tue funzioni JavaScript, trigger e eventuali moduli NPM richiesti in un main.js (o app.js) file. Questo file viene quindi distribuito al tuo progetto Back4app, che viene eseguito all'interno dell'ambiente Parse Server. Poiché queste funzioni e trigger vengono eseguiti sul server, puoi fidarti di loro per gestire logiche riservate, elaborare dati sensibili o effettuare chiamate API solo backend – processi che potresti non voler esporre direttamente al client.
Tutto il Cloud Code per la tua app Back4app viene eseguito all'interno del Parse Server gestito da Back4app, quindi non devi preoccuparti della manutenzione del server, della scalabilità o della fornitura. Ogni volta che aggiorni e distribuisci il tuo file main.js, il Parse Server in esecuzione viene aggiornato con il tuo codice più recente.
Struttura del File main.js
Un tipico main.js potrebbe contenere:
Richiedere dichiarazioni per eventuali moduli necessari (pacchetti NPM, moduli Node integrati o altri file di codice cloud).
Definizioni delle funzioni cloud utilizzando Parse.Cloud.define().
Trigger come Parse.Cloud.beforeSave(), Parse.Cloud.afterSave(), ecc.
Moduli NPM che hai installato (se necessario). Ad esempio, potresti installare un pacchetto come axios per effettuare richieste HTTP. Puoi quindi richiederlo (o importarlo) all'inizio del tuo file.
JS
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
﻿
Con la possibilità di installare e utilizzare moduli NPM, il codice cloud diventa incredibilmente flessibile, consentendoti di integrarti con API esterne, eseguire trasformazioni dei dati o eseguire logiche complesse lato server.
Casi d'uso tipici
Logica Aziendale: Ad esempio, puoi calcolare il punteggio di un utente in un gioco aggregando più proprietà degli oggetti e poi memorizzare automaticamente quei dati.
Validazioni dei Dati: Assicurati che determinati campi siano presenti o che un utente abbia le autorizzazioni corrette prima di salvare o eliminare un record.
Trigger: Esegui azioni quando i dati cambiano (ad es., invia una notifica quando un utente aggiorna il proprio profilo).
Integrazioni: Connettiti con API o servizi di terze parti. Ad esempio, potresti integrare gateway di pagamento, notifiche Slack o piattaforme di email marketing direttamente dal Cloud Code.
Applicazione della Sicurezza: Aggiungi un ulteriore livello di sicurezza convalidando e sanitizzando i parametri di input nelle tue funzioni Cloud Code. Ad esempio, puoi assicurarti che i dati in arrivo corrispondano a formati specifici, rifiutare input non validi o dannosi e applicare regole di accesso basate sui ruoli o sulle autorizzazioni degli utenti prima di eseguire operazioni sensibili.
Distribuisci la tua funzione
Di seguito è riportata una semplice funzione Cloud Code che calcola la lunghezza di una stringa di testo inviata dal client:
main.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 tramite il Back4app CLI:
1 - Installa il CLI:
Per Linux/MacOS:
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Per Windows:
Scarica il b4a.exe file dalla pagina delle versioni.
2 - Configura la tua chiave account:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - Distribuisci il tuo codice cloud:
Bash
b4a deploy
b4a deploy
﻿
Distribuzione tramite il Dashboard:
Nel dashboard della tua app, vai a Cloud Code > Funzioni.
Copia/incolla la funzione nell' main.js editor.
Clicca su Distribuisci.
﻿
Chiamare la tua funzione
Da Vanilla JavaScript utilizzando il Parse SDK (supponendo che tu abbia configurato Parse come sopra):
JS
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);
  }
}
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);
  }
}
﻿
Puoi anche chiamarlo 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 '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
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 '{"text": "Hello Back4app"}' \
  https://parseapi.back4app.com/functions/calculateTextLength
﻿
O tramite GraphQL:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Questa flessibilità ti consente di integrare la tua logica personalizzata nel tuo frontend Vanilla JavaScript o in qualsiasi altro client che supporti REST o GraphQL.
Passo 5 – Configurazione dell'autenticazione utente
Autenticazione utente in Back4app
Back4app sfrutta la classe Parse User come base per l'autenticazione. Per impostazione predefinita, Parse gestisce l'hashing delle password, i token di sessione e lo storage sicuro. Questo significa che non devi configurare manualmente flussi di sicurezza complessi.
Impostazione dell'autenticazione utente
In un'installazione Vanilla JavaScript, puoi creare un nuovo utente con:
JS
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);
  }
}
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);
  }
}
﻿
Accedi a un utente esistente:
JS
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);
  }
}
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);
  }
}
﻿
Via REST, un login potrebbe apparire così:
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=secret123' \
  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=secret123' \
  https://parseapi.back4app.com/login
﻿
Gestione delle sessioni
Dopo un login riuscito, Parse crea un token di sessione che viene memorizzato nell'oggetto utente. Puoi accedere all'utente attualmente connesso:
JS
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
﻿
Parse gestisce automaticamente le sessioni basate su token in background, ma puoi anche gestirle o revocarle manualmente. Questo è utile quando hai bisogno di disconnetterti:
JS
await Parse.User.logOut();
await Parse.User.logOut();
﻿
Integrazione del Login Sociale
Back4app e Parse possono integrarsi con i provider OAuth più popolari, come Google o Facebook, installando pacchetti aggiuntivi o utilizzando adattatori esistenti. Ad esempio, puoi configurare un login Facebook impostando il tuo Facebook App ID e utilizzando Parse.FacebookUtils.logIn(). Le istruzioni dettagliate variano, quindi fai riferimento alla Documentazione del Login Sociale.﻿
JS
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
const facebookLogin = async () => {
  try {
    const user = await Parse.FacebookUtils.logIn('email');
    console.log(user.existed() ? 'User logged in' : 'User signed up and logged in');
  } catch (error) {
    console.error('Error logging in with Facebook:', error);
  }
};
﻿
Verifica Email e Reimpostazione Password
Per abilitare la verifica email e la reimpostazione della password:
Naviga nelle Impostazioni Email nel tuo dashboard di Back4app.
Abilita la verifica email per garantire che i nuovi utenti verifichino la proprietà dei loro indirizzi email.
Configura l'indirizzo del mittente, i modelli email e il tuo dominio personalizzato se desiderato.
Queste funzionalità migliorano la sicurezza dell'account e l'esperienza dell'utente validando la proprietà delle email da parte degli utenti e fornendo un metodo sicuro di recupero della password.
Passo 6 – Gestione dello Storage dei File
Caricamento e Recupero dei File
Parse include la classe Parse.File per gestire i caricamenti di file, che Back4app memorizza in modo sicuro:
JS
async function uploadImage(file) {
  // file might be obtained from an <input type="file" ... /> or any other source
  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) {
  // file might be obtained from an <input type="file" ... /> or any other source
  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);
  }
}
﻿
Per allegare il file a un oggetto nel database, puoi fare:
JS
async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
async function createPhotoObject(file) {
  const Photo = Parse.Object.extend('Photo');
  const photo = new Photo();
  const parseFile = new Parse.File(file.name, file);
  photo.set('imageFile', parseFile);

  return await photo.save();
}
﻿
Recuperare l'URL del file è semplice:
JS
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
﻿
Puoi visualizzare questo imageUrl nella tua pagina web impostandolo come il src di un <img> tag.
Sicurezza dei File
Parse Server fornisce configurazioni flessibili per gestire la sicurezza del caricamento dei file. Il seguente esempio mostra come puoi impostare i permessi per controllare chi può caricare file sul server:
{
"fileUpload": {
"enableForPublic": true,
"enableForAnonymousUser": true,
"enableForAuthenticatedUser": true
}
}
enableForPublic: Quando impostato su true, consente a chiunque, indipendentemente dallo stato di autenticazione, di caricare file.
enableForAnonymousUser: Controlla se gli utenti anonimi (non registrati) possono caricare file. Quando abilitato, gli utenti temporanei o ospiti possono caricare file.
enableForAuthenticatedUser: Specifica se solo gli utenti autenticati possono caricare file. Questo è ideale per garantire che solo gli utenti fidati abbiano accesso a questa funzionalità.
Passo 7 – Pianificazione dei Compiti con Cloud Jobs
Cloud Jobs
Lavori Cloud in Back4app ti permettono di pianificare ed eseguire attività di routine sul tuo backend – come la pulizia dei dati obsoleti o l'invio di un'email di riepilogo giornaliero. Un tipico Lavoro Cloud potrebbe apparire così:
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  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) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  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 il tuo Codice Cloud con il nuovo lavoro (tramite CLI o la dashboard).
Vai alla Dashboard di Back4app > Impostazioni App > Impostazioni Server > Lavori in Background.
Pianifica il lavoro per essere eseguito quotidianamente o a qualsiasi intervallo che soddisfi le tue esigenze.
Pianificazione di un Lavoro Cloud
﻿
I Lavori Cloud ti consentono di automatizzare la manutenzione in background o altri processi periodici – senza richiedere intervento manuale.
Passo 8 – Integrazione dei Webhook
Webhooks consentono alla tua app Back4app di inviare richieste HTTP a un servizio esterno ogni volta che si verificano determinati eventi. Questo è potente per l'integrazione con sistemi di terze parti come gateway di pagamento (ad es., Stripe), strumenti di email marketing o piattaforme di analisi.
Naviga nella configurazione dei Webhook nel tuo dashboard di Back4app > Altro > WebHooks e poi clicca su Aggiungi Webhook.
Imposta un endpoint (ad es., https://your-external-service.com/webhook-endpoint).
Configura i trigger per specificare quali eventi nelle tue classi Back4app o nelle funzioni Cloud Code attiveranno il webhook.
Aggiunta di un Webhook
﻿
Ad esempio, se vuoi notificare un canale Slack ogni volta che viene creato un nuovo Todo:
Crea un'app Slack che accetta webhook in entrata.
Copia l'URL del webhook di Slack.
Nel tuo dashboard di Back4app, imposta l'endpoint su quell'URL di Slack per l'evento “Nuovo record nella classe Todo.”
Puoi anche aggiungere intestazioni HTTP personalizzate o payload se necessario.
Puoi anche definire Webhook nel Cloud Code effettuando richieste HTTP personalizzate in trigger come beforeSave, afterSave:
BeforeSave WebHook
﻿
Passo 9 – Esplorare il Pannello di Amministrazione di Back4app
L' App di Amministrazione di Back4app è un'interfaccia di gestione basata sul web progettata per utenti non tecnici per eseguire operazioni CRUD e gestire attività di dati di routine senza scrivere alcun codice. Fornisce un' interfaccia centrata sul modello, facile da usare che semplifica l'amministrazione del database, la gestione dei dati personalizzati e le operazioni a livello aziendale.
Abilitare l'App di Amministrazione
Abilitalo andando su App Dashboard > Altro > App di Amministrazione e cliccando sul pulsante “Abilita App di Amministrazione”.
Abilita App di Amministrazione
﻿
Crea un Primo Utente Amministratore (nome utente/password), che genera automaticamente un nuovo ruolo (B4aAdminUser) e classi (B4aSetting, B4aMenuItem e B4aCustomField) nello schema della tua app.
﻿
Scegli un Sottodominio per accedere all'interfaccia di amministrazione e completa la configurazione.
﻿
Accedi utilizzando le credenziali di amministratore che hai creato per accedere al tuo nuovo dashboard dell'App Admin.
﻿
Una volta abilitata, l'App Admin di Back4app rende facile visualizzare, modificare o rimuovere record dal tuo database – senza richiedere l'uso diretto del Parse Dashboard o del codice backend. Con controlli di accesso configurabili, puoi condividere in modo sicuro questa interfaccia con membri del team o clienti che necessitano di un modo chiaro e intuitivo per gestire i dati.
Conclusione
Seguendo questo tutorial completo, hai:
Creato un backend sicuro per un'app Vanilla JavaScript su Back4app.
Configurato un database con schemi di classe, tipi di dati e relazioni.
Integrato query in tempo reale (Live Queries) per aggiornamenti immediati dei dati.
Applicate misure di sicurezza utilizzando ACL e CLP per proteggere e gestire l'accesso ai dati.
Implementato Cloud Code funzioni per eseguire logica aziendale personalizzata sul lato server.
Impostata l'autenticazione degli utenti con supporto per la verifica dell'email e il ripristino della password.
Gestiti caricamenti di file e recupero, con controlli di sicurezza dei file opzionali.
Pianificati Cloud Jobs per attività di background automatizzate.
Utilizzati Webhook per integrarsi con servizi esterni.
Esplorato il Pannello di Amministrazione di Back4app per la gestione dei dati.
Con un solido front-end Vanilla JavaScript e un robusto backend Back4app, sei ora ben attrezzato per sviluppare applicazioni ricche di funzionalità, scalabili e sicure. Continua a esplorare funzionalità più avanzate, integra la tua logica aziendale e sfrutta la potenza di Back4app per risparmiare innumerevoli ore nella gestione di server e database. Buon coding!
Prossimi Passi
Costruisci un'app JavaScript pronta per la produzione estendendo questo backend per gestire modelli di dati più complessi, strategie di caching e ottimizzazioni delle prestazioni.
Integra funzionalità avanzate come flussi di autenticazione specializzati, controllo degli accessi basato sui ruoli o API esterne (come i gateway di pagamento).
Controlla la documentazione ufficiale di Back4app per approfondimenti su sicurezza avanzata, ottimizzazione delle prestazioni e analisi dei log.
Esplora altri tutorial su applicazioni di chat in tempo reale, dashboard IoT o servizi basati sulla posizione. Puoi combinare le tecniche apprese qui con API di terze parti per creare applicazioni complesse e reali.
﻿
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un backend per Remix?
AVANTI IL PROSSIMO
Come costruire un backend per TypeScript?