Build UWP Apps with Windows App Studio

Fustino Brothers, Inc. We Build Powerful Apps!Theme: Learn, Knowledge-Base, Reward

All Rights Reserved

Build UWP Apps with Windows App Studio by MVP Russ Fustino

With Joe Darko, Program Manager Evangelist – Southeast Region Microsoft MVP Award Program

Deck: http://bit.ly/29Ivffb http://appstudio.windows.comhttp://www.fustinobrothers.comhttp://Channel9.msdn.com/series/russ-toolshed

www.FustinoBrothers.com | @FustinoBrothersFBI: 850.366.3232 | Fax: 1.856.267.1568

http://bit.ly/29Ivffb

http://appstudio.windows.com/

http://www.fustinobrothers.com/

http://channel9.msdn.com/series/russ-toolshed

http://www.FustinoBrothers.com/


All Rights Reserved

Russ FustinoA Little about me

• Developer Evangelist for Microsoft, Xamarin, Raygun and ComponentOne• Microsoft Windows Development MVP• Xamarin Certified Developer• Publisher of Windows, Windows Phone, UWP , iOS and Android Apps • Creator of Endorsed Jethro Tull app• Co-head Mobile App Dev Tampa User group• INETA Lifetime Achievement• Project Manager - CogScreen programming effort


All Rights Reserved

Common UWP App dev tasks…• UWP Templates –File New AND App Studio• API’s for YouTube, Twitter, Flickr, Facebook and more…• Need to consume any REST service• Work with collections - Importing CSV• How do I incorporate favorites?• Graphics, what are the limits and where do I need them?• Other: Command Bar, Hockey App, ListView, Detail View,

Navigation, Caching, Ad Client




All Rights Reserved

Agenda

• Templates for UWP• Graphics• Massive App Studio Updates in June Release• Data• Installable Packages• Tour of the UWP code in Windows App Studio




All Rights Reserved

Templates for UWP




All Rights Reserved

Demos

• Products Catalog




All Rights Reserved

• Transparent Icons• Badge/Banner• Hero Image

Graphics




All Rights Reserved

Hero Image Requirements

Naming Tips:• Start with Letters not Numbers• Use _ not - • Exclude / and :• Use .png format and flatten image

HR 2880x500px

LR 760x400px




All Rights Reserved

Link Icons: Actions on Detail pages

• Links (Need URL in Collection Data)

• Favorites




All Rights Reserved

Navigation Icons




All Rights Reserved

Demo

• Background Image• Navigation Icons• Link Icons




All Rights Reserved

Massive June Updates

• REST API Data Source• Hosted Web App Capability Declarations• Tool Improvements• Generated App Improvements• Open Source Library and Control Improvements• Instagram Data Source Removed

• Instagram no longer want their users’ content accessed outside of their 1st party apps without explicit permission




All Rights Reserved

Generated App Improvements• New Shell Control: Improved navigation and nav pane• New Detail Pages: Improved Layouts, better reading and display

taking advantage of HTML Block• New About Page• Performance improvements: Reduced memory and increased

loading speed • Pagination & Infinite Scroll: Allows loading of more content

removing the fixed number (40) retrieved previously• Ordering: Allows ordering of the content as established in the app

configuration.




All Rights Reserved

Open Source Library & Control Improvements• https://github.com/wasteam/waslibs

• Improved RSS Data Source• HTML Block: Added a new control to our XAML library that transforms

HTML and renders it as XAML, improving readability and performance• Infinite Scroll: allow apps to make pagination• Animated GIFs: ImageEx control now supports Animated GIFs• Carousel Redesign: better UX integration• Slider View: Older small carousel improved• REST API Data Source• Data Source Ordering and Paging• Data Source Language aware


https://github.com/wasteam/waslibs



All Rights Reserved

Demo UWP Samples


All Rights Reserved

Data - API’s for YouTube, Flickr, Twitter, etc… Step by Step Provided




All Rights Reserved

Data Collections• Option 1 – Manually enter data thru IDE

• Pros – Easy to do• Cons – Time consuming, can’t do massive updates at once

• Option 2 – Use Windows App Studio Collection app• Pros – Easy, better than using IDE• Cons – Still Time consuming

• Option 3 – Import CSV• Pros - Very Fast, massive reload support• Cons:

• Raw exported CSV from Excel does not import to App Studio without errors• Default excel export is using commas as delimiters• Commas in data• Tuff to create csv with semi colons delimiters natively in Excel• All fields should be in “” as strings




All Rights Reserved

Windows App Studio Collections App




All Rights Reserved

Step by Step CSV for import• Step 1: Add column headers manually in the IDE• Step 2: Use same column headers in Excel• Step 3: For image fields, use URL or fully qualified

local file path and file name• Step 4: Use VB Macro to export with semi colons

and put double quotes around all fields




All Rights Reserved

VB Macro to the rescue, use “;” as delimiter, Keeps “,” in data and puts “” around each data field

