Beherrschung der Web-API-Authentifizierung mit Parse – Javascript SDK und GraphQL-Varianten

Viele Anwendungen, vor allem Websites, müssen den Zugriff auf ihre Inhalte beschränken, und Benutzerkonten, die nur die für den jeweiligen Benutzer relevanten Informationen anzeigen, sind der beliebteste Weg, dies zu erreichen.

Heute werden wir lernen, wie man die Login-Funktionalität in eine bereits bestehende HTML-Seite implementiert, indem man sehr wenig Code schreibt und Parse die ganze Arbeit für einen erledigt.

Wir werden zwei verschiedene Technologien verwenden, aus denen Sie wählen können: das Javascript SDK und GraphQL durch Javascript.

GraphQL ist unsere brandneue, glänzende Technologie, die gerade veröffentlicht wurde, und mein Ziel ist es, beide Möglichkeiten zu vergleichen, um das Gleiche zu tun, so dass Sie diejenige auswählen können, die Ihnen am besten gefällt.
SPOILER-ALARM!! Ich bin sicher, dass Sie GraphQL besser finden werden…

Das hat bereits alle notwendigen Dateien für die visuelle Anzeige der Datei, aber es fehlt an Funktionalität, die wir noch hinzufügen werden.

Wenn Sie mehr über GraphQL wissen wollen, schauen Sie sich diesen Beitrag an: Was ist GraphQL?

Dies wird ein recht umfangreicher Artikel, also lassen Sie mich Ihnen kapitelweise zeigen, was Sie genau lernen werden:

1. Einrichten Ihres Webhostings in Back4app
2. Aktivieren der GraphQL-Nutzung
3. Bereitstellen Ihrer ersten Website
4. Erstellen Sie Ihre erste Javascript-Datei
5. Einbinden des Parse SDK
6. Konfigurieren und instanziieren Sie das SDK in Ihrem Code
7. Benutzer grafisch hinzufügen
8. Verwenden Sie das Javascript SDK, um einen Benutzer anzumelden
9. Testen Sie die Anmeldung mit Ihrer Website (fest kodierte Werte)
10. Schreiben Sie Code, um Formulare zu lesen und auf Ihren Javascript-Code anzuwenden
11. Testen Sie die Anmeldung mit Ihrer Website (dynamische Werte)
12. Erstellen Sie den Log-In Prozess mit dem Javascript SDK
13. Testen Sie die Anmeldung mit Ihrer Website (dynamische Werte)
14. Abschluss des Javascript SDK Teils
15. Einführung in GraphQL
16. Was Sie für die Nutzung von GraphQL benötigen
17. Installation der benötigten Tools
18. Eine kurze Erklärung, wie wir den Code für das Frontend generieren werden
19. Verwendung von NPM-Modulen für Ihren NodeJS-Code
20. Einführung in Abfragen und Mutationen in GraphQL
21. Abfragen
22. Mutationen
23. Erstellen Sie Ihre eigene GraphQL SingUp Methode
24. Erstellen Sie Ihre eigene GraphQL-LogIn-Methode
25. Verwenden Sie Browserify, um Ihren NodeJS-Code in Frontend-kompatiblen Code umzuwandeln
26. Fügen Sie diesen Code in Ihre HTML-Datei ein
27. Codieren Sie Javascript-Funktionen, um den von Browserify generierten Code aufzurufen
28. Testen Sie Ihr GraphQL SignUp und Login
29. Zusammenfassung des GraphQL Teils

1. Erste Schritte

Der allererste Schritt ist die Erstellung Ihrer App in Back4app, falls Sie noch keine haben. Sie können die Schritte zur Erstellung einer App in diesem Dokument nachlesen.

Dieser Schritt ist für beide Technologien gleich, also unabhängig davon, für welche Sie sich entscheiden, müssen Sie diesen Schritt durchführen.

Nachdem wir unsere App erstellt haben, müssen wir die Webhosting-Funktion einstellen. Ja. Sie können Ihre Websites mit statischem Inhalt kostenlos auf Back4app hosten. Großartig, oder?

Nachdem Sie Ihre App erstellt haben, gehen Sie zu den Servereinstellungen:

Klicken Sie unter Webhosting und Live Query auf Einstellungen:

Aktivieren Sie nun Back4app Hosting und wählen Sie einen guten Domainnamen für Ihre Anwendung. Sie können direkt auf diese Domain innerhalb von back4app.io zugreifen, oder Sie können einen CNAME-Eintrag in Ihrem DNS erstellen, der auf diese Domain verweist, wenn Sie möchten:

Jetzt können Sie mit der Bereitstellung von Code beginnen.

