4 nyomós ok, amiért most megéri a Flutter fejlesztés
2021-ben a mobil app-ok további lendületet kapnak

Viktor
A Flutter cross-platform terjedőben van.
forrás: Pixabay.com

A nyár nem telik el eseménytelenül. A Webuni szervezésében Augusztus 10-én velem együtt három, a mobil alkalmazások fejlesztésben jártas szakembert kérdeztek meg a Flutter fejlesztés előnyeiről, jövőjéről. Nagyon jó beszélgetés kerekedett, amiből elhoztam 4 fontos kérdést, amire érdemes figyelni. Lássuk is!

Az eredeti teljes YouTube videó megtekinthető, amiből összefoglaltam a lényeget.

A webináron társaim voltak Juhos István, Senior Software Engineer, a BME oktatója; valamint Vogel Csongor, Senior Android és Flutter Software Engineer, az ff.next nevű fintech startup senior munkatársa.

Aki nem akar kódolni, de érdekli a Flutter fejlesztés

Egy eszköznél mindig vonzó, ha minél előbb ki tudjuk próbálni. Bodor Ádám kérdésére, hogy mi kell hozzá, István válaszolt.

Az első és legegyszerűbbb, hogy a dartpad.dev, online felületén ki tudjuk próbálni a Dart nyelvet, valamint előre megírt Flutter minta alkalmazásokat. A kódot tudjuk módosítani, ami egyből kipróbálható.

Lehet-e a Dart nyelv ismerete nélkül, még egyszerűbben? Igen!

Ez a FlutterFlow, egy online felület, ahol Drag&Drop módon, össze lehet kattintgatni egy működő alkalmazást. Még eléggé kezdetleges, de folyamatosan kap új funkciókat. A lényege, hogy az ebből generált kód ténylegesen egy működő alkalmazást ad. Integrációt biztosít még a saját, meglévő szervereink API-jaival is.

Korábbi cikkeimben írtam a FlutterFlow online szerkesztőről és a Figma UICode pluginjáról. Ha bővebben olvasnál róluk, akkor kattints a linkekre.

Milyen a Flutter fejlesztés belépési szintje?

Amit ki lehet mondani, hogy a Flutter viszonylag kényelmes – mondja István. Az elején ugyan egy új nyelvet, a Dart-ot kell megtanulni. Ez azonban egy új, modern alapokra építkező nyelv. Ha valaki programozott már Java-ban, Kotlin-ban, Swift-ben, C-ben, akkor ez nem lesz idegen tőle. Az többi nyelvhez képest az eltéréseket megtanulja, átnézi a dokumentációt, és kezdhet fejleszteni. A Visual Studio Code (VS Code), Android Studio szerkesztők legenerálják a kezdő alkalmazást, ami működik, alap dolgokat meg lehet nézni benne. Sikerélmény van mindjárt az elején.

“Nincs még egy ilyen platform, amivel ilyen tooling-gal, ilyen gyorsan el lehet kezdeni fejleszteni.”
Juhos István

Le kell cserélni a régi kódbázist?

Ennél a résznél valós környezetből hallhattunk róla infót, hogy egy már megírt, régi alkalmazásnál ezt hogyan kell érteni. Csongor elhessegette azt az általános megközelítést, ami sok cégvezető rémálma: újra kell írni az egész alkalmazást.

Ennél vannak kifinomultabb módszerek. Egy nagy alkalmazásban, ha el tudunk különíteni modulokat / funkcionalitásokat (képernyőket), akkor oda befűzhető egy Flutter-ben megírt modul, ami Android-on vagy iOS-en jól működik.

Ez alapvetően már megköveteli a natív platform ismereteket. De jellemzően, ha 1 ilyen ember van egy csapatban, aki el tudja végezni az integrálást, akkor nagyban növelhető a produktivitás.

Milyen a munkapiaci kereslet a Flutter fejlesztés iránt?

Fontos kérdés, hogy ugyan sok fejlesztőt érdekel ez az újdonság, és szívesen fejlesztenek benne, de mégiscsak a piac fogja kifizetni a fejlesztő bérét. Erre a kérdésre többféle válasz született.

Nagyon le vagyunk maradva – kezdi ezzel a felütéssel Csongor. Európában a lengyelek élen járnak a technológia alkalmazásában. Nyugat-Európában felismerték, hogy a régen megírt alkalmazásokat vagy Flutterben érdemes újraírni, vagy apránként, a modulokat lecserélni benne. Merthogy erre is van lehetőség. Távol-keleten, Kínában egy nagyon erős növekedés látszik. Indiában pedig az olcsó fejlesztési költségek további versenyelőnyhöz juttatják a megrendelőket.

István azzal kezdi, hogy ha van angol tudás, és hajlandóság megtanulni valami újat, akkor nyugodtan pályázzunk külföldi állásokra. A mostani távoli munkavégzési lázban égve sokkal elérhetőbbek lettek a külföldi munkahelyek is. Nem szükségszerű a kiköltözés, hanem remote munkák itthonról is végezhetőek. Maga egy-egy interjúzás tapasztalata pedig felbecsülhetetlen.

Zárásként a magam véleménye erről az, hogy ha megvan már egy natív Android-os vagy iOS-es tudás, akkor amellé mindenképpen érdemes egy valamelyik cross-platformos keretrendszert megismerni. Előnye ennek, hogy a másik operációs rendszerre is tudunk fejleszteni, kevés hozzátanulással. Ha pedig a Flutter fejlesztés megtetszett, akkor érdemes azt elmélyíteni, és munkát keresni.

Ha megtetszett a Flutter, de nem tudod, hogy hogyan indulnál neki, vagy csak támogatásra van szükséged benne, akkor keress meg a kapcsolataim egyikén.

Mobil app vagy Mobil website? Melyik a jobb választás?
A 2020-as év fellendítette a mobilozást

Viktor
Melyiket válasszam? Mobil app vagy mobil website?
Néha nehéz választani a jó közül. forrás: pixabay.com

Elérkezett a mobilozás ideje – a mobilt használók már többen vannak, mint az asztali gépet használók. Ennek következményeként az üzleti élet felismerte, hogy a mobil kommunikációt hatékonyabban kell használnia, hogy új ügyfeleket vonzanak. Bár ez önmagában még nem elegendő! A mobil app-okat vagy az website-jainkat optimalizálni kell a jó felhasználói élmény érdekében. Melyikre fektessük a hangsúlyt, ha a költségeket szinten kell tartani?

