Padroneggiare l’autenticazione delle API Web con Parse – SDK Javascript e versioni GraphQL

Molte applicazioni, soprattutto i siti web, hanno bisogno di limitare l’accesso ai loro contenuti e avere account utente che mostrino solo le informazioni rilevanti per quell’utente in modo sicuro è il modo più diffuso per ottenere questo risultato.

Oggi impareremo a implementare la funzionalità di login in una pagina HTML già esistente, scrivendo pochissimo codice e lasciando che Parse faccia tutto il lavoro pesante per voi; per farlo, ho scelto il modello Login Form, che potete scaricare gratuitamente.

Utilizzeremo due tecnologie distinte che potete scegliere: l’SDK Javascript e GraphQL attraverso Javascript.

GraphQL è la nuova tecnologia appena rilasciata e il mio obiettivo è confrontare entrambi i modi per fare la stessa cosa, in modo che possiate scegliere quello che vi piace di più.
ATTENZIONE AGLI SPOILER! Sono sicuro che GraphQL vi piacerà di più…

Questo ha già tutti i file necessari per la visualizzazione del file, ma manca di funzionalità, che aggiungeremo.

Se volete saperne di più su GraphQL, date un’occhiata a questo post: Cos’è GraphQL

Questo sarà un articolo piuttosto esteso, quindi lasciate che vi mostri cosa imparerete esattamente, per capitolo:

1. Impostazione dell’hosting web in Back4app
2. Abilitare l’uso di GraphQL
3. Distribuire il vostro primo sito web
4. Creare il primo file Javascript
5. Incorporare l’SDK Parse
6. Configurare e istanziare l’SDK nel proprio codice
7. Aggiungere utenti graficamente
8. Usare l’SDK Javascript per registrare un utente
9. Testate l’iscrizione con il vostro sito web (valori codificati)
10. Scrivere il codice per leggere i moduli e applicarlo al codice Javascript
11. Testate l’iscrizione con il vostro sito web (valori dinamici)
12. Creare il processo di log-in con l’SDK Javascript
13. Testate il login con il vostro sito web (valori dinamici)
14. Conclusione della parte dell’SDK Javascript
15. Introduzione a GraphQL
16. Cosa vi serve per usare GraphQL
17. Installazione degli strumenti necessari
18. Una rapida spiegazione di come genereremo il codice per il frontend
19. Utilizzo dei moduli NPM sul codice NodeJS
20. Introduzione alle query e alle mutazioni in GraphQL
21. Le query
22. Mutazioni
23. Creare il proprio metodo GraphQL SingUp
24. Creare il proprio metodo GraphQL LogIn
25. Usare Browserify per convertire il codice NodeJS in codice compatibile con il frontend.
26. Includere il codice nel file HTML
27. Codificare le funzioni Javascript per chiamare il codice generato da Browserify
28. Testate l’iscrizione e il login GraphQL
29. Conclusione della parte GraphQL

1. Primi passi

Il primo passo consiste nel creare la propria applicazione in Back4app, se non se ne ha già una. È possibile verificare i passaggi per crearne una utilizzando questo documento.

Questo passo è comune a entrambe le tecnologie, quindi, indipendentemente dalla scelta, dovrete farlo.

Dopo aver creato la nostra app, dobbiamo impostare la funzione Web Hosting. Sì. Potete ospitare gratuitamente i vostri siti web con contenuti statici su Back4app. Ottimo, no?

Dopo aver creato la vostra App, andate su Impostazioni del server:

Sotto Web Hosting e Live Query, fare clic su Impostazioni:

Ora attivate Back4app Hosting e scegliete un buon nome di dominio per la vostra applicazione. È possibile accedere direttamente a tale dominio all’interno di back4app.io, oppure, se lo si desidera, è possibile creare un record CNAME sul proprio DNS che punta a tale dominio:

Ora siete pronti per iniziare a distribuire il codice.

2. Che ne dite di GraphQL?

