2020-as toplistás cikkjeim

Összegyűjtöttem azokat az írásaimat, amik a legjobban érdekelte a mobil fejlesztés iránt érdeklődőket.

Flutter alkalmazásokat már Windows 10-re is kiadhatunk
A Google új Fotókeresővel mutatja be Flutter alkalmazását a Windows 10 számára

Viktor
A Microsoft Windows készen áll a Flutterre

A Google által 2019-ben gőzerővel elstartolt Flutter keretrendszer szépen lassan beváltja az ígéreteit. A saját Roadmap-jükön folyamatosan napra készen tartják a rajongótáborukat. Úgy néz ki, az év végére összejött még egy platform: a Windows 10.

Ahogy arról a windowslatest.com cikke hírt adott, 2020 novemberében a Microsoft bejelentette, hogy elkészült az első, Flutter keretrendszerben megírt Windows alkalmazásuk.

Akárcsak a Microsoft, a Google is aktívan dolgozik a keresztplatformos UI megoldásain. A Flutter egy nyílt forráskódú (open-source) UI keretrendszer mobilra, webre és desktopra. A Google Flutterben íródott app-jai már elérhetőek webre és mobilra, és a Windows 10 támogatás megvalósításán dolgozik nagy erőkkel.

Voltak próbálkozások

Pár hónappal ezelőtt a Google bejelentette, hogy az UWP támogatás sínen van, és ezt bizonyítandó (proof-of-concept (PoC) ) egy alkalmazást mutatott be, labor körülmények között.

A Google keretrendszere lehetővé teszi, hogy a fejlesztők egy kódbázissal hozzanak létre alkalmazásokat Androidra, iOS-re, és most már Windows 10-re. A Flutter csapata a Google-nél hisz a kereszt-platformban (cross-platform) és ez a víziójuk hasonít a Microsoft Universal Windows Platformhoz (UWP) (Általános Windows Platform).

Az első fecske

Az UWP támogatás azt jelenti a fejlesztők számára, hogy elősegítheti, hogy a mobil alkalmazásaikat Windows 10-re áthozzák. 2020. november 25-én a Google kiadott egy UWP Flutter alkalmazást a Windows Store-ban, ami az Unsplash API-t használja, és új fotó keresési élményt ad. Az Unsplash API egy modern JSON-alapú adatformát használ a tartalmak megjelenítésére, és a végeredmény meglepően zökkenőmentes.

Google Flutter desktop Windows Store alkalmazásként
Fotó: https://www.windowslatest.com

Az alkalmazás a “Flutter Desktop Photo Search” (Flutter Asztali Fotó Kereső) nevet kapta, és ez egy újabb bizonyíték (PoC) egyelőre (nem ajánlott a használata). A Google egyelőre az asztali PC-ket célozta meg vele, de az alkalmazás jól vizsgázott más mobil eszközökön is, úgymint a Surface Go értőképernyős, és nélküli változata.

Érdemes megjegyezni, hogy a demo app a netről halássza a képeket, mégis natív élményt biztosít adaptálódó felhasználói felülettel, ami egészen elképesztő.

Mit hoz a jövő?

A Google Flutter-t használva a fejlesztők hamarosan háttérkép és fotónézegető alkalmazásokat hozhatnak létre, amelyek minden platformon működnek, bele értve a Windows 10-et.

Egyelőre nem világos, hogy a Google mikor tervezi a saját, széles tömegeknek szánt alkalmazásainak megjelentetését a Windows Store-ban, de számíthatunk rá, hogy jövőre harmadik féltől származó alkalmazások fognak megjelenni, amik Flutterben íródtak.

A fejlesztők máris elkezdhetnek alkalmásokat írni Flutterben, amik akár mobilra, akár desktopra elérhetőek lesznek. A Google állítása szerint már most is 100 000 alkalmazás íródott Flutterben, amik elérhetőek a Google Play Store-ban.

Felértékelődik a fejlesztői tudás

Mellé téve a másik két asztali platformot, a Linux-ot és a MacOS-t, egy korábban csupán mobil fejlesztésekben gondolkozó fejlesztő lehetőségei megtöbbszöröződnek. Ehhez természetesen az is szükségeltetik, hogy ez ne csak egy fellángolás legyen a Google oldaláról, és kaszálja el a platformot. A körülötte kialakult hype miatt ez nem várható, legalábbis nem egyhamar.

