Uncategorized

Mikrocontroller (MCU) összekapcsolása mobil appal

Viktor
IoT eszközöt Wifi és Bluetooth kapcsolattal mikrocontroller mobil app fejlesztéshez
IoT képes eszközök

A mai, modern mikrocontrollerek (MCU) nemcsak olcsók, de számos feladatra használhatók. Az automatizálás elképzelhetetlen nélkülük. Ilyen az Espressif, Raspberry Pi Pico, és NodeMCU microcontrollerek. Ezek különösen érdekesek lehetnek a mobil app fejlesztés szempontjából. Ezek a mikrokontrollerek kiválóan alkalmasak különböző szenzorok, aktuátorok, és más eszközök csatlakoztatására. Ezek lehetővé teszik, hogy új funkciókat adj a mobil alkalmazásaidhoz.

Mikrocontroller mobil appal több területen bevethető

Ezek tulajdonképpen az egyre terjedő IoT (Internet of Things = Az Eszközök Hálózata) megoldások. Pici, költséghatékony eszközök figyelik meg a környezetüket. Az így nyert adatokat számos alkalmazásban felhasználhatjuk.

Okosotthon integráció

Az Espressif vagy NodeMCU modulokat használhatod okosotthoni eszközök, mint például lámpák, hőmérők vagy biztonsági kamerák vezérlésére. Egy mobilalkalmazás segítségével távolról is irányíthatod ezeket az eszközöket.

Környezeti adatgyűjtés

A Raspberry Pi Pico és más mikrokontrollerek különböző szenzorokkal, mint hőmérséklet-, páratartalom-, vagy légszennyezettség-mérőkkel kombinálva hasznos adatokat gyűjthetnek, amelyeket a mobilalkalmazásod megjeleníthet.

Egészségügyi alkalmazások

Például egy pulzusmérő szenzor csatlakoztatásával a mikrokontroller egészségügyi adatokat gyűjthet, amelyeket a mobilalkalmazásod feldolgozhat és elemezhet.

Játék- és interaktivitás

A mikrokontrollerekkel különleges játékvezérlőket vagy interaktív eszközöket hozhatsz létre, amelyek Bluetooth-on vagy Wi-Fi-n keresztül kommunikálnak a mobilalkalmazásoddal.

2023 szeptemberében Prágában tartották a Flutter Firebase Festival (F3) eseményt, ahol testközelből is kipróbálhatóak voltak hasonló mikrocontroller mobil appok. Roman Jaquez vitte a standot, argentín temperamentumával.

DIY projektek és oktatás

Ezek a mikrokontrollerek kiválóan alkalmasak oktatási célokra és DIY projektekhez. Ezeket mobilalkalmazásokkal kombinálva még érdekesebbé és interaktívabbá tehetjük.

Prototípus építés mikrocontroller + mobil app kombóval

Időnként szükség van olyan egyedi megoldásra, ami kilép a mobil telefonról és kapcsolatba tud kerülni a környezetével. Ezek a készülékek lehetővé teszik a gyors és költséghatékony prototípus készítést, ami létfontosságú lehet egy fejlesztői projekt sikeréhez.

Nézzünk néhány előnyt, amit ezek a mikrokontrollerek kínálnak:

Gyors fejlesztés

Ezek a mikrokontrollerek könnyen programozhatóak, és számos könyvtárral és fejlesztői eszközzel rendelkeznek, amelyek gyorsítják a fejlesztési folyamatot. Népszerű, és mára már a legelterjedtebb ilyen környezet az Arduino IDE-je.

Rugalmas alkalmazás

A legkülönbözőbb projektekhez használhatod őket, kezdve az egyszerű szenzoros adatgyűjtéstől a komplex IoT (Internet of Things) alkalmazásokig.

Tesztelés és iteráció

Lehetővé teszik, hogy gyorsan teszteld az ötleteidet és iterálj a prototípusokon, ami növeli a végső termék minőségét és megbízhatóságát.

Költséghatékony

A mikrokontrollerek a fejlesztő eszközökkel általában kedvező árúak. Ezek 2-3-10 000 Ft-ból megúszhatóak. Ez teszi lehetővé, hogy kísérletezz anélkül, hogy nagy költségekbe vernéd magad.

Közösségi támogatás

Nagy és aktív open-source közösségek jöttek létre. Az Arduino IDE számos MCU-t támogat már. A közösség segít a problémák megoldásában, ha elakadnánk. Ez mind hasznos a fejlesztés során. Nekünk tényleg csak az értékre kell fókuszálnunk.

A YouTube-on készültek videók magyarul, amik nagyon érthetően mutatják be az alapokat.

Primusz Péter – Hobbielektronika

Online Arduino tanfolyam a Vaultban

Milyen jellemzői vannak egy mikrocontroller mobil appnak?

Előnye ezeknek a Wifi, Bluetooth kommunikációval ellátott eszközöknek, hogy olcsók, és a kijelzőt maga a mobil telefon adja. Így távolról, biztonságosan mérhető bármi és oda-vissza kommunikációval akár be is avatkozhatunk. Segíti a távoli konfigurálást.

Költséghatékonyság: Mivel a mobiltelefon látja el a felhasználói felület szerepét, nincs szükség külön kijelzőre vagy bonyolult kezelőpanelekre, ami jelentősen csökkenti a fejlesztési költségeket.

Távoli elérhetőség: A mobilalkalmazások segítségével a felhasználók bárhol és bármikor hozzáférhetnek az adatokhoz, irányíthatják a rendszert, vagy módosíthatják a beállításokat, ami növeli a rendszer rugalmasságát és elérhetőségét.

Interaktivitás és beavatkozás: A kétirányú kommunikáció lehetővé teszi, hogy nemcsak adatokat gyűjtsünk, hanem be is avatkozzunk a rendszer működésébe, például változtatásokat hajtsunk végre a raktározási környezetben vagy automatizált folyamatokban.

Biztonság: A modern mobilalkalmazások által nyújtott biztonsági protokollok segítségével biztosítható, hogy a kommunikáció biztonságos és védett legyen az illetéktelen hozzáférés ellen.

Egyszerű konfigurálás és karbantartás: A mobilalkalmazások segítségével könnyebbé válik a rendszerek konfigurálása és karbantartása, hiszen a felhasználói felület intuitív és könnyen hozzáférhető.

Láthattuk, hogy számos területen bevethető egy mikrocontroller, ami sokféle módon intergrálható egy mobil appal.

Ha érdekel ez a felhasználási terület, vedd fel velem a kapcsolatot. Nézzük meg, hogy mi az a projekt, amiben gondolkozol.

Theta szerkesztő: app fejlesztés programozás nélkül

Viktor
A Theta szerkesztő appja
forrás: buildwiththeta.com

A Theta szerkesztő egy újfajta koncepciót hoz a mobil appok létrehozására. Valljuk be, sokan ódzkodnak attól, hogy egy mobil fejlesztés speciálisabb terület, mint egy website kiadása. Ott vannak az App áruházak egyre szigorodó megszorításai. Emellé, ha csak a folyamatot nézzük, komplexebb. Ezt a cégvezetői fájdalmat vette észre a Theta startup cég. Ők más szempontból közelítették meg az egyre népszerűbb Flutter fejlesztési folyamatot.

Szerencsém volt személyesen is egy videó callban beszélgetni a termékről az egyik alapítóval, Andrea Buttarellivel, aki megosztott néhány belsős titkot.

Mitől más a Theta szerkesztő?

