Universal Windows App

유니버셜 앱의 가능성

소개이종인

＊바람 인터렉티브 Founder＊ Windows Platform Development MVP * Windows Phone 앱 개발 - Design Me - 대중교통허브

Contactlunelake@outlook.comhttp://www.facebook.com/BaramInteractive

design me

Intro들어가기에 앞서

쓰고 싶다다른 사람과 떠들고 싶다

일상들의 아름다운 순간들을 남기고 주변사람들과 공유하고 싶다

음악을 마음껏 듣고 싶다맛 집 정보를 얻고 싶다

건강을 관리하고 싶다

빠르게 기록하고 정리하고 싶다

+

놀고 싶다

사람들에게 도움이 되는 무언가를 만들어서많은 사람들이 쓰게 하고 싶다

만들고 싶다

+

앱 & 서비스

+

만들고 싶다사람들에게 도움이 되는 무언가를 만들어서

많은 사람들이 쓰게 하고 싶다

Application Platform

Service

서비스를 많은 사람들이 쓰게 하는 방법

이미 오래된 이야기더 이상 집에 컴퓨터 한대 놓여 있는 게 아닌 세상

Connect다양한 디바이스에서도 끊임 없는 경험의 연결

Service 9:00am

10:00am

1:00pm

4:00pm

8:00pm

Process

WebAndroidiOS

현재의 앱 & 서비스 개발 프로세스

배포

개발

Service

배포

개발

배포

개발

Server

요구

배포

개발

Process

WebAndroidiOS

서비스 업데이트 및 에러 발생 시

배포

개발

Service

배포

개발

배포

개발

요구

배포

개발

Server

Windows 10

윈도우 10

Windows 10데스크탑부터 랩탑 , 태블릿 , 폰까지

Windows 10Windows 10 에서의 앱 사용환경의 변화

데스크탑앱

Windows 8/8.1

스토어앱

Windows 10

Windows 10Windows 10 으로 1 년 내 업그레이드 시 무료

Universal Windows App

유니버셜 윈도우 앱

Universal Windows App데스크탑 , 태블릿 , 폰을 아우르는 서비스를 한 프로젝트에서

Universal Windows App

(Shared project, PCL)

Universal Windows AppShared Project

Shared Project

Logic, View Model, Model, Design As-sets,View(Common)

Windows Phone

ViewPlatform specific logic

Windows

ViewPlatform specific logic

Responsive design화면 크기에 대응하는 UI x

Responsive design화면 크기에 대응하는 UI

7”

6”

5”

4.5”

Infinite virtual canvas

x

y

Por-trait

Land-scape

Responsive design디바이스의 크기와 환경에 따라 달라지는 유저들의 요구와그로 인해 파편화된 경험들 합치기

생산성

기능

편집

이동성

단순함

보기

Responsive design플랫폼의 의존성을 줄인 디자인

+

Responsive designGrid.Row xGrid.Column

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width=“Auto" /> <ColumnDefinition Width="100" /> </Grid.ColumnDefinitions> <Rectangle Grid.Column=“0" Grid.ColumnSpan=“2" /></Grid>

<Grid> <Grid.RowDefinitions> <RowDefinition Height=“100" /> <RowDefinition Height=“Auto" /> <RowDefinition Height=“100" /> </Grid. RowDefinitions> <Rectangle Grid.Row=“1" /></Grid>

0

1

2

0 1 2

Responsive designGrid 화면크기에 대응 x

<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width=“50" /> <ColumnDefinition Width=“1*" /> <ColumnDefinition Width="1*" /> <ColumnDefinition Width=“50" /> </Grid.ColumnDefinitions></Grid>

50 501*

1*

50 501*

1*

50 501*

1*

Responsive designViewbox x

View-box

Con-trol

Responsive designViewbox x

1366x768 1920x1080

<Grid Background="Black"> <GridView Margin="100,100,0,0"> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> </GridView></Grid>

1366x768 1920x1080

<Grid Background="Black"> <Viewbox HorizontalAlignment="Left"> <GridView Margin="100,100,0,0" Height="768" > <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> <Rectangle Fill="Red" Height="200" Width="200" /> </GridView> </Viewbox></Grid>

Element 비율 따라 크기 조정 Element 크기 조정

Responsive design윈도우 사이즈가 변했을 때 xprotected override void OnNavigatedTo(NavigationEventArgs e){ this.navigationHelper.OnNavigatedTo(e);

Window.Current.SizeChanged += Current_SizeChanged;}

protected override void OnNavigatedFrom(NavigationEventArgs e){ this.navigationHelper.OnNavigatedFrom(e); Window.Current.SizeChanged -= Current_SizeChanged;}

/// <summary>/// 윈도우의 사이즈가 변했을 때 이벤트/// </summary>public void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e){ double windowWidth = e.Size.Width; double windowHeight = e.Size.Height;

// 로직}

Demo:Universal design me

User data

멀티 디바이스에서 User data 처리

User data여러 디바이스간 데이터 연결

Roaming storage

Cloud

Server

User data윈도우 기기간 데이터 동기화

( 데이터가 100kb 미만 , 간결한 설정 등 , 즉결성 보장 X)

Roaming Storage

( 데이터가 100kb 이상 , 데이터 용량이 큼 )

