20150812 4시간만에 따라해보는 windows 10 앱 개발

4시간만에따라해보는Windows 10 앱개발

김영욱 Evangelist

Yowkim@Microsoft.com

http://windows.Microsoft.com

Agenda

1. UWP

2. XAML Controls

3. Networking

4. Linq

5. Data Binding

7. SQLite Local Database

8. Toast

9. Adaptive UI

Introducing the UWP

Phone Small Tablet2-in-1s

(Tablet or Laptop)Desktops

& All-in-OnesPhablet Large TabletClassic Laptop

Xbox IoTSurface Hub Holographic

Windows 10

One Store +One Dev Center

Reuse Existing Code

One SDK + Tooling

Adaptive User Interface

NaturalUser Inputs

One Universal Windows Platform

Universal Windows Platform

A single API surfaceA guaranteed API surface

The same on all devices

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Windows app

A single binary Running on any device

Testing for capabilities

Adjusting to devices

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Windows App

Hello devices

Platform extensions

Device-specific APIFamily-specific capabilities

Compatible across devices

Unique update cadence

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Windows App

Phoneextension

Xboxextension

Desktopextension

One Operating SystemOne Windows core for all devices

One App PlatformApps run across every family

One Dev CenterSingle submission flow and dashboard

One Store Global reach, local monetization Consumers, Business & Education

Windows 10operating system

Bridging technologies

Win32desktop

Webhosted

JavaAndroid

Obj.CiOS

WWAC++& CX

.Netlanguages

HTMLDirectX

.Netlanguages

MFCWFWPF

.Netruntime

Let’s talk about bridge technologies

Objective-CAt Build we announced iOS code can be reused in a Windows app

AndroidAt Build we announced Android code can be reused in a Windows app to run on Windows Phone

WebAt Build we announced web sites can be wrapped to run on Windows

Win32At Build we announced that Classic Windows Apps (CWA) can be packaged as an Appx

Blend for Visual Studio

The XAML Developer’s IDEAlways part of Visual Studio

Uses the Visual Studio shell

Full auto-complete & intellisense

• Validation

• Snippets

• Peek

File & solution management

Resource management

Data management

Animation

States

Visual Studio 2015 Editions

EnterpriseArchitecture Modeling, Diagnostics, VSO/ALM & Release Management

ProfessionalArchitecture Validation, VSO/ALM & Feedback Management

Community EditionsVisual Studio Professional Edition

Microsoft Developer Network

Microsoft documentationhttp://msdn.Microsoft.com

http://dev.Windows.com

Microsoft traininghttp://msevents.Microsoft.com

http://MicrosoftVirtualAcademy.com

MSDN SubscriptionOperating Systems

Server/Client Products

Developer Tools

Azure/O365 Credits

Developer unlock

XAML controls

Layout controls

Canvas

StackPanel

WrapGrid

ScrollViewer

Viewbox

RelativePanel

Some child elementsact as anchors

Most child elementsrelate to others

It's a layout techniquefriendly with States

Buttons

Text controls

SplitViewIsPaneOpen="True" IsPaneOpen="False"

DisplayMode=

"Inline"

DisplayMode=

"Overlay"

DisplayMode=

"CompactInline"

DisplayMode=

"CompactOverlay"

SplitView

App bars and commands

AppBar

Networking

Daum 검색 APIhttp://developers.daum.net/

Daum Open APIs

System.Net.Http.HttpClient

Namespace: System.Net.Http.HttpClientAssembly: System.Net.Http (in System.Net.Http.dll)

Entity Class

class BookItem

