A Petadev budapesti fejlesztőcsapata React Native-alapú mobilalkalmazásokat készít a hozzájuk tartozó háttérrendszerrel és adminfelülettel. 8 éve dolgozunk React Native-ben és legalább 30 alkalmazást adtunk ki vele. Cross-platform módon, közös kódbázisra építjük az iOS- és Android-appot, a platformok eltéréseit pedig külön kezeljük. Saját termék indításában és meglévő rendszerek mobilos kiegészítésében is segítünk.
8 év
React Native-fejlesztési tapasztalat
30+ app
React Native-ben kiadott alkalmazás
iOS + Android
egy kódbázisból, backenddel és adminnal
A React Native cross-platform keretrendszer: egy kódbázisból készül az iOS- és az Android-app. Jó kiindulópont lehet, ha ugyanazt a szolgáltatást iPhone-on és Androidon is elérhetővé tennéd és fontos, hogy a két alkalmazást együtt lehessen továbbfejleszteni.
Ilyen helyzet lehet például egy foglalási szolgáltatás, egy piactér vagy egy meglévő webáruház mellé készülő mobilalkalmazás. A közös kódbázis előnye akkor érvényesül, ha a felhasználói folyamatok nagy része mindkét platformon hasonló.
Az egyeztetésen a különleges igényeket is végignézzük: kell-e háttérben futó helymeghatározás, egyedi eszközkapcsolat, kamerafeldolgozás vagy olyan gyártói SDK, amelynek beépítése külön munkát igényel. Ezek alapján lehet felelősen technológiát választani. De kijelenthető, hogy ezek nem kompromisszumos megoldások, hanem minőségi, komplex rendszerek fejlesztésére is használható technológiák.
Megtervezzük és elkészítjük a képernyőket, a navigációt, az űrlapokat és a jogosultságokhoz kapcsolódó felhasználói folyamatokat. Figyelembe vesszük a készülékméreteket, a rendszerengedélyeket és azt, hogyan használják az appot a gyakorlatban.
Az alkalmazást meglévő API-hoz kapcsoljuk, vagy elkészítjük a szükséges háttérszolgáltatásokat. A Petadevnél a mobilos és a backendfeladatokat együtt tudjuk kezelni, így a felület és az adatok működését ugyanabban a folyamatban tervezzük meg.
Fizetés, személyazonosítás, értesítések vagy egy webáruház adatai: először tisztázzuk, melyik rendszer miért felel. Az integráció a sikeres művelet mellett az elutasítást, az időtúllépést és az ismételt próbálkozást is kezeli. Például egy megszakadt fizetés után az appnak a tényleges tranzakcióállapotot kell mutatnia.
A fejlesztés része az iOS- és Android-változat ellenőrzése, valamint az áruházi beküldés előkészítése. A közös kódbázis mellett mindkét platformon tesztelni kell a kritikus műveleteket. Az áruházak jóváhagyási folyamata külön lépés, annak eredményét nem a fejlesztőcsapat dönti el.
Az Ostva iOS- és Android-alkalmazását React Native és Expo használatával fejlesztettük. A mobilapphoz saját backend és adminfelület kapcsolódik, a rendszer Stripe Connect-fizetést és Onfido-személyazonosítást is kezel. A feladat az volt, hogy a foglalás állapota a kapcsolódó rendszerekben is következetes maradjon.
Az Ostva fejlesztésének részleteiA Trinity Guard őrjárat-ellenőrző rendszeréhez React Native-ben készítettük el a mobilalkalmazást, mellé a webes felületet és a backendet. Az őrök okostelefonnal igazolják a járőrözést, külön ellenőrző eszköz nélkül. 2022 vége óta folyamatosan fejlesztjük a rendszert, amely három elkülönített környezetben fut.
A Trinity Guard együttműködés bemutatásaEgy szerszám-webáruházhoz React Native-appot és Node.js háttérszolgáltatásokat készítettünk. A vásárlók a webes fiókjukkal léphetnek be és elérik a rendelési előzményeiket. A meglévő webshop fejlesztőivel együtt alakítottuk ki a kapcsolatot a két rendszer között.
Így kapcsoltuk össze a webshopot és a mobilalkalmazást1Átbeszéljük a működést. Kik használják majd az appot, mit kell elvégezniük benne és milyen rendszerekhez kell csatlakoznia? Ha van specifikáció vagy felületterv, abból indulunk ki.
2Megvizsgáljuk a technikai feltételeket. Külön figyelmet kapnak a platformfüggő funkciók és a külső szolgáltatások. Kiderül, hol használható közös megoldás és hol kell külön iOS- vagy Android-fejlesztés.
3Rögzítjük a vállalt feladatokat. A specifikáció alapján állítjuk össze az ajánlatot és a mérföldköveket. Az app, a backend és az adminfelület feladatai is egyértelműen szerepelnek benne.
4Kipróbálható verziókon haladunk. A fejlesztés közben ellenőrizheted a működést. Az észrevételeket és a közben felmerülő új igényeket a következő lépések előtt egyeztetjük.
A képernyők számánál gyakran többet számít az üzleti logika, az integrációk állapota és a platformspecifikus igények. Egy meglévő, jól dokumentált API más kiindulópont, mint egy olyan rendszer, amelyhez a háttérszolgáltatásokat is most kell elkészíteni.
A közös kódbázis csökkentheti a párhuzamos fejlesztési munkát, de nem teszi feleslegessé a külön tesztelést vagy a platformonkénti finomhangolást. A becslést ezért a konkrét feladatokra adjuk.
Az általános fejlesztési ársávokat a mobilalkalmazás-fejlesztési oldalunkon találod. Ha először a termék induló funkcióit szeretnéd meghatározni, nézd meg az MVP-fejlesztést.
Írd meg, mire használnák az alkalmazást, kell-e iOS- és Android-változat és milyen meglévő rendszerekhez kapcsolódna. Ha már van appod, küldd el az áruházi linkjét és azt, miben kérsz segítséget. Bizalmas hozzáféréseket az első üzenethez nem szükséges csatolnod.
Nem. A React Native natív felületi komponensekkel működő alkalmazások fejlesztésére használható. Egy weboldal WebView-ban történő megjelenítése más megoldás. React Native-appban is lehet indokolt webes tartalmat megnyitni, de ettől az alkalmazás egésze nem válik weboldalba csomagolt felületté. Ez egy jó minőségű cross-platform megoldás, nagy cégek is használják.
Igen. A React Native-et a Meta fejleszti és saját termékeiben is használja, például a Facebook Marketplace-ben és az Ads Managerben. A Microsoft többek között az Outlook és a Teams mobilappjainak egyes részeiben, az Amazon az Amazon Shopping és az Alexa alkalmazásban használja, a Discord pedig az iOS- és az Android-appját is erre építi. Ezek nem mindig teljesen React Native-ben készült alkalmazások: a technológia meglévő natív rendszerekbe is beilleszthető. Mi is ezt használjuk, például az Ostva és a Trinity Guard mobilalkalmazásánál. Források: a React Native hivatalos bemutatóoldala és a Discord mérnöki blogja.
Nem feltétlenül. A működés jelentős része megosztható, de az engedélykérések, egyes integrációk és platformfüggő funkciók külön megoldást igényelhetnek. Az ajánlat előtt ezekkel is számolunk, általános kódmegosztási százalékot nem ígérünk.
Az Expo a React Native-fejlesztést támogató eszközöket és szolgáltatásokat ad. Az Ostvánál is használtuk. A fejlesztői buildbe egyedi natív függőségek is beépíthetők, a lehetőségeket nem szabad összekeverni az Expo Go tesztalkalmazás korlátaival. A választott megoldást mindig az integrációkhoz igazítjuk.
Mert a legtöbb ügyfelünknek ugyanarra a szolgáltatásra van szüksége iPhone-on és Androidon. React Native-val egy kódbázisból készül a két app, így egy új funkció egyszerre kerülhet mindkét platformra. Ugyanazt a nyelvet (JavaScript, TypeScript) használjuk az appban, a React vagy Next.js alapú adminfelületen és a Node.js backendben, ezért egy csapat látja át a teljes rendszert. A buildekhez és a kiadásokhoz Expót használunk. Ha egy projekt olyan eszközfunkciót igényel, amely natív fejlesztéssel oldható meg jobban, Swiftben vagy Kotlinban dolgozunk. Ezen felül egész komplex platformoknál is megbízható és stabil megoldásnak számít.
Mindkettővel készíthető iOS- és Android-alkalmazás nagyrészt közös kódbázisból. React Native-ben JavaScriptet vagy TypeScriptet használunk és a felület alapkomponensei a platform natív elemeire épülnek. Flutterben Dart nyelven készül az alkalmazás, a felületet pedig jellemzően a Flutter saját renderelési rendszere rajzolja ki. Mindkettővel kialakítható egyedi arculat és a platformhoz igazodó felhasználói élmény. Nálunk a React Native illeszkedik a csapat tapasztalatához, a React-alapú webes adminfelületeinkhez és a Node.js háttérrendszereinkhez. A megfelelő technológiát az alkalmazás funkciói, a meglévő rendszerek és a hosszú távú fejlesztési igények alapján érdemes kiválasztani.
A legtöbb üzleti és startup alkalmazásnál, például foglalási, rendelési, piactér- vagy ügyfélportál-appnál ma már alig érezhető különbség. Hátrány ott jelentkezhet, ahol az app nagyon mélyen épül a készülékre vagy az operációs rendszerre: grafikaintenzív játékoknál, 3D- és AR-alkalmazásoknál, folyamatos háttérfeldolgozásnál vagy egyedi hardverkapcsolatoknál. Az okosóra-alkalmazásokhoz és a kezdőképernyő-widgetekhez React Native mellett is natív kód kell. Az új iOS- és Android-funkciók gyakran natívan érhetők el először és a keretrendszer frissítéseit is rendszeresen követni kell. Ilyenkor sem kell az egész appot natívan megírni: a React Native-alkalmazásba Swiftben és Kotlinban írt natív modulok is beépíthetők. Mi is így dolgozunk, ha egy projekt ezt igényli, hibrid módszerekkel.
Igen. Szükség szerint elkészítjük az alkalmazás háttérrendszerét és az üzemeltetői felületet is. Ha ezek már rendelkezésre állnak, először a meglévő rendszerhez való kapcsolódás lehetőségeit vizsgáljuk meg.
Ha iOS-re és Androidra is szükség van az appra, a React Native közös kódbázisa jellemzően kevesebb fejlesztési és karbantartási munkát igényel, mint két külön natív (Swift és Kotlin) alkalmazás. A két külön natív app az alkalmazás saját részének idejét és költségét közel megduplázhatja, a backend és az adminfelület viszont mindkét esetben közös. Tájékoztató ársávjainkat a <a className='underline' href='{{routes.app}}'>mobilalkalmazás-fejlesztési oldalunkon</a> találod, a konkrét ajánlatot a funkciólista átnézése után adjuk meg.
Természetesen, ezek teljesértékű appok. A React Native natív iOS- és Android-buildet készít, a beküldés ugyanúgy az App Store Connecten és a Google Play Console-on keresztül történik, mint egy natív appnál. Kell hozzá fejlesztői fiók, adatkezelési tájékoztató, a jogosultságok indoklása és áruházi képernyőképek. A buildet és a beküldést mi visszük végig, a fiókokkal kapcsolatos teendőket az induláskor egyeztetjük.
