'Cordova' 태그의 글 목록

'Cordova'에 해당되는 글 4건

2012.05.13 PhoneGap-1.7.0(Cordova) Xcode 4.2 iOS Tutorial Example
2012.05.13 PhoneGap-1.7.0(Cordova) XCode 4.2 iOS Tutorial 기본 사용법
2012.05.13 PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example
2012.05.13 PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법

PhoneGap-1.7.0(Cordova) Xcode 4.2 iOS Tutorial Example

PhoneGap-1.7.0(Cordova) Xcode 4.2 iOS Tutorial Example

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

PhoneGap-1.7.0(Cordova) 사이트에서 제공 하는 다음과 같은 내용을 제작 하고 테스트 할 것이다.
제작 되어 보여 지는 내용은 다음 이미지와 같다.

위의 이미지는 PhoneGap-1.7.0(Cordova) 에서 제공 하는 기능은 전체 들어간 예제이다. 이 번 실습에서는 단순히 테스트용으로만 제작을 할 것이며, 각각의 기능에 대한 상세한 설명은 하지 않을 것이다.

하이브리드 앱을 제작 하고자 하는 많은 분들께, 간단한 테스트로서 기능만을 맛 보기 위해서 하는 작업이다.

작업은 Xcode 4.2 와 PhoneGap-1.7.0(Cordova) 를 가지고 할 것이지만 실제 테스트는 폰으로 연결 하여 잘 실행이 되는지를 직접 확인 하시기를 바란다.

실제 전체 소스는 제공 되지 않지만 안드로이드용의 소스를 가지고 Xcode에 포팅 하는 과정으로 보시는 것이 더 좋을 것이다.

PhoneGap-1.7.0(Cordova) 을 사용한 하이브리드 앱의 가능성을 개인의 판단으로 미루고 본격적으로 준비 및 코딩과 실행을 해 보도록 합시다.

Xcode 4.2 에서 PhoneGap-1.7.0(Cordova) 의 Example 프로젝트 셋팅.

- 이 전에 Xcode 4.2 에 PhoneGap-1.7.0(Cordova)를 설치 하고 간단한 프로젝트를 하난 만들어 봤기 때문에 설치 과정은 하지 않기로 한다.

- 먼저 Xcode를 실행 하자.

- 다음과 같이 프로젝트를 생성 한다.

- 위의 이미지에서 Next 를 클릭 하면 다음과 같은 화면에서 프로젝트명과 패키지명등을 설정한다.

        : Project Name - CordovaExample
        : Comapny Identifier - com.cordova.example
        : Use Automatic Reference Counting 은 체크 하지 않는다.

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

- 다음과 같은 화면이 나오면 왼쪽의 New Folder 버튼을 클릭 한다.

- 다음과 같은 화면에서 CordovaExample 이라고 폴더를 입력 하고 Create 버튼을 클릭 한다.

- 그리고 마지막으로 나오는 다음 화면에서 Create 버튼을 클릭 하여 프로젝트 생성에 필요한 모든 과정을 마무리 한다.
Xcode 4.2 프로젝트내 PhoneGap-1.7.0(Cordova)를 사용 하기 위한 준비.

- 우선 앱을 테스트 하기 위한 시뮬레이터를 먼저 선택 하자.

- 먼저 실행을 먼저 해 보자.

이렇게 먼저 하는 이유는 하이브리드 앱을 개발 하기 위해서 필요한 것이 www 폴더 인데, 지금은 그 www 폴더가 없다. www 폴더를 만들어 내기 위해서 Run 을 클릭 하여 www 폴더가 내부적으로 자동으로 생성 되게 하기 위한 것이다.

물론 index.html 파일과 cordova-1.7.0.js 자바스크립트 파일도 같이 생성이 된다.

- 다른 하이브리드 앱을 제작 한다고 하면, 지금 하는 과정은 필히 빠트리지 않도록 주의 합시다.
- 자, 이번에는 위에서 말한 www 폴더가 자동으로 생성이 되었는지 확인도 하고 프로젝트에 www 폴더를 추가 하는 작업을 하도록 합시다.

다음 이미지와 같이 해 보자. 상단의 프로젝트를 마우스로 오른쪽 버튼 클릭 하면 Show in Finder 메뉴가 나올 것이다 그 것을 클릭해 보자.

