하이브리드앱

 

 

2017년 04월 04일 

 

교재는 2014년 7월 출판 되었다. 따라서 업데이트 된 것들이 있으니 주의 할것.

 

폰갭 업데이트

C:\Users\choi>npm i -g phonegap to update

 

 

 

1. 최신 안드로이드 네이티브 앱 빌드하려면 먼저 최신 안드로이드 SDK가 설치되어 있어야 한다.

설치되어 있다면 최신버전으로 업데이트 한다.

 

 

2. 안드로이드 네이티브앱으로 빌드하는 방법은 폰갭과 코르도바 두 가지 방법을 사용할 수 있습니다.

폰갭은 * .apk 파일을 디버그 용도와 서명(sign) 을 자동으로 해주지만 배포용은 작성하지 못합니다.

반명에 코르도바는 배포용은 만들어주지만 서명과 정렬(align) 은 수작업으로 해주어야 합니다.

여기서 서명은 인증된 개발자가 앱에 서명하는 것을 말하며 정렬은 앱이 안드로이드 기기에서 최소의 

메모리를 차지하도록 최적화시키는 것을 의미합니다.

따라서  폰갭으로 빌드하여 기기에서 테스트 하고 최종적으로 코르도바로 빌드하여 구글 플레이 스토어에 

업로드 해주면 됩니다. 폰갭을 이용하여 빌드하는 방법은 다음과 같습니다.

에는 빌드할 플랫폼 이름을 입력하면 되는데 현재 폰갭은 안드로이드, ios, 윈도우폰8, 블랙베리

10의 4가지를 지원 합니다.

 

phonegap build

=> platform : androdi, ios, wp8, Blackberry 10

 

C:\Users\choi\projects\vu>phonegap build android

 

 

3. vu > platforms > android > ant-build 폴더로 이동해 보면 HelloWorld-debug.unaligned.apk 이라는 파일이 생긴 것을

알수 있습니다. 이 파일은 안드로이드 기기에 직접 복사해도 설치되는 파일이 입니다. 다만 디버그 용도이기 때문에

구글 플레이 스토어에는 업로드 할 수 없습니다.

 

 

 >>>>> 다음과 같은 오류 문제일 경우

C:\Users\choi\projects\vu>cordova build android --release
ANDROID_HOME=G:\Android-20170206\Android\sdk1\
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_111\bin
Error: Could not find gradle wrapper within Android SDK. Might need to update yo
ur Android SDK.
Looked here: G:\Android-20170206\Android\sdk1\tools\templates\gradle\wrapper

https://forum.ionicframework.com/t/error-could-not-find-gradle-wrapper-within-android-sdk-might-need-to-update-yo-ur-android-sdk/22056/6

나는 같은 오류가있다 : 내가 이온을 만들 때 안드로이드 sdk 내에서 gradle 래퍼를 찾을 수 없습니다,하지만 해결됐다. Android SDK 도구 패키지 4.6k를 다운로드 하고 파일을 C : \ Users \ CURRENT_USER \ AppData \ Local \ Android \ sdk에 복사하고 ionic / cordova를 다시 빌드합니다.

결국 tools\templates 에서 파일을 없기때문에 에러가 났다.

SDK 도구 패키  다운로드 해서 sdk 에 붙여넣기 한다.

 

1.

JAVA_HOME 에서는 bin 으로 끝나면 안된다.

PATH 설정시 %JAVA_HOM%\bin\으로 설정을 해라

 

2. 

안드로이드 SDK 환경변수 설정.

ANDROID_HOME

G:\Android-20170206\Android\sdk1\

 

[시스템 변수 : JAVA_HOME]

C:\Program Files\Java\jdk1.8.0_60

 

[시스템 변수 : ANDROID_HOME]

C:\and\android-sdk

 

[시스템 변수 : Path]

%JAVA_HOME%\bin;

%ANDROID_HOME%\tools;

%ANDROID_HOME%\platform-tools;

%ANDROID_HOME%\build-tools;

C:\android\apache-ant\apache-ant-1.9.4\bin; 

 

 

 

 

< Cordova build >

 

4. 다음으로 코르도바를 이용해서 빌드를 해보겠습니다. 코르도바의 배포용 빌드 사용법은 다음과 같습닏. 폰갭과 유사하며 차이점은 맨 뒤에

--release 옵션을 추가해 주면 됩니다.  마이너스(-) 가 두번 들어가는 것을 유의 하세요.


 

cordov build  --release

 

[    cordova build android --release    ] 라고 입력합니다.

 

5. 폰갭과 마찬가지로 성공적으로 빌드가 되면 진행한 시간이 표시되고 커서가 나타납니다.

