PhoneGap & jQM 으로 스마트폰 앱만들기

node.js로 웹어플리케이션의 프레임워크에 대해서 자료를 찾아보다가 스마트폰앱을 개발하기위한 새로운 방법을 알게되어서 여기에 적어봅니다.

일반적으로 스마트폰의 기종 즉 OS에 따라서 iOS, Android 로 크게 나누어 집니다. 여기 OS에 따라서 개발언어가 다릅니다.

그런데 최근에 jQuery Mobile(jQM) 이라는 자바스크립트 모듈이라는게 있습니다. 앱의 UI를 쉽게 생성할수 있는것 같습니다.

스마트폰이 가지고 있는 기능에 접근하기 위한 자바스크립트 모듈도 있습니다. 그것이 PhoneGap 입니다.

스마트기종별로 템플릿을 만들어서 지원하고 있습니다.

안드로이드로 프로그램을 만들어 보았습니다.

PhoneGap 개발도구 적용하기

1. 개발도구는 이클립스로 정하고 안드로이드 개발환경을 구축합니다.

2. PhoneGap 의 최신버전을 다운로드 받습니다.

3. 안드로이드 신규 앱 프로젝트를 이클립스에서 생성합니다.

4. 생성된 프로젝트에서 PhoneGap 의 템플릿을 파일을 필요한 폴더에 이동시킵니다.

5. assets 폴더안에 www 폴더를 생성하고 안드로이드용 샘플파일을 복사해서 붙여놓습니다.

6. libs 폴더안에 cordova-2.7.0.jar 파일을 붙여놓습니다.

7. res 폴더안에 phonegap-2.7.0\lib\android\xml 폴더을 복사해서 붙여 놓습니다.

8. AndroidManifest.xml 파일에 필요한 내용을 추가합니다.

<supports-screens

        android:largeScreens="true"

        android:normalScreens="true"

        android:smallScreens="true"

        android:xlargeScreens="true"

        android:resizeable="true"

        android:anyDensity="true"

        />

    <uses-permission android:name="android.permission.CAMERA" />

    <uses-permission android:name="android.permission.VIBRATE" />

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.RECEIVE_SMS" />

    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    <uses-permission android:name="android.permission.RECORD_VIDEO"/>

    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

    <uses-permission android:name="android.permission.READ_CONTACTS" />

    <uses-permission android:name="android.permission.WRITE_CONTACTS" />   

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <uses-permission android:name="android.permission.GET_ACCOUNTS" />

    <uses-permission android:name="android.permission.BROADCAST_STICKY" />

9. AndroidManifest.xml 파일에서 Activity 에 속성을 추가합니다.

android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

10.Activity 소스를 수정합니다.

 extends DroidGap 상속받는것으로 바꿉니다. 

그리고 index.html 을 로드할수 있도록 지정합니다.

super.loadUrl(Config.getStartUrl());

//super.loadUrl("file:///android_asset/www/index.html")

jquery mobile 개발도구 적용하기

1. www 폴더안에 css 폴더와 js 폴더에 필요한 파일을 이동 시면서 됩니다.

css 폴더

jquery.mobile-1.2.1.min.css

js 폴더

jquery.js <= jquery 기본 소스

jquery.mobile-1.2.1.min.js <= 모바일용 인터페이스 소스

2. index.html에서 css, js 파일을 가져옵니다.

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.1.min.css" />

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

<script type="text/javascript" src="js/jquery.mobile-1.2.1.min.js"></script>