Appspresso(앱스프레소) 예제로 시작하기 - 설치

국내 기업에서 만들고 있는 하이브리드 앱을 지원하는 플렛폼입니다.
현재 베타 버젼이지만,  html과 css로 만든 웹 페이지를 안드로이드와 아이폰의 앱처럼 만들어 주어
개발하기 편리한 장점을 제공하고 있습니다.  개인적으로는 폰갭보다 개발하기 쉽게 느껴지는데요^^ 
그러나, 아직은 초기이고 베타 버젼이라 폰갭보다 지원하는 API가 적고 버그도 좀 있는듯 합니다.
앞으로 기대가 많이 되는데 개발하시는 분들 화이팅입니다.

지금부터 앱스프레소 사이트에서 제공하는 데모를 사용해서 하나씩 사용법을 알아보려 합니다.
기본적인 이클립스 설치와 SDK설치등은 해당 사이트에 잘 나와있으니 생략합니다.
http://www.appspresso.com/appdev/doc/doc.html

우선, 앱스프레소 사이트에 있는 데모 소스(JQMKitchenSink.zip  )를 다운 받아 놓고,
http://appspresso.com/wp-content/uploads/2011/08/JQMKitchenSink2.zip
( 버젼2가 나오기 전에 작성된 글이라 다운받으신 예제와 상이할 수 있습니다. 예제 링크는 업데이트 해놓았습니다.)

이클립스를 실행시킵니다.
새로운 프로젝트로 만들어 보겠습니다.
매뉴의 file - new - other의 Appspresso project를 클릭하고 next버튼을 누룹니다. 

프로젝트 이름과 타이틀, ID를 아래와 같이 입력하고 finish버튼을 클릭합니다.

그러면 SampleTest라는 프로젝트가 하나 만들어졌습니다.
처음에 다운 받은 예제소스의 압축을 풀면 아래와 같은 폴더들이 보일 겁니다.

이클립스 workspace의 새로 만든 프로젝트 경로로 가서,
다운받은 예제파일 중 xml파일을 제외하고 두개의 폴더만 복사해 줍니다. 

복사가 완료되고 이클립스의 프로젝트 이름을 클릭하고 refresh를 하면,
아래처럼 복사된 많은 파일들이 보입니다.

맨 아래에 있는 project.xml 파일을 더블클릭하고 열어서,
하단에 있는 ios탭을 클릭합니다.
저는 아이폰으로 시뮬레이션 하기 위해 셋팅하는 것인데,
안드로이드로 시뮬레이션 하실분은 Android탭을 클릭하시고 사용하실 target 버젼을 확인합니다.

ios탭을 열고 Certificate Name 항목에 가지고 계신 테스트용 키를 선택합니다.
앱스프레소는 xcode와 달리 배포되어 실행되기 때문에 개발자등록이 필요하고, 증명서 등록이 되어 있어야 합니다.

다시 하단의 feature탭을 클릭하고 사용할 API를 등록하기 위해 모두 체크 합니다.

다 되셨으면 수정한 project.xml를 저장하시면 됩니다.
이제 실행 시킬 준비가 다 되었네요.
프로젝트 이름에 오른쪽 클릭하여 run as - ios를 실행합니다.

그러면 현재 실행 가능한 장치들의 목록이 나옵니다.
실장비인 iphone과 가상 시뮬레이터인 iphonesimulatior가 보이는데,
시뮬레이터로 실행 시켜 보겠습니다.
설치하신 sdk에 따라 버젼이 다르게 보이거나 여러개 보일 수 있으니,  테스트 하고 싶으신 버젼으로 선택하시면 됩니다.

시뮬레이터가 화면에 보이면서 앱스프레소 로고와 함께 예제 소스가 실행되는 걸 볼수 있습니다.
예제 소스의 구성의 보시면 모두 html과 js들인데 아이폰에서 앱처럼 잘 보여집니다.
이 예제는 jQuery Mobile 라이브러리를 사용해서 만들어졌네요.^^

이제 셋팅은 다 되었으니,
디바이스의 기능을 어떻게 사용할 수 있는지 하나씩 알아보도록 하겠습니다.