APP Cordova를 사용한 하이브리드앱 패키징
페이지 정보
본문
1. JAVA(자바) 환경설정을 확인합니다
> java --version
java 11.0.16 2022-07-19 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.16+11-LTS-199)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.16+11-LTS-199, mixed mode)
2. Android Studio SDK Tools 확인
메뉴 > Tools > SDK Manager 에서
Android SDK Build-Tools 33 의 설치 항목중에서 아래를 확인합니다
33.0.0 은 체크해지
32.0.0 체크
31.0.0 체크
3. 안드로이드폰 개발자옵션 활성화
https://developer.android.com/studio/debug/dev-options?hl=ko
4. 작업폴더 이동
> cd /Users/happyjung/workspace
4-2. 작업폴더 조회
> ls
work_hello work_test
5. 작업폴더 생성
create 하면 폴더가 생성 됨
> cordova create 프로젝트폴더명 도메인형식ID 앱이름
Creating a new cordova project.
ex:) cordova create work_tttt com.happyjung.tttt testapp
5-2. 작업폴더로 이동
> cd work_tttt
6. 제이쿼리 모바일 프레임워크 추가
https://jquerymobile.com 접속후 최신버전 라이브러리 파일 다운로드
work_helloapp / www 아래에 jquery.mobile 폴더 생성후 업로드
7. cordova Android 플랫폼 설치
> cordova platform add android
Using cordova-fetch for cordova-android@^10.1.1
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: com.happyjung.tttt
Name: testapp
Activity: MainActivity
Android target: android-30
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@10.1.2
빌드 테스트
> cordova build android
8. cordova iOS 플랫폼 설치
> cordova platform add ios
Using cordova-fetch for cordova-ios@^6.2.0
Adding ios project...
Creating Cordova project for the iOS platform:
Path: platforms/ios
Package: com.happyjung.tttt
Name: testapp
iOS project created with cordova-ios@6.2.0
빌드 테스트
> cordova build ios
... 중략 ...
** BUILD SUCCEEDED **
9. 플러그인
기본 플러그인은 https://cordova.apache.org/plugins/ 에서 검색후 사용가능하지만,
https://npmjs.com 에서 검색후 사용하는것이 좋습니다
npmjs.com 에서 검색방법 : 검색어 입력란에 cordova 와 함께 플러그인명을 함께 넣고 검색합니다
예) 위치기능 관련 플러그인 검색시 geolocation 의 앞글자를 검색창에 cordova geo
9-1. 원시그널 솔루션 (푸시기능 사용)
onesignal 최신버전이 맥북과 충돌하네요
https://www.npmjs.com/package/onesignal-cordova-plugin 에서 배포된 버전에서 3.1.1 을 설치합니다
> cordova plugin add onesignal-cordova-plugin@3.1.1
Installing "onesignal-cordova-plugin" for android
Subproject Path: CordovaLib
Subproject Path: app
Installing "onesignal-cordova-plugin" for ios
Running command: pod install --verbose
[!] The `testapp [Debug]` target overrides the `LD_RUNPATH_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-testapp/Pods-testapp.debug.xcconfig'. This can lead to problems with the CocoaPods installation
[!] The `testapp [Release]` target overrides the `LD_RUNPATH_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-testapp/Pods-testapp.release.xcconfig'. This can lead to problems with the CocoaPods installation
Adding onesignal-cordova-plugin to package.json
9-2. 원시그널 플러그인 3.2.0 설치 오류 해결방법
> cordova plugin add onesignal-cordova-plugin
Installing "onesignal-cordova-plugin" for android
Subproject Path: CordovaLib
Subproject Path: app
Installing "onesignal-cordova-plugin" for ios
Running command: pod install --verbose
Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5
[!] The `testapp [Debug]` target overrides the `LD_RUNPATH_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-testapp/Pods-testapp.debug.xcconfig'. This can lead to problems with the CocoaPods installation
[!] The `testapp [Release]` target overrides the `LD_RUNPATH_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-testapp/Pods-testapp.release.xcconfig'. This can lead to problems with the CocoaPods installation
Adding onesignal-cordova-plugin to package.json
오류의 원인으로 표시된 것을 해결하기 위해 아래와 같이 입력합니다
> sudo gem pristine ffi --version 1.15.5
Password:
Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5
Restoring gems to pristine condition...
Building native extensions with: '--enable-libffi-alloc'
This could take a while...
Restored ffi-1.15.5
앞서 설치한 onesignal 을 제거합니다
> cordova plugin rm onesignal-cordova-plugin
Uninstalling onesignal-cordova-plugin from android
Subproject Path: CordovaLib
Subproject Path: app
Uninstalling onesignal-cordova-plugin from ios
Running command: pod install --verbose
[!] The Podfile does not contain any dependencies.
Removing "onesignal-cordova-plugin"
Removing onesignal-cordova-plugin from package.json
안정버전인 3.1.1 을 설치합니다
> cordova plugin add onesignal-cordova-plugin@3.1.1
Installing "onesignal-cordova-plugin" for android
Subproject Path: CordovaLib
Subproject Path: app
Installing "onesignal-cordova-plugin" for ios
Running command: pod install --verbose
[!] The `testapp [Debug]` target overrides the `LD_RUNPATH_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-testapp/Pods-testapp.debug.xcconfig'. This can lead to problems with the CocoaPods installation
[!] The `testapp [Release]` target overrides the `LD_RUNPATH_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-testapp/Pods-testapp.release.xcconfig'. This can lead to problems with the CocoaPods installation
Adding onesignal-cordova-plugin to package.json
10. 플러그인
10-1. 앱 실행시 풀스크린 이미지표시
> cordova plugin add cordova-plugin-splashscreen
10-2. 기본컨텐츠 표시용 웹뷰로 사용
> cordova plugin add cordova-plugin-inappbrowser
10-3. 디바이스 아이디 및 모델명 등 디바이스 정보 조회시 사용
> cordova plugin add cordova-plugin-device
10-4. 모바일 OS의 스타일링에 맞는 alert, confirm 메시지창 사용
> cordova plugin add cordova-plugin-dialogs
10-5. 앱의 버전정보를 조회 및 사용 필요시 작용
> cordova plugin add cordova-plugin-app-version
10-6. 앱의 고유이름을 지정하여 외부앱이나 웹에서 호출시 사용
> codova plugin add cordova-plugin-customurlshceme --variable URL_SCHEME=앱이름
참고자료 :
https://github.com/EddyVerbruggen/Custom-URL-scheme
https://m.blog.naver.com/aramjo/221158735889
11. 설치된 플러그인 확인
> cordova plugin ls
cordova-plugin-app-version 0.1.14 "AppVersion"
cordova-plugin-device 2.1.0 "Device"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-inappbrowser 5.0.0 "InAppBrowser"
cordova-plugin-splashscreen 6.0.2 "Splashscreen"
onesignal-cordova-plugin 3.1.1 "OneSignal Push Notifications"
12. 앱 빌드 테스트
12-1. Android 앱 빌드 테스트
> cordova build android
12-2. Android 앱 빌드 / 설치 : 실제 디바이스에 설치
> cordova run android
12-3. iOS 앱 빌드
> cordova build ios
13. 앱아이콘 및 스플래시스크린 이미지 경로 생성
work_tttt
├ node_modules
├ platfroms
├ plugins
├ res <- 생성 - 앱아이콘 및 스플래시스크린 이미지 경로
│ ├ icon
│ │ ├ android
│ │ │ ├ icon-36.png 등
│ │ └ ios
│ │ ├ icon-20.png 등
│ ├ screen <- 이미지 크기 = 1242 x 2208 px
│ │ ├ android
│ │ │ └ screen.png
│ │ └ ios
│ │ ├ Default@2x~iphone~anyany.png
│ │ ├ Default@2x~iphone~comany.png
│ │ ├ Default@2x~iphone~comcom.png
│ │ ├ Default@3x~iphone~anyany.png
│ │ ├ Default@3x~iphone~anycom.png
│ │ ├ Default@3x~iphone~comcom.png
│ │ ├ Default@2x~ipad~anyany.png
│ │ └ Default@2x~ipad~comany.png
│ └ icon-1024.png
├ www
├ config.xml
├ package.json
└ package-lock.json
13-2. 앱 아이콘 만들기
앱 아이콘은 안드로이드와 iOS 버전에 따라서 사이즈가 다르며, 스마트폰의 해상도에 따라 여러개의 사이즈로 만들어 적용해야함
규격 : 1024 x 1024 px 1개 (라운드없는 사각형) png파일
아래 사이트에서 간편하게 여러가지 크기의 앱아이콘 이미지를 생성해서 사용합니다
https://www.gieson.com > Icon Slayer > Custom Sizes: 36,48,50,57,72,98,110,114,144,192,512 > Generate > Export
다운받은 icon.zip 에서 sizes 폴더에 생성된 icon 을 android 폴더와 ios 폴더에 각각 복사합니다
14. 소스수정
work_tttt
├ node_modules
├ platfroms
│ ├ android
│ │ ├ app
│ │ │ ├ build
│ │ │ │ ├ ...
│ │ │ │ ├ intermediates
│ │ │ │ │ ├ ...
│ │ │ │ │ ├ merged_assets
│ │ │ │ │ │ └ debug
│ │ │ │ │ │ └ out
│ │ │ │ │ │ └ www
│ │ │ │ │ │ ├ ...
│ │ │ │ │ │ ├ js
│ │ │ │ │ │ │ └ index.js
│ │ │ │ │ │ └ ...
│ │ │ │ │ └ ...
│ │ │ │ └ ...
│ │ │ ├ ...
│ │ │ ├ src
│ │ │ │ └ main
│ │ │ │ ├ assets
│ │ │ │ │ └ www
│ │ │ │ │ ├ ...
│ │ │ │ │ ├ js
│ │ │ │ │ │ └ index.js
│ │ │ │ │ └ ...
│ │ │ │ ├ java
│ │ │ │ │ ├ ...
│ │ │ │ │ ├ org
│ │ │ │ │ │ └ apache
│ │ │ │ │ │ └ cordova
│ │ │ │ │ │ ├ ...
│ │ │ │ │ │ └ inappbrowser
│ │ │ │ │ │ ├ InAppBrowser.java
│ │ │ │ │ │ ├ InAppBrowserDialog.java
│ │ │ │ │ │ └ InAppChromeClient.java
│ │ │ │ │ └ ...
│ │ │ │ └ ...
│ │ │ └ ...
│ │ └ ...
│ └ ios
│ ├ build
│ │ ├ emulator
│ │ │ ├ ...
│ │ │ ├ 앱이름.app
│ │ │ │ ├ ...
│ │ │ │ ├ www
│ │ │ │ │ ├ js
│ │ │ │ │ │ └ index.js
│ │ │ │ │ └ ...
│ │ │ │ └ ...
│ │ │ └ ...
│ │ ├ js
│ │ │ └ index.js
│ │ └ ...
│ ├ ...
│ └ www
│ ├ ...
│ ├ js
│ │ └ index.js
│ └ ...
├ plugins
├ res
├ www
│ ├ ...
│ ├ js
│ │ └ index.js <- 개발 진행 시 수정 필요
│ └ ...
├ config.xml
└ ...
15. 앱 빌드 테스트
15-1. Android 앱 빌드 테스트
> cordova build android
15-2. Android 앱 빌드 / 설치 : 실제 디바이스에 설치
> cordova run android
15-3. iOS 앱 빌드
> cordova build ios
참고자료
https://the6inch.tistory.com/5
댓글목록
등록된 댓글이 없습니다.