• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC BY-SA 4.0
• Web: https://szit.hu

• 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

ng new app01

cd app01
ng serve

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

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

npx cap init

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;

• 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.

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

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

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

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.

ng build --prod
npx cap sync

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

Megnyithatjuk a projektet Android Studioban vagy Xcode-ban:

npx cap open ios
npx cap open android

Kattintsunk a futtatás gombra.

• https://betterprogramming.pub/ (2023)