Flutter

Flutter UI Google cross-platform logo

Mi a Flutter? A Flutter egy olyan megoldás a Google-től, ami a cross-platformos fejlesztést támogatja Android-ra, iOS-re, Web-re, asztali alkalmazásokra (Desktop).

Az oldalamon naprakészen megírom ennek a kiváló keretrendszernek az újabb kiadásait. A Google odafigyel rá, hogy igazi keresztplatform megoldás legyen: gyors (60-90 Hz frissítés), kis memória használat, gyors alkalmazás indulás, és a fejlesztők is szeressék (tooling).

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.

Élő kódolás demó : Flutter alapok

Viktor

Május 3-án a Veszprémi Technology Meetup (VTM) meghívott vendégelőadónak, hogy beszéljek a mobil crossplatform előretöréséről 2022-ben. Ezen belül is a Flutter keretrendszerről, ami kilőtt az utóbbi időkben, és hamar a mobil app fejlesztők kedvence lett. Egy látványos, élő demó keretében adtam ízelítőt a Flutter lehetőségeiről.

Ha inkább a videó formátumot kedveled, akkor itt megtekintheted a kb. 45 perces előadásomat az élő demó bemutatóval. A cikkben kiemelem a fontosabb részeket, amikről szó volt.

GitHub repo: https://github.com/vborbely/english_words

Mi a Flutter?

A Flutter egy UI kit a Google-től, ami a cross-platformos fejlesztést támogatja Android-ra, iOS-re, Web-re, asztali alkalmazásokra (Desktop). A Flutter 2017-ben került először a nagyközönség elé.

A keretrendszer nyelve a Dart, ami mai modern alapokra épít. Nagyban hasonlít a C# és a Java nyelvekre, így könnyedén elsajátítható.

Ez készült el a Flutter demó során

Az alábbi videó a kész alkalmazást mutatja be. Ez készült el a demó alatt, kb. 25 percben.

Flutter demó app crossplatform-ra megírva
A kész Flutter demó app

Az alapoktól indulva, hogy hogyan kell egy projektet létrehozni. Az első váz átalakításával 2 képernyőt hoztam létre.

A főképernyő (HomeScreen) egy véletlen szópárokból álló lista képernyő, ahol a kedvencnek megjelölt szavakat megjegyzi.

Ezután a kedvencek (FavouriteScreen) képernyőre lehetett navigálni, ami ezt a kiválogatott listát mutatta be.

A feladat érdekessége volt, hogy hogyan lehet más csomagokat (package) felhasználni. Egy mobil appokban megszokottan használt tárolóból, vagy távoli API hívásból vette a szimulált adatokat. Ez az un. “mock-olt repozitori”.

Az is megvalósításra került, hogy amikor elértük a lista alját, akkor új elemeket “töltött” be a tárolóból, un. “lazy loading” megoldás, vagy más néven lapozás.

Természetesen a megoldásban az volt a legcsodálatosabb, hogy keresztplatform lévén, a megírt kis demó app futott gond nélkül iOS szimulátoron, Chrome böngészőben és MacOS natív desktopos alkalmazásként is. Emellett támogatja még a Linux és Windows desktop operációs rendszereket is.

Egy tesztelési demó is következett. A Flutter a Unit, az Integrációs és Widget teszteket támogatja. Ezek közül a widget tesztek egy speciális formáját, a Golden sample testing-et mutattam be.

A Golden tesztelés egy olyan tesztelési eljárás, ahol a meglévő UI kinézetünknek megvan a pixelpontos képe JPG, PNG formátumban, és ehhez hasonlítjuk a tesztelés során keletkezett képeket. Ha valamit módosítunk az alkalmazásunkban, és a kinézet megváltozik, és a minta-képnek nem megfelelő, a teszt megbukik.

Automatizált teszteléshez nagyon jó. A videóban a 28:30-tól kezdődően.

Kinek ajánlott?

A Flutter keretrendszer piaci fogadtatása nagyon jó. Ehhez hozzájárul az, hogy a crossplatform keretrendszerekkel a kb. 50-70%-os megtakarítás ténylegesen elérhető. Fele annyi fejlesztő kell. Nem szükséges minden fejlesztőnek Mac gépeket vásárolni, hanem az olcsóbb x86-x64-es architektúrák is jó.

A végleges app elkészítésére pedig számos online eszköz létezik: CodeMagic.io, Bitrise.io, GitHub Actions, stb.

Tény, hogy Magyarországon lassan indult be az elfogadottsága, de Nyugat-Európában már csak ezt keresik, a keresztplatformos fejlesztőket (a React Native mellett). Mivel nagy a kereslet a fejlesztők iránt, ezért Freelancerként könnyű lesz változatos feladatokat találni.

A keretrendszer megtanulhatóságában segít, hogy sokat kölcsönöz a meglévő frameworkökből: React Native, Android Jetpack Compose, Apple SwiftUI

 FrontEnd fejlesztőként a meglévő (csapat)tudás nagyon jól újrahasznosítható. Ha nincsen frontendes előélet, akkor annak is jó, aki BackEnd fejlesztésről, vagy más területről érkezik, mert tudásfrissítésnek is megfelel.

