XPLATFORM Hybrid 앱 개발 및 실행

UX-Studio는 앱을 만드는 직접적인 개발방법을 제공하지는 않습니다. 따라서, 앱은 Android. iOS에서 제공하는 개발환경을 사용하여 만들어야 하며 일반적인 앱 개발 절차에 따르면 됩니다.

앱 개발 환경 설정

Android

Android용 앱은 Eclipse, Android SDK를 이용하여 개발하며 그 방법은 일반적인 앱을 만드는 방법과 동일합니다. Eclipse와 Android SDK를 설치하기 위한 다운로드 및 설명을 제공하는 Google Android 웹페이지는 http://developer.android.com/sdk/installing.html입니다. Eclipse 및 Android SDK는 최신 버전 갱신 주기가 빠르므로 위 웹페이지의 링크를 이용해서 최신 개발환경으로 설치 해야 합니다. 설치 세부 내용은 Eclipse/ADT/ Android SDK 버전이 업데이트 될 때마다 조금씩 변경 되므로 해당 부분의 안내 웹 페이지를 참조하여야 합니다.

Android 개발 환경은 기본적으로 다음과 같은 절차로 진행합니다.

  1. Eclipse 설치

  2. ADT Plugin 설치

  3. Android SDK 설치

iOS

iOS용 앱은 XCode, iOS SDK를 이용하여 개발하며 그 방법은 일반적인 앱을 만드는 방법과 동일합니다. XCode, iOS SDK는 Mac에서만 구동이 가능하므로 최신 버전의 OS X가 탑재 가능한 Mac이 있어야 합니다. 단말기에서 실행을 위해서는 Apple 개발자 계정이 필수로 필요합니다.

iOS 개발 환경은 기본적으로 다음과 같은 절차에 의해 구성되며 세부 내용은 XCode/ iOS SDK 버전이 업데이트 될 때마다 조금씩 변경 되므로 해당 부분의 안내 웹페이지를 참조하여야 합니다. (참조 : http://developer.apple.com/devcenter/ios/index.action )

  1. Apple 개발자 계정 생성

iOS는 테스트 시에도 개발자 계정에 등록된 단말기에서만 테스트가 가능합니다. 따라서 Android와는 다르게 배포 시 뿐만 아니라 개발시에도 개발자 계정이 꼭 필요합니다.iOS App 개발을 위한 Apple 개발자 계정은 아래 웹페이지에서 생성 합니다.
http://developer.apple.com/devcenter/ios/index.action
계정 생성 이후 인증서 생성(개발용/배포용), 테스트 단말기 등록, App ID 생성, 프로비저닝 생성(개발용/배포용)을 진행해야 합니다.
위의 웹페이지에서 생성된 계정으로 로그인 후 우측 iOS Developer Program에서 iOS Provisioning Portal에 진입하여 설정에 필요한 항목을 확인하여 생성할 수 있습니다.

  1. 개발 환경 XCode 설치

XCode는 Apple 개발자 웹페이지 혹은 Mac AppStore를 통해 다운로드/설치 할 수 있습니다. Mac의 OS X Snow Leopard 에서는 App Store 가 기본적으로 탑재 되어 있습니다. 
여기서 XCode를 다운로드 받아 설치 할 수 있습니다.

위의 Mac App Store 가 없다면 OS X를 최신 버전으로 업데이트 해야 합니다. OS X 소프트웨어 업데이트는 화면 좌상단 Apple 로고 모양의 버튼을 클릭하면 메뉴에서 실행 시킬 수 있습니다.

Mac App Store 에서 XCode로 검색하여 XCode를 찾고 설치 버튼을 누르면 XCode와 함께 iOS SDK도 설치가 됩니다.

앱 프로젝트 개발

각 OS에 맞는 앱 개발 툴에서 앱 프로젝트를 개발합니다.

Android

Eclipse에서 아래와 같은 절차에 따라 Android용 앱 프로젝트를 개발합니다.

  1. 앱 프로젝트를 생성합니다.

  1. XPLATFORM.jar를 참조하도록 프로젝트에 추가합니다.

  1. Resource를 추가합니다.

    XPLATFORM Hybrid 지원을 위해 필요한 resource를 다음과 같이 프로젝트에 추가합니다. UX-Studio에서 생성된 hybrid_typedef.xml도 추가 되어야 합니다.

  1. 생성된 Activity가 XPLATFORM Activity를 상속 받도록 수정하고 설치이미지 및 hybrid_typedef.xml을 지정하는 코드를 삽입합니다.

package com.tobesoft.TestTobe;

// [XPLATFORM] XPLATFORM Main Activity import
import com.tobesoft.xplatform.loader.Main;
import android.app.Activity;
import android.os.Bundle;

// [XPLATFORM] XPLATFORM Main Activity 상속 
public class TestTobeActivity extends Main/*Activity*/ {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}
}

  1. Android Manifest를 정리합니다.

    XPLATFORM Hybrid 에서 동작하는 Activity, Receiver 설정을 위해 Anroid Manifest의 Applicaion 태그 안에 아래 정보를 넣습니다.

