인 생

몸으로 욕하는데도 찰지넹!! ㅋㅋㅋㅋ

다음에는 뭘로 욕 할지 기대 되는구만 ㅋㅋㅋ

기근이햄 + 용겸이햄

ㅋㅋㅋㅋㅋ

용겸이햄 vs 나

스쳤는데 KO...

준포햄인듯ㅋ

** 참고 사이트 **

PhoneGap 사이트의 API : http://docs.phonegap.com/plugin-apis/

튜토리얼 사이트 : http://www.w3ii.com/cordova/default.html

두가지 파일(index.html, index.js)만 수정하면 된다. 

  : index.html은 프로젝트 디렉터리로 이동해서 www 폴더를 열면 존재하고

  : index.js는 .js가 붙은거 보면 알겠지만 www폴더 밑에 js폴더 내에 존재한다.

작업은 html 만드는 것처럼 하면 된다.

[ Example ] gps 사용하기(안드로이드)

1. plugin 추가

  >cordova plugin add cordova-plugin-geolocation

2. index.html 문서에 버튼 두개 추가

  <button id = "getPosition">현재 위치</button>

  <button id = "watchPosition">실시간 위치</button>

3. index.js 문서에서 버튼값 찾아서 이벤트 걸기(onDeviceReady: function() { (여기에 주든지) }

  initialize: function() {

        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);

        document.getElementById("getPosition").addEventListener("click", getPosition);

        document.getElementById("watchPosition").addEventListener("click", watchPosition);

    }

4.  index.js 문서에서 이벤트 함수 구현 (제일 끝에 추가)

  function getPosition() {

var options = {

      enableHighAccuracy: true,     // gps 사용

      maximumAge: 3600000        // 위치값 보관 시간

   }

   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +

         'Longitude: '         + position.coords.longitude         + '\n' +

         'Altitude: '          + position.coords.altitude          + '\n' +

         'Accuracy: '          + position.coords.accuracy          + '\n' +

         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +

         'Heading: '           + position.coords.heading           + '\n' +

         'Speed: '             + position.coords.speed             + '\n' +

         'Timestamp: '         + position.timestamp                + '\n');

   };

   function onError(error) {

      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');

   }

}

function watchPosition() {

   var options = {

      maximumAge: 3600000,    // 위치값 보관 시간

      timeout: 3000,                // 3초간 위치 추적

      enableHighAccuracy: true, // gps 사용

   }

   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +

         'Longitude: '         + position.coords.longitude         + '\n' +

         'Altitude: '          + position.coords.altitude          + '\n' +

         'Accuracy: '          + position.coords.accuracy          + '\n' +

         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +

         'Heading: '           + position.coords.heading           + '\n' +

         'Speed: '             + position.coords.speed             + '\n' +

         'Timestamp: '         + position.timestamp                + '\n');

   };

   function onError(error) {

      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');

   }

}

** 참고 사이트 **

PhoneGap 사이트의 API : http://docs.phonegap.com/plugin-apis/

튜토리얼 사이트 : http://www.w3ii.com/cordova/default.html

두가지 파일(index.html, index.js)만 수정하면 된다. 

  : index.html은 프로젝트 디렉터리로 이동해서 www 폴더를 열면 존재하고

  : index.js는 .js가 붙은거 보면 알겠지만 www폴더 밑에 js폴더 내에 존재한다.

작업은 html 만드는 것처럼 하면 된다.

[ Example ]

카메라 촬영 후 이미지를 보여주는 기능을 구현한다고 예를 들면,

1. index.html 문서에 버튼 추가

  <button id = "cameraTakePicture">사진촬영</button> 

2. index.js 문서에서 버튼값 찾아서 이벤트 주기 (onDeviceReady: function() { (여기에 주든지) }

  initialize: function() {

        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);        

        document.getElementById("cameraTakePicture").addEventListener("click", cameraTakePicture);

  }

3. index.js 문서에 이벤트 구현 (제일 밑에 추가)

function cameraTakePicture() {

    navigator.camera.getPicture(onSuccess, onFail, { 

        quality: 50,

        destinationType: Camera.DestinationType.DATA_URL,

        correctOrientation: true

    });

    function onSuccess(imageData) {

        var image = document.getElementById('myImage');

        image.src = "data:image/jpeg;base64," + imageData;

    }

    function onFail(message) {

        alert('Failed because: ' + message);

    }

}

