Quickstarters
Come costruire un backend per Elm?

46min
Introduzione
In questo tutorial, imparerai come costruire un backend completo per un'applicazione Elm 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 frontend Elm.
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.
Lungo il percorso, acquisirai esperienza pratica con funzionalità chiave, inclusi avanzati strumenti di sicurezza, programmazione di attività con Cloud Jobs e configurazione di webhook per integrazioni esterne.
Entro la fine di questo tutorial, sarai ben preparato per migliorare questa configurazione fondamentale 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 di sviluppo Elm di base
 Puoi configurarlo installando Elm. Assicurati di avere Elm (0.19 o superiore) installato sul tuo computer.
Familiarità con Elm
 Documentazione ufficiale di Elm.
Se sei nuovo in Elm, rivedi la documentazione ufficiale o un tutorial per principianti prima di iniziare.
Libreria per richieste HTTP o approccio GraphQL per Elm
 Utilizzeremo chiamate REST e GraphQL da Elm, poiché non esiste un SDK ufficiale di Parse per Elm. Assicurati di avere la elm/http e, se necessario, una libreria GraphQL configurata.
Assicurati di avere tutti questi requisiti in atto prima di iniziare. Avere il tuo progetto Back4app configurato e il tuo ambiente Elm locale pronto ti aiuterà a seguire più facilmente.
Passo 1 – Configurazione del progetto Back4app
Crea un Nuovo Progetto
Il primo passo per costruire il tuo backend Elm 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, “Elm-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.
Collegati a Back4app da Elm
Back4app si basa sulla Parse Platform per gestire i tuoi dati, fornire funzionalità in tempo reale, gestire l'autenticazione degli utenti e altro ancora. Poiché non esiste un SDK ufficiale di Elm per Parse, utilizzeremo REST o GraphQL chiamate dalla nostra applicazione Elm per comunicare con il backend di Back4app.
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, Chiave API REST, e Endpoint GraphQL. Troverai anche l'URL del Server Parse (spesso https://parseapi.back4app.com).
﻿
Da Elm, puoi memorizzare queste credenziali in un file di configurazione o in un modulo. Ad esempio:
src/Config.elm
module Config exposing (applicationId, restApiKey, serverUrl, graphQLEndpoint)

applicationId : String
applicationId =
    "YOUR_APPLICATION_ID"

restApiKey : String
restApiKey =
    "YOUR_REST_API_KEY"

serverUrl : String
serverUrl =
    "https://parseapi.back4app.com"

graphQLEndpoint : String
graphQLEndpoint =
    "https://parseapi.back4app.com/graphql"
module Config exposing (applicationId, restApiKey, serverUrl, graphQLEndpoint)

applicationId : String
applicationId =
    "YOUR_APPLICATION_ID"

restApiKey : String
restApiKey =
    "YOUR_REST_API_KEY"

serverUrl : String
serverUrl =
    "https://parseapi.back4app.com"

graphQLEndpoint : String
graphQLEndpoint =
    "https://parseapi.back4app.com/graphql"
﻿
Utilizzerai questi valori ogni volta che effettui richieste HTTP a Back4app da Elm. Completando questo passaggio, hai stabilito come connettere in modo sicuro il tuo front end Elm con il backend di Back4app.
Passo 2 – Configurazione del Database
Salvataggio e Query dei Dati
Con il tuo progetto Back4app impostato, puoi ora iniziare a salvare e recuperare dati tramite REST o GraphQL da Elm. Per un esempio semplice, dimostreremo come creare e recuperare un Todo.
Utilizzare REST da Elm
Utilizzeremo elm/http per effettuare richieste REST. Ecco un esempio semplificato per creare un elemento Todo:
src/TodoApi.elm
module TodoApi exposing (createTodo, fetchTodos)

import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

-- A simplified representation of a Todo
type alias Todo =
    { objectId : String
    , title : String
    , isCompleted : Bool
    }

-- Encoder for creating a Todo
createTodoEncoder : String -> Bool -> Encode.Value
createTodoEncoder title isCompleted =
    Encode.object
        [ ( "title", Encode.string title )
        , ( "isCompleted", Encode.bool isCompleted )
        ]