2. Wie sieht es mit GraphQL aus?

Wenn Sie GraphQL verwenden möchten, ist ein weiterer Schritt erforderlich. Wenn Sie nur das Javascript-SDK verwenden möchten, können Sie jede Parse-Version verwenden, aber warum nicht die neueste und beste?

Gehen Sie zu den Servereinstellungen:

Und unter Settings in Manage Parse Server:

Wählen Sie eine Version, die älter als 3.5.0 ist. Bei Back4app habe ich 3.6.0 verwendet:

Jetzt sollte GraphQL aktiviert sein und wir sind startklar!
Oh, nur damit Sie es wissen, Sie können GraphQL und SDKs für dieselbe App verwenden. Sie müssen sich nicht entscheiden.

Wenn Sie nur an GraphQL interessiert sind, können Sie jetzt zu Kapitel 15 dieses Tutorials scrollen.

3. Einrichten Ihrer ersten Website

Nun, da wir das Webhosting-Feature eingestellt haben, können wir unsere Website bereitstellen.
Auch dieser Schritt ist für beide Technologien gleich.
Sie wird noch keine Funktionen haben, aber es fühlt sich gut an, sie zum ersten Mal funktionieren zu sehen, also fangen wir damit an.

Gehen Sie noch einmal zu den Servereinstellungen:

Wählen Sie nun Einstellungen unter Cloud Code:

Dort finden Sie zwei Ordner: Cloud und Public.

Cloud ist für die Bereitstellung von Cloud Code, d.h. NodeJS-Code, der von den Back4app-Servern ausgeführt wird und die gesamte Last der Verarbeitung für Ihre Anwendungen übernimmt, was viele Vorteile mit sich bringt, wie z.B. das Einsparen von Akku und Datentarif in Mobiltelefonen, da das Mobiltelefon selbst nicht viel verarbeiten und auch nicht die gesamte Datenmenge abrufen muss, sondern sich nur auf das Endergebnis der Verarbeitung verlässt, das von den Back4app-Servern geliefert wird.

Der öffentliche Bereich dient der Bereitstellung statischer Inhalte wie HTML-, CSS- und statischer Javascript-Dateien. Dies ist der Ordner, an dem wir im Moment interessiert sind.
Wählen Sie diesen Ordner aus, klicken Sie auf die Schaltfläche +ADD und fügen Sie sowohl die HTML- als auch die CSS-Dateien für unsere Vorlage hinzu, die Sie im ersten Kapitel von der Website heruntergeladen haben.

Nachdem Sie diese Dateien ausgewählt haben, klicken Sie auf die Schaltfläche Deploy und Sie sollten die Dateien im Ordner Public sehen:

Nun ist es an der Zeit, einige Tests durchzuführen.
Wenn Sie die URL aufrufen, die Sie beim Webhosting eingestellt haben, sollten Sie sehen, dass Ihre neue Website jetzt völlig kostenlos läuft:

4. Bringen Sie etwas Intelligenz ins Spiel

Eine schicke, glänzende neue Website ist eingerichtet und läuft, und wie lange haben wir dafür gebraucht? 2 Minuten? Sieh mal einer an, das war umsonst, Internet!
Und habe ich Ihnen schon gesagt, dass sie völlig sicher ist und HTTPS bereits eingebaut hat? Denn wir zahlen nicht für Zertifikate, wenn Back4app sie kostenlos zur Verfügung stellt, oder?

Jetzt ist es an der Zeit, etwas Intelligenz in die Sache zu bringen. Und wie wäre es, wenn wir dafür nur noch 2 Minuten brauchen? Ich mag es intelligent und ich mag es schnell.

Starten Sie Ihre bevorzugte IDE-Variante und lassen Sie uns ein bisschen Javascript machen. Visual Studio Code für mich, bitte. Und einen Espresso dazu.

Von nun an werde ich mich nur noch auf Javascript SDK konzentrieren und später nur noch auf GraphQL.

Erstellen Sie eine neue Datei namens Parse.js und schon kann es losgehen.

5. Hinzufügen des Parse Frameworks

(nur Javascript SDK)

Parse macht es gaaaaanz einfach, seine Frameworks einzusetzen. Zunächst müssen Sie das Javascript-Framework instanziieren, indem Sie die folgende Zeile in den Head-Abschnitt Ihrer index.html-Datei einfügen:

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

Jetzt kann das vollständige Parse-Framework (minified) von Ihrem Javascript-Code aus aufgerufen werden, und wir können alles davon verwenden.

6. Parse-Motoren einschalten

(nur Javascript SDK)

