제56강에서 미비했던 부분 보완해서 올립니다.

1~3단계는 기존 56강 참조하면 될 것 같습니다.

4~6단계는 개인정보 부분이라 텍스트를 참조하여 진행하면 될 것 같습니다.

==============================================================================

PhoneGap Build를 이용한 모바일 앱만들기

앱을 만들기 전에 반응형 웹 사이트를 만들거나 표준 HTML5, CSS3 및 선택적으로 JavaScript 프레임 워크 (Bootstrap, jQuery Mobile 및 AngularJS, VueJS, ReactJS)가 있는 기존 웹 사이트를 사용하십시오. 그런 다음, 폰갭빌더 응용 프로그램을 만들기를 사용합니다.

1 단계 : 웹 사이트 만들기 

먼저 웹 사이트를 만들고 모바일 장치에서 사용하는 몇 가지 태그를 추가하십시오.

1. 반응형 웹 사이트를 만들거나 기존 웹 사이트를 사용하십시오.

2. index.html 파일에서 head 요소 안에 다음 행을 추가하십시오.

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

3. index.html 파일에서 닫는 본문 태그 (</ body>) 위에 다음 행을 추가하십시오.

<script type="text/javascript" src="cordova.js"></script>

참고 :이 두 줄은 웹 사이트를 모바일 용으로 준비하고 모바일 친화적으로 만들기 위해 필요합니다. 실제 cordova.js 파일은 PhoneGap Build 프레임 워크에 의해 작성되므로 포함하지 않아도 됩니다.

2 단계 : 디버그 버전 만들기 

웹 사이트를 만든 후에는 웹 사이트를 앱의 디버그 버전으로 변환하여 작동 방식을 확인할 수 있습니다. 앱을 만드는 방법이 더 효율적이 되면 이 단계를 건너 뛸 수 있습니다.

1. 웹 콘텐츠 (HTML, CSS, JS, 이미지)를 압축하고 구체적인 이름 (예 : webschoolApp.zip)을 지정하십시오. 

