UWP 본격 탁상시계 만들기1

윈도우 폰을 뭔가 유용하게 사용하기 위해 앱을 하나 만들기로 하였습니다.

가장 쉬운게 시계 만들기지요 ㅎㅎ

결국 최종으로 만들 앱은 아래의 앱 입니다.



화면에 큼지막하게 날짜 시간 날씨가 표시되는 매우 간단한 앱이지요..

각 단계별로 해당 앱을 만들기 위한 방법을 설명합니다.


0. Visual Studio를 실행하고 UWP 프로젝트를 생성합니다.




1. 날짜, 시간 표시를 위한 라벨 UI에 추가 하기



 MainPage.xaml (메인뷰)에 날짜를 표기할 TextBlock 두개를 추가 합니다.

도구 상자를 통해서 드래그 해서 추가하거나 직접 입력하여 추가 할 수 있습니다.


2. 타이머 추가하기

기존에 C# 네이티브 개발을 하셨다면 Windows.Forms의  Timer를 사용하시거나Thread 쪽 타이머를 사용하셨겠지만 Windows RT Framework 에서는 이를 사용할 수 없습니다.

Windows RT 에서는 DispatchTimer라는 타이머 클래스를 제공합니다.

MainPage.xaml.cs 파일을 열어 생성자에 Loaded / UnLoaded이벤트를 추가 합니다.
이는 메인페이지가 로드 되었을때 라벨에 날짜 텍스트를 뿌려주기 위함입니다.




이벤트 핸들러를 작성합니다.

Loaded 이벤트에 코드를 추가 합니다.




Timer tick 이벤트를 추가 합니다.



날짜와 시간을 아까 생성했던 텍스트 라벨에 뿌려 주도록 코딩합니다.




Unloaded 이벤트에 타이머를 정지하도록 코딩합니다.

윈도우 폰을 연결하고 F5키를 누르면 자동으로 배포되어 자동으로 실행 됩니다.

UWP 플랫폼 이해

새로운 플랫폼에서 개발하기 위해서는 해당 플랫폼의 기본적인 이해가 필수이다.

해당 플랫폼에 대해서 완전히 이해 하기 위해서는 이것만으로도 매우 많은 포스팅이 이루어 져야 하겠지만
개발을 시작하는 입장에서 모든것을 알고 시작할 필요가 없기 때문에

필수로 봐야 할 부분만 추려서 설명해 본다.



1. 플랫폼 블럭 다이어그램



대부분의 새로운 플랫폼 설명 프리젠테이션에 빠지지 않는 부분이 해당 플랫폼의 블럭 다이어그램이다.

블럭 다이어그램을 꼭 보아야 하는 이유가 전반적인 플랫폼의 구조를 알 수 있기 때문이다.
이는 모바일이나 기타 개발뿐이 아니라 순수하게 윈도우프로그래밍 부분도 마찬가지이다.

윈도우 10 PC의 경우 기존의 윈도우 네이티브앱(레거시앱)과 윈도우 스토어 앱이 둘 다 실행가능하다.
UWP 플랫폼의 좌측에는 기존의 네이티브앱의 각각의 런타임 및 개발 플랫폼이 나와있고
UWP의 윗쪽에 위치한 부분들이 UWP프로그램의 플랫폼에 대해서 설명하고 있다.



2. 라이브 사이클


여느 모바일 플랫폼과 비슷한 라이프 사이클을 가집니다.



3. UI



마이크로 소프트가 WPF시절부터 밀고 있는 Xaml 형식의 View를 통해서 UI 를 작성할 수 있습니다.
마소가 밀고 있는 부분이 MVVM 패턴을 잘 알고 있다면 바로 이해 하실 수 있을 것입니다.
마소는 예전부터 MVC 패턴을 변형하여 데이터 바인딩이라는 개념을 적용하여 Model View ViewModel
패턴을 적용하여 UI 부분을 코드에서 분리하고자 하는 노력을 기울여 왔습니다.

이는 안드로이드에서도 XML 형식으로 UI 와 비즈니스 로직을 분리하고자 하였습니다.
이는 애플의 앱에서도 마찬가지 입니다. Xcode 의 경우는 스토리 보드 개념을 적용하여 조금 더 앞선 모습을 보여 줍니다.