A Flutter szekere most felfelé halad, megállíthatatlanul.

Borítókép: Johny vino / Unsplash

Merre tart a kereszt platformok fejlődése a mobil eszközökön?
Melyiket válasszuk 2020-ban?

Viktor

Az utóbbi években egyre elterjedtebbek az un. kereszt platformok használata a mobil app-ok fejlesztésére. Ami mindenre jó, az igazán semmire sem, tartja a közszó. Vannak azonban olyan helyzetek, amikor verhetetlenek ezek az eszközök.

A kereszt platform (cross-platform) vagy multi-platform azt jelenti, hogy egyszerre készül el az alkalmazás Androidra, iOS-re (Windows Phone-ra ???). Ebből érezhető, hogy azért előnyös a fejlesztőnek, mert elegendő egyszer elkészíteni az alkalmazást, és a feladat nagy részével megvan. A megrendelőnek szorosan kapcsolódik az érdeke ehhez, hiszen pontosan fele annyi fejlesztői munkát kell kifizetnie, mintha mindegyik platformra natívan, külön-külön készíttetné el.

kereszt platform mobil eszközökön megoszlása 2020 évben
A statista.com kimutatása alapján a React Native és a Flutter keretrendszerek 2020-ban a legnépszerűbbek

A thedroidsonroids.com cikke alapján készítettem ezt az összefoglalót.

A népszerű mobil kereszt platformok

A fenti ábrán látszik, hogy a React Native (42%) mögött kevéssel marad le a Flutter (39%). Az évek közti növekedésbeli helyzést egyértelműen ez utóbbi hozta.

A saját vállalkozással rendelkezők mindig tudni szeretnék néhány kritikus kérdéseikre a választ:

  • Melyik illik legjobban a projektemhez?
  • Melyik megoldás hozza a legjobb Time-to-market időt?
  • Az app-om stabilan megbízható lesz és felhasználóbarát?
  • Melyik lesz a legjobb, ha pixel-perfect kinézetet akarok?

A cikkből kiderül, hogy a követőtábor alapján fej-fej mellett halad a két framework. A React Native-t a Facebook 2015-ben jelentette meg, ami egy érettebb keretrendszert feltételez. Ezt azonban a Google, 2018-ban kiadott, Flutter béta megjelenése beérte mára.

Tudásban nehezen megkülönböztethető, apró eltérések vannak. Mindkettő natívan fut a telefonon, ez meglátszik a kiváló teljesítményen. Alkalmanként akár túl is teljesítve azt. Ennek ugyan ára van az alkalmazás méretében. Ez talán mára elhanyagolható, de érdemes megemlíteni.

Az, hogy ki melyiket használja, szinte ízlés kérdése. Meghatározhatja, hogy a fejlesztő korábban web oldalkat programozott, akkor a React Native JSX nyelve fog jobban kézre állni. A Flutter Dart nyelve viszont modern, szerethető és könnyen elsajátítható.

A gombok, listák, stb. az adott OS-re megszokott kinézetet hozza. Androidon a Material Design-t, iOS-en pedig a Cupertino Design-t. Az érzet és kinézet tehát teljesen ugyan az.

Hol tart most a Flutter

Korábban írtam a Flutter keretrendszerről, és előnyeiről. Az azóta eltelt néhány hónap további újdonságokat hozott. Lekövetve az Android 11 nyári, és az iOS 14 őszi érkezését. Azonnal reagálva a változásokra, gyakorlatilag napokon belül kikerültek az utánkövetések, amiket az OS megkövetelt.

App-ok, amik Flutter-ben készültek:

App-ok, amik React Native-ben készültek:

  • Instagram
  • Facebook
  • Skype
  • Pinterest
  • Tesla
  • Fb Ads Manager

Minden app tulajdonos rémálma

Az jól látszik, hogy az elmúlt másfél évtized kitermelt magából sok megoldást, hogy minél egyszerűbben, zökkenőmentesebben, vagy éppen a tudásunk újra felhasználásával lehessen mobil app-okat készíteni. Egy kereszt platformnak számos előnye van a mobil fejlesztésben.

Mindezek ellenére a fórumokon örökzöld téma, hogy mi lesz, ha majd bezárják, vagy fizetőssé teszik ezeket a keretrendszereket. Mi lesz, ha egyszer csak az Apple nem engedi be a nem natívan megírt alkalmazásokat? (Az Apple amúgy is eléggé szőrszálhasogató tud lenni az elfogadási irányelveivel.)

Nos, látva a Google, szinte minden hétre jutó bejelentéseit, ez nem várható, legalábbis rövid távon. Azáltal, hogy mind a két mobil operációs rendszert beveszi, továbbá, Linux, Mac és Windows asztali fejlesztések felé nyitja meg a kapukat a fejlesztők előtt. (A Microsofttal a hetekben közösen jelentették be az együttműködést.)

Egy nagy előnnyel mindenképpen érdemes tisztában lennünk: az a keretrendszer fejlesztőinek a feladata, hogy összecsiszolják az adott operációs rendszerrel. Ezzel nem a fejlesztőnek kell foglalkoznia, hosszú órákat eltölteni egy hiba keresésével. Ez növeli a produktivitást.

Merre tovább?

Az látszik, hogy a Flutter még az elején van a pályafutásának. Ez a görbe a felszálló ágon van. Nem is lehet megjósolni, hogy mikor éri el a csúcspontját. Az eltökéltség a Google részéről látszik. Mivel van még mit csiszolni az alfa/béta támogatásokon, ez eltart egy darabig.

De ki tudja. Az informatikában egy biztos, hogy folyamatosan fejlődik. Pár év alatt elavulnak a dolgok, és újat kell tanulni. Egyszer jön majd egy jobb, szebb keretrendszer, ami ugyanúgy rabul ejti a fejlesztők szívét.

Egy népszerű kereszt platformok ismeretére a mobil fejlesztésénél szüksége van minden fejlesztőnek. Bármelyik is legyen az.

money from wallet

Legjobb érvek egy mobil-alkalmazás megrendelése mellett
Ezeket ellenőrizd, mielőtt megrendeled

Viktor
mobil-alkalmazás vagy weblap legyen

Az elmúlt több, mint 10 évben, amikor megjelentek az okos telefonok, egy új formátumot hoztak magukkal: az app-okat. Miben nyújt többet egy mobil-alkalmazás egy responsive weblap helyett? Ha komoly elhatározásunk van egy mobil-alkalmazás megrendelése mellett, akkor az elképzelésünknek már csak a pénztárcánk szabhat határt. Ár-érték arányban hogyan teljesítenek a jól bejáratott weblapokhoz képest? Ezt a témát járom körül.

Mit mutatnak az alkalmazás-áruházak statisztikái

Kezdjük a száraz számokkal, mert azok ritkán tévednek. A statista.com mutatóit megnézve, látható, hogy a mobil-alkalmazások letöltései töretlenek. Évről évre a bővülő készülékszám mellett az app letöltések is bővülnek.

mobil-alkalmazások letöltésének száma világszerte
A mobil-alkalmazások letöltésének száma világszerte 2016 és 2019 között

Az Apple App Store 2020 júniusi kimutatása szerint a letöltések 50%-át a következő kategóriák teszik ki: Játékok (22%), Üzleti (10%), Oktatás (9%), Életmód (9%). Ebből körvonalazódik, hogy melyek a nyerő irányok. A lista végéről nézve érdekes kép rajzolódik ki: Hírek, Orvoslás, Fotó és Videó, Sport, Social Networking, Vásárlás, Zene, stb. Kb. 2-3%-ot jelent minden egyes kategória. Az alacsony részesedés magyarázható azzal, hogy a hírekre ott van a web; fotó és videó, zenelejátszó alapból jár a telefonra, előre telepítve.

Az digitális termékekre költött fogyasztói kiadásokat mutatja az alábbi grafikon. Ha az EMEA régiót nézzük (Europe, Middle-East, Africa), akkor az előre vetített bővülés több, mint 150%-os 2018-ról 2022-re.

mobil-alkalmazásokra vonatkozó fogyasztói költések világszerte
A mobil-alkalmazásokra vonatkozó fogyasztói kiadások világszerte 2017-ben, 2018-ban és 2022-ben, régiónként, milliárd USD-ben.