2. PhoneGap Build Cloud Service (https://build.phonegap.com/)로 이동하십시오. 사용 가능한 항목을 확인하려면 이 홈 페이지를 미리 보는 데 시간이 걸릴 수 있습니다. 

3. 아직 등록하지 않은 경우 페이지 상단의 등록 버튼을 클릭하여 PhoneGap Build 서비스에 가입하고 필요한 모든 정보를 제공하십시오. 

4. PhoneGap Build 홈페이지로 돌아가서 Sign In 버튼을 클릭하십시오. 

5. + 새 앱 버튼을 클릭하고 .zip 파일 업로드 버튼을 클릭하고 이전에 생성 한 zip 파일을 탐색 한 다음 열기 버튼을 클릭하십시오. 

6. 빌드 준비 완료 버튼(Ready to Build)을 클릭하십시오.

7. 확인 사항 : 플랫폼 아이콘 (IOS, Android 및 Windows)이 강조 표시됩니다. 추가 정보가 필요하므로 IOS 아이콘이 빨간색으로 강조 표시됩니다.

8. 필요한 경우 모바일 장치에서 QR Reader를 다운로드하십시오.

9. QR Reader를 사용하여 QR 코드의 스냅샷을 작성하십시오 (위 스크린 샷 참조).

10. 모바일 장치에서 다음 프롬프트를 클릭하십시오.

   a. Click OK on the Open URL prompt

   b. Click SAVE on the Download file? prompt

   c. Click Open on the 1 file download prompt

   d. Click Install on the Do you want to install this application?... prompt

   e. Click Open again

11. 확인 사항 : 앱이 모바일 장치로 다운로드 됩니다.

12. 모바일 장치에서 앱을 테스트하십시오.

3 단계 : 자산 및 구성 파일 추가 

그래픽 자산과 config.xml 파일을 zip 파일에 추가하지 않으면 PhoneGap Build Cloud Service는 기본값과 이미지를 사용합니다. 초기 테스트에는 유용하지만 앱의 릴리스 버전을 만들기 전에 이러한 항목을 포함하려고 합니다.

1. res (리소스의 약자)라는 폴더에 자산 (아이콘, 스플래시 화면)을 만듭니다.

  참고 : 이러한 리소스를 자동으로 생성하는 방법에 대해서는 리소스 아래의 스플래시 화면 생성기 목록을 참조하십시오.

2. config.xml 파일을 작성하거나 기존 config.xml 파일을 사용하여 업데이트하십시오.

  참고 :이 파일은 특정 설정 (예 : 앱 이름, 앱 버전, 작성자, 플랫폼, 플러그인, 인터넷 액세스, 환경 설정 등)으로 앱을 "구성"하는 데 사용됩니다. config.xml 파일에 추가 할 내용에 대한 자세한 내용 여기를 클릭하십시오.

3. 초기 zip 파일을 삭제하십시오.

4. 동일한 이름 (webschoolApp)으로 자산 폴더와 config.xml을 포함하도록 파일을 다시 압축하십시오.

5. PhoneGap Build로 돌아가서 Update Code 버튼을 클릭하고 Browse… 버튼을 클릭하여 새로 생성 된 zip 파일을 찾은 다음 Upload 버튼을 클릭하십시오.

6. 확인 사항 : 이번에는 config.xml 파일이 zip 파일에 포함되었으므로 config.xml 파일에서 수집 된 앱 이미지, 앱 이름 및 간단한 설명이 표시되어야 합니다.

7. 다시 작성 버튼을 클릭하여 새 콘텐츠로 앱을 업데이트하십시오.

8. QR Reader를 사용하여 QR 코드의 스냅 샷을 작성하십시오 (위 스크린 샷 참조).

9. 모바일 장치에서 다음 프롬프트를 클릭하십시오. 

   a. Click OK on the Open URL prompt

   b. Click SAVE on the Download file? prompt

   c. Click Open on the 1 file download prompt

   d. Click Install on the Do you want to install this application?... prompt

   e. Click Open again

10. 확인 사항 : 앱이 모바일 장치로 다운로드 됩니다.

11. 휴대 기기에서 앱을 테스트합니다.

4 단계 : 디지털 서명 앱 

앱을 만든 후에는 앱 스토어 (예 : Google Play, Apple App Store)에 제출하기 전에 앱의 DEBUG 버전 대신 RELEASE 버전을 만들려면 디지털 서명을 해야 합니다.

주의 : 서명 키를 만들려면 JDK가 설치되어 있어야 합니다. 

1. JDK (Java Development Kit)를 아직 다운로드하지 않은 경우 다운로드하여 파일을 두 번 클릭 한 후 JDK 웹 사이트의 지시 사항에 따라 설치 방법을 따르십시오.

2. 화면 하단의 검색 필드에 command를 입력하여 Windows 내에서 명령 프롬프트를 엽니다.

  -, Type cd... and press the ENTER key

  -, Type cd Program files and press the ENTER key

  -, Type cd Java and press the ENTER key

  -, Type cd jdk1.8.0_25 (or whatever is the later version) and press the ENTER key.

  -, Type cd bin and press the ENTER key.

  팁 :이 단계를 수행하지 않아도 되도록 시스템 변수를 설정할 수도 있습니다.

3. 다음 구문을 입력하고 정보에 강조 표시된 것을 변경하십시오.

  keytool -genkey -v -keystore Your_personal_file_title.keystore -alias Your_personal_alias - keyalg RSA -keysize 2048 -validity 10000

  주의 : 다음 단계에서 입력하고 잊어 버리지 않도록 암호를 적어 두십시오. 비밀번호를 입력 할 때 큰 블록을 삽입해도 비밀번호의 첫 글자는 이동하지 않습니다.

4. Enter your profile when prompted: 

   i.key store password: mykeystore$500 

   ii.first and last name: jb han 

   iii.organizational unit: skip 

   iv.name of your organization: Web School Services 

   v.city: Joro-gu

   vi.state: Seoul 

   vii.two letter country code: KR 

   viii.is correct? yes 

   ix.key password: Press the Enter key to add the SAME password as key store password mykeystore$500 

   x.CHECK POINT: This will create an Android Keystore file in the CURRENT directory: (e.g., C:\Users\webschool) with the name you gave it. You can use it with whatever app you generate (e.g., https://build.phonegap.com). 

 힌트 : 모든 설정을 사용하여 스크린 샷이나 명령 프롬프트의 텍스트 파일을 만들고 전자 사본을 인쇄 된 사본과 함께 저장 장소에 저장할 수 있습니다. 따라서 여러 장소에 저장하거나 클라우드 (예 : 보관함 또는 Google 드라이브)에도 저장할 수 있습니다. 서명 키를 잃어 버리면 앱을 업데이트 할 수 없습니다.

5 단계 : 릴리스 버전 작성 

서명 키를 만들었으므로 이제 이를 사용하여 앱 스토어에 보낼 수 있는 디버그 버전 대신 릴리스 버전을 만들도록 앱에 디지털 서명 할 수 있습니다. 

1. 선택한 키 없음 텍스트 옆에 있는 아래쪽 화살표를 클릭하고 새로 만든 키를 선택하고 인증서 및 키 저장소 암호를 입력 한 다음 키 제출 버튼을 클릭하십시오.

2. 점검 사항 : 이제 잠금 아이콘이 잠금 해제 된 것으로 표시됩니다.

3. 다시 작성 버튼을 다시 클릭하십시오.

4. 이번에는 apk 버튼을 클릭하여 APK를 컴퓨터에 다운로드하십시오.

5. 확인 사항 : 파일 이름에 "release"라는 단어가 포함되어 있습니다. 앱을 앱 스토어에 제출하는 데 사용할 수 있는 파일입니다.

6 단계 : 앱 업로드 

앱의 릴리스 버전이 생성되면 Google Play 또는 Apple App Store에 업로드 할 수 있습니다.

참고 : 원하는 만큼 많은 앱을 만들려면 Google에 25 달러의 일회성 요금을 지불해야 합니다. 그러나 원하는 만큼 많은 앱을 만들려면 매년 Apple에 99 달러를 지불해야 합니다.

1. Google Play Console로 이동하여 가입하지 않은 경우 가입하십시오.

2. Launch Play Console 버튼을 클릭하십시오

3. 응용 프로그램 작성을 클릭하고 필요한 정보를 추가하십시오.

(끝)