Airtable: Integracja z Webflow

0:00Cześć! W tej lekcji pokażę Ci, w jaki sposób

0:02możesz wykorzystać dane, które przechowujesz w Airtable do tego, aby

0:05zaprezentować je w formie takiej małej strony raportowej, która ułatwi Ci np.

0:09komunikację z zespołem, bądź w ogóle

0:11monitorowanie statystyk z wielu różnych tabel Airtable jednocześnie.

0:15Jak widzisz, przygotowałem tutaj na potrzeby ćwiczenia taką prostą tabelę

0:18zawierającą podstawowe informacje, które będziemy chcieli wyświetlić na stronie.

0:23Pierwsza strategia, która pozwoli nam wykorzystać te dane opiera się o technikę,

0:26którą już znamy, wykorzystującą webhooki, a mianowicie skonfigurujemy sobie tutaj

0:31nowy Webhook, na którego adres wystarczy przejść, aby zobaczyć dane raportowe.

0:36Zatem tutaj scenariusz będzie naprawdę prosty i będzie w dużej mierze sprowadzał

0:40się do tego, aby pobrać informacje z Airtable.

0:43Oczywiście w Twoim przypadku może być tak, że wykorzystasz wiele różnych baz danych Airtable,

0:47oraz nawet zewnętrzne zródła, takie jak narzędzia analityczne czy Twoja

0:52własna aplikacja do tego, aby przygotować swój własny panel raportowy.

0:56W tym miejscu chciałbym jednak zwrócić Twoją uwagę na pewien fakt.

0:59Mianowicie mamy tutaj kilka rekordów i

1:01wymyśliłem sobie tak, że będziemy chcieli wyświetlić je wszystkie.

1:04W związku z tym musimy wykorzystać text

1:06aggregator do tego, aby zebrać je do jednej struktury HTML.

1:10Aby to zrobić wystarczy wybrać moduł Text

1:12aggregator, a następnie jako moduł źródłowy ustawić Airtable.

1:16I tutaj możemy już zdefiniować dowolną strukturę, jaka nas tylko interesuje.

1:20W moim przypadku będzie to struktura LI,

1:22czyli znacznik listy nie numerowanej znany z HTML'a.

1:26W tym przypadku do wyświetlenia rekordów wykorzystam zarówno ich nazwę oraz

1:29wartość, a dodatkowo nazwa będzie umieszczona w znaczniku a href.

1:33Dzięki temu po kliknięciu w nazwę

1:35zostaniemy przeniesieni od razu do rekordu Airtable.

1:38I jak zapewne pamiętasz, do tego, aby

1:40przygotować link kierujący bezpośrednio do Airtable, musimy skopiować całe adres znajdując

1:45się bezpośrednio w bazie, a następnie po ukośnik podać identyfikator rekordu.

1:50Dzięki temu zbudujemy sobie odnośnik bezpośrednio do niego.

1:53No to teraz zapisuję zmiane, a następnie

1:55ustawiam WebHook response, w taki sposób, aby została tutaj zwrócona struktura HTML.

2:01W tym celu muszę upewnić się, że nagłówek Content type jest ustawiony na text html

2:06oraz dodatkowa opcja Charset ustawiona jest na UTF 8.

2:10Dzięki temu będziemy mieć tutaj wsparcie dla polskich znaków.

2:13No i teraz jeżeli chodzi o dane, które

2:15zostaną tutaj zwrócone, to oczywiście wykorzystamy wygenerowany tekst, przy czym

2:19chcielibyśmy opakować go dodatkową strukturą HTML.

2:22Akurat poznawaniem HTML'a nie będziemy zajmować się w tym odcinku i z tego powodu

2:27przygotowałem sobie wcześniej naprawdę prostą strukturę

2:29do tego, aby tylko wyświetlić te dane.

2:31Natomiast jeżeli będzie znać zarówno HTML

2:34i CSS, możesz jak widzisz umieścić tutaj po prostu cały dokument HTML i po prostu

2:39podstawić odpowiednie dane i po prostu dynamicznie podstawiać odpowiednie dane.

