Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes
Download as PPTX, PDF2 likes1,395 views
This document provides an overview of developing Windows Store apps using HTML and JavaScript. It discusses getting started with app layout and UI, accessing and displaying data from APIs, enriching apps with features like semantic zoom and animations, implementing search contracts, and submitting apps to the Windows Store. The presentation is aimed at helping developers learn how to build their first Windows Store app in 60 minutes.
Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes
- 1. | Lausanne Windows Store Apps using HTML and JavaScript: Become a Windows App Store developer in 60 minutes Valérie Alonso Xavier Bocken Sacha Bruttin
- 2. Become an Office 365 developer in 60 min Valerie Alonso, Lead Associate [email protected] Xavier Bocken, Microsoft Practice Manager [email protected] http://ch.linkedin.com/in/xbocken Sacha Bruttin, Senior Consultant [email protected] http://bruttin.com/
- 3. Everyday our +350 experts strive to bring together their expertise to provide pragmatic, award-wining solutions to industry leaders.
- 4. DIGITAL MARKETING USER EXPERIENCE Strategy, Planning Creative CRM and E-Commerce Online Advertising, SEO/SEM Social Media Mobile Usability Analysis User research User journey and flows Interaction Design Prototyping Wire-faming APPLICATION DEVELOPMENT Collaboration Business Intelligence CRM Systems Integration Development platforms TECHNOLOGY & INFRASTRUCTURE Service Management Identify Management Service Support E-mail management Systems Management Security Monitoring & BPM Cloud Computing
- 6. Agenda Getting started: the user interface Access data and content Enrich your App: semantic zoom, favorites Implement contracts: search Wrap it up Agenda
- 7. Windows 8 guidelines Windows 8 guidelines http://aka.ms/UXGuidelines Windows 8.1 Product Guide: What’s new for developers http://msdn.microsoft.com/en-us/windows/apps/bg184615.aspx Windows 8.1: New APIs and features http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx WinRT API Reference http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx
- 8. | Lausanne Chapter 1/5 Getting started
- 9. Getting started: the UI Define a vision for your app • • List the TPG bus stops and bus wait times Access to a list of favorites bus stops, with information updated in real time Choose the layout of your UI / navigation scheme • • Hierarchical navigation: more content organized into section/categories/details Flat navigation: simple content Flat navigation Visual Studio templates Navigation app template
- 10. Getting started: the UI Windows sizes, continuous scaling and minimum width
- 11. Getting started: the UI Device sizes, scaling to screens and orientations screen and (max-width: 1024px) CSS3 media queries@media all and (orientation: portrait) {...} {...} @media
- 12. | Lausanne Getting started: the UI Démo
- 14. | Lausanne Chapter 2/5 Access data and content
- 15. The TPG OpenData API http://rtpi.data.tpg.ch/v1/ + developer key • • GetStops.json GetNextDepartures.json?stopCode= censuré
- 16. The New Windows.Web.HttpClient API new API for Windows 8.1, replacing: Brand • • • WinJS.xhr for JavaScript; System.Net.Http.HttpClient in C# and VB; IXMLHTTPRequest2 for C++ Highlights for JavaScript programming: • • • • Strongly typed HTTP headers Access to cookies and shared cookies A lot more control over caching behavior Powerful HTTP protocol filters
- 17. The New Windows.Web.HttpClient API example Simple
- 18. The New Windows.Web.HttpClient API control over More caching behavior
- 19. The F12 tools equivalent in VS 2013 F12 debugging tools have been rebuilt from the ground up in IE 11 • • DOM Explorer: intellisense auto-complete for attributes and CSS No-refresh debugging, new tools: UI Responsiveness tool, Javascript Memory • Equivalent in Visual Studio 2013: Analyze > Performance and Diagnostics
- 20. | Lausanne Access data and content Démo
- 22. | Lausanne Chapter 3/5 Enrich your App
- 23. Enrich your App – Semantic zoom Detailed level Zoomed out level
- 24. Enrich your App – Semantic zoom SemanticZoom control • • • Switch between two different views of the same content Uses 2 controls: 1 for zoomed-in view and one for zoomed-out view Inner controls must implement IZoomableView > ListView // Create a WinJS.Binding.List from your data array. var itemsList = new WinJS.Binding.List(myData); // Create the groups for the ListView from the item data and the grouping functions var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups); <div data-win-control="WinJS.UI.SemanticZoom"> <!-- The zoomed-in view. --> <div id="zoomedInListView" data-win-control="WinJS.UI.ListView" /> <!--- The zoomed-out view. --> <div id="zoomedOutListView" data-win-control="WinJS.UI.ListView" /> </div>
- 25. Enrich your App - Animations Drag items within a list JavaScript: dragSourceStart dragSourceEnd dragBetweenEnter dragBetweenLeave
- 26. Windows 8 App lifecycle 5 secs Incremental save Application data Windows.Storage.ApplicationDat localSettings / roamingSettings Session data WinJS.Application.sessionState Restore application state if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: App newly launched. Initialize code goes here. } else { // TODO: App reactivated from suspension. Restore app state here. }
- 27. | Lausanne Enrich your App Démo
- 29. | Lausanne Chapter 4/5 Implement contracts
- 30. Windows 8 charms & contracts App contracts • Contracts = agreement between one or more apps Search contract • Add a search pane to search you app’s content and content from other apps Share contract • Help users share content from your app with another and vice versa Play To contract • Play digital media to connected DLNA devices Settings contract • Provide quick, in-context to your app’s settings
- 31. Windows 8.1 search improvements Search in Windows 8 • Used the Search charm • Implement the Search contract + SearchPane API Search in Windows 8.1 • Use the Search charm for global searches • In-app search should use the SearchBox control Up to 5 suggestions Up to 3 history items Image separators
- 33. | Lausanne Chapter 5/5 Wrap it up!
- 34. Submit your app to the store • • • • • • Open your Windows Store developer account Reserve your app name Choose a business model: free or not, trial, ad-supported Choose the countries and regions where to sell your app Test your app using the Windows App Certification Kit Submit your app to the store
- 35. Windows App Certification Kit App certification process Upload > Security tests > Technical compliance > Content compliance > Signing and publishing Test the readiness of your Windows Store app for Win 8 and 8.1 • • • • • Crash and hang tests App manifest compliance, app capabilities Performance, security Package sanity check Resource usage test
- 36. Helpful ressources Windows Store app UI, start to finish http://msdn.microsoft.com/en-us/library/windows/apps/dn263201.aspx Windows 8.1: New APIs and features for developers http://msdn.microsoft.com/en-us/library/windows/apps/bg182410.aspx Microsoft Virtual Academy – Windows Store Apps with HTML5 Jump Start http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et= 3921&m=3914&ct=19152#?fbid=yDB7PDIZ1Se&et=3921&m=3914&ct= 19152#fbid Free ebook: Programming Windows 8 Apps with HTML, CSS and JavaScript http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebookprogramming-windows-8-apps-with-html-css-and-javascript.aspx