모바일 하이브리드 웹의 수요가 아주 급격하게 늘어나고 있습니다.
코르도바 , 아이오닉 , 리액트 , 플루터 ...
오늘은 그중에 최근에 사용했던 아파치 코르도바에 대한 간단 설치 포스팅을 진행하겠습니다.
0. 기본프로그램 설치
- nodejs 설치
- cordova 설치 : npm install -g cordova
(node package module) 로 전역 글로벌 옵션으로 코르도바를 설치 한다.
- Android Build 를 위한 AndroidStudio 설치
- Gradle 설치
- JAVA 설치 (path 등록 확인)
1-1. Cordova Project 생성 (ANDROID)
> npm install cordova-icon -g // cordova-icon 설치 (app icon)
> cordova create testCordova com.ch1.testCordova TestCordova
> cd testCordova
> cordova platform add android@8.0.0 // android platform 추가
> cordova plugin add cordova-plugin-whitelist
> cordova plugin add cordova-plugin-network-information // network 연결정보 plugin
> cordova plugin add cordova-plugin-device // device 정보 plugin
> cordova plugin add cordova-plugin-remote-injection // remote url에서 cordova plugin 사용 plugin
> cordova plugin add cordova-plugin-fcm-with-dependecy-updated@3.2.0 // FCM push plugin
> cordova plugin add wifiwizard // wifi 정보 plugin
> cordova plugin add cordova-plugin-geolocation // GeoLocation(GPS) Plugin
> cordova plugin add cordova.plugins.diagnostic // 위치 및 블루투스 on/off 여부 확인
(버젼 27.+ 이상만 지원)
> cordova plugin add cordova-plugin-ibeacon
> cordova plugin add cordova-plugin-splashscreen // Splashscreen plugin
> cordova plugin add cordova-plugin-app-version // app version check
> cordova plugin add cordova-plugin-x-toast // Toast
> cordova plugin add cordova-plugin-file-transfer // file upload/download
> cordova plugin add cordova-plugin-inappbrowser // window.open
> cordova plugin add cordova-plugin-camera
> cordova-icon // App Icon 생성
> cordova build android //오류발생시댓글참조
> cordova run android
> cordova build android —release 완료1-2. Cordova Project 생성 (IOS)
> npm install -g cordova-icon // cordova-icon 설치 (app icon)
> cordova create testCordova com.ch1.testCordova TestCordova
> cd testCordova
> cordova platform add ios // ios platform 추가
> cordova plugin add cordova-plugin-whitelist
> cordova plugin add cordova-plugin-network-information // network 연결정보 plugin
> cordova plugin add cordova-plugin-device // device 정보 plugin
> cordova plugin add cordova-plugin-remote-injection // remote url에서 cordova plugin 사용 plugin
> cordova plugin add cordova-plugin-fcm-with-dependecy-updated // push plugin
> cordova plugin add wifiwizard // wifi 정보 plugin (SSID 정보 확인용)
> cordova plugin add cordova-plugin-geolocation // GeoLocation Plugin
> cordova plugin add cordova.plugins.diagnostic // 위치 및 블루투스 on/off 여부 확인
> cordova plugin add cordova-plugin-ibeacon
> cordova plugin add cordova-plugin-splashscreen // Splashscreen plugin
//v.1.1.0 부터 추가
> cordova plugin add cordova-plugin-app-version // app version check
> cordova plugin add cordova-plugin-x-toast // Toast
> cordova plugin add cordova-plugin-file-transfer // file upload/download
> cordova plugin add cordova-plugin-inappbrowser // window.open
> cordova plugin add cordova-plugin-camera
> cordova-icon // App Icon 생성
> cordova prepare ios
> cordova build ios
> cordova run ios- ios의 경우 cordova-icon을 실행해서 생성된 icon의 경로와 파일명을 config.xml에 작성한다.
- ios의 경우 splash 이미지를 1개로 사용할 경우 Default@2x~universal~anyany.png 를 이미지 파일명으로 하여 config.xml에 작성한다.
<splash src="Default@2x~universal~anyany.png" />- ios WiFi SSID를 접근하기 위한 셋팅 : XCode에서 Capabilities 수정 (Access Wifi Information, HotSpot and Network Extension)
cordova build ios -- --buildFlag="-UseModernBuildSystem=0"
2. Config.xml 내용 추가
<icon src="icon.png" />
<!-- 화면 이동을 허용할 링크의 형식 지정(모든 형태에 대한 허용) -->
<allow-navigation href="*" />
<!-- 외부 링크 클릭시 현재 Cordova 화면에 머물러 있도록 함 -->
<preference name="stay-in-webview" value="true" />
<!-- remote url에서 cordova plugin 사용 -->
<preference name="CRIInjectFirstFiles" value="www/js/init.js" />
## Splash 관련하여 아래 내용이 추가되어야 함
<platform name="android">
<splash src="res/screen/android/splashscreen.png" density="port-hdpi"/>
<splash src="res/screen/android/splashscreen.png" density="port-ldpi"/>
<splash src="res/screen/android/splashscreen.png" density="port-mdpi"/>
<splash src="res/screen/android/splashscreen.png" density="port-xhdpi"/>
<splash src="res/screen/android/splashscreen.png" density="port-xxhdpi"/>
</platform>
<platform name="ios">
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
<splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
<splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<splash src="res/screen/ios/Default@2x~universal~comany.png" />
<splash src="res/screen/ios/Default@2x~universal~comcom.png" />
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" />
</platform>3. 실 웹주소 지정
<content src="https://XXX.XXX.XXX.XXX/mobile/index.htm" />실제 정상 동작하는 웹시스템의 접속 정보를 기입
4. APK 파일
>cordova build android파일 생성위치 : \platforms\android\app\build\outputs\apk\debug
5. plug in 설치 (toast )
>cordova plugin add cordova-plugin-x-toast
>cordova prepare
>cordova build android
현재는 하이브리드 웹앱을 구현할수 있는 방법이 정말 다양하게 많다..
가장 인지도 있고 많이 사용하며 어마어마한 커뮤니티를 형성하고 있는 react Naitive
그러나 이쪽에서 계속 바라본 입장 및 실제 개발을 하는 입장에서
생각해본다면 향후 1~2년 사이에 전혀 다른것이 나오지 않는다면 Flutter가 막강한 대세가 될듯하다.
'개발 > IT정보' 카테고리의 다른 글
| GITEA 설정 (0) | 2023.06.30 |
|---|---|
| GIT BASH 초기 설정 (0) | 2023.06.28 |
| 구글 시크릿모드 사용 (0) | 2020.12.14 |
| 서울시 공공 와이파이 까치온 무료!! (0) | 2020.12.11 |
| IaaS , PaaS , SaaS 궁금해!~? (0) | 2020.12.11 |