UI & Project Requirements

Leave a comment
.Net / APIs / Asp.Net / JavaScript / Web

A week ago  I was part of  a team that  put together a demo for  Microsoft  Build Conference. The Where You At Demo was a cool little live demo that my team pulled together at Build 2016. The purpose of the demo was to show, that ASP.NET Core applications can run on any cloud.

Meet the team

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

User would visit WhereYouAt landing page and see the following:

  • Logo of cloud on which this  ASP.NET Core application is currently running.
  • Ask user 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 you will see three containers. The containers show the number requests received and allocated per cloud.


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 has hit.
  • A button that will   get the users location with their permission.

Populating the Map


To populate the map:

  • I need to get the user location and PUT it into an API.
  • Next, I need to use those coordinates to pin their locations on  pin 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.

To find how we built the  front-end  click here.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>