Jetzt haben wir bereits Zugriff auf das Parse-Framework, aber wir müssen es noch starten, bevor wir das Gaspedal durchtreten können.

Dazu müssen wir unsere Anwendung bei Parse identifizieren und die AppId und den Javascript-Schlüssel für unsere Anwendung festlegen, zusammen mit der Server-URL, die unserer Anwendung mitteilt, dass wir in Back4app laufen.

Gehen Sie dazu zu den Servereinstellungen:

und in den Einstellungen unter Core Settings:

finden Sie alle Informationen, die Sie benötigen:

Kopieren Sie diese Informationen und fügen Sie sie wie folgt in unsere Datei Parse.js ein:

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

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

Jetzt hat unsere Anwendung vollen Zugriff auf Parse und Parse kennt unsere Einstellungen, so dass es arbeiten kann.
Grünes Licht. Vollgas!

7. Aber ich habe nur ein paar Benutzer…

Wenn Ihre Anwendung keine Benutzerregistrierung benötigt und Sie es vorziehen, diese manuell zu verwalten, können Sie die Benutzerklasse im Datenbank-Browser des Parse-Dashboards über die Schaltfläche Zeile hinzufügen aufrufen:

Realistisch betrachtet wird Ihre Anwendung aber wahrscheinlich im Laufe der Zeit wachsen, und die Möglichkeit, dass sich die Benutzer selbst im System registrieren können, ist hilfreich.

8. Keine Benutzer? Kein Problem! signUp() ist die Rettung!

(nur Javascript SDK)

Am Anfang wird Ihre Anwendung noch keine Benutzer haben, also müssen wir eine Möglichkeit schaffen, dass sich die Benutzer registrieren können.

Unsere Website hat bereits ein schönes Formular dafür. Dann wollen wir es mal zum Laufen bringen.
Und was wäre, wenn ich Ihnen sage, dass wir das mit weniger als 12 Zeilen Code machen können? Klingt das besser?

Die Klasse Parse.User hat drei grundlegende Eigenschaften, die Sie einstellen können. Sie können mehr einstellen, wenn Sie wollen oder brauchen, aber diese drei sind bereits aus Gründen der Bequemlichkeit angelegt und zwei dieser drei sind obligatorisch:

• Benutzername (obligatorisch)
• Passwort (obligatorisch)
• E-Mail (optional)

Fügen wir einen Testbenutzer zu unserer Datenbank hinzu, um die Funktionsweise zu überprüfen. Fügen Sie dies in Ihre Parse.js-Datei ein:

function singnUp(){
    var user = new Parse.User();
    user.set("username", "alex"); // setzt den Wert aus dem Formular Benutzername auf die Eigenschaft username
    user.set("password", "abc123"); // setzt den Wert aus dem Formular "Password" auf die Eigenschaft password
    user.set("email", "[email protected]"); // setzt den Wert aus dem Email-Formular auf die Eigenschaft email
    try {
        user.signUp(); // Alles hat funktioniert und der Benutzer hat sich angemeldet
    } catch (Fehler) {
        alert("Fehler: " + error.code + " " + error.message); // Ups... da ist was falsch gelaufen
    }
}

So wird ein neuer Benutzer mit fest kodierten Werten erstellt:

benutzername: alexk
Kennwort: abc123
E-Mail: [email protected]

Wir werden im weiteren Verlauf dieses Artikels lernen, wie man diese Werte aus dem Formular abruft, aber für diesen Testbenutzer ist dies ausreichend.

Öffnen Sie nun Ihre Datei index.html und suchen Sie nach dieser Zeile:

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

Und ändern Sie sie in diese:

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

Im Grunde haben wir hier ein onClick-Ereignis gesetzt, um die Funktion signUp auszulösen, die wir gerade programmiert haben.

Stellen Sie beide Dateien im Ordner Cloud Code Public bereit (die neue Datei Parse.js und die geänderte Datei index.html), wie Sie es oben gelernt haben, und öffnen Sie die Website erneut in Ihrem Browser.

9. Testen… Testen… 123…

Zeit für ein paar Tests, Baby! Lass den Code für sich selbst sprechen!

Gehen Sie zum Abschnitt Sign Up (Sie müssen nichts ausfüllen, da wir keine echten Daten übergeben, sondern nur einen hart kodierten Test) und klicken Sie auf die Schaltfläche Sign Up:

Wenn alles geklappt hat, sollten Sie in Ihrem Parse-Dashboard sehen, dass Sie jetzt diesen Benutzer zusammen mit einer neuen Sitzung für den Benutzer haben:

10. Hurra!! Jetzt machen wir es intelligenter…

(Javascript SDK & GraphQL)