Olyan nagy autógyártók ismerték el, és kezdték el használni, mint a Toyota, BMW. Az infotainment fedélzeti rendszereiket bízzák rá. Nem meglepő, hiszen folyamatos a teljesítményre optimalizálás: 60 FPS képernyő frissítési frekvencia; kis memóriaigény; stb.

A bankok közül elsőként a NuBank gondolt egy nagyot, és kezdte el használni.

A játékfejlesztők szeretni fogják, mert egyre több támogatás érkezik rá (Rive, Flame). Az, hogy egy nagyon vékony réteggel kapcsolódik a hardverhez, és kihasználja a CPU-t, nem meglepő ez a lelkesedés.

Lehet, hogy a Flutter most egy “hype”, és nem lesz mindenre jó, de nagyon sok mindenre igen. Érdemes vele megismerkedni, mert ígéretes jövő elé néz.

A videóban bemutatott cross-platform módszert érdemes minél előbb alkalmazni a mobil app fejlesztési projektekben. Persze nem csak ott!

Ha még bizonytalan vagy, vannak kérdéseid, nem tudod, hogy hogyan vágjál bele, akkor keress meg az elérhetőségeim egyikén. Szívesen átbeszélem veled a lehetőségeket, a szükségleteidet.

Igény esetén beindítom a projektet, együtt dolgozva a meglévő csapatoddal.

2 év és 10 ügyfelem kiszolgálásának tapasztalatai
Egyszer fent, egyszer lent

Viktor

Amikor belekezdtem a saját vállalkozásomba, kevés elgondolásom volt a vállalkozói létről. Halványan körvonalazódott egy cél, egy vízió, de a gyakorlat hozta meg az igazi tapasztalást. Tudtam, hogy szeretek emberekkel foglalkozni, szeretem a vállalkozás vezetést. Sok mindennel találkoztam az elmúlt 2 év és több, mint 10 ügyfelem projektje kapcsán, amit összegyűjtöttem.

Honnan lesznek ügyfeleim?

Kezdőként a legnehezebb bejutni a piacra. Nem kezdőként pedig bent maradni 🙂

A viccet félre téve, valahol el kell kezdeni. Először érdemes egy listát készíteni, hogy mihez értesz. Mi jöhet számításba? Hogyan fog a saját szolgáltatásod beleilleszkedni a mindennapjaidba. Igen, jól olvasod! Ha a munkaidőd után kell még plusz tanulással, ismeretek elsajátításával és munkával foglalkoznod, akkor azzal kalkulálnod kell.

Kicsit könnyebb, ha már pl. a meglévő tudásodat kell eladnod. Persze felkészültnek kell lenned, ezért bele kell tenned a munkát, minden nap.

Nem árt, ha van egy víziód, hogy merre fog tartani a piacod. Ha meglátod a lehetőséget egy felfutó vagy felkapott dologban. Ezért kezdtem én a Flutter irányába fordulni. Az egyre nagyobb programozói hiány, és a digitalizáció miatt egyre több és több IT projekt kiszolgálását nem lehet könnyen megoldani. Paradigma váltásra van szükség. Ezt hozza el a Flutter cross-platform (keresztplatformos) megoldása. Szükség lesz Webre, mobil app-okra, esetleg asztali alkalmazásokra, amit egyre kisebb, de hatékonyabb csapatokkal kell megoldani. Erről írtam korábban pár gondolatot.

Keresd a saját területeden, hogy miben vagy jó? Nem kell világmegváltás, csak a saját, más nézőpontod.

Számos helyen kereshetsz ügyfeleket: LinkedIN, Facebook, freelancer portálok, stb.. A lényeg, hogy passzívból aktívba kell átmenned! A “várakozóból” a “cselekvőbe”. Meg kell szólítanod Ügyvezetőket, CEO-kat, CTO-kat! Céges honlapokat kell böngészned, hogy szükség lehet-e valamire nekik, ami neked van. Ez egy másfajta gondolkozást igényel, mert észre kell venni, hogy te most nem terméket akarsz vásárolni tőlük, hanem pontosan annak a terméknek a fejlesztésében akarsz segíteni.

Ez talán az egyik legnehezebb része: láthatónak lenni. Én alapvetően nagyon nehezen írok emailt, hívok fel telefonon cégvezetőt, de ezt kell tenni. Minél többet gyakorolsz, annál jobban fog menni! Kitartás!

Ki mondja meg a következő lépést?

Bármibe is kezdj, senki sem fogja megmondani, hogy hogyan csináld. Ez nagyon jó, és felemelő érzés, hiszen ezért kezdted el az egészet 🙂

Másrészről kőkemény kitartást igényel. Napi szinten kell sok döntést meghoznod. Csinálnod akkor is, amikor nem látszik. Stratégiákat kigondolnod, amiket működtetned kell.

Kipróbálsz egyvalamit, ami mellett ki kell tartanod. Nem lehet csapongani. Melyik lesz a te formátumod? A te hangod? Konzisztensnek kell maradnod, de időnként át kell nyergelned másra, hogy azt is kipróbáld. Ez lesz a stratégia része, hogy ezt hogyan tedd?

Csábító a sok-sok platform, ahol megmutathatod magad. Melyiket válaszd? Nos, a mai trendek azt mutatják, hogy bárhova bele lehet “paszírozni” az üzenetedet. De jó ez neked? Hiteles vagy? Kell-e neked?