A Theta szerkesztő lehetővé teszi a tervezők és a termékmenedzserek számára, hogy programozás nélkül fejlesszék az éles Flutter alkalmazásokat.

Hogyan működik?

Két alapvető működése van. A dinamikus mód (Remote UI), amikor elegendő egy rövid kódot beillesztenünk az alkalmazásunkba, és készen is vagyunk. Ettől kezdve a Theta szerkesztőben módosítjuk a kinézetet, és az appban már látjuk is a végeredményt.

Az előre letöltött Static code lehetőséget ad, hogy a generált kódot másoljuk és illesszük be a kódba. Ennek nagy előnye, hogy nem kötjük oda magunkat a Thetához (no lock-in). Ezt hangsúlyozzák is!

Mindent megtalálunk egy helyen, az alkalmazásban.

Az app elején egy pár soroz inicializálási részben megadhatjuk a saját kódunkat. Ezt szintén a szerkesztőből érjük el könnyedén.

Az API Key könnyen elérhető

Ezután a Flutter mobil applikáció megfelelő helyein egy 1-soros (!) hivatkozást kell elhelyeznünk, újraindítanunk az appot, és máris megjelenik a komponensünk. Fantasztikus! Valóban 5 perc a beállítás.

Ezután számos paraméterrel tudjuk finomhangolni a megjelenést és a funkcionalitást. Pl. koppintásra (on Tap) mi történjen.

Amiben pluszt ad az egész koncepció, az a Clean Code erőltetése. A Flutter keretrendszer nem kényszeríti ki a logika és a megjelenés szétválasztását. Itt viszont nincsen más lehetőségünk. Ami egy kezdő fejlesztőt jó szokásra (Best Practice) nevel.

Ami nagyon tetszett a Theta szerkesztőben

Alapvetően a Figmában már jól megszokott funkciókat kapjuk. Andrea megvallotta, hogy ez szándékos. “Miért kellene feltalálni a melegvizet?”

Először meglepődtem, hogy egy MacOS app formájában íródott. Miután használtam, egyből ráéreztem a natív alkalmazás előnyére: a gyorsaság. Nem akad, nem szaggat.

A felület az Apple által jól ismert, letisztult UI. Látszik, hogy a csapat tisztában van az egyszerűség alapelveivel. Bár még csak néhány funkció érhető el, ezek jól csoportosítottak és kézre állnak.

Az elengedhetetlen Dark és Light módváltó 🙂 Ez hasznos, ha éjszaka is dolgozunk.

A szerkesztő külön szedi a stílust és a komponenseket. A tulajdonos ki is hangsúlyozza a blogjukban, hogy nagyon fontos volt számára, hogy bárki számára hozzáférhető legyen (Accessibility). Sok időt fordított ennek a résznek a kidolgozására. A Style Guide menüben ez megtekinthető.

A Tree List-ben állítjuk össze a kompoenseket. Az Element a legfőbb widget-eket tartalmazza. Egyszerű Drag-and-Drop módon működik.

A komponens felhelyezése után pedig a pozíciót, méretet, stílust, igazításokat, blur, stb. lehet beállítani.

A nyelvezetet a fejlesztő és a designer is megértik. Ez fontos, hiszen nagy hangsúlyt fektettek rá, hogy a két típusú szakember együtt tudjon működni.

Tippek-trükkök a Theta szerkesztő appban

Lehetőség van Absolute és Auto Layout mode között váltani.

A Dev mode-ban a Layout mode közti váltás

Absolute layout módban teljes képernyőket tudunk szerkeszteni, csakúgy, mint az alap ‘Social Card’ elő van készítve nekünk.

Auto Layout mód kifejezetten a gomboknál hasznos, ahol a méretezés reszponzívvá válik. Kitöltve a szélességet vagy magasságot.

A Reszponzív UI-okat egyszerre, vagy külön-külön is megjeleníthetjük. Egyszerre kapunk átnézetet, hogy milyen lesz a végleges kinézet.

Reszponzív UI nézetek

Megéri az Theta az árát?

No, az ingyenessel (Free plan) 5 komponenst tudunk létrehozni. Ez elegendő lehet egy nagyon egyszerű app prototípusra. Tulajdonképpen ez jelenthet 5 képernyőt is akár! Alapvetően nincsen szükség minden komponenst a Theta szerkesztőben létrehozni. Egy Flutter fejlesztő elkészíti a már véglegesnek szánt képernyőket, a Designer pedig a kérdéses részeket finomhangolja.

A legolcsóbb fizetős változata havi 12,5 USD-be kerül. Érzésem szerint ez megfizethető. A funkciók bőven elegendők egy indie fejlesztőnek és egy Designer/Projekt Manager párosnak. A Fejlesztő integrál, a Designer rajzol.

Finomhangolás! A Team előfizetéshez (50 USD) jár az A/B tesztelés funkció. Az A/B tesztelést más módszerekkel is el tudunk végezni, de így, integrálva, statisztikázva mégiscsak jó deal.

Kipróbálásra mindenképpen ajánlott! Várom a további fejlesztéseket a csapattól.

Érdekes volt? Olvasnál még hasonlókat tőlem?

További cikkeim a Low-code / No-code témában:

Ha szeretnél saját céges mobil appot, ami segíti a céged vagy munkatársaid életét, keress meg bizalommal. Egy ingyenes, 30 perces konzultációban átbeszéljük, hogy pontosan mire van szükséged (Lehet, hogy nem is appra?!).

Skálázhatóság a Flutter projektekben
Tervezz hosszú távra!

Viktor
Flutter projekt skálázhatóság és nehézségei
Gyakori kódbázis képe

A sikeres digitális termékek építése nem csak a mostani eredményekről szól, hanem a jövőre is gondol. Egy skálázható és jól karbantartható megoldás nem csak jelentős költségmegtakarítást eredményez a cég számára hosszú távon, de a fejlesztők motivációját és megelégedettségét is növeli. Érdekes módon, ha egy fejlesztő átvesz egy projektet, és azt jól strukturáltan találja, kevésbé kísérti a kód újraírásának gondolata. Ebben a bejegyzésben bemutatom, milyen technikai szempontokra érdemes odafigyelni.

Mitől lesz egy projekt skálázható?

A mai posztban ezekre a kérdésekre keressük a választ: skálázhatóság és hogyan kezeljük okosan a függőségeket? Miért fontos mindez nem csak a fejlesztők, hanem a cégvezetők számára is? Kitérünk a pubspec.yaml fájl finomságaira, a monorepo előnyeire és buktatóira, valamint megvizsgáljuk, hogyan segíthetnek a saját package-ek.

Skálázhatóság alatt a rendszer képességét értjük arra, hogy megnövekedett terhelés mellett is megfelelően működjön. Nem csak a felhasználói szám növekedése okozhat terhelést, hanem például egy vállalat üzleti növekedése is.

Egy skálázható mobilapp rugalmas, és lehetővé teszi a kód könnyű karbantartását és fejlesztését.

Miért fontos ez?

Mert a skálázható rendszerek költséghatékonyak és időt takarítanak meg a jövőben. Nem csak a fejlesztők, hanem az egész vállalat számára.

Egy skálázható rendszer nem csak költségeket és időt takarít meg, hanem a fejlesztői csapat motivációját is növeli.

Amikor egy csapat egy jól szervezett, skálázható kódbázison dolgozik, a code-review-k gyakorisága és a refaktorálások szükségessége is csökken. Emiatt a fejlesztők több időt tölthetnek a valódi problémamegoldással és az innovációval, ami általában magasabb munkamorált és jobb termelékenységet eredményez.

