KakiSoft - Windows 10 app development. UWP, Universal Windows Platform

KakiSoft(http://kaki104.tistory.com)와 닷넷 프로그래머 모임 카페(http://cafe.daum.net/aspdotnet)의 팀 Arche8W와 함께 진행 중인 Windows 8 store app(XAML) Korea Tour Guide 0.7 소스 입니다.

실무 Windows 8 store app 개발의 노하우를 알려드리기 위해서 동영상 강좌과 각 단계별 소스를 제공 하고 있습니다.

관심있는 분들의 많은 응원(좋아요, 리트윗, 추천 등등) 부탁드립니다.

* 첨부된 소스를 실행하기 위해서는 국가공유자원 포털에서 발급된 API Key를 Funcations.cs 파일에 입력을 해주셔야 합니다.

각 단계별 동영상과 소스

http://kaki104.tistory.com/entry/KTour-02-동영상-소스

http://kaki104.tistory.com/entry/KTour-03-동영상-소스

http://kaki104.tistory.com/entry/KTour-04-작업중

http://kaki104.tistory.com/entry/KTour-04-동영상-2-작업중

http://kaki104.tistory.com/entry/KTour-05-동영상-작업-예정

http://kaki104.tistory.com/entry/KTour-06-동영상-소스

참고

http://kaki104.tistory.com/entry/MVVM-Pattern-동영상-소스

현재까지 작업된 내용

1. 행사이야기 메인 페이지

2. 행사이야기 메인에서 -> 관광정보 상세 페이지(기본 적인 내용만 조회됨)

3. 검색 단어 입력

4. 검색 결과 페이지

5. 검색 결과 페이지에서  -> 관광정보 상세 페이지

6. 앞으로 계획

3월 오프라인 모임전까지 1차 버전을 완성 후 1주정도 마무리 작업과 디버깅을 한 다음에 스토어에 등록할 예정입니다.

소스는 1차 완성본까지 포스트를 할 예정이며, 그 이후 소스는 비공개로 진행합니다.

7. 소스

KTour_0.7.zip

MVVM(Model-View-ViewModel) Pattern

블로그 :    http://kaki104.tistory.com/         KakiSoft     
카페 :   http://cafe.daum.net/aspdotnet      닷넷 프로그래머 모임     

MVVM Pattern에 대한 모든걸 담았습니다. 동영상에 소스에

다 보신 후 꼭 추천, 좋아요~ 눌러주세요

동영상

http://youtu.be/f9aQkuoiPz4

http://youtu.be/uGxboAUwciI

http://youtu.be/2lQQiBEjbtU

소스

MVVMPattern.zip

* 목표 화면

* 행사 상세 정보

1. 행사 상세 페이지 구성 정보

- 사용할 서비스, 공통정보 조회, 소개정보 조회, 반복정보 조회, 이미지 정보 조회(여기서는 공통정보 조회만 사용)

- 화면 구성 - 목표화면, pptx 화면

2. 공통정보 조회 서비스 추가, 공통정보 결과 모델 생성

- 조회 파라메터 : 전체 Y

http://youtu.be/YQ0QROOarl0

3. 행사 이야기 페이지에서 행사 상세 페이지로 네비게이션 기능 추가, 상세 뷰, 상세 뷰모델 추가

- 어떤 화면에서라도 컨텐츠ID, 컨텐츠TypeID 2가지만 넘겨주면 각 상세 화면에서 구성해서 보여주도록 만듬

http://youtu.be/iVbwTLCn_PA

http://youtu.be/EuE1BppGBr0

4. 상세 뷰모델 디자인 타임 데이터 작업, 상세 뷰 디자인

그리드뷰를 이용해서 컨텐츠를 어떻게 보여줄 것인지..고민..

* 처음 생각

GroupModel에 CodeModel을 이용해서 몇개의 그룹을 만든다.

- 소개그룹, 사진그룹, 지도그룹, ...

- 각 그룹안에는 CodeModel 타이틀에 소제목, ValueString에 내용을 채워서 넣어 주고

- 아이템 템플릿에서 소제목, 내용으로 구성된 아이템을 생성한다.

- 이때 가로 크기는 지정하고 세로크기를 지정하지 않는다. 어떻게 표시가 될지는 잘 모르겠다;;;

- 네비게이트 될때 pageState에 뷰모델 저장해 놓았다가, pageBack되면 복구해줌

http://youtu.be/qniNp3vsqho

http://youtu.be/2dUuT3BySI4

* 30번까지 진행했는데 문제가 있어서 생각 변경

- 소개의 경우 1개의 아이템에 소개 텍스트를 다 집어 넣고 ItemTemplateSelector를 이용해서 다르게 표현

- 소개 텍스트를 RichTextBlock, RichTextColumns를 이용해서 표시 -> 디자인 타임 데이터 완성

http://youtu.be/gPRSuhL6BjM

5. 런타임 데이터를 이용해서 화면 구성 & 디버깅 & 마무리 작업

http://youtu.be/KIGX7Ch6W70

http://youtu.be/jVprxiIM8rQ

6. 최종 화면

7. 소스

KTour_0.6.zip

* 목표 : 검색기능 추가

목표화면

완료화면

1. 검색 조건 : 행사이야기 페이지 -> 행사일자 버튼 추가

2. 사용자컨트롤 추가, 디자인, 뷰모델 추가

http://youtu.be/0a3rsxFrGAE

3. 행사일자 버튼 클릭시 팝업 출력 & 테스트

http://youtu.be/IpYOHyqcuZY

4. 팝업이 닫혔을 때 조건에 맞는 데이터를 조회해서 화면에 출력하기

http://youtu.be/w8FrKcHNyN8

5. 마무리 정리

http://youtu.be/nZQsDHGDn2g

6. 소스

KTour_0.5.zip

완성 후 화면 입니다.

* 목표 : 인기글과 최신글을 조회하여 그룹핑된 화면을 만들고, 각목록은 더보기를 클릭해서 추가 데이터를 불러오도록 한다.

5. 뷰 수정, 뷰모델 수정 & CollectionViewSource 추가 (16, 17)

-> 뷰의 GroupStyle 추가, HeaderTemplate, Panel 작업

-> 디자인 타임 데이터 확인

http://youtu.be/PcRgMXqy5oI

http://youtu.be/cnQIe7MkivY

6. 뷰모델 수정, 런타임 데이터 확인 (18)

http://youtu.be/Vre7W-ybEe8

7. 더보기 기능 추가 - ItemTemplateSelector, 테스트 (19, 20, 21)

* 더보기가 한칸씩 밀리는 부분은 해결 했습니다.

http://youtu.be/4L3HB7iGMX4

http://youtu.be/XDnlq5DNpQs

http://youtu.be/GdIZH4NeuQA

 8. 소스

KTour_0.4.zip

이번에는 유튜브로 업로드 중입니다. 그런데, 링크가지고 어떻게 해야 미디어 플레이어가 나오는 화면으로 보이게 하는지 모르겠군요. 흐흐;;;

유튜브 용량은 20기가까지 업그레이드를 했는데..업로드 속도가..느려서 걸어 놓고 다른일을 해야할 듯..

6번까지 작업 완료된 화면

1. KTour 0.3 소스에서 변경 사항

http://youtu.be/LClfa9FqEg8

2. 행사정보 조회 서비스 생성

http://youtu.be/Rgnsdi_tSzI

4. FestivalView 작업 - 바인딩, ItemTemplate 작업

http://youtu.be/qyJpzdsy9gA

5. Converter를 사용해서 지역명과 시군구코드를 표시하기

http://youtu.be/8XqNoN2cvy4

6. 파싱하면서 수정일시 변경 & 기본 템플릿 작업 완료

http://youtu.be/raYEwLsvc_Q

닷넷 프로그래머 모임 - Windows 8 Store app study

http://cafe.daum.net/aspdotnet

ApiKey는 국가공유자원 서비스에서 받은 것을 사용하시면 됩니다. 소스에 ApiKey는 없습니다.

완성화면

1. OpenAPI 사용 준비 작업, 서비스 클래스 추가

2. HttpClient를 사용해서 OpenAPI 호출/결과 받기

3. XElement를 이용해서 XML 데이터 파싱하기, 간단한 LINQ 사용

4. 화면 디자인 & 바인딩 & 아이템 템플릿 작업

5. 디버깅 - 오류 처리..

6. 지역코드 조회 및 테스트, 시군구 조회 추가

7. 시군구 조회 완성

8. 소스

KTour_0.3.zip

닷넷(.NET) 프로그래머 모임 스터디에서 팀 프로젝트로 진행하고 있는 Korea Tour Guide 앱의 0.2 버전 소스와 제작 과정을 동영상으로 담았다.

이번 동영상은 로컬 데이터베이스로 WinRT File base database를 추가, 사용하는 방법에 관한 내용이다.

1. WinRT File base database(이후 db) 추가

2. db 초기화, 테스트 & ViewModelLocator 만들고 사용하기

3. 소스

KTour_0.2.zip

http://cafe.daum.net/aspdotnet

오프라인 모임때 설명드렸던 내용을 다시 정리해서 동영상으로 만들었습니다.

동영상 제작해서 올리는 것은 처음이라 깔끔하지도 않고, 목소리도 거북하시겠지만..올리겠습니다.

다음 오프 모임때는 그날 바로 녹화해서 올리는 방향으로..

셈플 앱 코딩 단계별 동영상

1. 기본 Grid store app 프로젝트 생성 후 실행

2. 기본 폴더 생성 - Views, ViewModels, Models 폴더 추가

3. 뷰 추가 - 시작 페이지 변경, 간단한 디자인

4. 모델 추가

5. 뷰모델 추가 후 디자인 타임용 데이터 추가

6. 뷰에 뷰모델 연결 바인딩 - ItemsSource, SelectedItem

7. 아이템 템플릿 수정 

8. DelegateCommand 추가 

9. Converter 추가

10. 소스

App2.zip

1. 모임 결과

추운 날씨에도 불구하고 여러분들이 참석해 주셔서 감사합니다.

저에게 메일을 보내지 않으신 분들께서는 아래 내용으로 메일을 보내주시기 바랍니다.

메일 내용

1) 스터디 참여 목적
2) 스터디에서 중점적으로 배우려는 내용
3) 개인 정보(이름, 이메일, 전화번호, 근무처)