C:\Users\choi\projects\vu>cordova build android --release
ANDROID_HOME=G:\Android-20170206\Android\sdk1\
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_73\
Subproject Path: CordovaLib
Incremental java compilation is an incubating feature.
:preBuild UP-TO-DATE
:preReleaseBuild UP-TO-DATE
:checkReleaseManifest
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preReleaseBuild UP-TO-DATE
:CordovaLib:checkReleaseManifest
:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl UP-TO-DATE
:CordovaLib:compileReleaseNdk UP-TO-DATE
:CordovaLib:compileLint UP-TO-DATE
:CordovaLib:copyReleaseLint UP-TO-DATE
:CordovaLib:mergeReleaseShaders UP-TO-DATE
:CordovaLib:compileReleaseShaders UP-TO-DATE
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles UP-TO-DATE
:CordovaLib:packageReleaseRenderscript UP-TO-DATE
:CordovaLib:compileReleaseRenderscript UP-TO-DATE
:CordovaLib:generateReleaseResValues UP-TO-DATE
:CordovaLib:generateReleaseResources UP-TO-DATE
:CordovaLib:packageReleaseResources UP-TO-DATE
:CordovaLib:processReleaseManifest UP-TO-DATE
:CordovaLib:generateReleaseBuildConfig UP-TO-DATE
:CordovaLib:processReleaseResources UP-TO-DATE
:CordovaLib:generateReleaseSources UP-TO-DATE
:CordovaLib:incrementalReleaseJavaCompilationSafeguard UP-TO-DATE
:CordovaLib:compileReleaseJavaWithJavac UP-TO-DATE
:CordovaLib:processReleaseJavaRes UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForRelease UP-TO-DATE
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForRelease UP-TO-DATE
:CordovaLib:mergeReleaseJniLibFolders UP-TO-DATE
:CordovaLib:transformNative_libsWithMergeJniLibsForRelease UP-TO-DATE
:CordovaLib:transformNative_libsWithSyncJniLibsForRelease UP-TO-DATE
:CordovaLib:bundleRelease UP-TO-DATE
:prepareAndroidCordovaLibUnspecifiedReleaseLibrary UP-TO-DATE
:prepareReleaseDependencies
:compileReleaseAidl UP-TO-DATE
:compileReleaseRenderscript UP-TO-DATE
:generateReleaseBuildConfig UP-TO-DATE
:generateReleaseResValues UP-TO-DATE
:generateReleaseResources UP-TO-DATE
:mergeReleaseResources
:processReleaseManifest
:processReleaseResources
:generateReleaseSources
:incrementalReleaseJavaCompilationSafeguard
:compileReleaseJavaWithJavac
:compileReleaseJavaWithJavac - is not incremental (e.g. outputs have changed, no
 previous execution, etc.).
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
:compileReleaseNdk UP-TO-DATE
:compileReleaseSources
:lintVitalRelease
:mergeReleaseShaders
:compileReleaseShaders
:generateReleaseAssets
:mergeReleaseAssets
:transformClassesWithDexForRelease
:mergeReleaseJniLibFolders
:transformNative_libsWithMergeJniLibsForRelease
:processReleaseJavaRes UP-TO-DATE
:transformResourcesWithMergeJavaResForRelease
:packageRelease
:assembleRelease
:cdvBuildRelease

BUILD SUCCESSFUL

Total time: 56.682 secs
Built the following apk(s):
        C:/Users/choi/projects/vu/platforms/android/build/outputs/apk/android-re
lease-unsigned.apk

C:\Users\choi\projects\vu>

 

6. C:\Users\choi\projects\vu\platforms\android\build\outputs\apk\

폴더로 이동해 보면 android-release-unsigned.apk

이 파일은 안드로이드 기기에 직접 복사해도 설치가 되는 파일입니다. 다만 서명과 정렬 작업을 해주어야 구글 

플레이스토어에 업로드할 수 있습니다.

 

 

< 키스토어 생성 >

 

7. 먼저 서명을 위해서 키스토어를 생성하겠습니다.  키스토어 파일은 개발자를 인증할 키입니다. 한번 만들어 두면

앱을 서명할 때마다 반복해서 사용되므로 잘 보관해 두어야 합니다.

keytool 의 사용법은 다음과 같습니다

명령어 의미 사용법
-genkey 키를 생성합니다. keytool -genkey
-v -genkey의 명령에 대하여 상세 정보를 진행 중에 화면에 표시합니다. keytool -genkey -v
-keystore 만들어질 키스토어의 이름을 지정합니다. -keystore release.keystore
-alias 키스토어의 제목을 별칭 이름으로 지정합니다. -alias VirtualUniversity
-keyalg 키 알고리즘을 이름을 지정합니다. 일반적인 RSA 를 입력합니다. -keyalg RSA
-keysize 키 비트 크기를 지정합니다. 일반적인 2048비트수를 입력합니다. -keysize 2048
-validity 유효기간 일수를 지정합니다. 100000일(10만일)은 약 273년 입니다. -validity 100000

 

