Sencha touch 로 모바일 앱 시작하기 (1)

주인장은 어느정도 네이티브 앱을 다뤄보기는 했으나, 전문적으로 다루지는 않았다. 네이티브 앱은 재밌지만 좀 귀찮은 작업이므로, 이번에는 웹앱을 한번 해보도록 하겠다.

센차, 폰갭, 앱스프레소 까지 대략 공략하는데 4시간을 예상하고, 그 이후에는 구글맵을 연동하는 작업에 4시간, 나머지 마무리작업에 4시간 잡고 진행한다. 현재시간 오전 10시~ 병목구간은 구글맵 연동부분일듯.

일단 아래의 거시기에서 보고 따라하면 된다. 상당히 쓸모있는 사이트이다.

https://wikidocs.net/2002

http://docs.sencha.com/touch/2.0.2/#!/guide/first_app

다운로드

센차터치는 여기서 다운로드할수 있다.

https://www.sencha.com/

https://www.sencha.com/products/extjs/cmd-download/

다운로드 하는것은 두가지 이다. 센차터치 2 SDK와 SDK Tools.

헷갈리게 두개를 깔고 있다. cmd로 들어가서 sencha를 실행하여야 한다. 보통은

C:\Users\kohrymain\bin\Sencha\Cmd\6.0.0.202

와 같은 곳에 지저분하게 깔려있다. 그렇기 때문에 설치할때 c:\sencha등으로 바꿔서 깐다.

일단 이 tool은 접어두고,

아까깔았던 SDK가 index.html을 가지고 있는거 보니 웹서버에 올려본다.

이제 웹서버를 깔고 시작한다. 웹서버는 아파치를 이용하며

http://gorakgarak.tistory.com/46

를 참고하면 된다. 참고. VCREDIST 에러가 나올수 있는데, VC14버전은  Visual Studio Redistributable 2015 이다.

이제, apache폴더 htdocs안에 아까 다운로드한 SDK를 넣고 간다. CMD는 그럼 대체 뭔지 아직까지 감이 안온다.

이제 위와같은 그림을 localhost에서 볼수있으면 된것이다. 모바일 와이파이로 접속하면 같은 화면이 뜬다.

센차터치의 examples폴더를 까보면, 다음과 같은 구조로 되어있음을 알수있다.

app.js - 진입점

app.json - 설정파일

packager.json - 앱장터에서 사용하는 파일

resources - 앱에대한 이미지 등.

결국 센차터치는 이러한 형태인것이다.

일단 cmd를 통해 프로젝트를 생성한다.

그리고 웹서버를 띄운채, 이를 통해서 사람들이 모바일을 통해 앱으로 가공된 웹사이트에 접근하게끔 만든다.

필수적으로 웹서버가 있어야 하는 좋지 못한 결과가 있다. 속도도 상당히 느릴것이고, 웹서버의 트래픽 문제는 피해갈 수가 없다.

JSON 비동기 방식으로 업데이트 되지 않은 부분만 갈아낀다는데, 어떻게 될것인지는 조금 더 실험이 필요하겠다.

===위의 트래픽 문제==

트래픽 문제는 크지 않을 수 있다. 사용자에게 깔리는 기본적인 native앱들은 로컬 위주로 돌아가며, 서버와 작은 JSON조각을 통신하며 업데이트된 부분이 있을때만 업데이트를 하게 된다. 이 방법은 상당히 좋은 방법으로, 굳이 사용자에게 업데이트에 대한 공지를 띄워주지 않아도 되고, 필요할때 바로바로 업데이트 할수 있기 때문에 속도의 측면에서도 상당한 발전이다. 다만, 안드로이드계열에서의 css기능이 제대로 먹히지 않는다고는 하는데, 두고볼 일이다.