Se volete usare GraphQL, c’è un altro passo da fare. Se si intende usare solo l’SDK Javascript, si può usare qualsiasi versione di Parse, ma perché non usare l’ultima e la migliore?

Andare alle Impostazioni del server:

E sotto Impostazioni in Gestione del server Parse:

Scegliere una versione superiore alla 3.5.0. In Back4app ho usato la versione 3.6.0:

Ora dovreste avere GraphQL abilitato e siamo pronti a partire!
Oh, giusto perché lo sappiate, potete usare GraphQL e gli SDK sulla stessa applicazione. Non c’è bisogno di scegliere.

Se siete interessati solo a GraphQL, potete passare al capitolo 15 di questo tutorial.

3. Distribuire il primo sito web

Ora che abbiamo impostato la funzione Web Hosting, possiamo distribuire il nostro sito web.
Anche questa fase è comune a entrambe le tecnologie.
Non avrà ancora alcuna funzionalità, ma è bello vederlo funzionare per la prima volta, quindi facciamolo.

Andare ancora una volta alle Impostazioni del server:

E ora scegliete Impostazioni sotto Codice Cloud:

Lì troverete due cartelle: Cloud e Public.

Cloud è per la distribuzione di Cloud Code, che è codice NodeJS che viene eseguito dai server di Back4app, svolgendo tutto il carico pesante di elaborazione per le vostre applicazioni e portando molti vantaggi, come il risparmio della batteria e del piano dati nei cellulari, in quanto il cellulare stesso non dovrà effettivamente elaborare molto né recuperare un intero carico di dati, affidandosi solo al risultato finale dell’elaborazione, fornito dai server di Back4app.

Il pubblico è destinato alla distribuzione di contenuti statici come HTML, CSS e file Javascript statici. Questa è quella che ci interessa in questo momento.
Selezionate questa cartella e fate clic sul pulsante +ADD in alto, aggiungendo i file HTML e CSS per il nostro modello scaricato dal sito web nel primo capitolo.

Dopo aver selezionato i file, premere il pulsante Deploy e si dovrebbero vedere i file nella cartella Public:

Ora è il momento di fare qualche prova.
Se si preme l’URL impostato su Web Hosting, si dovrebbe vedere il nuovo sito web funzionante in modo totalmente gratuito:

4. Un po’ di intelligenza

Un nuovo sito web di lusso è attivo e funzionante e ci sono voluti quanto? 2 minuti? Che bello batterlo gratis, Internet!
E vi ho detto che è completamente sicuro e con HTTPS già incorporato? Perché non abbiamo intenzione di pagare per i certificati quando Back4app li fornisce gratuitamente, vero?

Ora è il momento di mettere in campo un po’ di intelligenza. E come possiamo fare per far sì che ci vogliano solo altri 2 minuti? Mi piace intelligente e mi piace veloce.

Avviate il vostro IDE preferito e fate un po’ di Javascript. Visual Studio Code per me, per favore. E con esso un espresso.

D’ora in poi mi concentrerò solo su Javascript SDK e, più avanti, solo su GraphQL.

Creiamo un nuovo file chiamato Parse.js e siamo pronti a partire.

5. Aggiungere il framework Parse

(solo Javascript SDK)

Parse rende molto semplice la distribuzione dei suoi framework. Per prima cosa è necessario istanziare il framework Javascript aggiungendo la seguente riga nella sezione Head del file index.html:

<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

Ora il framework Parse completo (minificato) è accessibile dal codice Javascript e possiamo usare tutto ciò che ne deriva.

6. Accendere i motori di Parse

(solo SDK Javascript)

Ora abbiamo già accesso al framework Parse, ma dobbiamo accenderlo prima di premere l’acceleratore.

Dobbiamo identificare la nostra applicazione a Parse e il modo per farlo è impostare l’AppId e la Javascript Key per la nostra applicazione, insieme all’URL del server che indica che la nostra applicazione è in esecuzione in Back4app.