Függőségkezelés: a pubspec.yaml alapjai

A pubspec.yaml egy Flutter projekt lelke. Nem csak egy sima konfigurációs fájl, hanem az alkalmazásod ‘központi irányítója’. Itt határozhatsz meg függőségeket, vagyis kódcsomagokat és könyvtárakat, amelyek az alkalmazás működéséhez szükségesek.

Ezáltal megkönnyíti az egész csapat munkáját és egy helyen van összegyűjtve minden, ami az app működéséhez kell.

Emellett lehetőséget biztosít az Open Source közösség megoldásainak újra felhasználására. Ezzel időt és erőforrást takarítunk meg. A függőségkezelés így kulcsfontosságú a skálázhatóság és a fejlesztési idő optimalizálása szempontjából.

A monorepo előnyei és kihívásai

A monorepo, vagyis egyetlen kódtárba szervezett projektstruktúra előnyöket és kihívásokat is rejt. A monorepo önmagában nem egy különleges Git repozitori, hanem a benne lévő tartalom szervezési módja teszi azzá.

Előnyei közé tartozik az egységes verziókezelés, a közös függőségek könnyebb kezelése és a csapatmunka megkönnyítése. Egy ilyen rendszerben könnyebben nyomon követhetők a változások és egyszerűbben menedzselhetők a projekten belüli függőségek.

Ugyanakkor a monoreponak kihívásai is vannak: megfelelő infrastruktúra és eszközök nélkül könnyen kezelhetetlenné válhat. Különösen fontos itt a függőségkezelés, hiszen egy rosszul kezelt monorepo gyorsan kaotikussá válhat.

A monorepo kaotikussá válhat, ha nincs jól szervezett függőségkezelés és verziókövetés. Ha több projekt vagy modul egymástól függ, és nincs megfelelően kezelve ezek kapcsolata, akkor a kódbázis könnyen instabillá válhat.

Egy nagy csapat esetében az egyes tagok változtatásai könnyen “összeütközhetnek”, ami hibákat és felesleges munkát generál. Ezért a kódminőség ellenőrzése, például code-review és tesztelés, kritikus jelentőségű egy monorepo esetében.

Saját Package-ek: a karbantarthatóság és skálázhatóság eszközei

A saját package-ek létrehozása segít modularizálni az alkalmazást. Ez lehetővé teszi a kód újrafelhasználását és a fejlesztői csapatok közötti együttműködést. A saját package-ek azért is jók, mert lehetővé teszik az alkalmazás egyes részeinek izolált fejlesztését és tesztelését. Ennek következtében a kód karbantarthatóbb és könnyen skálázható lesz.

Még jobb, ha ezek a package-ek Open Source közösséggel is megoszthatóak, ami további elismerést és visszajelzést generál. Nem beszélve az “ingyen” javításokról.

Leggyakoribb a domain-alapú szervezés. Ez lehetővé teszi a csapatok számára, hogy külön felelősségi körökre koncentráljanak. Ez nemcsak a fejlesztési időt csökkenti, hanem a kód minőségét is javítja, mivel minden csapat mélyebb szakértelmet fejleszthet ki a saját domainjében.

Ez az elképzelés tökéletesen illeszkedik a mikroszolgáltatásokhoz hasonló architektúrákhoz és a nagyobb, összetett rendszerekhez.

A modularizálásnál általában a következő szempontok alapján szokták az alkalmazást package-ekbe szervezni:

  1. Biztonságért felelős modul: Autentikáció, titkosítás, és jogosultság-kezelés.
  2. Hálózati Kommunikáció: API hívások, WebSocket kommunikáció.
  3. Domain Logika: Üzleti logika, adatmodellek, és adatmanipulációs metódusok.
  4. UI/UX Komponensek: Újrafelhasználható widgetek, stílusok, reszponzív design.
  5. Adattárolás: Lokális adatbázis kezelés, cache.
  6. Közös Funkcionalitás: Navigáció, állapotkezelés.
  7. Fizetési megoldások: Tranzakciók, online vásárlások, és kapcsolódó biztonsági intézkedések.

A fő cél itt a szorosan összefüggő funkciók csoportosítása és azok elkülönítése. Ezek különböző fejlesztési fázisokban vagy csapatok által lehetnek kezelve. Ezzel könnyebbé válik a karbantartás és a skálázás.

Összefoglalás

A skálázhatóság nem csupán technikai, de üzleti előnyöket is hoz.

Egy jól skálázható rendszer csökkenti a fejlesztési és karbantartási költségeket, növeli a fejlesztői csapat motivációját, és biztosítja a jövőbeni rugalmasságot. A monorepo struktúra és a modularizált kódbázis segíthetnek ebben.

A központi csomagkezelő (pubspec.yaml file) pedig lehetővé teszi, hogy könnyen integráljuk a már létező, kipróbált megoldásokat, időt és erőforrást spórolva.

Összességében, a skálázhatóság nem csupán a fejlesztők, hanem a cégvezetők számára is kulcsfontosságú.

A Flutter eszköztára rendkívül sokoldalú és hatékony, így skálázható és karbantartható alkalmazások fejlesztéséhez kiváló választás.

További írásaim is érdekelhetnek:

Applify – demózd az oldaladat ingyenesen

Viktor
Applify logó

Az Applify – App My Site egy olyan egyedire szabható app, ami egy általad megadott website-ot tölt be a natív appba. Beállítva a saját weboldalad címét, megnézheted, hogy hogyan nézne ki egy natív appban. Ezen kívül számos egyedire szabható lehetőség van az Applify -ban.

Applify ismertető

Látogass el a projekt oldalára, ahol bővebben is olvashatsz a funkciókról!

Tesztelheted a személyre szabott kinézetet a linkek megnyitásával vagy QR kód szkennelésével.

Előtte mindenképpen telepítsd, hogy teljes legyen az élmény!

Applify funkciók

Nem szükséges regisztrálni. Add meg a kedvenc webhelyet címét, és nézd meg, hogy hogyan viselkedik a különféle színbeállításokkal.

Az Adatkezelési tájékoztatóban olvashatsz az adatkezelésről.

Egyedi webcím

Bármilyen URL-t (hivatkozás) megadhatsz a Beállításokban. Ekkor a főképernyőn mindig ezzel az oldallal indul az alkalmazás.

52 színséma

A legújabb, Google által tervezett Material 3-as felületi elemeket használja. A Beállításokban igazítsd a kedvenc oldaladhoz a színeket!

Sötét és világos mód

Gondoltunk azokra is, akik számára már alapvető beállítás a sötét vagy világos mód. Ennek a módnak a megadásával további színsémákat kapsz, ami automatikusan igazodik a legújabb trendekhez.

Egyedi paraméterek beállítása

A Haladó beállítások lehetővé teszik, hogy egyedi paramétert küldj az oldalad felé menő kérésekben:

  • tetszőleges query paraméter az URL-ben
  • X-Header név és értékpár megadása
  • szabványos UserAgent beállítása

Ezekkel a beállításokkal el tudod érni azt, hogy a mobilon és egy böngészőből más-más tartalmak jelenjenek meg.

Előkészületben

A fentiek az alap funkciók, amik tovább bővülnek az igényeknek megfelelően.

Push értesítések

Próbáld ki, hogy hogyan működne az értesítés, ha mindenki megkapja. Arra is lehetőséged van, hogy egy adott eszközre küldöd el.