A 2020-as év eseményei tovább erősítették azt a tendenciát, hogy az emberek már inkább mobil eszközökről interneteznek, érik el a digitális tartalmakat.

Mobile App-ok

A natív mobil app-ok meghatározott platformra készülnek, úgymint iOS vagy Android operációs rendszerre. A felhasználók letöltik és telepítik az eszközeikre, és általánosan elmondható, hogy a natív app-ok gyorsabb és érzékenyebb felhasználói élményt nyújtanak a mobil website társaiknál.

A felhasználói élmény

Többféle, interaktív módon lehet a felhasználókat elkötelezni

A mobil app lehetővé teszi, hogy a meglévő felhasználóidnak egy új csatornán keresztül tudsz értéket adni. Ahelyett, hogy ugyan azt a szöveget és képeket kellene néznie, mint egy website-on, az app-ok olyan funkciókat tartalmaznak, amik az app speciális részeivel is kapcsolatba kerülnek. Például, az Instagram felhasználók megnézhetik a képeket egy website-on, de nem tudnak feltölteni az app nélkül.

Személyre szabhatóság

A mobil app-ok lehetővé teszik, hogy amint letöltötték a felhasználók az app-ot, egyből személyre is szabhassák a saját ízlésük szerint. Az app-ok tudják követni a felhasználói használatot, ez arra használható fel, hogy egyéni ajánlatokat, frissítéseket javasoljanak. Ezáltal még értékesebb lesz a használója számára. Az app-ok az üzleti élet számára fontos, egyénre szabott kommunikációt tudnak folytatni a felhasználó érdeklődési körei, földrajzi helyzete, használati szokásai, stb. alapján. A Business of Apps felmérése alapján, a személyre szóló vagy un. dinamikus értesítések pozitív hatással voltak az elköteleződésre, a megnyitási hajlandóságra, és a konverzióra. Az egyedi beállítások lehetősége jó a felhasználónak is, mert így a legtöbbet hozhatja ki az app-ból.

Működik offline módban is

A mobil app-ok internet kapcsolat nélkül is használhatóak. Bár sok app-nak szüksége van internet hozzáférésre, hogy a feladataik legtöbbjét elvégezzék, még így is tudnak biztosítani bizonyos funkciókat vagy tartalmat, kapcsolat hiányában. Ezzel az előnnyel a felhasználóink hozzáférhetnek az információhoz bárhol, bármikor.

Intuitív felületek

A mobil app-ok általánosságban véve intuitívabb kezelőfelületet nyújtanak, ezáltal a feladataink is könnyebben elvégezhetőek. Az egyedien kialakított felület lehetőséget ad, hogy a felhasználók jobban elmerüljenek a mobilozásban. Egy adott operációs rendszert használók már hozzászoktak annak működéséhez, és ha egy app egy bizonyos platformra készül, akkor a felhasználók ott is azt kapják, amit megszoktak. Egy reszponzív website nem tudja ezt minden esetben megadni.

Használjuk ki az eszköz képességeit!

A mobil app-ok hozzáférnek az eszköz beépített funkcióihoz, úgymint a kamera, GPS, helymeghatározás. Ezeknek a kihasználása egy fejlettebb, kényelmesebb élményt nyújt.

Például a GPS adatok automatikus használata a személyszállító társaságoknak nagyban segíti az utazásra váró személy megtalálását. Ezzel lerövidítve a várakozási időt, és növelve az elégedettséget.

Reszponzív mobil website-ok

A Reszponzív mobil website-ok olyan website-ok, amik a különböző képernyőméretekhez igazodnak. Alapvetően, egy reszponzív website ugyan annak az általános website-nak egy különlegesen beállított változata, de ezáltal a mobil-on is jól használható.

A felhasználói élmény

Mindenki számára elérhető

A mobil app-okkal ellentétben, amik csak bizonyos platformokon működnek (iOS vagy Android), egy reszponzív website bármely mobil eszközön elérhető, függetlenül az operációs rendszerétől, feltéve, hogy van internet kapcsolat. Bár ne feledjük, hogy az internet elérés, annak minősége és a sebessége mind olyan tényező, ami befolyásolja a web-es élményt.

A reszponzív website-okat nem kell letölteni és telepíteni, valamint teljesen ingyenesek, nem úgy, mint néhány fizetős app az áruházakban.

Nem a felhasználónak kell frissítenie

Még egyszer, a mobil app-okkal ellentétben, a felhasználóiknak nem kell bajlódni az új verziókkal és azok frissítgetésével, ha a website-ból egy új javítás jön ki. Mivel a website-ok könnyen frissíthetőek, könnyű hibákat javítani rajtuk, ezért feltételezhetően a felhasználók nem fognak az egészből semmit észrevenni, és egyből élvezhetik az új, fejlettebb élményt.

Költséghatékony

A költséghatékonyság inkább üzleti szempontból előnyös, mint a felhasználók szemszögéből. A bonyolultságtól függően azonban egy reszponzív mobil website költséghatékonyabb lehet, mint a mobilalkalmazások fejlesztése. A költségek egy alapvető tényező, amit számításba kell venni, különösképpen, ha egy app-pal több platformon is jelen szeretnénk lenni.

A költségek csökkentésére ma már nagyon jó megoldások léteznek, amik lehetővé teszik, hogy a mobil app-unk mindkét platformra (iOS és Android) elérhető legyen, de nagyjából a teljes ár kb. 65-75%-árért. Ilyen keretrendszer a Flutter, ami most a legjobb választásnak számít.

Konklúzió: melyik a jobb?

Tisztán statisztikailag nézve a számok azt mutatják, hogy a mobil app-ok érik meg. Egy nem túl régi jelentés a Sensor Tower-től kiderítette, hogy a fogyasztás és a telepítések száma a mobil app használók körében jelentősen növekedett 2020 első felében, elérve az 50.1 Milliárd dollárt az App Store és Google Play áruházakban, összesítve. Míg ez a növekedés a COVID-19-nek és annak felhasználókra gyakorolt hatásainak tudható be, ez 23.4%-os növekedést mutat 2019 első feléhez képest és folyamatosan növekszik.

Ugyan ez a jelentés azt becsüli, hogy 71.5 Milliárd új app telepítés történt 2020 első felében. Ez 26.1%-os növekedést jelent az előző évhez képest (YoY), ami további ösztönzést adott a vállalatoknak, hogy app szolgáltatást fejlesszenek.