비용 지출 X 비용 지출 O

서버 혹은 클라우드 서비스 사용

User dataRoaming storage 를 통한 데이터 동기화

StorageFolder roamingFolder = ApplicationData.Current.RoamingFolder;

public async void SaveText(string saveText){ StorageFile sampleFile = await roamingFolder.CreateFileAsync("dataFile.txt", CreationCollisionOption.ReplaceExisting); await FileIO.WriteTextAsync(sampleFile, saveText);}

ApplicationDataContainer roamingSettings = ApplicationData.Current.RoamingSettings; public void SaveSetting(){ roamingSettings.Values["exampleSetting"] = "Hello World"; roamingSettings.Values["HighPriority"] = "65";}

설정 저장

텍스트 저장

User dataOnlineIdAuthenticator 를 통한 Onedrive 동기화public class WindowsAccountAuthenticator{ OnlineIdAuthenticator authenticator;

public WindowsAccountAuthenticator() { authenticator = new OnlineIdAuthenticator(); }

/// <summary> /// 마이크로소프트 계정 로그인 및 인증 /// </summary> public async Task SignIn() { var targetArray = new List<OnlineIdServiceTicketRequest>(); targetArray.Add(new OnlineIdServiceTicketRequest("wl.signin", "DELEGATION"));

var result = await authenticator.AuthenticateUserAsync(targetArray, CredentialPromptType.PromptIfNeeded);

string AccessToken = result.Tickets[0].Value; }}

User data

Microsoft 계정 로그인( 이미 기기 연결시 생략 )

사용자에게 권한 동의

Access Token 받아옴

OnlineIdAuthenticator 를 통한 Onedrive 동기화

OnlineIdAuthenticator

Sign in

AccessToken

Access Token 으로Onedrive 와 동기화

User dataCredential Locker

API 가 User name 과 Password 를 안전하게 저장함 , Roaming 됨

MSAApp

App

void SaveCredential(string username, string password){ PasswordVault vault = new PasswordVault(); PasswordCredential cred = new PasswordCredential("MyAppResource", username, password); vault.Add(cred);}

IReadOnlyList<PasswordCredential> RetrieveCredential(string resource){ PasswordVault vault = new PasswordVault(); return vault.FindAllByResource(resource);}

Azure mobile service애저 모바일 서비스

Custom API

스케줄러 푸시저장소

( 용량 제한 )

C#Javascript

Azure mobile serviceCustom API

Ex)TimeChecker

요청

현재 시간체크

현재시간리턴

https://{ServiceName}.azure-mobile.net/api/{API Name}

Rest API

C# - SDK

DateTimeOffset result = await App.{MobileServiceClientName}.InvokeApiAsync<DateTimeOffset>(“{API Name}", HttpMethod.Get, null);

"2015-01-30T13:26:11.829Z"

리턴

Azure mobile servicePush Notification

Azure MobileServicePush

wns apns gcm

// windowsvar toast = @"<toast><visual> <binding template=""ToastText01""><text id=""1"">Hello</text></binding></visual></toast>";await Notifications.Instance.Hub.SendWindowsNativeNotificationAsync(toast,userTag);

// apnsvar alert = "{\"aps\":{\"alert\":\"Hello\"}}";await Notifications.Instance.Hub.SendAppleNativeNotificationAsync(alert,userTag);

// gcmvar notif = "{ \"data\" : {\"msg\":\"Hello\"}}";await Notifications.Instance.Hub.SendGcmNativeNotificationAsync(notif,userTag);

Azure mobile service디바이스간 데이터 동기화 시나리오

Storage

Custom API

Azure MobileService

변경데이터

1

2Push

notifica-tion

동기화3 앱 켜질시동기화

Demo:Azure mobile service

Azure web service서비스에서의 웹 서비스 활용

계정 가입요청

Azure MobileService

인증 메일전송

Azure WebService

계정 인증요청

계정 인증

인증 완료

Demo:Azure web service

Less code, Share more!

Portable Class Library

Portable Class LibraryDesign Me 에서의 PCL 사용

PCL

AzureWeb Service

AzureMobile Ser-

vice

(Shared code, logic, datamodel.. Etc)

UniversalWindows

App데이터 모델

공유

Portable Class LibraryData model 공유

PCL

UniversalApp

Mobile Ser-vice

Controllerpublic class Request{ public string request { get; set; }}

public class Result{ public string result { get; set; }}

Controller

public async Task<HttpResponseMessage>Post(Request request){ Result result = new Result(); // 처리 return Request.CreateResponse (HttpStatusCode.OK, result);}

Request

Request request = new Request()

Result result = await App.{ClientName} .InvokeApiAsync<Request, Result> (“APIName", request);

Cross Platform

Cross Platform플랫폼간 긴밀하게 연결되는 서비스

C#PCL

UniversalWindows

AppAz u r e

Responsivedesign

Cross platform

WebAndroidiOS

현재의 개발 프로세스

배포

개발

Service

배포

개발

배포

개발

요구

배포

개발

Server

Cross platform

WebAndroidiOS

Azure 와 Xamarin, PCL 을 활용한 개발 프로세스

Service

요구

Server

Shared Logic,Code,View

개발

배포

Win-dows

PlatformSpecific

감사합니다 :)