Add a Backend to Your App in 10 Minutes

Pierce Boggan

All mobile apps need a backend, and Azure App Service can help bring that backend to life. From simple no-code backends with Azure Easy Tables to fully-customizable ASP.NET Web API backends, Azure has options to help you build a backend to power your mobile app. Once you’ve built a backend for storing data, authenticating users, or sending push notifications, it’s important to be able to easily access it from our mobile apps. Today, we are excited to introduce a new library to help you create cloud-connected apps with Microsoft Azure aptly-named App Service Helpers.

Introducing App Service Helpers

App Service Helpers makes it as easy as possible to add a backend to your mobile application. In just four lines of code, you can create a cloud-connected mobile app with online/offline synchronization and automatic conflict handling, so that your app continues to function even if the user loses network connectivity. App Service Helpers also comes with a preconfigured Xamarin.Forms ViewModel, so that you can bind directly to your data without having to write any additional code.

Create a Cloud-Connected App in 10 Minutes

Even if you don’t have any experience with backend development, Azure and Azure App Service Helpers makes it super easy to get started!

1. Create an Azure Mobile App

There are many ways to create a backend with Azure, but the quickest way to get started is to use the Mobile Apps Quickstart template, which will create a no-code Azure Easy Tables backend for us with preconfigured data storage in under five minutes. Easy Tables is a no-code backened, similar to Parse, that allows us to add basic data storage capabilities to our apps. On the Mobile Apps Quickstart page, Click the “Create Web App” button. Once the Azure Portal loads, enter a name, resource group name, and select an App Service Plan. Next, click “Create”. This will spin up a preconfigured no-code backend for us in just a few minutes. Once the backend deploys, visit the “Settings” for the Azure Mobile App, click “Easy Tables”, and you can see there is a sample todoitem table added for you. To add new Tables, follow the “Adding a New Table” section from our blog post on getting started with Easy Tables.

Awesome! Now that we have a backend spun up in just a few minutes with some data, let’s pull down that data in our mobile apps with App Service Helpers!

2. Add App Service Helpers

Configuring data access in your mobile apps with App Service Helpers is easy. Simply add the App Service Helpers NuGet, initialize the library, pass in your Azure mobile app’s URL, register a data model as a table, and finalize the schema, as seen below:

using AppServiceHelpers;

// 1. Create a new EasyMobileServiceClient.
var client = EasyMobileServiceClient.Create();

// 2. Initialize the library with the URL of the Azure Mobile App you created in Step #1.
// Example: http://appservicehelpers.azurewebsites.net
client.Initialize("{Your_Mobile_App_Backend_Url_Here");

// 3. Register a model with the EasyMobileServiceClient to create a table.
client.RegisterTable();

// 4. Finalize the schema for our database. All table registrations must be done before this step.
client.FinalizeSchema();

The Azure Mobile Client SDK requires that we call a few additional methods to perform some setup, depending on the platform. For iOS and Android, add the following line of code to your AppDelegate class on iOS, and your MainActivity on Android:

Microsoft.WindowsAzure.MobileServices.CurrentPlatform.Init ();

#if __iOS__
SQLitePCL.CurrentPlatform.Init();
#endif

That’s it! Only four lines of code, and App Service Helpers will create a local SQLite backing store and handle online/offline data synchronization for you.

3. Subclass App Service Helpers’ View Model

App Service Helpers for Xamarin.Forms includes a preconfigured view model that handles all communication with the EasyMobileServiceClient to help you get started fast. Add the App Service Helpers for Xamarin.Forms NuGet and subclass the BaseAzureViewModel:

using AppServiceHelpers.Forms

public class TodoItemsViewModel : BaseFormsViewModel
{
        public TodoItemsViewModel(IEasyMobileServiceClient client) : base (client) { }
}

BaseAzureViewModel has an Items property, which is an ObservableCollection that is automatically configured based on the model passed into the base class. For CRUD operations, the view model also provides asynchronous methods for adding, updating, and removing items from the table.

4. Data Bind to the View Model

We can now bind directly to the view model created in Step #3, including to a RefreshCommand to automatically handle pull-to-refresh from our table for us.

    

    
        
            
        
    

There you have it! In just ten minutes, we created a cloud-connected app that runs on iOS, Android, and Windows 10, that automatically manages online/offline synchronizations, conflict handling, and our cloud ViewModels on our behalf.

Download App Service Helpers Today

App Service Helpers is available for download from NuGet, and the complete source code is available on GitHub. For a look at App Service Helpers in action, check out Bait News, an iOS app built with Xamarin and App Service Helpers. If you have any suggestions, issues, or feedback, we would love to hear from you on Twitter @pierceboggan or @MikeCodesDotNet, or on GitHub. To learn more about what Azure has to offer mobile developers, check out the latest episode of the Xamarin Podcast, where we share our experiences building cloud-connected mobile apps with Microsoft Azure.

0 comments

Discussion is closed.

Feedback usabilla icon