[Front-End]Cordova Basic

1. 개념

   • 하이브리드 앱이란?
     • HTML5, CSS3, JavaScript 와 같은 웹기술을 사용하여 네이티브 앱을 제작하는 모바일 프레임워크
     • phoneGap, Orchestra, Appspresso, etc
     • 모바일웹의 제작및 유지보수의 용이성과 네이티브앱의 단말 고유기능(카메라, 위치정보 등)을 이용하기 위해서 사용.

2. 환경설정

   • node JS 설치 (npm 사용)
     • https://nodejs.org/en/ 에서 다운로드 및 설치
   • 코드로바 설치
     • $ sudo npm install -g cordova
   • x-code 설치
     • appStore 를 이용한 설치
     • 첨부파일 키체인 등록(더블클릭!!)
   • android studio 설치
     • https://developer.android.com/studio/index.html 에서 다운로드 후 설치

3. 기본 프로젝트 생성 및 실행(Terminal command)

   • 프로젝트 생성할 폴더로 이동

     • $ cordova create [appName] [package] [iconName]
       • ex) cordova create basicapp com.iparking.basicapp basicapp
     • 위의 명령어를 입력하면 하위폴더에 appName의 폴더가 생성된다.

   • 생성된 프로젝트의 구조 및 역활

     제목 없음

   • 생성한 프로젝트로 이동

     • $ cd [appName]

   • 프로젝트의 플렛폼 추가(ios, android)

     • $ cordova platform add ios
     • $ cordova platform add android

   • 프로젝트 실행

     • ios : finder에서 생성프로젝트의 “platforms/ios/[appName].xcodeproj” 실행후 빌드

     • android : Android Studio 실행후 “Open an existing Android Studio project” 실행"

       https://s3-us-west-2.amazonaws.com/secure.notion-static.com/466fb7c0-29be-41c7-9a2e-6f0b44a0d17f/untitled

     • “platforms/android”을 선택 후 빌드

   • 개발순서

     • www폴더 작업후 > platform update > platform 빌드
       • $ cordova platform update ios
       • $ cordova platform update android

---

1. 플러그인추가
   • API 의 상세 설명은 아래의 링크참조(https://cordova.apache.org/docs/en/latest/guide/overview/index.html)
   • Battery Status
     • $ cordova plugin add cordoba-plugin-battery-status
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-battery-status/index.html
   • 기본 장치 정보 (장치 API):
     • $ cordova plugin add cordova-plugin-device
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/index.html
   • 가속도계, 나침반, 및 지리적 위치:
     • $ cordova plugin add cordova-plugin-device-motion
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device-motion/index.html
     • $ cordova plugin add cordova-plugin-device-orientation
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device-orientation/index.html
     • $ cordova plugin add cordova-plugin-geolocation
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html
   • 카메라, 미디어 재생 및 캡처:
     • $ cordova plugin add cordova-plugin-camera
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html
     • $ cordova plugin add cordova-plugin-media-capture
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-media-capture/index.html
     • $ cordova plugin add cordova-plugin-media
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-media/index.html
   • 장치 또는 네트워크 (파일 API) 액세스 파일:
     • $ cordova plugin add cordova-plugin-file
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html
     • $ cordova plugin add cordova-plugin-file-transfer
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/index.html
   • 대화 상자 또는 진동 알림:
     • $ cordova plugin add cordova-plugin-dialogs
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-dialogs/index.html
     • $ cordova plugin add cordova-plugin-vibration
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-vibration/index.html
   • 연락처:
     • $ cordova plugin add cordova-plugin-contacts
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-contacts/index.html
   • 세계화:
     • $ cordova plugin add cordova-plugin-globalization
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-globalization/index.html
   • Splashscreen:
     • $ cordova plugin add cordova-plugin-splashscreen
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html
   • 새로운 브라우저 윈도우 열기 (InAppBrowser):
     • $ cordova plugin add cordova-plugin-inappbrowser
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html
   • 콘솔 디버깅:
     • $ cordova plugin add cordova-plugin-console
       • https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-console/index.html
   • Plugin 한번에설치
     • $ cordova plugin add cordova-plugin-device cordova-plugin-network-information cordova-plugin-battery-status cordova-plugin-device-motion cordova-plugin-device-orientation cordova-plugin-geolocation cordova-plugin-camera cordova-plugin-media-capture cordova-plugin-media cordova-plugin-file cordova-plugin-file-transfer cordova-plugin-dialogs cordova-plugin-vibration cordova-plugin-contacts cordova-plugin-globalization cordova-plugin-splashscreen cordova-plugin-inappbrowser cordova-plugin-console cordova-plugin-whitelist cordova-plugin-statusbar
2. WWW 폴더 수정(web contents 수정시)
   • 폴더 수정후 업데이트 명령 필수.
   • $ cordova platform update ios
   • $ cordova platform update android
3. x-code에서 아래 콘솔에 plugin load fail이 뜰경우
   • ios platform 제거후 재등록후 빌드
     • $ cordova platform rm ios
     • $ cordova platform add ios
4. Custom Plugin (native 영역)
   • https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html

---