Gondold át, hogy melyik az, amit (az elején) egyedül, rendszeresen tudsz üzemeltetni? Meg tudod tanulni ezen keresztül, hogy mit szeretnél elmondani. Amikor ki kell szervezned (delegálni), akkor tudd, hogy miről beszélsz, mert érted.

Senki sem fog helyetted gondolkozni, cselekedni.

Neked kell a szerződéseid feltételeit kidolgozni. Nem elsőre, de a harmadik-ötödik-tizedik után már rá fogsz érezni.

Az ügyfelemet a saját üzlete érdekli

Az ügyfelemet természetes módon a saját üzlete érdekli. Nem szeretne mélységeiben pl. a technológiával foglalkozni. Ez rendjén van így. Nem azért választott engem, hogy még több feladatot és fókusz-elvonást kapjon cserébe. Helyette nekem együtt kell élnem az üzletével, a víziójával. Megpróbálom átérezni “helyette”, hogy mi a fontos neki. A biztonság.

Az, hogy ami már működik, az továbbra is működjön. Ha új igények jönnek a termékével kapcsolatban, az belátható időn belül elkészüljön. Ezzel aztán újabb, vagy a meglévők közül elégedettebb vevői lesznek. Ami további bevételt jelent neki. Tehát (áttételesen) én is részesülök belőle.

Az üzleti életben, ha fizetsz egy szolgáltatásért/termékért, és az pont csak annyit hoz, mint amennyit rászántál, akkor nullán vagy, nem történt semmi.

Érdemes volt kipróbálni! Ha egy kiadás újabb bevételeket generál, akkor megütötted a főnyereményt. Ennyire leegyszerűsíthető.

A bizalmadat veszik meg

Amikor végre megvan az ügyfél, próbáltok közösen dolgozni. Te pl. szoftvert fejlesztesz neki, ő pedig szerzi a vevőit.

Ebben az együttműködésben olyan belső “titkokat” is látsz, amit kívülálló nem. Látsz olyan, működésbeli hibákat, amiket a partner nem biztos, hogy lát, mert ő hajtja az üzletét. Ha van rá lehetőséged, segítsd azzal, hogy ezeket a tudtára hozod. Biztosan meg tudjátok közösen oldani, és te annál értékesebbé válsz ebben a kapcsolatban.

Légy olyan partner számára, akire számíthat a nehéz időkben (ilyenből kijut bőven egy vállalkozásban)! Rendezkedj be hosszú távra vele kapcsolatban.

Mi van akkor, ha már nem működik a kémia? Nos, előfordul. Csalódás van bármelyik oldalon. Ezt vállalni kell, és nyíltan megbeszélni. Nem házasságot kötöttetek, hanem üzletet. A megfelelő határidőket betartva, békében abba lehet hagyni a közös munkát.

Ettől emberileg még értékelhetitek egymást, hiszen a szakmai oldalon romlott el valami. Kicsi a (világ) piac, és nem tudhatod, hogy mikor fog neked segíteni újra, vagy éppen Te tudsz egy jó tippet adni neki.

Jó vállalkozást kívánok és kitartást hozzá!

iOS mobil fejlesztő Flutter keretrendszerrel
Mennyibe kerül egy iOS fejlesztő?

Viktor

Az elmúlt közel 3 évben aktívan használtam a Google megoldását mobil fejlesztésre. Ez a Flutter. Azóta kiderült, hogy nem csak mobil appok írására kiváló. Weblapok, vagy akár asztali alkalmazásokban is bevethető. Vetődik fel a kérdés 2022-ben: lehet-e egy iOS mobil app fejlesztő helyettesítője egy Flutter mobil fejlesztő?

A cikkben azért választottam az iOS fejlesztő munkakört, mert nagy szükség van várjuk, de igencsak drágák. A bérekben akár másfél-kétszeres lehet a szorzó (Android fejlesztő, iOS fejlesztő). Van-e alternatív és jó megoldás?

Mennyibe kerül egy iOS fejlesztő?

Egy jó iOS fejlesztő kiváltható egy Flutter fejlesztővel?

Az igazság az, hogy: ATTÓL függ!
Ha a pénztől tesszük függővé, akkor IGEN a válasz. Ha csak a költségeket nézzük, és nagy szükségünk van egy iOS mobil appra, akkor a keresztplatform (crossplatform) irányába kell keresgélnünk.

Ha nagyon erősen mobilra optimalizált megoldás kell, akkor NEM (biztos)! Nagyon erős mobil megoldás lehet, a videó streamelés, videóvágás, hangfelismerés, 3D játékok, stb. Rögtön hozzáteszem, hogy ez sem teljesen van így. Rengeteg szolgáltatás, megoldás már a felhő erejét használja, és az iPhone-ról leveszi a terhet.

Minden másra ott van a Flutter keretrendszer.

iOS fejlesztő helyett Flutter fejlesztőt alkalmaznál?

Bizony, 2022-ben már kijelenthető, hogy 1-1,5-2 Flutter fejlesztő áráért egyből 5 fejlesztőt kapsz!

1-1,5-2 = 5x


Ez eléggé talányos mondat, belátom.

