Idén visszatért a Google nagyszabású éves eseménye, a Google I/O. Május 18 és 20-a között rendezték, ezúttal az online térben. Ezt azonban már megszoktuk. Újdonságokból nem volt hiány, debütált a FlutterFlow nevű online eszköz, ami egy low-code (kevés kódolást igénylő) eszköz. Kipróbáltam, ennek osztom meg a tapasztalatait.
A low-code eszközöket nyomon követem, és kipróbálom, mert ezek már most is pótolják az IT-ban jelen lévő szakemberhiányt. Írtam már a UICode megoldásáról, ami a Figma designerek és az app fejlesztők táborát közelíti egymáshoz.
Ide fogok eljutni a FlutterFlow példával
Egy egyszerű példán keresztül néztem meg, hogy mit tud. Ez a végeredmény. Jelen esetben a Chrome böngészőben indítottam el, mert a Flutter Web-es támogatása első osztályú. Mobilon ugyan így nézne ki.
Előkészületek a FlutterFlow kipróbálásához
Az online eszköz a www.flutterflow.io oldalán érhető el, ahova egy Google accounttal regisztrálva máris hozzáfértem a felülethez.
Egyből végigvezet egy projekt beállításán, ami egy név megadásából áll. Adjunk neki egy nevet, és már kezdhetjük is a felületek kialakítását. Előtte még felajánlja, hogy már egy meglévő sablon alapján készítsen elő egy megoldást, vagy teljesen szabad kezet kapva, egy üressel kezdjünk.
Én a példában egy üres projekttel kezdtem, mert kíváncsi voltam, hogy mennyire bonyolult a játszadozás vele. Természetesen elérhetőek a tanuló videók, amik nagyban segítenek, ha elakadnánk.
A bal oldali menüben láthatjuk a választható widget-ek (kis grafikai komponensek) listáját. Van belőlük bőven, kedvemre válogathattam.
Csak fogd-és-vidd technikával be kell húzni a komponenst az előre elkészített Home screen-re. Ide én egy olyan listát adtam meg, aminek minden eleme egy termék képe és a neve.
Ezután létrehoztam egy másik képernyőképet, hasonlóan egyszerűen, ahova akkor navigál az app, amikor rákattintunk egy sorra.
Ez lett a Részletek képernyő. A tetején van egy nagy kép, alatta különböző formázásokkal a neve, leírása, származási ország, ára. A formázások a megszokott kényelmes beállításokkal működik: betűméret, vastagítás, döntés, színe, igazítás. Egyszerű.
Amiben nagyot tud az FlutterFlow low-code
Eddig mondhatnánk, hogy nem rossz, de azért mutasson valami igazán menőt!
Ez nem más, mint az, hogy a meglévő szerverünket (BackEnd) hozzá tudjuk kapcsolni. Lehet ez saját, meglévő interfész, vagy akár a Google Firebase cloud megoldása. A példában a Firebase integrációt próbáltam ki, ami ugyan igényel némi hozzáértést, de nem lehetetlen küldetés. Tulajdonképpen a szokásos beállításokat kell végigcsinálni, és nekem elsőre működött.
Nem írom le a lépéseket, de a lényeg, hogy meg tudjuk adni, hogy az adatok milyen szerkezetben érkeznek a szerverünkről. Ehhez egy adattípust készítünk el, és a későbbiekben ezt használjuk mindenhol.
A kezdő képernyőn a listát feltöltjük a szerverről jövő adatokkal. A termék kép címét, és nevét már ebből az adattípusból vesszük. Ha kiválasztunk egy elemet, akkor megjegyezzük, hogy melyik volt az, és a részletező képernyőn pedig bővebb infókat jelenítünk meg róla. Ennyire egyszerű. Mindezt úgy, hogy ugyan nem árt, ha láttunk már kódot, de nem kell kódot írnunk. Inkább csak táblázatokat töltünk ki hozzá.
Nagyon sok minden van a FlutterFlow alap eszköztárában, pl. hogy előnézetben egy kattintható drótvázat (wireframe) kapunk, ami arra jó, hogy legyen egy érzetünk a végtermékről. Sokszor már ez is elegendő a felhasználóknak, hogy kiderüljön, hogy mit csinál az app.
A gyorsan növekvő IT szakember hiány számos területen nehezíti a projektek indulását vagy befejezését. A low-code, no-code, vagy a kereszt-platformos (cross-platform) megoldások ezeket a terheket enyhíthetik. Ezekkel pótolhatóak fejlesztői pozíciók, amikre esetleg éveket kellene várnia egy cégvezetőnek.
Ingyenes vagy fizetős?
Kezdtem az ingyenes részével, ahol kipróbálhattam a fő funkcióját, hogy elkészíthettem a képernyőket. Ezután le akartam tölteni a kódot, hogy kipróbáljam.
Havi 30 USD-ért megkapjuk a kódot, ami azt jelenti, hogy sok órányi kódolástól mentesülünk.
A Pro-ban már havi 70 USD-t kell fizetnünk érte, ami jól jöhet egy mobil app fejlesztő stúdiónak.
Minden esetre az első 14 nap ingyenes, így el tudjuk dönteni, hogy áldoznánk-e rá?
Egyelőre még egy friss, első verzióról van szó, tehát sok hiba lehet benne.
Konklúzió
Összegzésként a FlutterFlow low-code webalkalmazásról elmondható, hogy érdemes volt kipróbálnom. Sok funkciót tud már most is, ami várhatóan hamarosan még tovább bővülnek.
Ennek, és számos, a közelmúltban útjára indult az eszköznek a megjelenése egyértelműen bizonyítja, hogy nagy jövő előtt áll a Flutter UI keretrendszer. Nem csupán mobil, de a web és asztali platformokat is meghódítja.
Ha további kérdésed lenne erről az eszközről, vagy magáról a mobil app fejlesztésről, a kapcsolati oldalamon vagy LinkedIN-en elérhető vagyok.
Borbély Viktor vagyok, több éves Projekt menedzsment tapasztalattal. Szabadúszóként Flutter és a Spring Boot vagy Firebase Backend alkalmazások tervezését és megvalósítását végzem.
Dolgoztam több vállalatnál, az autóiparon (Continental, Valeo), a távközlésen (Ericsson) át a mobil fejlesztésig (Combit zRt. – Grepton Csoport).
Amikor együtt gondolkozásra van szükség, mindig van egy ötletem, amivel előremozdítom a megoldást. Szívesen mentorálom a körülöttem lévőket.