<application android:icon="@drawable/ic_launcher" 
	android:label="@string/app_name" 
	android:hardwareAccelerated="true">
	<activity android:label="@string/app_name" 
		android:name=".TestTobeActivity" 
		android:configChanges="keyboardHidden|orientation" 
		android:screenOrientation="sensor">
	<activity android:name="com.tobesoft.xplatform.deviceAPI.CameraListener" 	
		android:screenOrientation="landscape">
		<intent-filter>
			<category android:name="android.intent.category.LAUNCHER" />
		</intent-filter>
	</activity>

	<activity android:name="com.tobesoft.xplatform.deviceAPI.SmsSend" >
		<intent-filter>
			<category android:name="android.intent.category.LAUNCHER" />
		</intent-filter>
	</activity>

	<activity android:name="com.tobesoft.xplatform.deviceAPI.FileDialogActivity" 
		android:screenOrientation="sensor">
		<intent-filter>
			<category android:name="android.intent.category.LAUNCHER" />
		</intent-filter>
	</activity>

	<receiver android:name="com.tobesoft.xplatform.deviceAPI.SmsRecv"> 
		<intent-filter> 
			<action android:name="android.provider.Telephony.SMS_RECEIVED" /> 
		</intent-filter> 
	</receiver>

	<receiver android:name="com.tobesoft.xplatform.deviceAPI.SmsRecv"> 
		<intent-filter> 
			<action android:name="android.provider.Telephony.WAP_PUSH_RECEIVED" /> 
			<data android:mimeType="application/vnd.wap.mms-message" />
		</intent-filter> 
	</receiver>

  1. XPLATFORM Hybrid에서 제공하는 MobileAPI를 사용하기 위해 아래 permission도 Android Manifest에 추가합니다.

<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.SEND_SMS" /> 
<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.CALL_PHONE" /> 
<uses-permission android:name="android.permission.READ_SMS" /> 
<uses-permission android:name="android.permission.WRITE_SMS" /> 
<uses-permission android:name="android.permission.BROADCAST_WAP_PUSH" /> 
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 
<uses-permission android:name="android.permission.RESTART_PACKAGES" />
<uses-permission android:name="android.permission.UPDATE_DEVICE_STATS" /> 
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> 
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.GET_TASKS" />

iOS

XCode에서 아래와 같은 절차에 따라 iOS용 앱 프로젝트를 개발합니다.

  1. 앱 프로젝트를 생성합니다.

  1. XPLATFORM.framework를 참조하도록 프로젝트에 추가합니다.(iOS framework도 추가)

framework을 모두 추가하면 다음과 같은 구성이 됩니다.

  1. 설치 이미지를 지정하기 위한 이미지 resource를 추가합니다.

설치 이미지의 상세 내역은 다음과 같습니다.