과거에는 blend라는 툴을 통하여 디자이너로 하여금 UI 를 직접 개발 할 수 있도록 제공하였지만
이는 비쥬얼스튜디오 2015에 통합되었습니다.

 xaml 을 전혀 모르신다면 간단히 말해서 Html과 유사하다고 생각하시면 됩니다. 어짜피 마크업 랭귀지 이니까요... 대략 이걸 사용하신다고만 알고 계신면 됩니다.



제대로된 개발 입문을 하기 위해서는 microsoft에서 운영하는 Virtual Academy를 참고 하기를 추천합니다.

https://mva.microsoft.com/

UWP App 개발 환경 구축

UWP app 개발하기 위해서는 windows 10 가 설치된 pc 와 visual studio가 필요하다.

visual studio는 community edition 을 사용하면 무료로 설치 가능하므로

부담 없이 사용 할 수 있다.. 

전통적으로 마소는 모바일 개발자의 진입 장벽을 해소하기 위해

Express edition을 무료로 제공해 왔지만 몇년전부터는 Professional 기능을 완전히 포함하는

커뮤니티 에디션을 배포한다.

개발툴 설치 이외에는 매우 간단한 설정한 해주면 된다. 개발자 모드 설정만 하면 모든게 완료된다. 

휴대폰 설정

설정 -> 업데이트 및 보안 -> 개발자용-> 개발자 모드를 선택한다.

PC 설정

설정 -> 업데이트 및 복구 -> 개발자용 -> 개발자 모드 선택

개발한 앱 배포를 위해 진행하다보니.. 휴대폰 전용으로 앱을 개발하여도 PC 자체도 개발자 모드로 설정해야 한다는 점이 다소 이상하지만 사실 저 설정은 설치 가능한 앱의 서명과 관련한 부분으로 보이는데..

정작 실행되는 휴대폰이 아닌 피씨 자체에도 저 설정을 하지 않으면 안되는 이유를 모르겟지만..

앱 자체에 테스트용 서명을 하기 위함이 아닌가 싶다. 게다가 에뮬레이터를 쓰면 필요할 테니까..

UWP(Universal Windows Platform) 앱

윈도우 10 버전이 출시되면서 마이크로 소프트는 PC와 타블렛 휴대폰 XBOX 통합 플랫폼 형식의
스토어 운영 및 개발 플랫폼을 출시 하였는데 (사실 윈8 부터 시작했으나 플랫폼을 다시 갈아엎음)
이는 마이크로소프트의 다양한 플랫폼 대응의 전략 중 하나로 생각된다.

사실 이는 오래전부터 (서피스 프로 / RT 준비 시기) 부터 진행 중인 전략인데 이를 위해
마이크로 소프트는 기존의 Windows CE 기반의 임베디드 플랫폼과 PC플랫폼 으로 구분되던 카테고리를
윈도우 10 에 모두 포함시키고 (에디션별 구분으로 나눔) 각 플랫폼별 특성에 맞는 서브 버전을 제공한다.

기존에 CE 플랫폼은 윈도우 10 IOT 버전으로 계승되는듯하며, 이를 확장한 모바일 버전과 arm 버전을
거의 포기한 저전력 x86 위주의 윈도우 타블렛 시리즈, 울트라북 수준의 Cpu를 장착한 2 in 1 계열 타블렛과 노트북 또는 데스크탑 으로 나뉘어 지는 듯 하다.

윈도우 8 시절부터의 소비자들은 잦은 정책 변화와 플랫폼 변경으로 민심을 잃었지만 (마소의 뒤통수) 
개발자 입장에서는 개발하기 편한 부분이 있다.  Visual studio , c# or javascript or c++ 사용 가능 등

기존의 윈도우 개발자가 다소 익숙한 환경에서 개발할 수 있다는 장점이 있다.

루미아 640을 이용하여 탁상 시계 앱을 만드는 과정을 작성할 예정이다.

Windows 10 phone 구입

AT&T에서 windows 10 시장 확대를 위한 모바일폰 폭풍 세일이 시작되었는데
가장 유명한 폰이 바로 루미아 640모델이다.
29.9 불에 판매중인 이 모델은 스냅드래곤 400 프로세서에 1기가 램, LTE를 지원한다.
화면은 720p IPS 디스플레이이다.

