PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example

PhoneGap

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example

yaioyaio 2012. 5. 13. 11:20

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example

네이버 카페 : http://cafe.naver.com/mobilewebapp/534

다음 이미지와 같은 예제를 만들 것이다. 지금 작성하는 모든 내용은 Cordova 사이트에 있다.
이클립스(Helios)를 실행한다.
안드로이드 프로젝트를 생성한다.

다음 화면에서 프로젝트명을 다음과 같이 입력 한다. 그리고 Next 버튼을 클릭 한다.

        : Proejct Name - cordovaExample
        : Create new project in workspace 를 선택한다.
        : Use default location 을 체크한다.

다음 이미지와 같이 안드로이드 버전을 체크 한다.

지금부터 실습하는 내용은 폰에서 테스트 해야 하므로 되도록 사용 하고 있는 안드로이드 버전을 선택 하십시오.

지금 제작 하는 본인의 경우는 갤럭스 S2 아이스크림 버전이므로 화면과 같이 Android 4.0.3 을 선택 하였다.

그리고 Next 버튼을 클릭 하여 다음 단계로 넘어 간다.

이번 단계에서는 프로젝트의 기본적인 사항을 셋팅 할 차례이다.

입력할 내용은 다음과 같다.

: Application Name - CordovaExample

: Package Name - com.yaio.example

: Create Activity 를 체크 한다.

: Minimum SDK를 15로 선택 한다.

위와 같이 입력 하고 Finish 버튼을 클릭 하여 프로젝트 생성을 마무리 한다.

다음 이미지는 프로젝트 생성이 완료된 상태의 전체 구성이다.

PhoneGap-1.7.0(Cordova)를 프로젝트 셋팅.
- 이 전에 미리 실습을 하였던 방법과 같은 방법으로 Cordova의 파일을 프로젝트에 추가 한다.

- 추가된 내용을 포함한 프로젝트 전체 구성은 다음 이미지와 같다.
프로젝트 코딩 및 실행.

- 우선 AndroidManifest.xml 파일을 폰에서 사용할 수 있도록 퍼미션 부분등 몇 가지를 추가한다.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.yaio.example"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk android:minSdkVersion="15" />

<supports-screens

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="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.READ_PHONE_STATE" />

<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.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" />

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >

<activity

android:name=".CordovaExampleActivity"

android:label="@string/app_name"

android:configChanges="orientation|keyboardHidden" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

자, 이번에는 index.html 파일을 만들어 보자.

다음 이미지에서의 방법과 같이 파일을 하나 생성하는 팝업창을 띄운다.

팝업창에서 index.html 파일명을 입력 하고 Finish 버튼을 클릭 한다.

프로젝트 생성을 하기 이전 실제 실행된 이미지를 처음에 봤다. 그와 같은 화면 구성을 하기 위해 CSS 를 먼저 만들어 보겠다.

CSS 파일을 생성 하는 방법도 위와 같은 방법으로 진행을 하면 된다.

새롭게 생성 하는 파일명을 master.css 로 한다. 그리고 내용을 다음과 같이 추가 한다.

body {

background:#222 none repeat scroll 0 0;

color:#666;

font-family:Helvetica;

font-size:72%;

line-height:1.5em;

margin:0;

border-top:1px solid #393939;

}

#info{

background:#ffa;

border: 1px solid #ffd324;

-webkit-border-radius: 5px;

border-radius: 5px;

clear:both;

margin:15px 6px 0;

width:295px;

padding:4px 0px 2px 10px;

}

#info > h4{

font-size:.95em;

margin:5px 0;

}

#stage.theme{

padding-top:3px;

}

/* Definition List */

#stage.theme > dl{

padding-top:10px;

clear:both;

margin:0;

list-style-type:none;

padding-left:10px;

overflow:auto;

}

#stage.theme > dl > dt{

font-weight:bold;

float:left;

margin-left:5px;

}

#stage.theme > dl > dd{

