This Toolkit is now deprecated and is now

superseded by Windows Azure Mobile Services

The Windows Azure Toolkit for Windows Phone provided developers with the first iteration of support for building backend services for Windows Phone apps using Windows Azure.  The main areas of feedback we received from mobile developers was that they wanted a turn-key set of services for common functionality such as notifications, auth, and data.   Windows Azure Mobile Services directly reflects this feedback by enabling developers to simply provision, configure, and consume scalable backend services. The downloads for this toolkit will be removed on the week of Feb 1st 2013 and all future improvements will be channeled into Windows Azure Mobile Services rather than this toolkit. 

To get started with Mobile Services, sign up for a Windows Azure account and receive 10 free Mobile Services.

This section provides a walkthrough for the BabelCam sample application. This application was developed using the Windows Phone Cloud Application project template included in this toolkit.

Starting the application

After installing the toolkit and running the SetupSample.cmd setup script for this sample, perform the following steps to go through the BabelCam application.

Note: If you face any problems while following these steps, please make sure to review the Troubleshooting section.

1. Open Visual Studio 2010 as administrator (this is required to run Windows Azure projects).
2. In the File menu, point to Open and then click Project/Solution.
3. Explore the sample. You should see the following projects:
4. Explore the sample. You should see the following projects:
   •  BabelCam: Windows Azure project with a Web and a Worker role.
   • BabelCam.Infrastructure: A class library project with helpers and model classes common to both the Web and Worker Roles.
   • BabelCam.Phone: Silverlight for Windows Phone project containing a sample application that shows how to receive push notifications and consume Windows Azure Tables, Blobs and Queues.
   • BabelCam.Web: ASP.NET MVC 3 project configured as a Web Role containing the sample services and the administration pages.
   • BabelCam.Worker: Class library project configured as a Worker role containing the sample services for image OCR and translating services.
     
5. Additionally, the solution includes the source code for the following libraries used:
   • AspProviders: ASP.NET Providers for Windows Azure Tables (Membership, Roles, Profile and Session State Store).
   • Microsoft.Samples.Data.Services.Client: Modified version of the OData client library for Windows Phone (System.Data.Services.Client) to make it work with the Windows Azure Table Service API (http://odata.codeplex.com).
   • WindowsPhoneCloud.StorageClient: Windows Azure Storage Client library for Windows Phone.
   • WindowsPhone.Recipes.Push.Messages (Microsoft Push only): Push Notification Server Side Helper Library (http://create.msdn.com/education/catalog/article/pnhelp-wp7).
   • DPE.OAuth: Microsoft DPE OAuth2 library.
   • SL.Phone.Federation: Microsoft Silverlight ACS sign in control.
   • Hawaii.Services.Client: Ported service library from the MSR Hawaii Project (http://research.microsoft.com/en-us/um/redmond/projects/hawaii/).
   • Hawaii.Services.Client.Ocr: Ported OCR service library from the MSR Hawaii Project (http://research.microsoft.com/en-us/um/redmond/projects/hawaii/).
6. Make sure that you do not have any Web site running in ports 443 and 10080 on your local IIS.
   Note: By default, the ASP.NET MVC 3 Web Role is configured to run over two different endpoints: one HTTPS in port 443 and another HTTP in port 10080.
7. Make sure that the target for Silverlight for Windows Phone projects is set to Windows Phone Emulator.
8. In Solution Explorer, right-click the Windows Azure project, point to Debug and click Start new instance.
9. Wait for the Web Role to start and click the Continue to this website (not recommended) link to be able to browse the site despite of the certificate warning.
   
10. To log into the Web application use the following credentials:
    • User Name: admin
    • Password: (with a zero)
11. In Solution Explorer, right-click the Windows Phone project, point to Debug and click Start new instance. This will launch the Windows Phone Emulator and start the application.
12. The application will redirect you to the log in page.
    
13. In the log in page, click the Install certificate link. This will open Internet Explorer in the Windows Phone Emulator at http://127.0.0.1:10080/127.0.0.1.cer.
    
    Note: In order to consume the REST services over HTTPS in a Windows Phone device or in the Windows Phone Emulator, you need to use a trusted SSL certificate. If you do not have one, you can use a self-signed certificate, but you need to install it in the phone before consuming the services. Since the Computer Emulator always uses the 127.0.0.1 self-signed certificate, we need to install it in the Windows Phone Emulator before continuing with the next steps.
14. Click the shield icon to install the Windows Azure Compute Emulator’s SSL certificate in the Windows Phone Emulator. Finally, click install to confirm that you want to install the certificate.
     
    Important: If you leave the Windows Phone Emulator open, you do not need to install the certificate every time that you run the application. However, if you close the Windows Phone Emulator, you will have to install it again.
15. Once the certificate is installed, click ok and navigate back to the running application using the left arrow ( ).
    

Authenticating the User

1. In the log in page you can choose to log in using an identity provider or use the application as a guest user, if you choose Don’t want to log in? you will be taken to the babels page directly.
2. If you want to log in using an identity provider, select the identity provider you want to authenticate with and log in providing your account information.
   
3. If this is the first time you logged into the application, you will be redirected to the register page. Enter a name and an email address for the user, and then click register. Wait for the registration to complete. If the registration was successful, you will see the Registration Successful message. Click ok and you will be redirected back to the log in page.
    
   Note: The Windows Phone Emulator supports mapping of the keyboard on your development computer to the hardware keyboard on a Windows Phone (by default is not enabled). To enable the keyboard in the Windows Phone Emulator press the PAGE UP or PAUSE/BREAK key. To disable it, press the PAGE DOWN or PAUSE/BREAK key. For more information, see the following article: http://msdn.microsoft.com/library/ff754352(VS.92).aspx.
    
4. After completing the log in page, you will be taken to the babels page, wait until the application finishes registering for push notifications before using the application. The connection status should be connected and the application should indicate the time it received the last notification:
   

Sending Babels for Translation

1. Flick or pan to the left to navigate to the babels pivot item and click the camera button ( ) in the application bar. The phone’s camera will be open. Click the button in the top-right corner of the screen to take a photo and then click accept. This will redirect you to the upload picture page.
   
2. In the upload picture page, select English in the From list and English in the To list and finally clicked upload. If everything worked as expected, you will see a message box saying that the images was successfully uploaded. Click ok to navigate back to the babels pivot page.
   
3. Back in the babels pivot page, wait for a few seconds while the image is processed. After a short period, you should receive a push notification indicating that no text was found on the image.
   
4. The solution contains a sample image that can be used for testing. Go back to Visual Studio or Visual Studio Express for Windows Phone and in the Solution Explorer, choose the BabelCam.Phone project and find the Resources and Toolkit.Content folders:
   
5. To see how BabelCam works with this sample image, go back in the Windows Phone Emulator and, in the babels pivot page, click Translate a sample text image. In the upload picture page, choose French as the target language and click upload. If everything worked as expected, you will see a message box saying that the images was successfully uploaded. Click ok to navigate back to the babels pivot page.
6. Back in the babels pivot page, wait for a few seconds while the image is processed. After a short period, you should receive a push notification with the translated text to French.
    
   Note: If you want to use a different sample image for translation, replace the sampletext.jpg file in both Resources and Toolkit.Content folders, rebuild the application and restart it.

Viewing Previos Babels

BabelCam archives all your past babels in a Windows Azure Storage Table. Follow the steps below to learn how to view your past babels.

1. Flick or pan to the left to navigate to my babels pivot item and click in the refresh icon (). The pivot page will show all your previous babels sent for translation with the date and time it was processed.
   
2. If you scroll down or up the list of babels, you can see all your past babels.
   
3. Click in the text of any babel and a browser window will open showing the original image that generated that babel.
   

Next step:  TweetYourBlobs