Quickstarters
Come costruire un backend per jQuery?

39min
Introduzione
In questo tutorial, imparerai come costruire un backend per jQuery utilizzando Back4app. 
Integreremo le funzionalità essenziali di Back4app—gestione del database, Cloud Code, API REST e GraphQL, autenticazione degli utenti e query in tempo reale—per creare un backend sicuro e scalabile. 
Questo backend comunicherà con il tuo frontend basato su jQuery tramite chiamate AJAX e altri metodi comuni di jQuery.
L'ambiente intuitivo di Back4app riduce il tempo necessario per configurare server o database. 
Seguendo alcuni semplici passaggi, acquisirai esperienza pratica con ACL, permessi a livello di classe, modellazione dei dati, caricamenti di file e altro ancora. 
Alla fine di questo tutorial, avrai una solida base per un'app completamente funzionale basata su jQuery collegata a un backend di Back4app. 
Sarai pronto ad aggiungere logica personalizzata, integrare API esterne e proteggere i tuoi dati con un controllo dettagliato.
Prerequisiti
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 jQuery di base
 Puoi scaricare jQuery dal sito ufficiale .
Node.js (versione 14 o superiore) installato (Opzionale)
Sebbene Node.js non sia strettamente necessario per jQuery in un browser, potresti averne bisogno per eseguire server di test locali o installare pacchetti npm se desideri effettuare test locali. Installare Node.js﻿
Familiarità con JavaScript e le basi di jQuery
 Documentazione ufficiale di jQuery.﻿
Assicurati di avere tutti questi prerequisiti in atto prima di iniziare, in modo da poter seguire senza problemi mentre costruisci il tuo front end basato su jQuery e lo colleghi a Back4app.
Passo 1 – Impostare il progetto Back4app
Crea un nuovo progetto
Per iniziare il tuo progetto backend jQuery, crea un nuovo progetto Back4app:
Accedi al tuo account Back4app.
Clicca sul pulsante “Nuova App” nel tuo dashboard di Back4app.
Dai un nome alla tua app (ad esempio, “jQuery-Backend-Tutorial”).
﻿
Quando il progetto è creato, lo vedrai nel tuo dashboard di Back4app. Questa sarà la base delle tue configurazioni backend per jQuery.
Collegare il Parse SDK
Back4app utilizza la Parse Platform per dati e funzionalità in tempo reale. Se desideri utilizzare direttamente il Parse SDK con jQuery, puoi caricarlo come script nel tuo HTML.
Recupera le tue chiavi Parse:
Nel dashboard di Back4app, apri le “Impostazioni App” o “Sicurezza e Chiavi” della tua app per trovare:
ID Applicazione
Chiave JavaScript
URL del Server Parse (di solito https://parseapi.back4app.com)
﻿
Includi il Parse SDK nel tuo file HTML:
HTML
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
﻿
In un jQuery ambiente, puoi caricare prima jQuery, poi Parse, e interagire con gli oggetti Parse nei tuoi script. Questa connessione assicura che tutte le chiamate ai dati al tuo backend di Back4app passino attraverso la Parse Platform.
Passo 2 – Configurazione del Database
Salvataggio e interrogazione dei dati
Dopo aver integrato il Parse SDK, puoi salvare e recuperare dati dal database Back4app. Ecco un semplice esempio di creazione e recupero di oggetti “Todo” utilizzando jQuery e Parse:
HTML
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
﻿
Puoi anche chiamare le API REST utilizzando cURL:
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  
﻿
Oppure usa 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  
    }  
  }  
}  
﻿
Progettazione dello schema e tipi di dati
Nel dashboard di Back4app:
Vai su “Database.”
Crea una nuova classe (ad esempio, “Todo”) e aggiungi colonne come titolo (String) e isCompleted (Boolean).
Crea Nuova Classe
﻿
Puoi anche lasciare che Parse crei automaticamente colonne la prima volta che salvi un oggetto.
Crea Colonna
﻿
Utilizzando l'Agente AI
Back4app ha un Agente AI per la modellazione dei dati:
Apri l'Agente AI nel dashboard o nel menu della tua app.
Descrivi il tuo modello di dati (ad esempio, “Crea un'app ToDo con uno schema di classe.”).
Lascia che l'Agente AI generi lo schema. 
﻿
Dati Relazionali
Se hai una Categoria classe collegata a molti Todo elementi, puoi usare Pointers o Relations:
HTML
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
﻿
Query Live
Per aggiornamenti in tempo reale nella tua app jQuery:
Abilita le Query Live nel tuo dashboard di Back4app sotto Impostazioni del Server.
Inizializza un abbonamento a una Query Live:
HTML
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  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;  
  }  
</script>  
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  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;  
  }  
</script>  
﻿
Questo abbonamento ti notifica in tempo reale ogni volta che un oggetto “Todo” viene creato, aggiornato o eliminato.
Passo 3 – Applicare la Sicurezza con ACL e CLP
Meccanismo di Sicurezza di Back4app
Le ACL (Liste di Controllo degli Accessi) e le CLP (Permessi a Livello di Classe) ti permettono di controllare chi può leggere e scrivere dati a livello di oggetto o di classe.
﻿
Liste di Controllo degli Accessi (ACL)
Un ACL è impostato su oggetti individuali per limitare l'accesso:
HTML
<script>  
  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);  
    }  
  }  
</script>  
<script>  
  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);  
    }  
  }  
