Airtable: Panele w Retool

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

0:01możemy wykorzystać te dane nie tylko do tego, aby je wyświetlać, ale również

0:05modyfikować z pomocą własnoręcznie przygotowanego panelu, który świetnie

0:09sprawdzi się jako narzędzie wewnętrzne do pracy nawet z wieloma bazami danych w Airtable.

0:14Narzędzie, które mam teraz na myśli to

0:16Retool, który co prawda nie posiada bezpośredniej integracji z Airtable,

0:20natomiast mamy do dyspozycji rozszerzenie BaseQL, które możemy wykorzystać do

0:25tego, aby łatwo połączyć się z Airtable z pomocą technologii GraphQL.

0:29Co prawda sama technologia GraphQL jest teoretycznie bardzo skomplikowanym

0:33tematem, natomiast w pewnym sensie stanowi ona alternatywę dla REST API.

0:38Pobieranie danych, a nawet aktualizowanie

0:40ich jest może nieco trudniejsze, ale jeżeli na ten moment koncepcja obiektów

0:44JSON jest Ci znana, to z pewnością sobie poradzisz.

0:47Tymczasem jeszcze na temat Retool musisz wiedzieć tyle, że jest to narzędzie, które

0:51z pomocą graficznego interfejsu pomoże połączyć Ci się z dowolnym źródłem danych,

0:55a następnie przygotować panel administracyjny, który będzie umożliwiał

0:59odczytywanie, jak i zapisywanie i aktualizowanie danych.

1:03I teraz dobra wiadomość jest taka, że nie musisz znać języków programowania na

1:06zaawansowanym poziomie, aby korzystać z Retool'a.

1:09Natomiast z całą pewnością przyda Ci się wiedza podstawowa.

1:12Zaczniemy od tego, aby utworzyć sobie nową

1:14aplikację Retool i tylko powiększy delikatnie ekran.

1:17No i tutaj już po chwili jesteśmy przeniesieni do panelu, gdzie w głównej

1:21części znajduje się canvas, czyli miejsce, w którym projektujemy nasz panel.

1:25Natomiast po prawej stronie mamy wszystkie komponenty, które możemy po prostu

1:28przeciągnąć na ekran, a następnie odpowiednio połączyć ze źródłem danych.

1:32I właśnie w temacie źródła danych to tutaj na dole znajduje się panel, z pomocą

1:36którego będziemy definiować sposób przesyłania i wymiany danych.

1:40Tak jak powiedziałem, jeżeli chodzi o źródło danych, nam zależy na tym, aby

1:43utworzyć nowe połączenie wykorzystujące technologię GraphQL.

1:47Przy okazji zwróćcie uwagę, że mamy tutaj naprawdę dużo źródeł danych, z których

1:51możemy skorzystać, włączając w to arkusz Googl Sheets.

1:55W każdym razie wybieram opcję GraphQL no i tutaj musimy podać nazwę.

1:59I zanim przejdziemy do dalszej

2:01konfiguracji musimy połączyć BaseQL oraz Airtable.

2:04Możemy to zrobić wykorzystując zakładkę

2:06Apps, gdzie możemy zainstalować aplikację BaseQL.

2:10Po jej dodaniu konfiguracja sprowadza się w zasadzie wyłącznie do tego, aby w tym

2:14miejscu przekazać klucz API do naszego Airtable.

2:17Kolejnym krokiem będzie utworzenie konta w

2:19BaseQL, które pozwoli nam zarządzać naszymi połączeniami.

2:23W rezultacie zostaniemy przekierowani do takiego panelu, który pozwoli nam wchodzić

2:27w interakcję z naszymi danymi wpisując tutaj zapytanie GraphQL.

2:31Jednocześnie mamy tutaj endpoint, który od razu możemy skopiować do Retool'a.

2:35Następnie musimy zadbać również o to, aby

2:38zabezpieczyć nasze połączenie z pomocą tokenu.

2:40Możemy to zrobić przechodząc do ustawień i od razu możemy włączyć tutaj mutację,

2:44czyli możliwość tworzenia, aktualizowania oraz usuwania rekordów w naszym źródle.

2:49Poza tym jeżeli klikniemy jeszcze tutaj to

2:51zobaczymy Secret Token, którego wartość możemy skopiować do Retool'a.

