Click here to Skip to main content
Click here to Skip to main content

LookFit - A HTML5 Web App hosted in the cloud (Completed)

, 24 Jun 2013
Rate this:
Please Sign up or sign in to vote.
Windows Azure Development Challenge

Please note

This article is an entry in our Windows Azure Developer Challenge. Articles in this sub-section are not required to be full articles so care should be taken when voting. Create your free Azure Trial Account to Enter the Challenge.

My Azure Development Challenge Project: http://lookfit.azurewebsites.net/ 

(Note: I already have an Azure Account via MSDN.) 

Why Azure? 

Plain and simple, the opportunity to host an entire application and its entirety in a cloud environment. In one word -- simplicity. I can host web sites, database servers, VMs, Virtual Networks, etc. all in the Azure platform. What does that mean exactly? On a small scale, I don't have to worry about buying and maintaining multiple servers dedicated to these individual services. On a larger scale...same rules apply except more servers + more maintenance = more overhead, which in turn, equals more money. Azure can save consumers time, space and money. Ohh, and I don't want to forget the scalability! Upgrade your equipment by a few clicks of a button (and a few dollars), before you know it, you have more storage space, faster speeds...whatever your heart desires. 

Introduction

I'm done with my salesman pitch for Azure. I plan to use Azure as my development, testing and publishing environment for a web application called LookFit. I plan to accomplish two things with this challenge: become more knowledgeable about Azure and its benefit via hands-on exposure; secondly, get hands-on experience with HTML5.

LookFit

In a nutshell, LookFit will be an application which users can access to find fitness activities going on in their respective areas. Users will be able to create, view and share activities of their choice (yoga, flag football, etc.).

How does the challenge tie in?

Challenge 1 - You're here. LookFit is my idea, and Azure will be a tool to bring this idea to a reality.

Challenge 2 - Host and deploy the web application in the Azure platform.

Challenge 3 - I'm going to use Azure SQL as my primary SQL database. Also, I'm interested to see the interaction between local management studio and SQL Azure. 

Challenge 4 - With the VM, I will create a test environment. Perform some load testing from the VM environment. Perhaps use a VM as my development environment with Visual Studio and the works. Keep everything within the Azure platform... 

Challenge 5 - We're going mobile!! Lookfit will be a web application accessible by browsers on multiple devices (laptop, smartphones, tablets, etc.).   

The Web Site 

Lookfit was built to be user friendly for the ability to create athletic events and register for these events. Integration with social media was also important, so the capabilities of being able log in with facebook and share events to your facebook feed was added. This was achieved with the use of OAuth 2.0 provided in the MVC 4 framework and an extended facebook client. 

To support user accounts and memberships, I used ASP.NET MVC 4 membership providers and a customized user profile which is stored in SQL Azure. 

To store sessions, I took advantage of Azure Caching to store my session states rather than storing in the database. 

Security is handled by ASP.NET MVC 4 Authorization providers. 

TFS was used build and deploy to Azure. 

To test, you can either Register a new account or use the Code Project account. Username: CodeProject and Pass: Testing1. Or you can login with facebook on the login page and bypass the registration.

FYI, If you register with you're phone number, you will receive notification when events you're registered to are changed or deleted. If you don't register your phone number, then by default these notification are sent to your email used during the registration process. To have an idea of how Lookfit works, it works similar to Craigslist with the ability to create post and search. 

SMS capabilities are made possible by Twilio's API (http://www.twilio.com/), emailing delivery is handled by Sendgrid's API (http://sendgrid.com).  

SQL Azure  

There is one database for Lookfit which is used primarily to store Lookfit's user profile information, ASP.NET Membership and Role information and athletic events information. I enjoyed the fact that SQL Azure is manageable over the web with it's web application. I also like the integration between Management Studios and SQL Azure. Although, I didn't get the chance to take advantage of the full capabilities because I have SQL 2008 R2 locally which has limited capabilities compared to SQL 2012. 

The code uses EF 5.0 as it's data layer, and I had little issues, if any, with the interaction between EF 5.0 and SQL Azure. 

The Virtual Machine 

I used 1 Virtual Machine which it's primary purpose was testing multiple hits to the site, load testing the database and storing a local VS 2012. I got the most use from the VM by remote connecting into the environment on computers that didn't have VS (i.e. my fiance's nicer laptop). The ability to add endpoints directly in Azure portal made this very easy to do and convenient.  

I used an image of Windows 2008 R2 on my Virtual Machine.  

Mobile Support  

Mobile support was made easy with Zurb Foundation for MVC 4 (http://foundation.zurb.com/). Very similar to boilerplate for HTML 5, Zurb Foundation is a standardized framework for front-end development. The front-end is made to be supported cross-browser and multi-device friendly.  Zurb Foundation makes this possible by taking advantage of MVC 4 and HTML 5 viewport attribute and CSS media quires which handles the supported view for the associated device. 

Additional mobile support is the ability to receive text messages when an user's register event changes or is removed. This is done by Twilio's SMS API (http://www.twilio.com/). 

I also used Screenfly (https://quirktools.com/screenfly/) to test multiple device resolutions for mobile support.

Final Thoughts 

Azure makes it relatively easy when it comes down to using it as PaaS, IaaS and/or SaaS. I also like the ability for add-ons such as Sendgrid, which is an email infrastructure to handle email delivery and queuing that can also be hosted Azure as an add-on. The ease-of-use, portability and lack of maintenance required is what made this an unique experience for me. Too bad it can't be free forever Smile | :)

Thank you CodeProject for this opportunity, it was fun. 

Lookfit - http://lookfit.azurewebsites.net/  

Used Packages and Sources 

Points of Interest 

  • Azure Development 
  • Azure SQL 
  • Azure Caching 
  • MVC 4 
  • Visual Studio 2012 
  • Entity Framework 5.0 
  • HTML 5, JQuery and CSS 3 
  • Zurb Foundation for MVC 4.0

Additional Pictures

Lookfit's log in page. 

You can log into Lookfit with Facebook. 

Creating events and activities in Lookfit is easy. 

Event posts in Lookfit. 

MVC4 framework folder structure for Lookfit. 

Integration between EF5.0 and SQL Azure is made easy. 

Folder structure of packages in TFS. 

Sendgrid dashboard for email delivery details. 

Analytics in twilio for SMS deliveries. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

JonB3232
Software Developer Sogeti USA
United States United States
I've been developing over the last 5 years professionally and recreationally. I'm an IT consultant for Sogeti USA, where I specialize in .NET application. My experience includes development in Sharepoint 2007 and Sharepoint 2010, ASP.NET, MVC 3, HTML and javascript and penalty of C# and SQL. My interests are in Sharepoint development, cloud development and agile development. My dream job is to be an ImaginEAR for Disney. Feel free to reach out to me for questions and/or advice.
 
MCTS Sharepoint 2010
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 25 Jun 2013
Article Copyright 2013 by JonB3232
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid