{"id":6663,"date":"2016-04-07T08:35:49","date_gmt":"2016-04-07T15:35:49","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/?p=6663"},"modified":"2021-11-01T04:55:30","modified_gmt":"2021-11-01T11:55:30","slug":"whereyouat-demobuild-2016-demo-flow-ui","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/whereyouat-demobuild-2016-demo-flow-ui\/","title":{"rendered":"WhereYouAt Demo from Build 2016:  Demo Flow and UI"},"content":{"rendered":"<p style=\"text-align: left\"><a href=\"https:\/\/channel9.msdn.com\/Events\/Build\/2016\/B810\">Where You At Demo<\/a> was a cool little live demo that our team put together for Build 2016. This demo showed off ASP.NET Core applications running in any cloud.\u00a0 Here&#8217;s the video of Scott&#8217;s session from the beginning of this demo:<\/p>\n<div style=\"text-align: center;\">\n  <iframe width=\"540\" height=\"320\" src=\"https:\/\/channel9.msdn.com\/Events\/Build\/2016\/B810\/player#time=0h47m6s\" allowfullscreen><\/iframe>\n<\/div>\n<h3 style=\"text-align: left\">Team &amp; Responsibility<\/h3>\n<p><a href=\"http:\/\/www.hanselman.com\/\">Scott Hanselman<\/a> : Demo visionary and presenter , Azure load balancer, and problem solver.\n<a href=\"https:\/\/blogs.msdn.microsoft.com\/stevelasker\/\">Steve Lasker <\/a>: Demo visionary, cloud deployment, containers, Visual Studio Team Services , and API Services\n<a href=\"https:\/\/twitter.com\/condrong\">Glenn Condron<\/a>: API services and Azure Storage.\n<a href=\"https:\/\/twitter.com\/LadyNaggaga\">Maria Naggaga<\/a> (me): User Interface , HTML5 &amp; JS, and API calls .<\/p>\n<h3 style=\"text-align: left\">Demo Vision<\/h3>\n<p>Users visit the <a href=\"http:\/\/whereyouat.trafficmanager.net\/\">WhereYouAt<\/a> website landing page and see the following:<\/p>\n<ul>\n<li>Logo of cloud on which this ASP.NET Core application is currently running.<\/li>\n<li>A button asking them to provide their location.<\/li>\n<\/ul>\n<p><figure id=\"attachment_15501\" aria-labelledby=\"figcaption_attachment_15501\" class=\"wp-caption aligncenter\" ><a href=\"http:\/\/marianaggaga.com\/wp-content\/uploads\/2016\/04\/Webtemplate.png\"><img decoding=\"async\" class=\" wp-image-15541 alignnone\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/Webtemplate-597x1024.png\" alt=\"Users View\" width=\"405\" height=\"695\" \/><\/a><figcaption id=\"figcaption_attachment_15501\" class=\"wp-caption-text\">Landing Page<\/figcaption><\/figure><\/p>\n<p><strong>The big reveal\n<\/strong> The pins on the map represent every person who has participated in the demo. Each color represents a different cloud.<\/p>\n<p>At the bottom of the page are three containers. The containers show the number requests received and allocated per cloud.<\/p>\n<p><figure id=\"attachment_15501\" aria-labelledby=\"figcaption_attachment_15501\" class=\"wp-caption aligncenter\" ><a href=\"http:\/\/marianaggaga.com\/wp-content\/uploads\/2016\/04\/Maptemplate.png\"><img decoding=\"async\" class=\" wp-image-15501\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/Maptemplate-707x1024.png\" alt=\"Maptemplate\" width=\"459\" height=\"665\" \/><\/a><figcaption id=\"figcaption_attachment_15501\" class=\"wp-caption-text\">Map View<\/figcaption><\/figure><\/p>\n<p><!--more--><\/p>\n<h3>Breaking down the UI<\/h3>\n<p>When developing a UI, I found it really helpful to split it into smaller chunks. Doing this helps really helped me identify what I needed to build to do to get the project done.<\/p>\n<p><span style=\"text-decoration: underline\">Identifying the Cloud and Getting Users location<\/span><\/p>\n<p><img decoding=\"async\" class=\" wp-image-15531 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/Webtemplate-copy-677x1024.png\" alt=\"Webtemplate copy\" width=\"445\" height=\"673\" \/>From the image above I know, I will need to build the following:<\/p>\n<ul>\n<li>An API call that will identify the cloud that the user was connected to.<\/li>\n<li>A button that will get the users location with their permission.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline\">Populating the Map<\/span><\/p>\n<p><a href=\"http:\/\/marianaggaga.com\/wp-content\/uploads\/2016\/04\/Plottingmap.png\"><img decoding=\"async\" class=\" wp-image-15521 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/Plottingmap-1024x360.png\" alt=\"Plottingmap\" width=\"586\" height=\"206\" \/><\/a><\/p>\n<p>To populate the map:<\/p>\n<ol>\n<li>Get the user location and PUT it into an API.<\/li>\n<li>Use those coordinates to pin their locations on the map.<\/li>\n<\/ol>\n<p><span style=\"text-decoration: underline\">Requests per Cloud <\/span><\/p>\n<p><a href=\"http:\/\/marianaggaga.com\/wp-content\/uploads\/2016\/04\/Maptemplate-copy.png\"><img decoding=\"async\" class=\" size-large wp-image-15491 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2016\/04\/Maptemplate-copy-662x1024.png\" alt=\"Maptemplate copy\" width=\"445\" height=\"673\" \/><\/a><\/p>\n<p>To show the number of request per cloud<\/p>\n<ul>\n<li>GET method to grab the number of requests and separate them by cloud.<\/li>\n<\/ul>\n<h2>Summary<\/h2>\n<p>With the user interface and application requirements planned, the team started with their separate specialties to assemble the various components of the demo application.\u00a0 In the next article in this series, I&#8217;ll review the user-interface construction.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Where You At Demo was a cool little live demo that our team put together for Build 2016. This demo showed off ASP.NET Core applications running in any cloud.\u00a0 Here&#8217;s the video of Scott&#8217;s session from the beginning of this demo: Team &amp; Responsibility Scott Hanselman : Demo visionary and presenter , Azure load balancer, [&hellip;]<\/p>\n","protected":false},"author":3344,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197,7509],"tags":[],"class_list":["post-6663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","category-aspnetcore"],"acf":[],"blog_post_summary":"<p>Where You At Demo was a cool little live demo that our team put together for Build 2016. This demo showed off ASP.NET Core applications running in any cloud.\u00a0 Here&#8217;s the video of Scott&#8217;s session from the beginning of this demo: Team &amp; Responsibility Scott Hanselman : Demo visionary and presenter , Azure load balancer, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/6663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/3344"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=6663"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/6663\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=6663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=6663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=6663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}