2:56No i teraz mamy potwierdzenie, że nasz endpoint został zabezpieczony oraz ma

2:59aktywowane mutację, a my musimy zadbać tylko o to, aby przekazać do naszego

3:04połączenia nagłówek authorization, do którego przekażemy nasz secret token.

3:09Po utworzeniu źródła tak naprawdę mamy już połączenie z naszym Airtable.

3:13Zwróć proszę tylko uwagę, że znajdują się tutaj w tej chwili trzy rekordy i w

3:17pierwszej kolejności pobierzemy je i wyświetlimy z pomocą Retool'a.

3:21Aby to zrobić zaznaczam naszą tabelę.

3:23I tutaj od razu mam informację o tym, że jako źródło danych tej tabeli ustawione

3:28jest odwołanie do zapytania Query 1, a następnie właściwości Data.

3:33Oznacza to mniej więcej tyle, że jeżeli tutaj napiszę zapytanie do naszej bazy, a

3:37następnie wykonam je, to informacje z Airtable powinny trafić tutaj do tej tabeli.

3:42No to teraz zapytanie

3:43graphQL tworzymy zapisując query,

3:45a następnie odwołujemy się do nazwy tabeli i w naszym przypadku będzie to infos.

3:50Przy czym jak widzisz nazwy zapisywane są tutaj małymi literami.

3:54Następnie musimy wskazać które kolumny chcemy pobrać i nas konkretnie będzie

3:58interesowało pobranie wszystkich kolumn, które mamy w tabeli.

4:01Więc musimy teraz podać po prostu ich nazwy.

4:04I tutaj zwróć jeszcze uwagę, że oprócz małych liter mamy również zastąpienie

4:07podkreślenia zapisem tak zwanym camel case, czyli po prostu wielką literą.

4:12Natomiast nie ma z tym problemu, ponieważ

4:14od razu mamy tutaj nawet podpowiadanie składni.

4:17No i teraz nasze zapytanie GraphQL jest tutaj

4:19gotowe i musisz przyznać, że jego struktura jest naprawdę prosta.

4:23No to teraz musimy przetestować nasze

4:25zapytanie uruchamiając je z pomocą tego przycisku.

4:28No i teraz mamy dwie wiadomości.

4:30Dobra jest taka, że dane zostały pobrane,

4:32a zła taka, że zostały wyświetlane w złej formie.

4:35I to wynika akurat z faktu, że pod właściwością data, którą mamy tutaj

4:39znajduje się obiekt JSON, a nie jego poszczególne właściwości.

4:43Z tego powodu mamy tutaj dwie opcje albo

4:45odwołamy się od razu do tabeli infos w następujący sposób i jest to jak

4:50najbardziej dobre rozwiązanie lub też ewentualnie możemy skorzystać z opcji

4:54Transformer, która dostępna jest dokładnie tutaj.

4:57W tym miejscu możemy zapisać kod JavaScript i

5:00w dowolny sposób zmodyfikować dane, które zostały tutaj dostarczone.

5:04Nas jednak będzie interesowało to, aby po prostu dopisać tutaj właściwość infos.

5:09Dzięki temu, jeżeli ponownie wykonam

5:10nasze zapytanie, znowu wszystko jest w porządku.

5:13A tutaj też od razu mamy zachowany lepszy porządek.

5:16I jeżeli już o porządku mowa, to nasze

5:18zapytanie nie do końca informuje nas o tym, jakie jest dokładnie jego zadanie.

5:22Z tego powodu możemy zmienić tutaj nazwę.

5:25I jak widzisz od razu to referencja, czyli odwołanie zostało tutaj podmienione.

5:29Dzięki temu nasza aplikacja dalej działa, a w sytuacji, gdy pojawią się tutaj

5:33kolejne zapytania, będziemy w stanie łatwo się w nich odnaleźć.

5:36No to teraz nasze zadanie będzie polegać

5:38na tym, aby zaktualizować rekord, który jest aktualnie kliknięty.

5:42Oznacza to, że będziemy musieli tutaj

5:44wykorzystać pole, które w zasadzie już tutaj dodałem, natomiast teraz usuniemy

5:48sobie i dodamy je jeszcze raz, ponieważ będzie nam zależało na tym, aby było to

5:52pole editabletext oraz dodatkowo będzie nam potrzebny przycisk.

5:56Jeżeli chodzi o konfigurację tych poszczególnych elementów.

