In questo tutorial, daremo un'occhiata più da vicino a come puoi integrare Bubble e AppMaster . Si supponga che il front-end dell'applicazione in fase di sviluppo sia realizzato in Bubble , ma le sue capacità di lavorare con il back-end si sono rivelate insufficienti e si desidera utilizzare la funzionalità AppMaster .
Scopriamo come:
- Usa AppMaster come database per Bubble
- Invia richieste API ad Appmaster
- Eseguire l'autenticazione dell'utente
- Usa il token di autorizzazione nelle intestazioni delle richieste
Configurazione API Connector
Prima di tutto, devi creare la stessa possibilità di inviare richieste API esterne da Bubble . Per fare ciò, è necessario aggiungere il plug-in API Connector .
Configuriamolo subito per inviare una richiesta di autenticazione ad AppMaster . Il nostro compito è inviare un login e una password per ricevere in risposta un token di autorizzazione. Useremo l'endpoint standard che viene creato in ogni progetto per impostazione predefinita - POST /auth/ (Auth: Authentication) . Informazioni complete a riguardo, con l'indirizzo esatto da richiedere nel tuo progetto, possono essere ottenute da Swagger .
Per configurare il API Connector , fare clic sul pulsante Add Another API e impostare i parametri di richiesta da utilizzare. I parametri chiave sono:
- Metodo di richiesta. POST
- URL. Uguale a Request URL da Swagger
- Use as. Data . In risposta, è necessario ricevere i dati del token di autorizzazione.
- Data type. JSON
- Body . L'impostazione più importante è che devi specificare i dati che verranno inviati al server AppMaster . Allo stesso tempo, <> contiene valori dinamici che dovranno essere ottenuti dai campi di input corrispondenti.
{
"login": "<login>",
"password": "<password>"
}
Al termine della compilazione, è necessario specificare i dati per la richiesta di test (inserire i valori di login e password nei Body parameters ), inizializzare la richiesta e assicurarsi che funzioni correttamente e che la risposta arrivi davvero.
Impostazione dei campi di input
Il passaggio successivo consiste nel creare un'interfaccia per l'applicazione. Ci limitiamo al minimo necessario. Dovremo creare 3 campi di input:
- Login
- Parola d'ordine
- Token di autorizzazione
I primi due sono abbastanza ovvi. Indicheranno il nome utente e la password dell'utente per l'autenticazione. Di maggiore interesse è il terzo campo: il campo del token. Il valore del token può essere inserito anche manualmente, ma il nostro compito è quello di consentire di ricevere i dati dal backend di AppMaster e di visualizzarli lì.
Per fare ciò è necessario configurare il valore del contenuto iniziale :
- Get data from an External API con la selezione della richiesta precedentemente creata API Connector (in questo esempio, il suo nome è AppMaster Auth Call )
- Nei campi (body) login e (body) password è necessario specificare i valori dai campi di input corrispondenti
- Seleziona il valore del token (nella risposta alla richiesta arrivano molti dati diversi, ma in questo esempio interessa solo il token )
Il risultato può essere testato. Quando si inseriscono i dati nei campi login e password, verrà automaticamente inviata una richiesta al backend di AppMaster . Quando i dati sono inseriti correttamente e la richiesta restituisce un esito positivo, il token di autorizzazione ricevuto apparirà nel terzo campo.
GET richiesta al database
Il passaggio successivo consiste nel creare una nuova richiesta API. Questa volta il compito sarà quello di ottenere i dati dal database. Allo stesso tempo, la situazione è complicata dal fatto che questi dati non sono liberamente disponibili ma sono disponibili solo per gli utenti autorizzati.
Per fare ciò, dovrai aggiungere un'intestazione speciale alla richiesta. Dovrebbe essere chiamato Authorization e il suo valore dovrebbe essere " Bearer " e la chiave di autorizzazione ottenuta in precedenza.
Facciamolo in pratica. Devi tornare al plug-in API Connector e creare una nuova richiesta API. Nell'esempio sullo screenshot, questa è una chiamata al database del ristorante per ottenere un elenco di piatti e creare un menu.
Una differenza importante rispetto alla richiesta precedente è che al posto dei parametri (sebbene possano anche essere aggiunti), viene utilizzata un'intestazione:
- Key = Authorization
- Value = Bearer {authorization token} (per inizializzare la richiesta, devi specificare immediatamente il token reale che hai ricevuto in precedenza)
Tieni presente che nelle impostazioni dell'intestazione, devi deselezionare la casella di controllo Private ; in caso contrario, non sarà possibile generarlo dinamicamente. Infine, non dimenticare di inizializzare la richiesta e assicurarti che funzioni.
Repeating Group
Ora dovremmo tornare al designer, aggiungere un nuovo elemento Gruppo ripetuto e configurarlo:
- Type of content - dati della richiesta AppMaster Get Data .
- Data source : è importante specificare correttamente l'intestazione di Authorization . Si compone di due parti. La prima costante è " Bearer ". La seconda variabile deve contenere un token di autorizzazione ed essere prelevata dal campo di input corrispondente.
Se tutto viene eseguito correttamente, i dati verranno ricevuti e rimane solo l'ultimo passaggio: è necessario visualizzarli. Per fare ciò, puoi aggiungere due campi di testo al gruppo Repeating Group e personalizzarli. Uno mostrerà il nome del piatto e il secondo il suo prezzo.
Puoi aprire l'app risultante e verificare che l'integrazione di Bubble e AppMaster sia andata a buon fine. Il frontend è realizzato in Bubble.io e tutto ciò che riguarda il backend è alimentato da AppMaster.io :
- È in corso l'autenticazione dell'utente
- Viene visualizzato il token di autorizzazione ricevuto
- Il lavoro con il database viene eseguito
- Vengono visualizzati i dati disponibili solo per gli utenti autorizzati