Az egyenlet megoldása az, hogy nemcsak iOS fejlesztő az, akit kapsz. Egy keresztplatformos fejlesztő révén Android (mobil), Web (FrontEnd), Windows, Linux, Mac OS (Desktop) is jár.
(Az persze érdekes kérdés, hogy ki fejleszt manapság desktopra? A Google Február 3-ai bejelentése pont erről szólt, hogy a Windows-ra kijött a stabil keretrendszer.)

Érdekes tény, hogy kevés az a mobil app, amihez az utolsó csepp erőforrást, az utolsó feature-ket is kellene sajtolni a telefonból.
Bizony! A fejlesztő ideje meg véges, tehát a rendelkezésre álló fejlesztők száma is véges.

Jó Startupoknak is?

Ma az van, hogy “hamar-gyorsan” kell 1-2 app validálásra, olcsón, aztán menjünk tovább! Többször, ismétlődően: új funkció -> tesztelés -> új funkció -> tesztelés …
A pedig nagy előny, ha a validálás után nem kell eldobni a prototípust. A felhasználói tesztek után onnan lehet folytatni (profin), ahol abbahagytuk.

Többször elmondtam, és most is leírom, hogy egy vállalkozásban egy mobil app csak az egyik elem. Ez egy szükséges kellék, de nem ettől fog működni. Viszont ha nincsen, a felhasználókat nehéz megszólítani.

Tehát kell a mobil app (Mobile-first megközelítés)!

Konklúzió

Körbejártuk a témát, ami ma az iOS fejlesztő kereslet-kínálati piacot súlyosan érinti. Közben lehet, hogy nem is natív fejlesztőt kell keresned, hanem egy megbízható, de nem kompromisszumos megoldást.

Ha IT vezető, CTO, CEO, stb. vagy, és még nem hallottál a Flutter-ről, akkor javasolom, hogy sürgősen szánj rá 2 percet! Kezd a cikkeimmel itt az oldalamon.

De számos helyen tájékozódhatsz, egyre többen szeretik használni. A Flutter népszerűsége töretlen 2022-ben is.

Ha mobil app fejlesztését fontolgatod, de nem tudod, hogyan kezdj bele, akkor keress fel bizalommal az elérhetőségeim egyikén. Egy egyórás, ingyenes tanácsadás keretében megnézzük, hogy mire lenne szükséged, és merre indulj el.

Egy beszélgetés nem jár semmiféle kötelezettséggel, viszont magabiztosan tudsz dönteni a több információ ismeretében.

Ez történt 2021-ben a mobil fejlesztési iparágban
Sűrű év volt a mobilok háza táján

Viktor
2021 is over, let's see the summary of the year!
A kép forrása: Freepik / image

Az elmúlt év tovább erősítette a távolságtartásunkat egymástól, ami tovább növelte a digitális mobil termékek használatát. Új módszerek, szokások alakultak ki. A cikkben a több éve tartó megfigyeléseimet gyűjtöttem össze a mobil appok fejlesztési területén. Hozzátéve a saját meglátásaimat és előrejelzéseimet.

Mi új az Android 12-ben?

  1. Dinamikus téma színváltás a háttérképnek megfelelően: az Android 12 rácfelvarrást kapott a Material You kinézettel. Az újítás lényege, hogy a háttérként beállított kép alapján a színeket hozzáigazítja az egyéb felületeken. Továbbá, ha egy adott app fel van készítve rá, akkor az appon belül is megjelenik a témázás. Így sosem válnak unalmassá a felületek.
  2. Egykezes mód: megirigyelve a Samsung és a Xiaomi korábbi megoldásait, a Google beépítette ezt a beállítást az új, Android 12 változatába. Ezentúl a beállítások menüben könnyedén elérhető bárkinek.
  3. Gyorsindítás (Quick tap): az iOS 14-től lopva az ötletek, az Android 12-be is megérkezett a funkció. A beállításokban megadhatjuk, hogy mi történjen, ha a telefon hátuljára kétszer koppintunk. Egy általunk választott alkalmazás indul el.
  4. Személyes biztonság ellenőrzése (Privacy Dashboard): az idei évben a Google tovább erősítette azt a szándékát, hogy a személyes adataink a miénk, és nekünk van jogunk eldönteni, hogy kivel osztjuk meg. A felületen ellenőrizhető, hogy melyik alkalmazás, mikor, mihez fért hozzá a telefonunkon.
  5. Beszélgetés widget-ek (Conversation Widget): bármely chat alkalmazásunkhoz elhelyezhetünk kis felületeket a kezdőképernyőn, hogy lássuk a beszélgetéseinket.

Ezek csak pár az újítások közül, amiket az Android 12 verziója hozott nekünk.

Mit tudott hozzátenni az iOS 15?

  1. FaceTime és SharePlay: a megszokott FaceTime funkcionalitás tovább bővült, és a felhasználó került a középpontba. A háttér elmosódva látszik, ezáltal élesebb a résztvevő, valamint a hangzás is jobban kiemeli az aktuálisan beszélőt. A grid nézet pedig a több résztvevős beszélgetésekben segít egyszerre láttatni a partnereinket. A SharePlay tovább ment még ezen is, és a közös élmény megosztásra helyezi a hangsúlyt. Olyan, mintha a család (akik lehetnek több ezek km-re egymástól) ugyan azt a műsor néznék. Bárki beletekerhet a zenébe vagy filmbe. Együtt működik az Apple TV-vel, és könnyedén bevonhatóak az Androidos vagy Windowsos társaink is.
  2. Pici újítás a Safari böngészőben: nem tűnik nagy újításnak, de annál hasznosabb, hogy a böngésző címsora lekerült ujjközelbe. Az Apple felismerte, hogy ennek ott a helye, hiszen a böngésző elsődleges funkciója, hogy oldalakat nyisson meg. Ez pedig jó, ha kézre áll.
  3. Kocsikulcs, fizetés, személyi igazolvány minden egy helyen: az Apple Wallet-ben. A BMW volt az első autógyártó, aki az indítókulcsot elhelyezte a wallet-ben. Elő sem kell venni a telefont, hogy indítsunk. További megoldások várhatóak, hogy személyi azonosításra is alkalmas legyen, vagy akár reptéri azonosításra.
  4. Apple Maps, térkép: van még hova fejleszteni a navigációt. Részletesebb adatokkal látta el az Apple Maps-et. A navigáció hasznos infókkal látja el az utazót. A navigáció pedig az Apple Watch óráján folytatódik tovább. A telefon képernyőjén pedig nagyon pontos AR (Augmented Reality) élményt adó tájékoztatásokat jelenít meg.
Apple Maps street view with AR
A kép forrása: apple.com

Mindezek mellett számos újdonság, és haladó ötletek kerültek be az új iOS 15-be.

A Flutter új kiadása megcélozza a csillagokat

A tavaszi, márciusi 2.0-ás kiadás hatalmasat szólt, amikor a meglévő Android és iOS mobil platformok támogatása mellett a Google hivatalosan is “production ready”, vagyis stabil kiadássá nyilvánított még 4 platformot: Web, Windows, Linux, Mac OS operációs rendszerek.

Ezeket tovább tudta fokozni a 2.8-as verzió kiadásával. (Ami elhozta a Dart 2.15-ös kiadását is … mellékesen.)

Az új Flutter kiadás tovább fokozta a teljesítményt, még optimálisabbá téve a futtatást a mobil telefonokon, valamint a webböngészőben. A memóriafogyasztásból is sikerült lefaragni, amiről azt gondolhatnánk, hogy nem fontos a mai memória bővében lévő telefonokon. Nagyon tetszik, hogy a Google ezekre folyamatosan nagy hangsúlyt fektet, és nem lazít.

Az appok telepítőjének letöltési méretét kiadásról kiadásra csökkenti. Ez azért fontos, mert a natív Android vagy iOS applikációkkal szemben van egy 4-7 Mb-os többlete a Flutter app-oknak, amit úgy néz ki, a minimálisra akarja csökkenteni a Google. Ennek persze stratégiai okai is vannak véleményem szerint, hiszen ne felejtsük, hogy nem csak mobilokba szánja az alkalmazásokat a Google, hanem IoT eszközökbe. Itt már igen is van jelentősége pár Mb megspórolt kódterületnek.

A fent említett teljesítménybeli javulásnak van még egy nagyon pozitív üzenete. Mindezt ingyen! Nem nekünk kell ezzel törődni, hanem alapból jár, ha a legújabb Flutter SDK-t (Software Development Kit) használjuk. Melyik az a cég, ami manapság ingyen ad ilyet?

Egyre jelentősebb partnerek

Decemberben lett hivatalos, hogy a Samsung a Fuchsia OS-t (az Android lecserélésére szánt operációs rendszer) kívánja telepíteni a telefonjaira. Erre persze még néhány évet várnunk kell.

Nem ez volt az első, példa nélküli együttműködés, hiszen az év első felében a Microsofttal közösen fejlesztették, hogy a Flutter keretrendszerben megírt appok futtathatóak legyenek Windows rendszereken. Sőt, egy kezdetleges marketplace-t is kialakítottak, ahova további appok érkezhetnek. Ez, elnézve az Apple “side-load” (az, amikor nem csak a Store-ből lehet appot telepíteni, hanem más partnerektől letöltve) elleni kommunikációját tekintve egy másik szegmenst céloz. A Google mindazonáltal sosem próbálta beszűkíteni a partnereit. Minél inkább egy nyílt platformot hozott létre az évek alatt. Lásd a változatos mobil telefon és kijelzők felhozatalát.

A cikkben igyekeztem belesűríteni ezt a tartalmas évet. Nem minden fért bele, de a lényeg talán igen.

Lássuk mit hoz 2022!

A Fuchsia OS az Androidot válthatja a Google-nél
Új korszak kezdődik a mobilok világában

Viktor
Read The Post in English
A Samsung és a Fuchsia OS - Samsung Community
A Google és a Samsung házassága. A kép forrása: Community.Samsung

Hozzászoktunk, hogy ha mobil telefonról van szó, akkor két nagy táborról beszélhetünk: Android vagy iOS. Bár nem csak ez a két platform létezik, piaci elterjedésük mellett eltörpülnek az egyéb megoldások. Az elmúlt időszak mobilos operációs rendszerek változatlanságát a Huawei Harmony OS bejelentése törte meg. Pár hónappal később pedig megérkezett a bejelentés: a Fuchsia OS hivatalos lett, és nem kisebb szereplővel karöltve, mint a Samsung.

Mi az a Fuchsia OS?

A codemagic.io egy posztban szedte össze, hogy mik az új Fuchsia OS várományos előnyei. Hogyan épül fel? Ezekből szemezgettem.

A Fuchsia OS egy olyan új operációs rendszer, ami szakít a Linux kernellel, és helyette a Zincorn mikrokernelt használja. A mikrokernelek általában a minimalitás elvét követik, és bár a Zircon alkalmazza a mikrokernelek által népszerűsített koncepciók közül sokat, nem törekszik a minimálisra. A Fuchsia mikrokernel architektúrája segít csökkenteni a rendszer futásához szükséges, megbízható kód mennyiségét.

A Fuchsia OS négy alapelve: biztonságos (secure), frissíthető (updatable), befogadó (inclusive) és gyakorlatias (pragmatic). A dokumentumok a következőképpen írják le ezeket az elveket:

  • Biztonságos (Secure): csak a legszükségesebb jogosultságokat kapja meg egy alkalmazás
  • Frissíthető (Updatable): akárcsak a webes tartalmak, az appok is jönnek-mennek egy eszközön. Ennek megfelelően a biztonsági frissítések bármikor megérkezhetnek a különböző eszközökre. Saját meglátásom: nem csak jogosultságokat fogunk ezután engedélyezni az appoknak (pl. saját GPS helyzetünk megadása), hanem ha kell, akkor egy biztonsági frissítés megléte is szükséges lesz, vagy egy biztonsági hardver komponens (chip) megléte is.
  • Befogadó (Inclusive): sok nyelvet támogat, úgymint C++, Web, Rust, Go, Flutter és Dart.
  • Gyakorlatias (Pragmatic): nem csak egy tudományos koncepció, hanem éles környezetre szánt rendszer, aminek meg kell felelnie az olyan alapvetéseknek, mint a teljesítmény.

Látható, hogy magában hordozza mindazokat a követelményeket, amiket az elmúlt 13 (14) évben a Google tapasztalatot összegyűjtött a mobil appok piacán.

Támogatja a Flutter-t?

Ahogyan a fenti cikk is írja, a Flutter-t alapból támogatni fogja. Mindamellett a meglévő Androidos applikációkat is.

A Fuchsia OS F4-es kódnevű release bejegyzése (2021. december 9.) pedig kifejezetten megemlít egy Flutter-es optimalizálást.

Release notes for Flutter on Fuchsia OS
Az F4 release bejegyzése

Mi lesz a Flutter jövője?

A Huawei korábban az Android rendszerre fejlesztett mobil appokat képes volt futtatni. Valamint a Harmony OS leírásokat átnézve látható, hogy gondolatvilágában nagyon sokat köszönhet a Google-nek. A Flutter fejlesztőknek szánt csomagkezelő oldalán sorra jelennek meg a GMS (Google Mobile Service) átiratai, HMS (Huawei Mobile Services) néven. Tehát a jövőben a Flutter app-ok futtathatóak lesznek a Harmony OS-en.

A fenti összeborulás pedig tovább erősíti a Google dominanciáját egy olyan piacon, ahol képes volt 13 év után megújulni a platform. Kinőtte a gyerekbetegségeit (teljesítménybeli lemaradás; sokfél kijelző támogatásának kényszere), sokat tanulva az elmúlt évekből. Az, hogy a Google hagyta (bizonyos licenszelési feltételek betartása mellett) ezt a sokszínűséget, mára nagy előnyévé vált.

Kétségtelen, hogy nem mindenkinek tetszik (a mostanában Apple által kirobbantott marketing kampánya a side-loading ellen) a biztonság oltárán feláldozott terjeszkedés, de az átlag felhasználónak nem mindig ez számít. Ugyanakkor mellé téve, hogy a Google az idei nyári Google IO konferenciáján minden megnyilvánulásában elszántan lépett fel a személyes adatok védelme mellett.

Minden esetre a Samsung Fuchsia OS rendszerre való áttérése még várat magára (néhány év), de a példán kapva elképzelhető, hogy több telefongyártó is követni fogja a példáját. Nem figyelmen kívül hagyva azt a tényt, hogy a Fuchsia OS az IOT eszközöket is be akarja venni (csakúgy, mint a Harmony OS nyilatkozataiban).

Személy szerint, amint én látok a Flutter-rel az az, hogy minden eszközt, aminek képernyője van, el akar foglalni. Aminek pedig nincsen kijelzője, oda a beágyazott (embedded) változatára készült Dart kódokat szánja.

Izgalmas időszak következik, és még van idő felkészülni rá.

Ha te is értékálló megoldásokat szeretnél létrehozni, de nem tudod, hogy hogyan indulj el, akkor keress bizalommal. Beszéljük át, hogy a te üzletedbe hogyan illeszkedik egy “Mobile-first” terv.

Chrome böngésző bővítmény készítése Flutter UI kit segítségével
Flutter Web bővítmények fejlesztésére

Viktor
A Flutter Web által készített böngésző bővítmény
példa My Activities bővítmény a Chrome-ban

Nem mindig van szükség mobil app-ra egy feladatnál. Sőt, ha valaki böngészőben dolgozik sokat, akkor a kis felületen matatni hosszú órákon át, idegesítő. Az egyértelműen látszik, hogy a web böngészők dominálnak az asztali alkalmazások felett. Az online szolgáltatások elképzelhetetlenek nélküle. Van egy másik kör, ami még ide tartozik, a beépülő bővítmények (extension).