A megfelelő választás függ az üzleti céljainktól. Ha a célunk az, hogy mobilbarát tartalmat szolgáltassunk a széles közönségnek, akkor feltételezhetően egy mobil website elegendő számunkra. Amennyiben a nagyobb elköteleződés, a szorosabb kapcsolattartás és kommunikáció ami növeli a lojalitást, a mobil app jobb választásnak tűnik.

Sok esetben úgy dönthetünk, hogy mindkettőre szükségünk van, egy mobil app-ra és egy website-ra. Ha jól van kivitelezve a stratégia, mindkettő értéket adhat vállalkozásunkhoz. Tehát amikor a branded mobil stratégiáján dolgozol, a kérdés nem az lesz, hogy mobil app vagy website legyen, hanem inkább egy kétirányú megközelítés.

Létezik egy köztes megoldás is, ötvözve a két irány előnyeit és hátrányait, ez a PWA. Vagyis Progressive Web App. Erről bővebben írtam egy bejegyzésemben.

Ha mobil app fejlesztését fontolgatod, akkor keress fel bizalommal az elérhetőségeim egyikén, ahol egy ingyenes beszélgetés alkalmával meg tudjuk beszélni, hogy mire app-ra, vagy website-ra van szükséged?

FlutterFlow: egy új Low-code eszköz, ami mobil app kódot generál
Muszáj megoldani a növekvő szakemberhiányt

Viktor
A FlutterFlow low-code igérete
forrás: www.flutterflow.io

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.

A végeredmény elkészült.

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.

A kezdőképernyő a listával.
Képernyőkép szerkesztése nagyon egyszerűen.

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

A termék részletek képernyő
A termék részletek képernyője.

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.

Érdekelnek a lehetőségek

(PWA) 2021-ben hódítanak a Progresszív Web Alkalmazások

Viktor
PWA jól működik a természetben is, offline.
forrás: Unsplash.com / Nature Mobile

A Progresszív Web Alkalmazás, röviden PWA, olyan megoldás, ami a weblap és a mobil app között helyezkedik el. Részben tartalmazza azokat a funkciókat, amiket egy mobil app tud, de kényelmesebb egy weblapnál. Ebben a cikkben ennek részleteit gyűjtöttem össze.

Mi egy PWA pontosan?

A PWA nem más, mint egy weboldal (HTML, CSS) technológiájára épülő mobil alkalmazás. Ennél persze többről van szó!

Az előző gondolat egy leegyszerűsített értelmezés, de kétség kívül ez az alapja. Alex Russell és Frances Berriman fogalmazták meg azt a 9 ismérvet, amit egy PWA -nak tudnia kell.

  1. Reszponzív: bármelyik kijelzőn jól mutat
  2. Kapcsolat független: internet kapcsolat nélkül is használható
  3. App-szerű használat: a mobil app-okban megszokott módon navigálhatunk benne
  4. Naprakész: egy un. Service Worker automatikusan figyeli, hogy mindig a legfrissebb verziót használjuk
  5. Biztonságos: TLS kapcsolatot használ, ami gondoskodik róla, hogy a forgalmat ne lehessen lehallgatni
  6. Könnyen megtalálható: egy megfelelően kitöltött un. Manifest írja le a tartalmat, amit a keresők gyorsan megtalálhatnak és indexelhetnek
  7. Elköteleződés: hozzáfér az operációs rendszer újbóli elköteleződést (re-engagement) segítő beállításaihoz, pl. Push Notification
  8. Telepíthető: Kitűzhető a mobilunk kezdőképernyőjére, hogy kézre essen a következő használatkor
  9. Linkelhető: egy linken érhető el az első használathoz, ezért könnyedén elérhető, megosztható másokkal

Hol lehet hasznos egy PWA?

A 2020-as évben beköltöztünk az online térbe egycsapásra. Naponta nyíltak (először csak kényszerből) a webshop-ok. Akinek addig nem létezett üzlete vagy vállalkozása, azok is felismerték az online vásárlás erejét. Ez felerősítette, hogy tovább bővüljenek az online vásárlások.

Nem minden webshop volt felkészülve a mobilra optimalizált megoldásokkal, ami gyors oldal elhagyást jelent a konkurencia javára. Ebből látszott, hogy a fizikai boltok szinte teljesen megszűntek, akinek nem volt online megoldása, az komoly gondba került (nagyon sokan bezártak végleg).

Egy mobilos felhasználói élményt javíthat a PWA:

  • Push Notification-k és értesítések küldése
  • Gyorsan lehet bejelentkezni a Facebook vagy Google felhasználónkkal
  • Internet nélkül is lehet vásárolni, gyűjtögetni a kosárba
  • Egyedi analitika nyomonkövetése
  • Könnyített mobil fizetési módok

Egy PWA jó belépő lehet akkor, ha nem akarjuk a felhasználót rákényszeríteni egy újabb app telepítésére, viszont a vállalkozásunkat pörgetni akarjuk.

Egy fodrászat, műkörmös időpontfoglalása egyszerűsödik. Mindenki magának intézheti, kényelmesen. A fodrásznak sem kell a hajas kezével, az ügyfelét késlekedve telefonokat bonyolítania. Ehelyett egy naptárat lát, aki szeretne menni, megadhatja a frizura típusát, így ez alapján becsülhető az idő. Elegendő az időpontra érkezni, ami csökkenti a sorbanállást.

A turisztikai app-ok töretlen sikernek örvendenek. A korlátozott utazások miatt egyéb, eddig nem ismert megoldásokat igényelnek a kirándulók.

A webshop-okról már volt szó, előnyük egyértelmű.

Meg kell jelenni az online térben, különben nem létezik az a vállalkozás, amelyik nem így tesz. Az egyszerű, tájékoztató jellegű, céges honlapok ideje lejárt.

A cégek berendezkedve a hibrid munkavégzésre, a munkaerőnek új szolgáltatásokat szeretne biztosítani. A Home Office elterjedésével már jóval túlmutat ez az egyszerű munkaidő regisztrálásán. Egy feladatkezelő könnyedén naprakészen tartja, hogy ki-mikor-mit végez? Céges eseményekről lehet értesíteni a dolgozókat. Visszajelzéseket kérni a felhasználóktól, hogy csak egy pár példát említsek.