Per farlo, andare in Impostazioni del server:

e in Impostazioni, alla voce Impostazioni del nucleo:

troverete tutte le informazioni necessarie:

Copiate queste informazioni e incollatele nel nostro file Parse.js in questo modo:

Parse.initialize("YourAppIdHere", "YourJavascriptKeyHere");
Parse.serverURL = "YourParseAPIAddressHere

Parse.initialize("5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH", "SchM9sm5W6TpPBr8zyHOwOYAGyPTYf66qxSUCsvE");
Parse.serverURL = 'https://parseapi.back4app.com/';

Ora la nostra applicazione ha pieno accesso a Parse e Parse conosce le nostre impostazioni per poter operare.
Greenlight. A tutto gas!

7. Ma ho solo pochi utenti…

Se la vostra applicazione non ha bisogno di registrare gli utenti e preferite gestirli manualmente, potete ottenere la classe User nel Database Browser della Parse Dashboard, premendo il pulsante Add a Row:

Ma realisticamente, la vostra applicazione probabilmente crescerà nel tempo e la possibilità per gli utenti di registrarsi al sistema sarà utile.

8. Nessun utente? Nessun problema! signUp() ci viene in soccorso!

(Solo SDK Javascript)

All’inizio, la vostra applicazione non avrà alcun utente, quindi dobbiamo fornire un modo per far registrare gli utenti.

Il nostro sito web ha già un bel modulo per farlo. Facciamolo funzionare, d’accordo?
E se vi dicessi che possiamo farlo con meno di 12 righe di codice? Vi sembra meglio?

La classe Parse.User ha tre proprietà di base che si possono impostare. Potete impostarne altre se volete o ne avete bisogno, ma queste tre sono già state create per comodità e due di queste tre sono obbligatorie:

• nome utente (obbligatorio)
• password (obbligatoria)
• e-mail (opzionale)

Aggiungiamo un utente di prova al nostro database per verificare il funzionamento. Aggiungiamo questo al file Parse.js:

function singnUp(){
    var user = new Parse.User();
    user.set("username", "alex"); // imposta il valore dal modulo Username alla proprietà username
    user.set("password", "abc123"); // imposta il valore dal modulo Password alla proprietà password
    user.set("email", "[email protected]"); // imposta il valore dal modulo Email alla proprietà email
    try {
        user.signUp(); // Tutto ha funzionato e l'utente si è registrato.
    } catch (error) {
        alert("Errore: " + error.code + " " + error.message); // Oops... è successo qualcosa di sbagliato
    }
}

Questo creerà un nuovo utente con valori codificati:

nome utente: alexk
password: abc123
email: [email protected]

Impareremo a recuperare questi valori dal form più avanti in questo articolo, ma per questo utente di prova, questo andrà bene.

Ora aprite il file index.html e cercate questa riga:

<input type="submit" class="button" value="Sign Up">.

E modificatela in questo modo:

<input type="submit" class="button" value="Sign Up" onclick="singnUp()">.

In pratica, abbiamo impostato un evento onClick per lanciare la funzione signUp che abbiamo appena codificato.

Distribuite entrambi i file nella cartella Cloud Code Public (il nuovo file Parse.js e il file index.html modificato) come avete imparato sopra e riaprite il sito web nel vostro browser.

9. Test… Prova… 123…

È ora di testare, baby! Lasciamo che il codice parli da solo!

Andate nella sezione Sign Up (non dovete riempire nulla perché non stiamo passando dati reali, ma solo un test codificato) e cliccate sul pulsante Sign Up:

e se tutto ha funzionato bene, nella dashboard di Parse si dovrebbe vedere l’utente in questione e una nuova sessione per l’utente:

10. Evviva! Ora rendiamolo più intelligente…

(SDK Javascript e GraphQL)

Ora che possiamo iscrivere gli utenti, realizziamo la funzione signUp completamente operativa.
Dovremo leggere i valori del modulo per inserirli nel database e per questo utilizzeremo il metodo javascript:

