WhereYouAt Demo from Build 2016: Demo Flow and UI

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.  Here’s the video of Scott’s session from the beginning of this demo:

Team & Responsibility

Scott Hanselman : Demo visionary and presenter , Azure load balancer, and problem solver.
Steve Lasker : Demo visionary, cloud deployment, containers, Visual Studio Team Services , and API Services
Glenn Condron: API services and Azure Storage.
Maria Naggaga (me): User Interface , HTML5 & JS, and API calls .

Demo Vision

Users visit the WhereYouAt website landing page and see the following:

  • Logo of cloud on which this ASP.NET Core application is currently running.
  • A button asking them to provide their location.

Users View

Landing Page

The big reveal
The pins on the map represent every person who has participated in the demo. Each color represents a different cloud.

At the bottom of the page are three containers. The containers show the number requests received and allocated per cloud.

Maptemplate

Map View

Breaking down the UI

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.

Identifying the Cloud and Getting Users location

Webtemplate copyFrom the image above I know, I will need to build the following:

  • An API call that will identify the cloud that the user was connected to.
  • A button that will get the users location with their permission.

Populating the Map

Plottingmap

To populate the map:

  1. Get the user location and PUT it into an API.
  2. Use those coordinates to pin their locations on the map.

Requests per Cloud

Maptemplate copy

To show the number of request per cloud

  • GET method to grab the number of requests and separate them by cloud.

Summary

With the user interface and application requirements planned, the team started with their separate specialties to assemble the various components of the demo application.  In the next article in this series, I’ll review the user-interface construction.