Mi a böngésző bővítmény?

A böngésző bővítmények már régóta velünk vannak. Sokan használjuk őket hasznos kiegészítőként napi feladataink során. Ezek olyan részei a böngészőknek, amit lelkes fejlesztők, vagy éppen komoly cégek fejlesztettek, és tettek elérhetővé. Vannak ingyenes és fizetős változataik. Képesek egészen komplex működéseket megoldani, kiterjesztve az alap böngésző tudását.

Mivel a böngészőt fejlesztő cégek (Google, Apple, Microsoft, stb.) csak a keretet adják, bárki írhat bővítményt. A keret adott, a szabvány adott, csak ötlet kell, hogy milyen problémát oldhatna meg ez a hasznos eszköz. Mivel kéznél van mindig a böngészőben, ezért nem kell elhagyni az ablakot egy funkcióért, ezáltal javítja a felhasználói élményt (UX).

Mit fogunk készíteni?

A lenti videón bemutatom, hogy pár óra alatt, mit lehet elkészíteni a Flutter Web-bel. Nem kell hozzá FrontEnd-es ismeret, és JavaScript kódokat írni.

Chrome böngésző bővítmény működés közben

Így kell megírni egy böngésző bővítményt

A cikk megírásában segítségemre volt ez a post.

Ha gyorsan ki szeretnéd próbálni, akkor ugrás a végére, a Letölthető anyagok fejezethez!

Hozzunk létre egy alap Flutter alkalmazást a szokásos módon. Ezt megtehetjük parancssorból a “flutter create app-neve” paranccsal, vagy Android Studio-ból.

Ezután az index.html file-ban cseréljük le a <script> tag-ben lévő sorokat az alábbiakra.

<body>

<script src="main.dart.js" type="application/javascript"></script>

</body>

Következő lépésként a manifest.json file tartalmának ezt adjuk meg. A name és description szövegek tesztőlegesen megadhatóak. Ez a böngészőben megjelenő név, és a böngésző bővítmény leírása lesz.

Megadhatunk saját ikont is, de figyeljünk, hogy PNG kép formátumú legyen, különben a böngésző nem jeleníti meg!

{
  "name": "flutter_chrome_extension",
  "description": "flutter_chrome_extension",
  "version": "1.0.0",
  "content_security_policy": {
    "extension_pages": "script-src 'self' ; object-src 'self'"
  },
  "action": {
    "default_popup": "index.html",
    "default_icon": "/icons/Icon-192.png"
  },
  "manifest_version": 3
}

Ezután nincsen más hátra, mint készíteni egy build-et az egészből az alábbi parancsot kiadva egy terminál ablakban:

flutter build web --web-renderer html --csp

Ez létrehoz egy /build/web könyvtárat, amibe benne van az összes szükséges file.

Ennek a csomagnak a tartalmát tudja felolvasni a Chrome böngésző bővítmény kezelője. Adjuk is hozzá!

Megjegyzés: mivel ezt a kiegészítőt teszt jelleggel hoztam létre, és nem publikáltam, ezért fejlesztői módban kell elvégezni a betöltését. Lásd alább!

Chrome -> Beállítások -> Bővítmények -> váltsunk át fejlesztői módra -> Kicsomagolt elemek betöltése… gombra kattintsunk.

Itt keressük meg a könyvtárat, és máris települ az új kiegészítőnk. Ezt rögzíthetjük a böngészőben, hogy gyorsan elérjük:

Így tudjuk kitűzni a böngésző bővítményt
Böngésző bővítmény kitűzése

Letölthető anyagok

GitHub repo: https://github.com/vborbely/my_activities_chrome_extension

A telepíthető Chrome bővítmény (ZIP) és a leírást megosztottam.

Ha te is gondolkozol böngésző bővítmény fejlesztetésében, akkor keress fel bizalommal az elérhetőségeimen, hogy átbeszéljük. Ha csak tanácsot szeretnél kérni, vagy egy jót beszélgetni, arra is nyitott vagyok 🙂

Korábbi cikkeim is érdekelhetnek a témában. Jó tájékozódást!

2022-re versenyhátrány lesz a natív mobil alkalmazás fejlesztés módszer
Most még nem késő váltani

Viktor
forrás: Pixabay / stevepb

Látszik a kiélezett harc a két nagy mobil platform óriás, a Google és Apple között. Mindegyik dominanciára törekszik, azonban más-más piacokon teljesítik túl egymást. A harc inkább a felszín alatt dúl, azonban cégtulajdonosként mindkettő piacnak meg kell felelni. Mégpedig gyorsan, ha felhasználókat akarunk szerezni. Tovább nehezíti a fejlesztési költségek kordában tartását, hogy a Huawei is kijött a saját platformjával. Ezáltal ismét sokszereplőssé válik a tér.

Hogyan áll a piac a mobil platformokkal?

Amióta 2007-ben az Apple előrukkolt az érintőképernyős mobilokkal, majd a következő évben a Google is követte, egy korszak indult útjára. Megszülettek a mobil app-ok. Ezután a Microsoft is beszállt harmadikként a nagyok közé, a Windows Phone-nal, de ez mára kihalt.