** navigator.camera.getPicture(onSuccess, onFail, { (여기에 입력되는 값들은 아래부분 참고) }

http://docs.phonegap.com/en/4.0.0/config_ref_images.md.html 참조

생성한 프로젝트 폴더 내에 config.xml 파일을 수정하면 된다.

위 페이지 들어가서 보면 기본 문법이 아래와 같다고 나와있다.

 <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />

src는 필수 입력 사항이고, 나머지는 옵션이라고 적혀있다.

src에는 아이콘 파일의 위치를 쓰는데 시작지점은 config.xml의 파일이 있는 곳과 동일하다.

(사이트 설명은 프로젝트 디렉토리를 참조한다는데 그냥 config.xml의 위치와 동일하는 표현이 좀 더 쉬운거 같아서..ㅋㅋ)

폰 OS별로 예제 정리가 잘되어있다.

Amazon Fire OS

     <platform name="amazon-fireos">
              <icon src="res/android/ldpi.png" density="ldpi" />
              <icon src="res/android/mdpi.png" density="mdpi" />
              <icon src="res/android/hdpi.png" density="hdpi" />
              <icon src="res/android/xhdpi.png" density="xhdpi" />
     </platform>

Android

     <platform name="android">
              <icon src="res/android/ldpi.png" density="ldpi" />
              <icon src="res/android/mdpi.png" density="mdpi" />
              <icon src="res/android/hdpi.png" density="hdpi" />
              <icon src="res/android/xhdpi.png" density="xhdpi" />
     </platform>

Blackberry10

     <platform name="blackberry10">
              <icon src="res/bb10/icon-86.png" />
              <icon src="res/bb10/icon-150.png" />
     </platform>

See BlackBerry's documentation for targeting multiple sizes and locales. [http://developer.blackberry.com/html5/documentation/icon_element.html]

Firefox OS

     <platform name="firefoxos">
              <icon src="res/ff/logo.png" width="60" height="60" />
     </platform>

iOS

     <platform name="ios">
              <!-- iOS 8.0+ -->
              <!-- iPhone 6 Plus  -->
              <icon src="res/ios/icon-60@3x.png" width="180" height="180" />
              <!-- iOS 7.0+ -->
              <!-- iPhone / iPod Touch  -->
              <icon src="res/ios/icon-60.png" width="60" height="60" />
              <icon src="res/ios/icon-60@2x.png" width="120" height="120" />
              <!-- iPad -->
              <icon src="res/ios/icon-76.png" width="76" height="76" />
              <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
              <!-- iOS 6.1 -->
              <!-- Spotlight Icon -->
              <icon src="res/ios/icon-40.png" width="40" height="40" />
              <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
              <!-- iPhone / iPod Touch -->
              <icon src="res/ios/icon.png" width="57" height="57" />
              <icon src="res/ios/icon@2x.png" width="114" height="114" />
              <!-- iPad -->
              <icon src="res/ios/icon-72.png" width="72" height="72" />
              <icon src="res/ios/icon-72@2x.png" width="144" height="144" />
              <!-- iPhone Spotlight and Settings Icon -->
              <icon src="res/ios/icon-small.png" width="29" height="29" />
              <icon src="res/ios/icon-small@2x.png" width="58" height="58" />
              <!-- iPad Spotlight and Settings Icon -->
              <icon src="res/ios/icon-50.png" width="50" height="50" />
              <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
     </platform>

Tizen

     <platform name="tizen">
              <icon src="res/tizen/icon-128.png" width="128" height="128" />
     </platform>

Windows Phone8

     <platform name="wp8">
              <icon src="res/wp/ApplicationIcon.png" width="99" height="99" />
              <!-- tile image -->
              <icon src="res/wp/Background.png" width="159" height="159" />
     </platform>

Windows8

     <platform name="windows8">
              <icon src="res/windows8/logo.png" width="150" height="150" />
              <icon src="res/windows8/smalllogo.png" width="30" height="30" />
              <icon src="res/windows8/storelogo.png" width="50" height="50" />
     </platform>

안드로이드로만 테스트 해봤는데 잘적용되었다.

다만, 아이콘 사이즈 조절이 되게 하고 싶었으나..

그냥 설정해놓은 이미지 사이즈 그대로 가져간다. 적용이 안되는듯...

좀 더 구글링 해보면 방법이 있을 것도 같지만.. 귀찮아서 이만..

[기본 셋팅]

1. 자바 SDK // 2. Node.js // 3. 안드로이드 SDK - http://developer.android.com // 4. GIT(옵션) - 플러그인 설치할 때 필요

Node.js 에서 진행

("Node.js command prompt" 프로그램을 실행해서 진행)

- 폰갭 설치
  >npm install -g phonegap

- 코르도바 설치
  >npm install -g cordova

1. 프로젝트 생성(폴더 디렉토리 생성)

  (1) 기본으로 생성

    >cordova create (프로젝트명)

    >cordova create helloWorld

  (2) 패키지명과 앱이름까지 생성할 경우

    >cordova create (프로젝트명) (패키지명) (어플이름)  

    >cordova create helloWorld kr.co.dothome.pjs movie  

2. 프로젝트로 이동

  >cd helloWorld

3. 프로젝트 위치를 열고 미리 작성해 놓은 웹페이지(css, img, js, lib, html 등)를 복사 붙여넣기를 한다.

  (helloWorld 폴더를 찾아가보면 www 라는 폴더가 있는데 거기를 열어보면 된다.)

4. 안드로이드 플랫폼을 추가 (모바일 OS 별로 추가 할 수 있다.)

  >cordova platform add android

  (helloWorld 폴더 내에 android 폴더(네이티브앱과 비슷한 구조)와 platforms.json 파일이 생성된다.)

5. 안드로이드 프로젝트 빌드

  (1) 빌드

    >cordova build android

  (2) 빌드 + 설치(폰과 케이블 연결 필요)

    >cordova run android

6. ...\projects\helloWorld\platforms\android\build\outputs\apk 안에 [android-debug.apk] 파일이 생성된다.

7. 폰에 넣어서 .apk 설치하고 실행한다.

** 빌드가 안될 경우 **

안드로이드 스튜디오 다운로드 페이지(https://developer.android.com/studio/index.html)에서 

아래쪽 [명령줄 도구만 다운로드]로 이동하여 해당하는 OS의 .zip 파일을 다운 받는다. (아래 이미지 참고)

** 개발단계와 배포단계의 keystore가 다르다는 점을 유의해야한다. **

- 개발단계에서의 빌드 명령어 (배포로 사용 불가)

  >cordova build android

    : ...\projects\helloWorld\platforms\android\build\outputs\apk 안에 [android-debug.apk] 파일 생성됨.

- 배포단계에서의 명령어

  >cordova build android --release

    : ...\projects\helloWorld\platforms\android\build\outputs\apk 안에 [android-release-unsigned.apk] 파일 생성됨.

 (1) release용 keystore 만든다.

    (keytool 명령어는 jdk(bin폴더)에 포함 되어있다. 환경변수 -> 사용자변수 부분에 jdk\bin 폴더 위치를 등록한다.)

      >keytool -genkey -v -keystore release.keystore -alias myMovie -keyalg RSA -keysize 2048 -validity 10000

  -genkey : key 생성

  -v : 생성과정출력

  -keystore : keystore 파일명

  -alias : 별명

  -keyalg : key생성 알고리즘

  -keysize : key 크기

  -validity : 유효기간(일단위)

  (2) .apk에 .keystore를 sign한다.

    >jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release.keystore android-release-unsigned.apk myMovie

  (3) 정렬 (최적화)

    (zipalign명령어는 C:\Users\(사용자명)\AppData\Local\Android\sdk\build-tools\(최근버전) 에 있다. 이 위치를 위와 같이 사용자 정의 변수에 추가해준다.)

    >zipalign -v (바이트수) (빌드 후 생성 되는 파일 명) (최종파일명)

    >zipalign -v 4 android-release-unsigned.apk movie2.apk

  위 단계를 마친 후 배포한다.(market에 올린다.)