2018-ban a globális mobilalkalmazások bevétele több mint 365 milliárd USD volt. 2023-ban a mobil alkalmazások várhatóan több, mint 935 milliárd dollár bevételt generálnak fizetett letöltések és alkalmazáson belüli hirdetések révén.

mobil-alkalmazások bevétele világszerte
A mobil-alkalmazások bevétele 2014 és 2023 között világszerte, milliárd USD-ben.

A Freemium (Free + Premium) üzleti modell jól bevált a gyártóknak. Töltsd le ingyenesen, és ha már elkötelezett vagy, akkor apró költésekkel fizetek ki az egészet.

A fentiek alapján látható, hogy megfelelő bevételszerzési stratégiával lehet jelentősebb bevételeket generálni.

Ezeket számold bele egy mobil-app projektbe

Eldöntötted, hogy mégis belevágsz. Egy mobil-alkalmazás megrendelése a végszó!

A következő feladatokat kell számolni:

  • Projekt tervezése
  • Felhasználói élmény tervezése (UX design)
  • Felületek tervezése (UI design)
  • Megvalósítás, ami általában a legnagyobb részét teszik ki a munkának
  • Marketing feladatok: előtte, induláskor, utána
  • Az alkalmazások frissítése (legalább fél évente), hibajavítások

A fejlesztési idő, és ezáltal a költségek egy része egy jó kereszt-platformmal (cross-platform) csökkenthetőek. Nem mindegy, hogy kétszer kell egy alkalmazást megírni, vagy egyszer, és Androidra vagy iOS-re csak igazítani apróságokat.

Én a Flutter kereszt-platformot használom. Ennek előnyeiről itt írtam korábban. Létezik számos másik, ezeket előtte érdemes egyeztetni a megrendelővel, hogy milyen funkciókat vár. Vannak-e korlátai, amik nem, vagy csak körülményesen teljesíthetőek?

A költségek csak az egyik szempont

Előfordul, hogy egy cégnek egy mobil app egy névjegyet jelent. Ki lehet tenni, megmutatni, hogy ilyen is elérhető a portfóliójában. Ez egyfajta presztízs dolog.

Ne feledkezzünk meg a megkívánt funkciókról. Szeretnénk-e ismétlődő értesítéseket küldeni a felhasználóinknak, ami a marketingre fordított költségeinket javíthatja. Kell-e bele GPS funkció? Netán egy magával ragadó játékot álmodtunk meg? Fontos, hogy offline is bármikor elő tudja kapni a felhasználó?

Segítségképpen összegyűjtöttem egy listát, hogy ötleteket adjon, hogy miket kell mérlegelni a döntés előtt. A listában számos szempont szerepel, amiket érdemes átgondolni. A funkciólista alapján kirajzolódik, hogy mire lesz szükségünk: app vagy weblap?

Ellenörző-lista : Mikor van szükségem mobil app-ra?

Az email címed megadásával elfogadod az Adatkezelés tájékoztatót, és feliratkozol a hírleveleimre.

Az első hírlevélben a beállításait módosíthatod.
Kérem Az Ingyenes Ellenörző-listámat

Ide kérem a letöltési linket:

Remélhetőleg a cikk segített egy sikeres döntés előkészítésében, és spórolni a költségeken.

Ha maradt még kérdésed, akkor egyeztessünk egy ingyenes megbeszélést, ahol tovább pontosíthatod a céljaidat.

Borítókép: Allef Vinicius | Unsplash

A mobil app fejlesztés új formája
Minden mobilfejlesztő álma

Viktor

A Google gurított egy nagyot a multiplatformos mobil app-ok fejlesztése teréln. Ennek 2019 adta meg a végső lökést a Flutter UI toolkit erős promóciójával. A Flutter egy olyan multiplatoformos keretrendszer, ami megsokszorozza a produktivitást a fejlesztői csapatban. Nem pusztán arról van szó, hogy Android-ra, iOS-re, Desktop-ra és Web-re (és a sor folytatódik) egy kódbázissal tudunk fejleszteni.