-- Decoder for Todo
todoDecoder : Decode.Decoder Todo
todoDecoder =
    Decode.map3 Todo
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "isCompleted" Decode.bool)

createTodo : String -> Bool -> Http.Request Todo
createTodo title isCompleted =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.jsonBody (createTodoEncoder title isCompleted)
        , expect = Http.expectJson todoDecoder
        , timeout = Nothing
        , tracker = Nothing
        }

fetchTodos : Http.Request (List Todo)
fetchTodos =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.emptyBody
        , expect =
            Http.expectJson
                (Decode.field "results" (Decode.list todoDecoder))
        , timeout = Nothing
        , tracker = Nothing
        }
module TodoApi exposing (createTodo, fetchTodos)

import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

-- A simplified representation of a Todo
type alias Todo =
    { objectId : String
    , title : String
    , isCompleted : Bool
    }

-- Encoder for creating a Todo
createTodoEncoder : String -> Bool -> Encode.Value
createTodoEncoder title isCompleted =
    Encode.object
        [ ( "title", Encode.string title )
        , ( "isCompleted", Encode.bool isCompleted )
        ]

-- Decoder for Todo
todoDecoder : Decode.Decoder Todo
todoDecoder =
    Decode.map3 Todo
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "isCompleted" Decode.bool)

createTodo : String -> Bool -> Http.Request Todo
createTodo title isCompleted =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.jsonBody (createTodoEncoder title isCompleted)
        , expect = Http.expectJson todoDecoder
        , timeout = Nothing
        , tracker = Nothing
        }

fetchTodos : Http.Request (List Todo)
fetchTodos =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.emptyBody
        , expect =
            Http.expectJson
                (Decode.field "results" (Decode.list todoDecoder))
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Puoi quindi chiamare createTodo o fetchTodos nella tua funzione di aggiornamento Elm, gestire le Http risposte e integrare i dati nel modello della tua applicazione.
Utilizzare REST direttamente (Esempio in cURL)
Se preferisci testare o vuoi fare chiamate rapide al di fuori di Elm, puoi usare cURL:
Curl
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
﻿
Utilizzare GraphQL
Back4app fornisce anche un'interfaccia GraphQL. Di seguito è riportata una mutazione GraphQL di esempio per creare un Todo:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
In Elm, puoi utilizzare una libreria GraphQL o creare manualmente le tue richieste HTTP per inviare queste mutazioni e query, molto simile a come abbiamo usato elm/http sopra.
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 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 o lasciare che Parse crei automaticamente queste colonne quando salvi per la prima volta un oggetto dalla tua app Elm utilizzando l'approccio REST o GraphQL.
Crea Colonna
﻿
Back4app offre un Agente AI che può aiutarti a progettare il tuo modello di dati:
Apri l'Agente AI dal tuo Dashboard App 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 oggetto Categoria che punta a più elementi Todo – puoi utilizzare Puntatori o Relazioni in Parse. Da Elm, puoi gestire queste relazioni includendo i campi di puntatore o relazione nelle tue chiamate REST o GraphQL.
Ad esempio, per aggiungere un puntatore tramite REST:
JSON
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
﻿
Quando esegui una query, puoi anche includere i dati del puntatore utilizzando il parametro ?include=category in REST o utilizzando include nelle query GraphQL.
Query Live
Per aggiornamenti in tempo reale, Back4app fornisce Query Live. Anche se non esiste un pacchetto Elm nativo per le Query Live di Parse, puoi comunque abilitarlo nel tuo dashboard di Back4app:
Abilita le Query Live nelle Impostazioni del Server della tua app.
Usa l'endpoint WebSocket per le Query Live in un client specializzato.
Se desideri integrare le Query Live con Elm, potresti sfruttare elm-websocket (o un altro approccio personalizzato) per iscriverti ai cambiamenti. Tuttavia, questo richiede una configurazione più avanzata poiché attualmente non esiste un client ufficiale per le Query Live di Elm.
Passo 3 – Applicare la Sicurezza con ACL e CLP
Meccanismo di Sicurezza di Back4app
Back4app prende sul serio la sicurezza fornendo Access Control Lists (ACLs) e Class-Level Permissions (CLPs). 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.
﻿
Access Control Lists (ACLs)
Un ACL è applicato a singoli oggetti per determinare quali utenti, ruoli o il pubblico possono eseguire operazioni di lettura/scrittura. Puoi configurare gli ACL da Elm includendo la _ACL proprietà nel tuo JSON quando crei o aggiorni oggetti tramite REST o GraphQL.
Ad esempio, per creare un Todo privato, potresti impostare:
JSON
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
﻿
Questo impedisce a chiunque tranne quell'utente di leggere o modificare l'oggetto.
Modifica ACL
﻿
Class-Level Permissions (CLPs)
CLPs governano le autorizzazioni predefinite 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 autorizzazioni a livello di classe tab.
Configura i tuoi predefiniti, come “Richiede autenticazione” per la lettura o la scrittura, o “Nessun accesso” per il pubblico.
﻿
Queste autorizzazioni impostano la base, mentre le ACL affinano le autorizzazioni per oggetti individuali. Un modello di sicurezza robusto combina tipicamente sia CLPs (restrizioni ampie) che ACLs (restrizioni dettagliate per oggetto). Per ulteriori informazioni, vai a Linee guida sulla sicurezza delle 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 dover gestire server o infrastrutture. Scrivendo Cloud Code, puoi estendere il tuo backend di Back4app con logica aziendale aggiuntiva, validazioni, trigger e integrazioni che vengono eseguite 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.
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 main.js file, il Parse Server in esecuzione viene aggiornato con il tuo codice più recente.
JS
// main.js

