Cordova 플러그인 만들기

플러그인이란?

플러그인(Plugin) Cordova로 작성된 하이브리드 앱에서 Native 기능을 사용하기 위해 작성한 코드의 패키지 입니다.

일반적으로는 웹뷰에서 사용할 수 없는 Native 기능들을 Plugin JavaScript 인터페이스와 함께 제공합니다.


Cordova 플러그인 사전 준비과정

Cordova Plugin 개발을 위해서는 Cordova 에서 제공하는 Plugman 모듈이 필요합니다.

Plugman Nodejs npm 또는 yarn으로 설치를 하게 됩니다. 본 문서에서는 npm으로의 설치를 사용합니다.

plugman을 전역에서 사용할 수 있도록 -g 옵션을 주어 설치했고, 설치 직후 plugman -v 명령어를 통해 설치 여부를 확인 할 수 있습니다.

또한 플러그인은 실제 Native 코드를 작성하게 되므로, Android SDK도 필요합니다.

Android SDKhttps://developer.android.com/studio/ 에서 Android Studio를 받거나, SDK를 직접 받아 설치할 수 있습니다.


Cordova 플러그인 개발환경 세팅

위의 사전 준비가 모두 끝나면 플러그인 개발을 위한 환경을 세팅합니다.

우선 Cordova 플러그인을 Cordova App에 설치한 뒤 실행할 수 있도록 Cordova Project를 생성합니다.
cordova
역시 npm을 통해 설치할 수 있습니다.

이후 Cordova project Android platform을 추가 합니다.

Cordova Project는 다음 명령어를 통해 만들 수 있습니다.
cordova create [PATH] [ID] [NAME]

위의 명령어를 통해 프로젝트가 생성되었으면 아래와 같은 폴더구조를 확인할 수 있습니다.

이후 사용되는 모든 명령어는 samplePlugin 디렉토리 내에서 사용합니다.


Cordova 플러그인 기본 템플릿 생성

사전 준비과정에서 설치한 Plugman을 사용하면 Cordova 플러그인의 기본 템플릿을 생성 할 수 있습니다.

해당 명령어가 성공적으로 수행되면 프로젝트 아래에 testPlugin이라는 이름으로 새로운 폴더가 하나 생기는 것을 확인할 수 있습니다.

플러그인 폴더로 들어가서 다음 명령어를 사용합니다.

platform add 명령어를 사용하게 될 경우 testPlugin에 기본 템플릿이 생성된 것을 확인할 수 있습니다.

이제 위의 java파일을 통해 원하는 플러그인을 개발 할 수 있습니다.


Cordova 플러그인 구조

Cordova 플러그인을 이루고 있는 골자는 크게 다음과 같습니다.

1.     웹에서 사용하고자 하는 기능이 담긴 Native Code

2.     웹과 Native 간의 통신을 지원하는 javascript code

3.     플러그인 명세가 담긴 xml 파일

위의 골자를 바탕으로 본격적으로 플러그인을 작성합니다.


Cordova 플러그인 작성

플러그인 예제로 사용자로부터 입력받은 값을 Toast로 보여주는 Echo Plugin을 작성합니다.


1.    Native Code 작성

testPlugin.java를 아래와 같이 수정합니다.

작성한 코드는 1. 웹으로부터 받은 문자열을 Toast로 보여주고, 2. Toast로 띄운 텍스트를 웹에 다시 돌려주는 기능을 합니다.


2.    Plugin 명세 작성

    러그인 명세는 xml파일로 되어 있으며, 플러그인은 위의 명세에 따라 platform에 설치됩니다.


3.    javascript interface

웹에서 Native 기능 호출을 위해 사용하는 javascript interface Cordova 플러그인 호출 방식에 맞게 작성합니다.

exports.toast를 통해 plugin명세에서 작성한 clobbers와 함께 호출할 수 있습니다.
(ex. cordova.plugins.testPlugin.toast)

toast 함수는 매개변수와 성공/실패 콜백 함수를 받으며 이 함수들은 Native Code callbackContext가 처리합니다.


4.   package.json 생성

