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.
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.
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 was connected to.
- A button that will get the users location with their permission.
Populating the Map
To populate the map:
- Get the user location and PUT it into an API.
- Use those coordinates to pin their locations on 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.
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.
Light
Dark
0 comments