2:43W rezultacie, jeżeli teraz kopiujemy sobie

2:45adres tego Webhooka, a następnie zapiszemy oraz aktywujemy nasz scenariusz.

2:50No to zaraz po przejściu na ten adres zostanie wyświetlony raport zawierający

2:54informacje pochodzące bezpośrednio z Airtable.

2:58Jeżeli teraz zmodyfikuję drugą wartość, a

3:00następnie ponownie wczytamy stronę, to wartość druga została tutaj zaktualizowana.

3:05Dodatkowo jak widzisz ich kolejność

3:07została zamieniona, ponieważ są posortowane według daty dodania.

3:10Aczkolwiek jeżeli chcielibyśmy to zmienić to nie ma z tym żadnego problemu, ponieważ

3:14module serch records możemy po prostu posortować je np.

3:18po nazwie.

3:19I tutaj tylko mamy dwie opcje do

3:21dyspozycji, czyli sortowanie rosnące oraz malejące.

3:24W tym przypadku zależy mi na posortowaniu

3:26alfabetycznym, więc wybieram opcję Ascendin.

3:29Teraz po zapisaniu zmian oraz wczytaniu

3:31danych ponownie wszystko powinno trafić na swoje miejsce.

3:34Muszę przyznać, że budowanie bardzo prostych paneli raportowych właśnie w ten sposób jest

3:39niesamowicie proste i jednocześnie przydatne.

3:41I taką funkcję wykorzystuję praktycznie na

3:43każdym kroku do tego, aby łatwo podglądać statystyki moich projektów.

3:47Jednocześnie może zdarzyć się tak, że być może będziesz potrzebować nieco bardziej

3:51złożonej struktury raportów i jednocześnie dołożyć do nich nieco więcej dynamiki,

3:55bądź też po prostu umieścić pod swoją domeną.

3:58W takiej sytuacji kolejnym najprostszym

4:00sposobem, jaki znam jest wykorzystanie WebFlow.

4:03Konkretnie wystarczy, że utworzę sobie

4:05nowy projekt, a następnie skorzystać z opcji CMS Collection.

4:09Mianowicie wystarczy tutaj stworzyć

4:10kolekcję dla poszczególnych danych, a następnie określić ich strukturę.

4:14W naszym przypadku poza nazwą będzie nas

4:16interesowała jeszcze wartość i na tym struktura danych się zakończy.

4:21Zatem po utworzeniu takiej kolekcji

4:23będziemy po prostu musieli połączyć się z tym projektem z poziomu Integromatu, a następnie

4:27przenieść do niego dane pochodzące z Airtable.

4:29Zatem w tym przypadku nie będzie nam potrzebne generowanie kodu HTML, tylko w

4:33zamian połączymy się z WebFlow do tego, aby utworzyć nowy element kolekcji, bądź

4:38też bardziej zaktualizować istniejące. W naszym przypadku elementy jeszcze nie

4:42istnieją, więc w pierwszej kolejności będziemy je tworzyć.

4:45Tutaj wystarczy, że utworzysz połączenie

4:47ze swoim projektem i połączysz się z odpowiednią stroną oraz kolekcją.

4:50W naszym przypadku po prostu będziemy po prostu przekazywać wartość oraz nazwę.

4:55Pozostałe wartości pozostawiamy bez zmian, przy czym tutaj na końcu dbamy jeszcze

4:59o to, aby zmiany zostały opublikowane.

5:02No i w tym momencie też nie będzie nam potrzebna odpowiedź z naszego Webhooka,

5:05ponieważ dane będą widoczne na stronie WebFlow.

5:08Zatem jeżeli teraz zapiszemy nasz scenariusz, a następnie wywołamy Webhook, który

5:12swoją drogą nie jest nam już potrzebny, ponieważ równie dobrze moglibyśmy po

5:16prostu wywoływać ten scenariusz co określony czas.

5:19Dzięki temu nasze raporty będą aktualizowane na bieżąco.

5:22I teraz jeżeli przejdziemy sobie na stronę, to

