AppDev/mobilfejlesztes.md

Alkalmazásfejlesztés

Segédlet alap expo projekt létrehozására

React native

npx create-expo-app@latest npm run reset-project npx expo start

Natív fejlesztés

Natív eszközökkel történik

Előnyök:

• Jobb teljesítmény:
  • Közvetlen hozzáférés a hardverhez
• Legjobb UI:
  • Natív UI komponensek, gyorsabbak
• Jobb integráció az OP rendszerrel:
  • Teljes hozzáférés a platformspecifikus APIkhoz

Hátrányok

• Magas fejlesztési költségek:
  • Két külön csapat kell IOS, Android
• Hosszabb fejlesztési idő
  • két különböző kódbázis karbantartása ás fejlesztése

Fejlesztőeszközök

• IOS - Swift

Hibrid fejlesztés

A hibrid alkalmazások alapvetően webes technológiára épülnek (HTML , CSS , JS), és egy natív konténeren (Webview) futnak. A legismertebb megoldás a Cordova Ionic vagy Capacitor.

Előnyök

• Gyorsabb fejlesztés
• könnyebb karbantartás
• egyszerűbb tanulási görbe

Hátrányok

• Lassabb teljesítmény
  • Mivel a WebView rendereli az appot az animációk és válaszidők lassabbak lehetnek
• korlátozott hozzáférés a natív API-khoz
  • bár vannak pluginek, nem mindig olyan hatékonyak, mint a natív fejlesztés.

Fejlesztői eszközök

• Ionic + Capacitor (TS, Angular / REACT / Vue)
• Apache Cordova
• Quasar Framework (Vue.js alapú hibrid fejlesztés)

Cross Platform fejlesztés

A cross platform fejlesztés lehetővé teszi, hogy egy kódbázisból natív alkalmazásokat készítsünk Androidra és IOS-re. Ez a megoldás modernebb, mint a hibrid alkalmazások, mivel natív teljesítményt nyújt.

Előnyök

• Közeli natív teljesítmény
  • Az alkalmazások közvetlenül fordulnak le natív kóddá
• Közös kódbázis
  • Egyszer kell megírni, és működnek IOS és-en és Androidon is
• Gyorsabb fejlesztés és olcsóbb fenntartás
  • Nem kell két külön csapat a fejlesztéshez

Hátrányok

• Nem mindig éri el a teljes natív élményt
  • Bizonyos natív funkciók elérése extra fejlesztést igényelhet
• Néha nagyobb méretű alkalmazások
  • A runtime és egyéb könyvtárak növelheti az alkalmazás méretét

Legnépszerűbb cross-platform technológiák

• Flutter (Dart alapú)
• React Native (JS/TS)
• MAUI (C#)
• Kotlin

Fejlesztői környezet kiválasztása és telepítése

1. Natív fejlesztés

• Android Studio
• XCode

2. Hibrid fejlesztés

• VSCode, WebStorm
• Node.js NPM

3. Cross-platform fejlesztés

• Flutter (flutter.dev)
• React Native: Node.js + Expo vagy React Native CLI
• Maui / Xamarin: Visual Studio + .NET SDK

A telepítés után az adott fejlesztői környezet dokumentációját érdemes átnézni a pontos konfigurációkhoz.

Összegzés

• Ha maximális teljesítmény és natív élmény kell akkor natív fejlesztés a legjobb (Swift, Kotlin)
• Ha időt és erőforrást szeretnél spórolni, akkor cross-platform megoldás (Flutter, React Native) jobb választás lehet
• Ha webfejlesztőként szeretnél mobil appokat is készíteni, akkor a hibrid megoldások (Ionic Cordova) jöhet szóba

Komponensek

A react native egy népszerű keretrendszer, amely lehetővé teszi a mobilalkalmazások fejlesztését JS vagy TS nyelvben.

Ebben a részben az alap komponensekről lesz szó

View - konténer komponens

• A Vire a React Native egyik legfontosabb komponense.

• Hasonló a HTML <div> eleméhez

• Konténerként használjuk más komponensek csoportosítására és elrendezésére

  <View style={styles.container}> <Text>Komponens tartalma</Text> </View>

• A style={styles.container} beállítja a megjelenést

• A View egy keretet biztosít, amelyben más komponensek lehetnek.

Text - Szövegmegjelenítés

• A Text komponens segítségével szöveget jeleníthetünk meg.
• Stílusokkal formázható

<Text style={styles.title}>Komponens tartalma</Text>

A text komponens alapértelmezetten blokk szintű, de stílusozható.

A style={styles.title} segítségével testre szabhatjuk a szöveg stílusát

Button - Gomb

• Egy egyszerű gomb, amely műveletek végrehajtására használható

<Button title="nyomj meg" onpress={() => alert("gomb megnyomva")}></Button>

Fejlesztés

Képernyők közötti váltás (Stack.Navigator)

A stack Navigator egy olyan navigációs módszer, amely egymásra helyezett (stackelt) képernyőket kezel. Hasonló a böngésző előre - hátra navigációjához,ahol az új képernyő egy veremre kerülnek.

Hogyan működik:

• Az első képernyő a főképernyő (HomeScreen)
• A további képernyők erre épülnek, és visszaléphetünk az előző képernyőre.

Adatátadás képernyők között (navigation.navigate())

Az átadás egyik képernyőről a másikra a navigation.navigate() metódus segítségével történik. Ezzel egy másik képernyőre ugrunk és átadtunk egy adatot.

<Button title="Tovább" onPress={() => navigation.navigate("Details", {text: userInput})} />

Visszanavigálás (navigation.goBack())

<Button title="Vissza" onPress={() => navigation.goBack()} />

A React alkalmazásokban az állapotkezelés kulcsfontosságú szerepet játszik. Két népszerű megoldás létezik erre:

• Context API (Beépített React funkció)
• Redux (különálló könyvtár)

Mi az a Context API?

A context API egy React beépített állapotkezelője, amely lehetővé teszi az adatok globális tárolását Redux vagy más könyvtárak használata nélkül.

Hogyan működik?

A context API 4 fő részből áll

• createContext()
• Provider() (Context.Provider) - Az adatok megosztására szolgál
• Consumer (useContext()) - Az adatok elérésére szolgál
• State kezelés (useState) - Az értékek dinamikus módosítására szolgál

Mi az a redux

A redux egy globális állapotkezelő könyvtár, amely segít az adatok tárolásában és a komponensek közötti adatkommunikációban.

Használata akkor előnyös, ha az alkalmazásban sok adatot kell kezelni.

Csomagok telepítése

npm install @reduxjs/toolkit react-redux