livemesh This is the first in a series of posts around creating a Mesh-enabled web applications using all the new bits released at PDC 2008.  the intent is to introduce you to the process of building Mesh-enabled web applications, and get your first app up and running quickly.  I’ll try to be thorough about how I went about this so that once you have all the developer pieces you can follow along through what I’ve done and build your own Mesh-enabled application.  I’m particularly interested in the implications this leaves for Silverlight applications to run on the desktop, as well as using the Mesh as a major part of my application architecture. 

This post presumes that you at least know what Mesh is, and have used it in the past.  If you are unfamiliar with Windows Live Mesh, I recommend that you spend some time reading the following posts to get you up to speed.

For this post, we’ll be building a very simple Mesh-enabled web application that has some basic functionality just to get us familiar with what this type of development feels like.  Future posts will cover more details behind the Mesh environment , accessing Mesh objects, integration with other Windows Live Services, Silverlight development in the Mesh, sharing applications, online vs. offline and more.  Look for more in this series at a future date.

OK – let’s get started!

Step 1 - Setting up your Environment

Before we can write any code, we have to be setup with all the required bits.  Here’s what I’ve done to get ready for this series:

  1. install .NET Framework 3.5 SP1 – If you’re installing VS08 SP1, you can skip this step of installing it manually, but .NET 3.5 SP1 is required for Mesh application development.

  2. Install Visual Studio 2008 SP1 – this isn’t strictly required, but it sure makes developing, deploying and debugging a LOT simpler.  I will be walking you through the process of creating your application using Visual Studio 2008 SP1.

  3. Now you have to get access to the developer codes.  These are, for the time being, a little tricky to come by.  Folks that went to PDC, or are attending one of the upcoming Windows Live Training events, will get developer keys to enter the portal.  The rest will have to sign up at the Connect web site and wait until they’re handed out (sorry – don’t ask – I don’t have any keys to give out).

  4. Once you have access to your keys, you make your way to the developer portal at http://lx.azure.microsoft.com and enter them.  You can also download the remaining tools bits from here to enable the rest of your development experience.

  5. Install all the tools – there are a bunch of installers to go through.  Here’s what I did, in the order I did them:

  6. There are a couple of extra tools you can install to follow along for future posts as these are not required here, but you should get them anyway

I understand that most of you will NOT have access to the developer codes right away, but we’re working to expand the beta to more folks so that we can get more people building Mesh-enabled applications.  For now, let’s just plunge ahead and I’ll try to provide a bunch of screen shots, and eventually a screencast.

Step 2 – Building a Test Application

I figure the best way to make sure everything is working is to go through and actually build something end-to-end and make sure that all the parts fit.  That way, if something goes wrong, I didn’t invest a ton of time on something I can’t deploy.  We don’t want to build something super complicated because of all the extra clutter.  We’ll tackle that in future posts :)  For today, let’s just build something and deploy it so we can make sure everything is wired up correctly.

Disclaimer:  These bits are pre-beta – there are bugs, and some of the UX is a little rough.  I have been assured that there will be a bunch of work done on this to make it easier/faster/better/cooler/smarter/etc. prior to RTM.  YMMV once you get things running on your machine…

OK – let’s dig in!  First, fire up Visual Studio 2008 and make sure that everything we installed earlier is actually there and showing up in the IDE.  Click on the “Add New Project” dialog, and you should see something similar to this picture where we’ve got a bunch of new project options:

Project Selection Window from Visual Studio

Note the two biggies:Mesh-enabled Web Application and Silverlight Mesh-enabled Web Application.  The difference is that the latter template adds a Silverlight project to the solution besides the Web Application project.  Let’s choose the first option - “Mesh-enabled Web Application”, name it the default value of “MeshApp1” and press OK.

Once VS08 is done creating all project templates, you should see one project in your solution – a Mesh-enabled web application with a funky project icon called MeshApp1 (see below).  The icon means that this is a Mesh-enabled web app ( a .meshproj file ) that is basically a collection of web page resources for deploying into the Mesh.

image

