AppDev/mobilfejlesztes.md

Alkalmazásfejlesztés

React native

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>