document.getElementById("idOfTheInput").value

Durante la stesura di questo articolo ho scoperto che il modello che abbiamo utilizzato ha un piccolo problema. Gli ID devono essere univoci, in modo da poter recuperare i valori corretti, e il nostro template ne ha alcuni ripetuti, probabilmente a causa del copia e incolla del codice da parte del creatore, quindi cambiamolo.

Andate nel vostro file HTML e trovate le seguenti righe nella sezione sign-up-htm:

<input id="user" type="text" class="input">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" tipo="text" class="input">

Si noti che l’attributo id di queste righe si ripete alcune volte nel codice. Modifichiamolo per ottenere un nome univoco:

<input id="username" type="text" class="input">
<input id="password" type="password" class="input" data-type="password">
<input id="passwordverify" tipo="password" class="input" data-type="password">
<input id="email" tipo="text" class="input">

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ("Le password non corrispondono")
        ritorno;
    }

    user.set("username", "alexk"); // imposta il valore dal modulo Username alla proprietà username
    user.set("password", "abc123"); // imposta il valore dal modulo Password alla proprietà password
    user.set("email", "[email protected]"); // imposta il valore dal modulo Email alla proprietà email

    user.set("username", alexl); // imposta il valore dal modulo Username alla proprietà username
    user.set("password", password); // imposta il valore dal modulo Password alla proprietà password
    user.set("email", email); // imposta il valore dal modulo Email alla proprietà email

11. È di nuovo tempo di test. Ora per davvero.

12. È il momento del login, baby!

(solo Javascript SDK)

function logIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
}