width:45px;

float:left;

color:#a87;

font-weight:bold;

}

/* Content Styling */

#stage.theme > h1, #stage.theme > h2, #stage.theme > p{

margin:1em 0 .5em 13px;

}

#stage.theme > h1{

color:#eee;

font-size:1.6em;

text-align:center;

margin:0;

margin-top:15px;

padding:0;

}

#stage.theme > h2{

clear:both;

margin:0;

padding:3px;

font-size:1em;

text-align:center;

}

/* Stage Buttons */

#stage.theme a.btn{

border: 1px solid #555;

-webkit-border-radius: 5px;

border-radius: 5px;

text-align:center;

display:block;

float:left;

background:#444;

width:150px;

color:#9ab;

font-size:1.1em;

text-decoration:none;

padding:1.2em 0;

margin:3px 0px 3px 5px;

}

#stage.theme a.btn.large{

width:308px;

padding:1.2em 0;

}

자, 이번에는 위에서 생성한 index.html 파일을 코딩을 하자. 다음의 내용을 그대로 복사해서 붙여 넣기를 한다.

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

</head>

<h1>Welcome to Cordova!</h1>

<h2>this file is located at assets/www/index.html</h2>

<h4>Platform: <span id="platform">  </span>, Version: <span id="version"> </span></h4>

<h4>Width: <span id="width">  </span>, Height: <span id="height"> 

</span>, Color Depth: <span id="colorDepth"></span></h4>

</div>

</dl>

<a href="#" class="btn large" onclick="toggleAccel();">Toggle Accelerometer</a>

<a href="#" class="btn large" onclick="getLocation();">Get Location</a>

<a href="#" class="btn large" onclick="vibrate();">Vibrate</a>

<a href="#" class="btn large" onclick="show_pic();">Get a Picture</a>

<a href="#" class="btn large" onclick="get_contacts();return false;">Get Phone's Contacts</a>

<a href="#" class="btn large" onclick="check_network();return false;">Check Network</a>

<dl>

<dt>Compass Heading:</dt><dd id="h">Off</dd>

</dl>

<a href="#" class="btn large" onclick="toggleCompass();return false;">Toggle Compass</a>

</div>

</body>

</html>

자, index.html 과 master.css 파일을 생성 하고 소스 코딩을 하였다. index.html 파일의 내용을 보면 onClick에 해당 하는 각종 자바스크립트 함수가 있으며, 상단에 다음과 같은 자바스크립트 파일을 포함하고 있다.

<script type="text/javascript" charset="utf-8" src="main.js"></script>

이제는 main.js 파일을 새롭게 생성 하고 그 안에 소스 코딩을 해 봅시다.

main.js 파일도 위에서 생성한 방법과 마찬가지로 생성 하고 다음과 같이 소스를 코딩 한다.

var deviceInfo = function() {

document.getElementById("platform").innerHTML = device.platform;

document.getElementById("version").innerHTML = device.version;

document.getElementById("uuid").innerHTML = device.uuid;

document.getElementById("name").innerHTML = device.name;

document.getElementById("width").innerHTML = screen.width;

document.getElementById("height").innerHTML = screen.height;

document.getElementById("colorDepth").innerHTML = screen.colorDepth;

};

var getLocation = function() {

var suc = function(p) {

alert(p.coords.latitude + " " + p.coords.longitude);

};

var locFail = function() {

};

navigator.geolocation.getCurrentPosition(suc, locFail);

};

var beep = function() {

navigator.notification.beep(2);

};

var vibrate = function() {

navigator.notification.vibrate(0);

};

function roundNumber(num) {

var dec = 3;

var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);

return result;

}

var accelerationWatch = null;

function updateAcceleration(a) {

document.getElementById('x').innerHTML = roundNumber(a.x);

document.getElementById('y').innerHTML = roundNumber(a.y);

document.getElementById('z').innerHTML = roundNumber(a.z);

}

