.svg)
00:00 - Start
00:29 - Wstęp
01:24 - Platforma od środka
20:24 -Podsumowanie
Cześć, ja nazywam się Kamil Tarczyński i witam was w podcaście Just No Code. W dzisiejszym odcinku, tak jak w popoprzednim... Kontynuujemy naszą serię opowiadań o narzędziach no-code czy low-code, z których najczęściej korzystamy, które polecamy. W dzisiejszym odcinku będę mówił o świetnym narzędziu do budowy natywnych aplikacji mobilnych. Dokładnie tak, natywnych aplikacji mobilnych. Nie tylko PWA, ale właśnie takich, które są oparte o natywny framework. W tym wypadku będę mówił o Flutter Flow, czyli platformie, która pozwala nam budować aplikacje w języku Flutter. frameworku Flutter, który oparty jest o język Dart, który jest takim powiedzmy pośrednikiem, który gdzieś tam po kolei przekłada aplikację tą, którą naprzemy we Flutterze na język Swift lub język Androidowy.
Żeby nie przedłużać zapraszam was do tego odcinka. Pokażę dzisiaj wam właśnie jak ta platforma funkcjonuje. Jak widzicie jesteśmy już w środku tej platformy, gdzie oczywiście tak jak w każdym innym przypadku zaczynamy od pierwszego ekranu pod tytułem Create Project. I tutaj tak samo jak w przypadku Webflow możemy sobie stworzyć aplikację pustą lub aplikację na podstawie jakiegoś template. dodajemy sobie nazwę just no code tworzymy aplikację pustą i zostaniemy przekierowani do edytora pierwsze co zobaczymy to project setup musicie pamiętać że aplikacje które tworzymy we Flutterflow to natywne aplikacje mobilne co to de facto znaczy? to znaczy, że tutaj my tworzymy tylko i wyłącznie frontend jeżeli chcemy mieć autoryzację użytkowników chcemy tworzyć jakieś rekordy, chcemy wyświetlać listy tych rekordów i tak dalej i tak dalej musimy mieć jakiś backend jakiś backend gdzieś Flutterflow umożliwia nam natywną integrację między innymi z Firebase'em natomiast nie są to rozwiązania no-codeowe.
Jeżeli natomiast byście chcieli stworzyć backend w Xano i połączyć to z Flutterflow to jak najbardziej jest to możliwe i jest to wykonalne. Natomiast musicie pamiętać o tym, że nadal musicie gdzieś mieć tutaj tego Firebase'a, żeby móc skonfigurować swoją aplikację we Flutterflow. Podkreślam, dzisiejsze nagranie nie jest nagraniem szkoleniowym, na którym będziemy mówili jak te wszystkie rzeczy zrobić, Jest to video walkthrough, będziemy pokazywali po prostu czym ta platforma jest, jak funkcjonuje, co w niej się znajduje, żebyście trochę więcej się o niej dowiedzieli więc w pierwszym kroku jak widzicie Flutter będzie nas pytał o właśnie podłączenie naszego projektu do Firebase'u jest to wymagane do tego, aby naszą aplikację móc opublikować, żeby móc z niej korzystać ja o to oczywiście w tym momencie pominąłem żeby się tym w tym momencie nie zajmować.
Jak widzicie, edytor sam w sobie jest bardzo podobny do tego co znamy w Bablu, do tego co znamy z Webflow. Mamy naszą kartkę papieru pośrodku, którą ja lubię nazywać. Mamy po lewej stronie wszystkie elementy edytora, czy inne opcje, którymi będziemy zarządzali. Po prawej stronie natomiast mamy już właściwości, czy to danego elementu, czy czegokolwiek innego. I tą co od góry oczywiście tutaj możemy sobie zwrócić do naszego głównego dashboardu. Tutaj mamy informacje o tym jak nazywa się nasz projekt. Mamy help menu, mamy informacje o skrótach klawiszowych, wyszukiwarkę, czy kopiowanie linku do obecnego widoku. Tak samo jak w przypadku Webflow mamy różne break pointy, bo Flutter również umożliwia obecnie tworzenie aplikacji nie tylko na urządzenia mobilne ale również webowe.
Jest to w bardzo wczesnym etapie rozwoju i ja bym po prostu uważał. Mamy tutaj informacje na temat wersji, w której znajduje się nasza aplikacja. Możemy sobie podglądać snapshoty czy tworzyć nowe wersje naszej aplikacji tak, żeby po prostu rozdzielić pewne historyczne momenty. Mamy informacje o tym, czy mamy jakiś issue w naszym projekcie, czy to są typu warnings czy errors. Mamy komentarze, mamy również podgląd kodu, bo tak samo jak w przypadku Webflow, Flutterflow umożliwia nam eksport kodu. Dzięki czemu jeżeli nawet Flutterflow w danym momencie nie oferuje jakiejś funkcjonalności, bo platforma ma dopiero 2 lata, to możemy sobie ten kod wyeksportować i edytować już później w naszym ulubionym edytorze IDE, jeżeli po prostu znamy Flutter.
Więc możemy sobie ten kod podejrzeć, możemy podłączyć jakieś github repozytory, możemy ten kod sobie ściągnąć, czy możemy ściągnąć sobie plik APK. Możemy też nasze aplikacje podglądać, robić na nich preview, robić je odpalać w run mode, test mode, w którym będziemy to testowali. Musicie być tylko świadomi tego, że test mode nie zawsze oddaje to jak aplikacja będzie funkcjonowała na żywo. No i mamy tutaj, jak widzicie, różne ustawienia strony. Jednym elementem na stronie jest sama strona w sobie więc mamy page parameters mamy route settings i tutaj możemy sobie zarządzać tym. Czy nasza strona ma mieć safe area czy mamy nie chować klawiaturę na kliknięcie w ekran czy mamy na przykład zdisable'ować Android button No tutaj musimy mieć już troszkę wiedzy na temat tego jak funkcjonują systemy czy aplikacje mobilne, aby dobrze naszą aplikację zaprojektować.
Oczywiście praktyka czyni mistrza, jeżeli będziecie sobie to testowali, wypuszczali, patrzyli co na co wpływa, no to będziecie już mogli tym zarządzać. Tutaj moi drodzy... tworzymy wszystkie akcje dotyczące poszczególnych elementów czy to właśnie strony, czy elementów, czy kliknięcia więc możemy sobie otworzyć taki Action Flow Editor no i on wygląda w taki sposób, że w przypadku strony możemy odpalić jakiś workflow na page load'zie albo kiedy ktoś, wiecie, potrząśnie telefonem co ma się wtedy zadziać? no powiedzmy, że na page load'ie chciałbym wykonać jakąś akcję sobie takie drzewko akcji czy chciałbym kogoś navigate czy chciałbym na przykład coś share’ować, czy chciałbym wyświetlić jakąś animację czy chciałbym wyświetlić jakiejś notyfikacji powiedzmy, że chce wyświetlić alert dialog.
Informational dialog no i mój tytuł to będzie tytuł. message to będzie wiadomość no i dismiss będzie OK więc na page load'zie po prostu wyświetli się pewien dialog informacji zobaczmy sobie jak to będzie wyglądało widzicie tutaj możemy od razu zrobić preview takiej aplikacji załadowanie tego może chwilkę potrwać super jak widzicie strona się załadowała więc jak widzicie tych opcji mamy naprawdę naprawdę wiele i możemy sobie nimi zarządzać czy właśnie tworzyć całe drzewka decyzyjne. No bo tutaj dalej możemy dodać sobie jakiś conditional, jeżeli ten warunek został spełniony, no to pójdziemy w lewo albo w prawo. I znowu tutaj tych akcji czy conditionali, na których będziemy mogli się oprzeć jest naprawdę bardzo wiele.
Nie będę tutaj wchodził szczegóły, bo tutaj zachęcam was troszkę do zgłębienia tego, jak funkcjonują aplikacje mobilne, tutaj widzicie też możemy dodawać customowe funkcje czy jakieś wyrażenia napisane w tradycyjnym kodzie w tradycyjnym podejściu no więc tutaj jest na pewno bardzo wiele elementów z którymi warto się po prostu z naszej perspektywy zapoznać jak widzicie aplikacja od razu mówi mi, że mam błąd, bo dodałem conditional, który nie ma żadnej kondycji zdefiniowanej tak, no więc ja sobie go po prostu na razie usunę, żeby on nam tutaj nie psuł krwi. Super. Jak widzicie mamy już jakąś pierwszą akcję. No i tak samo jak w przypadku Bubla czy Webflow nanosimy kolejne elementy do naszej strony, które sobie konfigurujemy jak dokładnie one powinny wyglądać, czyli chcę żeby ten napis był semi-bold a jego rozmiar to 24 w ten właśnie sposób będziemy w stanie zarządzać tym wszystkim co się w naszej aplikacji dzieje widzicie musimy tutaj dodać jakiś wraper tych wszystkich elementów jak one powinny dokładnie wyglądać chcę żeby to było rozciągnięte no i widzicie już mam stronę z napisem hello world i button w jakiś sposób atrakcyjnie, natomiast nie o to nam w tym wypadku chodzi. No i teraz tak, jak widzicie oczywiście mamy tutaj akcję, ale możemy również zrobić jakiś back-end query, jeżeli jakiś back-end będziemy do tego podłączony, żeby właśnie wyświetlać jakieś listy, zaciągać elementy, etc.
Będziemy mogli sobie generować Dynamic Children, czyli właśnie całą tą listę na podstawie naszego back-end query. jakimś action triggerze. No i mamy również możliwość komentowania tego wszystkiego, żeby po prostu inny deweloper jeżeli wejdzie w naszą aplikację wiedział co się dokładnie w niej dzieje. Bardzo fajną opcją we Flutterflow jest natomiast to, że pozwala nam bardzo zaawansowaną konfigurację styli i między innymi daje nam domyślnie możliwość switchowania między light mode a dark mode. Jak to za funkcjonuje to zaraz Wam dokładnie opowiem. Możemy tutaj też wyświetlić od razu device. Dzięki czemu będziecie mogli na przykład zrozumieć czym jest wtedy właśnie save area.
Bo zobaczcie, że jeżeli sobie włączymy to nam tutaj się ten widoczek trochę zmienia. W tym wypadku. Super. Więc mamy podstawowe opcje włączone. Widzimy jak one dokładnie funkcjonują. Możemy też zobaczyć jak nasze urządzenie będzie, wyglądał z klawiaturą wyłączoną czy wyłączoną i tego typu rzeczy. Mamy również możliwość łączenia canvasa. Następnie tak jak w przypadku w Bubble oraz Webflow mamy całe drzewko elementów, bo znowu jest to w pewien sposób schierarchiwizowane żebyśmy wszystko widzieli mamy nasze page, które możemy również umieszczać w folderach, dodawać sobie nowe page'e z jakiejś templatki, więc powiedzmy, że chcę sobie stworzyć jakiś, może, o, taką ładną stronę, przepraszam, by tutaj przełączyło.
Content, chciałbym taką stronę piękną tutaj mieć u siebie w aplikacji, więc sobie klikam Create Page, no i widzicie, mam już całą stronę stworzoną. Jeżeli sobie ją podejrzę... bardzo szybko, to zobaczycie też, że Tutaj już jest pewna interaktywność. Mogę sobie na przykład tym przesuwać. Jak sobie to kliknę to coś się, a tu się nic nie zadzieje, bo nie jest nic podłączone. I tak dalej mogę sobie przewijać. Tutaj widzicie te czarty jakby działają po najechaniu. Mogę widzieć co dokładnie jest czym i tak dalej i tak dalej. Więc bardzo fajnie nam to od razu po prostu pokazuje jak działa nasza aplikacja wewnątrz.
W tym przypadku dużo większa animacja jest podłączona na page load. Tego w preview nie widać, bo w preview nie wszystkie rzeczy są widoczne. Musielibyśmy wtedy wejść w test mode naszej aplikacji. Natomiast zanim się to załaduje, to tutaj widzicie, że jeżeli mamy jakąś animację dodaną, to znowu tych możliwości mamy dużo, bardzo dużo. No i możemy zobaczyć po prostu, jak ta animacja sama w sobie wygląda. Zaraz sobie też podejrzymy, jak ona wygląda tutaj. Okej. Jak widzicie nasza aplikacja już się... ładuje. To, co jest bardzo fajne, o czym chciałbym powiedzieć, to możemy ją od razu też podejrzeć sobie w różnych breakpointach, jak również mamy instant reload.
Jak widzicie tutaj nam się po załadowaniu wyświetlił nam się ten tytuł, ten dialog window właśnie z naszą wiadomością, którą sobie tam zaprojektowaliśmy. No ale powiedzmy, że my byśmy chcieli podejrzeć tą stronę. Oczywiście tu jest homepage, tak mamy to ustawione, więc dodajemy sobie, że na kliknięcie buttonem, chcemy się znawigować do tamtej już ładnej strony, tamtej strony dashboardowej, więc dodajemy sobie navigate to, dashboard five, super i to wszystko. Czy teraz musimy od nowa ładować aplikację? Nie, wystarczy, że zrobimy instant reload, dzięki temu aplikacja przeładuje się bardzo szybko, bo ona uwzględni tylko te zmiany drobne kodu jak to działa.
Pamiętajcie też również, że aplikacje natywne, mobilne, odpalane w przeglądarce nie działają tak super płynnie i fajnie jak naprawdę odpalane w telefonie, więc ja i tak zawsze zachęcam do sprawdzania ich na telefonie. Możemy też sobie od razu zobaczyć jak one będzie wyglądała w light mode albo dark mode. Tak tutaj nam się to nie zmieniło kliknijmy sobie z powrotem na ciemny tryb. Super klikamy button zostałem przekierowany widzicie tej ta animacja trochę była taka przycięta no bo jest to odpalone w przeglądarce, a nie bezpośrednio w telefonie. Natomiast tutaj wtedy możecie sobie zobaczyć jak to dokładnie wygląda jak to dokładnie po prostu funkcjonuje.
Super. Możemy iść dalej. Tutaj mamy również bardzo ciekawą opcję tak zwany storyboard,vgdzie nas dokładnie przenosi. Jeżeli będziemy mieli więcej tych ekranów no to tutaj mamy legendę też co się dzieje, co jest czym. Będziemy również widzieli całą ścieżkę poruszania się tego jak się użytkownicy będą poruszali w naszej aplikacji. Dalej mamy oczywiście database, ten firebase'owy database jeżeli jesteśmy zintegrowani z firebase'em. Dalej mamy datatype'y. które możemy sobie tworzyć w naszej aplikacji tutaj znowu odsyłam do nauki o aplikacjach mobilnych mamy upstajty, czyli gdzie będziemy przechowywać np. tokeny użytkownika czy informacje użytkowniku, żeby nie pobierać ich z back-endu za każdym razem kiedy coś załadujemy no i tutaj to co Ryski lubią najbardziej, czyli dodawanie API.COLI to jest właśnie to gdzie łączymy back-end z naszym front-endem to tutaj możemy sobie te API calle definiować, łączyć je w grupy itd.
Mamy naprawdę zaawansowane opcje konfiguracji łącznie z cachingiem czy z proxywaniem naszych zapytań więc będziemy mogli oszczędzać nasz backend, będziemy mogli im odpowiednio zarządzać i odpowiednio go... Skonfigurować czy wkomponować w całą naszą aplikację. Mamy assety, które będą bezpośrednio w naszej aplikacji, dzięki czemu nie będziemy musieli pobierać ich z internetu, tylko będą one od razu wczytywane z urządzenia, co jest oczywiście bardzo pomocne i bardzo pozytywnie wpływa na performance aplikacji. No i mamy custom kodowe funkcje, gdzie możemy dodać custom kody, custom widget czy custom funkcje, czy custom akcje, czy custom pliki. Dzięki temu będziemy mogli tutaj naprawdę bardzo zaawansowaną już aplikację mobilną może nie tak bardzo zaawansowaną jakbyśmy pisali ją tylko w codzie, ale znowu mamy możliwość tutaj dodawania tego custom codu, definiowania go bezpośrednio na tej platformie, więc tak naprawdę nie mamy limitów dotyczących tego co możemy we Flutter Flow zbudować.
Nadal musimy pamiętać o tym, że to głównie backend będzie obsługiwał nasze funkcjonalności ale tutaj te możliwości mamy naprawdę nieograniczone. No i prawie ostatnia rzecz, czyli team settings, czyli właśnie zarządzanie tym jak nasza aplikacja ma się zachowywać w pewnych breakpointach, jak te breakpointy będą, jakie będą loadery w naszej aplikacji, na przykład nie chcemy żeby był mode team, wszystkie kolory do wybrania jak również dark mode team, dzięki temu jest dużo łatwiej nam tworzyć aplikacje, typografie and icons czyli jakiej typografii będziemy używali jakich czcionek itd. jakich ikonek, no i team widgets czyli możemy tutaj sobie tworzyć własne widgety. Na końcu mamy upsettings bardzo istotna sekcja Flutter Flow w której musimy wyspecyfikować wszelkiego rodzaju informacje package name, display name, project name, jak ma nasza aplikacja funkcjonować, jakie będzie miała asety dotyczące właśnie splash launcher icon, czy navbar będzie w naszej aplikacji i appbar, jak on będzie funkcjonował, jak on będzie wyglądał, kolaboratorzy, firebase, różne języki naszej aplikacji jeżeli będziemy chcieli z nich korzystać na jakiej platformy tworzymy te aplikacje jakie uprawnienia będziemy pytali użytkowników kiedy będą odpalali naszą aplikację na iOS lub Androidzie autoryzacja użytkowników czy chcemy z niej korzystać jeżeli tak to czy z tej Firebase'owej czy z tej zwykłej push notyfikacje mobile deployment przy którym się na sekundkę zatrzymamy Flutterflow umożliwia nam publikację aplikacji bezpośrednio w sklepach.
Mamy tutaj całą instrukcję jak się do tych sklepów podłączyć, czyli jeżeli wy stworzycie aplikację web flutter flow klikacie deploy to app store, deploy to play store i wasza aplikacja jest już w sklepach. Oczywiście, znowu po stronie tych sklepów musicie zrobić pewną konfigurację, żeby aplikacja była realnie dostępna, ale nie musicie przerzucać tych package'ów, eksportować ich, bawić się w te wszystkie rzeczy. Macie to wrzucone od razu tam żeby móc to publikować. to dopiero początkująca opcja, więc bardzo ostrożnie bym się z nią obchodził, bo jak widzicie również to jest informacja, że jest ona dopiero w betcie. Integracje. Jeżeli chcecie zintegrować Stripe'a, Braintree, Revenue'ka, Trazor Pay, Superbase, GitHub, Algolia, Google Analytics, Firebase'a, możecie już o nie mówiliśmy, Google Maps'a, AdMob'a, czy MaxLivestream.
To te wszystkie rzeczy macie tutaj zaoferowane natywnie. Nie musicie używać custom code'u. Wystarczy, że tutaj odpowiednio to skonfigurujecie. Będziecie mogli z tego korzystać. Jedne z najpopularniejszych integracji w aplikacjach mobilnych są tutaj tak naprawdę dostępne na wyciągnięcie ręki. Jak widzicie Flutterflow jest bardzo zaawansowaną platformą de facto edytorem czy kreatorem aplikacji mobilnych za pomocą którego możemy tworzyć tak naprawdę wszelkiego rodzaju aplikacje w mojej opinii dlatego, że nawet jeżeli Flutterflow natywnie nie oferuje jakiejś funkcjonalności to umożliwia nam dodawanie oraz kompilowanie kodu wewnątrz tej platformy dzięki czemu tak naprawdę nasze możliwości ogranicza tylko możliwości Flutter'a czy naszej wyobraźni i tego co możemy stworzyć.
Jeżeli są jakieś biblioteki dostępne na PubDev'ie czy tego typu rzeczach, to możemy je tutaj wintegrować, korzystać, podglądać, jak one de facto będą funkcjonowały. Flutterflow w mojej opinii jest najbardziej zaawansowaną i najlepszą platformą obecnie, no-code'ową czy low-code'ową de facto do tworzenia natywnych aplikacji mobilnych. Mam nadzieję, że dzisiejszy film był dla Was pomocny. Zapraszam do kolejnych serii. Do zobaczenia. Cześć!.
Podcast No-Code / Low-Code to podcast o technologii, w którym opowiadamy o digitalizacji, automatyzacji i tworzeniu stron, budowaniu aplikacji oraz platform internetowych. Poznasz wady i zalety low code i no code oraz zrozumiesz podstawy tych narzędzi. W odcinkach podcastu eksperci firmy havenocode poruszają także tematy biznesowe, wskazują najlepsze platformy low code i najlepsze platformy no code.
Dowiedz się jak korzystać z platform no-code i low-code, takich jak: Bubble.io, Xano, Webflow, Flutter Flow, AppSheet czy Zapier. Naucz się tworzyć aplikacje bez kodowania. Poszerz swoją wiedzę i zostań citizen developerem. Sprawdź, jak rozwija się branża low code i no code w Polsce i na świecie. Słuchaj i oglądaj podcast Just No Code!