• Public Sub OutputQuotedCSV()• Const DELIMITER As String = ";"• Const QSTR As String = """"• Dim myRecord As Range• Dim myField As Range• Dim nFileNum As Long• Dim sOut As String• • nFileNum = FreeFile• Open "File1.txt" For Output As #nFileNum• For Each myRecord In Range("A1:A" & _• Range("A" & Rows.Count).End(xlUp).Row)• With myRecord• For Each myField In Range(.Cells(1), _• Cells(.Row, 256).End(xlToLeft))• sOut = sOut & DELIMITER & QSTR & _• Replace(myField.Text, QSTR, QSTR & QSTR) & QSTR• Next myField• Print #nFileNum, Mid(sOut, 2)• sOut = Empty• End With• Next myRecord• Close #nFileNum• End Sub




All Rights Reserved

Favorites

• Set on Config Tab (for Collections)




All Rights Reserved

REST API Data Source

• Supports GET• See blog post: • Example: add

event/concert listings to your app, use an API from a service like SeatGeek or SongKick to pull in event information for a region or filter you specify.


https://blogs.msdn.microsoft.com/windows_app_studio_news/2016/06/07/how-to-use-the-new-rest-api-data-source



All Rights Reserved

Demos

• REST API




All Rights Reserved

Installable packages




All Rights Reserved

Download Windows App Studio Installer




All Rights Reserved

Code

• Hockey App• Navigation/Search• Master/Detail – layouts for detail and list views• Hockey App• Caching• Ad Client




All Rights Reserved

Hockey App - Crash reporting and Tracking




All Rights Reserved

Demos

• Navigation/Search• Master/Detail• Command Bar• Hockey App• Caching• Ad Client




All Rights Reserved

Summary

• Templates for UWP• Graphics• Massive App Studio Updates in June Release• Data• Installable Packages• Tour of the UWP code in Windows App Studio


All Rights Reserved

OK, So Where Do I Start?

30

Homepage: http://appstudio.windows.com Text Tutorial: http://appstudio.windows.com/home/howto Video Tutorial #1: Windows App Studio Walk ThroughVideo Tutorial #2: How to download the source code and add features in Visual StudioVideo Tutorial #3: How to Publish a Windows Phone app to Windows Phone StoreVideo Tutorial #4: How to Publish a Windows tablet or PC app to Window StoreFull Curriculum for Instructors: http://aka.ms/appstudioeducation Build an App in an Hour Curriculum: http://aka.ms/apphour Technical Support: Windows App Studio Developer ForumYouTube: http://www.youtube.com/windowsappstudio Marketing BOM: http://1drv.ms/1tj9gxnFeature Requests: http://wpdev.uservoice.com/forums/216486 VBA Macro http://www.mcgimpsey.com/excel/textfiles.html


http://appstudio.windows.com/

http://appstudio.windows.com/home/howto

http://channel9.msdn.com/Blogs/Windows-Phone/Windows-App-Studio-Beta-Walk-Through

http://channel9.msdn.com/Blogs/Windows-Phone/How-to-extend-an-App-Studio-app-using-Visual-Studio

http://channel9.msdn.com/Blogs/Windows-Phone/How-to-Publish-an-App-Studio-app-to-the-Windows-Phone-Store

http://channel9.msdn.com/Blogs/Windows-Phone/How-to-publish-an-App-Studio-app-to-the-Windows-Store

http://aka.ms/appstudioeducation

http://aka.ms/apphour

http://social.msdn.microsoft.com/Forums/wpapps/en-US/home?forum=wpappstudio

http://www.youtube.com/windowsappstudio

http://1drv.ms/1tj9gxn

http://wpdev.uservoice.com/forums/216486

http://www.mcgimpsey.com/excel/textfiles.html



All Rights Reserved

More Resources

Blog on June Release:https://blogs.windows.com/buildingapps/2016/06/07/windows-app-studio-june-16-release-harnessing-the-wealth-of-the-web-with-the-new-rest-api-data-source/

REST API Data Source:https://blogs.msdn.microsoft.com/windows_app_studio_news/2016/06/07/how-to-use-the-new-rest-api-data-source/

GitHub Open Source for App Studiohttps://github.com/wasteam/waslibs


https://blogs.windows.com/buildingapps/2016/06/07/windows-app-studio-june-16-release-harnessing-the-wealth-of-the-web-with-the-new-rest-api-data-source/



https://blogs.msdn.microsoft.com/windows_app_studio_news/2016/06/07/how-to-use-the-new-rest-api-data-source/

https://blogs.msdn.microsoft.com/windows_app_studio_news/2016/06/07/how-to-use-the-new-rest-api-data-source/

https://github.com/wasteam/waslibs


We Build Powerful Apps!Theme: Learn, Knowledge-Base, Reward

All Rights Reserved

Fustino Brothers, Inc.

Link to Slide Deck: http://bit.ly/[email protected]

[email protected] [email protected]

Thanks! It’s Easy to Connect With Us…

32www.FustinoBrothers.com | @FustinoBrothersFBI: 850.366.3232 | Fax: 1.856.267.1568

http://bit.ly/1O3DMEc

mailto:[email protected]




Software

Build UWP Apps with Windows App Studio