Jetzt, wo wir Benutzer anmelden können, wollen wir die voll funktionsfähige signUp-Funktion erstellen.
Wir müssen die Werte des Formulars lesen, um sie in die Datenbank einzufügen, und dafür werden wir die Javascript-Methode verwenden:

document.getElementById("idOfTheInput").value

Beim Schreiben dieses Artikels habe ich festgestellt, dass die von uns verwendete Vorlage ein kleines Problem aufweist. Die IDs müssen eindeutig sein, damit wir die richtigen Werte abrufen können, und unsere Vorlage hat ein paar Wiederholungen, wahrscheinlich durch Kopieren und Einfügen von Code durch den Ersteller, also ändern wir das.

Gehen Sie zu Ihrer HTML-Datei und suchen Sie die folgenden Zeilen im Abschnitt 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" type="text" class="input">

Beachten Sie, dass sich das Attribut id in diesen Zeilen einige Male im Code wiederholt. Ändern wir das für eindeutige Einträge:

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

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

    if (password !== passwordverify){
        alert ('Passwörter stimmen nicht überein')
        zurückgeben;
    }

    user.set("username", "alexk"); // setzt den Wert aus dem Formular Benutzername in die Eigenschaft username
    user.set("password", "abc123"); // setzt den Wert aus dem Formular "Password" in die Eigenschaft password
    user.set("email", "[email protected]"); // setzt den Wert aus dem Email-Formular auf die Eigenschaft email

    user.set("username", alexl); // setzt den Wert aus dem Formular "Username" auf die Eigenschaft username
    user.set("password", password); // setzt den Wert aus dem Formular "Password" auf die Eigenschaft password
    user.set("email", email); // setzt den Wert aus dem Email-Formular in die Eigenschaft email

11. Wieder Zeit zum Testen. Jetzt in echt.

12. Zeit für die Anmeldung, Baby!

(nur Javascript SDK)

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

Parse.User.logIn(user, pass).then(() => {
    // Hurra! Benutzer eingeloggt
    alert('Hurra, der Benutzer ist eingeloggt!');
});

Parse.User.logIn(user, pass).then(() => {
    // Hurra! Benutzer eingeloggt
    alert('Hurra, der Benutzer ist eingeloggt!');
}).catch(function(error){
    // Ups... etwas ist schief gelaufen
    alert("Fehler: " + error.code + " " + error.message);
});

13. Und noooow….

14. Abschluss des Javascript SDK Teils

15. Lassen Sie die GraphQL herein

Wenn Sie sich über das Javascript SDK gefreut haben, dann holen Sie sich jetzt Popcorn, denn die Show geht gleich los.

Back4app unterstützt jetzt GraphQL, was bedeutet, dass wir mit dem neuesten und größten Trend in der Technologie Schritt halten, und jetzt ist Parse schlauer als je zuvor!

Sie können sich auf einen voll funktionsfähigen GraphQL Playground mit Autovervollständigung (ja!!!) verlassen, um die Abfragen zu generieren, die wir machen werden.

Außerdem können wir genau spezifizieren, was wir abrufen wollen, was sich in kleineren Nutzdaten niederschlägt, wodurch Ihre Daten schneller an die Endnutzer geliefert werden und APIs soooooo viel einfacher zu pflegen sind.

Nun gut. Genug geredet. GraphQL ist so genial, wenn ich nicht aufhöre, werde ich weiter darüber schreiben und nicht zeigen, wie man es benutzt.

16. Was wir brauchen werden

(nur GraphQL)

Wenn Sie Ihre Parse-Version nicht auf mindestens 3.5.0 geändert haben (3.6.0 auf Back4app ist die früheste Version, die GraphQL unterstützt), gehen Sie bis zu Abschnitt 2 dieses Artikels und tun Sie das.

Wir müssen NPM installieren, damit wir seine Module verwenden können.
Diese Module sind in NodeJS geschrieben und ursprünglich für die Backend-Programmierung gedacht, also müssen wir das ändern.
Ich werde Ihnen nicht zeigen, wie Sie NPM installieren, da das Tutorial auf der obigen Website dies recht ausführlich behandelt.
Ich werde Ihnen jedoch zeigen, wie Sie diese verwenden können, damit wir beim Programmieren eine Menge Aufwand sparen.

Sind Sie bereit? Dann installieren Sie diese Tools, schnallen Sie sich an und los geht’s!

17. Installieren des GraphQL-Clients und von Browserify

(nur GraphQL)