위의 과정이 모두 끝나면 plugman을 통해 플러그인에서 사용하는 package.json을 작성할 수 있습니다.

플러그인 루트 디렉토리에서 plugman createpackagejson . 명령어를 사용하면 package.json에 들어가는 설정값을 입력 받고 package.json 파일을 생성합니다.


플러그인 설치

위에서 만든 toast 플러그인은 cordova 명령어를 통해 설치할 수 있습니다.

Cordova 프로젝트 루트에서 cordova plugin add --link 명령어를 통해 플러그인을 설치할 수 있습니다.

정상적으로 설치하게 되면 plugins 디렉토리 하위에 작성한 플러그인이 저장됩니다.

또한 작성한 플러그인 Native Code는 플랫폼 내부에 삽입됩니다.


플러그인 테스트

플러그인 설치까지 마무리가 되었으면, 실제로 플러그인을 테스트 할 수 있도록 테스트 코드를 작성합니다.

www/index.html은 사용자 입력을 받을 수 있도록 input을 추가합니다.

input에 값을 입력하고 버튼을 누르면 입력된 값이 Toast로 출력되는 형태입니다.

마찬가지로 www/js/index.js에서 button에 대한 이벤트를 추가합니다.

모든 Cordova Plugin deviceready 이벤트가 발생 한 이후 처리할 수 있습니다.

본 예제에서는 deviceready 이벤트 후 toastInit()을 통해 button에 클릭이벤트를 주어 처리하도록 했습니다.


위의 모든 코드 작성이 끝나면 cordova run android를 통해 실제 샘플 앱을 구동시킵니다.


위의 입력창에 안녕하세요를 넣고 버튼을 누르면 화면에 Toast창이 나오는걸 확인할 수 있습니다.

크롬 개발자도구에서 확인해보면 callback으로 값을 받는 것을 확인할 수 있습니다.


정리

https://cordova.apache.org/plugins/ 에서 Cordova가 제공해주는 플러그인들을 확인할 수 있습니다.

하지만 필요로하는 플러그인이 없다면 본 포스트를 바탕으로 직접 Cordova플러그인을 작성해 사용할 수 있는 예제가 되었으면 합니다.

본 포스트에서는 가장 간단한 플러그인을 만들어 봤지만 Activity를 활용한 데이터 전달, NDK, 데이터 통신 등 다양한 활용을 할 수 있으며, 이는 각자의 몫으로 남기겠습니다.



New Multi-Channel Dynamic CMS

Blisk, 웹앱 개발 브라우저

안녕하세요

웹앱개발 브라우저를 소개해드리겠습니다.



본 사진처럼, 웹화면과 여라가지 폰화면을 나란히 놓고 볼수 있는 것이 핵심입니다.

크롬 브라우저 기반으로 되어있어,

개발자도구도 익숙한 UI로 사용하실 수 있습니다.




https://blisk.io/ 에 접속 하시면, 관련 정보와 다운로드를 하실 수 있습니다.




브라우저 우상단을 보시면 몇몇 메뉴가 있는데

순서대로 설명해드리겠습니다.


1. 폰화면과 웹화면의 스크롤을 동기화 시키는 옵션입니다.

2. 폰화면을 가로로 변경하는 옵션입니다.

3. 웹화면만 나오게 하고 싶을경우 씁니다.

4. 클릭하고 마우스를 화면에 호버하면 스펙을 보여줍니다.



5. 자동 새로고침 설정 여부입니다.

6. 브라우저가 오류를 잡아낼 경우 stack overflow로 검색해줍니다

7. 스크린샷 기능입니다.



아직까지는 미흡한 부분이 조금 보입니다.

폰 화면에 새로운 폰을 드래그하면 중첩된다던가,

일부 태블릿에서 브라우저 사이즈 변경시 화면 비율이 복원이 안된다던가 하는 점이 있습니다.


하지만 대체로 유용하다는 반응들이 대부분입니다.


한번 사용해보시는 것을 추천합니다.



New Multi-Channel Dynamic CMS

Ionic을 이용하여 하이브리드 앱을 개발해보자 -Intro

Ionic을 이용하여 하이브리드 앱을 개발해보자 (메신저 앱) - Intro