팝업창이 하나 뜰 것이다. 거기에 www 폴더를 마우스로 끌어서 다음 이미지와 같이 프로젝트에 추가를 한다.

그리고 나오는 팝업창에서 다음 그림과 같이 선택을 한 다음 Finish 버튼을 클릭 하여 프로젝트에 추가 하는 작업을 마무리 한다.
PhoneGap-1.7.0(Cordova) 에서 제공 하는 Example 코딩.

- 위에서 완료된 작업의 구조를 보면 다음 이미지와 같이 나온다.

- 지금 바로 Run 을 클릭 하여 바로 테스트를 해 보자. 추가한 내용이 잘 되는지만 확인을 하면 된다. 다음 이미지와 같이 나오면 정상적으로 지금까지 작업이 잘 된 것이다.

- www 폴더에서 마우스로 오른쪽 버튼을 클릭 하여 New File... 를 클릭 한다.
다음과 같은 팝업창에서 선택을 하고 클릭을 하면 파일이 자동으로 생성 된다.
이와 같은 방법으로 프로젝트에 사용할 파일을 몇 개 생성을 하자.
: master.css, main.js 2개의 파일.

- 생성한 다음의 파일 구조는 다음 이미지와 같다.

- 자, 이제는 파일 하나씩 코딩을 해 보도록 합시다.
우선 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>

이 번에는 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;

}

마지막으로 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);

}

- 전체적으로 테스트에 필요한 모든 작업은 끝이 났다. 지금까지 한 내용이 잘 되는지를 Run 을 클릭 하여 실제 폰에서 테스트 해 보자.

- 실제 폰에서의 실행된 화면들의 캡쳐이다.

- 다음 시간에는 Cordova 에서 제공 하는 각 함수를 천천히 살펴 보기로 하자.

- 다음 내용은 Cordova에서 제공 하는 기능들이다.

Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage

프로필.
소속: (주)애드웹커뮤니케이션

부서 : 개발팀

직위: 팀장

이름 : 안병도(꼬장)

메일 : yaio@naver.com,
yaioyaio@gmail.com,
program@adweb.co.kr

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

트위터 : @yaioyaio

페이스북 : http://www.facebook.com/byoungdo.ahn
페이스북그룹 : http://www.facebook.com/groups/korea.sencha/

워드프레스: http://yaioyaio.wordpress.com/
티스토리 : http://senchatouch.tistory.com/

저작자표시 비영리 동일조건 (새창열림)

'PhoneGap' 카테고리의 다른 글

PhoneGap-1.7.0(Cordova) XCode 4.2 iOS Tutorial 기본 사용법 (0)	2012.05.13
PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example (0)	2012.05.13
PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법 (0)	2012.05.13

Posted by yaioyaio

PhoneGap-1.7.0(Cordova) XCode 4.2 iOS Tutorial 기본 사용법

PhoneGap-1.7.0(Cordova) XCode 4.2 iOS Tutorial 기본 사용법

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

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");

소스의 33번 라인을 다믕과 같이 수정한다. 간단하다 주석 처리하는 것이다.

// [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] autorelease]; 이 부분을 주석 처리 하고 다음과 같이 소스를 변경한다.

self.viewController = [[MainViewController alloc] init];

소스의 137번 라인을 다음과 같이 수정.

- (void) dealloc