A fentiek inkább a mobiltelefonos felhasználását hangsúlyozták, azonban van egy fontos terület még: az asztali számítógépen való használat. Egy ügyviteli rendszer, egy webshop adminisztrációs felület ugyan olyan jól kialakítható vele, mint egy mobil app. Véd a váratlan internet kapcsolat megszakadása ellen, és tovább tudunk dolgozni a programmal.

A PWA hátrányai

Azáltal, hogy nem az alkalmazás áruházakból (Google Play vagy App Store) telepítjük őket a telefonjainkra, elveszítjük annak a mérésnek a lehetőségét, hogy feltárjuk a célközönségünket. Ezek némileg kiküszöbölhetőek más analitikai megoldásokkal. Lényegében nem biztos, hogy az fontos számunkra, hogy mikor telepítették, és kik, hanem hogy valóban hozott-e forgalom növekedést. Minden esetre ez egy olyan tényező, amit SEO szempontjából érdemes figyelembe venni.

Bár egy PWA jobban kihasználja egy mobil képességeit, bizonyos funkciókhoz nem biztos, hogy hozzáférünk. Ilyen lehet a Bluetooth kapcsolat, vagy a GPS adatok. Főleg az Apple az iPhone-okon korlátozza ezek telepítését. Mérlegelni kell, hogy a fenti funkciókra valóban szükségünk van-e, és ha tényleg elengedhetetlen, akkor választani egy natív megoldást, ami ezt megoldja.

Alapvetően a telefonunkon lévő böngésző szab gátat a telefonon elérhető funkcionalitások kihasználásához, de néhány trükkel ezek bizonyos mértékig tágíthatóak. Azonban fontolóra kell venni, hogyha egy speciális képesség kell a telefonunkról, akkor a PWA szűk lesz egy idő után, és a natív irányba kell elmozdulnunk.

Mit kapunk a pénzünkért?

Azok a jó megoldások, amik belátható beruházások mellett a megtérülést szem előtt tartva valósulnak meg. Jó szempont az, ha kicsiben indulunk, és az igények növekedésével tudjuk fejleszteni a terméket.

Ma már van rá lehetőség, hogy a prototípustól (Figma), egy PWA-n keresztül el tudunk jutni egy natív app-ig. Közben nem kell mindig az elejéről kezdeni a fejlesztést. Ha ugyan az a csapat, a későbbiekben onnan tudja folytatni, ahol abbamaradt a fejlesztés, azzal sok idő és pénz takarítható meg.

Megoldások

A Flutter Web-es megoldása kínál olyan PWA megoldást, ami a későbbiekben natív Android vagy iOS applikációkká bővíthető. Ennek tetejében a két platformra egyszerre készül el a program. A Flutter keretrendszerről írtam korábban, ami nagyon jó megoldást kínál egy PWA vagy SPA (Single-Page Application) kiadásához.

Amennyiben nem vagy biztos benne, hogy merre indulj el, keress meg bizalommal, hogy beszéljünk a személyre szabott megoldásodról!

További Flutter-ről szóló cikkjeimet érdemes elolvasni.

A cikk megírásához a www.coredna.com hasonló posztjából szemezgettem.

Low-code: A templatek hódítanak a mobil app fejlesztésben is

Viktor
forrás: docs.getwidget.dev/gf-avatar/

A 2021-es év a low-code templatek jegyében indul. Egyre több eszköz jelenik meg, ami a digitális termékek előállítói életét megkönnyíti. Azt már megszokhattuk, hogy a Flutter csomagok között biztosan találunk olyat, ami megfelelő lesz számunkra. Itt van egy ingyenes, közösségi megoldás, ami egy egész csomagot ajánl.

A GetWidget oldala szerint egy “free” és “open source” megoldásról van szó. Tehát nyugodtan kipróbálhatjuk. Olyan könyvtárgyűjteményt kapunk, ami készen tartalmazza a beépíthető komponenseket.

Nem mindenki kedveli a készen kapott dolgokat. Ráadásul a Flutter pont arról ismeretes, hogy könnyen alakíthatóak ki új widget-ek benne. Minden esetre egy gyors Mock-up-ra, mint annak idején aminek a Bootstrap is indult, kiválóak.

Nézzük néhányat ezek közül, amik említésre méltóak.

Az Avatar ikonok

Minden valamire való app első számú összetevője. Ennek szerepe az egyediség érzetét kelti, és emiatt a ragaszkodás is jobb az alkalmazáshoz. Látjuk, hogy ez a “miénk”.

GW Avatar változatok a low-code templatek között
GW Avatar változatok

Kártyák (tile)

A Flutter alap beépített ListTile nem kellően testreszabható. Ezt érezték meg a szerzők, és több változatot készítettek belőle, ami low-code templatek formájában elérhetőek. Számos paraméterezhető beállítással.

GW Tiles a low-code templatek között
A title komponensek divatos formában

Sticky header

Van egy komponens rendszer a Flutterben, a Slivert. Ez a komponens működése ezt implementálja, csak jóval egyszerűbb beállítani.

Ha nem ismered ezt a fajta UI elemet, akkor érdemes megnézni működés közben.

Stick header a low-code templatek között
Slivert, egyszerűsítve a Sticky headers-ben

Shimmer effekt

A közösségi app-ok kedvelt vizuális megjelnítése. Töltés közben, amíg nem kapunk tartalmat, helykitöltők jelennek meg a képernyőn, és pár másodpercig nem az üres, fehér kijelzőt kell bámulnunk. Helyette egy pulzáló felületet, és jön a tartalom. Ez tipikusan egy olyan a low-code templatek közül, ami sok munkával lenne csak meg, itt viszont készen kapjuk.

Erről van szó.

On-boarding készen

Az első használatkor meg kell kedveltetni az alkalmazásunkat a felhasználóval. Erre van az on-boarding, vagy magyarul a bevezető folyamata. Az ehhez tartozó komponenst itt találjuk.

Ezek a low-code templatek, amik megragadták a figyelmemet. Remélhetőleg a csomag tovább fejlődik. Eddig ígéretes.

Ha még nem tetted meg, csatlakozz a Flutter (Dart) Hungary LinkedIn csoporthoz, ahol érdekes közösséggel beszélgetünk hasonló témákról.

Low-code témában a UICode Figma plugin-jéről korábban írtam.

Útjára indult a Flutter (Dart) Hungary csoport a LI-en

