├── .gitignore ├── LICENSE ├── SECURITY.md ├── index.md ├── references.md └── stories ├── 0 ├── 0_Setup.md └── images │ └── add-azure.PNG ├── 1 ├── 111_BuildWebApp.md ├── 112_GeneratePWA.md ├── 113_ConfigureSW.md ├── 114_Test_App.md ├── 121_Add_WIndows_Feature.md ├── 122_BONUS-RenoFeatures.md ├── 123_BONUS-APP-Links.md ├── 124_BONUS_InMemoryCaching.md ├── NII126_cortana-Links.md └── images │ ├── Knowzylogo.png │ ├── livetile.png │ ├── publish-error0.png │ ├── publish0.PNG │ ├── publish1.PNG │ ├── publish2.PNG │ ├── publish3.png │ ├── quickstart-pwa-cli-code-for-website.png │ ├── quickstart-pwa-cli-generate-manifest.png │ ├── quickstart-pwa-cli-publish-windows10.png │ ├── quickstart-pwa-cli-service-worker-code.png │ ├── quickstart-pwa-website-android-polyfill.png │ ├── quickstart-pwa-website-code-for-website.png │ ├── quickstart-pwa-website-generate-manifest.png │ ├── quickstart-pwa-website-images-preview.png │ ├── quickstart-pwa-website-ios-polyfill.png │ ├── quickstart-pwa-website-platforms.png │ ├── quickstart-pwa-website-provide-a-url.png │ ├── quickstart-pwa-website-publish-package.png │ ├── quickstart-pwa-website-select-service-workers.png │ ├── quickstart-pwa-website-service-worker-code.png │ ├── quickstart-pwa-website-upload-an-image.png │ └── swlocal.png ├── 2 ├── 211_Centennial.md ├── 212_Debugging.md ├── 213_AddUwp.md ├── 214_WindowsHello.md ├── 221_XAMLView.md ├── 222_Share.md ├── 223_AppServices.md ├── 231_Inking_Dial.md ├── 232_Windows_Hello.md ├── 233_Extend.md └── images │ ├── 211-add-project-dependencies-2.png │ ├── 211-add-project-dependencies.png │ ├── 211-add-project.png │ ├── 211-add-uwp-project.png │ ├── 211-appx-folder.png │ ├── 211-configuration-manager-deploy.png │ ├── 211-configuration-manager-release.png │ ├── 211-configuration-manager.png │ ├── 211-debug-error.png │ ├── 211-deploy.png │ ├── 211-desktop-folder.png │ ├── 211-edit-project.png │ ├── 211-knowzy-hack.png │ ├── 211-mainviewmodel.png │ ├── 211-reload-project.png │ ├── 211-sdk-version.png │ ├── 211-solution.png │ ├── 211-startmenu.png │ ├── 211-startup-project.png │ ├── 211-unload-project.png │ ├── 211-view-code.png │ ├── 211-win32-dependency.png │ ├── 212-add-project.png │ ├── 212-appxpackagefilelist.png │ ├── 212-breakpoint.png │ ├── 212-debug-options.png │ ├── 212-debug-project-dependencies.png │ ├── 212-debug-project-dependencies2png.PNG │ ├── 212-debug-properties.png │ ├── 212-debug-x86.png │ ├── 212-do-not-launch.png │ ├── 212-exception.png │ ├── 212-extensions.png │ ├── 212-install-debugging-project.png │ ├── 212-just-my-code.png │ ├── 212-new-debugging-project.png │ ├── 212-optimize-code.png │ ├── 212-release-properties.png │ ├── 212-solution-projects.png │ ├── 212-startup-project.png │ ├── 213-add-nuget.PNG │ ├── 213-add-reference.png │ ├── 213-appx-desktop-folder.png │ ├── 213-browse-reference.png │ ├── 213-create-lib.png │ ├── 213-file-not-found.png │ ├── 213-install-desktopbridge-helpers.png │ ├── 213-install-uwpdesktop.png │ ├── 213-knowzy-uwp.png │ ├── 213-knowzy-wpf-start.png │ ├── 213-knowzy-wpf.png │ ├── 213-manage-nuget-packages.png │ ├── 213-microsoft-knowzy-helpers.png │ ├── 213-references-complete.png │ ├── 213-runtime.png │ ├── 213-uwpdesktop.png │ ├── 213-winmd.png │ ├── 214-knowzy-uwp.png │ ├── 214-login-uwp.png │ ├── 214-login-wpf.png │ ├── 221-appx-desktop-folder.png │ ├── 221-appx-folder.png │ ├── 221-xaml-ui.png │ ├── 222-knowzy-share-ui.png │ ├── 222-share-knowzy-toast.png │ ├── 222-share-knowzy.png │ ├── 222-share-picture.png │ ├── 223-appservice-1.png │ ├── 223-appservice-2.png │ ├── 223-appservice-class-lib.png │ ├── 223-appservice-project.png │ ├── 223-appservice-reality.png │ ├── 223-appservicetest.png │ ├── 223-launch-uwp-xaml-ui.png │ ├── 223-uwp-send-response.png │ ├── 223-wpf-receive-response.png │ └── 223-wpf-register-listener.png ├── 3 ├── 311_XamarinForms.md ├── 312_Camera.md ├── 313_InkCanvas.md ├── 321_CustomVisionService.md ├── 322_EmotionAPI.md ├── 323_IntegrateCogSvc.md ├── 331_Social.md ├── 332_Rome.md ├── 341_CognitiveServices.md ├── 342_AzureFunction.md ├── 351_CICD_WindowsApp.md ├── 352_CICD_AndroidApp.md ├── 353_EventLogging.md ├── 361_Bot.md └── images │ ├── add_class.png │ ├── json_as_class.png │ ├── new_project.png │ ├── new_uwp.png │ ├── noses_finished.png │ ├── run.png │ ├── run_android.png │ └── select_platform.png ├── 4 ├── 411_CosmosDB.md ├── 412_OrdersAPI.md ├── 413_ProductsAPI.md ├── 414_Docker.md ├── 415_Kubernetes.md ├── 416_Integrate.md ├── 421_SetupVSTS.md ├── 422_DevopsKubernetes.md ├── 431_Telemetry.md ├── 497_KubernetesVSTS.md ├── 498_KubernetesCICDBehavior.md ├── 499_Troubleshooting.md ├── Reference │ ├── HackSchemas.zip │ ├── customers.json │ ├── orders.json │ └── products.json └── images │ ├── AddCollection.JPG │ ├── AddDockerSupport.png │ ├── AddEnvVars.png │ ├── AddNewApiProject.png │ ├── AddSecondCollection.jpg │ ├── BrowseDocDB.JPG │ ├── ChooseLinux.png │ ├── CloudShellIcon.JPG │ ├── CreateCollection.JPG │ ├── DTScreen1.JPG │ ├── DTScreen2.JPG │ ├── DTScreen3.JPG │ ├── DTScreen3Complete.JPG │ ├── DTScreen3Filled.JPG │ ├── DTScreen3Verified.JPG │ ├── DTScreen4.JPG │ ├── DevOpsPipeline.png │ ├── DocDBPortalKeys.JPG │ ├── DocDbCreateSuccess.JPG │ ├── DocumentExplorer.JPG │ ├── ImportComplete.JPG │ ├── NewApiProject.png │ ├── NewImport.jpg │ ├── docker-sharedrive.png │ ├── dt1.7Folder.JPG │ ├── newtonsoft.png │ └── troubleshooting-fileshare.png └── 5 ├── 511_Paint3d.md ├── 512a_Unity.md ├── 512b_Babylon.md ├── 521_MR.md ├── Reference └── NosePrototype.fbx ├── images ├── 511_1.png ├── 511_2.png ├── 511_3.png ├── 511_4.png ├── 512a_1.png ├── 512a_10.png ├── 512a_11.png ├── 512a_12.png ├── 512a_13.png ├── 512a_14.png ├── 512a_15.png ├── 512a_16.png ├── 512a_17.png ├── 512a_18.png ├── 512a_19.png ├── 512a_2.png ├── 512a_20.png ├── 512a_21.png ├── 512a_22.png ├── 512a_3.png ├── 512a_4.png ├── 512a_5.png ├── 512a_6.png ├── 512a_7.png ├── 512a_8.png ├── 512a_9.png ├── 512b_1.png ├── 512b_2.png ├── 512b_3.png ├── 512b_4.png ├── 512b_5.png ├── 521_1.png └── invitation.png └── story_5.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ## Ignore Visual Studio temporary files, build results, and 3 | ## files generated by popular Visual Studio add-ons. 4 | 5 | # User-specific files 6 | *.suo 7 | *.user 8 | *.userosscache 9 | *.sln.docstates 10 | 11 | # User-specific files (MonoDevelop/Xamarin Studio) 12 | *.userprefs 13 | 14 | # Build results 15 | [Dd]ebug/ 16 | [Dd]ebugPublic/ 17 | [Rr]elease/ 18 | [Rr]eleases/ 19 | x64/ 20 | x86/ 21 | bld/ 22 | [Bb]in/ 23 | [Oo]bj/ 24 | [Ll]og/ 25 | 26 | # Visual Studio 2015 cache/options directory 27 | .vs/ 28 | # Uncomment if you have tasks that create the project's static files in wwwroot 29 | #wwwroot/ 30 | 31 | # MSTest test Results 32 | [Tt]est[Rr]esult*/ 33 | [Bb]uild[Ll]og.* 34 | 35 | # NUNIT 36 | *.VisualState.xml 37 | TestResult.xml 38 | 39 | # Build Results of an ATL Project 40 | [Dd]ebugPS/ 41 | [Rr]eleasePS/ 42 | dlldata.c 43 | 44 | # DNX 45 | project.lock.json 46 | artifacts/ 47 | 48 | *_i.c 49 | *_p.c 50 | *_i.h 51 | *.ilk 52 | *.meta 53 | *.obj 54 | *.pch 55 | *.pdb 56 | *.pgc 57 | *.pgd 58 | *.rsp 59 | *.sbr 60 | *.tlb 61 | *.tli 62 | *.tlh 63 | *.tmp 64 | *.tmp_proj 65 | *.log 66 | *.vspscc 67 | *.vssscc 68 | .builds 69 | *.pidb 70 | *.svclog 71 | *.scc 72 | 73 | # Chutzpah Test files 74 | _Chutzpah* 75 | 76 | # Visual C++ cache files 77 | ipch/ 78 | *.aps 79 | *.ncb 80 | *.opendb 81 | *.opensdf 82 | *.sdf 83 | *.cachefile 84 | *.VC.db 85 | *.VC.VC.opendb 86 | 87 | # Visual Studio profiler 88 | *.psess 89 | *.vsp 90 | *.vspx 91 | *.sap 92 | 93 | # TFS 2012 Local Workspace 94 | $tf/ 95 | 96 | # Guidance Automation Toolkit 97 | *.gpState 98 | 99 | # ReSharper is a .NET coding add-in 100 | _ReSharper*/ 101 | *.[Rr]e[Ss]harper 102 | *.DotSettings.user 103 | 104 | # JustCode is a .NET coding add-in 105 | .JustCode 106 | 107 | # TeamCity is a build add-in 108 | _TeamCity* 109 | 110 | # DotCover is a Code Coverage Tool 111 | *.dotCover 112 | 113 | # NCrunch 114 | _NCrunch_* 115 | .*crunch*.local.xml 116 | nCrunchTemp_* 117 | 118 | # MightyMoose 119 | *.mm.* 120 | AutoTest.Net/ 121 | 122 | # Web workbench (sass) 123 | .sass-cache/ 124 | 125 | # Installshield output folder 126 | [Ee]xpress/ 127 | 128 | # DocProject is a documentation generator add-in 129 | DocProject/buildhelp/ 130 | DocProject/Help/*.HxT 131 | DocProject/Help/*.HxC 132 | DocProject/Help/*.hhc 133 | DocProject/Help/*.hhk 134 | DocProject/Help/*.hhp 135 | DocProject/Help/Html2 136 | DocProject/Help/html 137 | 138 | # Click-Once directory 139 | publish/ 140 | 141 | # Publish Web Output 142 | *.[Pp]ublish.xml 143 | *.azurePubxml 144 | # TODO: Comment the next line if you want to checkin your web deploy settings 145 | # but database connection strings (with potential passwords) will be unencrypted 146 | *.pubxml 147 | *.publishproj 148 | 149 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 150 | # checkin your Azure Web App publish settings, but sensitive information contained 151 | # in these scripts will be unencrypted 152 | PublishScripts/ 153 | 154 | # NuGet Packages 155 | *.nupkg 156 | # The packages folder can be ignored because of Package Restore 157 | **/packages/* 158 | # except build/, which is used as an MSBuild target. 159 | !**/packages/build/ 160 | # Uncomment if necessary however generally it will be regenerated when needed 161 | #!**/packages/repositories.config 162 | # NuGet v3's project.json files produces more ignoreable files 163 | *.nuget.props 164 | *.nuget.targets 165 | 166 | # Microsoft Azure Build Output 167 | csx/ 168 | *.build.csdef 169 | 170 | # Microsoft Azure Emulator 171 | ecf/ 172 | rcf/ 173 | 174 | # Windows Store app package directories and files 175 | AppPackages/ 176 | BundleArtifacts/ 177 | Package.StoreAssociation.xml 178 | _pkginfo.txt 179 | 180 | # Visual Studio cache files 181 | # files ending in .cache can be ignored 182 | *.[Cc]ache 183 | # but keep track of directories ending in .cache 184 | !*.[Cc]ache/ 185 | 186 | # Others 187 | ClientBin/ 188 | ~$* 189 | *~ 190 | *.dbmdl 191 | *.dbproj.schemaview 192 | *.pfx 193 | *.publishsettings 194 | node_modules/ 195 | orleans.codegen.cs 196 | 197 | # Since there are multiple workflows, uncomment next line to ignore bower_components 198 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 199 | #bower_components/ 200 | 201 | # RIA/Silverlight projects 202 | Generated_Code/ 203 | 204 | # Backup & report files from converting an old project file 205 | # to a newer Visual Studio version. Backup files are not needed, 206 | # because we have git ;-) 207 | _UpgradeReport_Files/ 208 | Backup*/ 209 | UpgradeLog*.XML 210 | UpgradeLog*.htm 211 | 212 | # SQL Server files 213 | *.mdf 214 | *.ldf 215 | 216 | # Business Intelligence projects 217 | *.rdl.data 218 | *.bim.layout 219 | *.bim_*.settings 220 | 221 | # Microsoft Fakes 222 | FakesAssemblies/ 223 | 224 | # GhostDoc plugin setting file 225 | *.GhostDoc.xml 226 | 227 | # Node.js Tools for Visual Studio 228 | .ntvs_analysis.dat 229 | 230 | # Visual Studio 6 build log 231 | *.plg 232 | 233 | # Visual Studio 6 workspace options file 234 | *.opt 235 | 236 | # Visual Studio LightSwitch build output 237 | **/*.HTMLClient/GeneratedArtifacts 238 | **/*.DesktopClient/GeneratedArtifacts 239 | **/*.DesktopClient/ModelManifest.xml 240 | **/*.Server/GeneratedArtifacts 241 | **/*.Server/ModelManifest.xml 242 | _Pvt_Extensions 243 | 244 | # Paket dependency manager 245 | .paket/paket.exe 246 | paket-files/ 247 | 248 | # FAKE - F# Make 249 | .fake/ 250 | 251 | # JetBrains Rider 252 | .idea/ 253 | *.sln.iml 254 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. All rights reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Security 4 | 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/). 6 | 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below. 8 | 9 | ## Reporting Security Issues 10 | 11 | **Please do not report security vulnerabilities through public GitHub issues.** 12 | 13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report). 14 | 15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey). 16 | 17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 18 | 19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue: 20 | 21 | * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.) 22 | * Full paths of source file(s) related to the manifestation of the issue 23 | * The location of the affected source code (tag/branch/commit or direct URL) 24 | * Any special configuration required to reproduce the issue 25 | * Step-by-step instructions to reproduce the issue 26 | * Proof-of-concept or exploit code (if possible) 27 | * Impact of the issue, including how an attacker might exploit the issue 28 | 29 | This information will help us triage your report more quickly. 30 | 31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs. 32 | 33 | ## Preferred Languages 34 | 35 | We prefer all communications to be in English. 36 | 37 | ## Policy 38 | 39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd). 40 | 41 | 42 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | # Adventure Works Knowzy Backlog 2 | 3 | There are four User Stories that we are focusing on for this iteration. Each User Story is split into multiple deliverables that each contains several tasks. You will find two types of tasks: 4 | 5 | * Required - we've done our research, you just need to implement the work and learn the technology along the way 6 | * Optional - we like this idea, but we have not decided on the implementation, it's up to you 7 | 8 | User stories are mostly self contained and can be completed in parallel. However, as you get farther along in a specific user story, you might run into tasks that depend on other User Stories. Therefore, the recommendation is to assign the user stories to members of your team and to tackle them in parallel. 9 | 10 | If you are blocked, a representative from the leadership team is always there to help, don't be afraid to reach out. 11 | 12 | The source code for our applications is all open source and can be found on [our github account](https://github.com/Knowzy/KnowzyInternalApps). 13 | 14 | * **[Machine Setup Instructions][0]** 15 | 16 | 1. **User Story** - The shipping department has a fast, responsive, and powerful application for managing day to day duties 17 | * **Deliverable** - Make app more responsive 18 | * [1.1.1 [Required] - Build a responsive Web App][111] 19 | * [1.1.2 [Required] - Generate Progressive Web App (d. 1.1.1)][112] 20 | * [1.1.3 [Required] - Update Web App to PWA (d. 1.1.1)][113] 21 | * [1.1.4 [Required] - Test Your App (d. 1.1.1)][114] 22 | * **Deliverable** - Add Native functionality 23 | * [1.2.1 [Required] - Add Live Tile (d. 1.1.1) ][121] 24 | * [1.2.2 [Optional] - Add Share and Secondary Pinning (d. 1.1.2)][122] 25 | * [1.2.3 [Optional] - Make PWA Linkable (d. 1.1.2)][123] 26 | * [1.2.4 [Optional] - Add In-Memory Caching][124] 27 | 28 | 2. **User Story** - The product department has a modern, secure and forward-looking platform for managing product development life cycle 29 | * **Deliverable** - Enable integration of UWP APIs 30 | * [2.1.1 [Required] - Add Desktop Bridge support in Visual Studio][211] 31 | * [2.1.2 [Required] - Debugging a Windows Desktop Bridge App (d. 2.1.1)][212] 32 | * [2.1.3 [Required] - Adding UWP APIs to a Desktop Bridge App (d. 2.1.2)][213] 33 | * [2.1.4 [Required] - Integrate Windows Hello authentication (d. 2.1.3)][214] 34 | * **Deliverable** - Add UWP XAML support 35 | * [2.2.1 [Required] - Create a new XAML view as part of app package (d. 2.1.1)][221] 36 | * [2.2.2 [Required] - Add support for other apps to share images and create new items (d. 2.1.1)][222] 37 | * [2.2.3 [Required] - Create a new UWP app that integrates with App Services (d. 2.1.1)][223] 38 | * **Deliverable** - Build enhanced UWP experience (d. 2.2.*) 39 | * [2.3.1 [Optional] - Add support for ink (d. 2.2.*)][231] 40 | * [2.3.2 [Optional] - Add complete support for Windows Hello Authentication (d. 2.1.3)][232] 41 | * [2.3.3 [Optional] - Add support for more UWP features (d. 2.2.*)][233] 42 | 43 | 3. **User Story** - Consumers have a fun mobile experience 44 | * **Deliverable** - Create a UWP and Android mobile app 45 | * [3.1.1 [Required] - Create a Xamarin.Forms app with shared UI][311] 46 | * [3.1.2 [Required] - Integrate native camera to capture image for each platform (d. 3.1.1)][312] 47 | * [3.1.3 [Required] - Add InkCanvas support for UWP (d. 3.1.2)][313] 48 | * **Deliverable** - Add intelligence to the mobile app 49 | * [3.2.1 [Required] - Set up Cognitive Services Custom Vision Service][321] 50 | * [3.2.2 [Required] - Set up Cognitive Services Emotion Service (d. 3.2.1)][322] 51 | * [3.2.3 [Required] - Update Xamarin App to call Cognitive Services APIs (d. 3.2.2)][323] 52 | * **Deliverable** - Create a fun social experience 53 | * [3.3.1 [Optional] - Support sharing images to Social Networks (d. 3.2.3)][331] 54 | * [3.3.2 [Optional] - Support cross device scenarios (Project Rome) (d. 3.3.1)][332] 55 | * **Deliverable** - Add automatic image analysis 56 | * [3.4.1 [Optional] - Set up Cognitive Services for image face analysis in Azure (d. 323)][341] 57 | * [3.4.2 [Optional] - Create an Azure Function to analyze an image and return nose location to automatically position in app (d. 3.4.1)][342] 58 | * **Deliverable** - Set up Continuous Integration and Deployment 59 | * [3.5.1 [Optional] - Set up Continuous Integration and Deployment for the Windows App using Visual Studio Mobile Center][351] 60 | * [3.5.2 [Optional] - Set up Continuous Integration and Deployment for the Android App using Visual Studio Mobile Center][352] 61 | * [3.5.3 [Optional] - Add Custom Event Logging using Visual Studio Mobile Center][353] 62 | * **Deliverable** - Create a chat bot for support and for order status management 63 | * [3.6.1 [Optional] - Create a bot using the Microsoft Bot Framework][361] 64 | 65 | 4. **User Story** - All platform services are integrated in one platform 66 | * **Deliverable** - Unify and Publish all services 67 | * [4.1.1 - [Required] Create a shared CosmosDB to store all data][411] 68 | * [4.1.2 - [Required] Create API endpoint for shipping services (d. 4.1.1)][412] 69 | * [4.1.3 - [Required] Create API endpoint for product services (d. 4.1.1)][413] 70 | * [4.1.4 - [Required] Create Docker images (d. 4.1.2, 4.1.3)][414] 71 | * [4.1.5 - [Required] Configure Kubernetes and publish to Azure (d. 4.1.4)][415] 72 | * [4.1.6 - [Optional] Integrate Website and APIs (d. 4.1.5)][416] 73 | * **Deliverable** - Set up Continuous Delivery 74 | * [4.2.1 - [Optional] Set up Visual Studio Team Services][421] 75 | * [4.2.2 - [Optional] Continuous Delivery to Kubernetes using VSTS (d. 4.1.5, 4.2.0)][422] 76 | * **Deliverable** - Set up Telemetry 77 | * [4.3.1 - [Optional] Set up telemetry for the web app and APIs][431] 78 | 79 | Good luck! 80 | 81 | [0]: stories/0/0_Setup.md 82 | 83 | [111]: stories/1/111_BuildWebApp.md 84 | [112]: stories/1/112_GeneratePWA.md 85 | [113]: stories/1/113_ConfigureSW.md 86 | [114]: stories/1/114_Test_App.md 87 | [121]: stories/1/121_Add_WIndows_Feature.md 88 | [122]: stories/1/122_BONUS-RenoFeatures.md 89 | [123]: stories/1/123_BONUS-APP-Links.md 90 | [124]: stories/1/124_BONUS_InMemoryCaching.md 91 | 92 | [211]: stories/2/211_Centennial.md 93 | [212]: stories/2/212_Debugging.md 94 | [213]: stories/2/213_AddUwp.md 95 | [214]: stories/2/214_WindowsHello.md 96 | [221]: stories/2/221_XAMLView.md 97 | [222]: stories/2/222_Share.md 98 | [223]: stories/2/223_AppServices.md 99 | [231]: stories/2/231_Inking_Dial.md 100 | [232]: stories/2/232_Windows_Hello.md 101 | [233]: stories/2/233_Extend.md 102 | 103 | [311]: stories/3/311_XamarinForms.md 104 | [312]: stories/3/312_Camera.md 105 | [313]: stories/3/313_InkCanvas.md 106 | [321]: stories/3/321_CustomVisionService.md 107 | [322]: stories/3/322_EmotionAPI.md 108 | [323]: stories/3/323_IntegrateCogSvc.md 109 | [331]: stories/3/331_Social.md 110 | [332]: stories/3/332_Rome.md 111 | [341]: stories/3/341_CognitiveServices.md 112 | [342]: stories/3/342_AzureFunction.md 113 | [343]: stories/3/343_NoseAnalysys.md 114 | [351]: stories/3/351_CICD_WindowsApp.md 115 | [352]: stories/3/352_CICD_AndroidApp.md 116 | [353]: stories/3/353_EventLogging.md 117 | [361]: stories/3/361_Bot.md 118 | 119 | [411]: stories/4/411_CosmosDB.md 120 | [412]: stories/4/412_OrdersAPI.md 121 | [413]: stories/4/413_ProductsAPI.md 122 | [414]: stories/4/414_Docker.md 123 | [415]: stories/4/415_Kubernetes.md 124 | [416]: stories/4/416_Integrate.md 125 | [421]: stories/4/421_SetupVSTS.md 126 | [422]: stories/4/422_DevopsKubernetes.md 127 | [431]: stories/4/431_Telemetry.md 128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /references.md: -------------------------------------------------------------------------------- 1 | # Build Tour 2017 References 2 | 3 | > Note: This is a live page that will be updated during the Build Tour. More content coming later this month. 4 | 5 | ## Keynote 6 | 1. [Bring your app to the Windows Store](https://developer.microsoft.com/store) 7 | 2. [Modernize your app with UWP](https://developer.microsoft.com/windows/apps) 8 | 3. [XAML Standard and .NET Standard 2.0](https://blogs.windows.com/buildingapps/2017/05/19/introducing-xaml-standard-net-standard-2-0/#m6S3FrRIYoLKLWJY.97) 9 | 4. [Microsoft Graph](https://developer.microsoft.com/graph) 10 | 5. [Microsoft Azure](https://docs.microsoft.com/azure/#pivot=get-started) 11 | 6. [Fluent Design System](https://developer.microsoft.com/windows/apps/design) 12 | 7. [Mixed Reality](https://developer.microsoft.com/windows/mixed-reality) 13 | 14 | ## Progressive Web Apps 15 | 1. [PWABuilder Tool](http://www.pwabuilder.com/) 16 | 2. [PWA for Education Blog Post](https://blogs.windows.com/msedgedev/2017/03/10/progressive-web-apps-education/) 17 | 3. [PWA Recorded Session from Build 2017](https://channel9.msdn.com/events/Build/2017/B8075) 18 | 19 | ## Desktop Bridge 20 | 1. [Desktop Bridge](https://developer.microsoft.com/windows/projects/campaigns/windows-desktop-bridge) 21 | 2. [Feedback](https://wpdev.uservoice.com/forums/110705-universal-windows-platform/category/161895-desktop-bridge-centennial) 22 | 3. [Samples](https://github.com/Microsoft/DesktopBridgeToUWP-Samples) 23 | 4. [Microsoft Virtual Academy Tutorials](https://mva.microsoft.com/en-us/training-courses/developers-guide-to-the-desktop-bridge-17373?l=OwpAJ3WhD_6706218965) 24 | 25 | ## Xamarin 26 | 1. [Xamarin Live Player](https://www.xamarin.com/live) 27 | 2. [Visual Studio Mobile Center](https://www.visualstudio.com/vs/mobile-center/) 28 | 3. Xamarin Session demos: [Tasky](https://developer.xamarin.com/samples/mobile/Tasky/), [Azure Storage](https://developer.xamarin.com/samples/xamarin-forms/WebServices/AzureStorage/), [Embedded Forms](https://github.com/davidortinau/build2017-new-in-xamarin-forms) 29 | 4. [What's new in Xamarin Forms, Build 2017](https://channel9.msdn.com/Events/Build/2017/B8099) 30 | 5. [Visual Studio Mobile Center, Build 2017](https://channel9.msdn.com/Events/Build/2017/B8072) 31 | 32 | ## Containers 33 | 1. [Containers](http://www.microsoft.com/containers) 34 | 2. [Microsoft Docker Hub](https://hub.docker.com/u/microsoft) 35 | 3. [Visual Studio Code](http://aka.ms/VSCode) 36 | 4. [VS Code Docker Extension](http://aka.ms/DockerToolsForVSCode) 37 | 38 | ## What's New in AI 39 | 1. [Microsoft AI](http://microsoft.com/ai) 40 | 2. [Cognitive Services](http://www.microsoft.com/cognitive) 41 | 3. [Custom Vision Service](http://aka.ms/customvision) 42 | 4. [Custom Speech Service](http://aka.ms/customspeech) 43 | 5. [Adaptive Cards](http://AdaptiveCards.io) 44 | 6. [Bot Framework](https://dev.botframework.com/) 45 | 46 | ## Serverless in Azure 47 | 1. [Try Functions and Logic App](http://aka.ms/TryFunctions) 48 | 2. [Azure Function Community](https://aka.ms/func-github) 49 | -------------------------------------------------------------------------------- /stories/0/0_Setup.md: -------------------------------------------------------------------------------- 1 | # Task 0 - Machine Setup Instructions 2 | 3 | Before you get started let's make sure your machine has everything installed to be able to complete all tasks for the workshops. Please take some time to go through these steps to save time later during the day. 4 | 5 | 1. Install [The Hack Checklist](http://aka.ms/hackcheck/) from the Windows Store. Run the tool to make sure you have all components installed. 6 | 7 | 2. If you are missing components **ask one of the proctors for their USB key** to install the missing components. We have Visual Studio 2017 Community edition, Unity tools, Docker and more on the USB key. 8 | 9 | ## Don't try to download from the internet, the network connection is really slow and you are wasting some time downloading instead of having fun 10 | 11 | ## If you are missing Azure tools, do **NOT** try to use Web Platform Installer. Launch Visual Studio Installer and add the Azure Capability ![Adding Azure Capability](./images/add-azure.png) 12 | 13 | 3. Go to [our backlog](http://aka.ms/bthack) and have some fun 14 | 15 | 16 | -------------------------------------------------------------------------------- /stories/0/images/add-azure.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/0/images/add-azure.PNG -------------------------------------------------------------------------------- /stories/1/111_BuildWebApp.md: -------------------------------------------------------------------------------- 1 | # Task 1.1.1 - Build a Responsive Web App 2 | 3 | ## Prerequisites 4 | 5 | You will need [Visual Studio 2017](https://developer.microsoft.com/windows/downloads). 6 | 7 | Begin by downloading the codebase for the webapp, go to the git repo [https://github.com/Knowzy/KnowzyInternalApps](https://github.com/Knowzy/KnowzyInternalApps) and clone or download the content onto your local computer. 8 | 9 | 10 | ## Task 11 | ### Make your website responsive. 12 | Most of the work has already been done to make sure that your site works well across different devices, but you will need to make a few adjustments to the code base to ensure that it flows properly for screens of all sizes. You should also make sure that the webapp works across platforms, since some of the Knowzy contractors carry Android tablets instead of Windows 10 devices. 13 | 14 | You should have the code repo on your local device. Open the folder `\src\Knowzy_Shipping_WebApp` and run your web site locally by double-clicking the "Microsoft.Knowzy" Visual Studio file to see the webapp project that you are starting with. 15 | 16 | 17 | 18 | 1. Open up your site.css file at the following path: 19 | 20 | \wwwroot\css\site.css 21 | 22 | and find the following declaration toward the top of the page: 23 | 24 | .container-main { 25 | width: 800px; 26 | padding-right: 15px; 27 | padding-left: 15px; 28 | margin: 0 auto; 29 | } 30 | 31 | 32 | 2. Add a declaration for the "container-main" class inside of a media query. Media queries resize the page properly for different screen sizes. You will want to create media queries with style declarations for the screen sizes of 320px, 768px, 992px, and 1200px like below: 33 | 34 | @media all and (min-width:320px) { 35 | .container-main { 36 | width: 100%; 37 | } 38 | } 39 | 40 | @media all and (min-width:768px) { 41 | .container-main { 42 | width: 750px; 43 | } 44 | } 45 | 46 | @media all and (min-width:992px) { 47 | .container-main { 48 | width: 970px; 49 | } 50 | } 51 | 52 | @media all and (min-width:1200px) { 53 | .container-main { 54 | width: 1170px; 55 | } 56 | } 57 | 58 | Be sure to add these rules *below* the "container-main" rule, so the media queries will override the width of the main rule. 59 | 60 | 3. View your web app in a browser (you can do this by hitting F5 in visual studio or clicking on the start button), and adjust the width of your window to test responsiveness of the design. If you have a tablet device, you can change the orientation of your device to make sure that the page response properly. 61 | 62 | 66 | 67 | 68 | Your app is now ready to be viewed on devices with different screen sizes and orientations. 69 | 70 | 71 | ### Deploy your ASP.net App Changes 72 | Now that you have these powerful new features running locally, you can publish them to your website on Azure. 73 | 74 | 1. In Visual Studio select the "Microsoft.Knowzy.WebApp" in the solution explorer, then choose Build > Publish... 75 | 76 | **NOTE:** Some configurations of Visual Studio may have the "publish" option as its own menu. 77 | 78 | ![publish screen from vs](images/publish0.PNG) 79 | 80 | 2. Choose "Microsoft Azure App Service" from the selection screen 81 | 82 | ![publish screen from vs](images/publish1.PNG) 83 | 84 | 3. Sign into your Azure account to create a new Azure App Service. If you do not have an Azure subscription, please ask one of the proctors for one! 85 | 86 | **NOTE:** We recommend that you use the default Web App Name to avoid conflicts. You may also have to press "Create" more than once to confirm the creation of the App Service, the Resource Group, and the App Service Plan. 87 | 88 | ![publish screen from vs](images/publish2.PNG) 89 | 90 | 4. Hit "Create" and wait for your web app to finish deploying. 91 | 92 | 5. Keep track of the "Site URL" after creating your web app; you'll want to use this later. 93 | 94 | ![publish screen from vs](images/publish3.PNG) 95 | 96 | ## Deployment Errors 97 | * When attempting to deploy, you may run into an issue where Azure complains that a certain .dll is locked. If this is the case, you'll have to perform the following steps: 98 | 1. Sign into [https://portal.azure.com](https://portal.azure.com) with the same credentials you used to deploy your web app 99 | 2. Select "App Services" from the left-most menu (see 1 in the figure below) 100 | 3. Select your web app (see 2 in the figure below) 101 | 4. Press restart on the top menu bar (see 3 in the figure below) 102 | 103 | ![publish screen from vs](images/publish-error0.PNG) 104 | 105 | 5. Once your web app has finished restarting, re-deploying your web app should be successful. 106 | 107 | ## References 108 | 109 | - [Knowzy App GitHub Repo](https://github.com/Knowzy/KnowzyInternalApps) 110 | 111 | 112 | 113 | 114 | ## Continue to [next task >> ](112_GeneratePWA.md) 115 | -------------------------------------------------------------------------------- /stories/1/112_GeneratePWA.md: -------------------------------------------------------------------------------- 1 | # Task 1.1.2 - Generate Progressive Web App 2 | 3 | ## Prerequisites 4 | 5 | This task has a dependency on [Task 1.1.1](111_BuildWebApp.md) and the prerequisites found there. 6 | 7 | 8 | ## Task 9 | 10 | ### Build the Web App Manifest 11 | 12 | The first step is to build the Manifest for your application using the **pwabuilder.com** web site. The builder will search in the home page of your site looking for information about the app in specific meta tags. For more information, read [What is a Manifest](http://docs.pwabuilder.com/whatPWA/what-is-a-manifest/). 13 | 14 | ### Provide a URL 15 | 16 | 1. Open a browser and navigate to [http://preview.pwabuilder.com](http://preview.pwabuilder.com). 17 | 2. Click on the **Get Started** button. 18 | 3. In the URL textbox, enter the https version of your URL of your site and click on **Get Started** again. 19 | 20 | > **Note** Your website URL will likely default to the http version in the browser but all azure websites also have a valid https certificate so https can be used on any azure website. 21 | 22 | ![Provide a URL](images/quickstart-pwa-website-provide-a-url.png) 23 | 24 | ### Generate Manifest 25 | The builder will search in the home page of your site looking for an existing manifest. If not, it will gather information about the app in specific meta tags or propose default values for the manifest properties. It will also show any warnings or suggestions to address potential issues in the collected metadata. Be sure you address any warnings before you move on. 26 | 27 | ![Generate Manifest](images/quickstart-pwa-website-generate-manifest.png) 28 | 29 | 30 | ### Add Images 31 | The builder site also checks whether the manifest has defined the expected icon sizes for the different platforms (Windows, Android, iOS) and helps to generate the missing sizes. You can also generate missing image sizes for other platforms using the [PWA Image Generator](http://appimagegenerator-pre.azurewebsites.net/). 32 | 33 | 1. For our side, we don't have any image defined in the manifest so we'll proceed uploading an image with our app logo. To do this, click on the **Upload an image…** link at the left pane. 34 | 35 | 2. Save the below Knowzy logo to your PC by right clicking and "save image as". 36 | 37 | ![logo to upload](images/Knowzylogo.png) 38 | 39 | 3. Browse to the location of the image you downloaded and if you want to generate the missing sizes, make sure the **Generate missing images from this image** checkbox is marked. 40 | 41 | > **Note:** The **Upload image** option will generate the required image sizes for Windows 10, and suggested images for other platforms. 42 | 43 | ![Upload an Image](images/quickstart-pwa-website-upload-an-image.png) 44 | 45 | 4. Click **Submit**. In our example, the missing image sizes are automatically generated and added to the manifest. 46 | 47 | ![Images Preview](images/quickstart-pwa-website-images-preview.png) 48 | 49 | 5. Click "download manifest" to get a copy of this manifest to add to your web site (how this is done will be explained in the next step). 50 | 51 | 52 | ## Choose a Service Worker 53 | During this step you will choose functionalities you want to add to your app. The builder will include code to use sample service workers implementing those features from a repository. *[Learn more about service workers](http://docs.pwabuilder.com/whatPWA/what-is-a-service-worker/).* There are a number of service workers to choose from on this page, but Knowzy is looking for a way to make sure it's field agents can access the app data when they have poor or no network connection. For this functionality we'll choose the "Offline copy of pages" service worker. 54 | 55 | 1. Select the service worker you want to include in your application. 56 | 57 | ![Select Service Workers](images/quickstart-pwa-website-select-service-workers.png) 58 | 59 | 2. Download the service worker package, including the code for your website and the service worker code. (You can also just copy and paste the code directly from the site). You'll be downloading two different JavaScript files. The first is the registration code, in which you will be instructed on how to add the code to your site in the next section, and the service worker itself. 60 | 61 | 62 | 63 | ## References 64 | - [What is a Service Worker?](http://docs.pwabuilder.com/whatPWA/what-is-a-service-worker/) 65 | 66 | - [PWA Builder](https://www.pwabuilder.com) 67 | 68 | 69 | ## Continue to [next task >> ](113_ConfigureSW.md) 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /stories/1/113_ConfigureSW.md: -------------------------------------------------------------------------------- 1 | # Task 1.1.3 - Update your Web App with PWA features 2 | 3 | ## Prerequisites 4 | 5 | This task has a dependency on [Task 1.1.2](112_GeneratePWA.md) and all of it's prerequisites. 6 | 7 | ## Task 8 | 9 | ### Add Web App Manifest to your site 10 | 11 | The first thing you will need to do is pull the "manifest.json" file and the "images" folder that you obtained from the zip file in the previous step. 12 | 13 | 1. Add the manifest.json and the "images" folder to the root path of your site (wwwroot). Remember, if you change the path of your "images" folder, you need to update the json in your manifest file to reflect your changes. The easiest way to add new content to a project is to drag and drop the contents from the file explorer into the solutions explorer of your project. 14 | 15 | 16 | 17 | 2. Reference the manifest in your page with a link tag: 18 | 19 | 20 | 21 | This can be done by opening the `Views\Shippings\Index.cshtml` page in your site, and adding the following to the top of the document: 22 | 23 | @section HeadExtension{ 24 | 25 | } 26 | 27 | ### Add Service Worker code to your site 28 | 29 | Your Service Worker needs to be added to your site to begin working. 30 | 31 | 1. Copy the "pwabuilder-sw.js" file from the zip you downloaded on the Service Worker page of the PWA Builder website and add it to your js folder in wwwroot (not in a folder) like so: 32 | 33 | ![show sw location](images/swlocal.png) 34 | 35 | 36 | 2. Open up the landing page of your app (index.cshtml) and create a new script tag in the head from within the same HeadExtension section like so: 37 | 38 | @section HeadExtension{ 39 | 40 | 41 | } 42 | 43 | You will want to place this at the top of your document. 44 | 45 | 3. Add the following registration code inside the new script tag: 46 | 47 | //This is the service worker with the combined offline experience (Offline page + Offline copy of pages) 48 | if(navigator.serviceWorker) { 49 | //Add this below content to your HTML page, or add the js file to your page at the very top to register service worker 50 | if (navigator.serviceWorker.controller) { 51 | console.log('[PWA Builder] active service worker found, no need to register') 52 | } else { 53 | 54 | //Register the ServiceWorker 55 | navigator.serviceWorker.register('pwabuilder-sw.js', { 56 | scope: './' 57 | }).then(function(reg) { 58 | console.log('Service worker has been registered for scope:'+ reg.scope); 59 | }); 60 | } 61 | } 62 | 63 | 77 | 78 | 79 | ### Re-Publish Changes 80 | 81 | Now that you have these powerful new features running locally, you can publish them to your website to be consumed as a PWA. 82 | 83 | 1. In Visual studio choose Project > Publish... 84 | 85 | 2. Choose "Microsoft Azure App Service" from the selection screen. 86 | 87 | > **NOTE** if your Visual Studio project is still debugging your Azure server or your local server, you may need to halt the server before re-publishing. 88 | 89 | ![publish screen from vs](images/publish1.PNG) 90 | 91 | 3. Choose "Publish" 92 | 93 | 94 | ## References 95 | - [PWA Builder](https://www.pwabuilder.com) 96 | 97 | 98 | ## Continue to [next task >> ](114_Test_App.md) 99 | -------------------------------------------------------------------------------- /stories/1/114_Test_App.md: -------------------------------------------------------------------------------- 1 | # Task 1.1.4 - Install App Locally for Testing 2 | 3 | ## Prerequisites 4 | 5 | This task has a dependency on [Task 1.1.3](113_ConfigureSW.md) and all of it's prerequisites. 6 | 7 | ## Task 8 | 9 | ### Test the App in Different Browsers 10 | 11 | First, make sure that your PWA works well in the browser. One of the main principles of PWAs is that the app must be "Progressive", meaning that the app should work in any environment. Once the app is confirmed to load as a basic web site, then begin taking advantage of advanced features (such as service workers and app manifest) when they are available. In normal circumstances, you would want to test your app in the array of browsers used by your user. To get you started, we have the newest version of Edge (with service worker support) available to you for free on BrowserStack. 12 | 13 | 1. As of today, testing Service Workers can only be tested in public builds of the latest versions of Chrome and Firefox. To test Service Worker code, open the latest version of Chrome on your computer. 14 | 15 | > **Note:** Service Worker Caching will only function in the recent builds of Chrome and FireFox. Public builds of Microsoft Edge do not have service worker support, however once Edge support is added, your Service Workers will funcation the same way. 16 | 17 | 18 | 2. To test the service worker, open the https version of your web and simply visit a number of pages with the service worker attached to your app. Each page you visit will be added to the cache (don't worry the service worker will always keep itself up to date). You can then go offline and see each of those pages still work fine without a connection. If you are using BrowserStack and can't go offline, simply open up the F12 tooling in the browser and you can validate that the service worker is caching it's content via the console logs. 19 | 20 | 21 | 22 | > Note: Service Workers are also available in latest Windows Insider builds 23 | 24 | ### Install Windows Store PWA locally 25 | 26 | Next you will want to test in the local PWA environment. To do this, we will use more tools from PWABuilder.com. 27 | 28 | 1. In the browser, open [preview.pwabuilder.com/generator](http://preview.pwabuilder.com/generator). 29 | 30 | 2. Enter your site URL and click "Get Started". If you have your manifest properly linked to your page, you should see the data from your manifest (including images) show up in the builder. 31 | 32 | 3. Click on the 3rd tab called "Publish PWA". This time you will click on the "Download" button under "Windows" to get the source code. 33 | 34 | 4. Inside the zip, decompress it and navigate to `\PWA\Store packages\windows10`. Right click on the "test_install" script and choose "run powershell script". 35 | 36 | 5. Follow the prompts to "side load the application". 37 | 38 | 6. Open the app from your start screen / start menu. You are now experiencing your PWA on Windows 10! 39 | 40 | ### F12 with Windows Store PWA 41 | 42 | Your app is sideloaded on your machine, which means it is in debug mode. While PWAs are in debug mode on Windows 10, you have access to the same F12 tools you do while in the Edge browser. With the app in the forefront on your screen, hit the "F12" button on your keyboard and the tools should open. 43 | 44 | ## References 45 | - [PWA Builder](https://www.pwabuilder.com/generator) 46 | 47 | - [BrowserStack](https://www.browserstack.com/test-on-microsoft-edge-browser) 48 | 49 | 50 | ## Continue to [next task >> ](121_Add_WIndows_Feature.md) 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /stories/1/121_Add_WIndows_Feature.md: -------------------------------------------------------------------------------- 1 | # Task 1.2.1 - Add Windows 10 feature 2 | 3 | ## Prerequisites 4 | 5 | This task has a dependency on [Task 1.1.4](114_Test_App.md) and all of it's prerequisites. 6 | 7 | ## Task 8 | 9 | ### Add a Windows feature to your web content. 10 | 11 | One of the coolest things about PWAs on Windows 10 is the technical advantages you get over just running in the browser: 12 | 13 | - Standalone Window 14 | - Independent from browser process (Less overhead / Isolated cache) 15 | - Nearly unlimited storage (indexed DB, localStorage, etc.) 16 | - Offline & background processes 17 | - Access to Windows Runtime (WinRT) APIs via JavaScript (Calendar / Cortana / Address Book / etc) 18 | 19 | ### Feature detect for Windows Store APIs 20 | 21 | In order to utilize a Windows UWP API, you will want to implement a pattern called "feature detection". This allows you to write JavaScript on your page that will only be executed in the context where the APIs are available. In this case, it will only execute while inside a Windows PWA. 22 | 23 | Feature detection can be as simple as looking for the Windows object as below: 24 | 25 | ``` 26 | if(window.Windows){ 27 | /*execute code that calls WIndows APIs */ 28 | } 29 | 30 | ``` 31 | 32 | Keep in mind that not all Windows APIs are available on all Windows 10 devices. Think about the fact that a Windows Phone has a "dialer" for making phone calls, so it has unique APIs that are not available on other device types. Another example is the "Surface Dial" that can be paired to many Windows devices, but not the Xbox, so the "radial dial" APIs are not present on the Xbox. For more specific feature detection, you will want to feature detect the API family as well like below: 33 | 34 | ``` 35 | 36 | if(window.Windows && Windows.UI.Core.SystemNavigationManager){ 37 | /*execute code that calls WIndows APIs */ 38 | } 39 | 40 | ``` 41 | 42 | ### Add code to customize your PWA App container 43 | 44 | Start out by adding some code that adds a message to the tile in the start menu. This code can be run from any page, but you will likely want to place it on index.cshtml, so that it runs as soon as the app is opened. 45 | 46 | 1. Open `Shipping\index.cshtml` in Visual Studio and add a script tag at the bottom of the page. 47 | 48 | 2. Add the following feature detection inside the script tag: 49 | 50 | if(window.Windows && Windows.UI.Notifications){ 51 | /*execute code that calls WIndows APIs */ 52 | } 53 | 54 | 3. Inside the feature detection, add the following code to load the live tile: 55 | 56 | var tileContent = new Windows.Data.Xml.Dom.XmlDocument(); 57 | 58 | var tile = tileContent.createElement("tile"); 59 | tileContent.appendChild(tile); 60 | 61 | var visual = tileContent.createElement("visual"); 62 | tile.appendChild(visual); 63 | 64 | var bindingMedium = tileContent.createElement("binding"); 65 | bindingMedium.setAttribute("template", "TileMedium"); 66 | visual.appendChild(bindingMedium); 67 | 68 | var peekImage = tileContent.createElement("image"); 69 | peekImage.setAttribute("placement", "peek"); 70 | peekImage.setAttribute("src", "https://unsplash.it/150/150/?random"); 71 | peekImage.setAttribute("alt", "Welcome to Knowsie!"); 72 | bindingMedium.appendChild(peekImage); 73 | 74 | var text = tileContent.createElement("text"); 75 | text.setAttribute("hint-wrap", "true"); 76 | text.innerText = "Demo Message"; 77 | bindingMedium.appendChild(text); 78 | 79 | //fire the notification 80 | 81 | var notifications = Windows.UI.Notifications; 82 | var tileNotification = new notifications.TileNotification(tileContent); 83 | notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification); 84 | 85 | ### Test your changes 86 | 87 | To test the changes you have just made, follow the instructions in section 1.1.3 for deploying your web app, then re-deploy your changes. One of the great things about a PWA is that you don't need to redeploy your app to see the changes, you just need to deploy to the web server. You should be able to run your app again and see your live tile code take effect (pin your app's tile to the start menu to see). If you don't see it immediately, it may be because of the great caching you have in your app. If this happens, you can force a cache clear by uninstalling your PWA, then installing it again from the script you downloaded from PWABuilder.com. 88 | 89 | ![see live tile](images/livetile.png) 90 | 91 | **NOTE** if your Visual Studio session is still debugging your Azure instance, you may need to halt your debugger before you test locally again. 92 | 93 | ## Continue to [next task >> ](122_BONUS-RenoFeatures.md) 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /stories/1/122_BONUS-RenoFeatures.md: -------------------------------------------------------------------------------- 1 | 2 | # Add Secondary Pinning and Native Share to App (1.2.2) 3 | 4 | This task has a dependency on [Task 1.2.1](121_Add_WIndows_Feature.md) and all of it's prerequisites. 5 | 6 | ## Task 7 | 8 | 1. Navigate to [Reno.js library documentation](https://github.com/JimGaleForce/Reno/tree/dev) and follow the instructions in the README 9 | 10 | 3. Configure the features if necessary. 11 | 12 | 4. Redeploy site. 13 | 14 | 5. Reinstall your local app (right click PowerShell script included in pwabuilder.com download). 15 | 16 | 17 | 18 | ## References 19 | 20 | - [Project Reno on GitHub](https://github.com/JimGaleForce/Reno/tree/dev) 21 | 22 | 23 | ## Continue to [next task >> ](123_BONUS-APP-Links.md) 24 | -------------------------------------------------------------------------------- /stories/1/123_BONUS-APP-Links.md: -------------------------------------------------------------------------------- 1 | # Add App linking to PWA (1.2.3) 2 | 3 | This task has a dependency on [Task 1.2.1](121_Add_WIndows_Feature.md) and all of it's prerequisites. 4 | 5 | ## Task 6 | 7 | In this BONUS task, you want to configure your PWA to handle all requests that are send to your domain URL. For example you should be able to create a link in a file or email that navigates to `https://YOURSITENAME.azruewebsites.net/receiving` and have that open the receiving section of your PWA, instead of your website. This is a stretch goal. It takes a bit of manual configuration to work. 8 | 9 | 1. Update your local manifest.json (what you downloaded from pwabuilder.com). 10 | 11 | 2. Add JSON object to web site. 12 | 13 | 3. Add activation object to website. 14 | 15 | 4. Redeploy site. 16 | 17 | 5. Reinstall your local app. 18 | 19 | **Tip:** Make sure your ASP.NET MVC site can serve up the windows-app-web-link file. A simple way to do this for testing is to enable known file types to be served - modify your StartUp.cs / Configure method to look as follows: 20 | 21 | app.UseStaticFiles(new StaticFileOptions() 22 | { 23 | ServeUnknownFileTypes = true, 24 | DefaultContentType = "text/plain" 25 | }); 26 | 27 | app.UseStaticFiles(); 28 | 29 | app.UseMvc(routes => 30 | { 31 | ... 32 | 33 | **Tip:** In the generated windows10 package, you can either develop via the source\App.jsproj project in Visual Studio, or you can use your favorite editor with the manifest\appxmanifest.xml file and use the test_install.ps1 script to deploy. 34 | 35 | **Tip:** Remember that Apps for Websites is a Windows 10 Anniversary Update feature. 36 | 37 | If using Visual Studio, make sure your Project Properties Target version is at least "10.0.14393". 38 | 39 | If using the appxmanifest.xml, make sure your MaxVersionTested property has a version number of at least "10.0.14393". 40 | 41 | ## References 42 | 43 | [https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/web-to-app-linking) ** Note code samples in c#, but manifest changes are the same ** 44 | 45 | [https://blogs.windows.com/buildingapps/2016/03/07/hosted-web-apps-go-beyond-the-app/#JoWUjrHvp5wDFPt1.97](https://blogs.windows.com/buildingapps/2016/03/07/hosted-web-apps-go-beyond-the-app/#JoWUjrHvp5wDFPt1.97) ** Note this shows you how to do a javascript activation object to navigate your app to the URL that launched it ** 46 | 47 | 48 | ## Continue to [next task >> ](124_BONUS_InMemoryCaching.md) 49 | -------------------------------------------------------------------------------- /stories/1/124_BONUS_InMemoryCaching.md: -------------------------------------------------------------------------------- 1 | # Task 1.2.4 - Add In-Memory Caching 2 | 3 | Now that you have a running PWA, we'd like you to improve the speed and performance of the Web App. 4 | 5 | ## Prerequisites 6 | 7 | This task has a dependency on [Task 1.2.1][121] and all of it's prerequisites. 8 | 9 | ## Task 10 | 11 | 1. The website currently loads its data from static JSON files in its `wwwroot\Data` folder. Speed up the performance of your website by caching values that are being used by controllers on your website. For example, after enabling caching, update the `GenerateDropdowns` method in `ReceivingsController.cs` to cache the results. 12 | 2. Update the local JSON files while you are running and notice the data does not update when you refresh. 13 | 3. Experiment with different cache sliding expirations to see what happens when you use a more or less frequent expiration and change the local data. 14 | 4. Once the tasks in Section 4 are done, the site will have been updated by your team to get the data from the Shipping and Orders APIs. You can use the caching features to cache the data from the API, and include code to invalidate your cached data from the API after expiration. 15 | 16 | ## Comments 17 | 18 | ###### @ 3:37am 19 | I found [this guide](https://docs.microsoft.com/en-us/aspnet/core/performance/caching/memory) that explains how in-memory caching works with ASP.NET Core. 20 | 21 | [121]: 121_Add_WIndows_Feature.md 22 | -------------------------------------------------------------------------------- /stories/1/NII126_cortana-Links.md: -------------------------------------------------------------------------------- 1 | # Task 1.2.3 - Add Cortana Voice Commands 2 | 3 | ## Prerequisites 4 | 5 | 6 | This task has a dependency on [Task 1.2.1](121_Add_WIndows_Feature.md) and all of it's prerequisites 7 | 8 | 9 | ## Task 10 | 11 | 1. Create VCD file to listen for app commands 12 | 2. Add VCD to web site 13 | 3. Create activation object to handle cortana commands 14 | 4. reinstall your local app (rerun script downloaded from pwabuilder.com) 15 | 16 | ## References 17 | 18 | https://blogs.windows.com/buildingapps/2016/03/01/building-a-media-centric-hosted-web-app/ 19 | 20 | 21 | -------------------------------------------------------------------------------- /stories/1/images/Knowzylogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/Knowzylogo.png -------------------------------------------------------------------------------- /stories/1/images/livetile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/livetile.png -------------------------------------------------------------------------------- /stories/1/images/publish-error0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/publish-error0.png -------------------------------------------------------------------------------- /stories/1/images/publish0.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/publish0.PNG -------------------------------------------------------------------------------- /stories/1/images/publish1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/publish1.PNG -------------------------------------------------------------------------------- /stories/1/images/publish2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/publish2.PNG -------------------------------------------------------------------------------- /stories/1/images/publish3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/publish3.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-cli-code-for-website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-cli-code-for-website.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-cli-generate-manifest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-cli-generate-manifest.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-cli-publish-windows10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-cli-publish-windows10.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-cli-service-worker-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-cli-service-worker-code.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-android-polyfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-android-polyfill.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-code-for-website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-code-for-website.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-generate-manifest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-generate-manifest.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-images-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-images-preview.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-ios-polyfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-ios-polyfill.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-platforms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-platforms.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-provide-a-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-provide-a-url.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-publish-package.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-publish-package.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-select-service-workers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-select-service-workers.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-service-worker-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-service-worker-code.png -------------------------------------------------------------------------------- /stories/1/images/quickstart-pwa-website-upload-an-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/quickstart-pwa-website-upload-an-image.png -------------------------------------------------------------------------------- /stories/1/images/swlocal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/1/images/swlocal.png -------------------------------------------------------------------------------- /stories/2/212_Debugging.md: -------------------------------------------------------------------------------- 1 | # Task 2.1.2 - Debugging a Windows Desktop Bridge App 2 | 3 | This task will guide you through the process of debugging a Windows Desktop Bridge App using Visual Studio 2017. 4 | 5 | ## Prerequisites 6 | 7 | * Basic knowledge of C# development 8 | 9 | * Basic knowledge of client development with the .NET framework 10 | 11 | * Basic knowledge of Windows 10 and the Universal Windows Platform 12 | 13 | * A computer with Windows 10 Anniversary Update or Windows 10 Creators Update. If you want to use the Desktop App Converter with an installer, you will need at least a Pro or Enterprise version, since it leverages a feature called Containers which is not available in the Home version. 14 | 15 | * Visual Studio 2017 with the tools to develop applications for the Universal Windows Platform. Any edition is supported, including the free [Visual Studio 2017 Community](https://www.visualstudio.com/vs/community/) 16 | 17 | * The [Desktop Bridge Debugging Project template](https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.DesktoptoUWPPackagingProject) installed into Visual Studio 2017 18 | 19 | * Complete the section on [Add Desktop Bridge Support using Visual Studio 2017](211_Centennial.md) 20 | 21 | To get started, please open the **Microsoft.Knowzy.WPF.sln** in the **src\Knowzy_Engineering_Win32App** folder with Visual Studio 2017. 22 | 23 | This task covers the following steps: 24 | 1. Install the Desktop Bridge Debugging Project Extension 25 | 26 | 1. Add a Desktop Bridge Debugging project and add project dependencies to the existing WPF and UWP projects 27 | 28 | 1. Configure the Debugging Project to enable F5 builds and deployment of the Knowzy app 29 | 30 | 1. Enable breakpoints in projects 31 | 32 | 33 | ## Step 1: Install the Desktop Bridge Debugging Project Extension 34 | 35 | If you do not have the Desktop Bridge Debugging Project extension installed into Visual Studio 2017, please complete the following steps: 36 | 37 | 1. Click on the **Tools** menu and select **Extensions and Updates...** 38 | 39 | ![Tools and Extensions](images/212-extensions.png) 40 | 41 | 2. Select **Online** and enter **Desktop Bridge Debugging Project** in the search field. Click **Download**. 42 | 43 | ![Install Desktop Bridge Debugging Project](images/212-install-debugging-project.png) 44 | 45 | 3. Close Visual Studio 2017 and the Desktop Bridge Debugging Project Extension will be installed. 46 | 47 | 4. Reopen your Desktop Bridge solution from the [Add Centennial Support using Visual Studio 2017](211_Centennial.md) task. 48 | 49 | ## Step 2: Add the Desktop Bridge Debugging Project to the Solution 50 | 51 | * Right-click on the src folder in the Solution and select **Add | New Project...** 52 | 53 | ![Add project](images/212-add-project.png) 54 | 55 | * Select the **Other Project Types | Desktop Bridge Debugging Project** project template. 56 | 57 | ![Add debugging project](images/212-new-debugging-project.png) 58 | 59 | * Name the project Microsoft.Knowzy.Debug. 60 | 61 | * Make sure you save the project to the **Knowzy_Engineering_Win32App\src** folder. 62 | 63 | 64 | You solution should now contain the following projects. 65 | 66 | ![Solution Projects](images/212-solution-projects.png) 67 | 68 | * Right-click on the Microsoft.Knowzy.Debug project and select **Build Dependencies | Project Dependencies..."** 69 | 70 | * Select the Microsoft.Knowzy.WPF and Microsoft.Knowzy.UWP projects and click **OK**. 71 | 72 | ## Step 3: Configure the Desktop Bridge Debugging Project 73 | 74 | Since we will be working a lot with the Microsoft.Knowzy.UWP project, set the Build Configuration and Platform to **Debug | x86** 75 | 76 | ![Debug | x86 Projects](images/212-debug-x86.png) 77 | 78 | **Clean** the solution by selecting **Clean Solution** from the **Build** menu. 79 | 80 | **Build** the x86 configuration of the solution. (Select **Build Solution** from the **Build** menu). 81 | 82 | After the build completes, deploy the Microsoft.Knowzy.UWP project so its AppX folder is created. The next step needs the AppX folder. 83 | (Select **Deploy Solution** from the **Build** menu). 84 | 85 | Right-click on the Microsoft.Knowzy.Debug project and select **Set as Startup Project**. 86 | 87 | ![Startup Project](images/212-startup-project.png) 88 | 89 | Right-click on the Microsoft.Knowzy.Debug project and select **Properties**. 90 | 91 | For Debug builds use the following settings: 92 | 93 | * Package Layout: ..\Microsoft.Knowzy.UWP\bin\x86\Release 94 | 95 | * Select Uninstall and then re-install my package. 96 | 97 | * From the **Package Layout** field tab to the **Start Up Tile** field and select Microsoft.Knowzy.WPF. 98 | 99 | Notice that we are specifying the path to the **Release** build of the Microsoft.Knowzy.UWP project. This is a fix for the 100 | Visual 2017 C# UWP Desktop Bridge deployment bug we experienced in the previous task. 101 | 102 | ![Debug Properties](images/212-debug-properties.png) 103 | 104 | 105 | * Save and Close the Properties windows. 106 | 107 | > **Note:** The Properties window can be a little buggy in saving your settings so make sure they were saved. Most issues with debugging are caused by 108 | incorrect Debugging Project settings. 109 | 110 | > **Note:** You will need to add the correct Debugging Project Properties for x86 Release and x64 Debug and Release configurations if you want to build them. 111 | 112 | 113 | * Open the AppXPackageFileList.xml file in the Microsoft.Knowzy.Debug project 114 | 115 | ![AppXPackageFileList.xml](images/212-appxpackagefilelist.png) 116 | 117 | * Modify the xml to the following: 118 | 119 | 120 | 122 | 123 | ..\..\bin\Debug 124 | 125 | 126 | 127 | $(PackageLayout)\desktop\Microsoft.Knowzy.WPF.exe 128 | 129 | 130 | 131 | 132 | This XML describes to the DesktopBridge Debugging project the location of the Microsoft.Knowzy.WPF.exe after it is built. It will use it when the project is launched and copy it to the correct location in the AppX package. 133 | This will allow for any changes to the Microsoft.Knowzy.WPF project code to be included in the debugging session. The need for the Desktop Bridge Debugging project will most likely change in future updates to Visual Studio 2017. 134 | 135 | * Save your changes. 136 | 137 | * Now it is time to **Clean** the solution and then **Build** the Solution. 138 | 139 | * If you get a Build error stating the layout file could not be found you may need to manually deploy the Microsoft.Knowzy.UWP project by right-clicking on the Microsoft.Knowzy.UWP project and selecting **Deploy**. 140 | Then build the solution again. 141 | 142 | * Press F5 and your UWP app will now be deployed and launch successfully. You should now be able to set breakpoints in the Microsoft.Knowzy.WPF source code. 143 | 144 | > **Note:** There is a intermitent bug in the Desktop Bridge Debugging Project ** where it may hang when deploying a build. If this happens, use the Task Manager to kill Visual Studio and then reopen then solution. 145 | You should then be able to build and run the app. 146 | 147 | ![Breakpoint](images/212-breakpoint.png) 148 | 149 | * Set a breakpoint at line 79 in the file ViewModels\MainViewModel.cs in the Microsoft.Knowzy.WPF project. Restart the debugging session and it should break into the debugger at line 79. If you do not hit the breakpoint, 150 | **Clean** and **Build** your solution again. 151 | 152 | * Stop debugging and remove the comments we added in the previous task. Press F5 to start the app. You should get the following exception: 153 | 154 | ![Exception](images/212-exception.png) 155 | 156 | For some reason, our UWP app is unable to load the Project.json file and it appears that our app is looking for the file in the wrong directory. This is a common problem with newly converted Desktop Bridge apps. 157 | Depending on how the code is written, the app may be trying to load files from the wrong location. We will fix this in the next task. 158 | 159 | Step 4: Additional Debugging Settings 160 | 161 | In order to be able to easily debug both both the WPF and UWP portions of our app, we need to specify a few more debugging settings. 162 | 163 | * Select **Options...** from the **Debug** menu. 164 | 165 | ![Debug options](images/212-debug-options.png) 166 | 167 | * Click on **Debugging | General** and turn off the **Enable Just My Code** options 168 | 169 | ![Just My Code](images/212-just-my-code.png) 170 | 171 | * Right-click on the Microsoft.Knowzy.UWP project and select **Properties**. 172 | 173 | * Select the **Build** tab and turn off **Optimize Code** 174 | 175 | ![Optimize Code](images/212-optimize-code.png) 176 | 177 | * Select the **Debug** tab and turn on **Do not launch, but debug my code when it starts** 178 | 179 | ![Optimize Code](images/212-do-not-launch.png) 180 | 181 | 182 | We will now fix the products.json issue in the [next task](213_AddUwp.md). 183 | 184 | 185 | ## References 186 | * [Run, debug, and test a packaged desktop app (Desktop Bridge)](https://docs.microsoft.com/en-us/windows/uwp/porting/desktop-to-uwp-debug) 187 | 188 | * [DesktopBridge To UWP Samples](https://github.com/Microsoft/DesktopBridgeToUWP-Samples) 189 | 190 | * [Package a .NET app using Visual Studio ](https://docs.microsoft.com/en-us/windows/uwp/porting/desktop-to-uwp-packaging-dot-net) 191 | 192 | * [BridgeTour Workshop](https://github.com/qmatteoq/BridgeTour-Workshop) 193 | 194 | * [Developers Guide to the Desktop Bridge](https://mva.microsoft.com/en-us/training-courses/developers-guide-to-the-desktop-bridge-17373) 195 | 196 | ## The solution for this task is located [here](https://github.com/Knowzy/KnowzyAppsFinal/tree/master/stories/2/2.1.2) 197 | 198 | ## continue to [next task >> ](213_AddUwp.md) 199 | -------------------------------------------------------------------------------- /stories/2/214_WindowsHello.md: -------------------------------------------------------------------------------- 1 | # Task 2.1.4 - Integrate Windows Hello Authentication 2 | 3 | This task will guide you through the process of adding the Windows Hello UWP API to your Win32 Desktop app using Visual Studio 2017. 4 | We will also add support for presenting Windows 10 UWP Toast notifications to the user. 5 | 6 | ## What is Windows Hello? 7 | [Windows Hello](https://docs.microsoft.com/en-us/windows/uwp/security/microsoft-passport) is the name Microsoft has given to the new biometric sign-in system built into Windows 10. Because it is built directly into the operating system, Windows Hello allows face or fingerprint identification to unlock users' devices. Authentication happens when the user supplies his or her unique biometric identifier to access the device-specific credentials, which means that an attacker who steals the device can't log on to it unless that attacker has the PIN. The Windows secure credential store protects biometric data on the device. By using Windows Hello to unlock a device, the authorized user gains access to all of his or her Windows experience, apps, data, websites, and services. 8 | The Windows Hello authenticator is known as a Hello. A Hello is unique to the combination of an individual device and a specific user. It does not roam across devices, is not shared with a server or calling app, and cannot easily be extracted from a device. If multiple users share a device, each user needs to set up his or her own account. Every account gets a unique Hello for that device. You can think of a Hello as a token you can use to unlock (or release) a stored credential. The Hello itself does not authenticate you to an app or service, but it releases credentials that can. In other words, the Hello is not a user credential but it is a second factor for the authenticating process. 9 | 10 | Windows Hello is shipping as part of the Windows 10 operating system and developers can implement this technology to protect their Universal Windows Platform (UWP) apps and backend services. 11 | 12 | 13 | ## Prerequisites 14 | 15 | * Basic knowledge of C# development 16 | 17 | * Basic knowledge of client development with the .NET framework 18 | 19 | * Basic knowledge of Windows 10 and the Universal Windows Platform 20 | 21 | * A computer with Windows 10 Anniversary Update or Windows 10 Creators Update. If you want to use the Desktop App Converter with an installer, you will need at least a Pro or Enterprise version, since it leverages a feature called Containers which is not available in the Home version. 22 | 23 | * Visual Studio 2017 with the tools to develop applications for the Universal Windows Platform. Any edition is supported, including the free [Visual Studio 2017 Community](https://www.visualstudio.com/vs/community/) 24 | 25 | * Complete the section on [Adding Windows 10 UWP APIs to your Desktop Bridge App](213_AddUwp.md) 26 | 27 | ## Task 28 | 29 | We will use the Desktop Bridge Knowzy application which was created in the previous tasks as a starting point. 30 | To get started, please open the **Microsoft.Knowzy.WPF.sln** in the **src\Knowzy_Engineering_Win32App** folder with Visual Studio 2017. 31 | 32 | >Note: If you are starting with this from the **2.1.3** solution, you will need to do the following: 33 | 34 | * Set the Build configuration to **Debug | x86** 35 | 36 | ![Debug | x86](images/212-debug-x86.png) 37 | 38 | * Select **Options** from the **Debug** menu, From the **Debugging | General** Tab, disable the **Enable Just My Code** option. 39 | 40 | ![Just My Code](images/212-just-my-code.png) 41 | 42 | * Set the **Microsoft.Knowzy.Debug** project as the startup project. 43 | 44 | Verify these settings before you continue with this task. 45 | 46 | #### Step 1: Add a New UWP Helper Class for Windows Hello 47 | 48 | Following the techniques presented in the previous task, we are going to add the Windows 10 UWP code for the Windows Hello API and Toast notifications as helper classes. 49 | These helper classes can be accessed by the Knowzy app when it is running as a Desktop Bridge UWP app. 50 | 51 | * Add a new C# class to the Microsoft.Knowzy.UwpHelpers project. Name the file WindowsHello.cs. 52 | 53 | * Add the following code to WindowsHello.cs. This code uses methods from the Windows 10 UWP API 54 | 55 | using System; 56 | using System.Collections.Generic; 57 | using System.Linq; 58 | using System.Text; 59 | using System.Threading.Tasks; 60 | using Windows.Security.Credentials; 61 | 62 | namespace Microsoft.Knowzy.UwpHelpers 63 | { 64 | public class WindowsHello 65 | { 66 | public static async Task Login() 67 | { 68 | var result = await KeyCredentialManager.IsSupportedAsync(); 69 | String message; 70 | 71 | if (result) 72 | { 73 | var authenticationResult = await KeyCredentialManager.RequestCreateAsync("login", KeyCredentialCreationOption.ReplaceExisting); 74 | if (authenticationResult.Status == KeyCredentialStatus.Success) 75 | { 76 | message = "User is logged in"; 77 | } 78 | else 79 | { 80 | message = "Login error: " + authenticationResult.Status; 81 | } 82 | } 83 | else 84 | { 85 | message = "Windows Hello is not enabled for this device."; 86 | } 87 | 88 | String imagePath = Windows.ApplicationModel.Package.Current.InstalledLocation.Path; 89 | String xml = "" + message + ""; 90 | 91 | Toast.CreateToast(xml); 92 | 93 | return result; 94 | } 95 | } 96 | } 97 | 98 | This is only a starting point for Windows Hello support but it is sufficient to demonstrate how to add Windows 10 UWP APIs to your Desktop Bridge App. You will have the opportunity to complete coding 99 | a Windows Hello login in a later task. 100 | 101 | 102 | #### Step 2: Add a New UWP Helper Class for Toast Notifications 103 | 104 | The previous code example for Windows Hello uses a [Toast](https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-and-notifications-adaptive-interactive-toasts) notification to indicated to the user 105 | if they are logged in. We need to add a UWP Helper class for Toasts. 106 | 107 | * Add a new C# class to the Microsoft.Knowzy.UwpHelpers project. Name the file Toast.cs. 108 | 109 | * Add the following code to Toast.cs. This code uses methods from the Windows 10 UWP API 110 | 111 | using System; 112 | using System.Collections.Generic; 113 | using System.Diagnostics; 114 | using System.Linq; 115 | using System.Text; 116 | using System.Threading.Tasks; 117 | using Windows.Data.Xml.Dom; 118 | using Windows.UI.Notifications; 119 | 120 | namespace Microsoft.Knowzy.UwpHelpers 121 | { 122 | public class Toast 123 | { 124 | static ToastNotification toast = null; 125 | static ToastNotifier notifier = null; 126 | 127 | public static void CreateToast(String xml) 128 | { 129 | if (!ExecutionMode.IsRunningAsUwp()) 130 | { 131 | return; 132 | } 133 | 134 | try 135 | { 136 | if (notifier == null) 137 | { 138 | notifier = ToastNotificationManager.CreateToastNotifier(); 139 | } 140 | else 141 | { 142 | notifier.Hide(toast); 143 | } 144 | XmlDocument toastXml = new XmlDocument(); 145 | toastXml.LoadXml(xml); 146 | 147 | toast = new ToastNotification(toastXml); 148 | notifier.Show(toast); 149 | } 150 | catch (Exception ex) 151 | { 152 | Debug.WriteLine("CreateToast Error:" + ex.Message); 153 | } 154 | } 155 | } 156 | } 157 | 158 | #### Step 3: Add a Reference to Microsoft.Knowzy.UwpHelpers 159 | 160 | * Right-click on the Microsoft.Knowzy.WPF project and select **Add | Reference...** and select the Microsoft.Knowzy.UwpHelpers project. Click **OK**. 161 | 162 | #### Step 4: Add Login Code to the WPF App 163 | 164 | When the Login menu item in clicked in the UI of the Knowzy app, a message to open the Login dialog is sent to the Handle(OpenLoginMessage message) method in 165 | Microsoft.Knowzy.WPF\ViewModels\ShellViewModel.cs. 166 | 167 | ![Knowzy UWP](images/214-knowzy-uwp.png) 168 | 169 | 170 | * Open the file Microsoft.Knowzy.WPF\ViewModels\ShellViewModel.cs and find the Handle(OpenLoginMessage message) method near line 78. 171 | 172 | * Modify the Handle(OpenLoginMessage message) as follows: 173 | 174 | 175 | using Microsoft.Knowzy.UwpHelpers; 176 | 177 | public async void Handle(OpenLoginMessage message) 178 | { 179 | if (ExecutionMode.IsRunningAsUwp()) 180 | { 181 | await WindowsHello.Login(); 182 | } 183 | else 184 | { 185 | _windowManager.ShowDialog(_loginViewModel); 186 | } 187 | } 188 | 189 | * Build and run the solution (with Windows.Knowzy.Debug as the startup project) 190 | 191 | * Click on the Login Menu item. 192 | 193 | * If your computer is capable of running the Windows Hello Login you will be presented with the Windows Hello Login interface. 194 | 195 | * If your computer is not capable of running the Windows Hello Login, a Toast will appear in the lower left corner of your screen. 196 | 197 | ![Login UWP](images/214-login-uwp.png) 198 | 199 | 200 | * Run just the WPF version (right-click on the Microsoft.Knowzy.WPF project and select Debug | Start new instance). Clicking on the Login button will show: 201 | 202 | ![Login WPF](images/214-login-wpf.png) 203 | 204 | Please note that this is not a complete implementation of Windows Hello login. For more information, please go [here](https://docs.microsoft.com/en-us/windows/uwp/security/microsoft-passport). 205 | 206 | We will continue to add more Windows 10 UWP features to our app in the [next task](221_XAMLView.md). 207 | 208 | ## References 209 | 210 | * [Windows Hello](https://docs.microsoft.com/en-us/windows/uwp/security/microsoft-passport) 211 | 212 | * [Tiles, badges, and notifications for UWP apps](https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-badges-notifications) 213 | 214 | * [Adaptive and interactive toast notifications](https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-and-notifications-adaptive-interactive-toasts) 215 | 216 | ## The solution for this task is located [here](https://github.com/Knowzy/KnowzyAppsFinal/tree/master/stories/2/2.1.4) 217 | 218 | ## continue to [next task >> ](221_XAMLView.md) 219 | -------------------------------------------------------------------------------- /stories/2/221_XAMLView.md: -------------------------------------------------------------------------------- 1 | # Task 2.2.1 - Create a new XAML view as part of app package 2 | 3 | This task will guide you through the process of adding a Windows 10 UWP XAML UI to your Win32 Desktop Bridge app using Visual Studio 2017. 4 | We will also add support for using Windows 10 UWP Protocols to communicate between the WPF exe and and UWP exe. 5 | 6 | ## Prerequisites 7 | 8 | * Basic knowledge of C# development 9 | 10 | * Basic knowledge of client development with the .NET framework 11 | 12 | * Basic knowledge of Windows 10 and the Universal Windows Platform 13 | 14 | * A computer with Windows 10 Anniversary Update or Windows 10 Creators Update. If you want to use the Desktop App Converter with an installer, you will need at least a Pro or Enterprise version, since it leverages a feature called Containers which is not available in the Home version. 15 | 16 | * Visual Studio 2017 with the tools to develop applications for the Universal Windows Platform. Any edition is supported, including the free [Visual Studio 2017 Community](https://www.visualstudio.com/vs/community/) 17 | 18 | * Completed the section on [Integrate Windows Hello Authentication](214_WindowsHello.md) 19 | 20 | * Make sure the Microsoft.Knowzy.WPF.sln Build configuration to **Debug | x86** 21 | 22 | ![Debug | x86](images/212-debug-x86.png) 23 | 24 | * Set the **Microsoft.Knowzy.Debug** project as the startup project. 25 | 26 | ## Task 27 | 28 | Our Desktop Bridge version of the Knowzy app actually consists of two different executables. The original WPF version (Microsoft.Knowzy.WPF.exe) and the UWP version (Microsoft.Knowzy.UWP.exe). 29 | Microsoft.Knowzy.UWP.exe is located in src\Microsoft.Knowzy.UWP\bin\x86\Release\AppX. 30 | 31 | ![AppX Folder](images/221-appx-folder.png) 32 | 33 | Microsoft.Knowzy.WPF.exe is located in src\Microsoft.Knowzy.UWP\bin\x86\Release\AppX\desktop 34 | 35 | ![AppX Desktop Folder](images/221-appx-desktop-folder.png) 36 | 37 | The Application element in the Package.appxmanifest in the Microsoft.Knowzy.UWP project specifies that Microsoft.Knowzy.WPF.exe is the app to be launched when the user starts the Desktop Bridge UWP version of Knowzy. 38 | There is actually no mention of Microsoft.Knowzy.UWP.exe in the Package.appxmanifest and it currently will not run. 39 | 40 | 41 | 42 | 43 | 44 | 45 | We are now going to use the Microsoft.Knowzy.UWP.exe to display a UWP XAML UI page. We will launch Microsoft.Knowzy.UWP.exe by using [URI activation](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/handle-uri-activation). 46 | 47 | #### Step 1: Specify an Application Extension in the package manifest 48 | 49 | As mentioned above, the Package.appxmanifest currently does not know anything about Microsoft.Knowzy.UWP.exe. We are going to add an Extension to the Application tag of the Package.appxmanifest. 50 | 51 | * Right-click on the Package.appxmanifest file in the Microsoft.Knowzy.UWP project and select **View Code*** 52 | 53 | * Modify the Application section of the XML to add the following Extensions tag 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | * Your Application section should now look something like this: 62 | 63 | 64 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | The Microsoft.Knowzy.UWP app will now be registered as a handler for the com.microsoft.knowzy.protocol.3d Uniform Resource Identifier (URI) name. 81 | 82 | * Build and Deploy the Microsoft.Knowzy.UWP project to make sure your Package.appxmanifest file is valid. 83 | 84 | #### Step 2: Handle the activated event in Microsoft.Knowzy.UWP 85 | 86 | When another app sends the Knowzy app a protocol message using the com.microsoft.knowzy.protocol.3d URI, Microsoft.Knowzy.UWP.exe will be activated by the operationg system. 87 | We need to add some code to Microsoft.Knowzy.UWP to handle the URI activation. 88 | 89 | * Open the file App.xaml.cs in the Microsoft.Knowzy.UWP project. 90 | 91 | * Add the following activation code at the bottom of the App class: 92 | 93 | protected override void OnActivated(IActivatedEventArgs args) 94 | { 95 | if (args.Kind == ActivationKind.Protocol) 96 | { 97 | ProtocolActivatedEventArgs eventArgs = args as ProtocolActivatedEventArgs; 98 | // TODO: Handle URI activation 99 | // The received URI is eventArgs.Uri.AbsoluteUri 100 | 101 | Uri uri = eventArgs.Uri; 102 | if (uri.Scheme == "com.microsoft.knowzy.protocol.3d") 103 | { 104 | Frame rootFrame = new Frame(); 105 | Window.Current.Content = rootFrame; 106 | rootFrame.Navigate(typeof(MainPage), uri.Query); 107 | Window.Current.Activate(); 108 | } 109 | } 110 | } 111 | 112 | This code will present the MainPage of the app if it receives the URI com.microsoft.knowzy.protocol.3d. 113 | 114 | * Open the file MainPage.xaml in the Microsoft.Knowzy.UWP project. Modify the XAML to add a WebView 115 | 116 | 117 | 118 | 119 | 120 | * Open the file MainPage.xaml.cs in the Microsoft.Knowzy.UWP project. Add the following method to the MainPage class: 121 | 122 | protected override void OnNavigatedTo(NavigationEventArgs args) 123 | { 124 | if (args.Parameter != null) 125 | { 126 | WwwFormUrlDecoder decoder = new WwwFormUrlDecoder(args.Parameter.ToString()); 127 | try 128 | { 129 | var message = decoder.GetFirstValueByName("nose"); 130 | webView.Source = new Uri(message); 131 | } 132 | catch(Exception ex) 133 | { 134 | System.Diagnostics.Debug.WriteLine("MainPage OnNavigatedTo Error: " + ex.Message); 135 | } 136 | } 137 | } 138 | 139 | #### Step 3: Add the Windows 10 UWP URI sending code to the WPF app 140 | 141 | Now that the Microsoft.Knowzy.UWP app knows how to handle a URI request, we are going to add code to the Microsoft.Knowzy.WPF project to make the URI request. 142 | 143 | * Add a new C# class to the Helpers folder of the Microsoft.Knowzy.UwpHelpers project. Name the file UriProtocol.cs. 144 | 145 | * Add the following method to the UriProtocol class. Make sure the class is public, 146 | 147 | public class UriProtocol 148 | { 149 | public static async Task SendUri(Uri uri) 150 | { 151 | // Note: DesktopBridge.Helpers NuGet package incorrectly warns that LaunchUriAsync is not supported in a Centennial App 152 | bool result = await Windows.System.Launcher.LaunchUriAsync(uri); 153 | return result; 154 | } 155 | } 156 | 157 | Intellisense may complain that LaunchUriAsync is only available to UWP apps. You can ignore this warning. 158 | 159 | #### Step 4: Add the URI Code to the WPF App 160 | 161 | Our Knowzy app has an unused View menu item. We will use this to call the code to launch the UWP XAML UI using the Windows 10 UWP uri code we added to the Helpers. 162 | 163 | ![Knowzy UWP](images/214-knowzy-uwp.png) 164 | 165 | * Modify the XAML Microsoft.Knowzy.WPF\Views\MainView.xaml to add a Click event to the View MenuItem (around line 43) 166 | 167 | 168 | 170 | 172 | 174 | 175 | 176 | * Add a Show3DView() method to Microsoft.Knowzy.WPF\Models\MainViewModel.cs 177 | 178 | using Microsoft.Knowzy.UwpHelpers; 179 | using System; 180 | 181 | public async void Show3DView() 182 | { 183 | if (ExecutionMode.IsRunningAsUwp()) 184 | { 185 | Uri uri = new Uri("com.microsoft.knowzy.protocol.3d://" + "message?nose=" + "https://www.remix3d.com/details/G009SXPQ5S3P"); 186 | await UriProtocol.SendUri(uri); 187 | } 188 | else 189 | { 190 | MessageBox.Show("3D View not implemented in WPF version", "Microsoft.Knowzy.WPF"); 191 | }; 192 | } 193 | 194 | * Build and run the solution (with Windows.Knowzy.Debug as the startup application) 195 | 196 | * Select **View 3D** from the **View** menu. The Xaml ui of the Microsoft.Knowzy.UWP app will appear and display the 3D clown nose specified by the Uri parameters. 197 | 198 | ![Knowzy XAML UI](images/221-xaml-ui.png) 199 | 200 | * If you want to suggest to Windows 10 the size of the XAML UI Window, add the following code to the MainPage constructor in the file MainPage.xaml.cs in the Microsoft.Knowzy.UWP project 201 | 202 | using Windows.UI.ViewManagement; 203 | 204 | public MainPage() 205 | { 206 | this.InitializeComponent(); 207 | ApplicationView.GetForCurrentView().TryResizeView(new Size(800, 800)); 208 | } 209 | 210 | We will continue to add more Windows 10 UWP features to our app in the [next task](222_Share.md). 211 | 212 | ## References 213 | 214 | * [Handle URI activation](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/handle-uri-activation) 215 | 216 | ## The solution for this task is located [here](https://github.com/Knowzy/KnowzyAppsFinal/tree/master/stories/2/2.2.1) 217 | 218 | ## continue to [next task >> ](222_Share.md) 219 | -------------------------------------------------------------------------------- /stories/2/231_Inking_Dial.md: -------------------------------------------------------------------------------- 1 | # Task 2.3.1 - Add support for ink 2 | 3 | Our development department is pleased with the results of [Task 2.2.2 Add support for other apps to share images with the Knowzy App](222_Share.md) 4 | that allowed Knowzy app users to share images from other Windows 10 applications with the Knowzy app. However, we would like Knowzy users to be able 5 | to annotate the image with the Windows 10 Inking APIs before sharing the image. 6 | 7 | 8 | ## Prerequisites 9 | 10 | This task has a dependency on [Task 2.2.2](222_Share.md) and all of it's prerequisites 11 | 12 | ## Task 13 | 14 | 1. Share an image from another Windows 10 App. The Knowzy app should appear as one of the options for Share Targets. 15 | 16 | 2. Display a XAML UI for sharing with the Knowzy app. 17 | 18 | 3. Enable Inking controls on the SharePage to allow the user to annotate the image. Look [here](https://stackoverflow.com/questions/37179815/displaying-a-background-image-on-a-uwp-ink-canvas) 19 | for some sample code. You will need to add the Win2D.uwp NuGet Package to your UWP project. 20 | 21 | 4. Display a Toast that displays the annotated image after the sharing operation has completed. 22 | 23 | ## Comments 24 | 25 | ###### @ 8:12am 26 | Our research has found a starting point for the inking idea [here](https://docs.microsoft.com/en-us/windows/uwp/input-and-devices/pen-and-stylus-interactions ) 27 | 28 | ###### @ 10:43am 29 | We also found sample code for Inking [here](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/SimpleInk) 30 | 31 | ###### @ 10:49am 32 | 33 | You might need to add the following to the Dependencies tag of Package.appxmanifest in Microsoft.Knowzy.UWP in order to be able to use Win2D with Visual Studio 2017 34 | 35 | ```xml 36 | 37 | 38 | 39 | 40 | ``` 41 | 42 | ###### @ 10:58am 43 | 44 | Hint: save the image file you receive from the Sharing Protocol to ApplicationData.Current.TemporaryFolder before trying to open it with Win2D. 45 | 46 | ## The solution for this task is located [here](https://github.com/Knowzy/KnowzyAppsFinal/tree/master/stories/2/2.3.1) 47 | 48 | ## continue to [next task >> ](232_Windows_Hello.md) 49 | -------------------------------------------------------------------------------- /stories/2/232_Windows_Hello.md: -------------------------------------------------------------------------------- 1 | # Task 2.3.2 - Complete support for Windows Hello Authentication 2 | 3 | Our development department is pleased with the results of [Task 2.1.4 Integrate Windows Hello Authentication](214_WindowsHello.md) 4 | that prototyped using Windows Hello to log into the Knowzy app if the user was using the Desktop Bridge version of Knowzy. We now want you to 5 | attempt a more complete implementation. 6 | 7 | ## Prerequisites 8 | 9 | This task has a dependency on [Task 2.1.4](214_WindowsHello.md) and all of it's prerequisites 10 | 11 | ## Task 12 | 13 | * Implement a complete solution for Windows Hello. 14 | 15 | * Implement a local Windows Hello Server 16 | 17 | * Update Xaml UI as needed. 18 | 19 | ## Comments 20 | 21 | ###### @ 8:14am 22 | Our research has found a starting point for Windows Hello [here](https://docs.microsoft.com/en-us/windows/uwp/security/microsoft-passport) 23 | 24 | ###### @ 10:49am 25 | We also found sample code for Windows Hello [here](https://github.com/Microsoft/Windows-universal-samples/tree/6370138b150ca8a34ff86de376ab6408c5587f5d/Samples/MicrosoftPassport) 26 | 27 | ## continue to [next task >> ](233_Extend.md) -------------------------------------------------------------------------------- /stories/2/233_Extend.md: -------------------------------------------------------------------------------- 1 | # Task 2.3.3 - Integrate with more UWP APIs 2 | 3 | Now that we have moved our apps to UWP, we can start taking advantage of some new APIs to light up our app on Windows 10. Time to build on top of what you've already built and differentiate your app. 4 | 5 | ## Prerequisites 6 | 7 | This task assumes you have completed at least one of the Tasks in 2.2 8 | 9 | ## Task 10 | 11 | Chose one or more from the below APIs to integrate in your app in a meaningful way. You are not limited to the below features - if you find an API or feature is not listed below, ask your proctors if it will satisfy the requirements for this task 12 | 13 | * Composition, Animations, and Effects 14 | 15 | * UWP Community Toolkit 16 | 17 | * Dial 18 | 19 | * Project Rome 20 | 21 | * Inking 22 | 23 | * Devices/Sensors 24 | 25 | * Maps 26 | 27 | * ... 28 | 29 | ## Resource 30 | 31 | Make sure to visit the [Getting Started](https://developer.microsoft.com/en-us/windows/apps/getstarted) portal for [documentation](https://docs.microsoft.com/en-us/uwp/api/), and check out the [UWP samples](https://github.com/Microsoft/Windows-universal-samples) for ideas. 32 | -------------------------------------------------------------------------------- /stories/2/images/211-add-project-dependencies-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-add-project-dependencies-2.png -------------------------------------------------------------------------------- /stories/2/images/211-add-project-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-add-project-dependencies.png -------------------------------------------------------------------------------- /stories/2/images/211-add-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-add-project.png -------------------------------------------------------------------------------- /stories/2/images/211-add-uwp-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-add-uwp-project.png -------------------------------------------------------------------------------- /stories/2/images/211-appx-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-appx-folder.png -------------------------------------------------------------------------------- /stories/2/images/211-configuration-manager-deploy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-configuration-manager-deploy.png -------------------------------------------------------------------------------- /stories/2/images/211-configuration-manager-release.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-configuration-manager-release.png -------------------------------------------------------------------------------- /stories/2/images/211-configuration-manager.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-configuration-manager.png -------------------------------------------------------------------------------- /stories/2/images/211-debug-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-debug-error.png -------------------------------------------------------------------------------- /stories/2/images/211-deploy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-deploy.png -------------------------------------------------------------------------------- /stories/2/images/211-desktop-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-desktop-folder.png -------------------------------------------------------------------------------- /stories/2/images/211-edit-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-edit-project.png -------------------------------------------------------------------------------- /stories/2/images/211-knowzy-hack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-knowzy-hack.png -------------------------------------------------------------------------------- /stories/2/images/211-mainviewmodel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-mainviewmodel.png -------------------------------------------------------------------------------- /stories/2/images/211-reload-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-reload-project.png -------------------------------------------------------------------------------- /stories/2/images/211-sdk-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-sdk-version.png -------------------------------------------------------------------------------- /stories/2/images/211-solution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-solution.png -------------------------------------------------------------------------------- /stories/2/images/211-startmenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-startmenu.png -------------------------------------------------------------------------------- /stories/2/images/211-startup-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-startup-project.png -------------------------------------------------------------------------------- /stories/2/images/211-unload-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-unload-project.png -------------------------------------------------------------------------------- /stories/2/images/211-view-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-view-code.png -------------------------------------------------------------------------------- /stories/2/images/211-win32-dependency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/211-win32-dependency.png -------------------------------------------------------------------------------- /stories/2/images/212-add-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-add-project.png -------------------------------------------------------------------------------- /stories/2/images/212-appxpackagefilelist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-appxpackagefilelist.png -------------------------------------------------------------------------------- /stories/2/images/212-breakpoint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-breakpoint.png -------------------------------------------------------------------------------- /stories/2/images/212-debug-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-debug-options.png -------------------------------------------------------------------------------- /stories/2/images/212-debug-project-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-debug-project-dependencies.png -------------------------------------------------------------------------------- /stories/2/images/212-debug-project-dependencies2png.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-debug-project-dependencies2png.PNG -------------------------------------------------------------------------------- /stories/2/images/212-debug-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-debug-properties.png -------------------------------------------------------------------------------- /stories/2/images/212-debug-x86.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-debug-x86.png -------------------------------------------------------------------------------- /stories/2/images/212-do-not-launch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-do-not-launch.png -------------------------------------------------------------------------------- /stories/2/images/212-exception.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-exception.png -------------------------------------------------------------------------------- /stories/2/images/212-extensions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-extensions.png -------------------------------------------------------------------------------- /stories/2/images/212-install-debugging-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-install-debugging-project.png -------------------------------------------------------------------------------- /stories/2/images/212-just-my-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-just-my-code.png -------------------------------------------------------------------------------- /stories/2/images/212-new-debugging-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-new-debugging-project.png -------------------------------------------------------------------------------- /stories/2/images/212-optimize-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-optimize-code.png -------------------------------------------------------------------------------- /stories/2/images/212-release-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-release-properties.png -------------------------------------------------------------------------------- /stories/2/images/212-solution-projects.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-solution-projects.png -------------------------------------------------------------------------------- /stories/2/images/212-startup-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/212-startup-project.png -------------------------------------------------------------------------------- /stories/2/images/213-add-nuget.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-add-nuget.PNG -------------------------------------------------------------------------------- /stories/2/images/213-add-reference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-add-reference.png -------------------------------------------------------------------------------- /stories/2/images/213-appx-desktop-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-appx-desktop-folder.png -------------------------------------------------------------------------------- /stories/2/images/213-browse-reference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-browse-reference.png -------------------------------------------------------------------------------- /stories/2/images/213-create-lib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-create-lib.png -------------------------------------------------------------------------------- /stories/2/images/213-file-not-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-file-not-found.png -------------------------------------------------------------------------------- /stories/2/images/213-install-desktopbridge-helpers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-install-desktopbridge-helpers.png -------------------------------------------------------------------------------- /stories/2/images/213-install-uwpdesktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-install-uwpdesktop.png -------------------------------------------------------------------------------- /stories/2/images/213-knowzy-uwp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-knowzy-uwp.png -------------------------------------------------------------------------------- /stories/2/images/213-knowzy-wpf-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-knowzy-wpf-start.png -------------------------------------------------------------------------------- /stories/2/images/213-knowzy-wpf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-knowzy-wpf.png -------------------------------------------------------------------------------- /stories/2/images/213-manage-nuget-packages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-manage-nuget-packages.png -------------------------------------------------------------------------------- /stories/2/images/213-microsoft-knowzy-helpers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-microsoft-knowzy-helpers.png -------------------------------------------------------------------------------- /stories/2/images/213-references-complete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-references-complete.png -------------------------------------------------------------------------------- /stories/2/images/213-runtime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-runtime.png -------------------------------------------------------------------------------- /stories/2/images/213-uwpdesktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-uwpdesktop.png -------------------------------------------------------------------------------- /stories/2/images/213-winmd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/213-winmd.png -------------------------------------------------------------------------------- /stories/2/images/214-knowzy-uwp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/214-knowzy-uwp.png -------------------------------------------------------------------------------- /stories/2/images/214-login-uwp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/214-login-uwp.png -------------------------------------------------------------------------------- /stories/2/images/214-login-wpf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/214-login-wpf.png -------------------------------------------------------------------------------- /stories/2/images/221-appx-desktop-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/221-appx-desktop-folder.png -------------------------------------------------------------------------------- /stories/2/images/221-appx-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/221-appx-folder.png -------------------------------------------------------------------------------- /stories/2/images/221-xaml-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/221-xaml-ui.png -------------------------------------------------------------------------------- /stories/2/images/222-knowzy-share-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/222-knowzy-share-ui.png -------------------------------------------------------------------------------- /stories/2/images/222-share-knowzy-toast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/222-share-knowzy-toast.png -------------------------------------------------------------------------------- /stories/2/images/222-share-knowzy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/222-share-knowzy.png -------------------------------------------------------------------------------- /stories/2/images/222-share-picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/222-share-picture.png -------------------------------------------------------------------------------- /stories/2/images/223-appservice-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-appservice-1.png -------------------------------------------------------------------------------- /stories/2/images/223-appservice-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-appservice-2.png -------------------------------------------------------------------------------- /stories/2/images/223-appservice-class-lib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-appservice-class-lib.png -------------------------------------------------------------------------------- /stories/2/images/223-appservice-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-appservice-project.png -------------------------------------------------------------------------------- /stories/2/images/223-appservice-reality.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-appservice-reality.png -------------------------------------------------------------------------------- /stories/2/images/223-appservicetest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-appservicetest.png -------------------------------------------------------------------------------- /stories/2/images/223-launch-uwp-xaml-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-launch-uwp-xaml-ui.png -------------------------------------------------------------------------------- /stories/2/images/223-uwp-send-response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-uwp-send-response.png -------------------------------------------------------------------------------- /stories/2/images/223-wpf-receive-response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-wpf-receive-response.png -------------------------------------------------------------------------------- /stories/2/images/223-wpf-register-listener.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/2/images/223-wpf-register-listener.png -------------------------------------------------------------------------------- /stories/3/311_XamarinForms.md: -------------------------------------------------------------------------------- 1 | # Task 3.1.1 - Create a Xamarin.Forms app with shared UI 2 | 3 | Building a cross platform mobile application will help our marketing department reach an even wider audience of potential customers. Xamarin.Forms allows us to build one application that reaches multiple platforms. 4 | 5 | **Goals for this task:** Create a mobile application with Shared App that runs on Android and UWP. 6 | 7 | This is going to be an entirely new product for Knowzy and we'll start from scratch. We've already done some investigation based on the requirements given to us by our management, and we've written a guide for the developer to help them get started. 8 | 9 | ## Prerequisites 10 | 11 | This walkthrough assumes that you have: 12 | 13 | * Windows 10 Creators Update 14 | * Visual Studio 2017 with the following additional workloads: 15 | * Mobile Development with .NET 16 | * Universal Windows Platform development 17 | 18 | [Click here](https://docs.microsoft.com/en-us/visualstudio/install/install-visual-studio) to learn how to install Visual Studio. If you already have Visual Studio 2017 but you're not sure if you have the right workloads installed, open the Visual Studio installer, and then select **Modify** to view your current workloads. Install any that are missing. 19 | 20 | ## Task 21 | 22 | #### Start by creating a new Xamarin.Forms application 23 | 24 | 1. In Visual Studio, select **File -> New -> Project** from the taskbar. 25 | 26 | 2. Under **Templates -> Visual C# -> Cross-Platform** select *Cross Platform App (Xamarin.Forms or Native)*. Pick a name, and then create the project. 27 | > Note: pick a short name and place the project close to the root of your drive (ex: c:\source) in order to avoid long names that might cause issues later when running your project. 28 | 29 | 3. We'll start with a Blank App. Make sure Xamarin.Forms is selected under **UI Technology** and that Shared Project is selected under **Code Sharing Strategy**. 30 | 31 | ![New Project](images/new_project.png) 32 | 33 | > Note: A *Xamarin Mac Agent* window might open asking you to connect to a Mac as soon as you create the project. You can safely ignore the message and close this window. 34 | 35 | > Note: A *New Universal Windows Project* might open asking you to choose target and minimum platform version. Make sure **Target Version** is *Windows 10 Creators Update*. Minimum version can be anything. 36 | 37 | ![New UWP](images/new_uwp.png) 38 | 39 | That's it. At this point, you should probably spend some time checking out the new solution. You'll notice there are four projects in the solution, one shared project and three platform specific projects. To run the app on a specific platform, use the drop down menu near the top of Visual Studio to select which project you want to run: 40 | 41 | ![Select Project](images/select_platform.png) 42 | 43 | We'll focus on UWP and Android for our first release. To run your app as a UWP app, select the UWP project. Then change the architecture (the drop down menu to the left of the Startup projects menu), and select x86 or x64. Then, click the play button (or press **F5**) to build and run the app: 44 | 45 | ![Run](images/run.png) 46 | 47 | To test and debug the app on Android, there are several options: 48 | 49 | * [Use the Android SDK Emulator](https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/debug-on-emulator/android-sdk-emulator/) 50 | 51 | * [Use the Visual Studio Emulator](https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/debug-on-emulator/visual-studio-android-emulator/) 52 | 53 | * [Use a physical device](https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/debug-on-device/) 54 | 55 | > Note: If you try to run the faster x86 version of the Android SDK Emulator and get an exception, you might need to turn of the hypervisor by running the following command in Command Prompt as Administrator: ```bcdedit /set hypervisorlaunchtype off``` and reboot. 56 | 57 | Change the Startup Project to the Android project, and use the drop down menu on the right to select the emulator or device that you want to use. Click the play icon to build and run the app. 58 | 59 | ![Run Android](images/run_android.png) 60 | 61 | Now get to know your new app. 62 | 63 | > Note: Since we'll not be using the iOS project for this release, feel free to remove it from your solution. 64 | 65 | #### Add shared Business Logic 66 | 67 | For our first task, we want to be able to list all the different Knowzy products. Fortunately, we already have a public feed for our products. It's located [here](https://raw.githubusercontent.com/Knowzy/KnowzyInternalApps/master/src/Noses/noses.json), and we can use it to get all of the data for our app. 68 | 69 | 1. Let's create a new class that we can use to represent our nose model. Right-click the Shared project (the one without a platform specifier at the end), and select **Add -> Class**. 70 | 71 | ![Add Class](images/add_class.png) 72 | 73 | Name the new class **Nose**. Erase everything between the namespace definition. We need our new class to match the data that we get from our JSON feed, so we'll create a new class from the JSON. Copy this JSON but don't paste it anywhere yet: 74 | 75 | { 76 | "Id": "RN3454", 77 | "Name": "Black Nose", 78 | "RawMaterial": "Black foam", 79 | "Notes": "Everything you'd expect, and a little something more.", 80 | "Image": "https://raw.githubusercontent.com/Knowzy/KnowzyInternalApps/master/src/Noses/black.png" 81 | } 82 | 83 | In Visual Studio, place the cursor where you want to copy the new class (between the namespace braces). In the taskbar, select **Edit -> Paste Special -> Paste JSON as Classes**. This generates a new class for you by using the JSON that you just copied. You just need to change the name from RootObject to **Nose**. 84 | 85 | ![JSON as Class](images/json_as_class.png) 86 | 87 | 2. Now that we have our model, let's create a way to retrieve the data from our feed. 88 | * First, we'll use Json.Net to deserialize the JSON, so we'll need to reference the Nuget package to both the UWP and the Android project. Right-click each project and select **Manage Nuget Packages**. Search for **Newtonsoft.Json** and then install it (make sure to switch to the **Browse** tab when searching). 89 | * Follow the same steps as above to create a new class in the shared project. 90 | * Name the new class **DataProvider**. 91 | * Make the class public. 92 | * Add this static method in the class to pull in the data from the link above: 93 | 94 | public static async Task GetProducts() 95 | { 96 | using (var client = new HttpClient()) 97 | { 98 | var json = await client.GetStringAsync("https://raw.githubusercontent.com/Knowzy/KnowzyInternalApps/master/src/Noses/noses.json"); 99 | 100 | return JsonConvert.DeserializeObject(json); 101 | } 102 | } 103 | 104 | You'll need to add few namespaces for this function to work: 105 | 106 | using Newtonsoft.Json; 107 | using System.Net.Http; 108 | using System.Threading.Tasks; 109 | 110 | We now have a static method that retrieves the JSON feed and deserializes it into Nose objects, which we can use in our app. 111 | 112 | #### Add shared UI 113 | 114 | Now that we have the business logic out of the way, let's move on to the UI. Xamarin.Forms uses XAML to define the shared UI, so if you've used XAML before, you'll feel right at home. All the shared code is in the shared project of the solution, and there's already a XAML page created for us: MainPage.xaml. Go ahead and open the page. Currently there's only one element there, a [Label](https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/label/). Instead of a Label, we'll use a [ListView](https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/) to display all of the products. 115 | 116 | 1. Remove the Label and add a ListView instead. Give it a name. In this case it's *ProductListView*. 117 | 118 | 119 | 120 | 121 | 122 | 2. Open MainPage.xaml.cs. This is where the underlying code for your app view goes. Here we can override the *OnAppearing* method which allows us to get the list of products, and set them as the source of the ListView. Add the following code to the class: 123 | 124 | protected async override void OnAppearing() 125 | { 126 | base.OnAppearing(); 127 | ProductListView.ItemsSource = await DataProvider.GetProducts(); 128 | } 129 | 130 | 3. Finally, we need to define what each product will look like. For that, we'll create a data template to customize each [Cell](https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/customizing-cell-appearance/). Here is the final XAML for the ListView: 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | **Task Complete**. Go ahead and try running the app on your machine, and then in the Android emulator. 146 | 147 | ![Finished Noses](images/noses_finished.png) 148 | 149 | [Go to the next Task](312_Camera.md) where you'll add another page and the capability to capture an image by using APIs specific to each platform. 150 | 151 | ## Resources 152 | 153 | 1. [Xamarin.Forms Quickstart](https://developer.xamarin.com/guides/xamarin-forms/getting-started/hello-xamarin-forms/quickstart/) 154 | 2. [Introduction to Xamarin.Forms](https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/) 155 | 3. [Xamarin.Forms XAML documentation](https://developer.xamarin.com/guides/xamarin-forms/xaml/) 156 | 157 | ## continue to [next task >> ](312_Camera.md) 158 | 159 | 160 | ## The solution for this task is located [here](https://github.com/Knowzy/KnowzyAppsFinal/tree/master/stories/3/3.1.1) 161 | -------------------------------------------------------------------------------- /stories/3/313_InkCanvas.md: -------------------------------------------------------------------------------- 1 | # Task 3.1.3 - Overlay noses and support inking for UWP 2 | 3 | Our marketing department wants to allow users of our app to capture images, and position Knowzy products over the image to see how they would look. It's a fun way to try the product without actually buying it. The marketing department is hoping that these images will be shared on social media to spread the word. 4 | 5 | **Goals for this task:** 6 | * Overlay noses on top of an image and allow nose to be manipulated. 7 | * Support inking on UWP devices. 8 | 9 | For this task, you will need to access APIs that are specific to each platform. We've done the research on how to do it and have included the steps below. 10 | 11 | ## Prerequisites 12 | 13 | This task has a dependency on [Task 3.1.2](312_Camera.md) and all of it's prerequisites. 14 | 15 | ## Task 16 | 17 | #### Overlay nose on image and allow to be manipulated 18 | 19 | Once the image is captured, let's add the nose image on top of it, and allow the user to move it by panning and resize it by pinching. 20 | 21 | 1. Open the XAML page that you added in the previous task (CameraPage.xaml in this example). 22 | 23 | 2. Add code that does these things: 24 | 25 | * Wraps the image element that hosts the camera image into a new Grid element. 26 | 27 | This will allow you to position multiple elements on top of each other. 28 | 29 | * Adds a new [AbsoluteLayout](https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/) element below the existing Image in the grid. 30 | 31 | * Adds a new Image element inside of the AbsoluteLayout element, which will be used to host the nose image. 32 | 33 | Here is what the final result should look like: 34 | 35 | Before: 36 | 37 | 38 | 39 | After: 40 | 41 | 42 | 43 | 44 | 49 | 50 | 51 | 52 | 53 | 3. Notice that in the XAML, we've set the visibility of the Grid to False. Once the image has been captured, we can set the visibility to True, and then set the source of the noseImage element. Make those changes in the captureButton_Clicked event handler. When you're done, your code should look something like this: 54 | 55 | private async void captureButton_Clicked(object sender, EventArgs e) 56 | { 57 | var photoService = DependencyService.Get(); 58 | if (photoService != null) 59 | { 60 | var imageBytes = await photoService.TakePhotoAsync(); 61 | noseImage.Source = ImageSource.FromUri(new Uri(_nose.Image)); // set source of nose image 62 | image.Source = ImageSource.FromStream(() => new MemoryStream(imageBytes)); 63 | imageGrid.IsVisible = true; // set visibility to true 64 | } 65 | } 66 | 67 | 3. To allow elements to be manipulated by panning or pinching, Xamarin.Forms has built in [Gestures](https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/gestures/). Inside of the the noseImage element that we just added to our page, let's add a new PanGestureRecognizer and a new PinchGestureRecognizer, which will subscribe to the relevant events so we can manipulate the nose image with gestures: 68 | 69 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 4. In your code-behind file (CameraPage.xaml.cs in this example), implement the event handlers for the gestures that we just added. The nose moves with the finger or mouse, and the scale of the image changes when the image is pinched: 84 | 85 | private void OnPanUpdated(object sender, PanUpdatedEventArgs e) 86 | { 87 | switch (e.StatusType) 88 | { 89 | case GestureStatus.Started: 90 | var bounds = AbsoluteLayout.GetLayoutBounds(noseImage); 91 | bounds.X += noseImage.TranslationX; 92 | bounds.Y += noseImage.TranslationY; 93 | AbsoluteLayout.SetLayoutBounds(noseImage, bounds); 94 | noseImage.TranslationX = 0; 95 | noseImage.TranslationY = 0; 96 | break; 97 | 98 | case GestureStatus.Running: 99 | noseImage.TranslationX = e.TotalX; 100 | noseImage.TranslationY = e.TotalY; 101 | break; 102 | } 103 | } 104 | 105 | private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e) 106 | { 107 | switch (e.Status) 108 | { 109 | case GestureStatus.Running: 110 | noseImage.Scale *= e.Scale; 111 | break; 112 | } 113 | } 114 | 115 | That's it. Run the app, take a photo, position the nose, and have fun. 116 | 117 | #### Add inking support on UWP devices. 118 | 119 | In addition to using the built in Xamarin.Forms controls, developers have full access to native platform controls through [native view declaration](https://developer.xamarin.com/guides/xamarin-forms/user-interface/native-views/). This allows developers to use native or custom controls (such as the UWP Community Toolkit), and mix them with Xamarin.Forms controls directly in XAML. For our app, we can use the native InkCanvas control and InkToolbar control when the app runs on UWP. 120 | 121 | 1. To make native views consumable via XAML, add XML namespaces for each platform we'll be embedding views from. 122 | 123 | We'll add the namespace for the UWP native controls as part of the ContentPage declaration that we created in the previous task (CameraPage in our example): 124 | 125 | 133 | 134 | 135 | 2. We can now add two UWP XAML controls directly to the page. 136 | 137 | * Add the InkCanvas below the camera image but above the nose image. 138 | * Add the InkToolbar control between the top button and the imageGrid. 139 | 140 | 144 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | > Note: It is not possible to name native views, so we use a ContentView as a way to get a reference to the native views in our code-behind file. 173 | 174 | 3. To use the native views in the code behind, we need to use compilation directives, as the native views will only be used on the platform in which they are available. In this case, the InkCanvas and InkToolbar are only available on UWP, so we need to use the **WINDOWS_UWP** directive to wrap our code. 175 | 176 | In the constructor of our page, after the call to **InitializeComponent**, we need to bind the InkToolbar to the InkCanvas, and then set the input device type of the InkCanvas to all input types: 177 | 178 | #if WINDOWS_UWP 179 | var inkingWrapper = (Xamarin.Forms.Platform.UWP.NativeViewWrapper)InkingContent.Content; 180 | var inkCanvas = (Windows.UI.Xaml.Controls.InkCanvas)inkingWrapper.NativeElement; 181 | inkCanvas.InkPresenter.InputDeviceTypes = 182 | Windows.UI.Core.CoreInputDeviceTypes.Touch | 183 | Windows.UI.Core.CoreInputDeviceTypes.Mouse | 184 | Windows.UI.Core.CoreInputDeviceTypes.Pen; 185 | 186 | var inkToolbarWrapper = (Xamarin.Forms.Platform.UWP.NativeViewWrapper)InkingToolbar.Content; 187 | var inkToolbar = (Windows.UI.Xaml.Controls.InkToolbar)inkToolbarWrapper.NativeElement; 188 | inkToolbar.TargetInkCanvas = inkCanvas; 189 | #endif 190 | 191 | 4. If you run into a null reference exception, check to see if the following line is added above your page class definition: 192 | 193 | [XamlCompilation(XamlCompilationOptions.Compile)] 194 | 195 | Xamarin adds this line to any new page created to [improve the performance](https://developer.xamarin.com/guides/xamarin-forms/xaml/xamlc/) of XAML pages. However, this optimization will not work when using native views and needs to be deleted. 196 | 197 | And you're done! Run the app and draw the perfect masterpiece. You should now be able to start the app, select a nose, capture an image, position the nose where you want, and on UWP, draw using the pen, mouse or touch. 198 | 199 | Congratulations, you are now done with the first deliverable. You should now be able to take control and start adding more features on your own. Take a look at the other deliverables and tasks for ideas and small hints about how to implement other features that would be useful for our users. 200 | 201 | ## References 202 | 203 | * [Xamarin Native Views](https://developer.xamarin.com/guides/xamarin-forms/user-interface/native-views/) 204 | 205 | ## continue to [next task >> ](321_CustomVisionService.md) 206 | 207 | ## The solution for this task is located [here](https://github.com/Knowzy/KnowzyAppsFinal/tree/master/stories/3/3.1.3) 208 | -------------------------------------------------------------------------------- /stories/3/321_CustomVisionService.md: -------------------------------------------------------------------------------- 1 | # Task 3.2.1 - Set up Cognitive Services Custom Vision Service to Recognize People Wearing Knowzy Products 2 | 3 | Our marketing department wants to let users capture pictures of themselves wearing Knowzy products to share with their friends. Knowzy can use this information to automatically detect what products are being worn and determine the user's excitement for each of the products. This information can be used to drive improvements to those products. 4 | 5 | **Goals for this task:** Enable your Android and UWP app to use a Cognitive Services Custom Vision service to detect Knowzy products and the user's emotion from a captured image. 6 | 7 | ## Prerequisites 8 | 9 | * This task has a dependency on [Task 3.1.3](313_InkCanvas.md) and all of it's prerequisites. 10 | * A Microsoft Account 11 | 12 | ## Task 13 | 14 | ### Create a Cognitive Services **Custom Vision Service** API 15 | 16 | 1. In your web browser, navigate to [https://customvision.ai](https://customvision.ai) 17 | 2. Click the **Sign In** button and enter your Microsoft Account credentials. 18 | 3. Create a new Custom Vision project by clicking the **New Project** tile 19 | 4. Enter a name for the project (you will need to remember this later), and select **General** for the domain 20 | 5. Click the **Create Project** button to create the new Custom Vision project 21 | 6. Click the **Settings** button and copy both the **Training Key** and **Prediction Key** values - these will be required later 22 | 23 | ### Upload Training Images to the Custom Vision Service with Knowzy Products ### 24 | 25 | In order for the Custom Vision Service to detect which Knowzy products appear in images submitted by the app, it must first be *trained*. Training the service requires uploading a small set of images with people wearing Knowzy products in a diverse set of lighting, zooming and other conditions. Each image is *tagged* to tell the service what *classification* the image represents. Once the service has sufficient training images, it will then be able to *classify* other images (that are not part of the training set) based on matching characteristics. 26 | 27 | Because you need between 10-20 images per tag to successfully train the service, we have provided a set of images that are ready to be ingested and tagged. We have also provided a tool which is able to ingest the training images directly from an **Azure Storage** blob account (this will save needing to upload the images). The training images are organized into separate containers for each tag. 28 | 29 | 1. You must first build the training tool. Open the solution at `\src\Tools\Tools.sln` in Visual Studio 2017. If you didn't go through the other tasks make sure you go to the git repo https://github.com/Knowzy/KnowzyInternalApps and clone or download the content onto your local computer first. 30 | 2. Build the solution 31 | 3. Open a command prompt and navigate to the location where Visual Studio output the built `CustomVisionTrainer.exe`. This is `src\Tools\CustomVisionTrainer\bin\Debug`. 32 | 4. Run the `CustomVisionTrainer.exe` tool to upload training images for the three different Knowzy products. The tool requires you to specify the **Training Key** and **Project Name** of your Custom Vision Service project and the name of the project: 33 | 34 | CustomVisionTrainer.exe {Training Key} {Project Name} https://bthackcustomvisiontrain.blob.core.windows.net/knowzy8s Knowzy8s 35 | CustomVisionTrainer.exe {Training Key} {Project Name} https://bthackcustomvisiontrain.blob.core.windows.net/knowzyvr KnowzyVR 36 | CustomVisionTrainer.exe {Training Key} {Project Name} https://bthackcustomvisiontrain.blob.core.windows.net/knowzybowzy KnowzyBowzy 37 | 38 | ### Train the Model 39 | 40 | 1. Switch back to the **Custom Vision** portal in your web browser. 41 | 2. On the **Training Images** tab, verify that the images you just uploaded using the tool are correctly displayed and tagged. **Note:** There may be a delay of up to 3 minutes for the images to appear. 42 | 3. Click the **Train** button. This will display progress and the training images are processed and the model is constructed. The process should take less than 2 minutes. 43 | 4. Click on the **Performance** tab. Verify that a new **Iteration** has been created after the training has completed. Select the latest iteration and click the **Prediction URL** button. Copy the URL under the **If you have an image file** heading. This URL will need to be substituted into our code file later on when you integrate calling this service into our Xamarin application. 44 | 45 | [Go to the next Task](322_EmotionAPI.md) where you'll create a Cognitive Services Emotion API to detect the level of excitement of a user. 46 | 47 | ## References 48 | 49 | * [Custom Vision Service](https://azure.microsoft.com/en-us/services/cognitive-services/custom-vision-service/) 50 | 51 | 52 | ## continue to [next task >> ](322_EmotionAPI.md) 53 | -------------------------------------------------------------------------------- /stories/3/322_EmotionAPI.md: -------------------------------------------------------------------------------- 1 | # Task 3.2.2 - Set up Cognitive Services Emotion Service to Determine User's Excitement 2 | 3 | Our marketing department also wants to verify that Knowzy's users are super excited when wearing their Knowzy products. 4 | 5 | You will create a Cognitive Services Emotion API to assess the emotional state of user's images. You will subsequently integrate calls to this account into the Xamarin app. 6 | 7 | **Goals for this task:** Create a Cognitive Services Emotion API account.. 8 | 9 | ## Prerequisites 10 | 11 | * This task has a dependency on [Task 3.2.1](321_CustomVisionService.md) and all of it's prerequisites. 12 | * An Azure subscription 13 | 14 | ## Task 15 | 16 | ### Create a Cognitive Services **Emotion API** account 17 | 18 | 1. In your web browser, open the Azure Portal [https://portal.azure.com](https://portal.azure.com) 19 | 2. Create a new Emotion API account by clicking the **New Resource** button. 20 | 3. Select **AI + Cognitive Services** 21 | 4. Click the **See All** link 22 | 5. In the filter bar, type **emotion** and hit Enter. Select the **Emotion API (Preview)** item 23 | 6. Click the **Create** button 24 | 7. Enter a name, subscription and location for your account. Select **F0** for the Pricing tier (this tier enables 20 calls / minute). Specify a name for a new **Resource Group**. Check the acknowledgment and the **Create** button to create a new account. 25 | 8. Once the new Emotions API account has been created, on the **Overview** tab, select the **Endpoint** value. This value will be required to be specified when you integrate calling this service from the Xamarin application. 26 | 9. Click **Show Access Keys...**. Copy the value of **Key 1**. This value will be required to be specified when you integrate calling this service from the Xamarin application. 27 | 28 | [Go to the next Task](323_IntegrateCogSvc.md) where you'll add the calls to your Xamarin app to call both the Custom Vision service and the Emotion API service. 29 | 30 | ## References 31 | 32 | * [Emotion API Service](https://azure.microsoft.com/en-us/services/cognitive-services/emotion) 33 | 34 | 35 | ## continue to [next task >> ](323_IntegrateCogSvc.md) 36 | -------------------------------------------------------------------------------- /stories/3/331_Social.md: -------------------------------------------------------------------------------- 1 | # Task 3.3.1 - Support sharing images to Social Networks 2 | 3 | Our users want to be able to share images with their social networks. We want users to spread the word about our products. Enabling the application to share content on every platform will make everyone happy. 4 | 5 | ## Prerequisites 6 | 7 | This task has a dependency on [Task 3.1.2](312_Camera.md) and all of it's prerequisites 8 | 9 | ## Task 10 | 11 | 1. Support sharing content through each platform's native share integration. 12 | 2. Support sharing to Facebook or Twitter directly from the app (min UWP). 13 | 14 | ## Comments 15 | 16 | ###### @ 9:23am 17 | We can use the same method as in [Task 3.1.2](312_Camera.md) to create a sharing class for every platform. Found [this blog](https://xamarinhelp.com/share-dialog-xamarin-forms/) post that does something similar. 18 | 19 | ###### @ 10:31am 20 | We can use the UWP Community toolkit to share to [Facebook](http://docs.uwpcommunitytoolkit.com/en/master/services/Facebook/) and/or [Twitter](http://docs.uwpcommunitytoolkit.com/en/master/services/Twitter/) directly on UWP. Sharing to facebook seems super easy: 21 | 22 | ```csharp 23 | // Initialize service 24 | FacebookService.Instance.Initialize("AppID"); 25 | 26 | // Login to Facebook 27 | if (!await FacebookService.Instance.LoginAsync()) 28 | { 29 | return; 30 | } 31 | 32 | // Post a message with a picture on your wall 33 | await FacebookService.Instance.PostPictureToFeedAsync("Title", picture.Name, stream); 34 | ``` 35 | 36 | ## continue to [next task >> ](332_Rome.md) 37 | -------------------------------------------------------------------------------- /stories/3/332_Rome.md: -------------------------------------------------------------------------------- 1 | # Task 3.3.2 - Capture images remotely 2 | 3 | Many users like to launch and control desktop apps remotely from their phone. 4 | 5 | ## Prerequisites 6 | 7 | This task has a dependency on [Task 3.1.2](312_Camera.md) and all of it's prerequisites. 8 | 9 | ## Task 10 | 11 | 1. Support launching the app remotely on UWP from Android. 12 | 2. Support controlling the app remotely on UWP from Android. 13 | 14 | ## Comments 15 | 16 | ###### @ 9:12am 17 | I found [this blog post](https://blog.xamarin.com/building-remote-control-companion-app-android-project-rome/) that walks through using the Project Rome SDK to use android to launch and control the app on PC, it's exactly what we need. 18 | 19 | ###### @ 10:21am 20 | Check out [Project Rome](https://github.com/Microsoft/project-rome) for docs and more samples 21 | 22 | ###### @ 10:45am 23 | We can use an App Service to support the messaging between Android and UWP. Here is great [blog post](https://blogs.windows.com/buildingapps/2017/03/23/project-rome-android-update-now-app-services-support) on exactly that. I found some resources on creating app services: 24 | 25 | * [Docs on creating and consuming app service](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/how-to-create-and-consume-an-app-service) 26 | * [Docs on communicating with a remote app service](https://docs.microsoft.com/en-us/windows/uwp/launch-resume/communicate-with-a-remote-app-service) 27 | * [App service sample](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/AppServices) 28 | 29 | ## continue to [next task >> ](341_CognitiveServices.md) 30 | -------------------------------------------------------------------------------- /stories/3/341_CognitiveServices.md: -------------------------------------------------------------------------------- 1 | # Task 3.4.1 - Set up Cognitive Services for image face analysis in Azure 2 | 3 | This task will require you to set up a Cognitive Service for facial analysis. You'll use this to allow customers to run your Xamarin app and see what they look like with different KNOWZY noses on their face! 4 | 5 | ## Prerequisites 6 | 7 | * An Azure Subscription 8 | 9 | ## Task 10 | 11 | 1. Create a new Cognitive Services **Face API**. 12 | 13 | 2. Copy your Face API's *Name* and *Key 1* for later usage. 14 | 15 | ## Comments 16 | 17 | ###### @ 2:37am 18 | Creating a Face API couldn't be easier, just follow [this](https://docs.microsoft.com/en-us/azure/cognitive-services/cognitive-services-apis-create-account) guide I found. 19 | 20 | ## continue to [next task >> ](342_AzureFunction.md) 21 | -------------------------------------------------------------------------------- /stories/3/342_AzureFunction.md: -------------------------------------------------------------------------------- 1 | # Task 3.4.2 - Create an Azure Function to analyze an image and return nose location 2 | 3 | Now that you've created a Cognitive Service to tell you where noses are in pictures sent from the Knowzy mobile app, you'll need to create an endpoint to accept those pictures and talk to your Cognitive Service. This task requires you to set up a new Azure Function, and then code and design it to expose an HTTP endpoint that accepts an image file and returns the location of the nose(s) in any faces found in the picture. 4 | 5 | ## Prerequisites 6 | 7 | This task has a dependency on [Task 3.4.1](341_CognitiveServices.md) and all of it's prerequisites 8 | 9 | This walkthrough assumes that you have: 10 | 11 | 1. [Visual Studio 2017 Preview 3](https://www.visualstudio.com/vs/preview/). 12 | 2. [Azure Functions extension](https://blogs.msdn.microsoft.com/webdev/2017/05/10/azure-function-tools-for-visual-studio-2017/) installed. 13 | 14 | 15 | ## Task 16 | 17 | 1. Create a new Azure Functions project in Visual Studio. 18 | 2. Create an HTTP Trigger which will take in a picture and return data. 19 | 3. Within your Function, use the *Name* and *Key* from [Task 3.4.1](341_CognitiveServices.md) to connect to your Cognitive Service and run face detection on the image. 20 | 4. Return the data for the nose location(s) from your Function. 21 | 5. Position Knowzy nose(s) on top of the image in app. 22 | 23 | ## Comments 24 | 25 | ###### @ 11:48am 26 | [This](https://blogs.msdn.microsoft.com/webdev/2017/05/10/azure-function-tools-for-visual-studio-2017/) blog post shows off the Visual Studio tooling that you can use to create a new Azure function. 27 | 28 | ###### @ 1:03pm 29 | I found this explanation for Azure Functions of how to do [HTTP and Webhook Bindings](https://docs.microsoft.com/en-us/azure/azure-functions/functions-bindings-http-webhook). 30 | 31 | ###### @ 2:57pm 32 | I was curious about what the Face API is capable of so I found the [REST Docs](https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236). 33 | 34 | ###### @ 4:32pm 35 | This [quickstart](https://docs.microsoft.com/en-us/azure/cognitive-services/face/quickstarts/csharp) really walks through how to call the Face API from C#. 36 | 37 | ## continue to [next task >> ](351_CICD_WindowsApp.md) 38 | -------------------------------------------------------------------------------- /stories/3/351_CICD_WindowsApp.md: -------------------------------------------------------------------------------- 1 | # Task 3.5.1 - Set up Continuous Integration and Deployment for the Windows app using Visual Studio Mobile Center 2 | 3 | Now that you've made an app that works, the CTO would like to ensure higher quality by setting up Continuous Integration and Delivery. To that end, you've been instructed to make sure that after every code check-in the app compiles, all tests are run, and new versions can be delivered to beta testers with ease. This task will focus on the Windows version of the app with the next task covering Android. 4 | 5 | ## Prerequisites 6 | 7 | * This task has a dependency on [Task 3.1.1][311] and all of it's prerequisites. 8 | * If you've already set up a code repository for [Task 3.4.2][342], you can use that and skip to step 2 below. 9 | 10 | 11 | ## Task 12 | 13 | 1. Add your application to a compatible source control system. 14 | 2. Create a UWP app in the Mobile Center, and connect it to your repo. 15 | 3. Ensure your app builds the first time. 16 | 4. Add your teammates so that they will receive notifications on build. 17 | 5. Make sure your teammates can install your app. 18 | 19 | ## Comments 20 | 21 | ###### @ 7:37am 22 | It sounds like we can use multiple different source control systems with Mobile Center. Check out [these docs](https://docs.microsoft.com/en-us/mobile-center/build/connect) I found about connecting to a repository. 23 | 24 | ###### @ 9:23am 25 | It sounds like the Build config in Mobile Center let's us trigger a build with every code check-in. That means our builds will happen automatically! 26 | 27 | ###### @ 11:56am 28 | My friends wanted to know whenever I built an app so I figured out how to create a distribution group [here](https://docs.microsoft.com/en-us/mobile-center/distribution/groups). 29 | 30 | [311]: /stories/3/311_XamarinForms.md 31 | [352]: /stories/3/352_CICD_AndroidApp.md 32 | [420]: /stories/4/420_SetupVSTS.md 33 | 34 | ## continue to [next task >> ](352_CICD_AndroidApp.md) 35 | -------------------------------------------------------------------------------- /stories/3/352_CICD_AndroidApp.md: -------------------------------------------------------------------------------- 1 | # Task 3.5.2 - Set up Continuous Integration and Deployment for the Android app using Visual Studio Mobile Center 2 | 3 | Now that you've made an app that works, the CTO would like to ensure higher quality by setting up Continuous Integration and Delivery. To that end, you've been instructed to make sure that after every code check-in the app compiles, all tests are run, and new versions can be delivered to beta testers with ease. This task will focus on the Android version of the app, with the previous task covering Windows. 4 | 5 | ## Prerequisites 6 | 7 | * This task has a dependency on [Task 3.1.1][311] and all of it's prerequisites. 8 | * If you've already set up a code repository for [Task 3.5.1][351], you can use that and skip to step 2 below. 9 | 10 | ## Task 11 | 12 | 1. Add your application to a compatible source control system. 13 | 2. Create an Android app in Mobile Center, and connect it to your repo. 14 | 3. Ensure your app builds the first time. 15 | 4. Add your teammates so that they will receive notifications on build. 16 | 5. Make sure your teammates can install your app. 17 | 18 | ## Comments 19 | 20 | ###### @ 9:37am 21 | It sounds like we can use multiple different source control systems with Mobile Center. Check out [these docs](https://docs.microsoft.com/en-us/mobile-center/build/connect) I found about connecting to a repository. 22 | 23 | ###### @ 10:04am 24 | I finally figured out how to [creating a Keystore for signing an app](https://developer.xamarin.com/guides/android/deployment,_testing,_and_metrics/publishing_an_application/part_2_-_signing_the_android_application_package/visual-studio-xa-4.2.5-and-earlier/). This should save you some time! 25 | 26 | ###### @ 1:22pm 27 | It sounds like the Build config in Mobile Center let's us trigger a build with every code check-in. That means our builds will happen automatically! 28 | 29 | ###### @ 3:56pm 30 | My friends wanted to know whenever I built an app so I figured out how to create a distribution group [here](https://docs.microsoft.com/en-us/mobile-center/distribution/groups). 31 | 32 | [311]: /stories/3/311_XamarinForms.md 33 | [341]: /stories/3/351_CICD_WindowsApp.md 34 | [420]: /stories/4/420_SetupVSTS.md 35 | 36 | ## continue to [next task >> ](353_EventLogging.md) 37 | -------------------------------------------------------------------------------- /stories/3/353_EventLogging.md: -------------------------------------------------------------------------------- 1 | # Task 3.5.3 - Add Custom Event Logging using Visual Studio Mobile Center 2 | 3 | Now that you've completed Continuous Integration and Delivery, it's time to get some more value out of Mobile Center. Specifically, we want you to use the Mobile Center SDK to start recording usage statistics and analytics for your app. This will help show the execs how many people are using the app and their usage patterns. 4 | 5 | ## Prerequisites 6 | 7 | * This task has a dependency on [Task 3.5.1][351] or [Task 3.5.2][352] so your app is already connected to Mobile Center. 8 | 9 | ## Task 10 | 11 | 1. Add the Mobile Center SDK to your solution and projects. 12 | 2. Configure the SDK on app start. 13 | 3. Add some custom logging and log an event in your app. 14 | 15 | ## Comments 16 | 17 | ###### @ 12:20pm 18 | I found a great walkthrough on installing the Mobile Center SDK [here](https://docs.microsoft.com/en-us/mobile-center/sdk/getting-started/xamarin). 19 | 20 | ###### @ 2:31pm 21 | [This](https://docs.microsoft.com/en-us/mobile-center/sdk/analytics/xamarin) made adding logging to my Xamarin app super easy. 22 | 23 | ###### @ 4:17pm 24 | It looks like there is a bit of customization you need to do for UWP. [Check it out](https://docs.microsoft.com/en-us/mobile-center/sdk/analytics/uwp). 25 | 26 | 27 | [351]: /stories/3/351_CICD_WindowsApp.md 28 | [352]: /stories/3/352_CICD_AndroidApp.md 29 | 30 | ## continue to [next task >> ](361_Bot.md) 31 | -------------------------------------------------------------------------------- /stories/3/361_Bot.md: -------------------------------------------------------------------------------- 1 | # Task 3.6.1 - Create a Customer Bot 2 | 3 | Our users want to be able to check and modify the status of their orders from anywhere, including chat bot platforms like Skype and Facebook. They'd also like to send feedback and create support tickets from the bot. 4 | 5 | ## Prerequisites 6 | 7 | This task has a dependency on the [Orders API created under section 4.1.2](../4/412_OrdersAPI.md) and all of its prerequisites 8 | 9 | ## Task 10 | 11 | 1. Create a bot using the Microsoft Bot Framework that asks for the user to log in (a Minimum Viable Product would be asking for the user id to identify the user). 12 | 2. Once the user logs in, the bot can list user orders, find a specific order status from an Order ID, and cancel the order if it hasn't been shipped. 13 | 3. The bot also allows the user to open support tickets and send feedback. 14 | 15 | ## Comments 16 | 17 | ###### @ 9:02am 18 | I've done a bit of investigation, found these samples [in C#](https://github.com/Microsoft/BotBuilder-Samples/tree/master/CSharp/) and [in Node.js](https://github.com/Microsoft/BotBuilder-Samples/tree/master/Node) that should help us get started. The core-MultiDialogs and the cards-CarouselCards samples seem interesting. 19 | 20 | ###### @ 9:23am 21 | If the bot asks the user to sign in we can use this [nice library called BotAuth](https://blogs.msdn.microsoft.com/richard_dizeregas_blog/2017/05/15/bot-authentication-in-the-bot-framework/) for it. 22 | 23 | ###### @ 10:31am 24 | We can use this to keep track of the user's id ([C#](https://docs.microsoft.com/en-us/bot-framework/dotnet/bot-builder-dotnet-state) and [Node.js](https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-save-user-data)) like in the core-State sample. After logging in we can use the user id to get our bot to call the [Orders API](../4/412_OrdersAPI.md) to get order details for the user. 25 | 26 | ###### @ 11:05am 27 | We can use Microsoft Cognitive Services to enhance our bot, like the [Language Understanding Intelligent Service](https://azure.microsoft.com/en-us/services/cognitive-services/language-understanding-intelligent-service/) to [understand commands](https://docs.microsoft.com/en-us/bot-framework/cognitive-services-bot-intelligence-overview#language-understanding) and the [Text Analytics API](https://azure.microsoft.com/en-us/services/cognitive-services/text-analytics/) for sentiment analysis of feedback. -------------------------------------------------------------------------------- /stories/3/images/add_class.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/add_class.png -------------------------------------------------------------------------------- /stories/3/images/json_as_class.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/json_as_class.png -------------------------------------------------------------------------------- /stories/3/images/new_project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/new_project.png -------------------------------------------------------------------------------- /stories/3/images/new_uwp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/new_uwp.png -------------------------------------------------------------------------------- /stories/3/images/noses_finished.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/noses_finished.png -------------------------------------------------------------------------------- /stories/3/images/run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/run.png -------------------------------------------------------------------------------- /stories/3/images/run_android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/run_android.png -------------------------------------------------------------------------------- /stories/3/images/select_platform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/3/images/select_platform.png -------------------------------------------------------------------------------- /stories/4/411_CosmosDB.md: -------------------------------------------------------------------------------- 1 | # Task 4.1.1 - Create a shared CosmosDB to store all data 2 | 3 | ## 1. Pre-Requisites 4 | 5 | * You should download and extract the [CosmosDB Data Migration Tool](https://www.microsoft.com/en-us/download/details.aspx?id=46436) 6 | * You'll need a Microsoft Azure subscription for this task. 7 | 8 | ### a. Working with Cloud Shell 9 | 10 | Azure Cloud Shell comes with the Azure CLI already configured. This makes setup straightforward. We'll be using Azure Cloud Shell throughout this guide, and we'll need to get Cloud Shell pointed toward the subscription we want to work with. 11 | 12 | **NB: All shell instructions are based on using the Cloud Shell, using a local powershell, bash session or command prompt may cause unexpected results.** 13 | 14 | i) Access Azure Cloud Shell using the `>_` Icon in the **top right corner** of the portal. 15 | 16 | ![DTUI Import Complete](images/CloudShellIcon.JPG) 17 | 18 | ii) Point to your Azure subscription 19 | 20 | If you have more than one subscription in your azure portal, it's a good idea to first check which one your CLI is pointed to. The command for this is: 21 | 22 | az account show 23 | 24 | If it's not pointed to the subscription you want to use, you can re-point your CLI to the correct subscription using: 25 | 26 | az account set --subscription 27 | 28 | You can list out all subscriptions you have access to using: 29 | 30 | az account list 31 | 32 | ### b. Create a resource group 33 | 34 | We need to create a resource-group to ring-fence all of our work, and we'll start out by storing a couple of variables we're going to use again in our shell. _(Note; many resources within Azure require a unique name, as such we recommend you use the guidelines in the published [naming conventions](https://docs.microsoft.com/en-us/azure/architecture/best-practices/naming-conventions))_ 35 | 36 | ### c. First store the name you want to use for your resource group: 37 | Resource group names must be globally unique within Azure, so make sure it's both memorable, and specific to you and your project. 38 | 39 | RESOURCE_GROUP= 40 | 41 | 42 | ### d. Then supply the location we're going to create it in _(for our example you should pick from: 'eastus', 'westeurope' or 'southeastasia')_ 43 | 44 | LOCATION=eastus 45 | 46 | ### e. Create our new resource group within our current subscription: 47 | ```bash 48 | az group create --name $RESOURCE_GROUP --location $LOCATION 49 | ``` 50 | 51 | ## 2. Create and initialise CosmosDB 52 | 53 | ### a. Store the name of our database: 54 | Like resource group names, CosmosDB names must be globally unique within Azure, so again we should select something specific. 55 | 56 | COSMOSDB_NAME= _(names must be all lower case and no symbols)_ 57 | 58 | ### b. Create the CosmosDB instance 59 | We can now go ahead and use the Azure CLI within the Cloud Shell to create our CosmosDB Instance. 60 | 61 | az cosmosdb create -g $RESOURCE_GROUP -n $COSMOSDB_NAME --locations "EAST US2"=0 62 | 63 | This command will take some time to complete. You'll know it succeeded when the Cloud Shell console outputs something like the below screen, containing the name you specified in step 1 above in the 'documentEndpoint': 64 | 65 | ![image of share screen](images/DocDbCreateSuccess.JPG) 66 | 67 | ### c. Import data into collections 68 | For this step we'll need to use the [CosmosDB Data Migration Tool](https://www.microsoft.com/en-us/download/details.aspx?id=46436) that you should have already downloaded and extracted. 69 | 70 | We're going to perform the following steps for the 3 collections we need to add to Azure; Customers, Products and Orders. For convenience sake you can download a zip file containing all three: [Here](Reference/HackSchemas.zip). 71 | 72 | i) Load up the UI version of the data migration tool by running 'dtui.exe' 73 | 74 | ![DTUI Exe in folder](images/dt1.7Folder.JPG) 75 | 76 | ii) You should be greeted with the following screen below, you can just click 'Next' for now. 77 | 78 | ![DTUI Welcome Screen](images/DTScreen1.JPG) 79 | 80 | iii) This is the 'Source Information' screen where we specify the information source for our import. Select the JSON file for the collection you want to import (We'll use customers.json for our example) then click 'Next' to move on. 81 | 82 | ![DTUI Source Screen](images/DTScreen2.JPG) 83 | 84 | iv) You should now see a screen that looks like below named 'Target Information', where you specify information about the destination of our import. First set the 'Export to' option to: 'CosmosDB - Sequential record import (partitioned collection). 85 | 86 | ![DTUI Target Screen](images/DTScreen3.JPG) 87 | 88 | v) We'll need to retrieve our 'Connection String' from the Azure Portal. Open the portal, and select your CosmosDB Instance, click on 'Keys', select 'Read/Write Keys', and click the button next to 'PRIMARY CONNECTION STRING' to copy it to your clipboard. 89 | 90 | ![Azure Portal DocDB Keys Blade](images/DocDBPortalKeys.JPG) 91 | 92 | vi) Go back to the CosmosDB Data Migration Tool and paste the value into the box for the connection string. The importer also requires that you specify the database you'll be importing to, so add the following string with the name of your database (which you defined in step 2a) to the end of the connection string you just pasted: 93 | 94 | Database= 95 | 96 | You'll have something that looks like this: 97 | 98 | ![DTUI Target Screen](images/DTScreen3Filled.JPG) 99 | 100 | v) Click the 'verify' button, and you should get confirmation that the importer can successfully connect to your CosmosDB. Which should look like this: 101 | 102 | ![DTUI Target screen verified](images/DTScreen3Verified.JPG) 103 | 104 | vi) Now we need to specify the other parameters for the new collection, complete the rest of the form as below: 105 | 106 | * Collection: [name of collection] - _This is the name of the collection that will be created, you should choose from (orders, customers or products) dependent which import you are completing, we chose customers.json so our collection is 'customers'_> 107 | * Partition Key: /[partition key] - _This is the partition key that will be applied to the collection, for customers and orders we do this for '/companyName' for products we use '/category', be careful of case sensitivity here!_ 108 | * Collection Throughput: 400 - _This is the preset throughput to configure the collection for, we want to keep costs down during dev, so we should change this from 1000 (the default) to 400. 109 | * Id Field: id - _This is the ID field of the schema, for sake of simplicity we've made them all 'id' (case sensitive), but this is customisable in more advanced scenarios._ 110 | 111 | Once your form looks like below, we're ready to click 'Next'! 112 | 113 | ![DTUI Complete Target Screen](images/DTScreen3Complete.JPG) 114 | 115 | vii) Click 'Next' on the 'Advanced' settings screen. We want our errors to show in the tool UI so we don't need to specify anything here. Then you should see a screen that looks like this: 116 | 117 | ![DTUI Confirm Import Screen](images/DTScreen4.JPG) 118 | 119 | viii) Carefully review the import settings, and when you're satisfied click 'Import'. If the import fails, errors will be displayed in the UI. All being well, your import will succeed and you'll see a screen similar to this: 120 | 121 | ![DTUI Import Complete](images/ImportComplete.JPG) 122 | 123 | ix) You can now return to the portal, select your CosmosDB Instance, and click on 'Document Explorer' to explore your new schema. 124 | 125 | ![Azure Portal Document Explorer](images/DocumentExplorer.JPG) 126 | 127 | x) To import the other two collections (products and orders in our example given here), simply click 'New Import' and follow steps (ii) through (ix) using the next JSON file and schema Name for your chosen collection. 128 | 129 | ![DTUI New Import](images/NewImport.jpg) 130 | 131 | 132 | ## 3. References 133 | [CosmosDB Migration Tool Download](https://www.microsoft.com/en-us/download/details.aspx?id=46436) 134 | 135 | ## continue to [next task >> ](412_OrdersAPI.md) 136 | -------------------------------------------------------------------------------- /stories/4/413_ProductsAPI.md: -------------------------------------------------------------------------------- 1 | # Task 4.1.3 - Create API endpoint for product services 2 | 3 | You've finished creating the Orders API, and now it's time to create one for Products. 4 | 5 | ## Prerequisites 6 | 7 | * This task has a dependency on [Task 4.1.2][412] and all of its prerequisites. 8 | * [.NET Core SDK 1.1](https://www.microsoft.com/net/download/core) 9 | 10 | ## Creating a .NET Core App 11 | 12 | ### 1. Create a New WebAPI Project 13 | The steps to get started with the Products API are the same as our previous step where we created the [Orders API][412]. 14 | 15 | Again you can use Visual Studio 2017 to create a new project in the `src\2. Services\APIs\Microsoft.Knowzy.ProductsAPI` folder. 16 | 17 | ### 2. Implement the Products API 18 | 19 | Go ahead and implement the Products API endpoints, using Visual Studio 2017 to test locally. 20 | 21 | Implement the following methods in the Products API that are used by the website: 22 | - Get all products 23 | - Get Product by id (includes product stock availability) 24 | - Add new product 25 | 26 | Again: you have access to an [end version of the APIs for your reference in the `azurecompleted` branch of the `KnowzyInternalApps` repo](https://github.com/Knowzy/KnowzyInternalApps/tree/azurecompleted/src/Knowzy_Shipping_WebApp/src/2.%20Services/APIs) to help. 27 | 28 | ### 3. Package for release 29 | 30 | Like before, package the Products API using Visual Studio, then continue to [Task 4.1.4 - Create Docker images][414]. 31 | 32 | ## 4. References 33 | 34 | * [Troubleshooting guide][499] 35 | * [Step 4.1.2 - Orders API][412] 36 | 37 | [412]: /stories/4/412_OrdersAPI.md 38 | [414]: /stories/4/414_Docker.md 39 | [499]: /stories/4/499_Troubleshooting.md 40 | 41 | ## continue to [next task >> ](414_Docker.md) 42 | -------------------------------------------------------------------------------- /stories/4/415_Kubernetes.md: -------------------------------------------------------------------------------- 1 | # Task 4.1.5 - Deploy to Kubernetes on Azure Container Services 2 | 3 | ## 1. Prerequisites 4 | 5 | * Access to Azure subscription. 6 | 7 | * Azure Cloud shell should be pointed toward the correct subscription, more details in [Step 4.1.1](./411_CosmosDB.md) 8 | * You'll also need the name of the resource group created in [Step 4.1.1](./411_CosmosDB.md) 9 | 10 | 11 | ## 2. Creating and deploying to a Kubernetes cluster in Azure Container Service 12 | 13 | ### a. Set up the cluster with Azure Cloud Shell 14 | 15 | We're going to be working within the Azure Cloud Shell. Lets start by setting up a few variables: 16 | 17 | ```bash 18 | # Use the name of the Resource Group created in 4.1.1 if this is not the same Cloud Shell session 19 | RESOURCE_GROUP= 20 | 21 | # A unique DNS Prefix for your cluster, which will also be the Kubernetes cluster name 22 | DNS_PREFIX= 23 | 24 | # The name for the ACS Instance 25 | ACS_NAME= 26 | ``` 27 | 28 | ### b. Create the cluster using the Azure CLI 29 | 30 | We'll add the `--generate-ssh-keys` parameter which generates the necessary SSH key files for the deployment if they don't exist already in the default `~/.ssh/` directory. 31 | 32 | > These keys are needed to grant access to the cluster, and will be stored in the Storage Account created for your Cloud Shell. You can learn more by visiting the [Cloud Shell documentation](https://docs.microsoft.com/en-us/azure/cloud-shell/persisting-shell-storage) 33 | 34 | ```bash 35 | az acs create --orchestrator-type=kubernetes --agent-vm-size Standard_A1 --resource-group $RESOURCE_GROUP --name=$ACS_NAME --dns-prefix=$DNS_PREFIX --generate-ssh-keys 36 | ``` 37 | 38 | This will take several minutes as your resources are created and configured. Once your cluster is created, you'll need to get the config from Kubernetes into your Cloud Shell session so that you can interact with it. 39 | 40 | ```bash 41 | az acs kubernetes get-credentials --resource-group=$RESOURCE_GROUP --name=$ACS_NAME 42 | ``` 43 | 44 | Verify that you can used `kubectl` to talk to the cluster 45 | 46 | ```bash 47 | kubectl cluster-info 48 | ``` 49 | 50 | ### c. Deploying your container images _(from [Step 4.1.4](./414_Docker.md))_ 51 | 52 | i) Store the name of your Azure Container Registry 53 | 54 | This registry was generated in step [4.1.4](./414_Docker.md#acr), and is where the images containing the apps and services we want to deploy are located. 55 | 56 | ```bash 57 | ACR_NAME= 58 | ``` 59 | 60 | ii) Deploy your two services from their respective Docker images. We can deploy by telling kubernetes to get the docker images and deploy them, using the run command in `kubectl`, we're passing the `--env` parameter, to tell the container images the connection string for your data-store, so the running services once deployed know how to connect to the CosmosDB. 61 | 62 | ```bash 63 | # Deploy to Kubernetes 64 | kubectl run ordersapi --image=$ACR_NAME.azurecr.io/knowzy/ordersapi:1 --env "COSMOSDB_ENDPOINT=https://<< your cosmosdb name>>.documents.azure.com:443/" --env "COSMOSDB_KEY=" 65 | kubectl run productsapi --image=$ACR_NAME.azurecr.io/knowzy/productsapi:1 --env "COSMOSDB_ENDPOINT=https://<< your cosmosdb name>>.documents.azure.com:443/" --env "COSMOSDB_KEY=" 66 | kubectl run webapp --image=$ACR_NAME.azurecr.io/knowzy/webapp:1 67 | 68 | # View your running pods 69 | kubectl get pods 70 | ``` 71 | 72 | iii) Expose your services 73 | 74 | You've got containers running on Kubernetes, but they're not yet exposed to the outside world. Let's do that now 75 | 76 | ```bash 77 | # This will create an Azure Load Balancer to direct traffic to your app 78 | kubectl expose deployment ordersapi --port=80 --type=LoadBalancer 79 | kubectl expose deployment productsapi --port=80 --type=LoadBalancer 80 | 81 | # List Kubernetes services, which includes the external IP 82 | kubectl get svc 83 | ``` 84 | 85 | ```bash 86 | NAME CLUSTER-IP EXTERNAL-IP PORT(S) AGE 87 | kubernetes 10.0.0.1 443/TCP 2d 88 | ordersapi 10.0.8.27 80:30213/TCP 3h 89 | productsapi 10.0.8.28 80:30175/TCP 19s 90 | ``` 91 | Initially, you will see something similar to the above. Wait a couple of minutes for the IP's and load balancers to be provisioned, and re-run `kubectl get svc` to see your public-facing IP's. 92 | 93 | ```bash 94 | NAME CLUSTER-IP EXTERNAL-IP PORT(S) AGE 95 | kubernetes 10.0.0.1 443/TCP 2d 96 | ordersapi 10.0.8.27 13.81.60.236 80:30213/TCP 3h 97 | productsapi 10.0.8.28 52.232.72.172 80:30175/TCP 5m 98 | ``` 99 | 100 | You can test your deployment as soon as the `` external IP is provided. Simply go into your browser to the url provided `http://<>/api/values`. 101 | 102 | 103 | iii) Deploy your webapp from the Docker image. We deploy the same way as above, but we don't need the database parameter, as the front end web application should have no direct access to the CosmosDB. Instead we should provide the url to the api services 104 | 105 | ```bash 106 | kubectl run webapp --image=$ACR_NAME.azurecr.io/knowzy/webapp:1 --env "PRODUCTSAPI_URL=<>" --env "ORDERAPI_URL=<>" 107 | ``` 108 | 109 | iv) Expose your webapp and consume your APIs 110 | 111 | ```bash 112 | kubectl expose deployment webapp --port=80 --type=LoadBalancer 113 | ``` 114 | 115 | Wait for the IP to come back `kubectl get sv` and access it in your browser 116 | 117 | ```bash 118 | NAME CLUSTER-IP EXTERNAL-IP PORT(S) AGE 119 | kubernetes 10.0.0.1 443/TCP 2d 120 | ordersapi 10.0.8.27 13.8.60.236 8080:30213/TCP 3h 121 | productsapi 10.0.148.198 52.232.72.12 80:30175/TCP 5m 122 | webapp 10.0.142.191 54.22.172.17 80:31945/TCP 5m 123 | ``` 124 | 125 | ## 3. References 126 | 127 | * [Persisting Files in Azure Cloud Shell](https://docs.microsoft.com/en-us/azure/cloud-shell/persisting-shell-storage) 128 | * [Azure resource naming best practices](https://docs.microsoft.com/en-us/azure/architecture/best-practices/naming-conventions) 129 | * [Azure CLI reference](https://docs.microsoft.com/en-us/cli/azure/get-started-with-azure-cli) 130 | * [kubectl overview](https://kubernetes.io/docs/user-guide/kubectl-overview/) 131 | 132 | ## continue to [next task >> ](416_Integrate.md) 133 | -------------------------------------------------------------------------------- /stories/4/416_Integrate.md: -------------------------------------------------------------------------------- 1 | # Task 4.1.6 - Integrate Website and APIs 2 | 3 | Now that the APIs and the website and clients have been implemented, our team wants to integrate the website code with the APIs. 4 | 5 | ## Prerequisites 6 | 7 | This task has a dependency on the Web App from [1.1.1](../1/111_BuildWebApp.md), the APIs created under section [4.1.2][412] and [4.1.3][413], and the deployment to Kubernetes steps in section [4.1.5][415], and all of their prerequisites. 8 | 9 | ## Task 10 | 11 | 1. Update the website code to use the APIs instead of static files for data access. 12 | 13 | 2. Redeploy the website with the updates. 14 | 15 | ## Comments 16 | 17 | ###### @ 9:02am 18 | I looked at the website code, and it seems to currently use a mock implementation of the API/data access. It's getting the initial data from static json files, and keeping the data in memory. In order to override the existing implementation for accesing data and integrate with the APIs we should implement the `IOrderRepository` interface whith our own custom class implementation that calls the APIs (using `OrderRepositoryMock.cs` as guidance), and then change the service configuration in `Startup.cs` class adding the new implementation files: 19 | 20 | ```c# 21 | services.AddScoped(); 22 | ``` 23 | 24 | ###### @ 9:15am 25 | We can check the [end version of the code for reference, in the `azurecompleted` branch of the `KnowzyInternalApps` repo](https://github.com/Knowzy/KnowzyInternalApps/tree/azurecompleted/src/Knowzy_Shipping_WebApp) to help. Especially the implementation of [OrderRepository](https://github.com/Knowzy/KnowzyInternalApps/blob/azurecompleted/src/Knowzy_Shipping_WebApp/src/2.%20Services/Repositories/Microsoft.Knowzy.Repositories.Core/OrderRepository.cs). 26 | 27 | ###### @ 11:15am 28 | In the Docker instructions in [4.1.4][414] for the dev machine, and Kubernetes instructions in [4.1.5][415] the web app container has the ORDERSAPI_URL and PRODUCTSAPI_URL environment variables with the two API endpoints URLs passed in to it. Now we can run website in the dev machine and deploy it via kubernetes again to get it to use the APIs. 29 | 30 | [412]: /stories/4/412_OrdersAPI.md 31 | [413]: /stories/4/413_ProductsAPI.md 32 | [414]: /stories/4/414_Docker.md 33 | [415]: /stories/4/415_Kubernetes.md 34 | 35 | ## continue to [next task >> ](421_SetupVSTS.md) 36 | -------------------------------------------------------------------------------- /stories/4/421_SetupVSTS.md: -------------------------------------------------------------------------------- 1 | # Task 4.2.1 - Setup Visual Studio Team Services 2 | 3 | In order to collaborate as a team, it would be best to store your source code in a Version Control System. While there are many options for this, the CTO of Knowzy has asked you to use Visual Studio Team Services (VSTS) so that later on your can use it for Continuous Integration, Continuous Delivery, program management, and project planning. In this task, you'll set up a VSTS instance to share with the team. 4 | 5 | ## Prerequisites 6 | 7 | The only prerequisite for this task is that you have a Microsoft account. If you do not already have one you can [sign up for one here](https://support.microsoft.com/en-us/instantanswers/d18cc497-d839-cf50-dea8-f99c95f2bd16/sign-up-for-a-microsoft-account). 8 | 9 | ## Task 10 | 11 | 1. Sign up for a free Visual Studio Team Services account. 12 | 13 | OR 14 | 15 | 1. Select a Visual Studio Team Services account you already have access to and can share with your team. 16 | 17 | ## References 18 | 19 | 1. [Visual Studio Team Services landing page](https://www.visualstudio.com/team-services/) 20 | 21 | ## continue to [next task >> ](422_DevopsKubernetes.md) 22 | -------------------------------------------------------------------------------- /stories/4/422_DevopsKubernetes.md: -------------------------------------------------------------------------------- 1 | # Challenge 4.2.2 - Continuous Delivery to Kubernetes using VSTS 2 | 3 | 4 | The CTO is pleased that you've deployed to Azure and Kubernetes. However, now they'd like you to set up Continuous Delivery using the Visual Studio Team Services (VSTS) account you set up in [Task 4.2.1][421]. Using VSTS will enable our development and operations department to have work together efficiently as a team and push new stable releases into production. The primary goal of this challenge is to automatically post a new release of our code into our production Kubernetes cluster with any commit to our git repository. 5 | 6 | ![Release Pipeline](images/DevOpsPipeline.png) 7 | 8 | ## Prerequisites 9 | 10 | * This task has a dependency on [Task 4.1.5][415], [Task 4.2.1][421], and all of their prerequisites. 11 | * Access to the Azure subscription you used in [Task 4.1.5][415]. 12 | 13 | ## Task 14 | 15 | 1. Set up CI / CD with your application and Kubernetes on Azure. 16 | 17 | ## Comments 18 | 19 | ###### @ 3:37am 20 | I wasn't really sure where to get started with continuous integration or delivery but [this](https://www.visualstudio.com/en-us/docs/build/get-started/ci-cd-part-1) really helped me understand! 21 | 22 | ###### @ 5:23am 23 | It looks like you can install the [Kubernetes Extension for VSTS here](https://marketplace.visualstudio.com/items?itemName=tsuyoshiushio.k8s-endpoint). 24 | 25 | ###### @ 10:15am 26 | I think I found [step by step instructions][497] on setting this up! 27 | 28 | ###### @ 4:58pm 29 | If all goes according to plan, I should be able to demonstrate this working by [following this][498]. 30 | 31 | 32 | [414]: /stories/4/414_Docker.md 33 | [415]: /stories/4/415_Kubernetes.md 34 | [421]: /stories/4/421_SetupVSTS.md 35 | [497]: /stories/4/497_KubernetesVSTS.md 36 | [498]: /stories/4/498_KubernetesCICDBehavior.md 37 | 38 | ## continue to [next task >> ](431_Telemetry.md) -------------------------------------------------------------------------------- /stories/4/431_Telemetry.md: -------------------------------------------------------------------------------- 1 | # Task 4.3.1 - Set up Telemetry 2 | 3 | Our development team want to be able to monitor the health of the applications as well as find the source of bugs. The team also want to learn from production and use it to decide on future projects. 4 | 5 | ## Prerequisites 6 | 7 | This task has a dependency on the Web App from [1.1.1](../1/111_BuildWebApp.md) and the APIs created under section [4.1.2](../4/412_OrdersAPI.md) and [4.1.3](../4/413_ProductsAPI.md) and all of their prerequisites. 8 | 9 | ## Task 10 | 11 | 1. Create an Application Insights account from the Azure Portal or Visual Studio. 12 | 2. Add Application Insights telemetry logging to the Web App, Orders API, and Products API. 13 | 3. Update the containers and kubernetes implementation to pass in the value of your instrumentation key to the applications in the containers. 14 | 4. Use the Azure Portal to see the telemetry that is being captured. 15 | 16 | ## Comments 17 | 18 | ###### @ 9:02am 19 | I've found the following instructions that should help us get started: 20 | * [Application Insights for ASP.NET Core](https://docs.microsoft.com/en-us/azure/application-insights/app-insights-asp-net-core) 21 | * [Managing ASP.NET Core App Settings on Kubernetes](http://anthonychu.ca/post/aspnet-core-appsettings-secrets-kubernetes/) 22 | -------------------------------------------------------------------------------- /stories/4/497_KubernetesVSTS.md: -------------------------------------------------------------------------------- 1 | # Setting Up Kubernetes and VSTS 2 | 3 | For the sake of this exercise, **lets focus only on the API code** and any new releases you have. These changes will be tested by VSTS and, pushed into Azure Container Registry (ACR) once all your tests have passed (we won't go into writing tests today). Then VSTS will automatically deploy the latest version of the app into your cluster by obtaining the latest image from ACR. 4 | 5 | The following two resources will provide you all the answers on how to accomplish this task, it´s your duty to understand them and consolidate the concepts to set up a full development cycle. Please note that none of these are a step-by-step tutorial to achieve what you want, but jointly you will be able to make it work: 6 | 7 | 1. [CI/CD to Kubernetes clusters using VSTS](https://github.com/dtzar/blog/tree/master/CD-Kubernetes-VSTS) 8 | 2. [Build and deploy your ASP.NET Core app to Azure](https://www.visualstudio.com/en-us/docs/build/apps/aspnet/aspnetcore-to-azure#enable-continuous-integration-ci) 9 | 10 | You should be able to do the following steps to provide CI/CD in a Kubernetes cluster using Azure. 11 | 12 | 1. Create a new project in your VSTS account. 13 | 2. Push your API code into the project's repository in VSTS. 14 | 3. Install the VSTS Kubernetes [extension](https://marketplace.visualstudio.com/items?itemName=tsuyoshiushio.k8s-endpoint). 15 | 4. Provide Continuous Integration with VSTS by pushing your docker images with the latest version of the tested code into ACR. 16 | 5. Set up a trigger to pull your new docker image into your Kubernetes cluster after it has been properly tested and deployed. 17 | 18 | [414]: /stories/4/414_Docker.md 19 | [415]: /stories/4/415_Kubernetes.md 20 | [421]: /stories/4/421_SetupVSTS.md -------------------------------------------------------------------------------- /stories/4/498_KubernetesCICDBehavior.md: -------------------------------------------------------------------------------- 1 | # Kubernetes and VSTS Expected Behavior 2 | 3 | At the end of this challenge you should be able to follow these steps and get similar results: 4 | 5 | 1. Commit a new change into your `master` branch. 6 | 2. VSTS will build your project and test it. 7 | 3. If all the tests have been passed, VSTS will create and push a new Docker image with the new code. Please refer to previous section ['Create Docker images'][414] for the definition of the image. 8 | 4. Your Kubernetes task created with the help of the VSTS Kubernetes [extension](https://marketplace.visualstudio.com/items?itemName=tsuyoshiushio.k8s-endpoint) will now run to pull the new image into the cluster. 9 | 5. Do a request into your freshly deployed API and verify that your new changes are up and running. 10 | [414]: /stories/4/414_Docker.md 11 | [415]: /stories/4/415_Kubernetes.md 12 | [421]: /stories/4/421_SetupVSTS.md -------------------------------------------------------------------------------- /stories/4/499_Troubleshooting.md: -------------------------------------------------------------------------------- 1 | # Task 4 Troubleshooting Guide 2 | 3 | ## "Firewall detected" when sharing drive 4 | 5 | If you encounter a firewall error when sharing drives with Docker, you may need to reset Windows File and Printer sharing on your Hyper-V virtual switch. 6 | 7 | 1. Right click your network connection in the taskbar, and choose **Network and Sharing Center** 8 | 2. In the left menu, select **Change Adapter Settings** 9 | 3. Right click and open the properties for the "vEthernet (DockerNAT)" adapter 10 | 4. Uncheck the box for **File and Printer Sharing for Windows** and hit OK 11 | ![](images/troubleshooting-fileshare.png) 12 | 5. Open the properties again, re-enable **File and Printer Sharing for Windows** and hit OK 13 | 6. You should now be able to share drives with Docker 14 | 15 | ## Case sensitivity 16 | 17 | If you're using Windows to follow along, it's important to note that we're using Linux containers on Docker. 18 | This means that if you have a case mismatch between file/folder names, you may encounter errors when building or 19 | running containers because Linux uses a case-sensitive file system. 20 | 21 | For example, this could happen if you named your folder `ordersApi`, which by default will produce a dll with 22 | the path `ordersApi/bin/Release/netcoreapp1.1/publish/ordersApi.dll`. When the supplied `Dockerfile` is 23 | executed inside `ordersApi`, everything looks great! But when you run the container, it will fail because 24 | the `ENTRYPOINT` is specified to look for `ordersapi.dll` -------------------------------------------------------------------------------- /stories/4/Reference/HackSchemas.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/Reference/HackSchemas.zip -------------------------------------------------------------------------------- /stories/4/Reference/customers.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id" : "12358131", 4 | "companyName": "Clown city", 5 | "address": "1234 Main St. AnyTown, 04093", 6 | "contactPerson": "Mary Jane", 7 | "email": "Mary.Jane@clowncity.com", 8 | "phoneNumber": "123123123" 9 | }, 10 | { 11 | "id" : "12358132", 12 | "companyName": "Clowns Inc.", 13 | "address": "2 South St. SouthTown, 04093", 14 | "contactPerson": "Johan Harris", 15 | "email": "johan.harris@clowns.com", 16 | "phoneNumber": "66345234" 17 | }, 18 | { 19 | "id" : "12358133", 20 | "companyName": "Transports Citizen", 21 | "address": "2 Sunshine St. Dark, 3", 22 | "contactPerson": "Peter Moore", 23 | "email": "p.m@transportc.com", 24 | "phoneNumber": "89866e3" 25 | }, 26 | { 27 | "id" : "12358134", 28 | "companyName": "Party Creators", 29 | "address": "22 NorthEast St. NorthEast, 632", 30 | "contactPerson": "Paul Harris", 31 | "email": "p.harrys@partycreators.com", 32 | "phoneNumber": "5454545" 33 | }, 34 | { 35 | "id" : "12358135", 36 | "companyName": "Smiles Co.", 37 | "address": "3456 East St. EastTown, 04093", 38 | "contactPerson": "James Pettruzi", 39 | "email": "james.p@smiles.com", 40 | "phoneNumber": "123123123" 41 | }, 42 | { 43 | "id" : "12358136", 44 | "companyName": "Party Town LLC", 45 | "address": "22 West St. WestTown, 14356", 46 | "contactPerson": "John Doe", 47 | "email": "John.Doe@partytown.com", 48 | "phoneNumber": "321321321" 49 | }, 50 | { 51 | "id" : "12358137", 52 | "companyName": "JonG Tacos", 53 | "address": "2 SouthEast St. SouthEastTown, 3344", 54 | "contactPerson": "Jon Gallant", 55 | "email": "JonG@JongTacos.com", 56 | "phoneNumber": "33434" 57 | }, 58 | { 59 | "id" : "12358138", 60 | "companyName": "Happy Party Together Inc.", 61 | "address": "233 Party St. Festa, 2224", 62 | "contactPerson": "Joan Hells", 63 | "email": "joan.hells@happyparty.com", 64 | "phoneNumber": "3434343443" 65 | } 66 | ] -------------------------------------------------------------------------------- /stories/4/Reference/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "RN3454", 4 | "image": "/images/pink.png", 5 | "category": "Standard Noses", 6 | "price": 25, 7 | "quantityInStock": 82, 8 | "name": "Deluxe Nose", 9 | "description": "Everything you'd expect, and a little something more." 10 | }, 11 | { 12 | "id": "PN3476", 13 | "image": "/images/yellow.png", 14 | "category": "Premium Noses", 15 | "price": 75, 16 | "quantityInStock": 5, 17 | "name": "Collectors Edition", 18 | "description": "Limited edition, very rare!" 19 | }, 20 | { 21 | "id": "YN3171", 22 | "image": "/images/red.png", 23 | "category": "Standard Noses", 24 | "price": 10, 25 | "quantityInStock": 150, 26 | "name": "Basic Nose", 27 | "description": "Our best-selling classic." 28 | }, 29 | { 30 | "id": "ZX2584", 31 | "category": "Premium Noses", 32 | "image": "/images/pink.png", 33 | "price": 45.3, 34 | "quantityInStock": 24, 35 | "name": "The Co'Nose seur", 36 | "description": "For the discerning performance comedian." 37 | } 38 | ] -------------------------------------------------------------------------------- /stories/4/images/AddCollection.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/AddCollection.JPG -------------------------------------------------------------------------------- /stories/4/images/AddDockerSupport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/AddDockerSupport.png -------------------------------------------------------------------------------- /stories/4/images/AddEnvVars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/AddEnvVars.png -------------------------------------------------------------------------------- /stories/4/images/AddNewApiProject.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/AddNewApiProject.png -------------------------------------------------------------------------------- /stories/4/images/AddSecondCollection.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/AddSecondCollection.jpg -------------------------------------------------------------------------------- /stories/4/images/BrowseDocDB.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/BrowseDocDB.JPG -------------------------------------------------------------------------------- /stories/4/images/ChooseLinux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/ChooseLinux.png -------------------------------------------------------------------------------- /stories/4/images/CloudShellIcon.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/CloudShellIcon.JPG -------------------------------------------------------------------------------- /stories/4/images/CreateCollection.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/CreateCollection.JPG -------------------------------------------------------------------------------- /stories/4/images/DTScreen1.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DTScreen1.JPG -------------------------------------------------------------------------------- /stories/4/images/DTScreen2.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DTScreen2.JPG -------------------------------------------------------------------------------- /stories/4/images/DTScreen3.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DTScreen3.JPG -------------------------------------------------------------------------------- /stories/4/images/DTScreen3Complete.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DTScreen3Complete.JPG -------------------------------------------------------------------------------- /stories/4/images/DTScreen3Filled.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DTScreen3Filled.JPG -------------------------------------------------------------------------------- /stories/4/images/DTScreen3Verified.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DTScreen3Verified.JPG -------------------------------------------------------------------------------- /stories/4/images/DTScreen4.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DTScreen4.JPG -------------------------------------------------------------------------------- /stories/4/images/DevOpsPipeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DevOpsPipeline.png -------------------------------------------------------------------------------- /stories/4/images/DocDBPortalKeys.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DocDBPortalKeys.JPG -------------------------------------------------------------------------------- /stories/4/images/DocDbCreateSuccess.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DocDbCreateSuccess.JPG -------------------------------------------------------------------------------- /stories/4/images/DocumentExplorer.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/DocumentExplorer.JPG -------------------------------------------------------------------------------- /stories/4/images/ImportComplete.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/ImportComplete.JPG -------------------------------------------------------------------------------- /stories/4/images/NewApiProject.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/NewApiProject.png -------------------------------------------------------------------------------- /stories/4/images/NewImport.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/NewImport.jpg -------------------------------------------------------------------------------- /stories/4/images/docker-sharedrive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/docker-sharedrive.png -------------------------------------------------------------------------------- /stories/4/images/dt1.7Folder.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/dt1.7Folder.JPG -------------------------------------------------------------------------------- /stories/4/images/newtonsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/newtonsoft.png -------------------------------------------------------------------------------- /stories/4/images/troubleshooting-fileshare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/4/images/troubleshooting-fileshare.png -------------------------------------------------------------------------------- /stories/5/511_Paint3d.md: -------------------------------------------------------------------------------- 1 | # Task 5.1.1 - Create the model in Paint3D 2 | 3 | Creating 3D models of our products opens up a world of opportunities. We can 3D print prototype noses, render them in 3D to see how they look, and even view them in Virtual Reality! 4 | 5 | 3D Paint is a simple tool available in the Windows 10 Creators Update that allows us to create and paint 3D models. Perfect for this task! 6 | 7 | ## Prerequisites 8 | 9 | This walkthrough assumes that you have: 10 | 11 | * Windows 10 Creators Update 12 | * Paint 3D 13 | 14 | ## Task 15 | 16 | ### Create the basic 3D nose model 17 | 18 | First we will create the nose 3D model with a base color. 19 | 20 | 1. From the Windows Start menu, launch **Paint 3D**. If the **Welcome** screen is displayed, Click **New**. 21 | 2. You will see a blank white canvas where you will create your Knowzy nose prototype. 22 | 3. The menu at the top of the screen is where you select the tools you want to use. The brush icon (Art Tools) is for painting and coloring. The cube icon (3d objects) is for creating 3D objects. Click the cube icon to open the 3d objects menu. Ensure that the sphere in the 3D objects collection is selected: 23 | ![3D objects tool](images/511_1.png) 24 | 4. Use the color palette to choose a color for the nose. You can click on the materials dropdown above the color palette to get different effects. For example, select **Gloss** to make the nose shiny. Play with the colors and materials options to get the color you want. 25 | 5. Draw a sphere on the canvas by placing the mouse pointer on the canvas. Press and hold the left mouse button while dragging the mouse until the sphere is the size you want. You can force the shape to be a circle by holding **Shift** down while dragging the mouse. This is how our first prototype looked: 26 | ![Base nose](images/511_2.png) 27 | 28 | 29 | ### Add details to the nose 30 | 31 | The second task is to add details to the nose. You can use stickers, color variations and drawings. 32 | 1. On the menu at the top of the screen, click the brush icon (Art tools) to see the tools available for drawing. 33 | > Note: For these steps, it is important not to draw outside of the model on the white canvas because it will become part of the 3D model. 34 | 35 | 2. Use any of the art tools to draw on the model. Be creative! For our first prototype, we used the Calligraphy pen with the **Thickness** set to 36px to draw nostrils. 36 | 37 | ![Adding color](images/511_3.png) 38 | 39 | 3. The Stickers menu (third icon from the left on the main menu) allows you to place stickers on the model. Feel free to play around with the various tools. 40 | 41 | ### Save and Export the model. 42 | 43 | The last task is to save the model and export it to the Filmbox (FBX) format so we can use the model in Unity or BabylonJS. (For BabylonJS, we will convert it from .FBX to .OBJ. We will handle that in a future task.) 44 | 45 | 1. Click the Folder icon located at the top-left corner of the Paint3d window to open the **Save** menu. Under **Save in Paint 3D**, click **Paint 3d Project**, provide a name, and press **Enter** to save the model. 46 | 2. Back in the Paint3D editor, click the folder icon to open the **Save** menu again. Under **Export**, click **FBX**: 47 | 48 | ![Export as FBX](images/511_4.png) 49 | 50 | 3. The **Save As** dialog appears. Save the FBX file in a location you can remember for the tasks ahead. 51 | 52 | Congratulations, you now have a 3d Nose model that we can use in Unity or BablyonJS! 53 | 54 | ## References 55 | Our first Nose Prototype: 56 | [Nose Prototype (FBX)](./Reference/NosePrototype.fbx) 57 | 58 | ## Continue to the [next task >> ](512a_Unity.md) 59 | -------------------------------------------------------------------------------- /stories/5/521_MR.md: -------------------------------------------------------------------------------- 1 | # Task 5.2.1 - Retarget UWP app to Mixed Reality Platform 2 | The keynote is at a VR conference so we need a VR demo showing our Nose Prototypes. Having our 3D UWP app from 5.1.2a we can easily turn this into a VR-enabled app. 3 | 4 | ## Prerequisites 5 | 6 | This walkthrough assumes that you have: 7 | 8 | * Windows 10 Creators Update 9 | * 3D Nose Model from Paint 5.1.1 and 3D UWP from 5.1.2a 10 | * Unity 5.6 with UWP Plugin for exporting UWP 11 | 12 | ## Task 13 | 14 | #### Using Unity 3D to enable Mixed Reality 15 | Supporting Mixed Reality in Unity is just a simple toggle on the Build Settings in Unity. 16 | 17 | 1. Open the Nose3D project you created in Unity. 18 | 2. Go to **File | Build Settings** and click **Player Settings** 19 | 3. A new Player Settings property pane appears on the right side of the Unity3D window. 20 | 4. Click **Other Settings** to reveal a new set of properties. 21 | 5. Select **Virtual Reality Supported**. Windows Holographic should appear automatically. 22 | 23 | 24 | ![3D objects tool](images/521_1.png) 25 | 26 | 6. Export the project again, replacing the folder you exported to in 5.1.2a. 27 | 7. Open the Nose3D.sln solution and build/deploy/run the app. It will now automatically detect that VR is enabled and will run in the connected VR headset. 28 | 29 | > Note: Connecting a new VR headset requires the latest Windows 10 build. Windows will automatically detect the headset and launch the Mixed Reality portal. Follow the configuration steps here to set it up correctly. 30 | 31 | ## References 32 | -------------------------------------------------------------------------------- /stories/5/Reference/NosePrototype.fbx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/Reference/NosePrototype.fbx -------------------------------------------------------------------------------- /stories/5/images/511_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/511_1.png -------------------------------------------------------------------------------- /stories/5/images/511_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/511_2.png -------------------------------------------------------------------------------- /stories/5/images/511_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/511_3.png -------------------------------------------------------------------------------- /stories/5/images/511_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/511_4.png -------------------------------------------------------------------------------- /stories/5/images/512a_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_1.png -------------------------------------------------------------------------------- /stories/5/images/512a_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_10.png -------------------------------------------------------------------------------- /stories/5/images/512a_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_11.png -------------------------------------------------------------------------------- /stories/5/images/512a_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_12.png -------------------------------------------------------------------------------- /stories/5/images/512a_13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_13.png -------------------------------------------------------------------------------- /stories/5/images/512a_14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_14.png -------------------------------------------------------------------------------- /stories/5/images/512a_15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_15.png -------------------------------------------------------------------------------- /stories/5/images/512a_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_16.png -------------------------------------------------------------------------------- /stories/5/images/512a_17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_17.png -------------------------------------------------------------------------------- /stories/5/images/512a_18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_18.png -------------------------------------------------------------------------------- /stories/5/images/512a_19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_19.png -------------------------------------------------------------------------------- /stories/5/images/512a_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_2.png -------------------------------------------------------------------------------- /stories/5/images/512a_20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_20.png -------------------------------------------------------------------------------- /stories/5/images/512a_21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_21.png -------------------------------------------------------------------------------- /stories/5/images/512a_22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_22.png -------------------------------------------------------------------------------- /stories/5/images/512a_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_3.png -------------------------------------------------------------------------------- /stories/5/images/512a_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_4.png -------------------------------------------------------------------------------- /stories/5/images/512a_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_5.png -------------------------------------------------------------------------------- /stories/5/images/512a_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_6.png -------------------------------------------------------------------------------- /stories/5/images/512a_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_7.png -------------------------------------------------------------------------------- /stories/5/images/512a_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_8.png -------------------------------------------------------------------------------- /stories/5/images/512a_9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512a_9.png -------------------------------------------------------------------------------- /stories/5/images/512b_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512b_1.png -------------------------------------------------------------------------------- /stories/5/images/512b_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512b_2.png -------------------------------------------------------------------------------- /stories/5/images/512b_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512b_3.png -------------------------------------------------------------------------------- /stories/5/images/512b_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512b_4.png -------------------------------------------------------------------------------- /stories/5/images/512b_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/512b_5.png -------------------------------------------------------------------------------- /stories/5/images/521_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/521_1.png -------------------------------------------------------------------------------- /stories/5/images/invitation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/BuildTourHack/da9200b6e2ee533eb7d5796e666e2941181f79cf/stories/5/images/invitation.png -------------------------------------------------------------------------------- /stories/5/story_5.md: -------------------------------------------------------------------------------- 1 | ![invitation](images/invitation.png) 2 | 3 | A great opportunity has developed! We are invited to speak in the keynote of NoseCon 2017! The topic is how 3D and VR is helping us with rapid prototyping. We need to create a keynote demo for NoseCon that renders a Nose Prototype in 3D, or even in VR if we find the time. This is highly confidential. 4 | 5 | * **Deliverable** - Build a UWP 3D Visualizer 6 | * [5.1.1 - [Required] Create the model in Paint3D][511] 7 | * [5.1.2a - [Required] Create a Unity solution to visualize 3D Model (d 5.1.1)][512a] or 8 | * [5.1.2b - [Required] Create a BabylonJS solution to visualize 3D Model (d 5.1.1)][512b] 9 | * **Deliverable** - Visualize noses in VR 10 | * [5.2.1 - [Required] Re-target UWP app to Mixed Reality Platform (d 5.1.2)][521] 11 | 12 | 13 | 14 | [511]: 511_Paint3d.md 15 | [512a]: 512a_Unity.md 16 | [512b]: 512b_Babylon.md 17 | [521]: 521_MR.md 18 | --------------------------------------------------------------------------------