Parse.User.logIn(user, pass).then(() => {
    // Urrà! L'utente ha effettuato il login
    alert('Urrà! L'utente si è connesso!');
});

Parse.User.logIn(user, pass).then(() => {
    // Urrà! L'utente ha effettuato l'accesso
    alert('Urrà! Utente connesso!');
}).catch(function(error){
    // Oops... è successo qualcosa di sbagliato
    alert("Errore: " + error.code + " " + error.message);
});

13. E noooow….

14. Conclusione della parte dell’SDK Javascript

15. Lasciate entrare il GraphQL

Se vi siete emozionati con l’SDK Javascript, ora prendete i popcorn perché lo spettacolo sta per iniziare.

Back4app ora supporta GraphQL, il che significa che ci teniamo al passo con l’ultima e più grande tendenza della tecnologia di moda, e ora Parse è più intelligente che mai!

Potete contare su un GraphQL Playground perfettamente funzionante con completamento automatico (sì!!!) per generare le query che faremo.

Inoltre, possiamo specificare esattamente cosa vogliamo recuperare, il che si traduce in payload più piccoli, rendendo la consegna dei dati più veloce agli utenti finali e le API molto più facili da mantenere nel tempo.

Ok. Basta parlare. GraphQL è così fantastico che se non mi fermo, continuerò a scriverci sopra e a non mostrare come si usa.

16. Cosa ci serve

(solo GraphQL)

Se non avete cambiato la versione di Parse almeno alla 3.5.0 (la 3.6.0 di Back4app è la prima a supportare GraphQL), andate fino alla sezione 2 di questo articolo e fatelo.

Avremo bisogno di NPM installato per poter usare i suoi moduli.
Questi moduli sono scritti in NodeJS e inizialmente progettati per la programmazione del backend, quindi dovremo modificarli.
Non vi mostrerò come installare NPM, perché il tutorial sul sito web sopracitato ne parla diffusamente.
Vi mostrerò però come usarli, in modo da risparmiare un sacco di fatica durante la codifica.

Pronti? Allora, installate gli strumenti, allacciate le cinture di sicurezza e via!

17. Installazione del client GraphQL e di Browserify

(solo GraphQL)

GraphQL ha alcuni client disponibili per l’uso. Non potendo sceglierne uno (perché tutti sono molto validi), ho deciso di scegliere il più facile da configurare in questa prima esercitazione e di usare gli altri nelle prossime esercitazioni, in modo da poterli confrontare.

Ho scoperto che il più facile da configurare è graphql-request, che si può installare aprendo un terminale, andando nella cartella in cui si trova Parse.js e digitando

npm install graphql-request

Se l’installazione ha successo, si dovrebbe avere qualcosa di simile a questo:

Possiamo anche installare uno strumento chiamato Browserify.
Browserify effettua la transizione dei moduli NPM da utilizzare sul front-end (il browser). Ricordate quando ho detto che i moduli NPM sono inizialmente progettati per l’uso nel backend? Questo strumento li renderà disponibili sul frontend con il minimo sforzo.
A me piace installarlo globalmente (con la chiave -g), in modo da poterlo usare ovunque:

npm install -g browserify

Se tutto funziona bene, si dovrebbe avere qualcosa di simile:

Ora abbiamo il nostro client GraphQL installato e possiamo convertirlo per l’uso nel frontend. Ci sono voluti 2 minuti per farlo, quindi stiamo procedendo velocemente.

18. Come funzionerà esattamente?

(Solo GraphQL)

Fondamentalmente, dovremo:

1. Scrivere un po’ di codice NodeJS utilizzando i moduli NPM
2. convertirlo in codice compatibile con il frontend usando Browserify
3. Esportare il codice in modo da poterlo richiamare da altri file
4. Richiamare il codice dal nostro codice Javascript

Il comando per Browserify è:

browserify inputFile.js -o outputFile.js

L’outputFile.js conterrà il nostro codice compatibile con il frontend, quindi facciamo girare le cose, creiamo il nostro inputFile.js e apriamolo nel nostro IDE preferito.

19. Un po’ di codice NodeJS

(solo GraphQL)

Inizieremo aggiungendo il nostro modulo NPM al nostro codice, richiedendolo.

const { GraphQLClient } = require('graphql-request');

E creiamo un’esportazione globale con il nome che useremo per chiamare la nostra funzione, in questo caso, signUp:

global.singUp = function() {

}

A questo punto, possiamo iniziare ad aggiungere codice alla nostra funzione singUp.
Iniziamo aggiungendo l’URL del nostro endpoint, che si può recuperare dal GraphQL Playground:

const endpoint = 'https://parseapi.back4app.com/graphql';

E poiché abbiamo bisogno di autenticarci, istanziamo il nostro client GraphQL passando l’URL come parametro, insieme alle intestazioni di autenticazione: X-Parse-Application-ID e X-Parse-Javascript-Key. Queste contengono l’AppId e la Javascript Key, che abbiamo imparato a recuperare al passo 6.

const { GraphQLClient } = require('graphql-request')

global.singUp = function() {
    constendpoint='https://parseapi.back4app.com/graphql';
    
    constgraphQLClient=newGraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Javascript-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq".
        },
    });
}

Ora è il momento di scrivere alcune query e mutazioni GraphQL.

20. Query e mutazioni, generiche o specifiche

(solo GraphQL)

Al momento della stesura di questo documento, Back4app e Parse funzionano con query e mutazioni. Nuovi metodi possono essere sviluppati nel tempo, ma discutiamo di questi due.

Le query sono utilizzate quando si recuperano solo i dati dal server.

Le mutazioni sono utilizzate quando si modificano i dati sul server, che può o meno recuperare i risultati.

Quindi, se si stanno solo consumando informazioni, si dovrebbe usare una Query, mentre se si stanno aggiungendo o modificando informazioni, si dovrebbe usare una Mutazione.

Inizieremo con una semplice query per poi passare alle mutazioni.

A questo proposito, in GraphQL esistono metodi specifici e generici, ciascuno con i propri vantaggi e svantaggi.