Szerezz marketing előnyt a mobil app értesítésekkel a versenytársaid előtt. Egy push megnyitási aránya még mindig 50% fölött van!

Megosztás másokkal

Ez a funkció akkor jön jól, ha emlékezni szeretnél a beállításokra. Csak mentsd el képként, vagy oszd meg másokkal! Ezáltal könnyedén láthatóvá tudod tenni más számára is.

iOS támogatás

Az Apple store-ban való megjelenés előkészítés alatt áll.

Hotpot.ai

Letöltés

Könyvajánló: 11+1 Lépés Ötletgazdáknak
Az elképzeléstől a mobil appig

Viktor

A mostani posztomban egy könyvet ajánlok a figyelmedbe. Ezt “11+1 Lépés Ötletgazdáknak az elképzeléstől a mobil appig” címen írom. Olyanoknak szól, akik már régóta szeretnének egy mobil appot az ötletüknek, de nem tudják, hogy hogyan fogjanak bele? Milyen nehézségekkel találják szembe magukat? A könyv előkészületi állapotban van, azonban már most fel tudsz iratkozni rá. További infók lejjebb.

11+1 Lépés Ötletgazdáknak az elképzeléstől a mobil appig c. könyv

A tartalomból

Ha szeretnél értesülni a megjelenésről, mindenképpen iratkozz fel a https://borbelyviktor.hu oldalamon. Ekkor 20% kedvezménnyel is megajándékozlak a könyv árából.

Két nagy részre osztottam a mondanivalóját a könyvnek. Az első rész, amikor fel kell mérni, hogy mi van az ötletben. Kinek szól, mik az értékei? A második rész maga a megvalósítás, amikor már megvannak az alapok, és a gázpedálra kell lépni.

I. Felmérési szakasz

  1. Az alkalmazás-koncepció megtalálása
    1. Gondolkodjunk, keressünk ötletet
    2. Készítsünk rajzokat, terveket
  1. Felhasználói igények és piackutatás
    1. Derítsük ki, kinek készítjük
    2. Mások készítettek már hasonlót
    3. Perszónák készítése
  1. Bevételszerzés a mobilalkalmazással
    1. Fizetős letöltés
    2. In-app vásárlások
    3. Előfizetés
    4. Hirdetések
    5. Partneri programok
    6. Adatértékesítés
  1. Felhasználói élmény (UX) és felhasználói interfész (UI) tervezés
    1. A UX feladata
    2. A UI célja
    3. Játékosítás (Gamification)
  1. Interjúk és felhasználói történetek
    1. Barátok, család, ismerősök
    2. Fórumok, csoportok
    3. Szervezd ki a kérdezősködést
  1. Mobil alkalmazás, weboldal, PWA
    1. A natív mobil app
    2. Weboldal és PWA hasonlóságok
    3. A hátrány előnnyé fordítása

II. Megvalósítási szakasz

  1. Low-Code és No-Code megoldások
    1. Figma prototípus készítése
    2. FlutterFlow, egy teljes megoldás
    3. Convertify, weboldalból mobil app készítése
    4. Canva, a mindentudó
  1. Fejlesztő csapat összeállítása
    1. Az Innovátor szerepe
    2. Projekt menedzsment kicsiben
    3. Frontend, mobil fejlesztő
    4. Backend, felhőszolgáltatás fejlesztő
    5. Védd meg, ami a tiéd
  1. Mobilalkalmazások kapcsolata a külvilággal
    1. Adataink tárolása szerveren
    2. Szolgáltatókhoz kapcsolódás
    3. Automatizáljuk, amit tudunk!
  1. Az alkalmazás piaci bevezetése
    1. Mobil áruházak beállítása
    2. Felkészülés a frissítésekre
  1. A fejlesztés költségeinek becslése
    1. Kezdj kicsiben, az MVP
    2. Gondolkodj a jövőbeli növekedésre
    3. Tárhely szolgáltatók, licenszek
    4. Hirdetési költségek
  1. Jövőbeli trendek a mobilalkalmazás fejlesztésben
    1. A Mesterséges Intelligencia kihasználása
    2. Növekvő piac
    3. Virtuális terek
    4. A személyes biztonság felértékelődik

A fejezetek tartalmából

1. Az alkalmazás-koncepció megtalálása: Ez a fejezet arra ösztönzi az ötletgazdát, hogy először mélyüljön el, és részleteiben gondolkodja át alkalmazása alapvető ötletét és célját. A kezdeti fázisban az alkalmazás egyedi értékajánlatát, célközönségét és a versenytársakhoz való viszonyát kell feltárnia és minél jobban meghatároznia.

2. Felhasználói igények és piackutatás: Ebben a fejezetben az ötletgazda megtanulja, hogyan végezzen alapos piackutatást és derítse ki a felhasználói igényeket. Fontos, hogy megértsük, mit akarnak a potenciális felhasználók, és ismerjük, hogy milyen megoldások léteznek már a piacon.

3. Bevételszerzés a mobilalkalmazással: Egy jó program akkor tud életben maradni, ha bevételt termel. Az alkalmazásnak nem csak hasznosnak, hanem jövedelmezőnek is kell lennie. Ez a fejezet bemutatja a különböző bevételszerzési modelleket, és segít kiválasztani a legmegfelelőbbet az adott alkalmazáshoz.

4. Felhasználói élmény (UX) és felhasználói interfész (UI) tervezés: Az alkalmazásnak egyszerűnek és vonzónak kell lennie a felhasználók számára. Ebben a fejezetben példákat láthatunk arra, hogyan tervezzünk intuitív és felhasználóbarát felületeket, amelyek elősegítik a felhasználói elégedettséget és a hosszú távú elköteleződést.

5. Interjúk és felhasználói történetek: Ezen keresztül közelebb kerülhetünk a felhasználókhoz, megismerhetjük igényeiket, problémáikat, és jobban megérthetjük, hogyan használják (vagy használnák) az alkalmazást. Ezek a beszélgetések felbecsülhetetlen értékkel bírnak a terméktervezés során.

6. Mobil alkalmazás, weboldal, PWA – Egy innovátor számára fontos döntés, hogy milyen platformon jelenjen meg: mobilalkalmazás, weboldal vagy progresszív webalkalmazás (PWA), csak hogy a leggyakoribbakat említsük. A fejezet részletezi az egyes megoldások előnyeit és hátrányait. A költségektől kezdve, a frissíthetőségen át, egészen a fejlesztők megtalálásáig számos olyan aspektusa van a szoftveres termékfejlesztésnek, amit figyelembe kell venni. Ennek a résznek a végére már körvonalazódni fog, hogy mire van szüksége.

7. Low-Code és No-Code megoldások: Ma már különböző ingyenes, online és olcsó eszköztár áll rendelkezésre a tervezési folyamat megkönnyítésére. Akár anélkül, hogy mély programozási ismeretekkel rendelkeznénk.

8. Fejlesztő csapat összeállítása: Egy sikeres alkalmazás mögött mindig ott van egy ügyes csapat. Ha nincsen meg az alapos tudásod ezen a területen, meg kell találnod őket. Ez a fejezet segítséget nyújt abban, hogy hogyan válasszuk ki a megfelelő partnereket és fejlesztőket a projekthez. Beszéljünk közös nyelvet, hogy gyorsabban tudjunk haladni.

