11 October 2015 AllSeen Alliance 1

Lab - UWP App Creation

Paul Rambo

PM, Windows Developer Platform

Brian Rockwell

PM, Microsoft Smart Connected Peripherals

Braeden Petruk

Software Engineer, Microsoft Smart

Connected Peripherals

11 October 2015 AllSeen Alliance 22

1. Lab Prerequisites

2. The Universal Windows Platform

3. Building Universal Windows Apps

4. Hands-On Labs

Agenda

11 October 2015 AllSeen Alliance 3

Lab Session Prerequisites

Required Hardware• A PC running Windows 10

• An AllJoyn-enabled lightbulb running Lighting Service Framework

Required Software• Visual Studio 2015

• Windows 10 SDK

• AllJoyn Studio

• AllJoyn Explorer

Lab Setup

• Microsoft Surface Pro 3

• Microsoft Lumia 1520

• LIFX AllJoyn-Enabled Wi-Fi LED smart bulb

11 October 2015 AllSeen Alliance 4

The Journey to One Windows

Windows Desktop

IoTHoloLens

Surface Hub

Windows Phone

Xbox

ONE CORE OS

ONE APP PLATFORM

ONE STOREWindows 10

11 October 2015 AllSeen Alliance 5

Phone Small Tablet2-in-1s

(Tablet or Laptop)Desktops

& All-in-OnesPhablet Large TabletClassic Laptop

Xbox IoTSurface Hub

… on the full range of Windows devices

Holographic

Windows 10

11 October 2015 AllSeen Alliance 6

One app, with device-optimized experiences

Phone (portrait)

Tablet (landscape) / Desktop

Based on a set of adaptive controls and enable an experience tailored to the device

11 October 2015 AllSeen Alliance 7

Scales to Phone, Tablet, PC, Xbox, Surface Hub, IoT, HoloLens and beyond

11 October 2015 AllSeen Alliance 8

Intro to Building UWP Apps

• MVVM

• Supported languages

– VB, C#, C++, JavaScript

– XAML, HTML/CSS

• VS2015 templates, app manifest and configuration

• AllJoyn Studio

– AllJoyn App Template

– Adding or removing AllJoyn interfaces

11 October 2015 AllSeen Alliance 9

AllJoyn UWP Interactions

11 October 2015 AllSeen Alliance 10

Sample Slider Control

• C#

Slider hueSlider = new Slider();

hueSlider.HorizontalAlignment = HorizontalAlignment.Left;

hueSlider.VerticalAlignment = VerticalAlignment.Top;

hueSlider.Width = 100;

hueSlider.Margin = new Thickness(76, 263, 0, 0);

hueSlider.Maximum = 4294967295;

• XAML

<Slider x:Name="HueSlider" HorizontalAlignment="Left"

Margin="76,263,0,0" VerticalAlignment="Top" Width="100"

Maximum="4294967295"/>

11 October 2015 AllSeen Alliance 11

Hands-On Lab Overview

• Inspect and validate your device with AJE

• Lab 1

– Build a basic, functional a AllJoyn UWP app to

manage your device

• Lab 2

– Extend your app by adding an AJ interface and

simple controls

• Lab 3

– Extend your app further by adding toast

notifications, a Live Tile and Cortana support

11 October 2015 AllSeen Alliance 12

Using AllJoyn Explorer

1) Connect all devices to the

same network on the same

subnet

2) On your Windows 10 PC in

Settings | Network and Internet |

Advanced Options: “Make this

PC discoverable" is enabled for

the network in use with AllJoyn

3) Launch AllJoyn Explorer

4) Drill down to see your device’s

methods, signals and properties

11 October 2015 AllSeen Alliance 13

Hands-On Lab 1

• Open HOL1_start.csproj

• Add some client calls

• Build and test

Result: You have a new Universal Windows app that can turn

your bulb on and off and you can deploy it to your devices

Code Checkpoint 1: http://go.microsoft.com/fwlink/?LinkId=690098

11 October 2015 AllSeen Alliance 14

Hands-On Lab 2

• Open HOL2_start.csproj

• Use AllJoyn Studio to discover a light bulb on the local network

and add an interface

• Create a bus attachment and watcher to discover the device from

a C# UWA (debug output or breakpoint to verify)

• Add a slider to change colors

• Deploying your app

Result: Your app can change your bulb’s hue, saturation and brightness

Code Checkpoint 2: http://go.microsoft.com/fwlink/?LinkId=690099

11 October 2015 AllSeen Alliance 15

Hands-On Lab 3

• Open HOL3_start.csproj

– Add and wire up speech recognition

– Add a Live Tile

– Add a toast notification

For the advanced user:

• Add a Cortana command to change light colors

• Integrate toaster and light consumers into a single app

• Check out Notifications Visualizer

Result: Your app has a Live Tile, toast notifications and you can use

Cortana to turn your light on/off

Code Checkpoint 3: http://go.microsoft.com/fwlink/?LinkId=690100

11 October 2015 AllSeen Alliance 16

Summary

• Windows 10 runs on a variety of device types and form

factors and has been deployed to >100M devices

• Universal Windows Platform enables developers to build 1

app that runs on many devices

• Windows + AllJoyn Studio provides a best-in-class AllJoyn

developer experience

• Check out some of the cool Windows IoT projects @

http://windowsondevices.com

11 October 2015 AllSeen Alliance 17

Resources

• Visual Studio 2015

• Windows 10 SDK

• Windows DevCenter

• Publish Your Windows App

• Windows on Devices (future home of this lab content)

• AllJoyn Studio

• AllJoyn Explorer

• Developing a Windows Phone Application using the MVVM Pattern

• AllJoyn Windows samples

– Windows Universal

– Toaster

11 October 2015 AllSeen Alliance 18

Questions?