├── .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 
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 | 
79 |
80 | 2. Choose "Microsoft Azure App Service" from the selection screen
81 |
82 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
44 |
45 | 4. Click **Submit**. In our example, the missing image sizes are automatically generated and added to the manifest.
46 |
47 | 
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 | 
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 | 
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 | 
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 | 
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 | 
40 |
41 | 2. Select **Online** and enter **Desktop Bridge Debugging Project** in the search field. Click **Download**.
42 |
43 | 
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 | 
54 |
55 | * Select the **Other Project Types | Desktop Bridge Debugging Project** project template.
56 |
57 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
166 |
167 | * Click on **Debugging | General** and turn off the **Enable Just My Code** options
168 |
169 | 
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 | 
176 |
177 | * Select the **Debug** tab and turn on **Do not launch, but debug my code when it starts**
178 |
179 | 
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 | 
37 |
38 | * Select **Options** from the **Debug** menu, From the **Debugging | General** Tab, disable the **Enable Just My Code** option.
39 |
40 | 
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 | 
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 | 
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 | 
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 | 
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 | 
32 |
33 | Microsoft.Knowzy.WPF.exe is located in src\Microsoft.Knowzy.UWP\bin\x86\Release\AppX\desktop
34 |
35 | 
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 | 
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 |
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
75 |
76 | ii) You should be greeted with the following screen below, you can just click 'Next' for now.
77 |
78 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 | 
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 |
--------------------------------------------------------------------------------