'IT잡아먹기 > Hybrid' 카테고리의 다른 글
Cordova ionic InAppBrowser (0) | 2015.12.17 |
---|---|
Cordova Ionic controller 추가 (0) | 2015.12.17 |
Cordova AppVersion Plugin (0) | 2015.12.17 |
Cordova 하이브리드앱 샘플코드 (0) | 2015.12.17 |
Cordova install (0) | 2015.12.16 |
Cordova ionic InAppBrowser (0) | 2015.12.17 |
---|---|
Cordova Ionic controller 추가 (0) | 2015.12.17 |
Cordova AppVersion Plugin (0) | 2015.12.17 |
Cordova 하이브리드앱 샘플코드 (0) | 2015.12.17 |
Cordova install (0) | 2015.12.16 |
▶ InAppBrowser
cordova로 만든 앱은 $stateProvider 라는 것이 있어
templateUrl을 지정해주는 곳으로 간다
앱 안에서 다른 브라우저(예를 들면 다음, 네이버, 구글 등)를 열어 볼 수가 없다.
거기에 따른 문제는 InAppBrowser plugin을 설치하면 된다.
▶ cordova plugin add org.apache.cordova.inappbrowser
▶ 간단한 소스
var ref = window.open('http://apache.org', '_blank', 'location=yes');
이런식으로 앱에서 인터넷창을 띄울 수 있다.
앱 속에서 앱의 한 부분으로 다른 브라우저를 띄우고 싶었는데..
검색해도 나오지않았다.
결국 내가 쓴 방법은 iframe
백버튼 등 많은 부분을 수동으로 수정해줘야 하지만 나쁘진않다.
▶ 여기서 한가지!
업데이트를 위해서 해당 스토어로 보내야 하는데 android와 ios의 방법은 다르다.
● android
navigator.app.loadUrl('해당URL주소', {openExternal:true});
navigator.app.exitApp(); // 어플종료
● ios
window.open('해당URL주소','_system');
요즘 ios에 xcode가 업데이트되면서 애뮬에서는 동작하지 않는다. 한참을 찾아보니 device에서는 그냥되더라...
하이브리드앱개발에 필요한 link 정리 (0) | 2015.12.17 |
---|---|
Cordova Ionic controller 추가 (0) | 2015.12.17 |
Cordova AppVersion Plugin (0) | 2015.12.17 |
Cordova 하이브리드앱 샘플코드 (0) | 2015.12.17 |
Cordova install (0) | 2015.12.16 |
▶ 클라이언트 Controller 추가하기
1. 먼저 추가할 js 파일 저장 한다.
2. index.html에 app controller 부분 스크립트 추가
<script src="js/controllers/컨트롤러이름.js"></script>
3. app.js 파일 $stateProvider 추가
하이브리드앱개발에 필요한 link 정리 (0) | 2015.12.17 |
---|---|
Cordova ionic InAppBrowser (0) | 2015.12.17 |
Cordova AppVersion Plugin (0) | 2015.12.17 |
Cordova 하이브리드앱 샘플코드 (0) | 2015.12.17 |
Cordova install (0) | 2015.12.16 |
Cordova로 개발하다보면 마켓 업데이트 등 앱 버전을 필요로 한다.
안드로이드 버전과는 다르다.
App Version Plugin 먼저 설치한다
▶ cordova plugin add uk.co.whiteoctober.cordova.appversion
cordova.getAppVersion.getVersionNumber().then(function (version) {
$('.version').text(version);
});
cordova.getAppVersion.getVersionCode().then(function (code) {
$('.code').text(code);
});
cordova.getAppVersion.getVersionNumber(function (version) {
alert(version);
});
cordova.getAppVersion.getVersionCode(function (code) {
alert(code);
});
하이브리드앱개발에 필요한 link 정리 (0) | 2015.12.17 |
---|---|
Cordova ionic InAppBrowser (0) | 2015.12.17 |
Cordova Ionic controller 추가 (0) | 2015.12.17 |
Cordova 하이브리드앱 샘플코드 (0) | 2015.12.17 |
Cordova install (0) | 2015.12.16 |
자세한 사항
example 1. Java Script Library가 정상적으로 Load 되었는지 확인하는 Sample (event_sample.html)
function onDeviceReady(){
console.log("deviceready");
//use some deviceAPIs
}
document.addEventListener("deviceready", onDeviceReady, false);
example 2. WIFI가 현재 연결되었는지를 판단하는 Sample (deviceStatus_sample.html)
function validSuccessCalback_DS(prop,value) {
alert("The aspect::" + prop.aspect + " property::" + prop.property + " is " + value);
if(value == "undefined")
alert("현재 wifi로 연결 되어 있지 않음");
}
function validErrorCallback_DS(response){
alert("다음 error: " + response.message + ", 발생");
}
navigator.devicestatus.getPropertyValue(validSuccessCalback_DS ,validErrorCallback_DS ,{aspect:"WiFiNetwork", property:"ssid"});
example 3. Native Camera App을 연동하여 사진을 찍는 Sample (captureapi_sample.html)
function captureSuccess(filename) {
console.log("Captured Image path:" + filename);
var imgDest = document.getElementById("captureimg");
imgDest.setAttribute("src", filename + "?" + new Date().getTime());
}
function captureError(err) {
console.log(err.message);
}
// start Image capture
navigator.capture.captureImage(captureSuccess, captureError, {destinationFilename : "file://sdcard/skruntimetest/test.png"});
example 4. Battery 충전 유무가 변경 되었을 때 이를 하이브리드앱에 공지하는 Sample (battery_sample.html)
function onBatteryStatus() {
alert("navigator.battery.charging = " + navigator.battery.charging);
alert("navigator.battery.level = " + navigator.battery.level);
}
navigator.battery.addEventListener("chargingchange", onBatteryStatus,false);
example 5. Native Calendar에 특정 Event를 추가하는 Sample (calendar_sample.html)
function eventAddedCB(event) {
alert("CalendarEvent Added with description = " + event.description
+ "\nid = " + event.id + "\nstart = " + event.start);
}
var calEvent = navigator.calendar.createEvent({
description : 'HTML5 Introduction',
summary : 'HTML5 test ',
start : '2012-07-19 09:00',
end : '2012-07-19 12:00',
recurrence : {
expires : '2012-08-28',
frequency : 'weekly',
interval : 1,
},
reminder : '-3600000',
status : 'tentative',
location : 'SK bundang'
});
navigator.calendar.addEvent(eventAddedCB, errorCallback, calEvent);
example 6. Device SDcard에 저장되어 있는 Audio 파일을 재생하는 Sample (media_sample.html)
function createmediasc (media) {
gMedia2.play();
}
function error (err) {
// do something with resulting error
alert(err.message);
}
navigator.mediamanager.createAudio(createmediasc,error,"file:///sdcard/Music/test2.mp3");
example 7. Email를 송신 하는 Sample (messaging_sample.html)
var msg = navigator.messaging.createMessage(Messaging.TYPE_EMAIL);
msg.to = [ "test@naver.com", "test2@yahho.co.kr" ];
msg.cc = [ "test1@naver.com", "www1@yahho.co.kr" ];
msg.bcc = [ "etetet@naver.com", "hfhfh@yahho.co.kr" ];
msg.body = "test body";
msg.subject = "test subject";
var imagefile = new FileEntry("aa.png","file:///sdcard/skruntime/aa.png");
var imagefile2 = new FileEntry("bbbb.jpg","file:///sdcard/skruntime/bbbb.jpg");
msg.attachments = [imagefile,imagefile2];
try {
navigator.messaging.sendMessage(function sc() {alert("SendMail OK");},
function ec(err) {alert(err.message)}, msg);
} catch (e) {
alert(e.message);
}
example 8. 현재 가속도 정보가 변화 될때 마다 하이브리드앱에 통지 하는 Sample
function acceleration_handler(event) {
console.log("accelerationIncludingGravity.x = " + event.accelerationIncludingGravity.x +
"\n accelerationIncludingGravity.y = " + event.accelerationIncludingGravity.y +
"\n accelerationIncludingGravity.z = " + event.accelerationIncludingGravity.z);
}
window.addEventListener("devicemotion",acceleration_handler , true);
example 9. Device의 pause , resume 상태를 하이브리드앱에 통지 하는 sample (event_sample.html)
function onPause(){
console.log("onPause");
}
function onResume(){
console.log("onResume");
}
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
example 10. Device의 진동을 실행하는 Sample (vibrator_sample.html)
function vibratetime(){
//2 second
navigator.vibrate(2000);
}
function vibratepattern(){
//use pattern
navigator.vibrate([500,30,1000]);
}
example 11. 하이브리드앱을 종료하는 Sample (deviceInteraction_sample.html)
navigator.deviceinteraction.exitApp(); //only Android
example 12. 물리 메뉴버튼을 사용하였을 경우 Menu를 추가/삭제/이벤트를 등록하는 Sample (menu_sample.html)
- 사용자 정의 메뉴를 특정 페이지에서 생성 하였을 경우 페이지를 빠져 나갈시 removeAll()을 반드시 호출하여야 한다.
function MenuCallback1(){
alert("menu1 button click");
}
function addMenu(){
navigator.menumanager.addMenu("menu1",MenuCallback1);
}
function removeMenu(){
navigator.menumanager.removeMenu("menu1");
}
function removeAll(){
//개발자 custom 추가메뉴를 모두 삭제한다.
navigator.menumanager.removeAll();
}
example 13. 물리 메뉴버튼을 사용하였을 경우 Default Menu를 삭제/삽입 하는 Sample (menu_sample.html)
navigator.menumanager.removeMenu("OPENBROWSER"); // 브라우져로 열기 메뉴 삭제
navigator.menumanager.removeMenu("REFRESH"); // 새로고침 메뉴 삭제
navigator.menumanager.removeMenu("EXITAPP"); // 하이브리드앱 종료 메뉴 삭제
navigator.menumanager.addMenu ("OPENBROWSER"); // 브라우져로 열기 메뉴 삽입
navigator.menumanager.addMenu ("REFRESH"); // 새로고침 메뉴 삽입
navigator.menumanager.addMenu ("EXITAPP"); // 하이브리드앱 종료 메뉴 삽입
example 14. NFC TAG를 읽고 하이브리드앱에 이를 통지하는 Sample (nfc_sample.html)
function readTagCallback(obj){
alert(obj.tag);
}
function setNFCUseTrue(){
if(navigator.nfc.isNFCSupport()){
navigator.nfc.setNFCUse(true);
}
navigator.nfc.setReadTagCallback(readTagCallback);
}
function setNFCUseFalse(){
navigator.nfc.setNFCUse(false);
}
example 15. NFC TAG와 connection 후에 특정 data를 I/O하는 Sample (nfc_sample.html)
function transceiveCallback(tag){
alert("tagtype::" + tag.type + " tag.transceive:::" + tag.transceive);
}
function testSC(tag){
alert("tagtype::" + tag.type + " tag.transceive:::" + tag.transceive[0]);
if(tag.transceive[0] == "6F060102030405069000"){
navigator.nfc.transceive(transceiveCallback,transceiveErrorCallback,["00CA000005"]);
}
}
function transceiveErrorCallback(e){
alert(e);
}
function Select_Test_Applet(){
navigator.nfc.transceive(testSC,transceiveErrorCallback,
[
"00A4040006112233445566", //IsoDep
]);
}
하이브리드앱개발에 필요한 link 정리 (0) | 2015.12.17 |
---|---|
Cordova ionic InAppBrowser (0) | 2015.12.17 |
Cordova Ionic controller 추가 (0) | 2015.12.17 |
Cordova AppVersion Plugin (0) | 2015.12.17 |
Cordova install (0) | 2015.12.16 |
1. Node js 설치 : http://nodejs.org/
2. Git source code 설치 : http://git-scm.com/
3. cordova install
4. project create
5. cordova platform add android
6. 설치가 잘되면 이미 Path 설정 완료, 그렇지 않으면 ant 설치 및 Android studio 설치
ADT, ANT, JAVA 설치
해당 가이드를 가보면 아주 친절하게 설명되어 있다.
http://www.oracle.com/ 오라클 공식 홈페이지
자바 jdk 파일을 다운로드 할 수 있다.
7. 환경변수 설정
ADT_HOME : C:\adt-bundle-windows-x86_64-20140702\sdk
ANT_HOME : C:\apache-ant-1.9.4
JAVA_HOME : C:\Program Files\Java\jdk1.7.0_65
Path : %JAVA_HOME%\bin;%ANT_HOME%\bin;%ADT_HOME%\tools;%ADT_HOME%\platform-tools;
각 path 는 폴더 명으로 위에 적은 예와 다를 수 있기에 잘보고 적어주길..
8 Android SDK Manager update & install
보통 처음 환경을 세팅하면 update 및 install을 하기에 시간이 엄청 많이 걸린다.
adt 폴더 또는 eclipse 에 Android SDK Manager 실행
필요한 부분 설치
설치 후 cordova platform add android
cordova run android
완료
> cordova run android 폰 또는 애뮬로 바로 실행
> cordova build android 빌드만
android를 ios로 같이 쓰임
하이브리드앱개발에 필요한 link 정리 (0) | 2015.12.17 |
---|---|
Cordova ionic InAppBrowser (0) | 2015.12.17 |
Cordova Ionic controller 추가 (0) | 2015.12.17 |
Cordova AppVersion Plugin (0) | 2015.12.17 |
Cordova 하이브리드앱 샘플코드 (0) | 2015.12.17 |