위의 내용과 사례를 참고하여 DOS 창에서 다음처럼 한 줄로 입력을 합니다. 유의할 점은 현재 폴더가 projects > vu 

인지 확인하세요.

 

C:\Users\choi\projects\vu>

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


 

 

8.

C:\Users\choi\projects\vu>keytool -genkey -v -keystore release.keystore -alias
irtualUniversity -keyalg RSA -keysize 2048 -validity 10000

키 저장소 비밀번호 입력:1111
키 저장소 비밀번호가 너무 짧음 - 6자 이상이어야 합니다.
키 저장소 비밀번호 입력:111111
새 비밀번호 다시 입력:111111
이름과 성을 입력하십시오.
  [Unknown]:  JUNHO CHOI
조직 단위 이름을 입력하십시오.
  [Unknown]:  JUNHOCHOI
조직 이름을 입력하십시오.
  [Unknown]:  JUNHOCHOI
구/군/시 이름을 입력하십시오?
  [Unknown]:  YOUNGHWADONG
시/도 이름을 입력하십시오.
  [Unknown]:  SUWON
이 조직의 두 자리 국가 코드를 입력하십시오.
  [Unknown]:  KO
CN=JUNHO CHOI, OU=JUNHOCHOI, O=JUNHOCHOI, L=YOUNGHWADONG, ST=SUWON, C=KO이(가)
맞습니까?
  [아니오]:  

- >마지막 " 예  "  한글이 안되서 노트패드로 복사후 붙여넣기를 하였다.

 

다음에 대해 유효 기간이 10,000일인 2,048비트 RSA 키 쌍 및 자체 서명된 인증서(SHA
256withRSA)를 생성하는 중
        : CN=JUNHO CHOI, OU=JUNHOCHOI, O=JUNHOCHOI, L=YOUNGHWADONG, ST=SUWON, C=
KO
에 대한 키 비밀번호를 입력하십시오.
        (키 저장소 비밀번호와 동일한 경우 Enter 키를 누름):
[release.keystore을(를) 저장하는 중]

 

 

9. 모든 입력이 끝나서 윈도우 탐색기를 열어 project > vu 폴더로 가보면 

release.keystore 파일이 생성된 것을 알수 있다.

 

 

< 서명 >

10. 이제 서명을 시작해 보겠습니다. 앞에서 만든 android-release-unsigned.apk 를 proejct > vu 폴더에 붙여넣기하고 파일이름을 

간단하게 vu.apk 로 변경합니다.

 

 

11. 서명은 jarsigner 도구를 사용하면 됩니다. 사용법은 다음과 같습니다.

jarsigner [options ] jar-file alias

 

명령어 의미 사용법
-verbose 진행상황을 화면에 표시하는 옵션입니다. jarsigner -verbose
-keystore 서명에 사용할 키스토어 파일을 지정합니다. 앞에서 준비한 키스토어 파일이름을 입력합니다. -keystore release.keystore
jar -file 서명에 사용할 apk 파일을 지정합니다. 서명이 끝나면 같은 폴더에 동일 이름으로 서명된 apk 파일이 저장됩니다. vu.apk
alias 키스토어 파일에서 제목으로 입력한 별칭이름을 지정합니다. VirtualUniversity

 

위 내용르 참고하여 DOS 창에서 다음처럼 한줄로 입력을 합니다. 현제 폴더가 projects > vu 인것을 확인하세요

 

구>>

C:\Users\choi\projects\vu>jarsigner -verbose -keystore release.keystore vu.apk VirtualUniversity

  변경   

  =>

jarsigner -tsa http://timestamp.digicert.com -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release.keystore hw.apk Hello_World

비밀번호 입력하세요 : 11111

 

서명 성공 결과>

 signing: res/drawable-xhdpi-v4/ic_action_previous_item.png
 signing: res/drawable-xhdpi-v4/ic_action_remove.png
 signing: res/drawable-xhdpi-v4/icon.png
 signing: res/drawable-xxhdpi-v4/ic_action_next_item.png
 signing: res/drawable-xxhdpi-v4/ic_action_previous_item.png
 signing: res/drawable-xxhdpi-v4/ic_action_remove.png
 signing: res/drawable/icon.png
 signing: res/drawable/screen.png
 signing: res/mipmap-hdpi-v4/icon.png
 signing: res/mipmap-ldpi-v4/icon.png
 signing: res/mipmap-mdpi-v4/icon.png
 signing: res/mipmap-xhdpi-v4/icon.png
 signing: res/mipmap-xxhdpi-v4/icon.png
 signing: res/mipmap-xxxhdpi-v4/icon.png
 signing: res/xml/config.xml
 signing: resources.arsc

Warning:
No -tsa or -tsacert is provided and this jar is not timestamped. Without a times
tamp, users may not be able to validate this jar after the signer certificate's
expiration date (2044-08-20) or after any future revocation date.

유효시간을 2044 년 이전까지 해야 하는데 273년으로 넣어서 경고표시가 출력되었다.

 

 

< Zipalign  정렬 >

 

12. 자 이제 정렬이라는 마지막 단계로 접어들었습니다. 정렬을 하면 앱이 실행될 때 최적화가 이뤄져서 메모리가 차지하는 공간을 절약할 수 있습니다. 구글 플레이 스토어에 업로드하기 위해서는 이 단계를 거쳐야 합니다. 도구 zipalign 을 사용하면 되며 사용방법은 다음과 같습니다.

여기서 은 정렬에 사용하는 바이트 수이며 반드시 32비트 정렬을 위해 [4]를 사용합니다. 

infile.apk 와 outfile.apk 는 각각 소스 파일과 생성될 파일 이름을 지정합니다.

 

zipalign -v infile.apk outfile.apk


앞에서 서명된 vu.apk 파일을 사용해서 정렬을 시켜 최종적으로 vu_final.apk 를 만들어 보겠습니다.

화면처럼 zipalign -v 4 vu.apk vu_final.apk

zipalign -v 4 vu.apk vu_final.apk

 

오류 >

 

C:\Users\choi\projects\vu> zipalign -v 4 vu.apk  vu_final.apk
'zipalign'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

=>위 오류는 zipalign 명령어를 찾을 수 없다는 오류메시지가 나타나는 이유는 안드로이드 SDK 설치과정에서

zipalign 실행파일이 환경변수에 등록이 안 된 것입니다. 해결하는 방법은

'android_sdk 설치 폴더/build-tools/19.1.0/zipalign.exe' 파일을 ' android_sdk 설치 폴더/tools' 폴더로 복사하는 것입니다.

 

=> 안된다.  그래서 PATH 설정 ZIPALIGN_HOME = G:\Android-20170206\Android\sdk1\build-tools\25.0.2\

%ZIPALIGN_HOME%;

주었더니 되었다.

 

출력 결과 >>

....

38294592 res/drawable-xxhdpi-v4/ic_action_next_item.png (OK)
38295064 res/drawable-xxhdpi-v4/ic_action_previous_item.png (OK)
38295536 res/drawable-xxhdpi-v4/ic_action_remove.png (OK)
38295936 res/drawable/icon.png (OK)
38305356 res/drawable/screen.png (OK)
38365172 res/mipmap-hdpi-v4/icon.png (OK)
38370360 res/mipmap-ldpi-v4/icon.png (OK)
38372620 res/mipmap-mdpi-v4/icon.png (OK)
38375772 res/mipmap-xhdpi-v4/icon.png (OK)
38385344 res/mipmap-xxhdpi-v4/icon.png (OK)
38397152 res/mipmap-xxxhdpi-v4/icon.png (OK)
38419961 res/xml/config.xml (OK - compressed)
38422672 resources.arsc (OK)
Verification succesful

C:\Users\choi\projects\vu>

 

< 안드로이드 기기에서 실행>

 

1. 윈도우 탐색기를 통해 projects > vu 폴더를 찾아봅니다.

예를 들어 C:\Users\choi\projects\vu 안에 배포용으로 최종 완성된 실행파일인 vu_final.apk 파일이 들어 있습니다.

 

2. 안드로이드 기기를 USB커넥트 선으로 데스크탑 PC 와 연결합니다. 여기서는 넥서스 S를 사용했으며 USB 를 컴퓨터에

연결하면 다음처럼 파일 탐색기에 [이동식 디스크] 로 연결이 됩니다. APK 폴더에 vu_final.apk 파일을 복사합니다.

혹시 다른 안드로이드 계열의 모바일 기기를 가지고 있다면 단말기 회사에서 제공하는 별도의 s/w 를 활용하세요.

 

 

 

 

녹스에 마우스 옮기기로 설치되었다. 아이콘 이미지와 파일이름을 수정이 필요하다.

 

 

 

hybrid

 

about author

PHRASE

Level 60  머나먼나라

감기는 치료하면 7일 가지만, 만일 아무 것도 하지 않는다면 일주일 간다. -레이몽 두모스

댓글 ( 4)

댓글 남기기

작성