I metodi generici consentono di operare in qualsiasi classe. Se si esegue una query generica, ad esempio, è possibile recuperare i dati specificando la classe desiderata. Questo è fantastico perché si può usare la stessa sintassi per quasi tutto e, usando le mutazioni, si possono creare classi e oggetti che all’inizio non esistono.

Lo svantaggio è che, non avendo schemi per i metodi generici, non si può fare affidamento sul completamento automatico, quindi bisogna sapere cosa si sta facendo.
Esempi di metodi generici get e find.
Le mutazioni generiche sono update, delete e create.

I metodi specifici, invece, hanno degli schemi e possono essere utilizzati solo da classi preesistenti. Questo è lo svantaggio.
Ma l’uso dei metodi specifici porta un altro livello di meraviglia, consentendoci di contare sul completamento automatico e di avere risorse molto più potenti per recuperare i nostri dati.
Le query specifiche inizieranno con get e find e avranno il nome della classe accanto: findPerson, getPerson e così via.
Le mutazioni specifiche iniziano con create, update e delete e hanno il nome della classe accanto: createPerson, getPerson, deletePerson:

21. Query

(solo GraphQL)

Creiamo una semplice query per giocare con GraphQL.
Nella dashboard di Parse, andare su API Console, quindi su GraphQL Console.
Digitare la seguente query utilizzando la query specifica per trovare un utente. In qualsiasi momento, è possibile premere CTRL + Barra spaziatrice (Windows) o OPTION + Barra spaziatrice (Mac) per avere il completamento automatico durante la digitazione.

Le query possono variare a seconda della versione di Parse scelta:

Parse 3.7.2:

query {
    oggetti{
        trova_utente{
            risultati{
                nome utente
                email
            }
        }
    }
}

Parse 3.8:

query {
  utenti{
      risultati{
          nome utente
          email
      }
  }
}

Parse 3.9:

query {
  utenti{
      risultati{
          nome utente
          email
      }
  }
}

Fare clic sul pulsante Riproduci:

Si dovrebbero vedere gli utenti creati con l’SDK Javascript. Se si è saltata questa parte, è sufficiente aggiungere alcuni utenti come descritto nel capitolo 7 e riprovare a eseguire la query. Si dovrebbero vedere risultati come questo:

Abbiamo appena usato la query specifica find_User per trovare tutti gli utenti, recuperando il loro nome utente e la loro e-mail. Abbiamo specificato esattamente ciò che volevamo recuperare, generando un payload più piccolo e contando sul completamento automatico per aiutarci a sviluppare in modo che durante il processo sapessimo quali operazioni erano disponibili.

Fantastico, eh?

Miglioriamo!

22. Mutazioni

(solo GraphQL)

Creiamo la nostra mutazione GraphQL con il metodo specifico signUp per operare proprio come il nostro metodo signUp in Javascript.

La mutazione sarà così:

Parse 3.7.2

mutazione{
  utenti{
    signUp(campi: {
      nome utente: "john"
      password: "123456"
      email: "[email protected]"
    }){
      oggettoId
    }
  }
}

Parse 3.8

mutazione SignUp{
  signUp(campi:{
    nome utente: "somefolk"
    password: "somepassword"
  }){
    oggettoId
    creatoAt
  }
}

Parse 3.9

mutazione SignUp{
  signUp(campi:{
    nome utente: "somefolk"
    password: "somepassword"
  }){
    id
    creatoAt
    sessionToken
  }
}

Eseguire e verificare che l’utente sia stato aggiunto alla classe User nel browser del database.

Evviva! Ora vediamo come funziona nel nostro codice.

23. Il nostro metodo signUp con GraphQL

(solo GraphQL)

Per il nostro metodo javascript di signUp, useremo una Mutazione che è quasi uguale a quella che abbiamo usato sul GraphQL Playground, ma mentre lì abbiamo usato valori hardcoded, qui dobbiamo impostare le variabili in modo che assumano i valori che l’utente digita sui form.