Maga a fejlesztési folyamat nagymértékben felgyorsul azáltal, hogy élő nézetet kapunk a felületről, amint elmentjük a kód módosításunkat. Ennek ugyan az az ára, hogy a kódot a Google által fejlesztett Dart nyelven kell írni. Persze aki ismer már egy objektumorientált nyelvet (Java, JavaScript, TypeScript, C++, Kotlin, stb.) ez nem akadály. Akinek pedig ez az első nyelve, az egy modern nyelvet fog megtanulni. A kódolás szintaxisának megtanulása pár órában, legfeljebb napokban mérhető.

Minden “Widget”

Így van! Bármihez is kezdük a felületen, biztosan szükségünk lesz egy widget-re. De mi is ez valójában? A widget-ek olyan kis építőkockák, amikből független, előre megírt, de nagyban személyes igényeinkre szabható felületek hozhatóak létre. Jó-jó, de mit tud? Gondoljunk egy egyszerű gombra. Ez egy widget, a maga absztrakciójával. Ha van egy gombunk, pár paraméter beállításával módosítható a színe, a betű színe, a betű stílusa, a sarkok kerekítése. Egyszóval bármi. Értsd, tényleg bármi!

Material csomag

A legjobb az egészben, hogy a Google ehhez felépített egy teljes grafikai UI/UX open-source leírást. Ezt mérnökök sok-sok év tapasztalatával gyűjtötte össze, hogy mi mutat jól egy mobil kijelzőjén, és mitől lesz egyértelmű az interakció. Iránymutatást ad a design alapelveire, stílusokra, bevált módszerekre. Az egyes komponensek (widget) és ikonok használatára, tervezéséhez nyújt segítséget. Nem megfeledkezve az Accessibility-ről, vagyis gondolt azokra is, akiknek az alapvető kezeléssel nehézségei adódnak. Pl. látássérült, hallássérült vagy kognitív hiányosságai vannak.

Érdemes ellátogatni az oldalukra https://material.io. A későbbiekben vissza fogunk nyúlni ehhez a remek csomaghoz.

Példák

Ne múljon el ez az írás anélkül, hogy egy pár felületet megnéznénk.

Emlékszünk még az Androidon az Activity-kre és a Fragment-ekre? Nos, itt ezzel nem kell bajlódnunk. A navigációt pár sorral lerendezzük. A tranzíciók szépen meg vannak csinálva alapból, de tudunk finomítani rajtuk.

basic screen navigation with buttons
Alap képernyőképek navigációval

Button

Egy gomb definiálása a legegyszerűbb egy RaisedButton widget-tel. Ez be van még csomagolva egy Transform.rotate widget-be, ami az elforgatást intézi.

Transform.rotate(
                angle: 0.2,
                child: RaisedButton(
                  color: Colors.amber,
                  elevation: 5,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(
                      "Switch to Page Two",
                      style: TextStyle(fontSize: 20, color: Colors.green),
                    ),
                  ),
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => PageTwo()),
                    );
                  },
                ),
              )

ListView

Lista nézet egyszerűen. Nem kell a RecycleViewHolder rémálommal bajlódni, mint korábban. Felsoroljuk a ListView-ban a widget elemeket, és készen is vagyunk.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      body: Container(
        padding: EdgeInsets.all(10),
        color: bgColor,
        child: ListView(
          children: [
            ListItem(order: 1),
            ListItem(order: 2, onPress: _navigateToPageTwo(context)),
            ListItem(order: 3, onPress: _navigateToPageTwo(context)),
            ListItem(order: 4),
            ListItem(order: 5),
            ListItem(order: 6),
            ListItem(order: 7),
            ListItem(order: 8),
            ListItem(order: 9),
            ListItem(order: 10),
          ],
        ),
      ),
    );

AppBar

Az oldal teteji navigációra ugyancsak megvan a kész megoldás. Az AppBar-nak elnevezett widget ezután tetszőlegesen paraméterezhető. A szokásos materialos felületeket tudja. Ha nem lenne elegendő, akkor természetesen testre szabhatjuk.

SlivertAppBar

Komplex mozgási effekt az AppBar-t kiegészítve. Ezzel nagyon látványos navigációt tudunk készíteni. Lásd a Page Two-n lévő app bar-t a tetején.

A kódok elérhetőek a GitHub-ról.

Kíváncsi vagyok a véleményedre. Írd meg kommentben, ha tetszett, vagy valami javításra szorul.