</script>  
﻿
Modifica ACL
﻿
Permessi a Livello di Classe (CLP)
I CLP controllano i permessi predefiniti per un'intera classe:
Nel tuo Dashboard di Back4app, apri la sezione Database.
Seleziona la tua classe (ad esempio, “Todo”).
Vai alla scheda Permessi a Livello di Classe per configurare l'accesso pubblico, autenticato o basato su ruoli.
﻿
Combina le ACL per la sicurezza a livello di oggetto con i CLP per restrizioni più ampie. Per ulteriori informazioni, vedere Linee Guida sulla Sicurezza dell'App.
Passo 4 – Scrivere e Distribuire Funzioni Cloud
Il Codice Cloud esegue JavaScript personalizzato sul lato server, consentendoti di aggiungere logica aziendale, convalide dei dati o chiamate API esterne.
Come Funziona
Posiziona il tuo codice in main.js (o in un file simile), distribuiscilo su Back4app e lascia che il Parse Server gestisca l'esecuzione. Puoi anche utilizzare i moduli NPM per logiche più complesse.
JS
// main.js  
const axios = require('axios');  
  
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;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
// main.js  
const axios = require('axios');  
  
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;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
﻿
Distribuisci la tua Funzione
Attraverso il Back4app CLI:
Bash
b4a deploy  
b4a deploy  
﻿
Attraverso il Dashboard:
Nel dashboard della tua app, vai su Cloud Code > Funzioni.
Copia/incolla la funzione in main.js.
Clicca su Distribuisci.
﻿
Chiamare la tua Funzione
Da jQuery, puoi chiamare una Cloud Function in questo modo:
HTML
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
﻿
Passo 5 – Configurazione dell'autenticazione utente
Autenticazione utente in Back4app
Back4app utilizza la Parse.User classe per l'autenticazione. L'hashing delle password, i token di sessione e lo storage sicuro sono gestiti automaticamente.
Impostazione dell'autenticazione utente
HTML
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
﻿
Gestione delle sessioni
Puoi recuperare l'utente attuale:
Text
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
﻿
Disconnettersi:
Text
Parse.User.logOut();  
Parse.User.logOut();  
﻿
Integrazione del Login Sociale
Back4app supporta Google, Facebook, Apple e altri fornitori OAuth. Per ulteriori informazioni, vedere la Documentazione sul Login Sociale.
Passo 6 – Gestione dello Storage dei File
Caricamento e Recupero dei File
Usa Parse.File per gestire i caricamenti:
HTML
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
﻿
Puoi memorizzare il file in una classe assegnandolo a un campo:
Text
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
﻿
Recupero dell'URL del file:
Text
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
﻿
Sicurezza dei File
Puoi gestire chi può caricare file modificando le impostazioni di caricamento dei file in Parse Server:
JSON
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
﻿
Passo 7 – Pianificazione dei Compiti con Cloud Jobs
Cloud Jobs
Puoi eseguire compiti di routine, come eliminare dati obsoleti:
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);  
  }  
});  
﻿
Nel dashboard, vai a Impostazioni App > Impostazioni Server > Compiti in Background per pianificarlo.
Pianificazione di un Cloud Job
﻿
Passo 8 – Integrazione dei Webhook
Webhooks consentono alla tua app di inviare richieste HTTP a un servizio esterno ogni volta che si verificano determinati eventi:
Vai a More > WebHooks nel tuo dashboard di Back4app.
Aggiungi un nuovo Webhook con il tuo endpoint esterno.
Configura i trigger per eventi come “nuovo record nella classe Todo.”
Aggiunta di un Webhook
﻿
Potresti integrare Slack o un gateway di pagamento come Stripe inviando dati sugli eventi tramite webhook.
WebHook BeforeSave
﻿
Passo 9 – Esplorare il Pannello di Amministrazione di Back4app
L' App di Amministrazione di Back4app offre un'interfaccia web non tecnica per le operazioni CRUD.
Abilitare l'App di Amministrazione
Vai a App Dashboard > Altro > Admin App e clicca su “Abilita Admin App”:
Abilita Admin App
﻿
Crea un Primo Utente Amministratore, che crea automaticamente un nuovo ruolo (B4aAdminUser) e classi nel tuo schema:
﻿
Scegli un Sottodominio per accedere all'app admin:
﻿
Accedi utilizzando le tue nuove credenziali amministrative:
﻿
Una volta abilitata, questa App Admin ti consente di gestire i dati o concedere accesso ai membri del team senza codifica.
Conclusione
In questa guida, hai imparato come costruire un backend per jQuery con Back4app. Hai:
Creato un nuovo progetto Back4app come base per il tuo backend.
Impostato un database, inclusa la progettazione dello schema e le relazioni dei dati.
Utilizzato ACL e CLP per una sicurezza dettagliata.
Distribuito Cloud Code per logica personalizzata lato server.
Configurato l'autenticazione degli utenti, l'archiviazione dei file e gli aggiornamenti in tempo reale.
Pianificato lavori in background e integrato webhook per servizi esterni.
Esplorato il Pannello di Amministrazione di Back4app per una gestione dei dati più semplice.
Ora sei pronto per estendere questa configurazione di base jQuery + Back4app in una soluzione di produzione completa. Continua a integrare funzionalità avanzate come il login sociale o regole di sicurezza più dettagliate. Buon divertimento a costruire le tue applicazioni scalabili e basate sui dati!
Prossimi Passi
Preparati per la produzione: Aggiungi permessi avanzati basati sui ruoli, strategie di caching e ottimizzazione delle prestazioni.
Integra API di terze parti: Per pagamenti, messaggistica o analisi.
Esplora la documentazione di Back4app: Approfondisci la sicurezza avanzata, i log o le analisi.
Crea app del mondo reale: Usa la semplicità di jQuery combinata con i potenti servizi backend di Back4app.
﻿
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un backend per Gatsby?
AVANTI IL PROSSIMO
Come creare un backend per WatchOS?