// Import an npm module (e.g., axios)
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;
});
// main.js

// Import an npm module (e.g., axios)
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;
});
﻿
Puoi chiamare queste funzioni di Cloud Code da Elm effettuando una richiesta REST a:
https://parseapi.back4app.com/functions/fetchExternalData
Casi d'uso tipici
Logica aziendale: Aggregazione di dati, elaborazione dei pagamenti, ecc.
Validazioni dei dati: Assicurarsi che determinati campi soddisfino i criteri prima di salvare.
Trigger: Esecuzione di codice prima o dopo azioni di salvataggio/aggiornamento/cancellazione.
Integrazioni: Collegamento con API o servizi esterni.
Applicazione della sicurezza: Controllo dei ruoli o delle autorizzazioni degli utenti prima di eseguire operazioni critiche.
Distribuisci la tua funzione
Distribuendo tramite il Back4app CLI:
Installa il CLI (esempio 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
﻿
Configura la tua chiave account:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
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 Elm, puoi chiamare una Cloud Function effettuando una richiesta POST:
Text
import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

cloudFunction : String -> Encode.Value -> Http.Request Decode.Value
cloudFunction functionName body =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/functions/" ++ functionName
        , body = Http.jsonBody body
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }

calculateTextLength : String -> Http.Request Decode.Value
calculateTextLength text =
    let
        requestBody =
            Encode.object
                [ ( "text", Encode.string text ) ]
    in
    cloudFunction "calculateTextLength" requestBody
import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

cloudFunction : String -> Encode.Value -> Http.Request Decode.Value
cloudFunction functionName body =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/functions/" ++ functionName
        , body = Http.jsonBody body
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }

calculateTextLength : String -> Http.Request Decode.Value
calculateTextLength text =
    let
        requestBody =
            Encode.object
                [ ( "text", Encode.string text ) ]
    in
    cloudFunction "calculateTextLength" requestBody
