W tym tutorialu przyjrzymy się bliżej jak można zintegrować Tilda oraz AppMaster. Załóżmy, że pewien formularz został utworzony w Tilda, a naszym zadaniem jest zapewnienie, że dane po wypełnieniu trafiają do AppMaster, są tam przetwarzane i przechowywane w bazie danych.
Tworzenie webhooków w AppMaster
Tilda wysyła dane do usług zewnętrznych za pomocą webhook'a. Dlatego warto zacząć od stworzenia niezbędnego webhooka i przede wszystkim przygotowania procesu biznesowego do jego obsługi.
Cechą tego procesu jest to, że nie wiadomo z góry jakie dokładnie dane zostaną pozyskane. Webhook będzie pracował z "raw" żądaniami, które muszą być odpowiednio przetworzone. W tym celu wykorzystamy blok Get Request Body blok. Zobaczmy jakie dane generalnie pochodzą z Tilda, przekonwertujmy je na String, zapiszmy do logu i wyświetlmy w odpowiedzi na żądanie.
W sekcji endpoints od razu utwórzmy nowy webhook. Warto zauważyć, że typem żądania musi być Raw ponieważ nie ma on żadnych twardo zakodowanych parametrów wejściowych i jest gotowy do przyjęcia dowolnych danych. Należy również wyłączyć Middleware Token Auth ponieważ aby wypełnić formularz w Tilda, nie trzeba przechodzić przez autoryzację w AppMaster, a wysyłanie danych jest otwarte dla wszystkich.
Tilda konfiguracja formularza
Kolejnym krokiem jest podłączenie strony Tilda do utworzonego webhooka. W tym celu w ustawieniach formularzy witryny wystarczy podać adres URL, choć w razie potrzeby można skorzystać z dodatkowych opcji. Na przykład, dla dodatkowej ochrony, przekaż również specjalny klucz, w ciele żądania lub w nagłówku.
Jeśli wszystko zostanie wykonane poprawnie, pojawi się odpowiedni komunikat z możliwością natychmiastowego powiązania tego webhooka ze wszystkimi formularzami na stronie.
Pozostaje tylko opublikować stronę z formularzem i przetestować go w działaniu.
Otwierając logi AppMastera można się upewnić, że dane z formularza rzeczywiście zostały odebrane.
Komunikat: “Email=test%40gmail.com&Name=John+Smith&Phone=%2B1-202-202-22-22&Comments=Hello%2C+world%21%0AThis+is+my+comment&tranid=6355139%3A3971256761&formid=form513738662”
Widać wszystkie informacje wypełnione w formularzu. Jednocześnie staje się jasne, że dane są odbierane w x-www-form-urlencoded formacie, odpowiednio, nie mogą być już przetwarzane jako zbiór surowych danych, ale jako zbiór poszczególnych pól.
AppMaster model bazy danych
Pozostaje tylko stworzyć odpowiedni handler. A najlepiej zacząć od modelu bazy danych, w którym będą przechowywane wszystkie informacje.
Dla standardowego formularza wystarczy prosty model z 4 polami:
- Email (String)
- Name (String)
- Phone (String)
- Comments (Text)
Następnie należy wrócić do stworzonego procesu biznesowego i zmienić go uwzględniając otrzymane informacje o składzie żądania.
Nazwy pól z wypełnianej tabeli zostaną użyte jako parametry wejściowe. Dane z nich zostaną wykorzystane do stworzenia modelu (Make Tilda), a następnie zapisania do bazy danych (DB: Create Tilda).
Ostatnią rzeczą, którą należy zrobić, jest zmiana utworzonego wcześniej punktu końcowego dla webhooka. Znamy format przychodzących danych i przetwarzamy je, więc pkt. Request payload type musi być Form. Jednocześnie należy dopasować parametry utworzone w procesie biznesowym do dokładnych nazw pól z wypełnionego formularza (widzieliśmy je w logach, gdy otrzymywaliśmy dane z żądania jako surowe dane). W tym przykładzie są one prawie takie same, ale różnią się w przypadku pierwszego znaku.
Teraz możesz opublikować stworzoną aplikację i przetestować ją w działaniu. Jeśli powtórzysz wypełnianie i wysyłanie formularza w Tilda, to dane zostaną wysłane do AppMaster, zapisane w bazie danych, a można to sprawdzić za pomocą Swagger.
