James Montemagno b117c7b1c1 Initial Commit před 10 roky
..
README.md b117c7b1c1 Initial Commit před 10 roky

README.md

Azure Mobile Services

The Challenge

In this challenge, you will use Azure Mobile Services and Xamarin.iOS to build a scalable, native iOS app in C#.

Login to the Azure portal and create a new Mobile Service and SQL database. Add the Azure Mobile Services NuGet package to your Xamarin Forms project.

Challenge Walkthrough

  • Login to your Microsoft Azure account at http://manage.windowsazure.com. (If you don't have an Azure account, you can obtain a free 30-day trial at http://account.windowsazure.com/signup?WT.mc_id=evolve2014. Once you have an Azure account, you can create up to 10 free mobile services that you can keep even after your trial period ends. If you're an MSDN subscriber, you should activate your Azure benefit and get free credits each month.)

  • Click New -> Compute -> Mobile Service -> Create. Then specify URL and database login/password order to create a new Mobile Service and the associated SQL database. Choose JavaScript as the backend.

  • Select your new mobile service.

  • Go to the Data tab then click the Create button at the bottom to add a new table to your SQL database called TodoItem.

  • On the dashboard tab, copy your application URL to a text file.

  • Click the Manage Keys button at the bottom and copy your Application Key to the text file.

  • Fire up Xamarin Studio and select Blank App (Xamarin.Forms Shared).

  • Add the NuGet package for Azure Mobile Services (WindowsAzure.MobileServices) to both the iOS and Android project. To add the package, right click on the project and select Add -> Packages.

  • In the iOS project, add the following code in AppDelegate.cs in FinishedLaunching, after the call to Forms.Init():

    Microsoft.WindowsAzure.MobileServices.CurrentPlatform.Init (); 
    
  • In the shared project, add the following declaration to App.cs:

    using Microsoft.WindowsAzure.MobileServices;
    
  • Replace the code in App.cs with the following:

    public class App
    {
        public static Page GetMainPage ()
        {             
            return new TodoPage ();
        }
    
        public static MobileServiceClient MobileService = new MobileServiceClient(
            "https://your-mobile-service.azure-mobile.net/",
            "APP KEY"
        );
    }
    
    public class TodoItem
    {
        public string Id { get; set; }
        public string Text { get; set; }
        public bool Complete { get; set; } 
    }
    
  • Replace the placeholder strings above with the application URL and application key that you copied earlier

  • Add a new file to the shared code project named TodoPage.cs, with the following code:

    using System;
    using Xamarin.Forms;
    using System.Threading.Tasks;
    using Microsoft.WindowsAzure.MobileServices;
    
    public class TodoPage : ContentPage
    {
        async Task Refresh()
        {
            itemsView.ItemsSource = await todoTable
                .OrderBy (x => x.Text)
                .Select (x => x.Text)
                .ToListAsync (); 
        }
    
        protected async override void OnAppearing ()
        {
            await Refresh ();
            base.OnAppearing ();
        }
    
        private ListView itemsView;
        private IMobileServiceTable<TodoItem> todoTable;
    
        public TodoPage()
        {
            todoTable = App.MobileService.GetTable<TodoItem>();
    
            itemsView = new ListView();
    
            var textBox = new Entry { HorizontalOptions = LayoutOptions.FillAndExpand };
    
            var addButton = new Button { Text = "Add" };
            var refreshButton = new Button { Text = "Refresh" };
    
            this.Content = new StackLayout {
                Padding = 20,
                Orientation = StackOrientation.Vertical,
                Children = {
                    new StackLayout {
                        Orientation = StackOrientation.Horizontal,
                        Children = {
                            textBox, addButton, refreshButton
                        }
                    },
                    itemsView
                }
            };
    
            // event handlers
            addButton.Clicked += async (sender, e) => {
                await todoTable.InsertAsync(new TodoItem { Text = textBox.Text, Complete = false });
                await Refresh();
                textBox.Text = "";
            };
    
            refreshButton.Clicked += async (sender, e) => {
                refreshButton.IsEnabled = false;
                await Refresh();
                refreshButton.IsEnabled = true;
            };
        }
    }
    
  • Run either the iOS or Android application and add some todo items

  • If you head back to the Windows Azure Portal, you'll see that items you add to the list are now stored in your SQL database.

#####Bonus Challenge #1 Walkthrough

For the bonus challenge, change the app to one that works even when there is no network access, using the offline sync feature of Mobile Services.

  • For both the Android and iOS project, add the pre-release package WindowsAzure.MobileServices.SQLiteStore. Make sure the checkbox Show pre-release packages is checked in the Add Packages dialog.

  • Make sure the project builds without errors. (You may have to add the Android Support v13 library binding package for the Android app to compile. Search for Xamarin.Android.Support.v13 in NuGet and add it to the project.)

  • In the iOS project, edit AppDelegate.cs and add the following line to FinishedLaunching:

        SQLitePCL.CurrentPlatform.Init ();
    
  • In the shared project, add the following declarations to TodoPage.cs:

    using Microsoft.WindowsAzure.MobileServices.Sync;
    using Microsoft.WindowsAzure.MobileServices.SQLiteStore;
    
  • Add the following code to the start of OnAppearing:

        var store = new MobileServiceSQLiteStore ("localstore.db");
        store.DefineTable<TodoItem> ();
    
        await App.MobileService.SyncContext.InitializeAsync (store);
    
  • Change the declaration of todoTable to the following:

    private IMobileServiceSyncTable<TodoItem> syncTable;
    
  • Change the definition of Refresh() to use syncTable:

    async Task Refresh()
    {
        itemsView.ItemsSource = await syncTable
            .OrderBy (x => x.Text)
            .Select (x => x.Text)
            .ToListAsync (); 
    }
    
  • In the TodoPage constructor, replace the initialization of todoTable with the following:

        syncTable = App.MobileService.GetSyncTable<TodoItem>();
    
  • Change the handler for addButton to use syncTable instead of todoTable:

        await syncTable.InsertAsync(new TodoItem { Text = textBox.Text, Complete = false });
    
  • In the handler for refreshButton, add the following lines before the call to Refresh():

        await App.MobileService.SyncContext.PushAsync();
        await syncTable.PullAsync("todoItems", syncTable.CreateQuery());
    
  • Launch the app. You will notice that the list of todo items is now empty, since it is now reading from the local database instead of the remote service.

  • Click the refresh button to synchronize the local data store with the remote one.

  • Close the app. Turn off your network connection or change your mobile service initialization in App.cs to use an invalid mobile service name.

  • Re-launch the app. You will see that your list of todo items appears on startup. Add some items and restore your network connection.

  • Click the Refresh button to synchronize changes. Confirm that the changes appear in the Data tab of your mobile service.

Congratulations, you've completed an Azure Bonus Challenge mini-hack!

#####Bonus Challenge #2 Walkthrough

  • Create a new mobile service and choose .NET as the backend.

  • Go to the quickstart tab in the portal and download the Xamarin.iOS or Xamarin.Android starter project. Or, open Visual Studio 2013 Update 3, and use the Mobile Services new project template to create a mobile service project.

  • Open the project in Visual Studio. Press F5 to run the service project locally.

  • Click the Try it out link in the webpage and test your mobile service by sending HTTP requests.

  • In Visual Studio, right click your project and select Deploy. Login to Azure and select your mobile service name.

  • In Visual Studio or Xamarin Studio, run the Xamarin.iOS or Xamarin.Android client project and confirm that it connects to your new mobile service.

Congratulations, you've completed an Azure Bonus Challenge mini-hack!