요약
https://github.com/m0dch3n/vue-cli-plugin-cordova
Create Vue App
$ npm install -g @vue/cli $ vue create my-app $ cd my-app $ npm install -g cordova # If cordova is not already installed
Add the plugin to your vue app.
$ vue add cordova
Usage
Prepare
$ npm run cordova-prepare # prepare for build (you can run this command, when you checkouted your project from GIT, it's like npm install)
Android
$ npm run cordova-serve-android # Development Android $ npm run cordova-build-android # Build Android $ npm run cordova-build-only-www-android # Build only files to src-cordova
IOS
$ npm run cordova-serve-ios # Development IOS $ npm run cordova-build-ios # Build IOS $ npm run cordova-build-only-www-ios # Build only files to src-cordova
OSX
$ npm run cordova-serve-osx # Development OSX $ npm run cordova-build-osx # Build OSX $ npm run cordova-build-only-www-osx # Build only files to src-cordova
Browser
$ npm run cordova-serve-browser # Development Browser $ npm run cordova-build-browser # Build Browser $ npm run cordova-build-only-www-browser # Build only files to src-cordova
Electron
$ npm run cordova-serve-electron # Development Electron $ npm run cordova-build-electron # Build Electron $ npm run cordova-build-only-www-electron # Build only files to src-cordova
소스
https://github.com/codedesign-webapp
https://github.com/codedesign-webapp/pwa-about
이 책으로 배울 수 있는 14가지 핵심 주제
이 책에 실린 다양한 실습을 따라 하다 보면 다음과 같은 14가지 핵심 주제를 자연스럽게 터득할 수 있습니다. 이러한 기술은 모던 웹과 모바일 앱을 개발할 때 필수이므로 프런트엔드 개발자로 성장하는 데 폭넓은 경험을 제공합니다.
1. ES6+ 필수 기능 2. 뷰, 뷰티파이 기초 & 고급 3. 구글 머티리얼 디자인 스펙 2 4. 반응형 웹 프로그래밍 5. 파이어베이스 실시간 DB 6. 워크박스 런타임 캐시 7. 모바일 하드웨어 제어 8. 이메일-구글 인증 9. 푸시 알림 10. 오프라인 동기화 11. 아파치 코르도바로 하이브리드 앱 만들기 12. PWA → 네이티브 앱 변환 13. 구글 플레이 스토어에 배포 14. 서버리스 프로그래밍
책 자세히 살펴보기
2. 책의 내용
'Do it! 프로그레시브 웹앱(PWA) 만들기' 책에서 다룰 내용을 간략히 정리해 보았습니다.
| 첫째마당 |
전 세계적으로 주목받는 프로그레시브 웹앱의 특징을 자세히 살펴봅니다.
- 헬로월드! 프로그레시브 웹앱
- 자바스크립트 ES6+
- 순수 자바스크립트와 PWA
| 둘째마당 |
현대화된 웹앱 작업을 쉽게 수행하려면 뷰 프레임워크를 잘 활용해야 합니다.
- 뷰, Vuex, Vue Router, SPA(Single Page Application)
- 뷰티파이와 머티리얼디자인(스펙2)
- 뷰와 PWA
| 셋째마당 |
실전 응용이 가능하도록 수준별로 다양한 상황의 앱을 설계하고 준비했습니다.
- 구글 Workbox, 파이어베이스
- 실전 상황의 6가지 앱 프로젝트 : To-Do 앱 만들기, 사진 갤러리 앱 만들기, 카메라 갤러리 앱 만들기, 로그인 서비스 만들기, 푸시 알림 서비스 만들기, 오프라인 동기화 기능 만들기
| 넷째마당 |
PWA를 구글 플레이에도 배포시키는 방법의 이야기가 시작됩니다.
- 하이브리드앱과 코르도바
- PWA와 안드로이드앱
- 구글 플레이 스토어에 앱 등록하기
상세한 목차와 예제 파일 다운로드 방법은 아래 링크를 참고하세요.
'Do it! 프로그레시브 웹앱 만들기' 책의 전체 목차입니다.
'Do it! 프로그레시브 웹앱 만들기' 책의 전체 예제 파일 다운로드 방법입니다.
'Do it! 프로그레시브 웹앱 만들기' 책의 전체 미션 파일 다운로드 방법입니다.
3. 라이브 데모
책을 통해서 만들게 될 PWA 앱의 라이브 데모입니다. 실전 상황의 총 6가지 앱을 라이브로 직접 실행할 수 있으며 더 나아가 안드로이드 앱으로 변환된 PWA 앱을 구글 플레이에서 직접 다운로드 받아 테스트할 수 있습니다.
'Do it! 프로그레시브 웹앱(PWA) 만들기' 책의 PWA 앱 예제 라이브 데모
'Do it! 프로그레시브 웹앱(PWA) 만들기' 책의 안드로이드앱(하이브리드앱) 예제의 라이브 데모
지금 바로 실행해서 테스트하시려면 아래 링크를 활용해 보세요.
PWA Live Demo
- 반가워요! PWA by JS : https://pwa-hello-js.web.app/
- 반가워요! PWA by Vue : https://pwa-hello-vue.web.app/
- 사진 갤러리 : https://pwa-gallery-pic.web.app/
- To-Do 리스트 : https://pwa-to-do.web.app/
- 카메라 갤러리 : https://pwa-camera.web.app/
- 구글 로그인 서비스 : https://pwa-auth-login.web.app/
- 푸시 알림 서비스 : https://pwa-notification-push.web.app
- 오프라인 동기화 : https://pwa-offline-sync.web.app/
학습 목표 6 가지
1. PWA 코드를 그대로 적용하여 하이브리드 앱으로 변환하는 과정을 익힌다.
2. 파이어베이스를 활용하여 실시간 DB 등의 서버단 기능도 그대로 활용한다.
3. 뷰와 뷰티파이어를 활용하여 네이티브 앱과 거의 같은 디자인과 사용자 경험을 구현한다.
4.PWA 와 다르게 모바일 기기에 의존하는 기능은 코르도바 플러그인 기능을 활용한다.
5.안드로이드 앱을 기준으로 서명, 정렬 등의 방법을 익힌다.
6. 구글 플레이 스토어에 배포하는 방법을 익힌다.
네이트브 앱을 개발할 때 모바일 기기의 네이티브 기능을 사용하는 것이 가장 어렵습니다. 크로스 플랫폼 프레임워크라 할지라도 플랫폼마다 특성이 다르므로 맞춤형
작업이 필요한데, 이런 작업을 하다 보면 네이트브 개발과 다름없어집니다.
하지만 표준 웹 API 를 사용하여 모바일 기기의 네이티브 기능을 처리하면 PWA 와 코르도바 앱을 같은 코드 베이스로 만들 수 있습니다.
https://macaronics.net/m04/vue/view/2064
1. 개발에 필요한 프로그램 준비하기
다음 명령을 입력하여 코르도바를 설치합니다. 코르도바는 APK 파일을 만들어 안드로이드 기기에서 테스할 때 필요하며 한 번만 설치하면 됩니다.
npm install -g cordova
2.프로그램 실습 준비하기
vue 프로젝트에서 실해해도 되지만 여기서는
PWA 로 개발한 프로젝트 내에서 cordova 플로그인을 추가 하여 진행하였다.
vue add cordova
코르도바 옵션 설정
1. Name of folder where cordova should be installed:
기본 경로 [src-cordova] 선택 , 코르도바 관련 파일이 생성될 폴더 지정
2.ID off the app:
기본값 그대로 [com.vue.example.app] 선택
앱이 고유한 이름을 가질 수 있도록 도메인 형식으로 작성
나중에 설정에서 변경할 수 있으므로 기본값 사용
3.Name of the app:
기본값 그대로 [VueExampleAppName] 선택
앱 제목 입력, 나중에 설정에서 변경할 수 있으므로 기본값 사용
4.Select Platform:
[Android] 선택
배포할 플랫폼 선택, 아이폰과 맥에 배포하고 싶다면 ios, osx,선택 가능
Browser 는 브라우저에서 디버깅과 테스트를 지원하는 플랫폼
코르도바로 생성된 프로젝트 구조
3.안드로이드 SDK 설치하기
Android 스튜디오 설치
bookmark_border
클릭 몇 번으로 Android 스튜디오를 설정하세요. 먼저 최신 버전의 Android 스튜디오를 다운로드합니다.
Windows
Windows에 Android 스튜디오를 설치하려면 다음 단계를 따르세요.
.exe 파일을 다운로드한 경우(권장) 파일을 더블클릭하여 실행합니다.
.zip 파일을 다운로드한 경우:
- .zip의 압축을 풉니다.
- android-studio 폴더를 Program Files 폴더에 복사합니다.
- android-studio > bin 폴더를 엽니다.
- studio64.exe(64비트 컴퓨터) 또는 studio.exe(32비트 컴퓨터)를 실행합니다.
- Android 스튜디오의 설정 마법사에 따라 권장 SDK 패키지를 설치합니다.
다음 동영상은 권장 .exe 다운로드를 위한 설정 절차의 각 단계를 보여줍니다.
새로운 도구와 기타 API를 사용할 수 있게 되면 Android 스튜디오에서 팝업으로 알려줍니다. 업데이트를 수동으로 확인하려면 Help > Check for Update를 클릭합니다.
다음 링크 주소를 참조해서 실행 => 안드로이드 스튜디오 설치 및 환경변수 셋팅
*코르도바로 화면 UI를 디자인할 때는 hello-hybrid.png 파일의 위치가 중요합니다. 이미지 복사 위치에 따른 사용법을 정리하면 다음과 같습니다.
1) 이미지 복사 위치
./assets 폴더에 이미지를 넣는다. 현재 폴더를 기준으로 하므로 점(.) 을 사용한다. 예제에서는 간단히 이 방법을 사용한다.
<img src="./assets/hello-hybrid.png"/>
2) 이미지 복사 위치
public/img 폴더에 이미지를 넣는다. 코르드보 빌드 후에 는 file://android_assets/www/ 기준으로 바뀌므로 점(.) 과 슬래시(/)를 모두 빼야 한다.
<img src="img/hello-hybrid.png" />
샘플 src/App.vue 예
<template>
<v-app dark>
<v-main>
<!-- fill-height는 브라우저 높이를 100%, 수직으로 가운데 정렬시킴 -->
<v-container fluid fill-height>
<v-row>
<!-- text-center는 수평 가운데 정렬 -->
<v-col cols="12" class="text-center">
<!-- 타이포 스타일은 title, 글자색은 흰색으로 설정 -->
<h1 class="title white--text">반가워요!</h1>
<p class="caption mb-0">by Cordova</p>
<img src="./assets/hello-hybrid.png" alt="" />
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
created () {
// 배경색을 다크모드로 함
this.$vuetify.theme.dark = true;
}
}
</script>
4. 스플래시 화면과 아이콘 이미지 준비하기
다음 사이트에서 아이콘을 생성 한다.
https://apetools.webprofusion.com/#/tools/imagegorilla
스플래시 설정
스플래시 화면이란 하이브리드 앱을 로딩하는 동안 텍스트, 이미지, 로고 등의 그래픽 요소를 이용해서 어떤 앱인지 사용자에게 빠르게 소개하는 페이지 입니다.
일반적으로 는 전체 화면을 가득히 채워서 표시합니다.
앱이 처음 실행 될 때 스플래시 화면을 띄우려면 cordova-plugin-splashcreen 이라는 플러그인을 설치해야 합니다. 코르도바 명령어를 입력할 때 plugin add 다음에
플러그인이 이름을 지정하면 됩니다.
$ cd src-cordova/ $ cordova plugin add cordova-plugin-splashscreen
만약에 개별적으로 스플래시 스크린 플러그인넣을 이미지가 존재하면 이 단계는 건너띄어도 됩니다.
안드로이드 플랫폼의 스플래시 스크린 이미지는 앞서 vue add cordova 명령어로 코드로바 플러그인을 설치할 때 해상도에 따라
다음의 폴더에 자동으로 생성됩니다.
프로젝트/src-cordova/platforms/android/app/arc/main/res
5. config.xml 설정하기
참조 :
Cordova(코르도바) 실행 로딩화면 Splashscreen(스플래시 스크린) 적용
프로젝트를 빌드하면 코르도바 루트 폴더의 config.xml 에 설정된 내용이 각 플랫폼의 매니페스트 파일에 자동으로 반영됩니다. 예를 들어 안드로이드 플랫폼이라면
AndroidMainfest.xml 파일에 자동으로 반영됩니다. 따라서 플랫폼별로 일일이 설정하지 않아도 config.xml 파일만 통합해서 관리하면 됩니다.
config.xml 파일을 열면 여러 엘리먼트와 어트리뷰트가 있지만 중요한 것만 다음과 같이 입력값을 수정합니다.
config.xml
기존
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.vue.example.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>VueExampleAppName</name>
<description>Sample Apache Cordova App</description>
<author email="dev@cordova.apache.org" href="https://cordova.apache.org">
Apache Cordova Team
</author>
<!-- this hook will point your config.xml to the DevServer on Serve -->
<hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
<content src="index.html" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
</widget>
변경=>
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.vue.example.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>반가워요! Hybrid by Cordova</name>
<description>Sample Apache Cordova App</description>
<author email="dev@cordova.apache.org" href="https://cordova.apache.org">
Apache Cordova Team
</author>
<!-- this hook will point your config.xml to the DevServer on Serve -->
<hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" />
<content src="index.html" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<platform name="android">
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashShowOnlyFirstTime" value="true"/>
<icon density="ldpi" src="res/icon/android/ldpi.png"/>
<icon density="mdpi" src="res/icon/android/mdpi.png"/>
<icon density="hdpi" src="res/icon/android/hdpi.png"/>
<icon density="xhdpi" src="res/icon/android/xhdpi.png"/>
<icon density="xxhdpi" src="res/icon/android/xxhdpi.png"/>
<icon density="xxxhdpi" src="res/icon/android/xxxhdpi.png"/>
<!-- Portrait -->
<splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png"/>
<splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png"/>
<splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png"/>
<splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png"/>
<splash density="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png"/>
<splash density="port-xxxhdpi" src="res/screen/android/splash-port-xxxhdpi.png"/>
<!-- Landscape -->
<!--
<splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png"/>
<splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png"/>
<splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png"/>
<splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png"/>
<splash density="land-xxhdpi" src="res/screen/android/splash-land-xxhdpi.png"/>
<splash density="land-xxxhdpi" src="res/screen/android/splash-land-xxxhdpi.png"/>
-->
</platform>
</widget>
id="com.vue.example.app" 앱의 고유한 ID 설정
앱이 고유한 이름을 가질 수 있도록 도메인 형식으로 지어 줍니다. 구글 플레이 스토어에 업로드할 때 다른 앱과 구분하는 용도로 사용합니다.
앱의 제목 설정
홈 화면 아이콘 등에서 앱의 제목으로 사용
AndroidMainfest.xml 직접 설정하기
AndroidMainfest.xml 파일은 앱의 속성에 관한 내용을 설정할 수 있습니다. 이 파일은 /platforms/android/app/src/main 폴더에 생성됩니다.
그런데 직접 확인해서 수정해야 할 부분도 있습니다. 예를 들어 안드로이드 앱을 빌들할 때 SDK 버전 번호가 낮으면 구글 플레이 스토어에 업로드할 수 없습니다.
그래서 SDK 매니저로 최신 파일로 업그레이드한 후 android:targetSdkVersion 값을 요구하는 값으로 변경해야 할 때 직접 수정하면 됩니다.
src-cordova/platforms/android/CordovalLib/src/AndroidManifest.xml
<uses-sdk android:minSdkVersion="integer"
android:targetSdkVersion="integer"
android:maxSdkVersion="integer" />
6. 모바일 기기의 USB 디버깅 설정하기
참조 => 삼성 갤럭시에서 개발자 모드 켜기(USB 디버깅 허용)
디버깅을 설정했다면 VScode 의 터미널 창에서 adb devices 명령을 실행하여 잘 연결 되었는지 확인합니다. 여기서는 adb 는 안드로이드 디버깅용 네트워크
유틸리티 입니다. 다음 그림처럼 나타나 면
$ adb devices List of devices attached 5c66ac49 device emulator-5554 device
기기가 USB 로 접속되었다는 의미입니다. 물론 기기 번호는 저속한 기기의 고유 번호이므로 다를 수 있습니다.
7. 개발자 모드로 테스트하기
PWA 때와 똑같이 핫 리로드(hot reload) 기능을 사용할 수 있습니다. 코드의 문법이나 로직에 오류가 없는지 가볍게 확인할 때 먼저 이용합니다.
npm run serve
오류가 없는 것이 확인되면 이번에는 모바일 기기에서 테스트하겠습니다. 방법은 웹팩을 이용해서 src 와 public 폴더에서 작업한 내용을 src-cordova 의 www 폴더에 배포용으로
준비해야 합니다. 이 작업은 npm run cordova-prepare 명령으로 실행합니다. 이 명령은 config.xml 의 설정 내용을 플랫폼별로 매니페스트 파일에 반영하고 www 폴더에 빌드를
위한 최종 파일 준비합니다.
npm run cordova-prepare
=>빌드 준비 처리
USB 로 연결된 안드로이드 기기에서 디버그 모드로 빌드해서 실행 결과를 바로 테스트하고 싶다면 src-cordova 폴더로 이동한 후 다음과 같이
cordova run android 명령을 실행합니다.
$ npm run cordova-serve-android 또는 $ cd src-cordova $ cordova run android
주의 : jDK 17 에서는 현재 오류간 난다. pc 환경 변수를 jdk 11 에서 실행할것
오류 원인 찾느라 상당히 애 먹었는데. 주의할것
오류 : 스플래시 아이콘 설정 잘못하면 오류
$ cordova run android
Source path does not exist: res/icon/android/hdpi.png
댓글 ( 4)
댓글 남기기