5:24oczywiście nic nie zobaczymy, ponieważ nie wyświetlamy w żaden sposób tych danych.

5:28Ale jeżeli tylko na naszej stronie

5:30umieścimy sobie listę pochodzącą z kolekcji.

5:32W tym momencie musimy tylko wskazać, o jakie elementy nam chodzi.

5:36Zatem z pewnością będzie tutaj paragraf zawierający informacje o nazwie naszego

5:40rekordu oraz drugi zawierającej informację o jego wartości.

5:44W rezultacie otrzymaliśmy to, o co nam

5:46chodzi, przy czym musimy jeszcze zmienić tutaj kolor fontu na jakiś ciemniejszy.

5:52W tym momencie nasze dane są już tutaj widoczne, aczkolwiek proponuję abyśmy

5:56umieścili je jeszcze w kontenerze, a tamu kontenerowi ustawimy margines wewnętrzny.

6:01I teraz załóżmy, że nasze dane wyświetlają się tak jak byśmy tego chcieli, aczkolwiek

6:05jeszcze na Collection item ustawię wyświetlanie jako display flex.

6:09Dzięki temu wystarczy teraz zamiana kolejności oraz ewentualnie dodanie

6:13kolejnego elementu zawierającego po prostu myślnik.

6:16W tym momencie możemy opublikować stronę.

6:19I jak się pewnie domyślasz, wszystkie dane

6:21zostaną wyświetlone w sposób, o które nam chodzi.

6:24I faktycznie, jeżeli teraz odświeżamy

6:26stronę, to nasze dane zostaną tutaj wyświetlone, a w sytuacji, gdy ponownie

6:31coś zmienimy oraz tym razem ręcznie wykonamy scenariusz, to nasz scenariusz

6:35nie zadziała tak jak byśmy tego chcieli, ponieważ pojawią się tutaj nowe dane.

6:39Z tego powodu oczywiście zależy nam na tym, aby aktualizować istniejące rekordy i

6:44dlatego powinniśmy zrobić tak, że w pierwszej kolejności utworzymy sobie

6:47wszystkie dane w kolekcji, które chcemy wyświetlać, a następnie identyfikatory

6:52poszczególnych elementów zapiszemy w Airtable.

6:54Dzięki temu będziemy mogli sprawdzić, czy

6:56dany element istnieje i w zależności od tego albo go utworzyć, albo zaktualizować.

7:02Zatem wygląda to mniej więcej tak, że w pierwszej kolejności aktualizujemy rekord,

7:06który dodaliśmy do WebFlow, a konkretnie zależy nam na podaniu tutaj Item ID.

7:12Od tej pory, jeżeli raz jeszcze utworzymy ten scenariusz, nasze dane zostaną w

7:16Airtable odpowiednio zaktualizowane, co też dokładnie się stało.

7:19Natomiast teraz scenariusz automatyzacji

7:22powinien wyglądać nieco inaczej, ponieważ w pierwszej kolejności powinniśmy

7:25sprawdzić, czy dany wpis w Airtable posiada WebFlow ID.

7:29Jeżeli nie posiada, to utworzymy nowy element kolekcji i tak w zasadzie będzie

7:34to się sprowadzało do wykonania tej ścieżki.

7:36W przeciwnym razie będzie nam zależało na tym, aby w pierwszej kolejności odnaleźć

7:40element kolekcji o podanym identyfikatorze, a następnie w zależności

7:44od tego albo go utworzyć, albo zaktualizować.

7:47W tym momencie, jeżeli masz już wybrany site oraz kolekcję, możesz przełączyć się

7:51na tryb manualny, a następnie po prostu uzupełnić identyfikator WebFlow.

7:56No i teraz mogą wydarzyć się tutaj dwa

7:58scenariusze, dlatego wykorzystamy ponownie router.

8:01W pierwszym scenariuszu element zostanie

8:03odnaleziony, to znaczy, że jego identyfikator istnieje, a w przeciwnym

8:07razie element nie zostanie znaleziony i będziemy musieli go utworzyć.

8:11Dodatkowo jeszcze tutaj, w tym miejscu