5:59Jak widzisz możemy po prostu w opcjach

6:01ustawiać wszystkie ich parametry takie jak np.

6:04wygląd oraz etykiety, które znajdują się w tym przypadku na przycisku.

6:07Na ten moment będziemy chcieli jeszcze

6:09ustawić domyślną wartość tego pola na wartość aktualnie zaznaczonego rekordu.

6:14Jeżeli w polu Default value zacznę

6:16wpisywać nawiasy klamrowe, no to od razu mamy tutaj bardzo pomocne podpowiedzi.

6:21Mianowicie w naszym przypadku będziemy

6:22chcieli umieścić w tym polu zawartość komórki z tabeli name.

6:26No i aby to zrobić wybieram opcję Table 1,

6:29czyli odwołanie do tej naszej pierwszej tabeli.

6:31Następnie SelectedRow oraz data.

6:33W tym momencie mamy tutaj błąd, ponieważ

6:35oczywiście musimy odwołać się do konkretnej właściwości tego pola.

6:39No i zwróć uwagę, że rzeczywiście jak już klikamy na poszczególne elementy,

6:43zawartość pola name zostaje tutaj zmieniana.

6:45W tym momencie musimy jeszcze zadbać o to, aby aktualizacja tego pola oraz następnie

6:50kliknięcie przycisku zaktualizuj przesłało dane do Airtable.

6:54I coś takiego możemy zrobić tworząc nowe

6:56zapytanie wykorzystujące GraphQL do tego, aby zaktualizować dane.

7:00Przede wszystkim zadbam tutaj o to, aby nadać odpowiednią nazwę dla tego

7:04zapytania, a następnie zapiszemy sobie tutaj mutację.

7:07W przeciwieństwie do Query, mutację zaczynamy właśnie w ten sposób, a

7:11następnie musimy zapisać co dokładnie chcemy zrobić.

7:14Jeżeli teraz wcisnę skrót klawiszowy

7:15Control Spacja, zostanie wyświetlona lista podpowiedzi i od razu mamy jasną

7:20informację, że w tym przypadku chodzi nam o zaktualizowanie tabeli info.

7:25Jak już wiesz, do tego, aby aktualizować

7:27rekordy potrzebujemy identyfikatora naszego rekordu.

7:30Identyfikator ten pobraliśmy już sobie i znajduje się w komórce

7:33recid

7:34dodatkowo oczywiście potrzebujemy wartości z kolumny name, zatem będziemy mogli tutaj

7:39przekazać rekord ID, a następnie zmienną name.

7:42Jak widzisz mam tutaj błędy informujące

7:45mnie o tym, że nie mam dostępu do tych zmiennych.

7:47Jest to oczywiście prawda i sam błąd

7:49wynika z samej struktury GraphQL, który wymaga od nas tego, aby przy mutacji od

7:54razu określić pola, które mogą zostać tutaj przyjęte.

7:57Zatem w naszym przypadku interesuje nas recID, które będzie wartością typu

8:01string, a następnie wartość name, która również będzie Stringiem.

8:05W tej chwili nasze błędy tutaj zniknęły.

8:07Został nam tylko jeden, ponieważ musimy

8:09określić jaką informację zwrotną chcemy otrzymać w wyniku tego zapytania.

8:13I w tym przypadku myślę, że wystarczy nam całkowicie RecordID.

8:17Zanim jeszcze będziemy mogli wykonać to zapytanie, musimy jeszcze przypisać do

8:21naszych zmiennych poszczególne wartości pochodzące z naszej tabeli.

8:25Zatem tutaj w sekcji Variables w przypadku Record ID odwołuje się tutaj do aktualnie

8:30zaznaczonego rekordu, a następnie do właściwości RecID.

8:34Z kolei w drugim polu robię dokładnie to samo, z tą różnicą, że odwołuje się do

8:38właściwości name i myślę, że jest to jak najbardziej oczywiste.

8:42I teraz jeszcze zanim wykonamy sobie to zapytanie, będę chciał zadbać również o

8:45to, aby po aktualizacji rekordu zawartość naszej tabeli została przeładowana.

8:51Aby to zrobić, możemy przypisać sobie event handler do zdarzenia success.

8:55Oznacza to mniej więcej tyle, że w momencie gdy nasze zapytanie zostanie