프로젝트 네비게이터에서 프로젝트를 선택하면 Summary탭이 나타나게 되는데 그 중에서 Launch Images항목을 찾아 아래 그림과 같이 설치이미지를 지정합니다. 지정 후 Default로 시작하는 이미지가 자동으로 만들어지는데 XCode에서 자동으로 생성하여 관리하므로 이름을 변경해서는 안됩니다.

다음은 자동으로 적용되는 Default 이미지의 상세내역 입니다.

  1. UX-Studio에서 생성된 hybrid_typedex.xml 파일을 프로젝트 바로 아래 data 폴더에 추가합니다. hybrid_typedef.xml 파일은 아래와 같이 구성되어 있습니다. (추가/1015)

<?xml version="1.0" encoding="utf-8"?>
<TypeDefinition>
<Update>
<Item systemtype="XP-HybridApp" url="http://127.0.0.1:8080/hybridtest">
<Os type="default" url="./HBDeviceTest">
	<Device type="all" url="./">
		<Resource type="Theme" file="default.zip" targetpath="/_theme_"/>
		<Resource type="Engine" file="Component.zip" targetpath="/" />
		<Resource type="Engine" file="Run.zip" targetpath="/" />
		<Resource type="File" file="Arcive00.xzip" targetpath="/" />
	</Device>
</Os>
<!--
<Os type="Android" url="./Android">
	<Device type="default" url="./">
		<Resource type="Theme" file="default.zip" targetpath="/" />
	</Device>
</Os>
<Os type="IPhone" url="./IPhone">
	<Device type="default" url="./">
		<Resource type="Theme" file="default.zip" targetpath="/" />
	</Device>
</Os>
-->
</Item>
</Update>
</TypeDefinition>

프로젝트를 선택하고 컨텍스트 메뉴에서 [Add files to (project)] 항목을 선택하고 data 폴더를 참조하도록 설정합니다.

  1. 아래와 같은 순서로 에러메시지를 설정합니다. (추가/1015)

각 언어별 ‘Localizable.strings’파일에 에러 메시지를 추가합니다. 에러 메시지 파일은 배포되는 엑스플랫폼 모듈 중 [Engine > errordefile > iOS]에 UTF8 파일 형식의 텍스트 파일로 제공됩니다.

  1. 생성된 AppDelegate가 XPLATFORM AppDelegate를 상속 받도록 수정합니다.

    AppDelegate.h/m 파일을 다음과 같이 수정하여 XPLATFORM.framework이 동작할 수 있도록 합니다.

#import <UIKit/UIKit.h>
#import <XPlatform/XPlatformAppDelegate.h> // [XPLATFORM]

@interface AppDelegate : XPlatformAppDelegate <UIApplicationDelegate>
// 클래스 내부의 코드는 모두 삭제합니다.
@end
#import "AppDelegate.h"

@implementation AppDelegate
// 클래스 내부의 코드는 모두 삭제합니다.
@end
#import <UIKit/UIKit.h>
#import "AppDelegate.h"

int main(int argc, char *argv[])
{
	NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
	int retVal = UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
	[pool release];
	return retVal;
}

  1. 프로젝트 설정을 정리합니다.

    XPLATFORM.framework이 사용하는 iOS framework으로 인해 다음 설정을 Build Settings에 추가 해야 합니다.

앱 생성 및 실행

Android

  1. Android 단말기를 PC에 USB로 연결합니다.

  2. Eclipse에서 Run을 수행합니다. Eclipse의 Run은 APK를 생성 및 단말기에 설치하고 실행까지 할 수 있는 기능입니다.

아래그림과 같이 팝업메뉴를 이용하여 실행할 수도 있습니다.

iOS

  1. iOS 단말기를 Mac에 USB로 연결합니다.

  2. XCode에서 Run을 수행합니다. XCode의 Run은 APP를 생성 및 단말기에 설치하고 실행까지 할 수 있는 기능입니다.