Quickstarters
Come costruire un backend per Astro?

21min
Introduzione
In questa guida su come costruire un backend per astro, imparerai a creare un backend completo utilizzando Back4App per il tuo progetto Astro. 
Tratteremo l'integrazione delle importanti funzionalità di Back4App, inclusi la gestione del database, le funzioni cloud, l'autenticazione, l'archiviazione dei file, le query in tempo reale e altro ancora, dimostrando un approccio pratico per costruire applicazioni veloci con strumenti moderni.
Sfruttando l'ambiente di Back4App, salti gran parte del lavoro pesante, come la configurazione dei server o la scrittura di strati di sicurezza da zero. 
Questa configurazione ti fa risparmiare tempo e sforzi, permettendoti comunque di definire un endpoint per una logica robusta lato server. 
Vedrai anche come incorporare variabili d'ambiente nel tuo progetto astro, rendendo più facile memorizzare in modo sicuro le credenziali o altri dati sensibili.
Una volta terminato, avrai una struttura backend scalabile per Astro e saprai come gestire i dati con REST, GraphQL, autenticazione degli utenti, eventi in tempo reale e altro ancora. 
Sarai pronto ad aggiungere la tua logica per qualsiasi esigenza del mondo reale mantenendo una solida base di sicurezza.
Requisiti
Un account Back4App e un nuovo progetto Back4App
Iniziare con Back4app.﻿
Un progetto Astro
Impostare Astro - Assicurati di avere un ambiente di sviluppo Astro di base e Node.js installato.
Node.js (versione 14 o superiore) installato
Installare Node.js﻿
Familiarità con concetti di front-end e server-side
Dovresti sapere come creare o modificare .astro file, gestire le variabili d'ambiente e fare una semplice richiesta post con fetch o una libreria simile.
Assicurati che questi prerequisiti siano in atto prima di iniziare. Avere il tuo account Back4App, un ambiente Astro e conoscenze di base di JavaScript ti aiuterà a seguire questo tutorial in modo più fluido.
Passo 1 – Creare un Nuovo Progetto su Back4App e connettersi
Crea un Nuovo Progetto:
Accedi al tuo account Back4App.
Clicca su Nuova App nel tuo dashboard di Back4App e dagli un nome (ad esempio, “Astro-Backend-Tutorial”).
Recupera le Credenziali di Back4App:
Nel tuo dashboard di Back4App, sotto Impostazioni App o Sicurezza e Chiavi, annota il tuo ID Applicazione, Chiave API REST, e l'URL del server (https://parseapi.back4app.com di default). Queste variabili di ambiente saranno utilizzate nella tua integrazione con Astro.
Collegare Astro a Back4App tramite API:
Poiché non stiamo utilizzando direttamente il Parse SDK, faremo richieste utilizzando fetch o un'altra libreria dai nostri file Astro. Memorizza le tue credenziali in variabili di ambiente per motivi di sicurezza. Ad esempio, in un .env file:
Passo 2 – Configurazione del Database
Creazione di un Modello Dati
Crea manualmente un Modello Dati:
Vai al tuo dashboard di Back4App e clicca su Database.
Crea una nuova classe (ad esempio, “Todo”), e aggiungi campi come title (String) e isCompleted (Boolean).
Usa l'AI Agent per Creare un Modello Dati:
Apri l'AI Agent dal tuo dashboard dell'app.
Descrivi il tuo schema in linguaggio semplice (ad esempio, “Crea una nuova App ToDo con una classe che ha campi title e isCompleted.”).
L'agente genererà la classe e i campi per te.
Lettura e Scrittura dei Dati utilizzando REST API
Con il tuo modello di dati pronto, definiamo un endpoint all'interno di un componente Astro o di un file lato server per gestire una richiesta post e una richiesta di lettura. Ad esempio, potresti creare un file come src/pages/api/todos.astro:
Text
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
﻿
Questo esempio utilizza variabili di ambiente (import.meta.env.*) per memorizzare le tue credenziali Back4App. Definiamo due metodi in un file: export const post per creare un Todo, e export const get per recuperare tutti i Todos. Puoi adattarlo per soddisfare la struttura del tuo componente di layout e altre pagine del sito.
Lettura e Scrittura dei Dati utilizzando l'API GraphQL
Allo stesso modo, puoi eseguire richieste GraphQL dalle tue pagine Astro:
Text
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
﻿
Lavorare con le Query Live (opzionale)
Le Query Live abilitano aggiornamenti in tempo reale ai tuoi dati. Per utilizzarle, abilita le Query Live nel dashboard di Back4App e configura una connessione WebSocket. Tuttavia, se stai costruendo un sito Astro statico, potresti integrare aggiornamenti in tempo reale tramite script lato client che puntano a wss://YOUR_SUBDOMAIN.b4a.io. Le Query Live possono inviare modifiche ai tuoi client connessi ogni volta che i record vengono creati, aggiornati o eliminati.
Passo 3 – Applicare la Sicurezza con ACL e CLP
ACL (Liste di Controllo degli Accessi) e CLP (Permessi a Livello di Classe) sono fondamentali per controllare l'accesso ai dati. Puoi configurarli nella sezione Database del tuo dashboard di Back4App. Ad esempio:
Limitare la lettura/scrittura solo agli utenti autenticati
Utilizzare le ACL per la sicurezza per oggetto
Utilizza le Linee Guida sulla Sicurezza di Back4App per garantire che i tuoi dati rimangano protetti. Puoi anche impostare queste regole dal dashboard, assicurandoti che anche se le tue chiamate REST sono aperte, solo le credenziali corrette possano modificare o visualizzare i dati.
Passo 4 – Scrivere Funzioni di Cloud Code
Perché Cloud Code: Puoi spostare la logica aziendale chiave sul lato server, evitando l'esposizione di segreti o la necessità di mantenere server separati. Il Cloud Code può ascoltare i trigger (beforeSave, afterSave) o gestire endpoint personalizzati.
Esempio
JS
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Distribuisci questo tramite Back4App CLI o direttamente nella sezione Cloud Code del tuo dashboard di Back4App.
Chiamare la Funzione
Da Astro, puoi definire un endpoint che utilizza fetch per colpire la tua Cloud Function:
Text
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
﻿
Passo 5 – Configurazione dell'Autenticazione
Back4App utilizza la _User classe per gestire gli account utente. Con REST, puoi gestire registrazioni, accessi o disconnessioni. Ad esempio, registrare un nuovo utente:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","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_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"user1@example.com"}' \
  https://parseapi.back4app.com/users