Für GraphQL gibt es einige Clients, die Sie verwenden können. Da ich mich nicht für einen entscheiden konnte (weil sie alle ziemlich gut sind), habe ich mich in diesem ersten Tutorial für den am einfachsten zu konfigurierenden entschieden und verwende die anderen in den nächsten Tutorials, damit wir sie vergleichen können.

Ich habe festgestellt, dass graphql-request am einfachsten einzurichten ist. Man kann es installieren, indem man ein Terminal öffnet, in den Ordner geht, in dem sich unsere Parse.js befindet, und eintippt:

npm install graphql-request

Wenn die Installation erfolgreich war, sollten Sie etwas wie dieses Ergebnis erhalten:

Wir können auch ein Tool namens Browserify installieren.
Browserify sorgt für den Übergang der NPM-Module zur Verwendung im Frontend (Ihrem Browser). Erinnern Sie sich, als ich sagte, dass NPM-Module ursprünglich für die Verwendung im Backend gedacht sind? Dieses Tool macht sie mit minimalem Aufwand auf dem Frontend verfügbar.
Ich installiere es gerne global (mit dem Schlüssel -g), damit ich es von überall aus nutzen kann:

npm install -g browserify

Und wenn alles gut funktioniert, sollten Sie so etwas wie das hier haben:

Jetzt haben wir unseren GraphQL-Client installiert und können ihn für die Verwendung im Frontend konvertieren. Das hat 2 Minuten gedauert, wir kommen also schnell voran.

18. Wie genau soll das funktionieren?

(nur GraphQL)

Im Grunde genommen werden wir:

1. NodeJS-Code mit Hilfe der NPM-Module schreiben
2. Konvertieren Sie ihn mit Browserify in Frontend-kompatiblen Code
3. Diesen Code exportieren, damit wir ihn aus anderen Dateien aufrufen können
4. Diesen Code von unserem Javascript-Code aus aufrufen

Der Befehl für Browserify lautet:

browserify inputDatei.js -o outputDatei.js

Die outputFile.js wird unseren Frontend-kompatiblen Code enthalten, also machen wir uns an die Arbeit, erstellen unsere inputFile.js und öffnen sie in unserer bevorzugten IDE.

19. Etwas NodeJS-Code

(nur GraphQL)

Wir beginnen mit dem Hinzufügen unseres NPM-Moduls zu unserem Code, indem wir es anfordern.

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

Und erstellen Sie einen globalen Export mit dem Namen, den wir für den Aufruf unserer Funktion verwenden werden, in diesem Fall signUp:

global.singUp = function() {

}

Damit können wir mit dem Hinzufügen von Code zu unserer singUp-Funktion beginnen.
Beginnen wir mit dem Hinzufügen unserer Endpunkt-URL, die Sie von Ihrem GraphQL Playground abrufen können:

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

Und da wir uns authentifizieren müssen, instanziieren wir unseren GraphQL-Client und übergeben die URL als Parameter zusammen mit den Authentifizierungs-Headern: X-Parse-Application-ID und X-Parse-Javascript-Key. Diese enthalten die AppId und den Javascript-Schlüssel, deren Abruf Sie in Schritt 6 gelernt haben.

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"
        },
    });
}

Nun ist es an der Zeit, einige GraphQL-Abfragen und Mutationen zu schreiben.

20. Abfragen und Mutationen, allgemein oder spezifisch

(nur GraphQL)

Zum Zeitpunkt der Erstellung dieses Dokuments arbeiten Back4app und Parse mit Abfragen und Mutationen. Neue Methoden können im Laufe der Zeit entwickelt werden, aber lassen Sie uns diese beiden diskutieren.

Abfragen werden verwendet, wenn nur Daten vom Server abgefragt werden.

Mutationen werden verwendet, wenn Sie Daten auf dem Server ändern, die auch Ergebnisse abrufen können oder nicht.

Wenn Sie also nur Informationen abrufen wollen, sollten Sie eine Abfrage verwenden, und wenn Sie Informationen hinzufügen oder ändern wollen, sollten Sie eine Mutation verwenden.

Wir werden mit einer einfachen Abfrage beginnen und uns dann zu Mutationen weiterentwickeln.

Während wir darüber sprechen, haben wir spezifische und generische Methoden in GraphQL, jede mit ihren eigenen Vor- und Nachteilen.

Generische Methoden erlauben es Ihnen, in jeder Klasse zu operieren. Wenn Sie zum Beispiel eine generische Abfrage machen, können Sie Daten abrufen, indem Sie die gewünschte Klasse angeben. Das ist großartig, weil man für fast alles die gleiche Syntax verwenden kann, und wenn man Mutationen verwendet, kann man Klassen und Objekte erstellen, die zunächst gar nicht existieren.

