[18] Frontend 개발 - Capacitor, Vue + Android

Capacitor를 사용하여 쉽게 앱을 개발해 보도록 하겠습니다.

 

Capacitor
(https://capacitorjs.com)

 

 

Web App에 Capacitor 추가
(https://capacitorjs.com/docs/getting-started#add-capacitor-to-your-web-app)

 

1. capacitor 설치 (터미널에서 실행합니다.)

npm install @capacitor/core @capacitor/cli --save

 

2. Capacitor 초기화 (터미널에서 실행합니다.)

npx cap init

 

App Name : 앱 이름 (변경하지 않으려면 그냥 엔터 키를 누릅니다. 변경하려면 입력합니다.)

 

Package ID : 앱의 패키지 아이디 (변경하지 않으려면 그냥 엔터 키를 누릅니다. 변경하려면 입력합니다.)

 

Ionic 계정 생성

계정을 생성하지 않겠습니다. n를 입력하고 엔터 키를 누릅니다.

 

3. Android / iOS Platforms 설치 (터미널에서 실행합니다.)

npm install @capacitor/android @capacitor/ios --save

 

4. Android / iOS Platforms 추가 (터미널에서 실행합니다.)

npx cap add android
npx cap add ios

 

Android / iOS가 구성됩니다.

 

 

Android / iOS Platforms 추가

1. Vue 빌드 (터미널에서 실행합니다.)

npm run build

 

2. Android / iOS 동기화 (터미널에서 실행합니다.)

npx cap sync

 

Android 프로젝트 오픈
(https://capacitorjs.com/docs/android#opening-the-android-project)

 

3. Android 프로젝트 오픈

npx cap open android

 

Android Studio가 실행됩니다.

[Trust Project] 버튼을 누릅니다.

 

 

4. 실행(Run) 버튼을 눌러 실행합니다. (Emulator가 실행됩니다.)