WSTECZ
POPRZEDNI
NASTĘPNY 
ODCINEK
10
12/28/2023

Zobacz moc FlutterFlow - sprawdzamy platformę od środka

W tym odcinku skupiamy się na platformie FlutterFlow, która umożliwia tworzenie interaktywnych interfejsów użytkownika dla aplikacji mobilnych. FlutterFlow jest narzędziem opartym na frameworku Flutter, który pozwala tworzyć natywne, piękne i responsywne aplikacje.

Agenda

00:00 - Start

00:29 - Wstęp

01:24 - Platforma od środka

20:24 -Podsumowanie

UKRYJ TRANSKRYPT

Flutter Flow: Przegląd Platformy

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.

Wprowadzenie do platformy FlutterFlow

Ż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ć.

Edytor Flutter Flow

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ć.

FlutterFlow- praktyka czyni mistrza

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.

Więcej informacji o platformie

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ć.

Publikowanie aplikacji w sklepach

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ć.

Podsumowanie

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ść!.

ZOBACZ WIĘCEJ ODCINKÓW

ODCINEK
14
2/19/2024
Webflow to nowy wordpress. Poznaj jak działa ta platforma no-code
Czy Webflow jest lepszy od Wordpressa? Czym różnią się obie platformy i jak wygląda Webflow od środka? Zobacz!
WIĘCEJ
ODCINEK
1
11/30/2023
Od MVP do złożonych aplikacji: czym jest no-code/low-code. Wyjaśniamy i obalamy mity!
Dołącz do nas w pierwszym odcinku Just No-Code, w którym odkrywamy świat technologii no-code i pokazujemy, jak można ją wykorzystać w Twoim biznesie: mówimy podstawy no-code/low-code, wyjaśniając, czym jest, jak można go używać i czy nadaje się tylko do tworzenia MVP.
WIĘCEJ
ODCINEK
20
3/8/2024
Najlepsze platformy no-code low-code. Z czego najlepiej korzystać? Ranking 2024
Jakie platformy no-code low-code będą najlepsze i najpopularniejsze w 2024 roku? Sprawdź nasz ranking, w którym oceniamy narzędzia LCNC i omawiamy ich rozwój.
WIĘCEJ
Hej!
Opowiedz mi o swoim pomyśle!
Odpowiemy w ciągu 24 godzin. Tak, to TAKIE proste!
Emil Bednarczyk, havenocode NoCode and LowCode Development Agency CEO and Client Partner
Emil Bednarczyk
Client Partner / havenocode.io
M: +48 792 015 688
Hej!
Opowiedz mi o swoim pomyśle!
Odpowiemy w ciągu 24 godzin. Tak, to TAKIE proste!
1
W jakich wyzwaniach możemy Ci pomóc?
2
Jaki jest Twój budżet?
3
Czy potrzebujesz NDA?
4
Podaj nam więcej szczegółów
Dziękujęmy! Twoja wiadomość została wysłana. Jeśli chcesz dowiedzieć sie więcej o no-code, zapraszamy na nasz blog!
Czytaj o no-code
Wystąpił błąd, formularz nie został wysłany.

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!