Der Nachteil ist, dass man sich nicht auf die Autovervollständigung verlassen kann, da es keine Schemas für generische Methoden gibt, man muss also wissen, was man tut.
Beispiele für generische Methoden get und find.
Generische Mutationen sind update, delete oder create.

Spezifische Methoden hingegen haben Schemata, so dass sie nur von bereits existierenden Klassen verwendet werden können. Dies ist der Nachteil.
Die Verwendung spezifischer Methoden bringt jedoch eine weitere Ebene der Ungeheuerlichkeit mit sich, da wir uns auf die Autovervollständigung verlassen können und viel leistungsfähigere Ressourcen zum Abrufen unserer Daten haben.
Spezifische Abfragen beginnen mit get und find, und haben den Klassennamen direkt daneben: findPerson, getPerson und so weiter.
Spezifische Mutationen beginnen mit create, update und delete und haben den Klassennamen daneben: createPerson, getPerson, deletePerson:

21. Abfragen

(nur GraphQL)

Lassen Sie uns eine einfache Abfrage erstellen, um mit GraphQL zu spielen.
Gehen Sie in Ihrem Parse Dashboard auf API-Konsole und dann auf GraphQL-Konsole.
Geben Sie die folgende Abfrage ein, indem Sie die spezifische Abfrage für die Suche nach einem Benutzer verwenden. Sie können jederzeit STRG + Leertaste (Windows) oder OPTION + Leertaste (Mac) drücken, um die Autovervollständigung während der Eingabe zu aktivieren.

Die Abfragen können je nach der von Ihnen gewählten Parse-Version variieren:

Parse 3.7.2:

Abfrage {
    Objekte{
        find_User{
            Ergebnisse{
                Benutzername
                E-Mail
            }
        }
    }
}

Parse 3.8:

Abfrage {
  Benutzer{
      Ergebnisse{
          Benutzername
          E-Mail
      }
  }
}

Parse 3.9:

Abfrage {
  Benutzer{
      Ergebnisse{
          Benutzername
          E-Mail
      }
  }
}

Klicken Sie auf die Schaltfläche Play:

Sie sollten die Benutzer sehen, die wir mit dem Javascript SDK erstellt haben. Wenn Sie diesen Teil übersprungen haben, fügen Sie einfach ein paar Benutzer hinzu, wie in Kapitel 7 beschrieben, und versuchen Sie, Ihre Abfrage erneut auszuführen. Sie sollten die folgenden Ergebnisse sehen:

Wir haben gerade die spezifische Abfrage find_User verwendet, um alle Benutzer zu finden und ihren Benutzernamen und ihre E-Mail abzurufen. Wir haben genau spezifiziert, was wir abrufen wollten, und dabei eine kleinere Nutzlast erzeugt, während wir uns auf Autocomplete verlassen haben, um uns bei der Entwicklung zu helfen, so dass wir während des Prozesses wussten, welche Operationen verfügbar waren.

Toll, nicht wahr?

Machen wir es noch besser!

22. Mutationen

(nur GraphQL)

Erstellen wir unsere GraphQL-Mutation mit der spezifischen Methode signUp, die genau wie unsere signUp-Methode in Javascript funktioniert.

Die Mutation wird wie folgt aussehen:

Parse 3.7.2

mutation{
  Benutzer{
    signUp(fields: {
      benutzername: "john"
      Kennwort: "123456"
      email: "[email protected]"
    }){
      objectId
    }
  }
}

Parse 3.8

Mutation SignUp{
  signUp(felder:{
    Benutzername: "somefolk"
    password: "somepassword"
  }){
    objectId
    createdAt
  }
}

Parse 3.9

Mutation SignUp{
  signUp(felder:{
    Benutzername: "somefolk"
    password: "somepassword"
  }){
    id
    createdAt
    sessionToken
  }
}

Führen Sie den Vorgang aus und überprüfen Sie, ob der Benutzer im Datenbank-Browser zur Klasse User hinzugefügt wurde.

Juhu! Jetzt können wir es in unserem Code anwenden.

23. Unsere eigene signUp Methode mit GraphQL

(nur GraphQL)

Für unsere Javascript-SignUp-Methode werden wir eine Mutation verwenden, die fast dieselbe ist wie die, die wir auf dem GraphQL-Playground verwendet haben, aber während wir dort fest kodierte Werte verwendet haben, müssen wir hier Variablen so setzen, dass sie Werte annehmen, die der Benutzer in die Formulare eingibt.

