Makeing Shopping list app by Sencha Touch

오랜만에 Sencha Touch를 들여다 보게 됐네요.
몇개의 튜토리얼을 정리했는데요. 아직 제대로 제가 감을 못 잡은 것 같아서요.

오늘은 샘플코드를 구해서 분석해 봤습니다.
Shopping List 를 Sencha Touch 로 구현한 샘플코드인데 독일의 Nils Dehl 이라는 개발자가  프랑크프루트 컨퍼런스에서 강의한 코드입니다.

일단 저도 Sencha Touch를 시작하는 사람으로서 이 소스코드를 자세하게 분석하지는 못합니다. 이 소스코드를 통해서 제가 공부할 목표는 아래 두가지 입니다.

1. MVC 모델 프로그래밍을 위한 디렉토리 및 파일 구조 파악
2. 실전에서 자주 쓰이는 API에 대한 감을 익혀서 튜토리얼 공부할 때 집중할 수 있도록 하기

이 이상은 지금 수준에서는 아직 할수가 없다고 봅니다.

일단 이 앱의 Storyboard 를 보죠.

1. 이 앱의 인트로 화면입니다. 실행하면 이 화면이 떴다가 잠시 후에 자동으로 다음 화면으로 넘어갑니다.

2. 앱의 첫 화면입니다. + 를 누르면 데이터를 입력할 수 있는 화면이 나옵니다.

3. 이름과 갯수 그리고 단위를 입력하고 Save를 누르면 2번화면으로 가고 입력한 데이터가 표시됩니다.

4. 3번화면을 통해서 여러 물품을 입력하면 아래와 같이 그 리스트가 뜹니다.
    오른쪽 마크 버튼을 누르면 색이 변합니다.

화면은 몇개 안 되지만 직접 만들려면 만만치 않을것 같네요.

그럴듯하게 쇼핑카트가 완성 됐죠?

이 앱에서는 MVC 모델과 list 그리고 localstorage, form 과 관련된 기술이 사용됐습니다.
그리고 CSS를 보다 간편하게 사용하기 위해서 SASS 를 사용했구요.

자세히는 아니지만 이 기술들도 간단히 살펴 보겠습니다.
아직 저는 센차터치의 MVC 구성과 실전에서 자주 사용되는 API와 그 사용법 파악이 주 목적이니까 그 부분에 집중해서 공부하겠습니다.

이 앱의 소스파일은 아래로 가시면 받아 보실 수 있습니다.

http://dl.dropbox.com/u/7549925/shoppinglist.zip

소스는 받아서 그냥 실행하시면 됩니다.
이 앱은 Sencha Touch 1.1.0을 사용했습니다.
그리고 Step1부터 Step 7 까지 단계별로도 소스를 따로 모았습니다.

이 단계는 컨퍼런스 때 강의를 하기 위해 나눈것인데요.
동영상으로도 있습니다.

Creating a sample Touch app from Grgur Grisogono on Vimeo.

오늘은 위에 동영상까지 올리겠습니다.

소스 받아서 보시고 동영상도 보시면 많은 공부가 될 겁니다.

저도 공부해서 나름대로 정리할 내용을 정리할 계획입니다.

지난주에는 Corona SDK + JQuery Mobile + HTML5 + CSS3 기술을 이용한 앱을 하나 만들었습니다.
Corona SDK를 이용한 Hybrid App 을 만들 목적이었는데요.
좋은 조합일 수도 있고 또 제한 사항들이 있어서 컨트롤하기 힘든 부분도 있더라구요.
원래 standard 조합인 Phonegap + JQuery Mobile 을 이용해서 Hybrid App을 만들어 보아야 겠어요.
그래야지 비교할 수 있고 서로간의 장 단점을 알 수가 있을 것 같아서요.

일단 오늘은 이 쇼핑카트 앱 소스를 공부해서 필요한 부분을 정리해야겠습니다.

다음 글에 제가 공부한 내용을 올릴께요. 그럼......

P.S. 이 소스는 저의 경우 크롬과 사파리 브라우저에서만 동작하고 오페라,익스플로러,파이어폭스에서는 작동 안하더라구요.