9. Mobilalkalmazások kapcsolata a külvilággal: Az alkalmazások gyakran kapcsolatban állnak más szolgáltatásokkal és rendszerekkel, például külső szerverekkel adatbázisokkal, API-kkal. Ez a fejezet segít megérteni ezeket a kapcsolatokat és integrációjukat.

10. Az alkalmazás piaci bevezetése: Miután elkészült az alkalmazás, a következő lépés annak bemutatása a világnak. Ez a fejezet bemutatja a mobilalkalmazások sikeres piaci bevezetésének alapvető stratégiáit és taktikáit.

11. A fejlesztés költségeinek becslése: Ez a fejezet arra fókuszál, hogyan határozzuk meg és kezeljük a mobilalkalmazás fejlesztésének költségeit. A fejlesztési költségek becslése nem könnyű feladat, mivel sok tényező befolyásolhatja őket, például az alkalmazás összetettsége, a kiválasztott technológiai stack, a csapat mérete és szakértelme, a tervezett időkeret, és még sok más. A fejezet bemutatja a költségbecslés alapvető módszereit, és tippeket ad arra, hogyan lehet a valóságnak megfelelő költségvetést tervezni.


+1 Jövőbeli trendek a mobilalkalmazás fejlesztésben: Az alkalmazásfejlesztés területe gyorsan fejlődik, és fontos, hogy képben legyél a legújabb trendekkel és technológiákkal. Nem is beszélve a 2023-as évben berobbant Mesterséges Intelligencia (AI) térhódításával. Mindezek mellett meghatározóak a chatbot és Kiterjesztett valóság (AR = Augmented Reality) appok. A mobil appok piaca dinamikusan növekszik, még sokáig meghatározó marad.

Lapozz bele!

Ha szeretnél értesülni a megjelenésről, mindenképpen iratkozz fel a https://borbelyviktor.hu oldalamon. Ekkor 20% kedvezménnyel is megajándékozlak a könyv árából.

Elérhető az Issuu.com-on:

A ChatGPT a termék fejlesztésben
Hogyan írjunk jó prompt-ot?

Viktor
Az AI találkozik az emberrel : MidJourney
Az AI találkozik az emberrel : MidJourney

2022 novembere óta tudjuk, hogy a ChatGPT bármiben képes a segítségünkre lenni. Ez a termék fejlesztésben sincsen másképpen. Persze itt nem arról fogok írni, hogy fogadjunk el mindent tőle, amit kiad magából. Főként arról van szó, hogy milyen türelmes és segítőkész asszisztenst kaptunk általa.

A programozók régóta álmodoztak róla, hogy a saját szavaikkal megfogalmazva, kész megoldásokat kapjanak. Erre több, mint 60 évet kellett várni, de mára elérhető. Tovább menve, szinte még beláthatatlan az a hatás, amit egyéb szakmákra gyakorol. Olyan emberek lesznek képesek rendszereket megtervezni és előállítani, akik eddig a tudás híján voltak.

A cikk írásának pillanatában a ChatGPT 4.0 modell volt elérhető számomra, így a tanulmányokban is még ezek szerepelnek. Ha újabb modell lesz elérhető, akkor a cikket frissítem ennek megfelelően.

Mit tud a ChatGPT a termék fejlesztésben

Az OpenAi.com ChatGPT 4.0-ás verzióját használtam a prompt-jaim során.

A prompt (parancs, utasítás) az a szabadszavas megfogalmazás az MI interfészén keresztül, amivel feladatot kérünk tőle. A jövőben fel fog értékelődni azoknak a szakembereknek a munkája (prompt engineer), akik minél pontosabban, a kívánt végeredmény elérése érdekében tudják megfogalmazni utasításaikat.

Raktári áruk nyomkövetése

Első próbálkozásom egy mobil app UI terv készíttetése, ami Bluetooth eszközt használ a raktári áruk nyomkövetésére. Ehhez 3 képernyő tervre van szükségem, valamint egy app logóra. Ezek elkészítéséhez a ChatGPT-t, MidJourney és Bing AI-kat használtam.

Mese írásban jó a ChatGPT

Mese app UI terve

Ezután következett egy mobilalkalmazás felhasználói felületének tervezése, amely meséket tartalmaz kisgyerekeknek. Az olvasó kiválaszthat egy mesét, olvashat a szinopszisról, megtekintheti a borítóképet, elolvashatja a teljes szöveget vagy meghallgathatja hangoskönyv formában.


Kiemeltem, hogy az alkalmazás nyugodt és világos színű témával rendelkezzen. Ez ellazítja a szemet, és megnyugtató a gyermekek számára.
Ehhez is a ChatGPT-t, MidJourney és Bing AI-kat használtam, több iterációban. Az egyes pontosító prompt-okat “iterációval” jelöltem.

E-learning termék fejlesztése ChatGPT-vel

Ha Generatív Mesterséges Intelligenciával kísérletezek, akkor nem maradhat ki az oktatás sem. Egy felnőtteknek szóló E-learning termék fejlesztésének a lépésein vezettem végig az AI-t.

Ennek 2 része volt: egy mobil app és egy szerver admin felülettel. Feltártam, hogy milyen fő részei kell legyen a megoldásnak? Érintve mind a mobil, mind a szerver oldalra kértem javaslatot.

Konklúzióm

Még a kezdetleges felhasználói tudásommal mellett is elégedettség tölt el, ha a feladatok végrehajtását kell összegeznem.

A generatív AI nem újdonság, pár éve már velünk vannak, azonban mostanra ért el mindenkihez. Bár a végeredmény nem tökéletes, ezt mindössze annak tudom be, hogy a “prompt-olást” még tanulom, gyakorolnom kell. Szoftverfejlesztőként ehhez hozzá vagyok szokva, hogy napra készen kell tartanom a tudásomat.

A fenti linkeken elérhetőek a tanulmányaim, amit bárki használhat. Célom a tudásmegosztás, hogy minél jobb dolgokat hozzunk ki ebből az eszközből.

Biztos vagyok benne, hogy az termék fejlesztés során, az architekti feladataim közé minél jobban behúzom a Mesterséges Intelligenciát.

Keress meg bizalommal, ha kérdésed vagy kérésed van a témával kapcsolatban. Szívesen beszélgetek veled a saját ötleted vagy terméked megvalósításáról. Amennyiben végponton (API) szeretnéd használni a ChatGPT-t, olvasd el a A ChatGPT és a Flutter cikkemet is.

A ChatGPT és a Flutter

Viktor
ChatGPT logo

Ebben a cikkemben az elmúlt hónapok felkapott AI technológiájával fogok foglalkozni, az OpenAI ChatGPT-jével. Ezen belül is, hogy hogyan köthető össze egy mobil alkalmazással. Mire használhatjuk?

Mi a ChatGPT?

A ChatGPT az OpenAI által 2022 novemberében elindított chatbot. Az OpenAI GPT-3.5 nagy nyelvi modell (LLM) családjára épül, és mind a felügyelt (federated), mind a megerősített (reinforced) tanulási technikákkal finomhangolták.

Az elmúlt héten kijött a ChatGPT-4-es változata, ami csillagászati magasságokba lökte a tudását.

A ChatGPT és a Flutter

Eszembe juttot, hogy összeházasítsam a ChatGPT intelligenciát a Flutter keretrendszer rugalmasságával, és létrehozzak olyan appokat, amelyek a felhasználóknak hasznosak lehetnek.

Elég a felturbózott Duolingo Max-ra gondolni, ami elképesztő, új megoldásokat hoz.