8:13muszę upewnić się, że element WebFlow ID tutaj istnieje, więc będziemy mogli pójść dalej.

8:19No i teraz oczywiście, gdy element został

8:21odnaleziony, po prostu aktualizujemy jego wartość.

8:26No i tutaj jeszcze dynamicznie podajemy jego

8:28identyfikator, a następnie zaktualizowane wartości.

8:32W tym momencie mamy obciążoną kolejną ścieżkę i zależy nam jeszcze na ostatniej,

8:36która w zasadzie będzie wyglądała dokładnie tak jak ta na górze.

8:39Zatem wklejamy ją w tym miejscu, a na

8:41końcu jeszcze upewniam się, że filtr, który mamy podpięty jest poprawny.

8:45Czyli identyfikator WebFlow tutaj nie istnieje.

8:48No to teraz nasz scenariusz jest gotowy, więc możemy go przetestować, przy czym

8:52jeszcze wcześniej wyczyszczę sobie całą kolekcję znajdującą się obecnie w WebFlow.

8:56Przechodzę więc teraz w panelu do

8:58odpowiedniego okna i tutaj tylko muszę przeładować stronę.

9:02Po zaznaczeniu rekordów możemy je z

9:04powodzeniem usunąć, ponieważ i tak znajdują się w Airtable.

9:08I jeszcze raz wykonać nasz scenariusz.

9:12Po wykonaniu scenariusza mamy jakiś błąd

9:14mówiący o tym, że mamy jakiś problem ze slugiem.

9:17Prawdopodobnie wynika to z faktu, że rzeczywiście sluga tutaj nie podajemy.

9:21Natomiast usunięcie rekordów jeszcze nie

9:23obowiązuje, ponieważ nie opublikowałem strony.

9:26W momencie, gdy to zrobię i zmiany zostaną

9:28zastosowane, nasz scenariusz powinien wykonać się poprawnie.

9:32Zmiany zostały opublikowane no i teraz możemy

9:35raz jeszcze wykonać scenariusz i wszystkie rekordy powinny tym razem zostać utworzone.

9:40No i faktycznie to się stało.

9:41Jeżeli teraz odświeżamy sobie stronę będziemy

9:44mieli tutaj trzy wpisy i teraz możemy je zaktualizować.

9:47I po ponownym wykonaniu scenariusza tym

9:50razem zostanie wykonana druga ścieżka i nasze wpisy zostaną zaktualizowane.

9:54Nasz panel raportowy działa tak,

9:56jakbyśmy tego chcieli, więc w ten sposób zbliżyliśmy się już do końca tej lekcji.

10:01Na sam koniec dodam jeszcze małą informację dla programistów, która

10:04być może w jakiś sytuacjach okaże się przydatna.

10:07Mianowicie z poziomu Integromatu możemy połączyć się z GitHubem, a następnie

10:11aktualizować pliki znajdujące się w repozytorium.

10:13Oczywiście tak długo. Jeżeli pracujemy z naprawdę prostymi

10:17plikami tekstowymi, taka modyfikacja będzie miała tutaj sporo sensu, tym

10:20bardziej jeżeli wykorzystamy sobie Netlify do tego, aby hostować tą stronę.

10:25W ten sposób będziemy mieć nie tylko

10:26bezpłatny hosting, ale również bezpłatną aktualizację naszej strony.

10:30Muszę przyznać, że pod kątem możliwości to

10:32rozwiązanie jest bardziej ograniczone niż WebFlow, ale jednocześnie jest całkowicie

10:36bezpłatne i są sytuacje, w którym kontrola nad repozytorium okaże się tutaj

10:40krytyczna, czego akurat nie zapewni nam WebFlow.

10:43Ze względu na to, że tutaj będzie wymagana jest znajomość np.

10:46Gita, nie będę pokazywał tego scenariusza, bo

10:49myślę, że jeżeli posiadasz tą wiedzę to i tak świetnie sobie z tym poradzisz.

10:53Zatem teraz kończąc lekcję dziękuję Ci za

10:55uwagę i zapraszam Cię do kolejnych materiałów.