하이브리드 앱

하이브리드 앱은 HTML5, CSS, JavaScript를 사용해 만들어지며 다양한 모바일 플랫폼에서 네이티브 앱으로 실행된다. 표준 웹 개발을 사용하지만, 최종 앱은 기기에서 네이티브 앱으로 실행된다. 네이티브 앱과 웹 기반 앱의 장점만 결합하기위한 방법이다.


장점

  • 웹 표준을 사용하여 제작

  • 기존 웹 개발자들이 어렵지 않게 하이브리드 앱 개발 가능

  • 신속한 수정, 업데이트 및 배포 가능

  • 각 플랫폼에서 네이티브 앱으로 실행됨


단점

  • 인터페이스가 표준 네이티브 앱과 다를 수 있음

  • 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있음

  • 일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연 발생가능

  • 네이티브 앱 '셸'의 각기 다른 코드 베이스를 유지해야 할 수 있음

  • 개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 함



시작하기전에

하이브리드 앱을 만들수 있는 다양한 개발도구가 존재하지만 이번 블로그에서는 Ionic Framework를 사용하려고 합니다.
이에 앞서 다음 3가지의 사전지식이 필요합니다.
    • Node.js
    • AngularJs
    • PhoneGap (Cordova)
이번 포스팅에선 위 3가지 기술에 대한 소개는 생략 하고 http://ionicframework.com/ 에서 나온 가이드를 기반으로 진행 합니다.

설치&시작

Node.js 가 설치가 되어있다면 콘솔에서 다음 명령어를 통해서 ionic을 설치합니다.

1
npm install -g cordova ionic
cs

다음으로 ionic에서 준비된 app templates를 통해서 탭 형태의 app을 생성합니다. 
tabs 외에 blank, sidemenu 형태로 생성 할 수도 있습니다.

1
ionic start Messenger tabs
cs


위처럼 start를 하면 기본적으로 필요한 리소스를 다운로드 받으면서 아래와 같이 Messenger 디렉토리에 기본 프로젝트가 생성이 됩니다.


그럼 바로 실행 해볼수 있습니다. HTML5기반이기 때문에 웹 브라우저로 바로 실행해볼 수 있는데요. 다만 네이티브 플랫폼 전용 플러그인을 사용할때는 브라우저에서 해당 기능을 테스트 해볼수는 없습니다. 하지만 기본적인 화면 구성과 기능은 테스트 해볼수 있으므로 상당히 편리하게 사용할 수 있습니다.

1
ionic serve
cs

위 커맨드를 실행하시면 로컬에 서버형태로 실행되어 브라우저로 다음과 같이 앱 화면이 나타나게 됩니다.

자동으로 8100 포트로 실행이 되네요. 탭 template로 프로젝트를 만들었기 때문에 기본적으로 하단에 탭이 위치한 앱이 실행됩니다. 포트를 변경하고 싶을때는 ionic serve -p {port} 로 실행하면 됩니다. 별도의 에뮬레이터나 기기 없이도 테스트가 가능하기 때문에 화면 수정할때나 스크립트 디버깅할때 상당히 편리합니다. 

그리고 파일이 수정이 일어날때 마다 자동으로 refresh를 해주기 때문에 바로바로 변경사항을 체크하면서 테스트를 할 수 있습니다.


다음으로 실제 플랫폼에서 앱을 실행시키기 위해선 플랫폼을 추가해야 합니다.

현재 플랫폼 리스트를 볼까요? 


1
ionic platform list
cs

위 커맨드를 실행하며 Installed platforms, Available platforms 리스트가 나타납니다. 아직 플랫폼을 설치하지 않았기 때문에 Installed platforms은 없고 지원 가능한 플랫폼 리스트가 나옵니다. 현재 개발 환경이 Mac 아니라서  ios 플랫폼은 나타나지 않네요. 그럼 안드로이드 플랫폼을 다음과 같이 추가 해보겠습니다.

1
ionic platform add android
cs

안드로이드 플랫폼이 추가되었죠?