Per usare le variabili sul client GraphQL che stiamo usando, dobbiamo prima specificare i nomi e i tipi di variabili nel metodo. Passeremo 3 variabili per il nostro metodo signUp: username, password ed email, che sono tutte stringhe, quindi il nostro metodo singUp sarà:

const signUpMutation = /* GraphQL */
`
mutazione signUp($nomeutente: Stringa! $password: Stringa! $email: Stringa!){
    
}
`

Poi dobbiamo usare queste variabili all’interno del nostro metodo create_User, in questo modo:

Parse 3.7.2

        
        utenti{
            signUp(campi: {
              nome utente: $nome utente
              password: $password
              email: $email
            }){
              oggettoId
            }
        }

Parse 3.8

        
        utenti{
            signUp(campi: {
              nome utente: $nome utente
              password: $password
              email: $email
            }){
              oggettoId
            }
        }

Parse 3.9

        
        utenti{
            signUp(campi: {
              nome utente: $nome utente
              password: $password
              email: $email
            }){
              id
            }
        }

E infine impostare i valori in un altro oggetto JSON, che sarà passato come parametro insieme alla Mutazione:

const variables = {
        nomeutente: formUsername,
        password: formPassword,
        email: formEmail
    }

Ora, si noti che ho 3 valori, formUsername, formPassword e formEmail, che recupererò dal form e passerò alla nostra funzione singUp, quindi devo specificarli nei parametri della funzione:

global.singUp = function(formUsername, formPassword, formEmail)

E siamo pronti!

Ecco il metodo completo:

const { GraphQLClient } = require('graphql-request')

global.signUp = function(formUsername, formPassword, formEmail) { 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        header: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq".
        },
    })

    const signUpMutation = /* GraphQL */
    `
    mutazione signUp($username: String! $password: String! $email: String!){
        utenti{
            signUp(campi: {
                nome utente: $nome utente
                password: $password
                email: $email
            }){
                oggettoId
            }
        }
    }
    `

    const variabili = {
        username: formUsername,
        password: formPassword,
        email: formEmail
    }

    const data = graphQLClient.request(signUpMutation, variables).then(data => {
        alert('Urrà! Utente creato!')
    }).catch(error => {
        alert('Errore: ' + error.code + ' ' + error.message)
    })
    
}

24. E visto che siamo qui… LogIn…

(solo GraphQL)

Poiché ho già spiegato tutti i passaggi della mutazione singUp, mi limiterò a lasciare il codice per il metodo logIn, che segue esattamente gli stessi principi, ma utilizzando la specifica mutazione logIn:

mutazione logIn($nomeutente: Stringa! $password: Stringa!){
  utenti{
    logIn(username: $username password: $password){
    	sessionToken  
    }
  }
}

E il codice completo sarebbe:

global.logIn = function(formUsername, formPassword){
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq".
        },
    })

    const logInMutation = /* GraphQL */
    `
    mutazione logIn($nomeutente: String! $password: String!){
        utenti{
            logIn(username: $username password: $password){
                sessionToken  
            }
        }
    }
    `

    const variabiliLogIn = {
        username: formUsername,
        password: formPassword
    }

    const data = graphQLClient.request(logInMutation, variablesLogIn).then(data => {
        alert('Urrà! L'utente si è connesso!')
    }).catch(error => {
        alert('Errore :' + error.code + ' ' + error.message)
    })
}

25. Browserifying (come si dice?)

(solo GraphQL)

Ricordate che nel capitolo 18 vi ho dato il comando per broserificare (ovvero trasformare i nostri moduli NPM in moduli compatibili con il frontend)?
Se non lo ricordate, eccolo di nuovo:

browserify inputFile.js -o outputFile.js

Eseguiamolo sul nostro inputFile.js e produciamolo in un file chiamato graphql.js:

browserify inputFile.js -o graphql.js

Se tutto è andato a buon fine, non dovremmo avere alcun output:

È stato facile, eh?

26. Includere il nostro nuovo codice in HTML

(solo GraphQL)