var toggleAccel = function() {

if (accelerationWatch !== null) {

navigator.accelerometer.clearWatch(accelerationWatch);

updateAcceleration({

x : "",

y : "",

z : ""

});

accelerationWatch = null;

} else {

var options = {};

options.frequency = 1000;

accelerationWatch = navigator.accelerometer.watchAcceleration(

updateAcceleration, function(ex) {

alert("accel fail (" + ex.name + ": " + ex.message + ")");

}, options);

}

};

var preventBehavior = function(e) {

e.preventDefault();

};

function dump_pic(data) {

var viewport = document.getElementById('viewport');

console.log(data);

viewport.style.display = "";

viewport.style.position = "absolute";

viewport.style.top = "10px";

viewport.style.left = "10px";

document.getElementById("test_img").src = "data:image/jpeg;base64," + data;

}

function fail(msg) {

alert(msg);

}

function show_pic() {

navigator.camera.getPicture(dump_pic, fail, {

quality : 50

});

}

function close() {

var viewport = document.getElementById('viewport');

viewport.style.position = "relative";

viewport.style.display = "none";

}

function contacts_success(contacts) {

alert(contacts.length

+ ' contacts returned.'

+ (contacts[2] && contacts[2].name ? (' Third contact is ' + contacts[2].name.formatted)

: ''));

}

function get_contacts() {

var obj = new ContactFindOptions();

obj.filter = "";

obj.multiple = true;

navigator.contacts.find(

[ "displayName", "name" ], contacts_success,

fail, obj);

}

function check_network() {

var networkState = navigator.network.connection.type;

var states = {};

states[Connection.UNKNOWN] = 'Unknown connection';

states[Connection.ETHERNET] = 'Ethernet connection';

states[Connection.WIFI] = 'WiFi connection';

states[Connection.CELL_2G] = 'Cell 2G connection';

states[Connection.CELL_3G] = 'Cell 3G connection';

states[Connection.CELL_4G] = 'Cell 4G connection';

states[Connection.NONE] = 'No network connection';

confirm('Connection type:\n ' + states[networkState]);

}

var watchID = null;

function updateHeading(h) {

document.getElementById('h').innerHTML = h.magneticHeading;

}

function toggleCompass() {

if (watchID !== null) {

navigator.compass.clearWatch(watchID);

watchID = null;

updateHeading({ magneticHeading : "Off"});

} else {

var options = { frequency: 1000 };

watchID = navigator.compass.watchHeading(updateHeading, function(e) {

alert('Compass Error: ' + e.code);

}, options);

}

function init() {

// the next line makes it impossible to see Contacts on the HTC Evo since it

// doesn't have a scroll button

// document.addEventListener("touchmove", preventBehavior, false);

document.addEventListener("deviceready", deviceInfo, true);

}

이제까지는 html, css, js 관련된 코딩을 마무리 하였다.

생성된 모든 폴더와 파일 구조는 다음 이미지와 같다. 지금까지 따라한 내용과 잘 맞는지를 확인해 보세요.

마지막으로 앱을 실행 하면 index.html 이 자동으로 실행이 되도록 CordovaExampleActivity.js 파일을 수정할 차례이다.

CordovaExampleActivity.js 파일은 위의 이미지에서와 같은 위치에 있다. 파일을 더블 클릭 하여 다음과 같이 수정을 한다.

package com.yaio.example;

import android.app.Activity;

import android.os.Bundle;

// public class CordovaExampleActivity extends Activity {

public class CordovaExampleActivity extends DroidGap {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// setContentView(R.layout.main);

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

}

그러면 아래의 이미지처럼 에러 표시가 날 것이다. 이런 에러는 import가 안 되어서 그런 것이니 키보를 다음과 같이 눌러 해당 하는 모듈을 import 하여 에러가 없어 지도록 합시다.

COMMAND + SHIFT + O - 필요한 모듈 자동 import 키보드 단축키.