[[oktatas:web:angular|< Angular]]

====== Angular - Android alkalmazás ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Szükséges =====

  * Node.js : https://nodejs.org/en/
  * Angular CLI: https://angular.io/cli
  * Mobilfejlesztés beállítása: https://capacitorjs.com/docs/getting-started/environment-setup

===== Angular alkalmazás létrehozása =====


  ng new app01



  cd app01
  ng serve


===== Capacitor =====

Ha nem vagyunk az alkalmazás gyökérkönyvtárában:
  cd app01

Telepítsük a Capacitort:
  npm install @capacitor/core
  npm install @capacitor/cli


===== Capacitor konfigurációs fájl készítése =====

Létre kell hozni a Capacitor konfigurációs állományát:

  npx cap init

<code javascript capacitor.config.ts>
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'app01',
  webDir: 'dist/app01',
  bundledWebRuntime: false
};

export default config;
</code>


  * appId: A csomagolt alkalmazás egyedi azonosítója.
  * appName: Az alkalmazás oka.
  * webDir: A weboldal hova lett lefordítva.
  * bundledWebRuntime: A Capacitor futtató rész legyen-e másolva.


Ügyeljen arra, hogy a webDir tulajdonság a megfelelő könyvtárra mutasson.


===== Natív iOS és Android csomagok hozzáadása =====

Telepítenünk kell az ios vagy android csomagot:

<code>
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
</code>


Például, az npx cap android parancs az Angular projekthez egy Android projektet ad.


===== Build =====

Az ng build paranccsal készítsük el az Angular alkalmazást, az npx cap paranccsal szinkronizáljuk az Angular projektet az Android projekttel.


<code>
ng build --prod
npx cap sync
</code>

Az npx cap sync parancs a build parancs tartalmát az android/ios könyvtárba másolja.

===== Android Studio vagy Xcode megnyitás =====

Megnyithatjuk a projektet Android Studioban vagy Xcode-ban:

<code>
npx cap open ios
npx cap open android
</code>


===== Futtatás =====


Kattintsunk a futtatás gombra.

===== Linkek =====

  * [[https://betterprogramming.pub/how-to-convert-your-angular-application-to-a-native-mobile-app-android-and-ios-c212b38976df|https://betterprogramming.pub/]] (2023)