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


Was this article helpful?

AppMaster.io 101 Kurs zderzeniowy

10 moduły
2 Tygodnie

Nie wiesz, od czego zacząć? Rozpocznij z naszym szybkim kursem dla początkujących i poznaj AppMaster od A do Z.

Rozpocznij kurs
Development it’s so easy with AppMaster!

Potrzebujesz więcej pomocy?

Rozwiąż każdy problem z pomocą naszych ekspertów. Oszczędzaj czas i skup się na tworzeniu aplikacji.

headphones

Skontaktuj się z pomocą techniczną

Opowiedz nam o swoim problemie, a my znajdziemy dla Ciebie rozwiązanie.

message

Czat społeczności

Omów pytania z innymi użytkownikami na naszym czacie.

Dołącz do społeczności