In diesem Tutorial werden wir uns genauer ansehen, wie Sie Bubble und AppMaster. Nehmen wir an, dass das Frontend der zu entwickelnden Anwendung in Bubble erstellt wurde, dessen Fähigkeiten für die Arbeit mit dem Backend sich jedoch als unzureichend erwiesen haben, und Sie die Funktionalität von AppMaster nutzen möchten.
Lassen Sie uns herausfinden, wie:
- Verwenden Sie AppMaster als Datenbank für Bubble
- Senden von API-Anfragen an Appmaster
- Benutzerauthentifizierung durchführen
- Autorisierungs-Token in Anfrage-Headern verwenden
Konfigurieren von API Connector
Zuallererst müssen Sie die Möglichkeit schaffen, externe API-Anfragen von Bubble aus zu senden. Dazu müssen Sie das API Connector Plugin hinzufügen.
Konfigurieren wir es gleich so, dass es eine Authentifizierungsanfrage an AppMaster sendet. Unsere Aufgabe ist es, ein Login und ein Passwort zu senden, um als Antwort ein Autorisierungs-Token zu erhalten. Wir werden den Standard-Endpunkt verwenden, der in jedem Projekt standardmäßig erstellt wird - POST /auth/ (Auth: Authentication). Vollständige Informationen darüber, mit der genauen Adresse, die Sie in Ihrem Projekt anfordern müssen, können Sie von Swagger erhalten.
Um den API Connector zu konfigurieren, klicken Sie auf die Schaltfläche Add Another API und legen Sie die zu verwendenden Anfrageparameter fest. Die wichtigsten Parameter sind:
- Anforderungsmethode. POST
- URL. Dasselbe wie Request URL von Swagger
- Use as. Data. Als Antwort müssen Sie Autorisierungs-Token-Daten erhalten.
- Data type. JSON
- Body. Die wichtigste Einstellung darin ist, dass Sie die Daten angeben müssen, die an den Server AppMaster gesendet werden sollen. Gleichzeitig enthält <> dynamische Werte, die den entsprechenden Eingabefeldern entnommen werden müssen.
{
"login": "<login>",
"password": "<password>"
}
Nach dem Ausfüllen müssen Sie die Daten für die Testanfrage angeben (geben Sie die Werte für Login und Passwort in Body parameters ein), die Anfrage initialisieren und sicherstellen, dass sie korrekt funktioniert und die Antwort auch wirklich kommt.
Eingabefelder einrichten
Der nächste Schritt besteht darin, eine Schnittstelle für die Anwendung zu erstellen. Wir beschränken uns dabei auf das notwendige Minimum. Wir werden 3 Eingabefelder erstellen müssen:
- Anmeldung
- Kennwort
- Autorisierungs-Token
Die ersten beiden sind ziemlich offensichtlich. Sie geben den Benutzernamen und das Passwort des Benutzers für die Authentifizierung an. Von größtem Interesse ist das dritte Feld - das Feld des Tokens. Der Wert des Tokens kann auch manuell eingegeben werden, aber unsere Aufgabe ist es, den Empfang von Daten aus dem AppMaster Backend zu ermöglichen und sie dort anzuzeigen.
Zu diesem Zweck muss der Wert Initial content konfiguriert werden:
- Get data from an External API mit der Auswahl der zuvor erstellten Anfrage in der API Connector (in diesem Beispiel lautet ihr Name AppMaster Auth Call)
- In den Feldern (body) login und (body) password müssen Sie die Werte aus den entsprechenden Eingabefeldern angeben
- Wählen Sie den Wert token (in der Antwort auf die Anfrage kommen viele verschiedene Daten, aber in diesem Beispiel ist nur token von Interesse)
Das Ergebnis kann getestet werden. Bei der Eingabe von Daten in die Felder Login und Passwort wird automatisch eine Anfrage an das Backend AppMaster gestellt. Wenn die Daten korrekt eingegeben werden und die Anfrage ein erfolgreiches Ergebnis liefert, wird das erhaltene Autorisierungs-Token im dritten Feld angezeigt.
GET Anfrage an die Datenbank
Der nächste Schritt besteht darin, eine neue API-Anfrage zu erstellen. Diesmal besteht die Aufgabe darin, die Daten aus der Datenbank abzurufen. Dabei wird die Situation dadurch erschwert, dass diese Daten nicht frei verfügbar sind, sondern nur für autorisierte Nutzer zur Verfügung stehen.
Um dies zu erreichen, müssen Sie der Anfrage eine spezielle Kopfzeile hinzufügen. Er sollte Authorization heißen und den Wert "Bearer" sowie den zuvor erhaltenen Autorisierungsschlüssel enthalten.
Machen wir es in der Praxis. Sie müssen zum Plugin API Connector zurückkehren und eine neue API-Anfrage erstellen. Im Beispiel auf dem Screenshot ist dies ein Aufruf an die Restaurantdatenbank, um eine Liste von Gerichten zu erhalten und ein Menü zu erstellen.
Ein wichtiger Unterschied zur vorherigen Anfrage ist, dass anstelle von Parametern (die allerdings auch hinzugefügt werden können) ein Header verwendet wird:
- Key = Authorization
- Value = Bearer {authorization token} (um die Anfrage zu initialisieren, müssen Sie sofort das echte Token angeben, das Sie zuvor erhalten haben)
Bitte beachten Sie, dass Sie in den Einstellungen für die Kopfzeile das Kontrollkästchen Private deaktivieren müssen; andernfalls ist es nicht möglich, sie dynamisch zu generieren. Vergessen Sie schließlich nicht, die Anfrage zu initialisieren und sicherzustellen, dass sie funktioniert.
Repeating Group Einstellungen
Gehen Sie nun zurück zum Designer, fügen Sie ein neues Repeating Group-Element hinzu und richten Sie es ein:
- Type of content - Daten der Anfrage AppMaster Get Data.
- Data source - Es ist wichtig, den Authorization Kopfzeile korrekt anzugeben. Er besteht aus zwei Teilen. Die erste Konstante ist "Bearer." Die zweite Variable muss ein Autorisierungs-Token enthalten und dem entsprechenden Eingabefeld entnommen werden.
Wenn alles richtig gemacht wurde, werden die Daten empfangen, und es bleibt nur noch der letzte Schritt - Sie müssen sie anzeigen. Zu diesem Zweck können Sie zwei Textfelder in das Feld Repeating Group hinzufügen und sie anpassen. In einem wird der Name des Gerichts angezeigt, im zweiten der Preis.
Sie können die resultierende App öffnen und überprüfen, ob die Integration von Bubble und AppMaster erfolgreich war. Das Frontend wird in Bubble.io erstellt, und alles, was mit dem Backend zu tun hat, wird von AppMaster.io betrieben:
- Die Benutzerauthentifizierung wird durchgeführt
- Das erhaltene Autorisierungs-Token wird angezeigt
- Die Arbeit mit der Datenbank wird ausgeführt
- Die Daten, die nur für autorisierte Benutzer verfügbar sind, werden angezeigt