Nel tag head del nostro file HTML, includiamo il file graphql.js generato.
E visto che ci siamo, creare anche un nuovo file vuoto, chiamato Parse.js, e includere anche questo. Lo useremo per chiamare i nostri metodi GraphQL:

<script src="./graphql.js"></script>
<scriptsrc="./Parse.js"></script>

Attenzione: Nel caso in cui abbiate saltato la parte Javascript del tutorial, tornate al capitolo 10 e cambiate gli ID dei tag HTML come descritto lì. Questa parte ci servirà per recuperare i valori dai moduli.

27. Mostrami un po’ di azione!

(solo GraphQL)

Abbiamo fatto molti progressi fino a qui, eh? Aggiungiamo un po’ di codice per ottenere qualche azione!

Di nuovo, se avete saltato la sezione Javascript, tornate al capitolo 10 e date un’occhiata a come usiamo Javascript per leggere i valori dai moduli usando il metodo getElementById:

document.getElementById("idOfTheInput").value

Apriamo quindi il nostro file Parse.js e aggiungiamo i nostri due metodi, logIn e singUp:

function parseSignUp(){

}

function parseLogIn(){

}

Aggiungiamo anche il codice per la lettura dei valori dai moduli, insieme a un codice di validazione dell’uguaglianza delle password, di nuovo spiegato nel capitolo 10:

function parseSingnUp(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    se (password !== passwordverify){
        alert ('Le password non corrispondono')
        return;
    }

}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

}

Ma questa volta, invece di usare l’SDK Javascript, chiamiamo i metodi signUp e logIn dal nostro file graphql.js. Il codice completo sarà quindi

function parseSingnUp(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    se (password !== passwordverify){
        alert ('Le password non corrispondono')
        return;
    }

    signUp(username, password, email)
}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

    logIn(utente, pass)
}

Oh, e non dimenticate di richiamare gli eventi onClick nel file HTML:

Distribuite tutto come spiegato nel capitolo 3 e siamo pronti per…

28. Test

(solo GraphQL)

Accedere al sito web e andare alla sezione Iscriviti. Compilare il modulo e premere il pulsante Iscriviti:

Se tutto ha funzionato, si dovrebbe vedere il nuovo utente nella tabella Utenti:

Ora tornate alla sezione Sign In e provate ad accedere con quell’utente:

Se tutto ha funzionato come previsto, ora si dovrebbe essere connessi:

29. Conclusione della parte GraphQL

Fiuuuuu! So che sono state molte informazioni, ma ora siete diventati dei maestri dell’accesso e della registrazione! Congratulazioni!

GraphQL potrebbe sembrare un po’ più problematico al primo contatto, con qualche processo in più da utilizzare, ma credetemi: quando avrete preso la mano nel vostro processo di sviluppo, sarà un gioco da ragazzi!

Ora abbiamo un codice molto più organico e facile da mantenere, che abbiamo realizzato con l’aiuto di Autocomplete e abbiamo potuto testare e verificare le risposte sul GraphQL Playground ancora prima di iniziare la codifica. Questo è molto importante perché non solo è possibile scrivere e testare tutte le query prima di produrre il codice, ma anche perché è possibile dividere lo sviluppo per un team: alcuni sviluppatori possono scrivere le query GraphQL mentre altri scrivono il codice Javascript, accelerando l’intero processo.

Inoltre, se d’ora in poi dovrete modificare qualcosa nel vostro codice, basterà cambiare le query e sarete a posto.

Si può fare di meglio? Certo che sì!

Utilizzando la stessa sintassi è possibile riutilizzare le query GraphQL per ogni piattaforma. È simile a tutti i linguaggi. Non dovrete più chiedervi “come faccio in questo linguaggio che non conosco?”. Stesse query, lingue diverse.

Spero che darete una possibilità a GraphQL nel vostro processo di sviluppo. Sono sicuro che rimarrete stupiti da quanto potrete raggiungere!