It has been long since I blogged and here I am yet again trying to revive my blogging Smile  hopefully I will write regularly. This blog is about the session i did at TechEd India 2011, in the cloud track, titled “Building a Social Networking Portal under 1 hour”. Although it has been a long while since the event took place, the concepts of the cloud & code snippets still remain relevant. I am hoping this will create a base for future blogs.

All of you who were present at TechEd / TechEd on the road  /Webcamps – It was great to see your enthusiasm and  nice catching up with you.

First off, I have used the following technologies to build this

    1. ASP.NET MVC 3 & Razor : http://bit.ly/r84llR
    2. Visual Studio 2010 Service Pack 1  : http://bit.ly/oLMdmV 
    3. ASP.NET MVC 3 and Tools Update :  http://bit.ly/rrZzmB 
    4. Windows Azure SDK 1.5 : http://bit.ly/p3NtbE 
    5. Facebook API : http://bit.ly/niapwX 

The idea behind writing this app was to have a place where we can all build agenda for attending the conference and also sharing the information to our friends in Facebook social media.  Lets pen down the main steps

 

image

Lets also pen down how should our screens look like ?

  • Pages to see all the sessions happening day wise, so we might want to have Day 1, Day 2, Day 3 etc
  • Ability to add sessions to the cart (here I want to use the Facebook “Like” button to add sessions to my cart)
  • View the sessions in “my cart” and  options to form my calendar (clear clashes, delete multiple sessions within same slot ) & publish it to my Facebook profile

STEP 1 : Building the Agenda Builder MVC 3 Application

The Agenda page is a simple MVC 3 page where we will pull all the information from Database and list in a Grid View. 

image

First, let us build the model

  • I have the Tech Ed Agenda database and using Entity Framework, I want to build the entity model
  • Create a SessionModel.edmx file using “Add – New – ADO.NET Entity Data Model” and provide the connection string and connect to the database
  • Allow the defaults and let Entity Framework create the EDMX file
  • You mite want to add factory methods like “repository” to bring structure to your ViewModel

Next is to build the Controller : Build the Session Control and have action methods appropriately for Day1, Day 2 & Day3. Perform CRUD operations for these as well

Finally Views : Razor based cshtml views for displaying the Agenda of TechEd 2011 Sessions.

<< You can see the attached code for better clarity>>

Once your MVC application is ready, it will look like this :

image

 

For the User personalization, we will use the built in ASP.NET Membership provider. We will run the membership integration tool (ASPNET_REGSQL) command to get the tables/procedures into our TEched Agenda Database. With that, I can simply use the Login/Sign up features and get a handle of the Logged in User using User.Identity.Name

With this my basic MVC3 application will be ready with all CRUD operations of various sessions. There is an empty “SessionCart” View which is not functional at this moment

STEP 2 : Cloud Enable the Application for Simulation

 

image

Here we need to add a blank cloud template and add the MVC 3 app as its Roles. To get the visual studio tools for Windows Azure, you can download the latest SDK and tools from here : http://bit.ly/p3NtbE

Next is to do SQL Server Migration to SQL Azure. Please follow this post for migration of the same : http://bit.ly/oQoHzN 

The development in SQL Azure, basics to step by step migration:  http://bit.ly/rd6oRA

At the end of this step, your MVC3 application will run on the local cloud simulator and use the storage of SQL Azure on the cloud for database access….

STEP 3 : Integrate Azure Storage

image

The next step is to build the “Session Cart page”. For this I am using the “Azure table storage”. To learn about Azure tables (1 normal form tables), more an entity store, non transactional, not concurrent. The developer needs to handle these, but this data structure is extremely scalable and very cheap.  I am choosing the same, since I will use a single table and have multiple rows with the “userId” as partitionkey and new guid() as rowkey.  Also, i do not need worry about transactions since the single user can alter only his session list and remake the new one.

To learn about the azure table storage, refer to : http://bit.ly/rihuo3

Walk through on building a table storage sample : http://bit.ly/nyfMfy 

We need to create an AzureTable DataModel & DataserviceContext that will talk to TableStorageContext & use the Wrapper classes of Data Source to provide CRUD operations. See the attached Code.

STEP 4 : Integrate Facebook

There are the below 3 ways to integrate Facebook.

image

  • The simplest is iframe :

 

<iframe  src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"  scrolling="no" frameborder="0" style='border:none; width:450px; height:80px'></iframe>

  • Next is using FBML : Which is again straight forward, but we need to include the script source so that we can use the markup and need to go to facebook developer site and get an AppId

<script src=http://connect.facebook.net/en_US/all.js#appId=XXXXXXXXXXXXX&amp;xfbml=1></script>

<fb:live-stream event_app_id="XXXXXXXXXXX" width="400" height="500" xid="" always_post_to_friends="false"></fb:live-stream>

  • Using the JavaScript APIs are most powerful and we can gain granular access to all facebook components and handles

Here i included a fbScripts.js file to publish the created agenda from the session cart to facebook. Please check the attached code snippet.

Technorati Tags: ,,,

STEP 5 : Publish to Azure DataCenter

image

Finally, our application looks almost ready. It runs on cloud emulator, talks to SQL Azure, talks to Azure tables and we can publish our agenda to Facebook as well. The last part of this demo is to move the app to azure DataCenter. For this, we will need to

  • Create a hosted service in the portal
  • Create storage service in the portal
  • In the visual studio application, change the Connection string to point to Azure tables on the Cloud
  • Finally use the publish wizard to push application to cloud.
  • You can configure certificates & remote desktop. The wizard is very self explanatory.

The highlighted in red, is no longer an issue, since Windows Azure now supports ASP.NET MVC3 runtime. However, if you need some exes or dlls that are not on the Azure VMs and still want to deploy your application, then you need silent install the application as a start-up task.

The article talks about doing the same : http://bit.ly/pQKFgl  & MSDN article : http://bit.ly/qjrtdJ 

Here you go, you have done an Azure application and deployed on the cloud

Here the download for the application Source Code http://bit.ly/ptenDo. Please note, at this point, i am not attaching the db scripts, hence you may not be able to run the application, but you can surely take a look at the code and syntax : The ppt is also available here : http://bit.ly/ptenDo 

Also: Please download the latest Windows Azure SDK  the latest September 2011 Refresh from http://bit.ly/p3NtbE 

Thanks for reading this extra long post and hope to blog more regularly in future.You can always twitter me at @sharan779 for any comments as well.