Um Variablen auf dem von uns verwendeten GraphQL-Client zu verwenden, müssen wir zunächst die Variablennamen und -typen in der Methode angeben. Wir werden 3 Variablen für unsere signUp-Methode übergeben: Benutzername, Passwort und E-Mail, die alle Strings sind, also wird unsere Methode singUp sein:

const signUpMutation = /* GraphQL */
`
mutation signUp($Benutzername: String! $Passwort: String! $E-Mail: String!){
    
}
`

Dann müssen wir diese Variablen in unserer create_User-Methode verwenden, etwa so:

Parse 3.7.2

        
        Benutzer{
            signUp(fields: {
              benutzername: $benutzername
              Kennwort: $Kennwort
              email: $email
            }){
              objectId
            }
        }

Parse 3.8

        
        Benutzer{
            signUp(fields: {
              benutzername: $benutzername
              Kennwort: $Kennwort
              email: $email
            }){
              objectId
            }
        }

Parse 3.9

        
        Benutzer{
            signUp(fields: {
              benutzername: $benutzername
              Kennwort: $Kennwort
              email: $email
            }){
              id
            }
        }

Und schließlich setzen Sie Werte für sie in einem anderen JSON-Objekt, das als Parameter zusammen mit der Mutation übergeben wird:

const variables = {
        benutzername: formUsername,
        Passwort: formPassword,
        email: formEmail
    }

Beachten Sie, dass ich dort drei Werte habe: formUsername, formPassword und formEmail, die ich aus dem Formular abrufen und an unsere singUp-Funktion übergeben werde:

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

Und schon sind wir fertig!

Hier ist die vollständige Methode:

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

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

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

    const signUpMutation = /* GraphQL */
    `
    mutation signUp($Benutzername: String! $Passwort: String! $E-Mail: String!){
        Benutzer{
            signUp(fields: {
                Benutzername: $Benutzername
                Passwort: $Passwort
                email: $email
            }){
                objectId
            }
        }
    }
    `

    const variables = {
        Benutzername: formUsername,
        Passwort: formPassword,
        email: formEmail
    }

    const data = graphQLClient.request(signUpMutation, variables).then(data => {
        alert('Hurra! Benutzer erstellt!')
    }).catch(error => {
        alert('Fehler: ' + error.code + ' ' + error.message)
    })
    
}

24. Und wenn wir schon mal hier sind… LogIn…

(nur GraphQL)

Da ich bereits jeden Schritt der singUp-Mutation erklärt habe, belasse ich es bei dem Code für die logIn-Methode, die genau denselben Prinzipien folgt, aber die spezielle Mutation logIn verwendet:

mutation logIn($username: String! $password: String!){
  Benutzer{
    logIn(benutzername: $benutzername passwort: $passwort){
    	sessionToken  
    }
  }
}

Und der vollständige Code würde lauten:

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 */
    `
    mutation logIn($Benutzername: String! $Passwort: String!){
        Benutzer{
            logIn(benutzername: $benutzername passwort: $passwort){
                sessionToken  
            }
        }
    }
    `

    const variablesLogIn = {
        Benutzername: formUsername,
        Passwort: formPassword
    }

    const data = graphQLClient.request(logInMutation, variablesLogIn).then(data => {
        alert('Hurra, der Benutzer hat sich angemeldet!')
    }).catch(error => {
        alert('Fehler :' + error.code + ' ' + error.message)
    })
}

25. Browserifying (wie bitte?)

(nur GraphQL)

Erinnern Sie sich an Kapitel 18, in dem ich Ihnen den Befehl zum Broserifizieren (d.h. zur Anpassung unserer NPM-Module an das Frontend) gegeben habe?
Falls nicht, hier ist er noch einmal:

browserify inputFile.js -o outputFile.js

Führen wir es auf unserer inputFile.js aus und geben es in eine Datei namens graphql.js aus:

browserify inputFile.js -o graphql.js

Wenn alles geklappt hat, sollten wir keine Ausgabe haben:

Wie einfach war das, hm?

26. Einbindung unseres glänzenden neuen Codes in HTML

(nur GraphQL)

Fügen Sie innerhalb des head-Tags unserer HTML-Datei die generierte Datei graphql.js ein.
Und wenn Sie schon dabei sind, erstellen Sie auch eine neue leere Datei namens Parse.js und binden Sie diese ebenfalls ein. Wir werden diese Datei verwenden, um unsere GraphQL-Methoden aufzurufen:

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

Achtung! Nur für den Fall, dass Sie den Javascript-Teil des Tutorials übersprungen haben, gehen Sie bitte zurück zu Kapitel 10 und ändern Sie die IDs der HTML-Tags wie dort beschrieben. Wir brauchen diesen Teil, um Werte aus den Formularen abrufen zu können.

