vai al contenuto principale

Abilitare GraphQL su una Cloudlet

Scrivere applicazioni moderne abilitando l'uso delle GraphQL sulla Cloudlet è davvero molto semplice. In questa breve guida vediamo nel dettaglio i passi necessari per poter sfruttare questo servizio nella creazione di un Client, dalla creazione della Cloudlet, fino alla modifica di alcuni parametri all'interno dell'applicazione.

Lo ZIP qui allegato contiene un modello di esempio e altri file che ti serviranno per completare l’applicazione; scaricalo e scompattalo cliccando su questo pulsante:

To-do.zip

Creare la Cloudlet #

Come prima cosa, crea una nuova Cloudlet dalla Dashboard, cliccando il pulsante New Cloudlet in fondo a destra nella scheda Cloudlets.

Una Cloudlet vuota

  • nella parte alta sono presenti un nome (in questo caso Livebase ha assegnato il nome di default NewCloudlet1) e un indirizzo URL; quest’ultimo dipende dal server di hosting dove la Cloudlet è stata dispiegata, dal tuo username, e dal nome della Cloudlet;

  • al centro ci sono tre icone: lista dei membri, engine e database;

  • un messaggio in basso indica lo stato della Cloudlet: al momento è Cannot start (missing engine); non è possibile avviare la Cloudlet perché non abbiamo ancora installato un modello su di essa.

Abilitare le GraphQL sulla Cloudlet #

Clicca sull’icona per aprire il pannello API & Public URLs; nella scheda Api, clicca sul pulsante a forma di interruttore, posizionandolo su On come mostrato nell’immagine seguente: le GraphQL sono ora abilitate all’interno della Cloudlet.

Switch per abilitare le GraphQL

La scheda API del pannello API & Public URLs

Avviare la Cloudlet #

Prima di poter creare un database è necessario installare un modello (o engine) sulla Cloudlet.

Il modello utilizzato come esempio per la nostra applicazione (model.xml) si trova all’interno del file ZIP che hai scaricato, ed è una classica to-do list: nel Client sono state create due pagine, una per il login e l’altra per la visualizzazione, la ricerca e la modifica dei to-do.

Per installare il modello, trascina il file model.xml sopra la Cloudlet e rilascialo quando questa appare colorata in giallo.

Cloudlet con un modello ma senza DB

La Cloudlet dopo aver installato il modello

Senza un database, non è ancora possibile avviare la Cloudlet: in basso il messaggio è cambiato in Stopped (missing database). Per creare un nuovo database, clicca sopra l’icona corrispondente all’interno del riquadro.

Ora puoi avviare la Cloudlet, cliccando sul pulsante Start.

Attendi qualche secondo mentre Livebase traduce l’engine in codice sorgente, genera la corrispondente applicazione e la avvia sul server. Al termine del processo la Cloudlet passa allo stato Running, mentre il bottone Start viene sostituito da Stop.

Cloudlet avviata con GraphQL

La Cloudlet mentre viene avviata; nota come durante la generazione dell’applicazione vengano installate anche le GraphQL.

Installare le dipendenze e le librerie necessarie #

Per eseguire l’applicazione, assicurati di aver installato le seguenti dipendenze:

  • Node.js ≥ v16.13.1 (ultima versione LTS disponibile)
  • Npm ≥ v7.6.3
Maggiori informazioni

Fatto questo, è necessario installare le librerie contenute nello ZIP che hai scaricato:

  • spostati sulla directory $REPO/vue-todo-list/;
  • esegui il comando npm i dal terminale.

Modificare l’endpoint della chiamata GraphQL #

L’ultimo passo consiste nel modificare il file .env all’interno della cartella /todo-master/vue-todo-list; puoi aprirlo con un qualunque editor di testo. All’interno del file troverai una stringa che inizia con VUE_APP_URL=, seguito da un URL:

VUE_APP_URL=https://<Hosting_server>/<User_name>/todo-list/auth/api/graphql/Application

Accedi al pannello Api, dove hai precedentemente abilitato le GraphQL sulla Cloudlet, e copia il link colorato in blu:

  • posiziona il cursore sopra il link senza cliccare;
  • clicca sull’icona che compare alla destra del link; fatto questo, verrà visualizzato il messaggio URL copied to clipboard.

Copiare il link dell'URL

Ora sostituisci l’URL presente nel file .env con quello che hai appena copiato, facendo attenzione a mantenere invariata la prima porzione della stringa (VUE_APP_URL=).

Utilizzare l’applicazione #

Se hai seguito correttamente i passi elencati finora, puoi finalmente verificare il funzionamento dell’applicazione che abbiamo creato: avvia un server locale digitando nel terminale il comando npm run serve e premi invio. Dopo pochi secondi, l’applicazione generata sarà disponibile al seguente indirizzo:

`http://localhost:8080/home`

La pagina di login

Una volta avviata l’applicazione, nel browser apparirà la pagina di login per accedere al Client.

Una volta avviato il server, ogni modifica effettuata al codice si riflette immediatamente nell’applicazione. Ora puoi divertirti a cambiare alcuni parametri, verificando in tempo reale gli effetti sul Client generato.

Il Client GraphQL

La pagina di visualizzazione, ricerca e modifica dei to-do all’interno del Client generato.

Struttura del codice sorgente