Let’s explore some of the items that the VS08 template created for us. 

  • index.html – this file is a simple HTML page that, by default, just has the string “Hello World from a Live Framework Mesh-enabled Web Application!”. The purpose of this file is the entry point into our Mesh-enabled web application and (for now) must be called index.html, so don’t rename it (hopefully we’ll be able to specify this in our application metadata in the future, but that’s not how it works today.  Also, there is a different way to deploy ASP.NET applications into the Mesh, which we’ll cover in future posts).  There are a couple of TODO: statements in here to help you remember what tasks need to be done.  Of course you need to put your UI in there, but there is also a reference to the mysterious Manifest.xml file – we’ll get to that next.  For now, leave the contents of this file alone.
  • MeshApp1.css – this the default CSS file that VS08 provides.  Feel free to modify to your heart’s content.
  • MeshApp1.js – this is the default JavaScript file that VS08 provides.  It has only one empty method in it now called initialize(), which is there for you to add any startup code you need to run.  This would be a great place to initialize Live Framework objects such as a Windows Live Map object, or gain access to other Mesh data through the Mesh object model before rendering the display.
  • Microsoft.LiveFramework.js – this is the Live Framework voodoo, much like the Silverlight.js file from Silverlight development.  There’s no real reason to modify this file – it’s there to provide an API for you to get to all the Mesh environment and any of the Mesh objects you need for your application.  Leave this reference in there and we’ll explore some of the objects shortly.
  • Logo.png - This file represents the icon that will be used to identify your application in the Mesh catalog.  Think of it like the icon for your WinForms or WPF app, or your favicon for your web application.  A logo.png file is required in your solution, and the deployment of your application will FAIL if the logo.png file is not present.  I hope that in future versions of the Mesh environment that they’ll give you a “Free” logo if you don’t provide one, or at least allow you to specify which logo file should be used for your application, but that’s not the case at this point.
  • Manifest.xml - This file describes your application to the Mesh environment.  Here’s a sample of the XML inside there:
   1:  <Manifest xmlns="http://schemas.mesh.com/application/manifest/2008">
   2:    <Name>MeshApp1</Name>
   3:    <Description>My first ever Live Framework HTML Mesh-enabled Web Application!</Description>
   4:    <PublisherName>Chris Koenig</PublisherName>
   5:    <DisplayVersion>1.0</DisplayVersion>
   6:    <MultiInstance>false</MultiInstance>
   7:    <PrivacyPolicyLink>http://contoso.com/privacyPolicy</PrivacyPolicyLink>
   8:    <SupportLink>http://contoso.com/support</SupportLink>
   9:    <VendorLink>http://contoso.com</VendorLink>
  10:    <RequireDelegation>false</RequireDelegation>
  11:  </Manifest>

In future articles we’ll spend more time in this file looking at all the options here, and some that aren’t.  For now, let’s just update the file to have a nice Description and Publisher name. 

From here, we’re going to leave the rest of the project alone and compile it before we run it.  I want to do this separate step to show how Mesh apps are packaged for deployment.  To see this, look in your bin/debug directory - you should see a ZIP file called MeshApp1.zip.  Looking inside this ZIP file revels everything we had in our Mesh project zipped up for deployment.  ZIP is the unit of deployment for Mesh apps today, and we’ll see shortly how we get that zip file up to the Mesh…

Step 3 – Run It!

Now that we know it compiles, lets start it up and see if we can get all the way through deployment and see it actually run.  When I press F5 to start the application, I get prompted with the following dialog:

image

This dialog (which I bet is a temporary placeholder just for this release) outlines a 3-step process for deploying your application into the mesh.  The first step requires you to log into the Azure Services Developer Portal and define the application to the Mesh.  The second step is just a link that allows you to easily gain access to the path under which your application was compiled.  Step 3 is the process of recording the Self-Link for your app – this is like the Startup URL for your app that Mesh needs to be able to find your application when it’s time to run it.

Step 1 – Define the Project

Click on the link that says “Navigate to the Developer Portal”.  You should see a screen similar to this:

image

The developer portal is, as you would expect, secured via Windows Live ID.  Log into the developer portal using a Live ID that you want to associate with your Mesh development.  You might choose a separate Live ID than your primary one as this will put you on a separate device ring than the consumer Mesh space.  If this is the first time you’re logging into the developer portal, you’ll be asked to register your development tokens.  Unfortunately, you can’t do much past this point if you don’t have development tokens, other than access links to download some of the developer bits.  As mentioned before, we’re working on opening up this development beyond the current set soon, so stay tuned for more information.  I’ll proceed on as though you entered your Mesh developer token and are ready to get on with development.

One into the developer portal, you’ll see a screen that looks like this:

image

This is the main screen from where you can manage your mesh applications.  The one Mesh application I have created – Basic List – is shown towards the top, right under the main toolbar.  Once you’ve created a few applications, this screen will really fill up. On the left are a series of tabs, one for each of the applications you’ve created in the Mesh.  There’s also a toolbar across the top that lets you see analytics about application usage, change properties of your account & profile and get help.

Our task here is to define our new application to the Mesh.  Notice in the upper left hand corner and within the primary display area, you’ll see a link to create a new project:

image

Click this link and you’ll be taken to the Create a New Service Component screen. 

image

I’m not sure that the wording is right here yet, but anyway, this is where you choose the platform for your new application.  For our purposes, click on the item labeled “Live Services: Live Framework Community Technology Preview” – you’ll find it in the lower-half of the screen under the heading “Azure Services Platform”.  Notice that your registration token will allow you to define only a specified number of applications to the Mesh.  For my token, I was granted 25 applications – one is already in use, so my number available shows 24.

When you click on the button, you’re taken to a screen that asks you to name your project.  I’m naming mine FirstMeshApp and adding an appropriate description.  Note that this is not the same thing as the name of your application – it’s the name of the project that is associated to your application.

image

Pressing the Next button takes us to the framework selector.  From here we can define the type of project we want to create within the Live Services platform.  There are also handy links to our Live Desktop as well as download links to the developer tools if you don’t already have them installed.  

image

On this screen there are two options for defining your project - the first option allows you to Create a Live Framework-enabled Website.  This is for ASP.NET or other applications that you intend to deploy to the Mesh.  We’re not creating one of those today, but we will in future posts.  Select the second option, Create a Mesh-enabled Web application and press the Create button.  Our application project is now created, and we’re taken to the project properties page!

image

The properties page tells a LOT about our application, including – most importantly – the installation URL.  We’ll look in detail at this screen in the next section – deployment…

Part 2 – Deploy the Application into the Mesh

Now that the project has been created, it’s time to upload our application into the defined project space.  If you look closely at this properties screen, you’ll notice that the center area displays information that looks like it should come from our application manifest file:

image

Until we actually upload the application into the Mesh project, we won’t see any of that data.  So lets do that!  Press the Upload Package… button and you should get the upload screen:

image

This screen is pretty self-explanatory, and we’re going to get Visual Studio to help us :-)  Before pressing the Browse button, switch back over to Visual Studio and click on the link provided there under item number 2 – Copy Full Path of MeshApp1 to the Clipboard.  This will – surprise – copy the location of your deployment package to the clipboard so it’s easy to plug into the Mesh file browser!  Still needs more automation, but this is a nice helper for now.  Once you have the path in your clipboard, switch back over to Mesh and press the Browse button.  Paste your path into the browser window and press Enter.  This will refresh this screen with the data from your deployment ZIP file:

image

Note – if you’re building this manually (i.e. w/o the help of Visual Studio 2008, the ZIP MUST have at least the index.html, logo.png and manifest.xml files in the root of the ZIP or the next steps will fail).

OK – press Deploy and watch the screen.  If all goes well, you’ll see something like this:

image

and then the browser will switch back over to your Project Properties page.  I have seen where the deploys will fail due to network issues, or firewall issues, or even web browser proxy issues.  Make sure you have a nice, fast, clear connection to the internet if you run into any problems with this step.  When it’s complete, the Project Properties page should show the information from the manifest.xml file in the deployment zip:

image

This page is now filled in with all the manifest.xml information.  You can see how settings in the XML file tracked back to this display.  You can adjust them at the next deployment, such as updating the version numbers, to get the effects you desire.  More on this in a future post, but or now, just having data in there is the most important part.

You should also get the Website Embedding section filled in with the Application Self Link URL filled in.  This is what we need for the next step, so select it from the screen, copy it to the clipboard, and switch back to Visual Studio.  You can now paste your app’s Application Self Link URL into this dialog and press OK. 

image

When the deployment process is complete, you should be taken to your Live Desktop with the new application automatically started for you.  If everything was done correctly, you should see your application running in the Live Desktop!

image

And that is all there is too it!  Everything else at this point is based on your skill with HTML, JavaScript and Silverlight.  before we close out those, let’s look at the rest of the Live Desktop experience and see how we can create new instances of our application in the live environment, and share them with our friends.

Step 3 – Run It!

Now that we’ve tested out our application, lets go back and look at some of the other ways to use and manage our application.  Close the browser that VS opened and return everything to a non-running state.  Back on the Azure Services Developer Portal site, lets take a quick look at the rest of the changes that got made here.  Notice the new tab along the left-hand side listing your application.  Clicking on this link is how you’ll get back to this property page.  On the Property page, beneath the Upload button is a Test Now button and a Publish button.  Test Now will launch you back into your Live Desktop and allow you to provision and run your application without the help of Visual Studio.  The Publish option is basically like sending your application out into the wild so that anyone can get access to it.  In order for the application to be deployed to the wider web, it has to go through a series of reviews and safety checks to make sure that nothing harmful will befall people that run your app.  This is NOT necessary for sharing your application with other, specifically identified  people, it’s only necessary for wider distribution.  Let’s press the Test Now button and see what this experience looks like:

image

First, it opens up a new browser window with the development version of our Live Desktop showing.  Take particular notice of the Access Permissions section on the right-hand side.  This section alerts the user that a Mesh-enabled application is requesting access to your Live Mesh.  You’re in control here – if you don’t press the Allow Access button, the application will not start.  We know the author of this application pretty well, so let’s go ahead and trust them – at least for now.  Press the Allow Access button to continue on.

The next screen we see is our Applications listing. 

image

Notice that although we granted the application access to our Live Mesh, it didn’t start running.  What it did do, was “install” the application into our Mesh and create an instance of it that we can run.  The instance model makes sense because some applications can be running multiple times from a single definition – for example: we might have a chess application where you have one instance where I’m playing against you, and another instance where Kasparov is playing against you.  Since Mesh applications are intended to be collaborative it makes sense to deploy them in this way.  Otherwise, we’d have to install the application multiple times and that would get really confusing.

You can also see this instance defined as a runnable application on our Live Desktop.  By double-clicking on the MeshApp1 icon, it will also launch the application.

image

If our application supported multiple instances, we could create a new instance by clicking on the Create New link next to our application definition.  To delete the instance that is already there, press the X next to the small, highlighted instance underneath the application definition next to the first instance.  Since we defined in our manifest.xml file that this application was not multi-instance, then we can’t create any new instances.  To uninstall the application all together, and delete any running instances, press the X at the Application Definition level, right next to the Create New link.  Again – this UI is still in beta.  Things may (and probably will) change as we get closer to RTM.

To run the application, merely click on the instance that’s defined there and you should see the instance screen:

image

This screen shows news about the given application instance and describes the permissions that the application has been granted.  To run the instance, click on the Open Application link under the application title.  Now we see our running application!

The last thing we want to do is share this application with someone else.  To do that, make sure the instance you wish to share is running and you can see the Members tab on the Mesh bar.  Click on the Invite link to bring up the invitation screen:

image

From here, you can type in the Live ID email addresses for people you wish to invite.  By clicking on the link, it will take them into their Mesh, as identified by the Live ID they log in with, an ask them to allow the application to access their Live Mesh, just as it did for us when we ran it the first time.  Enter another email addres and press OK.  What you should eventually see is another member in this mesh marked with Pending status.  If you click on them, you can see the invitation link that can be used to load the application directly into the Mesh.

image

If you sign out of Mesh, and then sign in with your other Live ID, you can use this link to load that application into your Mesh.  Of course you can open that email and click on the link too, but that’s not strictly necessary.  Once you accept the terms, and grant the application access to your Live Mesh, you should see the running application.

Summary

Building Live Mesh-enabled Web Applications is a lot simpler than I thought before I learned how it was done.  There is still a lot of work to do here, but the ability to use Visual Studio 2008 and a relatively simple deployment methodology makes it very easy for us to get Mesh-enabled applications up and running quickly.  In future posts we’ll look at ASP.NET applications hosted in the Cloud, using the Mesh object model to get information about the Live ID running the application, and more, so stay tuned. 

<plug type=”shameless”>If you are so inclined, please feel free to subscribe to this blog feed at http://feeds.feedburner.com/chriskoenig and also recommend this blog to your friends</plug>

Technorati Tags: ,,,,