Viktor
A Flutter Dart Hungary LI csoport logója

Útjára indult a Flutter (Dart) Hungary csoport a LinkedIn-en.

Csatlakozz, hogy érdekes cikkeket és beszélgetéseket olvashass a modern mobil-, és webalkalmazás fejlesztésekről!

Gondoltunk a CEO-kra, döntéshozókra, designerekre, fejlesztőkre, hogy mindenki megtalálja a számára ideális tartalmat.

Várok mindenkit szeretettel a csoportban. (A jelentkezés kéréshez kötött.)

Ha csak kapcsolódnál velem, akkor azt itt tudod megtenni.

LinkedIn logo

UICode Low-code: egy Figma plugin, ami Flutter kódot generál
Terjedőben a Low-code megoldások

Viktor
Tetszetős szlogen: mindenki azt végezze, amihez ért!

A UICode egy olyan low-code Figma plugin, ami képes elég jó Flutter kódot generálni. A mai UI tervezők a Figma online eszközt használják, ami kitűnő prototípus építésre, wireframe építésre. Tovább finomítva, egy bemutatható alkalmazást adhatunk a célcsoportunk kezébe. A UICode ezen túlment, és a népszerű Flutter keretrendszerhez készített egy plugin-t, amivel már kódot is tudunk generálni. Az, hogy mire elegendő, megnéztem.

A Flutter 2.0 alig pár hete, március 3-án debütált. Nagyon várta a közösség, hiszen olyan fantasztikus funkciókat kapott, hogy a Web végre stable, azaz éles környezetben is bevethető. Ezen kívül 3 desktop OS-re is megkapta ugyan ezt a státuszt: Linux, Windows, macOS.

Előkészületek

Nem célom most a Figma lehetőségeit taglalni. Ezeket jól ismerjük. Én személy szerint nagyon szeretem, mert gyorsan lehet vele haladni. Kitűnő intuitív funkcionalitásával az ingyenes verzió bőven kielégíti a szükségleteimet. De a havi 12 USD sem drága érte, ha valaki komolyan gondolja.

Elkészítettem az alábbi két egyszerű képernyőt, hogy ezen teszteljem a lehetőségeket. Szándékosan nem vittem túlzásba, hiszen alap dolgokat akartam megnézni a UICode low-code lehetőségeivel.

Figma egyszerű prototípus
Két egyszerű képernyő a Figmában

Mit tud a UICode Low-code plugin-ja?

Telepítsük a UICode low-code plugin-t. Ez innen telepíthető a Figma-ba. Nekem Google Chrome-ban működött jól, Firefox-ban például meg sem szólalt.

Ezután, hogy egy valós alkalmazás érzetét keltsem, beállítottam néhány kattintható gombot, és áttűnést tettem hozzá.

Figma prototípus bedrótozása
Navigáció a képernyők között

Ezután a Figmában a Menü -> Plugins -> UICode pont alatt érhető el, és nyílik meg ez a képernyő. Először rákérdez, hogy a tervünkből melyik képernyőket szeretnénk használni. Ezeket bejelölve néhány automatikus csoportosítást elvégez.

A UI Elements fülön kiválasztva a Frame 1-et megtalálja a szövegeket, és a gombokat. A gombokat az alapján sorolja oda, hogy van-e interakció vele. De ha nem ismerné fel, ez előfordul, akkor az Edit button-nal tudtam hozzáadni másikat.

Az Assets-ben a képeket tudjuk belistáztatni vele. Általában elsőre megtalálja őket.

UICode low-code beállítások
A UICode low-code plugin elvégzi a rendszerezést helyettünk

Ha ezekkel megvagyunk, akkor jöhet a kódgenerálás! A Frames tabon kattintsunk a Download project gombra. Elkészíti az állományokat. Még egyszer a Download gombra kell kattintani, hogy le is töltse. Nem mellesleg becslést ad, hogy hány órát spóroltunk meg ezzel. Mégha nem is pontos, de minden esetre elgondolkoztató. Nem is beszélve a sokkal összetettebb kinézeteknél.

UICode letöltés
Projekt file-ok elkészítése és letöltése

Egy ZIP állományt kapunk, amit csak bepattintunk az Android Studióba, és már indíthatjuk is a build-et. Mivel a Web már elérhető, ezért én inkább a Chrome-ban néztem meg.

A kész munka
A megtervezett kinézetet jól visszaadja

A végeredmény

Átnézve a kódot, felemás az érzetem. Sajnos Stack és Padding elemekkel operál. Ez nem túl szerencsés a különböző képernyőméretekre nézve. Konkrét pixelekben adja meg a szélességeket, távolságokat a képernyő tetejétől.

Jobban megnézve a használt csomagokat, a reszponzív méretezéshez a Flutter ScreenUtil csomagot használja. Ez viszont már egy jobb megoldásnak mondható. A csomag készítői nem mondanak kevesebbet, minthogy elfogadható kinézetet (“resonable layout”) készít a képernyőnkhöz és a betűkhöz. Valóban, amikor átméretezésre kerül a képernyő, vele együtt a kinézet is elfogadható marad. Természetesen akkor, ha az eredeti képernyő arányok közelében maradunk.

A keletkezett kód nem kellően struktúrált. Felismeri a képernyőket, és megfelelően elnevezi. Viszont az egyes komponenseket ömlesztve hozza létre a kódban. (Láttam ennél sokkal rosszabb megoldást az Adobe XD-ben, ahol minden SVG volt. A kód emiatt kellőképpen átláthatatlan.)

A kérdés, hogy ez használható-e kiindulásként? Úgy gondolom, hogy egy próbát megér, bár talán nem ebben a verziójában. Kezdésnek biztató, de a Flutter pont attól nagyon jó, hogy viszonylag komplex felületeket (widget) gyorsan lehet létrehozni benne.

Letölthető példák:

UICode_sample1_webLetöltés

A web-es példát kicsomagolva, egy Python webszerveren könnyedén futtatható böngészőben:

Python 2 — python -m SimpleHTTPServer 8000

Python 3 — python -m http.server 8000

Böngészőben a http://localhost:8000 címen tudjuk megnyitni.

UICode_sample1Letöltés

Konklúzió

A UICode egy low-code megoldást hozott, de még nem tökéletes.

Amennyiben sikerül megoldani, hogy:

  • alap architekturális megoldásokat bevezet az elemek rendszerezésére
  • a gombokat, összetett komponenseket (Component) ki tudja renderelni
  • színkódokat kiszervezi
  • a lehető legújabb verziójú csomagokat (package) és keretrendszert használják

