336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
1. javascript
1.1. 공통
1.2 Server Side
1.3 Client Side

2. Cordova 

3. Android

 

'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
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

 

▶ InAppBrowser

cordova로 만든 앱은 $stateProvider 라는 것이 있어

templateUrl을 지정해주는 곳으로 간다

앱 안에서 다른 브라우저(예를 들면 다음, 네이버, 구글 등)를 열어 볼 수가 없다.

 

거기에 따른 문제는 InAppBrowser plugin을 설치하면 된다.

▶ cordova plugin add org.apache.cordova.inappbrowser

 

▶ 간단한 소스

var
ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert(event.url); }); 

 

이런식으로 앱에서 인터넷창을 띄울 수 있다.

 

앱 속에서 앱의 한 부분으로 다른 브라우저를 띄우고 싶었는데..

검색해도 나오지않았다.

결국 내가 쓴 방법은 iframe

백버튼 등 많은 부분을 수동으로 수정해줘야 하지만 나쁘진않다. 

 

▶ 여기서 한가지!

업데이트를 위해서 해당 스토어로 보내야 하는데 android와 ios의 방법은 다르다.

● android

navigator.app.loadUrl('해당URL주소', {openExternal:true});
navigator.app.exitApp(); // 어플종료

● ios

window.open('해당URL주소','_system');

요즘 ios에 xcode가 업데이트되면서 애뮬에서는 동작하지 않는다. 한참을 찾아보니 device에서는 그냥되더라...

'IT잡아먹기 > Hybrid' 카테고리의 다른 글

하이브리드앱개발에 필요한 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
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

 

▶ 클라이언트 Controller 추가하기

 

1. 먼저 추가할 js 파일 저장 한다.

2. index.html에 app controller 부분 스크립트 추가

<script src="js/controllers/컨트롤러이름.js"></script>

3. app.js 파일 $stateProvider 추가

 

'IT잡아먹기 > Hybrid' 카테고리의 다른 글

하이브리드앱개발에 필요한 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
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

 

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);
});
 

'IT잡아먹기 > Hybrid' 카테고리의 다른 글

하이브리드앱개발에 필요한 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
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

 

자세한 사항

 

https://github.com/cornerstonewdk/cornerstone-framework/blob/master/doc/3.%20Runtime/RT_5.webapp_sample_code.md

 

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
                      ]);
}
 

'IT잡아먹기 > Hybrid' 카테고리의 다른 글

하이브리드앱개발에 필요한 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
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

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로 같이 쓰임

 

'IT잡아먹기 > Hybrid' 카테고리의 다른 글

하이브리드앱개발에 필요한 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

+ Recent posts