Cordova
- 오픈소스 하이브리드 앱 개발 도구
- 웹 기술을 이용해 개발
- 윈도우, OS X, 리눅스에서 사용 가능
- 안드로이드, iOS, Mac OS X, 윈도우 등 멀티 플랫폼 지원
- 플러그인을 통한 확장
- Cordova 의 한계
- 네이티브 앱에 비해 성능이 떨어짐
- 플러그인 개발의 어려움
Cordova의 작동원리
Cordova 개발환경
- NodeJS / Cordova
- 플랫폼 별 요구사항
- 안드로이드: JDK, 안드로이드 SDK
- JDK 다운로드 및 설치
- 안드로이드 스튜디오 설치
- https://developer.android.com/studio
- Android Virtual Device 체크
- Cordova 설치
- > npm install –g cordova
- > cordova –version
- 새 Cordova 프로젝트 생성
- > cordova create hello com.example.hello HelloWord
- > cd hello
- 안드로이드 에뮬레이터 생성
- > More Actions > Virtual Device Manager > Create virtual device > Pixcel2 > download >
- > cordova platform add android@8.0.0
- > cordova run android
- Android SDK의 경로를 찾지 못하는 문제
- ANDROID_SDK_ROOT=undefined (recommended setting)
- > More Actions > SDK Manager > Android SDK Location 확인
- set ANDROID_SDK_ROOT=C:\Users\user\AppData\Local\Android\Sdk
- Gradle 을 찾지 못하는 문제
- Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper.
- 다운로드 : https://services.gradle.org/distributions/gradle-7.2-bin.zip
- set PATH=%PATH%;C:\SDK\gradle-7.2\bin;
- javac 를 찾지 못하는 문제
- Failed to run “javac -version”, make sure that you have a JDK version 8 installed.
- set PATH=%PATH%;C:\SDK\jdk1.8.0_321\bin;
- Android SDK의 경로를 찾지 못하는 문제
- Android Emulator가 띄워져 있는 상태에서 실행
- 영구적 PATH 등록 : 설정 > 정보 > 고급 시스템 설정 > 환경 변수 > 시스템 변수 > path 에 추가
- C:\SDK\gradle-7.2\bin
- C:\SDK\jdk1.8.0_321\bin
코도바 플러그인 설치 및 사용
Cordova 플러그인 설치
Cordova 플러그인
- NodeJS 의 NPM 과 같이 Cordova 의 기능을 확장
- 웹 앱에서 OS 기능을 사용하려면 플러그인이 필요
- OS 종속 코드와 자바스크립트 인터페이스로 이루어짐
Cordova 플러그인 설치 및 삭제
- 설치 :
cordova add –save {플러그인명} - 목록 확인 :
cordova plugin list - 삭제 :
cordova remove {플러그인명} - 플러그인 검색
https://cordova.apache.org/docs/en/latest/
Cordova 배터리 상태 플러그인
- 디바이스의 배터리 잔량 확인
- batterystatus 이벤트 -> status.level
- 디바이스의 충전상태 확인
- batterystatus 이벤트 -> status.isPlugged
- 디바이스의 배터리 경고 확인
- batterylow 이벤트
- batterycritical 이벤트
- 플러그인 설치
> cordova plugin add –save cordova-plugin-battery-status
index.html
<body>
<div>
<span id="battery">100</span>%
</div>
<script src="cordova.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/index.js"></script>
</body>
deviceready 이벤트
- Cordova 플러그인이 모두 로드 된 후 발생
- window.addEventListener 함수를 통해 등록
- 플러그인은 deviceready 이벤트 발생 이후 사용하여야 함
index.js
var battery = $("#battery");
window.addEventListener('deviceready', function() {
window.addEventListener('batterystatus', function(status) {
battery.text(status.level);
}, true);
}, true);
- Virtual Device Manager > AVD 실행
- > cordova run android
Cordova 카메라 플러그인
- 디바이스의 카메라로 사진을 찍어 불러오기
- 디바이스의 이미지 라이브러리에서 사진 불러오기
- getPicture 함수
camera.getPicture(success, error, options)
• success : 사진을 불러오는데 성공했을 때 실행되는 콜백함수
• error : 사진 불러오기에 실패했을 때 실행되는 콜백함수
• options : 사진을 가져오기 위한 option 객체
- getPicture 함수
- 카메라 플러그인 설치
> cordova plugin add –save cordova-plugin-camera - 설치 플러그인 확인
> cordova plugin list
<button id="btnTakePic">사진 찍기</button>
<button id="btnLoadPic">사진 불러오기</button>
<div>
<img id="image"/>
</div>
index.js
var battery = $("#battery");
var image = $("#image");
options = {
quality: 80,
correctOrientation: true
}
window.addEventListener('deviceready', function() {
window.addEventListener('batterystatus', function(status) {
battery.text(status.level);
}, true);
$("#btnTakePic").click(load(1));
$("#btnLoadPic").click(load(2));
}, true);
function load(sourceNum) {
return function() {
navigator.camera.getPicture(
function(imageUri) {
image.attr('src', imageUri);
},
function(error) {
alert('에러발생!');
},
{
sourceType: sourceNum,
...options,
}
);
}
}
펼침연산자
{
sourceType: sourceNum,
...options,
}
아래와 동일
{
sourceType: sourceNum,
quality: 80,
correctOrientation: true
}
- 배열이나 객체를 피연산자로 받음
- 피연산자로 전달된 배열이나 객체를 펼침
- 다른 배열이나 객체에 값을 복사해 추가할 경우 사용
var arr = [1, 2, 3];
console.log([...arr, 4, 5]);
var obj = { a:0, b:2 }
console.log({...obj, c:5});