메일을 보내주시면 회신으로 관리자 정보도 알려드리겠습니다.

2. 스터디 전체 운영 계획

1~3월

1) 기본적인 앱 만드는 방법에 대해 스터디 진행 합니다.

2) 2월 17일까지 셈플앱(하단)을 참고해서 자신만의 셈플앱을 만들어서 게시판에 등록합니다.(구정이 끼어있어서 3주를 잡았습니다.)

* 매회 2주마다 공부하실 내용을 정해드리면, 그 결과를 게시판에 등록하도록 합니다.

* 개발 중 문의 사항은 항상 게시판을 이용해 주시기 바랍니다.

* 이번 오프 모임때 만들었던 셈플앱 만드는 과정에 대해서는 동영상으로 만들어서 올리도록 하겠습니다.

3) 2월 23일 오프라인 스터디를 진행 합니다.

23일날 국가공유자원 포털의 OpenAPI 중 어떤 것을 사용해서 앱 개발을 진행할지 정하도록 하겠습니다.

저녁 식사 예정이오니 점심 + 저녁 식사가 가능하도록 준비를 해주시기 바랍니다.

오전 :

. 지난 오프라인 모임 리뷰

. 개발 중 온라인으로 해결이 않되는 문제에 대해서 해결하는 시간

오후 :

. OpenAPI를 사용해서 웹에서 데이터를 조회해서 사용하는 방법에 대해 스터디 합니다.

4~6월

:  개인 or 팀별 앱 개발을 진행 합니다.

4월 이전에 인원, 앱 개발 계획 등을 생각하셔서 정리를 해야합니다.

3. 셈플앱 - off모임에서 작업했던 소스 입니다.

VisualStudio 2012

Update1까지 적용 하신 후 프로젝트 열기 및 실행 가능합니다.

개발자 라이센스는 그냥 받으시면 됩니다.(유효기간이 있기는 한데..아마도 계속 연장이 되지 않을까하는..)

앱을 만드는 과정에 대해서는 동영상 작업을 해서 올리도록 하겠습니다.

App2.zip