130 lines
4.1 KiB
Markdown
130 lines
4.1 KiB
Markdown
# Alkalmazásfejlesztés
|
|
[React native](https://reactnative.dev/)
|
|
|
|
## 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>`
|
|
|
|
|
|
|
|
|