Ha nem is ilyen mélységben, de magam is elkezdtem kísérletezni egy egyszerű megoldással. Kíváncsi voltam, hogy mi kell hozzá? Egy Flutter mobil appot terveztem, amiben a chat szövegét elküldés előtt átnézettethetjük, hogy az mennyire sértő / durva. Ez sokszor segít olyan helyzetekben, amikor a két félnek érzelmileg túlfűtött a kommunikációja.

ChatGPT beállítása

Ez a legegyszerűbb része a dolognak. Nincsen más teendőnk, mint a https://chat.openai.com/auth/login oldalon egy Google vagy Microsoft accounttal beregisztrálni.

Ezután navigáljunk el a https://platform.openai.com/account/api-keys oldalra, és hozzunk létre egy API key-t a Create new secret key gombra kattintva. Az itt látott kódot jegyezzük le valahova, mert csak egyszer látjuk. A későbbiekben ezt fogjuk használni. Ha mégsem írtuk volna fel, bármikor hozhatunk létre egy újat.

Kell egy jó termék ami a ChatGPT -t használja

Az volt az elképzelésem, hogy egy olyan, saját API-t (végpont) hozok létre, ami a ChatGPT Instruction modell közül a text-davinci-003-t használja. A különböző model típusokról itt olvashatsz. Én az un. Completion közül választottam, mert ennek lehet utasításokat adni.

Az volt a cél, hogy kap egy rövid, maximum 300 karakteres szöveget (prompt), és …

“Határozza meg, hogy mennyire agresszív a másik fél számára! Ezt osztályozza 0.0 és 1.0 között, ahol 0.0 a nem agresszív, és 1.0 a nagyon agresszív.”

A fenti model leírásoknál mutat példa kódokat, amiket fel tudunk használni pl. Python scriptben (vagy Curl hívással). Én is így indultam neki. Nagyjából 5 perc alatt kipróbáltam, hogy azokkal a beállításokkal már elég jól meg tudja határozni a kapott szöveg agresszivitás mértékét.

Az MVP megvolt, már csak össze kellett rakni!

A Flutter és a Firebase szeretik egymást

Mivel korábban már használtam a Google Firebase szolgáltatását, ezért gyorsan létrehoztam benne egy végpontot.

Ehhez a Firebase Cloud Functions használtam. Létrehoztam a Firebase-ben egy új projektet, engedélyeztem a Cloud Function-t, és már írhattam is a végpontomat TypeScriptben (TS).

