Airtable: Strony w StackerHQ

0:00Cześć! W tej lekcji pokażę Ci jeszcze kilka

0:02narzędzi, które pozwolą Ci wykorzystać dane znajdujące się w Airtable do tego, aby

0:06zbudować narzędzia wewnętrzne lub nawet całe strony internetowe.

0:10Tutaj jeszcze zaznaczę, że dają one

0:12zdecydowanie mniejsze możliwości niż wykorzystanie Retoola czy np.

0:15WebFlow, natomiast jednocześnie ich obsługa jest zdecydowanie prostsza.

0:20Przykładem takich narzędzi jest StackerHQ,

0:22Softr czy Table2site, które obecnie dostępne jest wyłącznie na zaproszenie.

0:27No i ostatecznie mamy jeszcze PoryIO oraz wiele podobnych narzędzi, które zasadniczo

0:32oferują dokładnie to samo, natomiast realizują to w lepszy lub gorszy sposób.

0:36Z tego powodu proponuję, abyśmy skupili się na tym pierwszym, czyli StackerHQ.

0:40Co prawda jest to dość drogie narzędzie,

0:42natomiast jego obsługa jest niesamowicie prosta i daje nam możliwość łatwego

0:46połączenia się z bazą danych, którą może stanowić Airtable.

0:50Wystarczy tutaj tylko dodać nową aplikację, a następnie połączyć się z

0:54naszym Airtable przekazując nasz klucz API oraz link udostępnienia naszej bazy.

0:59Tutaj na screenie mamy wyjaśnione o co dokładnie tutaj chodzi.

1:02Mianowicie w Airtable musimy wybrać opcję

1:04udostępnienia, a następnie udostępnić samą bazę w trybie linku tylko do odczytu.

1:10Oczywiście z poziomu naszej aplikacji dane będą mogły być zapisywane ze względu na

1:14to, że dostarczyliśmy tutaj nasz klucz API.

1:17Po połączeniu musimy tylko chwilę poczekać

1:19na zaimportowanie danych i za chwilę będziemy gotowi do pracy.

1:22I teraz tak naprawdę mamy dostęp do wszystkich tabel znajdujących się w danej

1:26bazie i tak naprawdę StackerHQ umożliwia nam np.

1:29edycję layoutu, czyli sposobów wyświetlania poszczególnych wpisów.

1:33Dzięki temu łatwo możemy skonfigurować

1:35nasz widok, udostępniając tylko te najbardziej przydatne informacje.

1:39Jednocześnie też możemy tutaj dokonywać takich prostych modyfikacji, takich jak

1:44chociażby wykorzystanie konkretnego pola jako przycisk.

1:47Dzięki temu możemy trochę bardziej dostosować nasz layout.

1:50Jednocześnie też możemy dodać nagłówek do naszej strony i ewentualnie zdjęcie.

1:54Coś takiego przypomina Ci zapewne widok galerii z który możemy wykorzystać w Airtable.

1:59Natomiast tutaj sytuacja jest o tyle lepsza, że w płatnej wersji tego narzędzia

2:03możemy wgrać tutaj własne style CSS oraz własne skrypty.

2:06Dzięki nim możemy w pełni dostosować

2:08wygląd tej strony, ale na tym możliwości się nie kończą.

2:11Zanim jednak do nich przejdziemy,

0:00chciałbym zapisać jeszcze zmiany oraz przejść do pojedynczego wpisu, gdzie z

2:16kolei możemy wykorzystać gotowe komponenty do tego, aby np.

2:20w tym przypadku osadzić na tej stronie

2:22player z YouTube, którego źródło może zostać ustawione na konkretną kolumnę.

2:26I tutaj wystarczy, że upewnimy się, że w naszej bazie znajduje się odpowiednia

2:30kolumna zawierająca link umożliwiający osadzenie filmu.

2:33W związku z tym, że w jednej z kolumn znajduje się tutaj identyfikator filmu na

2:37YouTube, mogę tutaj napisać formułę zawierającą następującą frazę.

2:41W pierwszej kolejności mamy tutaj początek

2:43adresu, a następnie łączymy go znakiem & z kolumną Youtube ID.

2:48W efekcie w naszej nowej kolumnie pojawi

2:50się tutaj odpowiedni adres, który możemy przekazać do naszej aplikacji.

2:54W tej chwili jednak on nie jest tutaj dostępny ze względu na to, że musimy

2:58zsynchronizować dane z naszej tabeli i coś takiego domyślnie dzieje się co 15 minut.

3:02Natomiast w naszym przypadku musimy dokonać jeszcze synchronizacji samej

3:06struktury oraz oczywiście danych i to znowu zajmie nam chwilę.

3:11Wygląda na to, że nasze dane zostały zsynchronizowane.