다음으로 빌드는 다음과 같이 수행하며 맨 뒤에 플랫폼명을 쓰지 않으면 설치된 플랫폼 모두로 빌드를 수행하게 됩니다. 안드로이드로 빌드를 해보겠습니다.

1
ionic build android
cs

Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

안드로이드 sdk 경로를 path로 잡아줘야 가능하다는군요. 그럼 sdk를 설치하고 해당 경로를 환경변수 ANDROID_HOME 으로 설정합니다. 그리고 JAVA_HOME 으로 jdk 경로가 설정되어 있어야 합니다.


이렇게 안드로이드 빌드후 다음과 같은 커맨드로 에뮬레이터 혹은 실제 디바이스에서 앱을 실행 해볼 수 있습니다.

1
ionic emulate android
cs
   --
1
ionic run android --device
cs

이렇게 Ionic을 이용해서 하이브리드 앱을 개발할 준비와 기본적인 명령어는 숙지가 되었습니다.

다음 블로그 부터는 간단한 매신저앱을 함께 만들어 가는 과정을 포스팅 하겠습니다.





New Multi-Channel Dynamic CMS

내가 만든 iOS앱을 앱스토어에 배포해보자 - xCode로 소스 업로드하기

내가 만든 iOS앱을 앱스토어에 배포해보자 - xCode로 소스 업로드하기

 

이전 포스팅에서 앱심사를 받기 위한 앱의 전반적인 정보를 입력하였습니다.
이제 실제 내가 작업한 작업물을 xCode을 이용하여 iTunes Connect에 업로드를 해야합니다.
그런데 이전 포스팅과 오늘 포스팅 사이에 iOS 9가 발표되면서 xCode도 7버전으로 변경되어버렸네요. 
이전 포스팅까지는 xCode 6 오늘부터는 xCode7 기준으로 작성된다는 점 이해 부탁드려요.

 

xCode를 실행하면 상단에 [ Product - Archive ]를 클릭합니다.

 

화살표부분에 ipa 파일로 만들어지는 진행바를 확인하실 수 있어요.

 

 

진행 바가 쇽쇽 지나가고 만들기가 완료가 되면 이렇게 창이 하나가 열립니다.
  이전에 압축했던 내역이 쭉 나오네요. 
  업로드할 버전을 선택하고 상단 우측에 파란 버튼 [ Upload to App Store... ] 를 클릭합니다.

 

# 개발자로 등록했던 목록이 나옵니다.
  이 포스팅 대로 진행하셨다면 이부분은 자동적으로 해당 개발자 계정이 나올겁니다 ^^
  [ Choose ] 버튼 클릭.
  만약 해당 개발자 목록이 없다면 개발자 등록과 개발할 앱과 연동이 제대로 되어있는지 확인해주세요.

 

# 업로드 직전 최종 개략적인 앱정보 확인 창입니다.
  문제가 없다면 [ Submit ] 버튼을 클릭합니다.

[ Submit] 버튼을 클릭하게 되면 업로드 하는 화면으로 진행이 되는데 이 작업이 성공하고 완료가 되면 이후에는 동일한  Build 버전으로 업로드가 불가능 해집니다. 업로드 전 꼭 꼭 꼼꼼히 확인하고 진행하시길 바래요.

 

# 이렇게 압축되어진 파일은 xCode 디렉토리에 날짜별 폴더에 .ipa 파일로 저장되어 있습니다.

 

 

# 이후에 압축한 내역 창?을 확인하고 싶다면 [ Window - Organizer ] 메뉴를 활용하시면 됩니다. 
  그럼 이전과 동일한 창이 열립니다.

 

※ 업데이트 되면서 앱스토어에 업로드시 실패하는 경우

내 앱은 iPhone과 iPad 둘다 지원하는 앱입니다.
업로드 하다가 "XCode7 Invalid Bundle. iPad Multitasing support requires..... " 어쩌고 하면서 오류가 날수 있습니다.

그럼 xCode의 좌측 [ 프로젝트 - General - Deployment Info - Requires full screen ]을 체크 해주면 정상적으로 동작합니다.

iOS9 부터 iPad에 멀티태스킹 기능이 추가 되었는데 이를 지원하기 위한 항목이라나... 고 하는데 정확한건 아직 잘 모르겠습니다...

 