마케팅 비용이 포함되었겠지만 이 가격에 이 성능에 이 완성도라니...

장난감으로 이만한게 없으리라... 딱히 쓸 용도가 없으면 탁상시계로 써도 충분

C#의 Serialize 이용하여 손쉽게 class instance 파일로 저장하기

serialize(직렬화)는 파일 저장시 할 때 혹은 네트워크 전송시 주로 많이 사용된다.

WCF에서도 XML형식으로 직렬화하여 전송한다. remote function call 시의 파라미터값이나 콜백 데이터 등을 직렬화 해서 전송하게 되는데 물론 사용자 정의 클래스타입이라면 Contract를 정의해 주어야 하지만 직렬화는 자동으로 진행되므로 매우 편하다.

BinaryWriter를 사용하여 MVC 패턴 형식으로 프로그램 구조를 설계 시 매우 손쉽게 현재 상태를 저장하고 불러오는 형태로 사용 할 수 있다.

다만 직렬화시 귀찮은 작업을 하지 않으려면 몇가지를 고려하여 설계 하는 것이 좋다.

1. 데이터 클래스와 비즈니스 로직은 구분하여 클래스로 작성한다.

  이벤트나 델리게이트의 파라미터나 Argument의      serialize 하기 애매한 객체가 담기는 경우가 있는데  UI Control이나 Winform 객체가 Runtime시에 할당된다면 귀찮은 작업이 필요 해 질 수 있다. 

 코드가 간단한 경우에는 애트리뷰트 설정만하면 해당 필드를 제외 할 수 있지만 복잡한 상속 계층을 가지거나 이미 프레임워크 수준으로 구축되어있다면 모든 코드를 확인해가면서 작업을 해야 할 수도 있다.

2. 직렬화할 데이터를 UI 로직과 분리한다.

 예를 들자면 Winform 의 객체들은 기본적으로  Serializable하지 않다. xml class를 통해서 UI자체도 직렬화 할 수 있긴하지만 그다지 추천할만하지 않다. UI의 구성요소의 갱신은 데이터 클래스와 비즈니스 로직의 산출물을 통해서 갱신되도록 설계하면

 데이터 클래스만 변경한다면 언제든지 변경된 데이터에 맞게 UI를 유지 할 수 있다.

결국은 MVC 패턴대로 설계하면 매우 손쉽게 데이터만 직렬화 역직렬화 할 수 있다는것이다.

우선 Serialize / DeSerialize method 작성

요런 식으로 미리 만들어 두자.

사용은 이런식으로 사용

ISerializable interface를 구현해도 된다.

GetObjectData는 Serialize, Data(SerializeInfo info, StreamingContext context)는 Deserialize를 구현한다.

Mac AppNap 설정

AppNap 이란?
Mac OSX 10.9 부터 실행 중인 앱 중에 다른 앱에 의해 가려지거나 사용하지 않는 것으로 판단되는 앱의 Message 처리를 OS 레벨에서 매우 낮은 우선순위로 하여 배터리 소모를 제한하는 기능이다.

물론 백그라운드 스트리밍이나 다운로드 중인 경우 OSX에서 눈치 채서 제한을 걸지 않지만
정상적인 백그라운드 동작에서도 AppNap기능이 활성화되어 문제가 되는 경우가 있다.

해당 기능이 동작하는지는 Activity Monitor 앱을 통해 확인 할 수 있다.

defaults 라는 환경 변수 값 비슷한 걸 설정해 주면 기능을 끄거나 켤 수 있다.


Xamarin 을 이용하여 코드를 작성해 보자


우선 설정값을 읽어오는 코드

defaults read 도메인 키값

형식으로 사용하면되고, NSGlobalDomain은 모든 앱을 설정하기 위한 도메인이다.

NSAppSleepDisabled 키가 AppNap설정을 위한 키의 이름이다.

해당 키값을 읽어오면 AppNap 설정이 활성화 되어있다면 0, 비활성화 상태이면 1을 반환한다.

AppNap 설정 수정하기..

활성화 시키기 위해서는 해당 키를 지우면 된다. delete
비활성화 하기 위해서는 해당 키를 write 하고 값은 -bool YES로 지정한다.


수정된 내용을 적용하기 위해서는 재부팅이 필요하다.