ez egy jó kezdeményezés lesz.

A produktivitást nagyban növeli, ha egy designer elkészített művészi megoldását a lehető leghűbben tovább tudja folytatni egy fejlesztő. Nem kell kidobni vagy újrakezdeni a munkát, hanem ahol az egyikük befejezte, a másik onnan folytatja.

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.

Érdekelnek a lehetőségek

Ha tetszett az írásom, ajánlom figyelmedbe a további érdekességeket is:

2021 csodafegyvere: gamification avagy játékosítás

Viktor
A Candy Land gamification, más néven játékosítás megoldásra egy jó példa.
forrás: Candy Land – Google Play Store

Az elmúlt év eseményei új hozzáállást, új szokásokat honosított meg sokunknál. Új hobbijaink lettek a szobai létre kárhoztatva. Kimutatták kutatások, hogy nagyban nőtt a mobiltelefon nyomkodásával töltött időnk. Természetesen a játékok taroltak, a videóhívás app-ok mellett is. A cikkemben ez előbbit veszem górcső alá, hogy mivel érték el ezt a játékkészítők. Nagy titkot nem árulok el, ha azt mondom: játékosítás, vagy nemzetközi nevén gamification.

Egy korábbi cikkemben feldolgoztam ezt, bár a másik oldalról elkezdve. Abban a cikkemben arról írtam, hogy

“Játékos elemek alkalmazása, alapvetően nem játék környezetben.”

A kutatómunka

Célirányosan keresgéltem a Play Store-on a játékok között, hogy tapasztalatot gyűjtsek az un. idle/casual click típusú játékok körében, hogy hogyan alkalmazzák a játékosítás, avagy gamification elemeit. Belebotlottam a Candy Land nevű játékba. A “candy” kulcsszóra kb. 250 találat jött fel, azonban engem megfogott a kedves megjelenése. Rendben, valahol el kellett kezdenem a sok mézes-mázas játék közül. Telepítettem. Szigorúan szakmai szempontokat figyelemben véve 🙂

Az app 45 Mb-os letöltési mérete kellemes meglepetés volt. Annak tükrében, hogy amikor elindítottam, mit kaptam cserébe.

Grafika és zene

Egy fülbemászó zenével indulunk. Egy nagy gomb van a közepén, el sem tudjuk téveszteni, hogy mi legyen a következő lépés. Itt álljunk meg egy gondolat erejéig. A képernyőn megkapom egyből a 3 kérdésemre a válaszomat:

  1. Hol járok?
  2. Mit lehet csinálni?
  3. Hogyan tudok tovább haladni?

Ez egy szűrő, hogy mennyire megnyerő az egész számomra. Természetesen tovább léptem, hiszen játszani akartam.

Egyből egy elemekkel tűzdelt térkép jött velem szembe. A szokásos részletek jól azonosíthatóak, ha megvizsgáljuk őket:

  • hol vagyok én? Avatár a képernyő alján
  • földrészek vannak, ahogy feljebb tekerek a térképen. Már alig várom, hogy elindulhassak. Vajon mi lehet arra? (várakozás, korlátozás érzése)
  • A képernyő tetején feltűnik a “szívecske”, ami az életerőmet mutatja. A + jel utal valami feltölthetőségre.
  • A sárga “coin”-ok pedig a Candy Land valutámat mutatja. Ebből lehet életerőt, előrehaladást, stb. vásárolni. Rábökve egyből bejön a Coin Shop, ahol vehetünk is ilyet.
A Candy Land játékban fontos a térkép
Központi eleme a térkép

Játékmenet

A Candy Land játékmenete igazán ért a játékosítás / gamification megoldásaihoz.

Nem maradtam egyedül, megkaptam minden segítséget, ha elakadnék. Most már van célom: Gyűjtsem össze a pontokat! Ennél világosabb cél nem is lebeghetne a szemem előtt. Kezdjük is!

Kell egy cél
Extráink a játék közben

A készletek szűkösek, takarékoskodni kell vele. Ezt a Moves (lépések) jelzi. Ha elfogy, vége a körnek. Jobbra fent mutatja az összegyűjtendő pontokat. Ezt kell elérni. Észrevettem magamon, hogy elkezdtem logikázni, hogy hogyan tudnám mielőbb összeszedni. Nem volt elégséges az egyszerű “lehúzom az ujjamat, és kész” stratégia.

A Candy Land játéktere
A jól átlátható játéktér

A fenti képen van pár elem, amiket fokozatosan kaptam meg. Nem egyszerre zúdította rám a lehetőségeket. Először megtanított egy kis lépést, aztán nehezített. Ha már ez is jól ment, bedobott egy új elemet.

Ez is fontos ismérve a játékosításnak. Legyen gyors sikerélmény (quick win), érezzem úgy, hogy kapok jutalmat. Ezek az apró vállonveregetések elmélyítik a bizalmat. Apropó, sikerélmény. Az elején megkaptam a segítséget azáltal, hogy villogtak azok a cukorkák, amikre ha rányomtam, biztosan meglett a 3 egysorban. Ez a későbbiekben eltűnik, de addigra már az ujjaimban van az összes kombináció.

A képernyő alján feltűnnek az extrák, amiket bevethettem (miután feloldottam őket). Ez a szabad választás látszatát keltik. Ezek olyan trükkös elemek, amik nem igazi választások (álválasztások), tehát a játék szempontjából nem ad kiemelkedő előnyt, viszont pszichológiailag úgy érzem, hogy mégis rajtam múlott.

A pályát sikeresen teljesítve egy szusszanásnyi időre értékeljük, hogy mennyire ügyesek voltunk. Mennyi pontot szereztünk (nincsen jelentősége a játék során), megkaptunk a kitűzőinket, mehetünk a következő szintre.

Szép munka a pálya végén
Szép munka!

Megvásárolható cukorkák

Megvehető az előrehaladás
Megvásárolhatjuk a továbbhaladásunkat

Ezeknek a típusú játékoknak fontos eleme, hogy a haladásunkat tudjuk gyorsítani. Vagy sokat játszunk, vagy megvesszük a coin-t. Ezeket beszerezhetjük, ha megnézünk egy videót. Ha sok van belőle, akkor most elkölthetjük.

