Code Strong, Code Jong!

Less Coding, More Thinking. 의미있는 딴짓, 함께하는 즐거움, 잔머리, 옆짱구, 유기농 곱슬머리, Creative Commons Korea, Titanium Certified Expert, Titan, TiDev.kr Lee, Jongeun

[codejong-blog-blog]

Sublime Text 2을 이용한 Titanium Mobile 개발 - 1

들어가기에 앞서

Titanium을 선택한 가장 큰 이유는 내가 경험과 현재 내 환경, 그리고 앞으로 예상되는 내 근무환경을 고려했을 때 가장 빠른 모바일 앱 개발 도구라고 생각하기 때문이다. 이에 따라 지속적으로 더욱 빠른 개발 환경에 대해 관심이 많다.

그 첫번째로 Sublime을 이용한 Titanium 개발 환경 설정에 대해 간단히 정리해본다. 가장 큰 참고가 되었던 포스트는 다음과 같다.

http://unbounded.io/post/56849030130/titanium-workflow-maximize-your-productivity

Titanium Command Line Interface

Titanium Studio를 설치하면 cli등이 함께 설치되므로 설정 방법은 생략한다. cli로 프로젝트 생성과 alloy 프로젝트화 시킬 때 alias를 ~/.bash_profile에 등록해두면 편리하다.

# create a new titanium project (pass the project name) alias tica="titanium create -p ios,android -d . -n" # adds alloy to a project alias aln="alloy new ."

이렇게 추가하고 나면 터미널에서 다음과 같이 프로젝트를 생성 할 수 있다.

tica NameOfApp <enter> (enter app ID when prompted) cd NameOfApp <enter> aln <enter>

Sublime Text 2

Sublime Text 2 버전을 기준으로 한다.

Sublime Text 2 설치 : 다운로드는 여기에서 가능하다. Titanium Build를 설치하면 되나 몇가지 버그가 있어 fork해서 수정한 제 Github 저장소(https://github.com/yomybaby/sublime-ti-build) 파일을 사용해도 좋다. (android emulator 실행 버그와 iphone-retina-tall 실행 버그를 수정했다.)

Sublime pakage 설치방법

pakage를 다운받는다. (상단 링크 확인)

리파지 토리의 파일을 submlime 실행 후 메뉴의 Sublie Text 2 클릭->Preferences->Browser Packages 를 선택하면 해당 폴더가 열리고 해당 폴더에 다운받은 pakage를 폴더 째로 넣는다.

sublime을 재시작한다.

Cmd+O를 눌러 titanium Project 폴더를 선택한다.

메뉴에서 Tools->Build System->Titanium을 선택한다.

Build 단축키인 Cmd + B를 눌러 Build를 실행한다.

앞으로..

Sublime을 이용한 Titanium 개발을 해보면서 알게되는 내용들은 계속해서 시리즈 형태로 글을 써볼 예정이다.

[codejong-blog-blog]

빠른 Titanium Android 개발을 위해서 x86 에뮬레이터를 이용하라 (2) - FastDev

FastDev란?

FastDev란 titanium에서 android 앱 개발시 코드 변경사항을 빠르게 확인 및 테스트 할 수 있는 도구를 말합니다.

FastDev 동작방식

간단히 설명하자면 emulator에서 앱이 실행될 때 설치되는 앱 패키지(apk) 파일 안의 js를 사용하는 것이 아니라 FastDev서버를 통해 필요할때 마다 파일을 받는 방식입니다. 따라서 코드를 변경한 후 앱만 재실행 하면 바로 변경되거나 추가된 내용을 에뮬레이터에서 실행/확인 가능합니다. FastDev서버는 해당 프로젝트의 Resource폴더의 파일을 에뮬레이터에게 network를 통해 전달하는 방식입니다. 네트워크로 전달하지만 전부 local에 존재하기 때문에 느리거나 하지 않습니다.

FastDev를 사용하려면

현재버전 3.1.x.GA를 기준으로 프로젝트를 생성하고 android emulator로 구동하면 기본적으로 fastdev가 활성화 되어 있습니다. 따라서 titanium studio에서 emulator로 실행을 합니다. 이때 console에 찍히는 로그를 보면 [INFO] Fastdev server running, deploying in Fastdev mode라고 적혀있을 겁니다. 정상 작동한다는 얘기입니다. 간단하죠? 이제 코드를 변경하고 프로젝트 빌드나 에뮬레이터 재시작 없이 앱만 재실행하면 바로 변화된 내용을 살펴볼수 있습니다. 앱을 재실행하는 방법은

앱 재시작 방법

주의사항 1) Alloy프로젝트라면 변경된 코드를 확인하기 위해 앱을 재실행 하기에 앞서 Alloy compile을 해야합니다.1 주의사항 2) 아래서 설명하는 재시작이 정상적으로 동작하려면 처음 열리는 윈도우가 Heavywindow(Activity)가 되어야 합니다.2