27. Zeig mir etwas Action!

(nur GraphQL)

Bis hierhin haben wir eine Menge Fortschritte gemacht, oder? Fügen wir nun etwas Code hinzu, um etwas Action zu bekommen!

Wenn Sie den Javascript-Abschnitt übersprungen haben, gehen Sie zurück zu Kapitel 10 und schauen Sie sich an, wie wir Javascript verwenden, um Werte aus den Formularen mit der getElementById-Methode zu lesen:

document.getElementById("idOfTheInput").value

Öffnen wir also unsere Datei Parse.js und fügen unsere beiden Methoden logIn und singUp hinzu:

function parseSignUp(){

}

function parseLogIn(){

}

Fügen wir auch den Code zum Lesen der Werte aus den Formularen hinzu, zusammen mit einem Code zur Validierung der Passwortgleichheit, der ebenfalls in Kapitel 10 erklärt wird:

function parseSingnUp(){
    var benutzername = document.getElementById("benutzername").value;
    var passwort = document.getElementById("passwort").value;
    var passwortverify = document.getElementById("passwortverify").value;
    var email = document.getElementById("email").value;

    if (passwort !== passwortverify){
        alert ('Passwörter stimmen nicht überein')
        zurückgeben;
    }

}

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

}

Aber dieses Mal wollen wir nicht das Javascript SDK verwenden, sondern einfach unsere Methoden signUp und logIn aus unserer graphql.js-Datei aufrufen. Der vollständige Code lautet dann:

Funktion parseSingnUp(){
    var username = document.getElementById("username").value;
    var passwort = document.getElementById("passwort").value;
    var passwortverify = document.getElementById("passwortverify").value;
    var email = document.getElementById("email").value;

    if (passwort !== passwortverify){
        alert ('Passwörter stimmen nicht überein')
        zurückgeben;
    }

    signUp(benutzername, passwort, email)
}

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

    logIn(user, pass)
}

Oh, und vergessen Sie nicht, diese bei den onClick-Ereignissen in der HTML-Datei aufzurufen:

Setzen Sie alles wie in Kapitel 3 beschrieben ein und wir sind bereit für…

28. Testen von

(nur GraphQL)

Rufen Sie Ihre Website auf und gehen Sie zum Abschnitt Sign Up. Füllen Sie das Formular aus und klicken Sie auf die Schaltfläche Sign Up:

Wenn alles geklappt hat, sollten Sie Ihren neuen Benutzer in der Tabelle Users sehen:

Gehen Sie nun zurück zum Bereich Sign In und versuchen Sie, sich mit diesem Benutzer anzumelden:

Wenn alles wie erwartet funktioniert hat, sollten Sie jetzt angemeldet sein:

29. Abschluss des GraphQL-Teils

Puh! Ich weiß, das war eine Menge Information, aber jetzt sind Sie ein Meister der Anmeldung und des Logins! Herzlichen Glückwunsch!

GraphQL mag auf den ersten Blick etwas mühsamer erscheinen, mit ein paar mehr Prozessen, um verwendet zu werden, aber glauben Sie mir: wenn Sie den Dreh in Ihrem Entwicklungsprozess raus haben, wird es ein Kinderspiel sein!

Wir haben jetzt einen viel organischeren, leichter zu pflegenden Code, den wir mit Hilfe von Autocomplete erstellt haben, und konnten die Antworten auf dem GraphQL Playground testen und überprüfen, noch bevor wir mit der Codierung begonnen haben. Das ist sehr wichtig, weil man nicht nur alle Abfragen schreiben und testen kann, bevor man den Code produziert, sondern weil man jetzt die Entwicklung für ein Team aufteilen kann: ein paar Entwickler können die GraphQL-Abfragen schreiben, während andere den Javascript-Code schreiben, was den gesamten Prozess beschleunigt.

Noch besser: Wenn Sie von nun an etwas an Ihrem Code ändern müssen, brauchen Sie nur die Abfragen zu ändern, und schon kann es losgehen.

Kann es noch besser werden? Natürlich kann es das!

Durch die Verwendung der exakt gleichen Syntax können Sie die GraphQL-Abfragen für jede Plattform wiederverwenden. Sie ist ähnlich wie bei allen Sprachen. Sie müssen sich nicht mehr fragen: “Wie mache ich das in dieser Sprache, mit der ich nicht vertraut bin?”. Dieselben Abfragen, verschiedene Sprachen.

Ich hoffe, Sie geben GraphQL eine Chance in Ihrem Entwicklungsprozess. Ich bin mir ziemlich sicher, dass Sie erstaunt sein werden, wie viel Sie erreichen können!