Próbáljuk újra
Vagy tovább folytatjuk a gyűjtögetést

Egyből melléteszem, hogy ennek Ft-ban is kifejezhető értéke van. A játéknak egy fontos része ezek beszerzése. Ha kellően messzire jutottunk, biztosan nem akarjuk már otthagyni a további pályákat. Ez az elveszett haszon elvén alapuló megoldás. Ezt is kiválóan alkalmazza.

Látható, hogy egy videó mégnézéséért cserébe mennyi coin-t kapunk.

Fontos része a pénzen megvásárolható kiegészítők
A bolt

Nos, a játékot ugyan nem pörgettem ki a hétvége alatt, hiszen nagyon sok pályája van, viszont minden szinten kapok új elemeket. Folyamatosan benntart a folyamatban azáltal, hogy a menetek pörgősek, gyorsak. Van visszacsatolás. A tárgyak vásárlásával, vagy átváltásával azt az érzetet kelti, hogy fejlődöm.

Candy Land – Free puzzle game

Ha játszanál egy jót a KingIT Solutions játékával, akkor a Play Store-on megtalálod.

Én most zúztam nyomkodni!

Lemaradtál? Megérkezett az új verzió: Flutter 2 (2021)

Viktor (A)
A Flutter erősségei: szép, gyors, productív, nyílt.
forrás: YouTube – Flutter Engage event 2021

Itt a tavasz, megújul a természet, nincsen ez másként a Goolge háza táján sem. A hónapokkal ezelőtt beharangozott Flutter Engage show hatalmas bejelentés hozott. Megérkezett a Flutter 2, ahogyan a Flutter UI kit ökoszisztémáját emlegetik. Nézzük a fontosabb bejelentéseket.

A keynote-ot Tim Sneath (Director, Flutter & Dart, Google) prezentálta, ezekből emeltem ki néhány érdekesebb részt. Írásom a technológia és üzletfejlesztés között kalandozik.

Web élesítve

A mai bejelentéssel egyidőben a honlapjukon is elérhetőek az SDK Release verziói, ahol feltűnik a Flutter 2 verziószám. A főverzióban való ugrás mindig nagy előrelépést sejtet. A Flutter 2 esetén sincsen másképp.

4 platformon lépett Beta státuszból Stable csatornára a keretrendszer: Windows, Linux, macOS, Web. Ezzel elérte, hogy 6 platformot támogat egy kódbázissal (95%-ban módosítás nélkül).

Ezek közül számomra a Web, ami a legizgalmasabb, lévén mobil app fejlesztő vagyok. A webhez eddig akkor nyúltam, ha muszáj volt. Ezek után viszont azt jelenti, hogy szép, gyors és hatékony kódot tudok írni. Ugyan a Web Beta változatát már korábban használtam. Éles termékekben meglepően jó tapasztalattal, de az, hogy a stabil pecsétet megkapta, mindenképpen fontos lépés.

Természetesen nem mindenhova való, de ami alkalmazás-központú megoldás, oda jó választás. Úgy, mint PWA (Progressive Web App), SPA (single page app) esetében.

Érdekesség, hogy az Ubuntu Linux-on a Snapcraft marketen könnyedén kiadhatóak és telepíthetőek az alkalmazásaink.

Hirdetések az alkalmazásban

Az alkalmazásokban mindig jelen voltak a hirdetések. Erre kínál megoldása a “Google Mobile Ads SDK for Flutter” plugin. Észrevétlenül épül be a UI témájába. Bárhova elhelyezhető hirdetési bannerek. A riportban a zenei kiadó cég 350%-os impression és 43%-os CTR növekedésről számolt be. Bár extrémnek tűnik, érdemes próbálkozni vele.

(Null)Safety First!

“Első a biztonság!” mondhatnánk. A modern nyelvekben elvárás, hogy a stabil üzleti logikát védjük a hibáktól. Ismeretes, hogy minél később veszünk észre egy bugot, annál magasabbra rúgnak a javítás költségei.

Bob Nystrom mutatta be a Dart nyelvben bevezetett nullsafety, azaz null-vizsgálatot. Ezzel a nyelvi szerkezettel már a kód írásakor a fordító ellenőrzi, hogy nem lesz-e végzetes hiba futás során. Tehát nem futás idejű, hanem már fordítási időben tudni fogjuk, hogy helyes-e a kódunk.

Ez persze egy kis része a kódhelyességnek, azonban nem véletlenül erre helyezi sok nyelv a hangsúlyt. Ez egy olyan tipikus hiba, amit nehéz megtalálni, azonban jó tervezéssel un. ellenőrző pontokat tehetünk ezáltal a kódunkba. Ezzel is jobban kifejezve a szándékunkat, hogy a munkatársunk is értesüljön róla. Hiszen térben, és időben kell szinkronban hozni a termék életciklusát, nagy létszámú csapattal.

Emellett a beszédéből kiderült, hogy a sok null-ellenőrzés 2-3x annyi munkát ad a CPU-nak, aminek költségvonzata van. Ezzel a nyelvi megoldással ezen faraghatunk el.

Dupla képernyős mód

Elnézve a Flutter stratégiáját, minden létező képernyőt meg akar hódítani. A Microsofttal együtt működve a Surface Duo Android operációs rendszeren fut. Erre elkészült a Flutter 2 kiadásban a támogatás, hogy az összehajtható képernyőkhöz változatos módon lehessen a tartalmat kiszolgálni. Erre többféle UI patternt dolgoztak ki, amik a szükséges módon szolgálják ki a napi feladatainkat.

A Microsoft Surface Duo Android támogatással érkezik
forrás: www.microsoft.com Surface Duo

Aki ki szeretné próbálni, jó hír, hogy elérhető a Surface Duo emulátor formájában.

Hatékonyság a fejlesztő kezében

Fejlesztés közben nagyban felgyorsítja a munkát, hogy a másodperc törtrésze alatt tudjuk a kinézet módosítását ellenőrizni a kijelzőn (Stateful hot reload). Ez nem újdonság egy webfejlesztőnek, viszont elérhető Flutterben is. Ez akár 10-15%-kal is meggyorsíthatja a napi 8 órás munkavégzést. Nem beszélve a várakozás miatti frusztráció csökkenéséről.