8:58wykonane poprawnie, będziemy chcieli uruchomić kolejne zapytanie i w naszym

9:02przypadku będzie to zapytanie typu fetch_infos.

9:05No to teraz zapisuję to zapytanie i ostatnią rzeczą, którą musimy tutaj zrobić

9:09jest podłączenie tego zapytania do naszego przycisku.

9:12Możemy to zrobić klikając na niego, a następnie przypisując event handler

9:16reagujący na kliknięcie, które uruchomi nam zapytanie o nazwie Update info.

9:21Wszystko w tym momencie się tutaj zgadza,

9:23więc mogę po prostu wybrać jakieś pole, a następnie zaktualizować jego wartość.

9:28No i teraz oczywiście wystarczy wykonać nasze zapytanie

9:31i już po chwili mamy informację, że zapytanie zostało wykonane poprawnie.

9:35Natomiast jeżeli przejdziemy do Airtable zobaczymy, że nic się nie zmieniło.

9:39Wynika to z prostego błędu, który popełniłem przypisując wartości zmiennych.

9:44Oczywiście wartość name nie pochodzi z tabeli, gdzie mamy stare dane, tylko

9:48bezpośrednio z pola tekstowego znajdującego się tutaj.

9:51Zatem wystarczy, że odwołam się do

9:53odpowiedniego pola, a następnie do jego właściwości.

9:56No i tutaj oczywiście od razu możemy zmienić sobie jego nazwę.

10:00Tak, aby nic się nam tutaj nie mieszało.

10:02Raz jeszcze zapisuję zmiany i w momencie

10:04aktualizacji rekordu zapytanie raz jeszcze zostało wykonane poprawnie, z tą

10:08różnicą, że w tym momencie nowe dane zostały przesłane do Airtable.

10:12Jak widzisz, pomimo tego, że GraphQL jest dla Ciebie zupełnie nieznaną jeszcze

10:17technologią, byliśmy w stanie pobrać oraz zaktualizować rekordy.

10:21Mało tego, już nic nie stoi na

10:22przeszkodzie, aby wykonać tutaj dodatkowe akcje, takie jak np.

10:26usuwanie bądź stawianie nowych rekordów.

10:28Jedyne o co musisz zadbać o to, aby dodać na canvasie

10:31nowe pola i po przypisywać do nich wartości, a następnie przekazać je do zapytania.

10:35Oczywiście sam Retool oferuje znacznie więcej możliwości i możesz przejrzeć

10:40dostępne komponenty oraz dostępne w nich opcje, które pozwolą Ci dostosować ich

10:44zachowanie oraz nawet wyświetlać dane w postaci nawet wykresów.

10:48To na co chciałbym jeszcze zwrócić Twoją

10:50uwagę to fakt, że możesz zajrzeć do dokumentacji GraphQL znajdującej się na

10:55stronie Retool'a, gdzie znajdziesz masę przykładów dotyczących zarówno tworzenia

10:59połączenia, jak i wykonywania bardziej zaawansowanych zapytań.

11:02W efekcie to co tutaj zyskasz to możliwość

11:05wchodzenia w interakcję z danymi pochodzącymi z Airtable znajdującymi się na

11:09różnych tabelach, a nawet na różnych kontach Airtable.

11:13Dodatkowo oczywiście tak przygotowany panel możesz udostępnić innym osobom i w

11:17ten sposób tworzyć narzędzia wewnętrzne, które umożliwią łatwy wgląd i

11:21modyfikowanie danych w sposób całkowicie przez Ciebie kontrolowany.

11:24Coś takiego oczywiście możesz też osiągnąć w pewnym stopniu wykorzystując widoki

11:29Airtable i udostępniając je poszczególnym osobom.

11:32Natomiast oczywiście możliwości widoków są

11:34zdecydowanie bardziej ograniczone niż w przypadku Retool'a.

11:37Na sam koniec dodam jeszcze, że aplikacji podobnych do Retool'a jest naprawdę bardzo

11:41dużo, natomiast postanowiłem skupić się właśnie na nim, ponieważ uważam, że jest

11:45najlepszym dostępnym na rynku builderem narzędzi wewnętrznych, które umożliwią

11:49zrealizowanie omawianego przeze mnie zadania.

11:52Teraz dziękuję Ci za uwagę i zapraszam Cię do kolejnej lekcji.