W tym samouczku przyjrzymy się bliżej integracji Bubble i AppMaster . Załóżmy, że front-end tworzonej aplikacji jest wykonany w Bubble , ale jego możliwości do pracy z back-endem okazały się niewystarczające i chcesz skorzystać z funkcjonalności AppMaster .
Zastanówmy się, jak:
- Użyj AppMaster jako bazy danych dla Bubble
- Wysyłaj żądania API do Appmaster
- Wykonaj uwierzytelnianie użytkownika
- Użyj tokena autoryzacji w nagłówkach żądań
Konfigurowanie API Connector
Przede wszystkim trzeba stworzyć samą możliwość wysyłania zapytań do zewnętrznych API z Bubble . Aby to zrobić, musisz dodać wtyczkę API Connector .
Skonfigurujmy go od razu tak, aby wysyłał żądanie uwierzytelnienia do AppMaster . Naszym zadaniem jest przesłanie loginu i hasła, aby w odpowiedzi otrzymać token autoryzacyjny. Użyjemy standardowego punktu końcowego, który jest domyślnie tworzony w każdym projekcie - POST /auth/ (Auth: Authentication) . Pełne informacje na ten temat, wraz z dokładnym adresem, na który należy zwrócić się w swoim projekcie, można uzyskać od firmy Swagger .
Aby skonfigurować API Connector , kliknij przycisk Add Another API i ustaw parametry żądania, które mają być używane. Kluczowymi parametrami są:
- Metoda żądania. POST
- URL. Taki sam jak Request URL od Swagger
- Use as. Data . W odpowiedzi musisz otrzymać dane tokena autoryzacyjnego.
- Data type. JSON
- Body . Najważniejszym ustawieniem w nim jest to, że musisz określić dane, które zostaną wysłane na serwer AppMaster . Jednocześnie <> zawiera wartości dynamiczne, które należy uzyskać z odpowiednich pól wejściowych.
{
"login": "<login>",
"password": "<password>"
}
Po wypełnieniu należy podać dane dla żądania testowego (wpisać login i hasło w Body parameters ), zainicjować żądanie i upewnić się, że działa poprawnie i odpowiedź naprawdę przychodzi.
Konfiguracja pól wejściowych
Następnym krokiem jest stworzenie interfejsu dla aplikacji. Ograniczamy się do niezbędnego minimum. Będziemy musieli utworzyć 3 pola wejściowe:
- Zaloguj sie
- Hasło
- Token autoryzacyjny
Pierwsze dwa są dość oczywiste. Będą wskazywać nazwę użytkownika i hasło użytkownika w celu uwierzytelnienia. Największym zainteresowaniem cieszy się trzecie pole - pole tokena. Wartość tokena można również wprowadzić ręcznie, ale naszym zadaniem jest umożliwienie odbioru danych z backendu AppMaster i ich tam wyświetlenie.
W tym celu należy skonfigurować początkową wartość zawartości :
- Get data from an External API z zaznaczeniem wcześniej utworzonego żądania w API Connector (w tym przykładzie jego nazwa to AppMaster Auth Call )
- W polach (body) login i (body) password należy podać wartości z odpowiednich pól wejściowych
- Wybierz wartość token (w odpowiedzi na żądanie pojawia się wiele różnych danych, ale w tym przykładzie interesuje tylko token )
Wynik można przetestować. Podczas wprowadzania danych w polach loginu i hasła automatycznie zostanie wysłane żądanie do zaplecza AppMaster . Gdy dane zostaną wprowadzone poprawnie, a żądanie zwróci pomyślny wynik, otrzymany token autoryzacyjny pojawi się w trzecim polu.
GET żądanie do bazy danych
Następnym krokiem jest utworzenie nowego żądania API. Tym razem zadaniem będzie pobranie danych z bazy danych. Jednocześnie sytuację komplikuje fakt, że dane te nie są swobodnie dostępne, ale są dostępne tylko dla uprawnionych użytkowników.
Aby to zrobić, musisz dodać do żądania specjalny nagłówek. Powinien nazywać się Authorization , a jego wartością powinien być „ Bearer ” oraz klucz autoryzacji, który został uzyskany wcześniej.
Zróbmy to w praktyce. Musisz wrócić do wtyczki API Connector i utworzyć nowe żądanie API. W przykładzie na zrzucie ekranu jest to wywołanie bazy danych restauracji w celu pobrania listy dań i stworzenia menu.
Istotną różnicą w stosunku do poprzedniego żądania jest to, że zamiast parametrów (choć można je również dodać) używany jest nagłówek:
- Key = Authorization
- Value = Bearer {authorization token} (aby zainicjować żądanie, musisz natychmiast podać prawdziwy token, który otrzymałeś wcześniej)
Należy pamiętać, że w ustawieniach nagłówka należy odznaczyć pole Private ; w przeciwnym razie nie będzie możliwe wygenerowanie go dynamicznie. Na koniec nie zapomnij zainicjować żądania i upewnić się, że działa.
Ustawienia Repeating Group
Teraz powinniśmy wrócić do projektanta, dodać nowy element Powtarzająca się grupa i ustawić go:
- Type of content - dane żądania AppMaster Get Data .
- Data source - ważne jest, aby poprawnie określić nagłówek Authorization . Składa się z dwóch części. Pierwsza stała to „ Bearer ”. Druga zmienna musi zawierać token autoryzacji i zostać pobrana z odpowiedniego pola wejściowego.
Jeśli wszystko zostanie wykonane poprawnie, dane zostaną odebrane i pozostanie tylko ostatni krok - musisz je wyświetlić. Aby to zrobić, możesz dodać dwa pola tekstowe do grupy Repeating Group i dostosować je. Jeden pokaże nazwę dania, a drugi jego cenę.
Możesz otworzyć powstałą aplikację i sprawdzić, czy integracja Bubble i AppMaster powiodła się. Frontend jest wykonany w Bubble.io , a wszystko związane z backendem jest zasilane przez AppMaster.io :
- Przeprowadzana jest autoryzacja użytkownika
- Wyświetlany jest otrzymany token autoryzacyjny
- Prowadzona jest praca z bazą danych
- Wyświetlane są dane dostępne tylko dla uprawnionych użytkowników