ADB 명령어를 이용하는 방법 실행중인 appid를 알아야 합니다. 그리고 시작하는 Activity를 알아야 합니다. 따로 manifest쪽을 수정하지 않았다면 /.ProjectnameActivity입니다. (Activity이름은 project이름의 대소문자 원래 어떤지는 상관없이 첫글짜만 대문자로 변경됩니다.)

adb shell am force-stop com.xyz.package; adb shell am start -n com.xyz.package/.ProjectnameActivity

수동으로 Emulator의 Backbutton을 눌러 앱을 종료시키고 앱 아이콘을 눌러 시작한다.^^

Titanium.py(fastdev.py)를 이용하는 방법 Node기반의 Titanium CLI이전에 있던 titanium.py3를 이용하면 아래와 같습니다.

titanium.py fastdev restart-app

그런데 restart-app은 정상적으로 동작하지 않습니다. 그래서 해결해보려고 하다가 fastdev kill-app을 이용해보니 마치 재시작 처럼 됩니다. 이것도 버그지만 오히려 득이되네요. :) FastDev명령어를 이용하는 방법의 장점은 현재 fastdev로 실행중인 앱의 패키지 id나 activity이름을 몰라도 된다는 점입니다.

앱 재시작을 Titanium Studio 단축키로 설정하기

Titanium Studio를 이용할 경우 명령어를 External Tool을 통해 실행시키고 이를 단축키로 설정해 놓으면 편리합니다. (예정) 단축키를 통해 node.js를 실행하여 ios-sim과 fastdev를 손쉽게 할 수 있는 방법은 조만간 다른 포스트를 통해 공개하겠습니다.

Fastdev가 잘 안되시나요?

fastdev는 간혹 연결이 끊어지거나 분명 fastdev서버가 켜져있는데도 찾을 수 없다고 일반 모드로 실행 될때가 있습니다. 이건 알려진 문제로 Appcelerator Doc에도 나와 있습니다. 이때는 emulator를 재시작하면 되고 그래도 안되면 재부팅하면 되긴하더군요. 어떤상황에 잘 끊긴다 이런건 아직 찾지 못했어요. 혹시 이부분에 대해 아시는 분 있으면 알려주세요.

마무리

처음 fastdev가 나왔을때 써보고 정말 좋다고 생각했었습니다. 그런데 문제는 emulator 자체가 너무 느렸죠. 그러나 요즘은 x86 이미지를 이용하면 빠르다보니 fastdev의 장점을 살릴 수 있는것 같습니다. 원래 appcelerator의 계획은 fastdev를 device상에서도 가능하게 한다고 했는데 소식이 없네요. fastdev는 아직도 몇가지 문제가 있지만 워낙 편리하다보니 fastdev를 사용 안할 수가 없네요. 특히 ui를 만들어가면서 하나씩 수정할 땐 정말 빠르게 확인 가능해서 좋습니다. fastdev, tishadow, ios-sim은 상황과 목적에 맞게 잘 활용한다면 개발자의 소중한 시간을 아껴주는데 큰 도움이 되는 도구들 입니다.^^

도움이 될만한 링크

빠른 Titanium Android 개발을 위해서 x86 에뮬레이터를 이용하라 (1) : http://codejong.net/post/55735837946/titanium-android-x86-1

fastdev : http://docs.appcelerator.com/titanium/3.0/#!/guide/Fastdev_Reference_for_Android

tishadow : http://tishadow.yydigital.com

tishadow 활용방법 : http://codejong.net/post/51276937188/tishadow

app 재시작시 restart 한다는 alert가 나오는 경우 <property name="ti.android.bug2373.finishfalseroot" type="bool">true</property>를 tiappl.xml에 추가하면 해결됩니다. https://jira.appcelerator.org/browse/TIMOB-9285

Alloy일 경우 아래와 같이 한 줄 명령어로 fastdev까지 실행하면 편합니다.

alloy compile -c platform=android && titanium.py fastdev kill-app

↩︎

Window 생성시 fullscreen, navBarHidden, modal, windowSoftInputMode를 명시적으로 지정하면 Heavyweight window가 됩니다. 자세한 사항은 Appcelerator Doc의 Android Heavyweight and Lightweight Windows를 참고하세요. ↩︎

titanium.py를 이용하기 위해선 ~/.bash_profile에 alias 설정이 되어 있어야 합니다.

alias titanium.py="$HOME/Library/Application\ Support/Titanium/mobilesdk/osx/3.1.1.GA/titanium.py"

↩︎

[codejong-blog-blog]

Android Emulator가 에러와 함께 실행되지도 삭제 되지도 않을 때

애써 이것 저것 다 설정해 둔 avd가 위와 같이 "emulator 가 예기치 않게 종료되었습니다."라는 메시지와 함께 실행이 되지 않을 때가 있습니다. (영어로는 emulator xx-xxx quit unexpectedly. 라고 나오더군요.)

이때는 1. ~/.android/avd 로 이동하시고 cd ~/.android/avd 2. 문제가 일어난 avd 폴더 안으로 들어갑니다. 예를 들면 cd titanium titanium_8_HVGA_x86.avd' 3. emulator-user.ini 파일을 지웁니다.rm emulator-user.ini`

다시 실행해보면 정상 작동 됩니다.^^

추가

근데 왜 이런 현상이 자꾸 발생하는지 살펴보았습니다.

그건 맥에서 듀얼모니터를 쓸 경우 emulator를 주모니터가아닌 보조 모니터로 보낸 상태에서 emulator를 종료했을 때 다음번에 실행하면 이런 형상이 발생하네요. emulator-user.ini에 종료시 위치가 저장되기때문에 이 파일을 삭제하면 정상 작동 하는 원리였습니다. 구글님.. 빨리 해결해주세요. -_-

[codejong-blog-blog]

빠른 Titanium Android 개발을 위해서 x86 에뮬레이터를 이용하라 (1)

Android 개발시 무조건 디바이스가 빠르다는 생각은 버리세요.^^ Titanium 개발에 있어 에뮬레이터 가 더 빠른 개발 환경을 일 수 있습니다. (디바이스 테스트를 할 필요가 없다는 얘기가 아닙니다. Titanium 개발 과정에서 작성한 코드를 실행해서 확인하기 위해서는 Emulator가 더 좋다는 이야기 입니다.) 이와 관련하여

첫번째로 이 글에서는 빠른 x86 에뮬레이터 설정에 대해 이야기합니다.

두번째 글 에서는 titanium fastdev 활용하여 더 빠른 실행에 대해 이야기합니다.

일단 Device실행과 x86 Emulator의 실행 속도 비교를 위한 영상을 보세요.

[Titanium] Android Device vs Android x86 Emulator (by JongEun Lee)

위에서 사용한 x86 Emulator의 설정은 다음과 같습니다. (avd의 config.ini)

avd.ini.encoding=ISO-8859-1 hw.mainKeys=no hw.lcd.density=160 hw.cpu.arch=x86 skin.name=320x528 abi.type=x86 sdcard.path=/Users/yomybaby/.titanium/titanium_8_HVGA_x86.sdcard image.sysdir.1=system-images/android-16/x86/ hw.gpu.enabled=yes hw.gps=yes skin.path=320x528 hw.keyboard=yes vm.heapSize=48 hw.ramSize=512

저랑 똑같이 설정하시려면 다음과 같이 하면 됩니다.

일단 하드웨어 가속을 위해 Intel® Hardware Accelerated Execution Manager를 해당 OS버전으로 설치합니다.

Avd 생성되어 있지 않다면 Titanium에서 해당 프로젝트를 Android Eumlator로 실행합니다. (앱이 완전히 실행될때까지 기다리지 않고 적당히 emulator가 실행되면 종료해도 됩니다.)

Run Configurations 에서 위에서 생성된 해당 앱의 실행 환경을 선택하고 오른쪽 설정화면에서 아래와 같이 x86 API HVGA를 선택해줍니다.

다시 run을 누르고 적당히(?) 에뮬레이터가 켜지면 (상단의 나온 이름을 기억합니다. titanium_8_HVGA_x86) 에뮬레이터를 종료합니다.

해당 ~/.android/avd/해당avd이름.avd/ 안에 config.ini 의 내용을 아래와 같이 변경합니다.

avd를 다시 실행합니다.

참고로 x86 4.1.2 를 선택한 이유는 x86 4.2.2에는 한글 폰트가 없어서 한글이 나오지 않습니다. 또한 x86 이미지에는 google api가 포함되어 있지 않습니다. 구글 api를 사용하기 위해서는 Appcelerator Blog 글을 참고해서 설정하면 됩니다.

ios-sim, fastdev를 이용하여 에뮬레이터나 시뮬레이터 재실행 없이 바로 변경된 코드를 확인하는 영상입니다. 이와 관련된 내용은 두번째 글에서 다루겠습니다. 맛보기로 영상을 먼저 공유합니다.

[codejong-blog-blog]

TiShadow 활용방법

TiShadow?

TiShadow를 사용하면 앱을 개발시 여러 디바이스나 시뮬레이터에 빠르게 앱을 실행 시킬 수 있다. 어떻게 빠르게 실행하는 것일까? 기본 방법과 tishadow 방법에 대한 설명으로 비교하겠다.

기존 실행 방법 : 앱을 개발할 때 앱을 디바이스에 실행하려면 해당 앱에 해당하는 native 프로젝트를 빌드해서 앱파일을 생성(ipa, apk)하고 이 파일을 디바이스로 옮기게 된다. 여기서 프로젝트 빌드 시간이 오래 걸린다.1

TiShadow의 실행 방법 : TiShadow는 Titanium으로 개발된 app들은 javascript 코드를 runtime에 실행한다는 특징을 살려서 변경된 코드(Resource)를 네트워크(소켓)을 통해 전송하고 다시 app.js 부터 다시 시작하는 원리이다. 그러므로 다시 네이티브 코드를 빌드하거나 앱 파일(ipa,apk)를 전송하거나 하고 심지어 앱도 종료 되는 것이 아니라 앱이 켜진상태에서 app.js를 다시 실행한다.2

설치방법 및 기본 사용법

설치 방법은 TiShadow Github및 타이타늄 개발자 커뮤니티의 정영석 님 글에 잘 설명되어 있다.

Room

room은 하나의 tishadow 서버를 여러 방으로 나누어서 여러 앱이나 플랫폼 더나아가 여러 개발자들이 동시에 사용가능하다록 해주는 기능이다. 개인적으로 이 room을 사용하는 경우는 alloy프로젝트를 iOS, Android 대상으로 동시에 개발할 때이다. 이때 room을 사용하지 않을 경우 다음과 같은 문제가 있다. tishadow서버에 아이폰 안드로이드 전부 연결되어 있는 상태에서 iOS에서 확인하기 위해 alloy compile -c platform=ios && tishadow run 실행하면 android 폰에까지 iOS용으로 컴파일된 코드가 전달되어 실행되 버리는 문제 발생한다. 그 이유는 Alloy에서 tss나 xml에서 platform3 속성이나 js에서 OS_IOS, OS_ANDROID 변수4를 이용하여 플랫폼에 따라 다르게 개발 했을 때 alloy compile시 지정된 플랫폼에 따라 해당 코드가 최적화 되어 resource파일에는 조건문은 사라지고 조건의 결과에 따른 코드만 존재하기 때문이다. 다시말해 alloy compile은 특정 플랫폼을 위한 최적화 코드를 생성하게 된다. 이 문제는 room을 사용하면 된다.

tishadow server 를 실행한다.

아이폰에서 tishadow app을 connect 할때 advanced를 선택하고 room 이름에 ios라고 입력하고 connect 한다.

안드로이드폰에서 tishadow app을 connect 할때 advanced를 선택하고 room 이름에 android라고 입력하고 connect 한다.

alloy 프로젝트에서 다음과 같이 실행한다.: alloy compile -c platform=android && tishadow run -r android && alloy compile -c platform=ios && tishadow run -r ios

안드로이드 아이폰 모두 각자의 코드로 실행이 된다.

Appify

TiShadow app을 통해서가 아니라 독립된 app형태로 tishadow를 사용하고 싶을 때는 appify를 통해 TiShadow app을 대신할 특정 앱 전용 Tishadow app을 만들면 된다. Appify를 통해 생성하면 서버연결정보가 포함되어 자동 연결하게 된다. 또한 appify를 하게되면 앱에 설정된 모듈을 포함하여 tiapp.xml 설정을 동일하게 복사해준다.

tishadow server를 실행한다.

appify할 프로젝트로 가서 tishadow appify 명령어를 이용하여 appify된 전용 Tishadow 앱을 만든다. ip및 folder tishadow appify -o 192.168.0.2 -r room_appify_ios -d ../AlloySandboxAppify

만들어진 Appify된 전용 Tishadow앱을 실행한다. : titanium build -p ios

원래 프로젝트 폴더로 가서 파일을 수정하고 tishadow run 한다.

사용법은 TiShadow Github이나 아래 동영상을 통해서도 확인 할 수 있다.

Appify의 이해에 있어 주의할 점은 Appify 명령을 통해 생성된 프로젝트는 단지 자동 접속되는 tishadow app일뿐이다. 만들고 있던 프로젝트가 아니다. 원래 프로젝트에서 작업은 계속하고 appify된 프로젝트로 생성된 앱(전용 tishadow app)에서 확인하는 것이다.

Alloy 사용시 주의점

tishadow는 resource 폴더의 내용을 전달한다. 따라서 alloy로 된 프로젝트에서 app 프로젝트 및의 파일을 수정한 경우라면 alloy compile -c platform=android 를 실행하여 alloy 컴파일을 한 후 tishadow run을 실행해야 한다. 아래와 같이 하나의 명령으로도 하면 편리하다. alloy compile -c platform=android && tishadow run

파일 변경시 자동 tishadow run 실행방법

파일을 수정하고 확인하기 위해 매번 위 명령을 실행해야하는데 이게 귀찮다면 이를 자동으로 해주는 supervisor node pakage를 이용하여 해결 할 수 있다. 방법은 https://gist.github.com/kwhinnery/5565515 에 나와있다. (alloy 프로젝트의 경우도 /app 폴더 밑의 파일을 변경하면 자동으로 compile하고 tishadow run 하게 할 수 있음)

참고로 TiShadow와 Hockeykit을 이용하여 테스트/배포 속도 높이기 위한 오프라인 세미나를 곧 갖을 예정입니다. 자세한 사항은 한국 Titanium 개발자 커뮤니티 포럼 http://tidev.kr 이나 facebook 그룹 http://tidev.kr/fb 를 통해 곧 공지하겠습니다.

순수 네이티브 프로젝트와 Titanium 프로젝트의 빌드 시간 차이는 단순한 앱일수록 더 차이난다. Titanium은 단순한 앱이어도 기본적으로 포함되는 TiSDK가 있기 때문이다. ↩︎

앱을 완전히 종료했다가 다시 실행해주는 것이 아니기 때문에 필요에 따라 기존에 app.js를 시작으로 실행되었던 정리를 하는 코드가 필요할 때가 있다.(window 종료, 글로벌 변수 초기화 등.) 이 정리를 하는 방법은 TiShadow Github 저장소의 Keep in Clean부분을 참조바란다. alloy의 경우 alloy.jmk 설정을 해야하는데 이부분도 설명되어 있다. ↩︎

AlloyXMLMarkup-ConditionalCode , AlloyStylesandThemes-Platform-SpecificStyles ↩︎

http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Controllers-section-34636384_AlloyControllers-ConditionalCode ↩︎

[codejong-blog-blog]

Titanium Android webview에서 구글 Play 마켓 바로 열기

Webview에서는 market 주소가 바로 열리지 않는다. 따라서 before load 이벤트 발생시 처리해주면 된다.

사용할 주소는 market:// 형태를 띄도록 한다. 특정 앱의 상세 페이지로 바로 가는 url은 market://details?id=your.app.id 이다. url관련 해서는 Android Developer 문서 참고

$.webView.addEventListener('beforeload', function(e){ var url = e.url; // http://developer.appcelerator.com/question/76861/open-android-market-from-within-an-app if (url.indexOf('market')!=-1){ Ti.API.info('detected market link, launching'); $.webView.stopLoading(); $.webView.goBack(); Titanium.Platform.openURL(url); } });

[codejong-blog-blog]

안드로이드 splash만 portrait(orientation) 로 고정하기

Titanium에서 안드로이드에서 splash만 portrait로 고정하려면 tiapp.xml에 아래와 같은 코드를 추가하면 된다.(Native와 동일) 나머지는 js에서 윈도우별로 orientation을 컨트롤하면 된다.

여기서 android:name과 android:labe은 자신의 앱에 맞게 수정. 해당 내용은 android로 한번 빌드후에 build/android/AndroidManifest.xml 참고. 여기서 추가된 내용은 android:screenOrientation="portrait" 이다.

<android xmlns:android="http://schemas.android.com/apk/res/android"> <manifest> <activity android:name=".SandboxActivity" android:label="Sandbox" android:screenOrientation="portrait" android:theme="@style/Theme.Titanium" android:configChanges="keyboardHidden|orientation"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </manifest> </android>

[codejong-blog-blog]

Titanium에서 Custom Font 사용하기 (+FontAwesome)

Titanium에서 Custom Font를 사용하는 법은 상당히 간단하다. 특히 FontAwesome 같은 아이콘 폰트 사용하면 이미지 작업 없이도 이쁜 아이콘을 편하고 빠르게 사용가능하다.

1. 폰트파일 설치

font file은 Resource/fonts 파일에 복사한다. Alloy 프로젝트의 경우 app/asset/fonts/ 나 app/lib/fonts에 저장한다. FontAwesome의 경우에는 다운받아서 압축 풀면 나오는 폰트 파일중에 fontawesome-webfont.ttf 파일을 이용하면 된다. 위치가 fonts다 font가 아니다. (이 실수로 삽질을 ㅠㅠ)

2. tiapp.xml 수정 (iOS 인경우만)

iOS 일경우 tiapp.xml 파일에 아래 코드를 수정하면 된다. Titanium Doc Guide 나와있는 info.plist 파일을 복사해서 수정하는 방법 보다 훨씬 간단하다. 참고로 이렇게 추가한경우 프로젝트를 클린하고 다시 빌드해만 확인 할 수 있었다.

<ios> <plist> <dict> <key>UIAppFonts</key> <array> <string>fonts/fontawesome-webfont.ttf</string> </array> </dict> </plist> </ios>

3. 끝. 이제부터 사용가능하다.

바로 사용이 가능하다. 한가지 주의할 점은 아래에 나와있듯이 fontFamily에 들어가는 값이 iOS와 Android의 경우 다르다. iOS는 friendly-name으로 폰트 파일을 열면 상단에 나오는 이름이고, android의 경우는 확장자를 제외한 파일명이다.

/* * Let's say you downloaded the "Spicy Rice" font from Google WebFonts. * You'd have a file named SpicyRice-Regular.ttf in your fonts directory */ var customFont = 'Spicy Rice'; // use the friendly-name on iOS if(Ti.Platform.osname=='android') { // on Android, use the "base name" of the file (name without extension) customFont = 'SpicyRice-Regular'; } var label1 = Titanium.UI.createLabel({ color:'#000', text:'I am Window 1', font:{ fontSize:40, fontFamily: customFont }, textAlign:'center', width:'auto' });

또한 FontAwesome 같은 경우는 "icon-glass": 0xf000와 같이 각 아이콘에 해당하는 string 값을 매번 찾아서 넣기 귀찮은데 k0sukey / TiIconicFont 를 이용하면 아래와 같이 간단히 사용 가능하다.

var fontawesome = require('lib/IconicFont').IconicFont({ font: 'lib/FontAwesome', ligature: false // optional }); var baloonLabel = Ti.UI.createLabel({ top: 20, right: 25, width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: '#000', font: { fontSize: 100, fontFamily: fontawesome.fontfamily() }, text: fontawesome.icon('icon-comment-alt') });

[codejong-blog-blog]

Titanium에서 Android Google Map v2 사용방법

Titanium 3.1이 나오면서 Android에 Google Map v2 module이 함께 공개 되었다. v2를 사용하면 지도에서 제공하는 기능도 많고 깔끔해서 이쁘다.^^ 달라진 점에 대해서는 3.1 Release Note를 참고하라.

사용법

Appcelertor의 Guide를 차근차근 읽어가면 따라하는걸 추천한다. 주의할 점은 공식 문서에서는 3.1.x이후 버전에서는 기본적으로 이 모듈이 sdk상에 포함되어있다고 나오지만 실제로는 포함되지 않았다. github페이지에 있는 build된 zip을 받아서 사용가능하다. 일반적인 native module 사용할때 처럼 사용할 프로젝트 최상위 폴더에 zip을 넣고 앞축풀거나 sdk안에 넣어서 모든 앱에서 사용가능하다.

공식문서를 보면되지만 대략적인 방법 파악에 도움이 될것 같아 간단히 요약하자면 다음과 같다.

Google API Key 발급받기 Google 문서에 적힌 방법대로, Google apis console에서 프로젝트를 생성하고 "Google Maps Android API v2"를 활성화하고 API Access에서 key for android apps을 생성한다. 이때 sha1값은 안드로이드 앱 빌드시 사용하는 keystore 에 해당하는 값을 넣으면 되는데 Titanium에서 Run Android Device시에 사용하는 keystore는 해당 프로젝트가 사용하는 SDK안에 있다. 값을 확인하려면 아래 명령어를 터미널에서 실행한다. (경로는 각자 환경에 맞게 변경) keytool -list -v -keystore ~/Library/Application\ Support/Titanium/mobilesdk/osx/3.1.0.GA/android/dev_keystore 근데 이때 텍스트가 깨져서 나오던데 keystore ??ȣ?? ?Է??Ͻʽÿ? 라고 나오던데 이는 password를 물어보는 거고 Ti SDK dev keystore에는 비밀번호가 없으므로 enter를 누르면 sha1값을 확인 할 수 있다. 이 sh1값에 appid를 sh1;appid 형태로 넣으면 api key를 발급받을 수 있다.

tiapp.xml에 map v2 사용관련 내용 추가하기 사용권한과 api키 값을 Appcelertor의 Guide에 설명에 따라 넣는다. tiapp.xml 에 ti.map 모듈을 사용한다는 정보 추가도 잊지말자.

example의 app.js를 복사해서 실행해본다.

v2 사용시 생긴 문제 해결법

맵에 +,- 같은 버튼만 나오고 비어있는 맵이 나오는 경우

api key를 확인하라 (잘되된 앱이 비어있는 상태로 나올땐 api를 재발급 받아봐라)

"Google Maps Android API v2"를 enable해야한다. "Google Maps API v2"가 아니다.

지도 부분에서 앱이 갑자기 종료된다. 정확한 원인은 알수 없으나 특이한 경우가 있다. Tabgroup 기반 Holo theme이 적용된 App에서 지도가 들어있는 Tab을 누르면 바로 앱이 죽었다. 이 문제를 해결하기 위해 Holo theme이 아닌 Titanium기본 theme(theme 미설정)을 적용하면 정상 작동했다. 그러나 Theme을 써야했기 때문에 Theme을 적용한 상태에서 이런 저런 시도 해보다 찾은 해결책은 window가 open되기전에 map을 add 하지 않고 open 이벤트가 발생후에 지도를 추가하니 문제없이 나왔다. window가 open된 이후에 map에 add하면 된다. (이문제로 한 3~4시간 허비했다. ㅠㅠ)

(글을 쓰고나서 발견한 문제) 현재 위치 버튼을 누르면 아무 반응이 없다.ㅠㅠ 뭐가 문제인지 모르겠다. 일단 관련해서 [jira] (https://jira.appcelerator.org/browse/TC-2217)등록 했다.

p.s. 항상 느끼지만 안드로이드는 왜이리 해줘야하는게 많은 걸까. iOS만 개발하고 싶다.ㅋ

[codejong-blog-blog]

Titanium에서 RSS를 Backbone Collection으로 사용하기

Backbone Model을 이용해서 Titanium이나 Web개발시 데이터를 다루면 참 편하다. rss를 다룰 일이 있어서 Titanium에서 Alloy의 Model을 사용하지 않고 Backbone의 모델을 확장해서 만든 모델을 공유한다. rss피드이기 때문에 fetch만 하면 되므로 따로 Sync를 만들지 않고 fetch함수만 만들었다. xml자체를 json으로 parsing 할때는 David Bankier의 XMLTools for Titanium을 사용하였다.

var _ = require("alloy/underscore")._, Backbone = require("alloy/backbone"); var Collection = Backbone.Collection.extend({ initialize : function(models, options){ options = options || {}; this.url = options.url }, fetch : function(options){ options = options || {}; var collection = this; // Create an HTTPClient. var anXhr = Ti.Network.createHTTPClient(); anXhr.setTimeout(10000); // Define the callback. anXhr.onload = function() { var XMLTools = require("XMLTools"); var parser = new XMLTools(this.responseText); var jsonObj = parser.toObject(); // jsonObj.channel.item는 사용한 rss의 item 배열명에 맞게 수정한다. collection[options.add ? 'add' : 'reset'](jsonObj.channel.item, options); if (options.success) options.success(collection, resp); }; anXhr.onerror = function(e){ collection.trigger('error', collection, e, options); }; // Send the request data. anXhr.open('GET',this.url); anXhr.send(); } }); exports.Collection = Collection;

[codejong-blog-blog]

맥(OS X)의 Terminal에서 현재 경로 Finder 열기

나만 몰랐던 것 같지만 ㅋㅋ 혹시나 해서 남긴다.^^ open 명령어로 file을 열 생각만 했지 현재 경로를 열 생각은 미처 못했다. :(

open .

[codejong-blog-blog]

Bitbucket 이슈를 Titanium Studio에서 관리하기

Jira로 issue를 eclipse로 관리하는 도구로 Mylyn이 유명한데 Titanium Studio도 Eclipse 기반이기에 Mylyn 사용이 가능하다. 요즘 Bitbucket으로 sorce 및 issue를 관리하는데 이를 Titanium Studio와 연결해서 사용하고 있다. Titanium에서 Bitbucket에 등록된 issue를 사용하기 위해서는 다음과 같이 하면 된다.

Mylyn 설치

Titanium Studio의 메뉴에서 Help > Install New Software 선택하고 Work with에 Mylyn 설치 주소( http://download.eclipse.org/mylyn/releases/latest )를 넣는다. 최신 주소는 http://www.eclipse.org/mylyn/downloads/ 를 참조. 잠시 기다리면 하단에 설치 항목이 나오고 설치시 - Mylyn features 만 선택하여 설치 완료한다. Titanium 커뮤니티에서 정영석님은 Mylyn이 Titanium Studio에 이미 설치가 되어 있었다는 것 같습니다. 아래는 정영석님의 글을 일부 옮겼습니다. 참고하세요.

Mylyn 설치시 Missing requirement: Mylyn Docs EPUB 1.0.3.v20130107-0100 (org.eclipse.mylyn.docs.epub.core 1.0.3.v20130107-0100) requires 'bundle org.eclipse.emf.ecore 2.5.0' but it could not be found 같은 에러가 나면서 설치가 안되서 Mylyn Bitbucket Connector 만 설치했는데.. ti studio 패키지 보기로 플러그인을 살펴보니 mylyn 도 다 있네요. 그리고 studio 에서 Window - Show View - Other… 선택 Mylyn Task View 가 되네요 ==> 하옇튼 해결 되었습니다. 정리하면 Mylyn Bitbucket Connector 만 설치해도 됩니다

Mylyn Bitbucket Connector 설치

Bitbucket Connector는 https://bitbucket.org/pplupo/bitbucket-mylyn-connector/wiki/Home https://bitbucket.org/shuji.w6e/bitbucket-mylyn-connector/wiki/Home (이전 주소는 동작하지 않는 커넥터입니다.) 를 사용한다. Mylyn 설치와 동일하다. Titanium Studio의 메뉴에서 Help > Install New Software 선택하고 Work with에 Bitbucket Connector 설치 주소 http://www.mylynbitbucketconnector.xpg.com.br/update http://updates.deathmarch.jp/ 를 입력하고 설치항목이 나오면 전부 체크하여 설치한다.

Bitbucket Repository 설정

메뉴에서 Window - Show View - Other… 선택 Mylyn Task View 선택 Task View에서 오른쪽 마우스 버튼 클릭하여 New - Query 선택 New Query윈도우가 나타나면 Add Task Repository 를 선택, Bitbucket Connector 선택 입력정보를 입력하고 validate Setting 버튼으로 설정 확인 . https://bitbucket.org/USERNAME/REPO_SLUG 부분은 실제 리파지토리 주소를 복사한다. (repository이름이 주소에서는 전부 소문자로 변하므로 주의하자.)

Edit Query 윈도우가 뜨고 원하는대로 선택 후 완료하면 Mylyn Task View에 Bitbucket의 issue들이 보일것이다.

Code Strong!

[codejong-blog-blog]

Titanium에서 Android splash에 9patch를 적용하기

안드로이드의 경우 해상도도 매우 다양하기 때문에 splash이미지에 9patch를 적용하여 대응하면 좋다.

Titanium에서 iOS splash의 경우에는 파일명만 Default.png, [email protected], [email protected] 형태로 맞는 사이즈를 넣어주기만 하면 되므로 간단하다. 그런데 Android에서 9patch까지 적용하려면 조금 번거로운 일을 해줘야 한다.

일단 9patch가 적용된 splash파일을 준비한다. 9patch가 생소하신 분들은 아래 링크1, 링크2 참고하세요.

Titanium 프로젝트 폴더 바로 밑에 아래와 같은 폴더 구조를 만들고 splash 이미지를 복사한다. (대응하는 dpi에 따라 더 만들어도 된다.)

values 안에 있는 theme.xml에는 다음과 같은 내용을 넣는다.

<?xml version="1.0" encoding="UTF-8"?> <resources> <style name="Theme.Titanium" parent="android:Theme.NoTitleBar"> <item name="android:windowBackground">@drawable/splash</item> </style> </resources>

끝! 해상도에 따라 splash 이미지에 지정한 방식대로 잘 늘어나는 splash를 볼 수 있다.

Splash 관련 Appcelerator Doc을 보면 위에서 설명한 방법을 포함하여 os별, dpi별 이미지 대응을 어떻게 하면 되는지 잘 정리되어 있다.

[codejong-blog-blog]

Wordpress 설치 후 Dashboard에서 Plugin 설치 시 연결 정보 요구한다면..

Wordpress 설치 후 Dashboard에서 Plugin 설치 시 연결 정보 요구하는 경우에는 wordpress가 파일 시스템에 접근하지 못하는 경우다. 이 경우는 워드프레스를 구동하는 아파치 서버의 사용자와 워드프레스 폴더의 owner를 맞춰주면 된다.

osx에 설치한 경우에는 아래와 같이 하면 된다.

sudo chown -R _www WORDPRESS_FOLDER_NAME

참고 링크

[codejong-blog-blog]

안드로이드 환경에서의 Titanium 애니메이션

Titanium에서 animation을 구현할 경우, iOS에서는 잘되어 있어서 큰 문제가 되지 않는다. 하지만 android의 경우에는 지원하지 않는 api도 많고 iOS에 비해 퀄리티도 많이 떨이진다.

Android에서도 훨씬나은 Animation을 구현가능하게 해주는 Module이 있어 소개한다.

Ti Android Animation on Github(billdawson)은 예제/문서도 잘되어 있다. CC10Musitions의 안드로이드 버전에 위 모듈을 적용해 보았는데 rotate의 interpolation 방식도 정할 수 있고 alpha(opacity) animation의 경우에도 훨씬 부드럽다.

기본적인 사용 방법은 다음과 같다. (다른 방식도 있다.)

var mod = require("com.billdawson.timodules.animation"), view = Ti.UI.createView(); // setup the window and view, etc.... // ... then later ... mod.viewPropertyAnimator.animate(view) .setDuration(1000) .withEndAction(function() { Ti.API.info("Animation done"); }) .scaleXBy(0.5) .scaleXBy(0.5) .alpha(0.75);[]()

모듈 Documentation

[codejong-blog-blog]

개발자로서 기록들을 여기 tumblr로..

이제 개발관련 기록들을 tumblr 남기기로 했다. 이유는 단한가지 markdown을 지원하기 때문이다.