AppDev/mobilfejlesztes.md

# Alkalmazásfejlesztés
## Segédlet alap expo projekt létrehozására
[React native](https://reactnative.dev/)

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`