...
export const toneAnalysis = functions.runWith({
    secrets: [openAiApiKey, organization],
    timeoutSeconds: 30,
}).https.onRequest(async (request, response) => {
...
const configuration = new Configuration({
    organization: organization.value(),
    apiKey: openAiApiKey.value(),
});
const openai = new OpenAIApi(configuration);
...
const openAPIResponse = await openai.createCompletion({
    model: 'text-davinci-003',
    prompt: myPrompt,
    max_tokens: 5,
    temperature: 0.5,
    n: 1,
    top_p: 1.0,
    stop: "None",
    frequency_penalty: 0.5,
    presence_penalty: 0.0
});
...
...
const output = openAPIResponse.data['choices'][0]['text'];
...

Itt volt szükség a fenti kódban vastagon szedett saját openAiApiKey, organization kulcsokra, amit a ChatGPT felületéről másoltunk ki.

A ChatGPT teszt

Az egyszerűség kedvéért most egy parancssori verzióban tesztelek, egy cUrl hívással. A data részben van a lényeg:

Kérés

curl --location 'https://us-central1-my-apis-567693.cloudfunctions.net/toneAnalysis' \
--header 'Authorization: Bearer o62fvWkiAYkDkGUCzJJe' \

--header 'Content-Type: application/json' \

--data '{
    "query": "Szeretlek Drágám! Nagyon boldoggá tettél a múlt héten találkozásunk alkalmával. Nagyon várom az újabb találkozást! :)" 
}'

Végpont válasza

{
	"version": "1.0",
	"input": "Szeretlek Drágám! Nagyon boldoggá tettél a múlt héten találkozásunk alkalmával. Nagyon várom az újabb találkozást! :)",
	"aggressive": 0
}

A válaszban pedig az aggressive értéke most 0. Próbálgasd, hogy mire mit ad!

A Flutter package

Ezután pörögtek a dolgok tovább, adódott a következő lépés, hogy hasznos lehet egy mobil appban. Például egy olyan komponenst hozok létre, ami egy beviteli mezőhöz van kapcsolva. Letölthető a Pub.dev-en a tone_detector néven.

Amikor a Küldés gombra nyomok, előtte behív az előző végpontra, és kapok egy értékelést. Ez lehet szöveges, vagy egy bar meter kinézetű. Innentől már csak a fantázia szab határt. De tehet javaslatot a mondandó enyhébb változatára is.

Tone detector widget
A Tone Detector meter skálája

Külön jó volt, hogy a nyelvi nehézségeket észrevétlenül leküzdöttem. Írhattam akár magyarul, angolul, ugyan olyan jól értékelt ki!

Összefoglalva

Néhány napot játszva a ChatGPT-vel, már most elmondható, hogy nagyon jó úton halad, hogy átformálja a mindennapjainkat. Biztosan sokan tartanak az AI-tól, de legalább ugyan ennyien várták már.

Ha tetszett az írásom, olvasd el a többit is. A ChatGPT még nagyon új terület, de érdemes foglalkozni vele. Egy nagyon egyszerű példán keresztül mutattam be, hogy mire képes. Azonban a lehetőségek korlátlanok, csak jól kell tudni kérdezni. Ebben rejlik a nagy lehetőség. Az AI még nagyon sokáig nem helyettünk, hanem velünk együtt fog gondolkozni.

Keress meg bizalommal, ha egy ötletedet / termékedet szeretnéd megvalósítani. Tudok benne segíteni.

Weboldal a mobil app helyett
Van olcsóbb megoldás mobilra

Viktor
Weboldal vagy mobil UI tervezés termékfejlesztés közben
Forrás: Unsplash, amayli

Biztosan te is jártál már úgy, hogy rengeteg ötletet összeírtál magadnak. Ezek közül végre sikerült kiválasztani a kedvencedet. Rászántad az idődet, hogy utánanézz, lekutasd a témát. Ilyet még senki sem csinált! Remek! – gondoltad magadban. Már csak meg kell valósítani. De hogyan? Weboldal legyen vagy mobil alkalmazás? Netán PWA? Ez azonban csak a kezdet. Számos más kérdést kell még feltenned magadnak.

Ötletem már van. Hogyan lesz ebből bármi is?

Ha még nem találkoztál digitális termék fejlesztésével, akkor ajánlom körbejárni a témát. Az Így tervezz mobil alkalmazást 5 lépésben – 1. rész kendőzetlenül körbejárja a téma. Ezért most nem írom le részletesen, bővebben ott olvashatsz róla.

Hol induljak el vele?

“Hogyhogy hol?? Az interneten, nem?” – Nos, nem ilyen egyszerű! 🙂

Volt szerencsém beszélgetni pár ötletgazdával. Ezek az alkalmak kiválóak arra, hogy pár kérdést a helyére tegyünk. Olyan szempontok merülnek fel, amik nem jutottak eszébe az ötletgazdának. Ez nem gond, hiszen azért osztja meg velem, hogy hozzáértően, konstruktív kritikát fogalmazzunk meg együtt.

– Én csak egy mobil appot szeretnék, ami ezt meg azt csinál. – mondja Feri
– Értem. Tehát lesznek felhasználóid, beléptetéssel, igaz? – kérdezem
– Aha! – vágja rá
– Social login is lesz? – teszem fel. – Tudod, Google, Facebook, stb.
– Erre nem is gondoltam. – vallja be
– Kelleni fog majd egy szerver is. – vetem fel
– Az meg minek? – kételkedik
– Tudod, a fizetési tranzakciókat hol fogod látni? Mi van, ha probléma merül fel?
– Egy admin oldalra gondolsz? – csillan fel a szeme
– Igen. Neked fizető ügyfeleid lesznek, akiknek lesznek problémái. – erősítem meg

A fenti párbeszéd persze a képzelet szüleménye. Bár hasonlók szoktak elhangozni.

További szempontok, amiket érdemes megválaszolnod magadnak:

  1. Ha mobil app, akkor Android és iOS-re ki kell adni a store-okban.
  2. Kb. fél évente érdemes őket frissíteni. Ez fontos ASO (App Store Optimization, kb. ugyan az, mint a SEO) szempontból.
  3. Szükséged lesz fejlesztői fiókra, ahol kiadhatod (Owner, Account Holder)
  4. Kelleni fog valaki, aki megtervezi a kinézetet (design).
  5. Szerver (web)alkalmazás elengedhetetlen lesz a felhasználók, termékek, beállítások kezelésére. Cloud, VPS, mi legyen?
  6. Kell egy rövid, jól csengő név, logó. Apropó, domain regisztráció.
  7. Weboldal, ahol ismertető, Blog, GDPR, Adatkezelési szabályzat stb. elhelyezhető.
  8. Nem mindenki szereti a mobil alkalmazást. Biztosan erre van szükséged? Hallottál már a PWA-ról?
  9. A sok funkcióból szűrd ki, mi lenne az, amit legelőször szeretnél bemutatni? A többit hagyd későbbre!

Mennyi az annyi?

Konkrétumokban nem lehet beszélni erről. Ahány elképzelés, annyi féle kombináció. Azonban ökölszabályokat lehet hozni.

Tudnod kell, hogy egy mobil fejlesztés több lépésből áll, mint egy weblap kialakítása. Emiatt az árak is markánsabbak. A néhány száztól a több ezer munkaóráig terjedhet egy kis-közepes termék kialakítása. Vannak nem megúszható részek. De néhány párhuzamosítható, vagy későbbre tolható. Innen pedig egyszerű a matek, mert az óraszámot fel kell szorozni a fejlesztői órabérekkel.

Az egész az alábbi nagy fázisokban határozható meg:

  1. Ötlet gyűjtés
    • Kinek?
    • Mit?
    • Fizetős vagy Ingyenes?
  2. Termék meghatározása
    • Funkciók
    • Mi lenne, ha… ?
    • Iparági szabványok felkutatása
  3. Prototípus(ok) kialakítása
    • Rajzok, Mock-up-ok
    • felhasználói interjúk
    • design tervezetek (Figma, Adobe XD)
    • MVP
  4. Fejlesztés
    • felhasználói visszajelzések alapján
    • design véglegesítése
    • kódolás
    • mobil app, szerver, weblap, automatizálás, fizetési szolgáltató integrálása
  5. Tesztelés
    • fejlesztői tesztek (unit, integrációs)
    • automata tesztek
    • végfelhasználói tesztek (end-to-end, E2E)
    • jegyzőkönyvek, riportok
  6. Bevezetés, értékesítés
    • sales, marketing, PR
    • közösségépítés, kampányok
    • app store-okban kiadás
  7. Utóélet, támogatás
    • ügyfélszolgálat, helpdesk
    • rendszeres javítások
    • (termék visszahívása, kivonása)

Beszélj szakemberrel

Ha ezek borzasztóan hangzanak, beszélj egy szakemberrel.

A fenti tevékenységek közül számos elhagyható, egyszerűsíthető. Nem feltétlenül kell mindent megcsinálni. Nem is lenne reális kisebb ötleteknél.

Éppen ezért nem árt, ha nem egyedül vágsz neki. Pár alkalmas tanácsadás, vagy beszélgetés költsége még mindig megfizethető, mielőtt nagy fába vágnád a fejszédet. Kérhetsz ütemezést, hogy a cash-flow rendben legyen.

A jó szakember le tud beszélni egy költséges, vagy bonyolult részről. Akár egy jó alternatív helyettesítő megoldást mutat rá.

Érdemes élni a szakmai kapcsolatainak a kiaknázásával. Megfelelő szolgáltatók, partnerek ajánlásában sokat tud segíteni. Nem neked kell 3-5-10 felé beszélni az adott szakterületen. Persze fel is oszthatóak a feladatok: mindenki azt csinálja, amihez ért.

Kommunikáció

Fontos a projekt közben a tiszta kommunikáció. Ez lehet élőben, video call-on keresztül, emailben. A lényeg, hogy a leghatékonyabb legyen. Mindenki ideje drága. A meeting végére szülessen egy döntés. Ne csak a meeting kedvéért üljünk össze. A felmerülő kérdéseket és az azokra kapott válaszokat rögzítsük egy rendszerben (issue tracker, feladatkezelő, Excel 🙂 ), ahol mindenkinek elérhető.

Haladj a saját ütemedben

  • Ha nincsen meg a tudásod, olvass!
  • Ha nincsen meg a tőkéd, kerítsd elő! Vagy szerezz támogatót! Vagy egy közösséget, aki megelőlegezi neked. Ilyen a www.brancskozosseg.hu.

Lehet, hogy először csak egy fehér A4-es papíron lesz bemutatható. Ezután már lesz egy Figma terved, prototípusod. Aztán jöhet egy reszponzív weboldal, PWA vagy egy böngésző kiegészítő (Firefox, Chrome extension). Ha jó a fejlesztői keretrendszer, akkor abból könnyen lehet készíteni natív appokat. (Ilyen például a legnépszerűbb Flutter mobil app keretrendszer.)

A témában írtam több cikket, ezek is érdekelhetnek:

Ha szeretnél mobil appot fejlesztetni, 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.

Figma design file-ból Flutter kód

Viktor

Időről időre megjelennek próbálkozások, ami a híjján lévő programozókat igyekszik pótolni. A Low-Code/No-Code (LCNC) eszközök ékes tárába a DhiWise Figma Plugin is csatlakozott. Meglepően jó kódot generálva egy MVP applikációhoz.

Voltak eddig is ígéretek: Figma design kóddá alakítása

Korábban a UICode pluginról írtam, ami jó kezdeményezésnek indult, azonban beletört a fejlesztők bicskája. Az elmúlt 1 évben már nem folytatják ennek a fejlesztését. A cikkem írásakor beszéltem a csapattal, és nagy reményeket fűztek hozzá. Talán túl ambiciózust is.

Felelevenítve a korábbi cikkemből a minta Figma design kinézetét, erről van szó:

  • 2 képernyő
  • pár gomb, amivel oda-vissza lehet navigálni
Figma designból Flutter kód
Egy egyszerű Figma designt készítettem

A DhiWise Figma plugin bemutatása

A GitHub repo itt leérhető: https://github.com/vborbely/figma-to-flutter

A Figma szerkesztőnket nyissuk meg, és a DhiWise Plugint adjuk hozzá.

Ezután már nincsen más dolgunk, mint lefuttatni a plugint a Run gombra kattintva.

DhiWise - Figma to Code plugin futtatása
DhiWise – Figma to Code plugin futtatása

Válasszuk a Design to Code lehetőséget.

A megfelelő opció kiválasztása

Ezután be kell állítanunk a megfelelő paramétereket:

  • Flutter kódot szeretnénk
  • az összes képernyőről (All Frames)
  • a teljes kódot kérjük (Complete Code)
  • adjuk meg a Figma design file URL-jét
  • Generate code gombbal menjünk tovább
Generálás előtti paraméterek beállítása
Paraméterek beállítása

Elképzelhető, hogy a Figma accountunk nincsen összekapcsolva. Tegyük meg a Connect To DhiWise gombra kattintással. Ezután, ha zöldre vált, ismét a Generate Code-dal tudunk tovább menni.

Figma account összekapcsolása
Figma account összekapcsolása

A generálás eltart pár percig, de meglepően gyorsan végez.

A sikeres generálás vége
Sikeres kód generálás

Valóban jó Flutter kódot kapunk?

A generálás közben feltűnik, hogy elég sokmindent elvégez automatikusan nekünk:

  • színek
  • képek
  • méretek exportálása

A végeredmény egy áttekinthető, Clean Architecture-re emlékeztető könyvtárszerkezet.

Csinos könyvtárszerkezet
A generált könyvtárak

Elárulom, hogy egy népszerű state management-tel van megoldva, a GetX-szel. A fejlesztői oldala itt érhető el.

Navigáljunk vissza a főképernyőnkre, és ott válasszuk ki a friss projektünket. Itt már láthatjuk, hogy profi megoldással van dolgunk. Ezen a helyen van lehetőségünk finomhangolni a kódot. Elnevezni a képernyőket.

A finomhangolás
A projekt kód finomhangolása

A Configure gombra kattintva érhetőek el a komponensek, stílusok, betűtípusok, színek beállításai. Nagyon részletes!

Beállítások

Ha mindezzel megvagyunk, akkor zárjuk be a beállításokat, és generáljuk le a kódot. Ezt a képernyő tetején, a közepén található Code view gombra kattintva tehetjük meg.

A jobb alsó sarokban a letöltés gombbal egy ZIP-ben megkapjuk a kódunkat. Ezt ezután betöltve a kedvenc IDE-nkbe, máris futtathatjuk a natív appunkat.

Kód letöltése
Kód letöltése

A kódot átböngészve kellemes benyomást ad. Kellően szét vannak választva a UI, az üzleti logika (Business Logic) és az adatkötések (Binding). Erről részletesebben nem írok, mert ez egy fejlesztőnek lehet izgalmas 🙂

Az, hogy a kapott kód mire elegendő, mindenki döntse el saját maga. Én a magam részéről azt mondom, egy ingyenes megoldástól ilyen minőséget kapni, igazán “kifizetődő”.

Tipp: Kis adalék még, hogy az Adobe XD file-okat Figmába, onnan pedig kódra tudjuk váltani.

Ennél a megoldásnál már ténylegesen arról van szó, hogy ott folytathatja a programozó a munkáját, ahol a designer abbahagyta a Figmában.

Ha megtetszett a Flutter mobil fejlesztés, 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.

Ezek a Google IO bejelentései 2022-ben

Viktor
A Google IO 2022-n nagy hangsúlyt kapott a Flutter.

Az idei évben a Google nem kevesebb, mint 14 téma köré szervezte az eseményeit. Ezek között voltak a nagy platform bejelentések, valamint workshopok is. A bejelentkezésemben szemezgetek a technológiai újdonságokból. Ezek közül főként a mobil fejlesztést érintő érdekességeket szedtem össze. De nem csak ezeket! Olvass tovább!

A Flutter velünk marad, ez már biztos

Ezt az 5 perces összefoglalójában Kevin Boateng, a Flutter Product Marketing Managere sűrítette bele.

Nagy hír volt, hogy megjelent a Flutter 3 verziója. A 2018-as kezdetek óta, amikor a Flutter 1.0 megjelent, a 2 mobil platformból mára 6 platform lett támogatott. Ez úgy jön össze, hogy 2 mobil, a web és 3 desktop, a Windows, Linux és Mac OS van a listán. Igen! Közös kódbázissal. Ha jól választunk package-ket, és néhány helyen elvégezzük a platform specifikus beállításokat és ellenőrzéseket, akkor 80-90%-ban közös kódbázisról beszélhetünk.

Ezekhez én még hozzátenném, amit hivatalosan nem népszerűsítenek még, de egyre többször látom a közösségben, hogy a szerver oldali megoldások is terjednek. Ki tudja, talán egyszer beérik, de addig még nagyon sokat kell fejlődnie a Dart nyelvnek. Ez pedig nincsen a Google roadmapjén.

Ez igazi költségmegtakarítást jelent egy szoftverfejlesztő cég életében.

A Firebase még jobb lett

Rendszeresen olvasok cikkeket, amikben fejlesztők mutatnak be tippjeiket, vagy a használati eseteket, ahol segített nekik a Flutter. A Google io esemény után, ahogy lenni szokott, érkeznek a reflektáló cikkek. Ezek közül egy fontos dologra mutatott rá Andrew Zuo a Medium.com hasábjain.

Eddig kézzel kellett egy új projekthez a Firebase-t beállítani. Ugyan nem volt vele sok vesződség, de mégis. A Google IO esemény előtt órákban azonban a firebase.flutter.dev dokumentációs leírás a firebase.google.com/docs/flutter/setup oldalra vándorol. Ez ékes bizonyítéka, hogy innentől kezdve a Flutter elsőszámú polgára lett a Firebase ökoszisztémának.

Ennek megfelelően megérkezett a Firebase CLI, ami megkönnyíti az új projekt létrehozását. Ezentúl nem kell a böngészőben kattintgatni, helyette parancssorból állíthatjuk be.

Nem újdonság, csak a szokásos dolgok

Ez a frissítés amellett, hogy a Google törekvéseit végre beváltotta, a mobil fronton sok újat nem hozott.

A “szokásos” sebesség javítása iOS platformon. A memória még jobb kezelése. A letöltött applikáció még kisebb méretűre csökkentése. Ezek talán eltörpülnek a mai világban, amikor már minden telefon gyorsabb, nagyobb, okosabb. De ne feledjük! Ezeket úgy kapjuk meg időről időre, hogy nem kell érte tennünk szinte semmit. Csupán követni a keretrendszer fejlődését, és a legfrissebben tartani a keretrendszer verzióját.

A Flutter appoknak van még hova lefaragni a méretből, de már így is kellően kis méretűek. Kb. 5 Mb-ot tesz hozzá a saját futtató környezet. Megérzésem szerint, amikor elterjed a Fuchsia OS, az már natívan képes lesz futtatni az appokat, és ez a minimális futtató réteg is elhagyható.

Amint látható, a mobil fejlesztés területén a Google nem pihen. Időtálló megoldást épít a piac igényeit kielégítve.

Ha te is gondolkozol egy mobil alkalmazás fejlesztésén, de nem tudod, hogy hogyan állj neki, vagy keresed a megfelelő csapatot, akkor keress meg. A Flutter keretrendszerrel 2-t kapsz 1 áráért.

1 fejlesztőt (csapatot) kell menedzselned.

Kétszer olyan gyorsan készül el a terméked a két platformra (Android, iOS).

Fele akkora költséggel készül el a terméked.

Ez nézőpont kérdése, a Te nézőpontodé!

Ha kérdésed van, keress meg elérhetőségeim egyikén.

A témában tovább olvashatsz itt.