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 .
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.
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.
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
From 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
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.