내가 만든 iOS앱에 대한 더 자세한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발자 등록 (1)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 기기 등록 (2)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발할 앱 연결과 권한 (3)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 앱 심사를 위한 준비 (4)


 

 

New Multi-Channel Dynamic CMS

내가 만든 iOS앱을 앱스토어에 배포해보자 - 앱 심사를 위한 준비

내가 만든 iOS앱을 앱스토어에 배포해보자 - 앱 심사를 위한 준비

 

 

신나게 알차게 아름답게 앱을 만드셨나요?

이제 앱스토어에 등록해서 배포하셔야죠!

그럴려면 크나큰 산이 두둥하고 나타납니다.

바로 앱.심.사 ^^

 

자.. 앱심사를 받기 위해서 접속해야 할 곳은

https://itunesconnect.apple.com 여기입니다.

이제까지 머물렀던 애플의 개발자 사이트 (https://developer.apple.com/) 과 동일한 개발자 계정을 입력하시면 됩니다.

 

 

로그인 후 보여지는 첫 화면의 일부입니다. 

[나의 App] 메뉴로 진입합니다.

만약 앱 생성에 문제가 있는 경우..

[계약, 세금 및 금융거래] 메뉴를 들어가셔서 내 앱의 수익이 입금될 계좌정보 및 수익의 베프 세금 관련 정보를 입력하여 주세요.

 

 

 

상단의 [ + ] 버튼을 클릭하여 [신규 iOS App]을 선택합니다.

 

 

신규 앱의 기본정보? 를 입력합니다.

 

이름 - 앱스토어에 나타나는 앱이름입니다. 이후에 수정 가능합니다.

버전 - 앱스토어에 표시되는 앱 버전입니다.
        저는 1.0.0 부터 시작했습니다. 리젝될때마다 버전을 달리하여 빌드를 해야 하는데 1.0.x 로 변경해서 올립니다.

기본 언어 - 저는 한국인이므로 Korean

SKU - 버전과는 다르게 앱스토어에 표현되지 않는 앱 고유 ID라고 물음표에서 알려줍니다.
       내가 만든 혹은 기업에서 만든 제품의 시리얼넘버(?) 라고 생각하시면 좋을것 같습니다.
       저는 XXX00001로 기입했습니다. 다음에 앱을 만든다면 XXX00002 가 되겠네요 ^^

번들ID - 개발자 사이트에서 등록하고 XCode로 앱만들때 사용한 app ID를 선택합니다.

 

다 입력했다면 [생성] 버튼이 활성화 됩니다. 

 

 

# 버전 정보

스크린 사이즈별로 앱의 미리보기 이미지를 등록합니다. 각 사이즈별 최대 5개까지..

 

 

# 버전 정보 (2)

이름 - 앱스토어에 보여질 앱 이름입니다.

설명 - 앱스토어에 앱에 대한 설명(텍스트) 입니다. 

키워드 - 앱스토어에서 검색할때 유용한 키워드입니다. 

지원 URL - 앱에 대한 지원 정보가 포함되어 있는 URL 이라고 합니다.

마케팅 URL - 앱에 대한 마케팅 정보가 포함되어 있는 URL 입니다.

개인정보 취급방침 URL - 개인정보를 어떻게 취급하는지에 대한 URL 입니다.

여기서 주의 할점은 iOS 심사 가이드 라인에도 나온 이야기지만,

다른 플랫폼을 사용한 이미지나 설명글, 키워드가 있으면 리젝대상이 됩니다.

오로지 iOS의, iOS에 의한, iOS를 위한 내용만이 기재되어 있어야 합니다.

 

 

 

# App 정보

App 아이콘 - 앱스토어에서 사용될 앱 아이콘 이미지를 등록합니다.

버전 - 앱의 버전 번호입니다.

카테고리 - 앱의 종류를 선택합니다.

등급 - 앱의 사용자 등급을 설정합니다. [편집]을 클릭하면 약간의 설문조사를 통해 자동적으로 등급이 매겨집니다.

사용권 계약 - Apple의 표준 EULA(최종 사용자 사용권 계약)을 적용할것인지 사용자 설정 EULA를 적용할 것인지 선택할 수 있습니다.

저작권 - App에 대해 독점 권한을 가진 개인 또는 법인의 이름으로, 연도를 포함하여 기입합니다.

거래 담당자 연락처 정보 - 앱의 거래담당자의 정보를 입력합니다.

라우팅 App 적용 범위 파일 - 앱에서 지원되는 지역을 지정합니다. 

# 빌드

Xcode를 이용하여 앱을 제출합니다.

# App 내 구입

InAppPurchase(앱내 구입)가 적용되어 있는 앱이라면 얼마 단위로 제공할 것인지 [ + ] 를 통해 목록을 추가합니다.

 

# App 심사 정보

연락처 정보 - 앱 심사하다가 의문점이 있으면 전화가 옵니다. 긴장하세요.

데모 계정 - 앱 심사에 필요한 회원 로그인 정보를 제공합니다.

메모 - 추가적으로 앱 심사에 덧붙일 정보가 있다면 입력합니다.
        너무 어려운 한글을 사용하지 않는다면 한글로도 리뷰를 진행하는 것 같습니다.

# 버전 출시

심사가 통과되면 앱스토어에 바로 배포를 할것인지 말것인지 결정합니다.

 

 

여기까지 완료가 되면 화면 상단 우측으로 [저장] 버튼을 눌러 줍니다.

 

앱을 심사하기 위해 필요한 정보를 입력하는 준비 단계까지 알아보았습니다.

 

[심사를 위해 제출]을 누르기 전까지는 얼마든지 변경할 수 있으니 실수로 입력한거 날리지 않도록 자주자주 저장해주세요.

 


내가 만든 iOS앱에 대한 더 자세한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발자 등록 (1)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 기기 등록 (2)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발할 앱 연결과 권한 (3)


 

 

 

New Multi-Channel Dynamic CMS

내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발할 앱 연결과 권한

내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발할 앱 연결과 권한


기기를 등록했나요? 
기기를 등록했다면 내가 만들 앱의 최소의 정보와 그에 따른 권한을 연결시켜 주어야 합니다.
먼저,


애플 개발자 사이트에 접속하여 [Identifiers - App IDs] 메뉴로 진입합니다.
위와 같은 목록이 나오는 화면에서 오른쪽 상단 [ + 버튼 ]을 클릭합니다.



앱의 아이디를 기술합니다.
앱의 이름이라고 생각하시면 될것 같습니다.


앱의 번들 아이디를 입력합니다.
단독적인 앱을 만들때 사용합니다. 
하단에 Wildcard App ID 는 여러개의 앱을 하나의 번들 아이디 그리고 * (wildcard) 로 구분지어 사용하고자 할때 선택합니다.
여기서는 blog.test 라는 번들 아이디를 입력하겠습니다.
입력 후, 하단의 [continue 버튼] 을 눌러주세요.



다음 화면에서 최종 확인을 합니다.
[ Submit 버튼 ]을 눌러주세요.



그럼 다시 목록화면으로 넘어가는데 위의 이미지와 같이 등록한 내용이 보이게 됩니다.



자. 다음으로 하게 될것은 방금 만든 앱 정보와 디바이스간의 연결입니다.

[ + 버튼 ] 을 눌러주세요.



저는 테스트 진행할 디바이스와 연결할 것이므로 [ Ad Hoc ]을 선택후 하단 [ Continue 버튼 ]을 클릭합니다.



만약 이전 App Id를 여러개 만들어 놓았다면 어떤 앱을 연결할 것인지 선택하게 됩니다.



그리고 어떤 개발자 계정으로 할 것인지 선택을 하게 되죠.

여러개가 등록이 되나 봅니다. 아마 Enterprize 계정 때문에 선택하는 화면이 존재 하는 듯 합니다.



어떤 기기에서 테스트를 할 것인지 선택하는 화면입니다.
2부에서 등록한 기기의 목록이 보여집니다.
선택이 완료되면 [ Continue 버튼 ] 을 클릭합니다.


완료되었습니다.
위의 이미지에 [ Download 버튼 ]을 클릭하여 1부에서 개발자 인증서를 내려받듯이 맥에 다운로드를 받습니다.
다운로드 받은 profile을 맥에서 더블클릭 하게 되면 맥에서 자동으로 profile을 등록하여 줍니다.

맥북에 개발자 인증을 하고
어떤 기기에서 테스트 할 것인지 기기 등록을 하고
내가 만들 앱을 등록하여 어떤 기기와 연동을 할 것인지에 대하여 알아보았습니다.


이제 방금 등록한 앱의 Bundle ID를 사용하여 앱을 디자인 하면 됩니다.


연재글 링크

내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발자 등록

내가 만든 iOS앱을 앱스토어에 배포해보자 - 기기 등록




New Multi-Channel Dynamic CMS

내가 만든 iOS앱을 앱스토어에 배포해보자 - 기기 등록

내가 만든 iOS앱을 앱스토어에 배포해보자 - 기기 등록


나의 맥북에 내가 너의 개발자다!! 라고 인식시켰다면

다음으로 해야 할 것은 개발할 기기를 등록해야 합니다.


안드로이드와는 다르게 iOS는

기기의 일련정보를 개발자 사이트에 입력해야

내가 작성한 코드를 USB 연결을 통하여 실제 디바이스 테스트가 가능하기 때문입니다.


실제 디바이스 테스트는 개발자 유료 등록을 마쳐야지만 가능합니다.

만약 나의 앱에 인앱결제가 들어간다면 시뮬레이터로는 테스트가 불가능하기 때문에

필히 개발자 유료 등록하여야 합니다.


USB연결말고도 Ad-Hoc으로 여러사람이 웹에서 다운로드 받아 테스트가 가능하지만

이때도 Enterprize 계정이 아닌 이상 테스트할 사람의 모든 기기정보를 입력해야 합니다.

이 부분은 추후 Ad-Hoc 계정 웹으로 다운받아 테스트하기 포스팅에서 자세히 다루겠습니다.




먼저, 애플의 개발자 사이트에 접속합니다. http://developer.apple.com/ 






왼쪽메뉴에서 [Devices - All 혹은 해당하는 기기]를 클릭합니다.




상단 오른쪽 + 버튼을 클릭합니다. 



 

이곳에서 디바이스의 이름과 UDID를 입력합니다.
디바이스의 이름은 다른 기기와 중복되지 않게끔 내가 알아볼수 있는 편한 이름으로 입력합니다.
추후에 다시 변경할 수 있습니다.

등록 해야 할 기기가 여러대인경우
하단의 Register Multiple Devices 항목을 이용하십시오.
애플이 의외로 친절히 샘플파일까지 제공하고 있습니다.


여기서 중요한 것은 UDID 입니다.
이 정보는 피씨의 iTunes 프로그램에서 기기 연동 후에 확인 하실 수 있습니다.

앱스토어에서 UDID를 읽어준다는 앱을 받아서 등록해 봤는데,
결론은 기기 등록은 되나 연결이 되지 않았습니다.
내가 제작한 앱이 기기에 설치가 되지 않아 한참을 원인을 찾느라 은근 시간을 사용했습니다.
원인은 다운받은 UDID 번호 알려주는 앱이 틀린 정보를 알려주고 있었습니다.

혹시나, 앱스토어에서 UDID 앱 검색해서 설치하신 분들은 되도록이면 iTunes를 이용하시길 바랍니다.
그저 정공법이 최고입니다.



iTunes를 연결하고 ①번을 클릭합니다.
클릭하고 나면 ②번을 확일 할 수 있는데, 우리가 필요한것은 UDID 이므로 일련번호를 클릭합니다.
그럼 이 번호가 토글되어 UDID가 나오는데 안나올경우 나올때까지 클릭하시면 됩니다.
번호 위에서 오른클릭을 하면 복사가 가능합니다.

복사된 번호를 좀전의 개발자 페이지의 UDID 란에 입력하고 하단의 Continue 버튼을 클릭합니다.


 


등록하려는 기기의 정보를 확인하고 Register 버튼을 누르면 디바이스 목록 첫화면으로 돌아가며 등록이 완료됩니다.


기기 삭제에 관하여..

 
기기를 삭제하는 것은 개발자 유료 멤버십이 종료되는 시점(1년)에 초기화가 진행된다고 합니다.
그 이전에는 활성화 / 비활성화만 가능하다 합니다.
실제로 목록에서 사라지지 않습니다.



연재글 링크

내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발자 등록




 

New Multi-Channel Dynamic CMS

내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발자 등록

내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발자 등록

 

 

 

 

iOS 앱을 제작하고 앱스토어에 배포하기 위한 단계를 여러차례 나누어 포스팅 하려 합니다.

먼저 애플 계정이 있다면 https://developer.apple.com/account 접속하셔서 로그인 합니다.

로그인이 완료되면 다음과 같은 화면이 나타납니다. 

여기서 가장 아래에 Join the Apple Developer Program 을 선택합니다

 

 

 

다음 페이지에서 우측상단의 Enroll 버튼을 누릅니다.

 

 

다음 페이지에서 하단의 Start Your Enrollment 버튼을 누릅니다.

 

 

다음 페이지에서 각자에 알맞은 Entity Type을 선택합니다.

 

다음 페이지에서 개인 전화번호와 주소를 입력하시고 Continue 하면 다음과 같이 결제 안내가 나타납니다.

한화로 129,000 원 입니다. 확인 하셨으면 Purchase 버튼을 눌러 구매를 진행합니다.

 

다음 페이지에서 결제 정보를 입력하시고 결제를 완료하게 되면 약간의 심사과정을 통해 애플 개발자로 등록이 됩니다. 

저는 애플 계정 정보와 신용카드 정보가 일치하지 않아 다음날 신분증 사본을 요청하는 메일 받았고 신분증 사본을 업로드하고 그 다음날 개발자 등록이 완료 되었다고 메일을 받았습니다. 저는 이렇게 2일 걸렸네요!!

 

이렇게 구매가 완료가되고 https://developer.apple.com/account 접속하면 구매하기전과 다르게 인증서 관련 메뉴와 아이튠즈 관련 메뉴 등이 나타나게 되어 관련 작업을 수행 할 수 있습니다.

 

※ 앞으로 진행되는 모든과정은 Mac OSX에서만 진행 가능합니다.

 

먼저 개발에 필요한 여러가지 인증서 요청위해서 CSR (Certificate Signing Request) 파일이 필요합니다.

CSR파일을 생성하기 위해선 키체인 접근 을 실행하고 다음과 같이 실행합니다.

 

 

 

 

이렇게 CSR 파일이 생성되면 앞으로 사용할 일이 많기 때문에 잘 보관해 두시길 바랍니다.

이제 IOS앱을 개발 인증서를 발급 받아 보겠습니다.

 

https://developer.apple.com/account/ios/certificate/ 접속하고 좌측 상단에 Certificates 선택합니다.

 

 

새로 인증서를 발급 받을것이기 때문에 + 버튼을 누릅니다.

 

 

크게 DevelopmentProduction 로 나뉘고 여러가지 인증서가 존재합니다.

필요에 따라 원하는 인증서를 생성 할 수 있습니다.

저는 여기서 iOS App Development 인증서를 생성하겠습니다. 원하는 인증서를 선택하고 Continue 합니다.

 

 

여기서 아까전에 생성한 CSR파일이 필요합니다. Choose File 선택하고 CSR파일을 선택하고 Generator 누르면 인증서를 다운로드 받을 수 있습니다. 다운로드 받고 해당 인증서를 파일을 실행하면 키체인에 활성되고 목록에 나타나게 됩니다.

 

 

개발자 등록은 이렇게 끝입니다.

다음 포스팅 부터는 테스트 기기등록과 스토어에 배포까지 해보는 과정으로 진행하겠습니다.


내가 만든 iOS 앱에 대한 더 자세한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 기기 등록 (2)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 개발할 앱 연결과 권한 (3)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - 앱 심사를 위한 준비 (4)

▶ 내가 만든 iOS앱을 앱스토어에 배포해보자 - xCode로 소스 업로드하기 (5)


 

New Multi-Channel Dynamic CMS