{public Int64 Id { get; set; }public string Title { get; set; }public string Category { get; set; }public string ImageUrl { get; set; }public string Description { get; set; }

Architecture

OthersC# VB.NET

.NET Language Integrated Query (LINQ)

LINQto SQL

LINQto Objects

LINQto XML

LINQto Datasets

LINQto Entities

LINQ data source providers

ADO.NET support for LINQ

LINQ to Objects

C#int[] nums = new int[] {0,4,2,6,3,8,3,1};double average = nums.Take(6).Average();var above = from n in nums

where n > averageselect n;

Data binding

Data binding basics

https://msdn.microsoft.com/ko-kr/library/ms752347(v=VS.110).aspx

Dynamic Data

Use data binding to connect to a data sourceTypical data source would be a view model

Data Binding

SQLite Local Database

SQLite.org

Documentation

SQL Syntax

C/C++ API Reference

Source and toolsdownload

Choice of .NET APIs

SQLite-NETLINQ syntaxLightweight ORM

SQLitePCLSQL statementsThin wrapper around the SQLite C API

using (var conn = new SQLiteConnection("demo.db"))

Customer customer = null;

using (var statement = conn.Prepare(

"SELECT Id, Name FROM Customer WHERE Id = ?"))

statement.Bind(1, customerId);

if (SQLiteResult.DONE == statement.Step()) {

customer = new Customer() {

Id = (long)statement[0],

Name = (string)statement[1] };

var db =new SQLite.SQLiteAsyncConnection(App.DBPath);

var _customer = await(from c in db.Table<Customer>() where c.Id == customerIdselect c).FirstOrDefaultAsync();

if (customer != null) {

var Id = _customer.Id; var Name = _customer.Name;

…and others!

Installing SQLitePCL to your Solution

SQLitePCL

Create database and tables

private void LoadDatabase()

// Get a reference to the SQLite database

conn = new SQLiteConnection("sqlitepcldemo.db");

string sql = @"CREATE TABLE IF NOT EXISTS

Customer (Id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,

Name VARCHAR( 140 ),

City VARCHAR( 140 ),

Contact VARCHAR( 140 )

using (var statement = conn.Prepare(sql))

statement.Step();

Insert

// SqlConnection was opened in App.xaml.cs and exposed through property conn

var db = App.conn;

using (var custstmt = db.Prepare("INSERT INTO Customer (Name, City, Contact) VALUES (?, ?, ?)"))

custstmt.Bind(1, customerName);

custstmt.Bind(2, customerCity);

custstmt.Bind(3, customerContact);

custstmt.Step();

catch (Exception ex)

// TODO: Handle error

Select

public Customer GetCustomer(int customerId)

Customer customer = null;

using (var statement = dbconn.Prepare("SELECT Id, Name, City, Contact FROM Customer WHERE Id = ?"))

if (SQLiteResult.DONE == statement.Step())

customer = new Customer()

Id = (long)statement[0],

Name = (string)statement[1],

City = (string)statement[2],

Contact = (string)statement[3]

return customer;

Update

// See if the customer already exists

var existingCustomer = GetCustomer(customer.Id);

if (existingCustomer != null)

using (var custstmt =

dbconn.Prepare("UPDATE Customer SET Name = ?, City = ?, Contact = ? WHERE Id=?"))

// NOTE when using anonymous parameters the first has an index of 1, not 0.

custstmt.Bind(1, customer.Name);

custstmt.Bind(2, customer.City);

custstmt.Bind(3, customer.Contact);

custstmt.Bind(4, customer.Id);

custstmt.Step();

Delete

public void DeleteCustomer(int customerId)

using (var statement = dbconn.Prepare("DELETE FROM Customer WHERE Id = ?"))

statement.Step();

SQLite using SQLitePCL

Toasts

Glance (consume)See new information from your apps.

Act (chase, or take actions)Toasts invite you to begin or complete a task.

The toast is the app’s door by chasing (clicking) it.

Additional actions enable users to perform simple tasks without context switching.

Toast templates

If a template meets your needs, go ahead and use it.

Previous templates remainPhone and Windows templates have been merged

Adaptive templateSame XML syntax as tiles

Sending toast

ScheduledSet template and time with “ScheduledToastNotification”

Toast can also be set to be recurring.

LocalSend from (foreground/background) app

This includes desktop apps with “AppUserModelID”

PushUse push services

Interactive toast

Adaptive UI

Adaptive design

Phone (portrait)

Tablet (landscape) / Desktop

Tailored design

Phone (portrait)

Tablet (landscape) / Desktop

Tailored design

Build pages/code for individual familiesUse MRT in App.xaml.cs to determine the family

One-handed interface?Typically phone or small tablets

Test diagonal screen size (<7")

if (physical_diagonal_size <= 7)

// optimized for one-handed operation

rootFrame.Navigate(typeof(MainPage_OneHanded), e.Arguments);

rootFrame.Navigate(typeof(MainPage), e.Arguments);

Visual States

Define XAML viewsUnique layout for distinct states

Simplify animationAutomatically implement state transitions

Build in BlendDesign and preview states and transitions

Visual states

How to set the visual state

VisualStateManager.Goto(element, state, transition)

public MainPage(){

this.InitializeComponent();this.SizeChanged += (s, e) =>{

var state = "VisualState000min";if (e.NewSize.Width > 500)

state = "VisualState500min";else if (e.NewSize.Width > 800)

state = "VisualState800min";else if (e.NewSize.Width > 1000)

state = "VisualState1000min";VisualStateManager.GoToState(this, state, true);

Adaptive triggers

A Developer’s Guide to Windows 10 Preview

http://www.microsoftvirtualacademy.com/training-courses/a-developers-guide-to-windows-10-preview

Adaptive Code

Adding extensions

Extension SDKs

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox More…

The device families you choose determines which APIs you can call freely

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

Windows.Foundation.Metadata.ApiInformation

Test capabilities at runtime

var api = "Windows.Phone.UI.Input.HardwareButtons";

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(api))

Windows.Phone.UI.Input.HardwareButtons.CameraPressed

+= CameraButtonPressed;

20150812 4시간만에 따라해보는 windows 10 앱 개발

Mobile

혈액투석 대상자를 위한 스마트폰 앱 기반...

모바일 앱(app) 개발 테스트 솔루션 v20160415

[jscamp] titanium - javascript를 이용한 크로스...

zuger presse 20150812

모바일 환경에서의 이유식 네이티브 앱 개발...

모바일 앱(app) 개발 테스트 솔루션 -...

써드노트 사운드 앱 개발 사업계획서

zugerbieter 20150812

heebeom kim · • reactorkit & rxswift 적용 appbase nhn...

가장 쉬운 안드로이드 앱 개발 방법 앱인벤터

windows 8 메트로 스타일 앱 개발

충실한 삶을 위해 건강을 유지하고 사람들을...

ios 앱 개발 강의 자료 #1

fast campus [안드로이드 앱 개발 프로젝트] camp

스마트폰 앱 개발 활성화를 위한 탐색적...

20150812 prentsa txostena

html5 관점에서 본 2014 모바일 웹 앱 개발...

모바일 앱 개발 프로세스 메타모델...

jquery mobile 세미나 스팍스 10 주은진. 웹앱...

앱 인벤터(app...