﻿
Puoi anche chiamare le Cloud Functions tramite GraphQL:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Passo 5 – Configurazione dell'autenticazione utente
Autenticazione utente in Back4app
Back4app sfrutta la Parse User classe come base per l'autenticazione. Per impostazione predefinita, Parse gestisce l'hashing delle password, i token di sessione e lo storage sicuro. Puoi creare e accedere agli utenti tramite REST o GraphQL dalla tua app Elm.
Impostazione dell'autenticazione utente
Registrazione di un nuovo utente (REST)
Text
signUpUser : String -> String -> String -> Http.Request Decode.Value
signUpUser username password email =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/users"
        , body =
            Http.jsonBody
                (Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
                )
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
signUpUser : String -> String -> String -> Http.Request Decode.Value
signUpUser username password email =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/users"
        , body =
            Http.jsonBody
                (Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
                )
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Accesso (REST)
Text
logInUser : String -> String -> Http.Request Decode.Value
logInUser username password =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url =
            serverUrl
                ++ "/login?username="
                ++ username
                ++ "&password="
                ++ password
        , body = Http.emptyBody
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
logInUser : String -> String -> Http.Request Decode.Value
logInUser username password =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url =
            serverUrl
                ++ "/login?username="
                ++ username
                ++ "&password="
                ++ password
        , body = Http.emptyBody
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Integrazione del Login Sociale
Back4app e Parse possono integrarsi con provider OAuth popolari come Google, Facebook, o Apple. Di solito, configurerai questi provider nel dashboard di Back4app e poi farai le richieste necessarie da Elm. Fai riferimento alla Documentazione sul Login Sociale per i dettagli sui passaggi di configurazione.
Verifica Email e Reimpostazione Password
Naviga alle 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.
Passo 6 – Gestione dello Storage dei File
Caricamento e Recupero dei File
Parse include la Parse.File classe per gestire i caricamenti di file, che Back4app memorizza in modo sicuro. Poiché stiamo usando REST da Elm, possiamo fare un caricamento di file multi-part o allegare un file codificato in base64.
Caricamento File tramite REST
Text
uploadFile : String -> String -> Http.Request Decode.Value
uploadFile fileName base64Content =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "text/plain"
            ]
        , url = serverUrl ++ "/files/" ++ fileName
        , body = Http.stringBody "text/plain" base64Content
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
uploadFile : String -> String -> Http.Request Decode.Value
uploadFile fileName base64Content =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "text/plain"
            ]
        , url = serverUrl ++ "/files/" ++ fileName
        , body = Http.stringBody "text/plain" base64Content
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Una volta caricato, riceverai un URL del file nella risposta. Puoi memorizzare quell'URL in un campo della classe Parse o visualizzarlo nella tua applicazione Elm secondo necessità.
Sicurezza dei File
Parse Server fornisce configurazioni per gestire la sicurezza del caricamento dei file. Ad esempio:
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
Cloud Jobs in Back4app ti consente di pianificare ed eseguire compiti di routine sul tuo backend, come la pulizia dei dati obsoleti o l'invio di email periodiche. Ad esempio, un lavoro per rimuovere i todo più vecchi di 30 giorni potrebbe apparire così:
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);
  }
});
﻿
Distribuisci il tuo Cloud Code con il nuovo lavoro (tramite CLI o dashboard).
Vai al Dashboard di Back4app > Impostazioni App > Impostazioni Server > Lavori in Background.
Pianifica il lavoro per essere eseguito quotidianamente o come desiderato.
Pianificazione di un lavoro nel cloud
﻿
Passo 8 – Integrazione dei Webhook
I Webhook 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.”
Aggiungi intestazioni HTTP personalizzate o payload se necessario.
Webhook BeforeSave
﻿
Passo 9 – Esplorare il pannello di amministrazione di Back4app
Il Back4app Admin App è un'interfaccia di gestione basata sul web progettata per utenti non tecnici per eseguire operazioni CRUD e gestire attività di routine sui dati senza scrivere codice. Fornisce un modello-centrico, interfaccia user-friendly che semplifica l'amministrazione del database, la gestione dei dati personalizzati e le operazioni a livello aziendale.
Abilitare l'Admin App
Abilita andando su App Dashboard > Altro > Admin App e cliccando sul pulsante “Abilita Admin App”.
Abilita Admin App
﻿
Crea un Primo Utente Admin (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 admin e completare la configurazione.
﻿
Accedi utilizzando le credenziali admin che hai creato per accedere al tuo nuovo dashboard dell'Admin App.
﻿
Una volta abilitata, l'app Back4app Admin 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 Elm 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.
Applicato 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.
Impostato l'autenticazione degli utenti con supporto per la verifica dell'email e il ripristino della password.
Gestito caricamenti di file e recupero, con controlli di sicurezza opzionali per i file.
Pianificato Cloud Jobs per attività di background automatizzate.
Utilizzato Webhooks per integrarsi con servizi esterni.
Esplorato il Pannello di Amministrazione di Back4app per la gestione dei dati.
Con un solido frontend Elm 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 Elm 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 VueJS?
AVANTI IL PROSSIMO
Come costruire un backend per NodeJS?