3:14I teraz jeszcze zanim przejdziemy do naszego layoutu, musimy w zakładce Fields

3:18aktywować pole Embered, które dopiero co się pojawiło.

3:22Zaraz potem wracamy do pojedynczego

3:24elementu no i tutaj w edycji layoutu możemy już wybrać to nowe pole.

3:28W efekcie, jeżeli teraz wrócimy do naszego

3:30widoku, rzeczywiście film zostanie osadzony tylko w moim przypadku

3:34mam tutaj zablokowane opcje embedowania.

3:37Jednak wykorzystując magię kina odblokowałem je no i teraz wszystko jest

3:40tutaj w porządku, może z wyjątkiem samej wysokości tego pola.

3:44Zatem ponownie w edycji layoutu wystarczy,

3:46że kliknę to pole, a następnie powiększy jego wysokość do np.

3:49500 pikseli.

3:51Po zapisaniu zmian tym razem wszystko będzie już OK.

3:54Jak widzisz, konfigurowanie w ten sposób

3:56widoków jest naprawdę proste i jednocześnie mamy tutaj dość dużą kontrolę

4:00nad tym, jakie dane mają zostać wyświetlane.

4:03Jednocześnie też chciałem zwrócić Twoją

4:05uwagę na fakt, że możemy przejść do edycji pojedynczego filmu, a następnie

4:08przyciskiem Edit edytować sobie dane, której się tutaj znajdują.

4:13Możesz się jednak zapytać, dlaczego to w ogóle jest potrzebne, aby w ten sposób

4:16prezentować znane i domyślam się, że sama możliwość

4:19dogrania styli CSS nie jest dla Ciebie wystarczająca.

4:23Okazuje się jednak, że StackerHQ daje nam możliwość ograniczenia

4:26poszczególnych akcji dla konkretnych użytkowników.

4:30Mianowicie do naszej aplikacji możemy

4:32przekazać informację o tym, w jakiej tabeli znajdują się konta użytkowników.

4:36W momencie gdy utworzę sobie taką tabelę,

4:38a następnie dodam tutaj mój adres email to zobaczymy co tutaj się stanie.

4:46No i w tym momencie tylko zmienię jeszcze nazwę tej tabeli, a następnie w naszej

4:50aplikacji ponownie muszę synchronizować dane.

4:53Zatem w ustawieniach możemy raz jeszcze

4:55odświeżyć całą strukturę i za chwilę konta naszych użytkowników będą gotowe.

5:00Tutaj analogicznie jak w przypadku kolumn, nową tabelę musimy aktywować.

5:04Możemy to zrobić klikając tutaj ten mało widoczny przycisk, który to rozwinie listę

5:08wszystkich tabel, na której to znajduje się nasza nowo utworzona tabela.

5:12Po chwili jest ona już dostępna w naszej aplikacji.

5:15I akurat w moim przypadku dostępna jest tutaj pod tą nazwą.

5:18Jak widzisz znajduje się tutaj mój adres

5:20email, więc mogę teraz w zakładce Users po prostu wskazać, w której tabeli znajdują

5:25się konta użytkowników oraz która kolumna zawiera e-mail użytkownika.

5:29Następnie możemy dodać tutaj jeszcze jakieś filtry ograniczające dostęp do

5:33konta lub ewentualnie po prostu połączyć tą tabelę.

5:36W rezultacie użytkownik o tym adresie

5:38e-mail posiada już dostęp do naszej bazy i aby Ci to teraz udowodnić po prostu skopiuje

5:43sobie adres naszej aplikacji i otworzy w zakładce Incognito.

5:48Tutaj

5:48jak widzisz mogę zalogować się zarówno kontem Google jak i po prostu podać adres

5:52e-mail, który znajduje się w naszej tabeli.

5:55Na ten adres zostanie przesłane magiczne link umożliwiający dostęp do tej bazy.

6:00Po podaniu kodu zostałem zalogowany do naszej aplikacji i

6:03jak widzisz mam tutaj możliwość dostępu

6:05zarówno do wszystkich moich filmów, jak i jednocześnie do możliwości ich edycji.

6:10Swoją drogą możliwości edycji

6:12poszczególnych pól również mogą zostać zablokowane bądź odblokowane dla

6:16poszczególnych użytkowników bądź poszczególnych grup użytkowników.

6:20Z tego powodu stackerHQ

6:21i podobne narzędzia mogą okazać się niesamowicie przydatne do tego, aby

6:25stworzyć panele, które możesz udostępnić w swoim zespole.

6:28Gorąco zachęcam Cię do tego, aby sprawdzić

6:30te narzędzia i zobaczyć, które odpowiedzą na Twoje potrzeby.

6:33Tymczasem dziękuję Ci za uwagę i zapraszam Cię do kolejnej lekcji.