Kenzie Schmoll négy területet mutatott be, ami a fejlesztőkörnyezet frissítését hozta magával. Megjegyzem, a Flutter csapat az elejétől fogva nagy hangsúlyt fektetett a megfelelő eszközök elérhetőségére.

  • flutter fix: automatikus kód karbantartó
  • null-safety migration: automatikus nullsafety ellernőzés és javítás a biztonságért
  • Flutter Inspector: a UI-on keletkezett hibák feltárására és javítására
  • app méret ellenőrzés, hogy optimális legyen a felhasználói élmény

Az esemény videói visszanézhetőek a YouTube csatornáján.

Az elmúlt 2 évben, amióta a látókörömbe került a Flutter, számos újdonsággal szolgált hónapról hónapra. Ez a jövő mobil és web platformja, talán nem túlzó ezt kijelenteni.

Korábbi írásaimért nézz szét a blog bejegyzéseimben.

Az új élmény: Adaptive eXperience (AX) (2021)
Új év, új kihívások 2021-re

Viktor
Az Adaptive Experience összekapcsolódása a fizikai és virtuális térben
forrás: CX Insight / Unspalsh.com

Az elmúlt 2020-as év számos új alkalmazást adott nekünk, amiket meg kellett tanulnunk. Voltak olyanok, amik a semmiből tűntek fel. Mások letűntek, és vesztesként kikoptak a napi használatból. A számos új felület megtanított alkalmazkodni, naponta újat tanulni. Belemerülni a digitális világba. Olyanoknak is, akik eddig viszolyogtak az okos eszközöktől. Vajon az Adaptive experience segíthet ezen?

Hangzatos neveket hozott az elmúlt 10-15 év, amikor sorra jelentek meg az okos képernyők. Olyan felületeket kellett készíteniük a designereknek, amik intuitívak. Ezen a téren sokat köszönhetünk az Apple-nek, ahol mindig is fontos volt a jó kezelhetőség. Mára etalonnak számítanak az iránymutatásaik. Nyugodt szívvel támaszkodhatunk a vizuális megjelenítési rendszereikre. A színek, formák, mozgások kognitív hatásaival sokat kísérleteztek, hogy tökéletes élményt nyújtsanak.

Megismertünk foglamakat UX (User Experience), CX (Customer Experience), ami mind azt szolgálta, hogy a felhasználó minél jobban része legyen egy termékenek, és a termék szolgálja ki az igényeit. Minél egyszerűbb módon. Ez jóval korábbra nyúlik vissza, a II. világháború időszakára.

Vannevar Bush az 1930-es években a “memex” ötletével állt elő, ami tuljadnoképpen egy személyes könyvtár (tároló) víziója volt. 1945-ös publikációja utána azonban hamar felismerte, hogy az emberi elme nehezen fog megbírkózni a rendelkezésre álló elképesztő méretű adatmennyiséggel. Élete során azon dolgozott, hogy az ember-gép minél természetesebb harmóniáját, és együttműködését megalkossa. Egy ilyen következmény volt az egér.

Mi az Adaptive experience?

A termékek, felületek tervezői sok ezer munkaórát töltenek el vele, hogy felhasználóbaráttá, szerethetővé tegyék azt a majdani felhasználóknak. A szoftverek előnyben vannak a fizikai társaikhoz képest, hiszen aránylag könnyen módosíthatóak. Fizikai terméknél jó példa a személyre szabhatóságnak, amikor pl. az autó színét mi válaszhatjuk ki. A kárpitozást. Milyen extrák legyenek az autónkban. Úgy érezhetjük, hogy van beleszólásunk. Valamelyest egyedivé tehetjük. Ezért még fizetünk is többletet. Tehát igény van a testreszabhatóságra.

A szoftverek terén ez valamelyes könnyebb. A Google keresőnk megtanulja a témáinkat, és azokat helyezi előbbre a találati listában. Olyan cikkeket kapunk, ami az érdeklődési körünknek megfelel. A chat alkalmazásunk háttérszínét beállíthatjuk.
Ezek alig észrevehető apróságok, de mégis megszemélyesítik az igényeinket.

Az kevésbé látható trend, hogy egy alkalmazás felületét szabhatnám a magam igényeire. Annyi felülettel kell már kapcsolatba lépnünk. Csak beszélgetésre van 5-6 db, amit használok magam is. Naptárak. Képszerkesztők, stb.


Eljön-e az idő, hogy az engem érdeklő funkciókat tegyem fel egy felületre, a többit pedig rejtsem el?
Az alkalmazások között váltva ugyan ott találjam meg a kedvenc funkciómat, amit minden alkalmazásban ugyan onnan érek el?
Át tudom-e mozgatni az ikonokat? Az ismerőseim listáját magam rendezhetem, hogy mit lássak?


Ezek ugyan ellent mondanak a tervezők terveinek, hogy egyedi felületet készítsenek. Mégis, felismerhető legyen a funkció, egyértelmű legyen.

A funkció szempontú megközelítés

Tovább boncolgatva az Adaptive experience kérdését, az ilyen újításnak a célját kell megvizsgálni. Mit ad ez hozzá az élményhez? Egyszerűsít? Könnyít bármit is? A Virtual Reality vagy Augmented Reality kifejezetten egy ilyen terület.

Van-e igény olyan eszközre, ahova be van kötve az összes pl. chat alkalmazás. Én nem feltétlenül azt akarom megmondani, hogy melyikkel érem el az ismerősömet, csak hogy küldjek neki üzenetet. Lehet-e valamilyen szempont alapján a legrelevánsabb csatornán elküldeni?

Vagy pl. a képeim szerkesztése. Minden app egy kicsit egyedi, mindegyik másban erős. Tudom-e úgy használni ezeket a funkciókat, hogy összesíti egy felületen a beállításokat az összes telepített app közül? Hogy melyik tud vicces szemüveget rátenni, vagy a hátterét megváltoztatni, nem lényeges. Valamelyik végezze el nekem.

Az, hogy egy ilyen gondolkozás elindul-e, nem tudom. A 2021-es év viszont további kihívásokat fog tartogatni számunkra, hogy a virtuális világban elmerülve hogyan fogunk tudni könnyedén eligazodni. Nem a húszonéves korosztályról van csak szó. Gondolni kell a korosztályok skálájának másik végére is. Ne elidegenedés, hanem egyre jobb bevonásuk legyen a kitűzött cél. Létezik erre W3C ajánlás, amit érdemes lesz 2021 során egyre szorosabban követni és beépíteni, hiszen új felhasználókat nyerhetünk meg általa.