﻿
Puoi replicare questa logica da Astro con fetch in modo simile, utilizzando variabili di ambiente. Una volta effettuato l'accesso, l'utente riceve un token di sessione per le richieste successive.
Accesso Sociale
Per i fornitori sociali (come Google o Apple), utilizza endpoint specifici o imposta il flusso OAuth. Fai riferimento alla Documentazione per l'accesso con Apple o ad altre guide per l'accesso sociale per integrare un'autenticazione avanzata. Questo è particolarmente utile se desideri consentire alle persone di accedere al tuo progetto astro con il minimo attrito.
Passaggio 6 – Gestione dello Storage dei File
Per memorizzare file in Back4App, li invii con l'API REST. Ad esempio:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/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_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
La risposta contiene un URL del file. Puoi collegare quell'URL a un record, come un oggetto della classe Photo, assicurandoti di tenere traccia dei riferimenti al file nel tuo database. Puoi anche controllare chi può caricare modificando le impostazioni di sicurezza dei file nella configurazione della tua app.
Passaggio 7 – Verifica Email e Reimpostazione della Password
Abilita la Verifica Email: Sotto Impostazioni App nel dashboard di Back4App, abilita la verifica email e personalizza il tuo modello di email di verifica.
Configura la Reimpostazione della Password: Allo stesso modo, configura le tue email di reimpostazione della password e assicurati che la classe _User abbia indirizzi email validi.
Flusso: Quando un utente richiede una reimpostazione dal tuo progetto astro (tramite una chiamata API), Back4App invia automaticamente un'email con un link sicuro per cambiare la propria password.
Passaggio 8 – Pianificazione dei Compiti con Cloud Jobs
Usa Cloud Jobs per pianificare manutenzioni ripetute o altri compiti:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Distribuisci il tuo codice, quindi programma il lavoro da Impostazioni del server > Lavori in background nella console di Back4App. Questo automatizza attività come la pulizia dei dati, l'invio di email o qualsiasi funzione di routine che desideri eseguire a intervalli specifici.
Passo 9 – Integrazione dei Webhook
I Webhook ti permettono di notificare servizi esterni quando si verificano determinati eventi nella tua app Back4App. Ad esempio, puoi inviare dati a Slack ogni volta che viene creato un nuovo Todo:
Vai su Altro > WebHooks nel tuo dashboard di Back4App.
Aggiungi un Webhook che punta all'URL di Slack.
Seleziona l'evento (ad esempio, oggetto creato nella classe Todo).
Questo consente un flusso di richiesta/risposta per mantenere i tuoi sistemi esterni sincronizzati con i dati della tua applicazione basata su Astro.
Passo 10 – Esplorare il Pannello di Amministrazione di Back4App
L' App di amministrazione di Back4App è un pannello di gestione user-friendly per la modifica dei dati. È particolarmente utile per i membri del team non tecnici che necessitano di accesso diretto al tuo database.
Abilita l'app Admin sotto Altro > App Admin.
Crea un utente admin per accesso sicuro.
Usa questo pannello per eseguire rapidamente operazioni CRUD, controllare i log o configurare impostazioni più avanzate.
Conclusione
Hai creato con successo un backend sicuro ed efficiente per un progetto Astro utilizzando Back4App. Durante questo tutorial, hai:
Definito e configurato uno schema di database
Usato le API REST e GraphQL per leggere e scrivere dati
Sicurezza dei dati con ACL, CLP e autenticazione degli utenti
Esteso la logica tramite Cloud Code e lavori programmati
Gestito lo storage dei file per immagini o documenti
Integrato Webhook per notifiche esterne
Esplorato il pannello admin per una gestione semplificata dei dati
Questo approccio sottolinea come costruire un backend per Astro che sia affidabile, scalabile e facile da mantenere. Sfruttando le variabili ambientali, mantieni al sicuro le tue credenziali garantendo al contempo che il tuo codice rimanga flessibile per la crescita futura.
Prossimi Passi
Distribuisci il tuo progetto Astro con piattaforme di hosting che supportano il rendering lato server o ambienti basati su Node.
Aggiungi funzionalità avanzate, come il controllo degli accessi basato sui ruoli o integrazioni di pagamento specializzate, utilizzando Cloud Code o API esterne.
Ottimizza le prestazioni implementando strategie di caching e regolando le impostazioni dei contenuti del viewport per una migliore esperienza utente.
Rivedi la documentazione di Back4App per conoscere i log, le analisi e misure di sicurezza più avanzate.
Continua a esplorare funzionalità in tempo reale con Live Queries e costruisci applicazioni veramente dinamiche e collaborative.
﻿
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un backend per Python?
AVANTI IL PROSSIMO
Come costruire un backend per Deno?