유니버셜 앱의 가능성

이종인
＊바람 인터렉티브 Founder
＊Windows Platform Development MVP
* Windows Phone 앱 개발
-
-
lunelake@outlook.com
http://www.facebook.com/BaramInteractive design me

다른 사람과 떠들고 싶다
일상들의 아름다운 순간들을 남기고
주변사람들과 공유하고 싶다
음악을 마음껏 듣고 싶다
맛 집 정보를 얻고 싶다
건강을 관리하고 싶다
빠르게 기록하고 정리하고 싶다
+
놀고 싶다

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

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

더 이상 집에 컴퓨터 한대 놓여 있는 게 아닌 세상

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

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

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

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

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

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

데스크탑, 태블릿, 폰을 아우르는 서비스를 한 프로젝트에서
(Shared project, PCL)

화면 크기에 대응하는 UI x

화면 크기에 대응하는 UI
7”
6”
5”
4.5”
Infinite virtual canvas
x
y
PortraitLandscape

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

플랫폼의 의존성을 줄인 디자인
+

Grid.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

Grid 화면크기에 대응
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*

Viewbox x
<Grid Background="Black">
<GridView Margin="100,100,0,0">
<Rectangle Fill="Red" Height="200" Width="200" />
</GridView>
</Grid>
<Grid Background="Black">
<Viewbox HorizontalAlignment="Left">
<GridView Margin="100,100,0,0" Height="768" >
</GridView>
</Viewbox>
</Grid>
Element 비율 따라 크기 조정 Element 크기 조정

윈도우 사이즈가 변했을 때 x
protected 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;
//로직
}

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

윈도우 기기간 데이터 동기화
즉결성 보장X)
비용 지출X 비용 지출O

Roaming 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";
}
설정 저장
텍스트 저장

OnlineIdAuthenticator를 통한 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;
}
}

OnlineIdAuthenticator를 통한 Onedrive 동기화

Credential Locker
MSA
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);
}

애저 모바일 서비스
Custom API 스케줄러 푸시
저장소
(용량 제한)
C#
Javascript

Custom 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"
리턴

Push Notification
Azure Mobile
Service
Push
wns apns gcm
// windows
var toast = @"<toast><visual>
<binding template=""ToastText01"">
<text id=""1"">Hello</text></binding></visual></toast>";
await
Notifications.Instance.Hub.SendWindowsNativeNotificationAsync(toast,userTag);
// apns
var alert = "{"aps":{"alert":"Hello"}}";
await
Notifications.Instance.Hub.SendAppleNativeNotificationAsync(alert,userTag);
// gcm
var notif = "{ "data" : {"msg":"Hello"}}";
await
Notifications.Instance.Hub.SendGcmNativeNotificationAsync(notif,userTag);

디바이스간 데이터 동기화 시나리오
Azure Mobile
Service
Push
notification 동기화 앱 켜질시
동기화

서비스에서의 웹 서비스 활용
Azure Mobile
Service
Azure Web
Service

Design Me에서의 PCL 사용
PCL
Azure
Web Service
Azure
Mobile Service
(Shared code, logic, datamodel.. Etc)
Universal
Windows App

Data model 공유
PCL
Universal
App
Mobile Service
Controller
public 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);

플랫폼간 긴밀하게 연결되는 서비스
C#
PCL
Universal
Windows App A
z
u
r
e

Web
현재의 개발 프로세스

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

유니버셜 앱의 가능성

Recommended

Recommended

More Related Content

Similar to 유니버셜 앱의 가능성

Similar to 유니버셜 앱의 가능성 (20)

Recently uploaded

Recently uploaded (6)

유니버셜 앱의 가능성