Friday, December 28, 2012

Windows Azure Mobile Services Preview Walkthrough–Part 1: Windows 8 ToDo Demo Application (C#)

imagePart 1 of 5: The Windows Azure Mobile Services (WAMoS) Preview’s initial release enables application developers targeting Windows 8 to automate the following programming tasks for Windows Store Apps*:

  1. Creating a Windows Azure SQL Database (WASDB) instance and table to persist data entered in a Windows 8 Modern (formerly Metro) UI application’s form
  2. Connecting the table to the generated data entry front end app
  3. Authenticating application users
  4. Pushing notifications to users

This walkthrough, which is simpler than the Get Started with Data walkthrough, explains how to obtain a Windows Azure 90-day free trial, create a C#/XAML WASDB instance for a todo application, add a table to persist todo items, and generate and use a sample oakleaf-todo Windows 8 front-end application. During the preview period, you can publish up to six free Windows Mobile applications.

• Updated 12/28/2012 with minor fixes for changes to the Windows Azure Management Portal’s new HTML version marked .

imageMy (@rogerjenn) Windows Azure Mobile Services Preview Walkthrough–Part 2: Authenticating Windows 8 App Users (C#) covers task 3 and Windows Azure Mobile Services Preview Walkthrough–Part 3: Pushing Notifications to Windows 8 Users (C#) covers task 4.

Links to later articles:

imagePrerequisites: You must perform this walkthrough under Windows 8 RTM with Visual Studio 2012 Express for Windows 8 or higher. Downloading and installing the Mobile Services SDK Preview from GitHub also is required.

Important: Login to Windows 8 using the Microsoft Account (Live ID) with which you applied for the Windows Azure Mobile Services Preview and the Windows Store when performing this walkthrough with Windows Studio. Using a different Account/ID is likely to lead to unexpected results.

Note: The WAMoS abbreviation for Mobile Services distinguishes them from Windows Azure Media Services (WAMeS).

Update 9/12/2012 4:00 PM PDT: * Mary Jo Foley (@maryjofoley) asserted ‘'Metro-style' apps are now to be known as 'Windows Store' apps, according to Microsoft officials’ in a deck for her Microsoft finally comes clean(er) on post-Metro naming plans article of 9/12/2012 for ZDNet’s All About Microsoft blog: 

image… The new official name for these Metro-style apps, according to Somasegar, is "Windows Store" apps. Rafael Rivera from Within Windows said he thought this would be the name once he looked at the Visual Studio 2012 RTM code back on August 7. Looks like Rivera was right on the money.

imageMicrosoft is slowly but surely substituting references to Metro-Style apps with Windows Store apps across its own Web sites. This is a move that will take some time given how many references already exist across Microsoft's own sites, Somasegar acknowledged. …


1. Navigate to http://www.windowsazure.com:

image 

2. Log in with your Windows Live or Office 365 ID and sign up for a 90-day free trial if you don’t have an account:

image

If you already have an account, skip to step 7.

image3. Click next to open the Verify Your Account form: area code

image

4. Replace the default with the numbers (no special characters) of your mobile phone area code and number, click the Send Text Message button and type the verification code from the text message you receive in the text box:

WindowsAzureFreeTrial-VerifyAccount

6. Click Next and complete the credit card form:

imageWindowsAzureFreeTrial-CreditCard

Note: Your credit card won’t be charged for usage in excess of free quotas unless you explicitly authorize usage charges in the Billing Portal.

7. Open the Management Portal’s Account tab and click the Preview Features button:

image

Note: My rogerj@sbcglobal.net Live ID is used for the above example because that account doesn’t have WAMoS enabled. The remainder of this walkthrough uses the subscription(s) associated with my roger_jennings@compuserve.com account.

8. Click the Mobil Services’ Try It Now button to open the Add Preview Feature form, accept the default or select a subscription:

image

image9. Click the submit button to request admission to the preview:

10. Follow the instructions contained in the e-mail sent to your Live ID e-mail account, which will enable the Mobile Services item in the Management Portal’s navigation pane:

1 - WAMoS - Get Started

image11. Click the Create a New App button to open the Create a Mobile Service form, type a DNS prefix for the ToDo back end in the URL text box (oakleaf-todo for this example), select Create a new SQL Database in the Database list, accept the default East US region.

image

Note: Only Microsoft’s East US data center supported WAMoS when this walkthrough was published.

• Update 12/28/2012: Other data centers, including West US, now support Mobile Services.

image12. Click the next button to open the Specify Database Settings form, accept the default Name and Server settings, and type a database user name and complex password:

image

Note: You don’t need to configure advanced database settings, such as database size, for most Mobile Services.

image13. Click the Submit to create the Mobil Service’s database and enable the Mobile Services item in the Management Portal’s navigation pane. Ready status usually will appear in about 30 seconds:

4 - WAMoS - ServiceCreated

14. If you click the Mobile Service’s URL, https://oakleaf-todo.azure-mobile.net/ for this example, the following page opens:

image

Note: Clicking the Tell Me More button opens the WAMoS landing page. 

15. Click the QuickStart (image) name (oakleaf-todo) button to open the Create Application page:

5 - WAMoS - CreateApp

16. Click the Create a New Windows 8 Application button to open the Get Started page. Click the Create Todoitem Table button to create a table to persist todo items:

6 - WAMoS - Tools, Table, App

17. Accept the default C# language, click download, open and extract the oakleaf-todo.zip file for a Windows 8 XAML front-end application generated from a WAMoS template to an appropriate location:

image

18. Open the oakleaf-todo.sln file in Visual Studio 2012 Express for Windows 8 or higher, expand Solution Explorer’s node, and open MainPage.xaml.cs to display the namespaces used:

8 - WAMoS - MainPage.xaml.cs

19. Press F5 to compile and run the front-end program. Type a few TodoItems in the text box, clicking the Save button to add each to the Query and Update Data list:

9 - WAMoS - OakLeafTodoWindow

Note: Click the Refresh button to display active list members when reopening the page. The XAML code for the Query and Update Data description has been modified to add a newline between sentences.

20. Mark the check box of completed TodoItems to delete them from the table.

21. When the Developer License form opens:

Mobile Services - DeveloperLicenseDialog

22. Click the I agree button to obtain a 30-day license and display this form:

Mobile Services - DevLicenseObtained

You will use the Visual Studio project you created here as the foundation for the two later walkthroughs.


0 comments: