Tishadow 사용법 안내

JavaScript Titanium
1

TiShadow 란?

‘the complete toolset for rapid titanium app development’, tishadow 타이타늄으로 앱 개발시에 빠른 개발을 도와주는 컴파일 및 테스트 도구이다. tishadow 이해하고 적절히 활용하면 상당히 많은 도움이 된다.

tishadow 기본 설치법

npm install -g tishadow --unsafe-perm
sudo를 붙여줘야하는 경우 아래와 같이 --unsafe-perm 필요
sudo npm install -g tishadow --unsafe-perm

개발 환경 및 개인 기호에 따라 다양한 방법으로 tishadow를 활용가능하다. 여기서는 제가 주로 사용하는 방법(A)과 단순한 방법(B) 두가지를 다룬다.

사용 방법 A

Step 1. TiShadow 서버 실행

    ts server -z

-zoption을 붙이면 tishadow서버가 각 앱들 버전 관리하고 자동으로 업데이트 해준다.
(-z 옵션은 tishadow와 중간에 접속이 끊어졌던 디바이스에서 다시 앱을 실행시 지금까지의 변경사항을 다시해준다는 의미이다. appify를 다시 해준다는 의미는 아님)

Step 2. 파일 변경 시 자동 update하기

    ts @ run -u

실행하려는 titanium 프로젝트 root 폴더에서 이 명령을 실행해주면 파일 변경하고 저장하면 이를 감지하여 자동으로 tishadow server에 연결된 디바이스(혹은 에뮬)에 update해준다.
-u옵션은 업데이트된 사항만 보내는 것으로 alloy컴파일 시간 및 디바이스로 전송 시간을 줄여준다.
-P옵션은 특정 platform만 사용할 경우 지정하면 된다 (예. -P ios)

Step 3 appify로 실행한다.

    ti build -p ios --appify

최근 추가된 flag로 --appify만 붙여주면 appify 프로젝트를 생성하고 실행까지 알아서 해준다. 동시에 확인하고 싶은 환경이 있다면 아래 명령을 참고하여 실행한다. Command Line을 통해 build 하는 방법은 titanium cli 문서를 참고하거나 기본 cli의 사용법이 복잡할 경우 tn 같은 3rd party 툴을 이용해도 된다.

  • ti build -p android --appify : android (기본) 에뮬로 실행
  • ti build -p android -T device --appify : android device로 를 실행

QnA

  • Q. 변경한 내용이 반영이 안되요!
    • 사용방법 1의 경우 tiapp.xml이나 font파일 등을 추가하여 native적인 변화가 생겼을 때는 Step 3. appify를 다시해야한다.
    • 뭔가 이전 코드로 계속 실행된다고 느껴질때는 다른 터미널을 열어 ts run을 시행하여 모든 파일을 다시 보내본다. 그래도 안될경우 디바이스에서 설치된 앱을 삭제하고 다시 Step 3 appify를 실행한다.
    • ts server 나 ts run 명령어가 종료되지 않았는지 확인해본다.
  • Q. 앱이 실행과 동시에 종료되요.
    • 문제가 되는 부분을 해결해도 계속 종료가 된다고 생각될 때는 --appify를 빼고 일반적인 빌드를 통해 정상 작동하는지 확인하고 정상 작동할경우 디바이스에서 설치된 앱을 삭제하고 다시 Step 3 appify를 실행한다.

사용 방법 B

--shadow : 한방에 실행 but 느림

ti build -p ios --shadow

위의 사용방법 A가 복잡하다고 생각될 경우 --shadow옵션을 주고 build만 하면 Step 1,2,3을 순차적으로 자동으로 실행 해준다. 이 과정의 단점은 appify만 다시 해도 될경우에도 Step 1,2,3 모든 과정을 전부 다시 실행하므로 사용방법 1에 비해 느리다.

질문. TiShadow 어떻게 동작하나요?

titanium은 런타임에 사용자가 작성한 js코드를 background thread의 js 엔진에서 실행한다. 한줄 한줄 실행하면서 필요한 titanium native sdk의 코드를 실행시키는 방식이다. 타이타늄 소개 ppt 19페이지 부터 참조
tishadow는 이런 점을 활용하여 앱을 시뮬레이터나 디바이스에 설치하기 위해 패키징 할 때 모든 titanium native sdk를 포함해서 시켜서 앱 파일을 만듭다. 앱이 실행되면 소켓으로 tishadow server에 접속하여 변경된 js파일을 받아 실행하는 구조이다. 그래서 변경된 파일을 app의 build 과정 없이 빠르게 확인 가능합니다. ts server에는 여러 디바이스나 에뮬이 동시 접속이 가능하므로 앱 개발시 변경사항을 동시에 여러 디바이스에서 바로 확인 가능하다.

1개의 좋아요
3

ti setup 명령어를 누르고 8번 ios 세팅에서 기본적으로 사용할 계정등을 선택해두면 편리합니다.^^

1개의 좋아요
4

어쩌다 보니 성공했어요 … ㅎㅎㅎ
어제는 아래 사이트 보고 했더니 사진처럼 아이피 셋팅하는 앱을 먼저 깔고 했었거든요.

http://www.dunkelgames.com/tutorials/tutorial-build-for-all-your-devices-at-once-with-tishadow-and-sublime-text

지금껀 바로 appify된 앱을 빌드해서 넣고 따라 해 보니 바로 적용되고 속도도 빠르네요
감동의 쓰나미가 밀려오는군요 ^^

1개의 좋아요
5

감사합니다 ^^ 이제 개발이 한결 수월해 질것 같아요

6

–shadow 옵션을 build할때 넣었다면 ts server를 다시 실행하지 않아도 됩니다. 위에서도 설명한데로 --shadow에 이미 서버를 실행하는 명령어가 포함되어 있습니다. 마찬가지 이유로 ios를 build할때 --shadow를 넣었다면 android를 할때는 --shadow를 빼도 됩니다. 둘중 하나만 실행하면 된다는 이야기!!

그리고 안드로이드 device-id는 ti info -t android 를 통해서 확인 가능하고요.

좋은 정보 감사요!!

7

추가된 --appify옵션을 사용하는 방법으로 글 내용을 수정했습니다.^^ 이 외에도 편리하게 사용할 만한 부분들이 몇가지가 추가되었는데 아직 버전이 release 되지 않았습니다. 아래 내용은 github 버전으로 설치하면 사용해볼 수 있어요.

ti config --network-interface en0 : network interface를 지정해두면 해당 interface의 ip를 확인해서 사용합니다. 따라서 ip때문에 매번 따로 지정해줘야하는 골치가 사라지죠.^^ (특히 디바이스로 하거나 android 에뮬의 경우 localhost가 안먹히니 편리함)

includes.js 자동 생성 : 이제는 includes.js에 누락되는 경우에 대한 걱정을 조금 덜 해도 됩니다. api 문서에 해당하는 api.jsca 파일을 파싱해서 includes.js를 만듭니다.

1개의 좋아요
8

안녕하세요… 글 잘보고 있습니다.
tishadow를 써보려고 설치해서 시험해 봤는데요…
alloy환경에서는 ts @ run -u 했더니 난리가 나더군요…무한루프 돌다가 컴이 뻗어버립니다…ㅎㅎ
alloy build를 pass 했더니 원하는 환경은 아니고요…ㅠㅠ
다만, classic은 괜찮습니다…

ios는 -u옵션을 주어도 쓸만한데
android는 런치 할때마다 shadowapp이 죽는 문제도 있고요…(귀찮지만 쓸만…^^)

한가지 질문이 있는데요…
classic 환경으로 webview를 얹어서 simple html을 띄웠더니 잘 됩니다.
그런데 angular app을 얹었더니 화면이 보이질 않습니다. (device에 런칭하면 정상적으로 보입니다.)
뭐가 문제인지 디버깅을 하고싶은데요…
shadowapp 위에서 실행된 앱에서 출력되는 로그를 볼 수는 없나요…?
또는 해결방법이라도…^^;

9

사용하시는 alloy, tishadow, node 버전이 어떻게 되나요?
사용하시는 버전에 따라 위와 같은 무한 반복 문제가 나타날 수 있습니다.

10

alloy 1.9.2
tishdaow 2.8.8
node 4.2.2
입니다.

근데 shadowapp 위에서 실행된 앱에서 출력되는 로그는 볼 수 없나요…?

11

ts server를 실행한 터미널에서 같이 보입니다.
그리고 저는 개인적으로 shadowapp을 쓰기보다는 appify를 이용하는 것을 추천합니다.

저는 alloy 최신 버전(1.9.4)와 tishadow 2.8.6을 쓰고 있습니다.
그리고 tishadow는 2.8.8에서는 @DongWoo_Gim 님께서 리포팅했듯이 문제가 있는 부분도 있다고 합니다.

12

답변 감사드립니다…ㅎ
일러주신대로 바꿔서 해봐야 겠습니다…

13

도움 주셔서 감사합니다.

알려주신 대로 appify로 했더니 classic android 환경에서 죽는 현상없이 잘 됩니다.
근데 제가 풀고자 하는 문제는 결국 못푸는 것으로 …ㅠㅠ

angularjs를 사용하는 웹뷰를 얹었는데
파일 경로가 “js/jquery/jquery-2.1.1.min.js” 로 되어 있으면 __p is not defined 에러가 발생하고
js앞에 /를 붙이면 이 에러는 피하는데 html 소스 안에서 참조를 못하네요…

tishadow를 사용하지 않고 직접 런칭하면 정상동작합니다…
github issue에도 유사한 ticket이 이미 closed로 되어 있던데요… 난감하네요…

걍 이전대로 고통받기로…ㅋ

14

TiShadow에서 webview에 보여주는 파일 작업할 관련 tip

webview에서는 tishadow를 통해 전달된 파일에 접근 할 수 없습니다. 따라서 tishadow를 이용하면서 변경한 html을 webview에서 바로바로 확인하고자 할 경우 다음과 같은 방법을 쓸 수 있습니다.

방법 1. file의 내용을 불러서 webview.html에 넣기

tishadow상에서 file을 불러오는 것은 정상적으로 동작합니다.제가 iamport widget만들때 사용한 방법입니다. 이렇게 하게되면 html을 바꿔도 바뀐내용을 확인 할 수 있습니다.


이럴 경우 주의할 점은 css나 script 모두 html 파일 안에 스트링으로 들어가 있어야합니다. link 태그 등으로 불러오면 안됩니다.

방법 2. remote 서버에서 작업하기

remote 서버를 두게 url을 webview에 적용하게 될 경우 ti.api를 쓸수 없는 단점이 있습니다. 이는 local일때 inject 되는 코드를 html에 수동으로 넣어주면 ti.api를 쓸 수 있습니다.
inject 코드는 titanium_mobile 프로젝트의 소스를 참고하시면 됩니다.

이 두번째 방법은 최근에는 사용안해봤는데 아마도 여전히 될거에요.^^

15

오홋… 이런 신박한 방법들이 있네요… 다음에 알려주신 내용을 꼭 활용할 때가 있을 것 같습니다.
답변 주셔서 감사합니다.

지금 제가 해보려는 것은 android, ios, web 동시개발하기 환경을 꾸며 보려 하고 있습니다.
이러다 보니 web app을 위해서 spa 환경을 구성해야 하니 angularjs를 적용하고
화면은 bootstrap의 open source theme를 선택하게 되었습니다.

첨에 html based bootstrap 을 구해 ng app 으로 바꾼것은 tishadow로 올렸더니 동작했습니다.
(어찌어찌 하다보니… 아마도 nativePath이용)
근데 html based bootstrap 소스다 보니 탭뷰등 조금만 복잡도가 올라가면
정상동작을 안해서 (주로 페이지 불러오기) angularjs based bootstrap(정확히는 ui-bootstrap)으로
적용하려니깐 이때부터 안되는 상황이었습니다.

지금은 html,js 소스를 local에 가지지 않고 (ui-bootstrap 소스가 너무 커서 패키징이 커지는 문제도 있으니.)
remote로 놓고 해보니깐 됩니다. 근데 생각해 보면 tishadow와는 그닥 관계는 없어 진다능…

뭐든 한번에 되는게 없네요…

16

안녕하세요?

기존에 Appcelerator Studio에서 개발 중이던 프로젝트에서 Ti Shadow를 사용해보려고
올려주신 사용방법 A를 따라서 해보고 있습니다.

Step 3의 ti build -p ios --appify를 실행하면 시뮬레이터가 실행되면서 앱이 실행됩니다.

그런데 아이폰이나 안드로이드 폰에서 실행하려고
ti build -p ios -T device --pp-uuid <제 기기의 UUID> --appify
또는
ti build -p android -T device --appify 를 실행하면 아래와 같은 에러가 나면서 진행이 되지 않습니다.

[ERROR] Failed to encrypt JavaScript files
[ERROR] This application cannot be built with the Titanium open source SDK because it is an Appcelerator Platform registered application. Please use the Appcelerator Platform CLI tools or Appcelerator Studio to build this application.

관련이 있는지 잘 모르겠지만 ts express는 답글을 보고 실행한 상태입니다.

현재 개발 환경은
OS: macOS Sierra 10.12.1
Ti SDK: 5.5.1.GA
Xcode 7.3.1
입니다.

해결 방법을 아시면 도움 부탁드리겠습니다.

17

appc를 사용하시는 프로젝트이면
$ ts config --use-appc-CLI
로 ts에서도 appc cli를 쓰도록 설정해서 해보세요.

18

알려주신대로 ts config --use-appc-CLI를 실행하고 다시 빌드해도 에러가 발생합니다.
첫번째 메시지는 전에 보던 에러메시지와 다르네요.

[ERROR] titanium_prep failed to run (10)
[ERROR] This application cannot be built with the Titanium open source SDK because it is an Appcelerator Platform registered application. Please use the Appcelerator Platform CLI tools or Appcelerator Studio to build this application.

19

새 Ti Shadow 프로젝트를 생성하고 기존 프로젝트를 copy & merge 하여 실행해보니까 실행은 되는데 화면 구성이 뒤죽박죽 되네요.
Ti Shadow는 다음 프로젝트부터 사용하는 것이 좋을 것 같습니다.

20

뒤죽박죽이 정확히 어떤 것을 말씀하시는지 모르겠지만 보통 tishadow를 이용하다가 수정한 부분이 반영이 안되었을 경우 ts run 을 한번 실행해주면 좋습니다. 특히 -u 옵션을 이용할 때 이럴 경우가 종종 생기죠.

21

답변 감사합니다.
화면에 이미지와 버튼 크기와 위치가 제가 개발하면서 설정한 것과는 완전히 다르게 나오더군요.