{

// [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,
yaioyaio@gmail.com,
program@adweb.co.kr

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

트위터 : @yaioyaio

페이스북 : http://www.facebook.com/byoungdo.ahn
페이스북그룹 : http://www.facebook.com/groups/korea.sencha/

워드프레스: http://yaioyaio.wordpress.com/
티스토리 : http://senchatouch.tistory.com/

저작자표시 비영리 동일조건 (새창열림)

'PhoneGap' 카테고리의 다른 글

PhoneGap-1.7.0(Cordova) Xcode 4.2 iOS Tutorial Example (0)	2012.05.13
PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial Example (0)	2012.05.13
PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법 (0)	2012.05.13

Posted by yaioyaio

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

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 키보드 단축키.

다음 이미지는 에러가 없어진 상태의 소스 코드 이다.

자, 실제 모든 작업이 완료 되었다. 이제는 모든 것을 저장 하고 실행을 해 보도록 합시다.

앞으로 우리가 하나 씩 찾아 볼 Cordova에서 제공 하는 함수들을 알아 보기 이전에 전체적인 내용이 들어간 간단한 예제를 한 것이다.

정확히 어떤 것이 어떤 역활을 하는지 대하여 여기서 설명을 하지 않겠다. 단지, 하이브드리앱 개발을 시작 하기 이전에 Cordova에서 제공 하는 것들을 간단하게 경험을 할 뿐이다.

다음에 보여 주는 이미지들은 갤럭시 S2에서 실행한 화면을 캡쳐한 내용이다.

일부 캡쳐를 할 수 없는 것도 있지만 참고 하시기를 바란다.

위의 이미지는 다시 한번 말씀 드리지만, 갤럭시 S2에서 실행한 화면들이다.

아이폰용은 폰이 준비 되는 데로 테스트 하여 올려 드리겠습니다.

다음 시간에는 Cordova 에서 제공 하는 각 함수를 천천히 살펴 보기로 하자.

다음 내용은 Cordova에서 제공 하는 기능들이다.

Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage

프로필.
소속: (주)애드웹커뮤니케이션

부서 : 개발팀

직위: 팀장

이름 : 안병도(꼬장)

메일 : yaio@naver.com,
yaioyaio@gmail.com,
program@adweb.co.kr

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

트위터 : @yaioyaio

페이스북 : http://www.facebook.com/byoungdo.ahn
페이스북그룹 : http://www.facebook.com/groups/korea.sencha/

워드프레스: http://yaioyaio.wordpress.com/
티스토리 : http://senchatouch.tistory.com/

저작자표시 비영리 동일조건 (새창열림)

'PhoneGap' 카테고리의 다른 글

PhoneGap-1.7.0(Cordova) Xcode 4.2 iOS Tutorial Example (0)	2012.05.13
PhoneGap-1.7.0(Cordova) XCode 4.2 iOS Tutorial 기본 사용법 (0)	2012.05.13
PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법 (0)	2012.05.13

Posted by yaioyaio

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법

PhoneGap-1.7.0(Cordova) Eclipse Helios Mac용 Android Tutorial 기본 사용법

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

phonegap-1.7.0(Cordova)을 사용 하기 위한 요구 사항.
- 이클립스 3.4 이상 버전.(Helios, Indigo)
Install SDK + PhoneGap-1.7.0(Cordova)
- Eclipse Classic.
        : http://www.eclipse.org/downloads/
        : 다운로드 및 설치.(설치는 압축을 해제 하는 것으로 끝난다.)

- Android SDK.
        : http://developer.android.com/sdk/index.html
        : 다운로드 및 설치.

- ADT Plugin.
        : http://developer.android.com/sdk/eclipse-adt.html#installing
        : 다운로드 및 설치.

- PhoneGap-1.7.0(Cordova)
        : http://phonegap.com/download
        : 위의 주소에서 phonegap 관련 자료를 다운로드 받자.
         다음 이미지와 같이 다운로드 폴더에 있을 겁니다. 다운로드 받은 파일의 압축을 해제 한다.


        : 압축을 해제한 다음 폴더의 내용을 계속해서 사용을 할 것이니 잘 정리해서 보관해 두자. 다음과 같은 형태의 폴더 구조를 볼 수 있다.
PhoneGap-1.7.0(Cordova) New Project.

- 위의 4가지 사항은 별도로 구글링을 하면 아주 자세히 나와 있다. 조금 시간이 걸리는 작업 이지만 천천히 인내를 가지고 작업해 보시기를 바랍니다.

- 이클립스를 실행하자.
- New > Android Proejct를 클릭 한다.

- 다음 그림과 같이 프로젝트명등 필요한 정보를 입력 하자.
        : 프로젝트명을 HelloCordova 로 입력 한다.
        : Create new project in workspace 를 체크 한다.
        : use default location 도 같이 체크 한다.
        : 하단의 Next 버튼을 클릭 한다.

- 다음 이미지에서 보이는 것처럼 최신 안드로이드 버전인 Android 4.0.3 을 체크 한다. 그리고 Next 버튼을 클릭 하고 다음으로 넘어 간다.

- 다음 이미지와 같이 내용을 입력 및 수정 한다.
        : Application Name - HelloCordova 를 입력한다.
        : Package Name - com.yaio.Hello 를 입력한다.
        : Create Activity 를 체크 한다. 이름은 그대로 사용한다.
        : Minimum SDK 15로 그대로 사용한다.
        : Finish 버튼을 클릭 하여 셋팅을 마무리 한다.

- 이제 기본적으로 프로젝트의 셋팅을 완료 하였다. 다음 차례는 실제 작업에 필요한 정보를 정리할 단계이다.
프로젝트에 필요한 PhoneGap-1.7.0(Cordova) 셋팅.
- 이 단계에서는 앞으로 코딩을 하고 앱으로 제작하기 위한 기본적인 작업을 할 차례이다.
- 위에서 생성한 프로젝트에 2가지 폴더를 생성할 것이다.
: /libs, /assets/www
- 다음 그림과 같이 프로젝트를 선택 하고 마우스 오른쪽 버튼을 클릭하여 찾아 간다.

- 하단의 Floder name 이라는 빈 칸에 “libs”라고 입력 하고 Finish를 클릭한다.

- 이 번에는 “/assets/www” 폴더를 생성할 것이다. 위와 같은 방법으로 폴더를 생성한다.
방법은 다음 이미지와 같이 따라 하면 된다.

- 폴더명을 다음 이미지와 같이 입력을 하고 Finish를 클릭 하여 완료 한다.

- 폴더 생성을 완료 하였다. 다음은 생성한 폴더에 phonegap 코딩 작업에 필요한 파일을 옮겨 놓을 차례이다.

- 방법은 이미지와 같은 방법을 따라 하시면 된다.
이클립스 프로젝트 화면 상태에서 그대로 진행을 하시면 됩니다.

- 먼저 다운로드 받아서 옮겨 놓은 Finder를 찾아서 cordova-1.7.0.jar 파일을 프로젝트의 libs 폴더에 마우스로 끌어 옮겨 놓는다.

- 이 번에는 cordova-1.7.0.js 자바스크립트 파일을 마우스로 끌어서 프로젝트의 assets/www 폴더에 옮겨 놓는다.

- 마지막으로 다음 그림과 같이 xml 폴더를 프로젝트의 /res 폴더에 옮겨 놓을 차례이다. 그림과 같이 마우스로 끌어서 옮겨 놓는다.

- 작업에 필요한 파일은 모두 옮겨 놓았다. 개발에 필요한 파일을 옮겨 놓은 전체 구조는 다음 이미지와 같다.

지금까지 따라한 내용과 일치 하는지 확인을 다시 해 보시고 틀린 곳이 있으면 수정 하시기를 바랍니다.

- 이 번에는 cordova-1.7.0.jar 파일을 사용 가능하도록 Android Dependencies에 등록을 시킬 차례이다.

다음 그림처럼 프로젝트를 마우스로 오른쪽 버튼 클릭 한 다음 Build Path를 클릭 한다.

다음은 Configure Build Path... 를 클릭 한다.

다음은 해당 하는 탭에서 “Add JARs...” 버튼을 클릭한다.

다음은 팝업창에서 이전에 작업한 cordova-1.7.0.jar 파일을 찾아서 OK 버튼을 클릭한다.

지금까지 작업한 결과는 다음 이미지와 같이 보일 것이다.
프로젝트 코딩 및 앱 실행.
- 지금까지는 코딩 및 실행을 하기 위한 사전 작업을 마무리 하였다. 이제는 실제 코딩을 간단하게 해 볼 차례이다.

- 우선 src/com.yaio.Hello 폴더에 있는 HelloCordovaActivity.java 파이을 열어 보자.
내용은 다음과 같이 되어 있다.

- 위의 내용을 다음과 같이 수정을 할 것이다.

package com.yaio.Hello;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class HelloCordovaActivity 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");

}

- 다음은 안드로이드용 AndroidManifest.xml 파일을 수정할 차례이다.

이 AndroidManifest.xml 파일에는 앱이 실행하는데 필요한 기본적인 정보들이 셋팅 되어 있다.

물론 앱이 실행 되어질때 퍼미션 관련한 내용도 같이 정해 주고, 단말기의 회전 여부에 따라 앱의 화면도 변경 될 것인지를 설정 하는 부분도 있다.

다음 이미지는 AndroidManifest.xml  파일의 기본 소스이다.


        위와 같은 내용을 다음과 같이 수정을 할 것이다.

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

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

package="com.yaio.Hello"