Ki merne ma beszállni a nagyok közé? A Huawei kényszerűségből felvállalta. Bár neki egy kellően nagy piaca van, de a siker még így sem garantált. A Huawei 2021-ben már hivatalosan is a Harmony OS-t jelentette meg, elsőként a Huawei P50 sorozaton.

Ez persze nem nevezhető trendnek, hogy várható további platform, de minden esetre érdemes időről időre felkészülni erre a ritka eseményre. Mobil fejlesztőként pedig adaptálódni a kívánalmakhoz.

Mi az új módszer a mobil alkalmazás fejlesztés területén?

A cross-platform, vagy más néven keresztplatformos fejlesztés nem idei találmány, de talán elmondható, hogy nagy lendületet kapott. Ennek oka, hogy a digitális termékek száma tovább nő, viszont nincsen elegendő számú szakember, aki ezeket elkészítse. Ma már 10-30 fős csapat kell egy jelentős alkalmazás előállításához: architekt, fejlesztő, tesztelő, UX/UI researcher, Business Analyst (BA), PO/PM, stb.

Belátható, hogy ha egy-egy területen lehet picit is költségeket vágni, akkor előnyre tesz szert a vállalkozás. A cross-platform mobil alkalmazás fejlesztés módszer pont ebben rejlik:

Írjuk megy egyszer, és használjuk fel többször.

Ne kelljen ugyan azon a megoldáson két különböző csapatnak dolgoznia, duplikálva ugyan azt a munkát. Márpedig a natív fejlesztésnek ez a hátránya. Ráadásul sokszor vita tárgya, hogy melyik csapat megoldása a jó. Melyik maradjon? Nem beszélve a fejlesztések közötti sebességről, ami az egyes kiadások határidejét tolja egyre távolabb.

A mobil fejlesztés ezen módszerét már korábban felismerték, és az utóbbi időben előtérbe kerültek a jó minőségű keretrendszerek. Ezek közül a React Native és a Flutter a kiemelkedők, amik uralják a fejlesztők piacát.

Mi az előnye és hátránya a cross-plaformnak?

Előnyök:

  • költséghatékony: egy új platformon való megjelenés nem jelent kétszer annyi időráfordítást
  • a tervezéstől kezdve közös megoldásban lehet gondolkozni, és csupán kevés helyen van szükség a platform eltéréseit figyelembe venni (ujjlenyomat olvasó vs arcfelismerés; GPS beállítások; egyéb engedélykérések; stb.)
  • hibatűrő: egy jó keretrendszer együtt fejlődik a Google vagy Apple operációs rendszerével, gyorsan reagálva rá
  • támogatás: élvezzük a hatalmas fejlesztői közösség nyújtotta előnyöket
  • egységes kinézet minden platformon
  • ugyan az a csapat készíti a kódot, és ezáltal nagyobb az összetartás

Hátrányok:

  • speciális, főként az eszköz hardver elemeire épülő technológiákat nem, vagy nem teljesen használja ki egy keretrendszer
  • a megszokott platform felhasználói felületei eltűnhetnek
  • új nyelvet kell megtanulni, ami időbe/költségbe kerül a cégnek

Látható, hogy a cross-platform módszer a mobil alkalmazás fejlesztésben egyértelműen előnnyel bír.

Van más megoldás is?

Mindezek mellett szót érdemel az egyre elterjedőben lévő low-code vagy no-code módszer. Itt arról van szó, hogy nem szükséges programozói fejlesztői tudás egy alkalmazás elkészítéséhez. A munka nehezét a keretrendszer támogatja, és “összekattintgatós” módszerrel bárki elvégezheti.

Ezeket a módszereket előszeretettel alkalmazzák a startup fázisban lévő, fiatal csapatok, akik gyorsan ki akarják próbálni a koncepciójukat egy mobile-first megoldással.

A programozói, vagy rendszerszervezői tudás ezeknél az eszközöknél nagy hasznát vehetik a “fejlesztők”, mert itt is igaz: a jó terv fél siker. Az absztrakt gondolkozásra szükség van, hogy a végtermék jó legyen.

Az idő meghozza, hogy mennyire érettek ezek a low-code eszközök.

Extra csavar, amit csak a Flutter tud

Természetesen a fejlesztők létszáma nem egyedül a mobil alkalmazás fejlesztés terén jelent gondot.

A Google a mobil platformok mellett a keresett FrontEnd-es szakmának is segít azzal, hogy a Flutter Web-et kifejlesztette. Aki eddig mobil fejlesztő, backend szerver oldali fejlesztő volt, ezáltal tud böngészőben futó web-alkalmazásokat (PWA) készíteni.

De a Flutter nem állt meg itt, hanem Linux-ra, Windows-ra, Mac OS-re is lehet vele natívan futtatható alkalmazásokat készíteni. Mindezt a megszokott tetszetős kinézettel, és a teljesítményre optimalizálva.

A fent bemutatott cross-platform módszert érdemes minél előbb alkalmazni a mobil app fejlesztési projektekben. Persze nem csak ott!

Ha még bizonytalan vagy, vannak kérdéseid, nem tudod, hogy hogyan vágjál bele, akkor keress meg az elérhetőségeim egyikén.

Szívesen átbeszélem veled a lehetőségeket, a szükségleteidet. Igény esetén beindítom a projektet, együtt dolgozva a meglévő csapatoddal.