PhoneGap-1.7.0(Cordova) XCode 4.2 iOS Tutorial 기본 사용법
- phonegap-1.7.0(Cordova)을 사용 하기 위한 요구 사항.
- Mac OSX Lion(10.7) - Install SDK + PhoneGap-1.7.0(Cordova)
- Install Xcode.
: Mac App Store.
- PhoneGap-1.7.0(Cordova) 다운로드
: http://phonegap.com/download
: 위의 주소에서 phonegap 관련 자료를 다운로드 받자.
다음 이미지와 같이 다운로드 폴더에 있을 겁니다. 다운로드 받은 파일의 압축을 해제 한다.
: 압축을 해제한 다음 폴더의 내용을 계속해서 사용을 할 것이니 잘 정리해서 보관해 두자. 다음과 같은 형태의 폴더 구조를 볼 수 있다.
: 위의 이미지에서 Cordova-1.7.0.dmg 파일을 더블 클릭 하여 압축 해제를 합니다.
다음 이미지와 같이 팝업창에서 Cordova-1.7.0.pkg 파일을 더블 클릭 하여 프로그램을 설치 한다.
: 다음 이미지에서 계속을 클릭 하여 다음 단계로 넘어 간다.
: 설치가 완료 되면 다음 이미지에서 닫기를 클릭 하여 설치를 완료 한다.
- PhoneGap-1.7.0(Cordova) New Project.
- 먼저 Xcode를 실행 한다.
- 위의 이미지에서 첫 번째 메뉴인 “Create a new Xcode project”를 클릭 한다. 다음 이미지와 같이 창이 뜬다. 이 창에서 이미지에서 처럼 “Cordova-based Application”를 클릭 한다.
- 다음 이미지와 같이 프로젝트명을 입력한다. 그리고 Next 버튼을 클릭 하여 다음 단계로 넘어 간다.
: Project Name - MyPhoneGapApp
: Company Identifier - com.phonegap
: Use Automatic Reference Counting 을 체크 하지 않는다.
- 이 번 단계에는 폴더를 생성 하는 단계이다. 다음 이미지의 하단에 있는 New folder 버튼을 클릭 하자.
- 다음과 같은 팝업창에 폴더명을 입력 하자. 이미지와 같이 입력을 하셔도 되고, 사용자 편의에 맞게 입력을 하여도 무방하다. 그리고 Create 버튼을 클릭 하여 프로젝트 생성을 마무리 한다.
: Name od new folder - MyPhoneGapApp
- 다음 이미지는 프로젝트 마무리 이후 첫 Xcode 화면의 모습이다.
이제는 실제 PhoneGap-1.7.0(Cordova)를 이용한 코딩과 실행을 할 차례이다. - Xcode 4.2에서의 PhoneGap-1.7.0(Cordova) 코딩과 실행.
- 마지막 프로젝트 셋팅이 완료 되면 화면 중간에 빨간색으로 에러가 있다는 내용이 표시 된다.(만약 이 부분이 없는 사용자는 하지 않고 건너 띄어도 무방하다.)
물론 프로젝트 폴더가 보이는 왼쪽에도 보이고, 상세 정보가 나오는 가운데 상단에도 보인다.
에러의 내용은 간단하게 다음 이미지처럼 몇 군데에서 보인다.
- 소스에서도 확인이 가능하다.
위의 이미지 중 첫 번째에서 main.m 부분을 더블 클릭 하면 새창으로 소스가 보이면서 에러가 있는 부분을 보여 준다.
그 내용은 다음 이미지와 같다.
무엇이 원인인지는 잘 모르겠지만 다음과 같이 수정을 하면 없어진다.
프로젝트의 Supporting Files 폴더에 main.m 파일이 있다. 그 파일을 더블클릭 하여 에디창으로 열어서 수정을 해도 된다.
소스의 31번 라인을 다음과 같이 수정한다. 간단하다 주석 처리하는 것이다. // NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; int retVal = UIApplicationMain(argc, argv, nil, @"AppDelegate"); // [pool release]; return retVal; |
자, 이번에는 AppDelegate.m 파일을 열어서 에러 있는 부분을 수정을 할 것이다.
소스의 72번 라인을 다음과 같이 수정. // self.window = [[[UIWindow alloc] initWithFrame:screenBounds] autorelease]; 이 부분을 주석 처리 하고 다음과 같이 변경 한다. self.window = [[UIWindow alloc] initWithFrame:screenBounds]; 소스의 78번 라인을 다음과 같이 수정. self.viewController = [[MainViewController alloc] init]; 소스의 137번 라인을 다음과 같이 수정. { // [super dealloc]; 이 부분을 주석 처리 한다. } |
이제껏 수정한 내용을 저장 하고 Build를 해 보도록 하자.
빌드를 하기 이전에 다음 이미지와 같이 실행 할 시뮬레이터 버전을 먼저 선택을 한다.
위의 이미지처럼 선택을 완료 하였으면, 왼쪽에 보이는 Run 버튼을 클릭 하여 문제 없이 실행이 되는지 확인을 해 보도록 합시다.
꼭 한번은 해야 할 과정이니 빠트리지 말자. 먼저 Run 을 실행한다.
이렇게 Run 을 아무런 작업 없이 먼저 하는 이유는 나중에 알 수 있겠지만 www 폴더를 찾아 가는 과정이 생기는데 지금 프로젝트에는 포함 되어 있지 않다.
그래서 먼저 Run 을 실행 하고 나면 프로젝트 폴더에 www 이 생기고, 자동으로 index.html 파일과 cordova-1.7.0.js 파일이 같이 생성 된다.
그렇게 생성된 www 폴더를 이후의 작업에서 프로젝트에 포함 시키는 차례가 있다. 그곳에서 이번에 생성 되는 www 를 포함 시키는 방법을 알아 볼 것이다.
아래 이미지 중 왼쪽은 로딩 화면이고, 오른쪽은 실제 앱의 첫 화면이다.
아직은 하이브리드 앱을 제작 하는데 필요한 html 문서가 없기 때문에 찾지 못 한다는 내용의 에러가 보인다.
이제는 하이브리드 앱을 개발 하는데 필요한 작업을 할 차례이다.
우선은 작업에 필요한 파일을 다음 이미지와 같은 방법으로 추가를 할 것이다.
프로젝트에서 다음 이미지처럼 마우스를 이용하여 따라 해 보자.
위와 같이 하면 팝업창이 열릴 것이다. 내용은 다음 이미지와 같다.
자 위에서 보이는 화면의 내용 중 www 라고 되어 있는 폴더를 프로젝트에 추가할 것이다.
다음 이미지에서 보는 것처럼 마우스를 사용 하여 www 폴더를 끌어다 놓는다.
다음 이미지 처럼 보이는 상태에서 Finish 버튼을 클릭 하여 추가 하는 작업을 마무리 한다.
위와 같이 모든 작업이 완료 되었다면 다음 이미지와 같은 상태가 프로젝트에 보일 것이다.
자, 이제는 마지막으로 잘 실행이 되는지 빌드를 해 볼 차례이다. 각자 직접 시뮬레이터로 해 보기를 바란다. 하기에 보이는 이미지와 같이 잘 실행이 될 것이다.
지금까지 Mac에서 Xcode로 하이브리드 앱을 만들기 위해 PhoneGap-1.7.0(Cordova)의 사용법을 간단하게 알아 보았다. 어려운 곳은 없었으니 충분히 잘 따라 하셨을 것이다.
다음 시간에는 예제를 통하여 Cordova에서 하이브리드 앱 제작에 필요한 기능들을 하나 씩 알아 볼 것이다.
다음 내용은 Cordova에서 제공 하는 기능들이다.
- Accelerometer
- Camera
- Capture
- Compass
- Connection
- Contacts
- Device
- Events
- File
- Geolocation
- Media
- Notification
- Storage
프로필. 부서 : 개발팀 직위: 팀장 이름 : 안병도(꼬장) 메일 : yaio@naver.com, 네이버카페 : http://cafe.naver.com/mobilewebapp 트위터 : @yaioyaio 페이스북 : http://www.facebook.com/byoungdo.ahn 워드프레스: http://yaioyaio.wordpress.com/ |