{"id":26436,"date":"2016-06-30T09:52:32","date_gmt":"2016-06-30T16:52:32","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=26436"},"modified":"2019-04-04T09:04:35","modified_gmt":"2019-04-04T16:04:35","slug":"add-a-backend-to-your-app-in-10-minutes","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/add-a-backend-to-your-app-in-10-minutes\/","title":{"rendered":"Add a Backend to Your App in 10 Minutes"},"content":{"rendered":"<p>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&#8217;ve built a backend for storing data, authenticating users, or sending push notifications, it&#8217;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 <a href=\"https:\/\/www.nuget.org\/packages\/AppService.Helpers\/\">App Service Helpers<\/a>.<\/p>\n<h2>Introducing App Service Helpers<\/h2>\n<p><a href=\"https:\/\/github.com\/MikeCodesDotNet\/App-Service-Helpers\">App Service Helpers<\/a> makes it as easy as possible to add a backend to your mobile application. In just <em>four lines of code<\/em>, 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 <code>ViewModel<\/code>, so that you can bind directly to your data without having to write any additional code.<\/p>\n<p><center><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/ZmdRGlxooB8\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/p>\n<h3>Create a Cloud-Connected App in 10 Minutes<\/h3>\n<p>Even if you don&#8217;t have any experience with backend development, Azure and Azure App Service Helpers makes it super easy to get started!<\/p>\n<h4><a name=\"create-mobile-app\" style=\"color: #4e5758;text-decoration: none\">1. Create an Azure Mobile App<\/a><\/h4>\n<p>There are many ways to create a backend with Azure, but the quickest way to get started is to use the <a href=\"http:\/\/azure.microsoft.com\/en\/marketplace\/partners\/Microsoft\/TryMobileAppsNode\/?utm_source=mkt-\">Mobile Apps Quickstart template<\/a>, 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 <a href=\"http:\/\/azure.microsoft.com\/en\/marketplace\/partners\/Microsoft\/TryMobileAppsNode\/?utm_source=mkt-\">Mobile Apps Quickstart page<\/a>, Click the &#8220;Create Web App&#8221; button. Once the Azure Portal loads, enter a name, resource group name, and select an App Service Plan. Next, click &#8220;Create&#8221;. This will spin up a preconfigured no-code backend for us in just a few minutes. Once the backend deploys, visit the &#8220;Settings&#8221; for the Azure Mobile App, click &#8220;Easy Tables&#8221;, and you can see there is a sample <code>todoitem<\/code> table added for you. To add new Tables, follow the &#8220;Adding a New Table&#8221; section from our blog post on <a href=\"https:\/\/blog.xamarin.com\/getting-started-azure-mobile-apps-easy-tables\/\">getting started with Easy Tables<\/a>.<\/p>\n<p>Awesome! Now that we have a backend spun up in just a few minutes with some data, let&#8217;s pull down that data in our mobile apps with App Service Helpers!<\/p>\n<h4>2. Add App Service Helpers<\/h4>\n<p>Configuring data access in your mobile apps with App Service Helpers is easy. Simply <a href=\"https:\/\/www.nuget.org\/packages\/AppService.Helpers\/\">add the App Service Helpers NuGet<\/a>, initialize the library, pass in your Azure mobile app&#8217;s URL, register a data model as a table, and finalize the schema, as seen below:<\/p>\n<pre class=\"lang:csharp decode:true\">using AppServiceHelpers;\r\n\r\n\/\/ 1. Create a new EasyMobileServiceClient.\r\nvar client = EasyMobileServiceClient.Create();\r\n\r\n\/\/ 2. Initialize the library with the URL of the Azure Mobile App you created in Step #1.\r\n\/\/ Example: http:\/\/appservicehelpers.azurewebsites.net\r\nclient.Initialize(\"{Your_Mobile_App_Backend_Url_Here\");\r\n\r\n\/\/ 3. Register a model with the EasyMobileServiceClient to create a table.\r\nclient.RegisterTable();\r\n\r\n\/\/ 4. Finalize the schema for our database. All table registrations must be done before this step.\r\nclient.FinalizeSchema();\r\n<\/pre>\n<p>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 <code>AppDelegate<\/code> class on iOS, and your <code>MainActivity<\/code> on Android:<\/p>\n<pre class=\"lang:csharp decode:true\">\r\nMicrosoft.WindowsAzure.MobileServices.CurrentPlatform.Init ();\r\n\r\n#if __iOS__\r\nSQLitePCL.CurrentPlatform.Init();\r\n#endif\r\n<\/pre>\n<p>That&#8217;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.<\/p>\n<h4>3. Subclass App Service Helpers&#8217; View Model<\/h4>\n<p>App Service Helpers for Xamarin.Forms includes a preconfigured view model that handles all communication with the <code>EasyMobileServiceClient<\/code> to help you get started fast. Add the <a href=\"https:\/\/www.nuget.org\/packages\/AppService.Helpers.Forms\/\">App Service Helpers for Xamarin.Forms NuGet<\/a> and subclass the <code>BaseAzureViewModel<\/code>:<\/p>\n<pre class=\"lang:csharp decode:true\">\r\nusing AppServiceHelpers.Forms\r\n\r\npublic class TodoItemsViewModel : BaseFormsViewModel\r\n{\r\n        public TodoItemsViewModel(IEasyMobileServiceClient client) : base (client) { }\r\n}\r\n<\/pre>\n<p><code>BaseAzureViewModel<\/code> has an <code>Items<\/code> property, which is an <code>ObservableCollection<\/code> 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.<\/p>\n<h4>4. Data Bind to the View Model<\/h4>\n<p>We can now bind directly to the view model created in Step #3, including to a <code>RefreshCommand<\/code> to automatically handle pull-to-refresh from our table for us.<\/p>\n<pre class=\"lang:csharp decode:true\">    \r\n<ListView ItemsSource=\"{Binding Items}\" \r\n    IsPullToRefreshEnabled=\"True\"\r\n    IsRefreshing=\"{Binding IsBusy, Mode=OneWay\"\r\n    RefreshCommand=\"{Binding RefreshCommand}\">\r\n    <ListView.ItemTemplate>\r\n        <DataTemplate>\r\n            <SwitchCell Text=\"{Binding Text}\" IsToggled=\"{Binding Completed}\" \/>\r\n        <\/DataTemplate>\r\n    <\/ListView.ItemTemplate>\r\n<\/ListView>\r\n<\/pre>\n<p>There you have it! <strong>In just ten minutes<\/strong>, 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.<\/p>\n<h2>Download App Service Helpers Today<\/h2>\n<p>App Service Helpers is available for <a href=\"https:\/\/www.nuget.org\/packages\/AppService.Helpers\/\">download from NuGet<\/a>, and the <a href=\"https:\/\/github.com\/MikeCodesDotNet\/App-Service-Helpers\">complete source code is available on GitHub<\/a>. For a look at App Service Helpers in action, <a href=\"https:\/\/www.youtube.com\/watch?v=VwbFYLa5RZQ\">check out Bait News<\/a>, 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 <a href=\"http:\/\/twitter.com\/pierceboggan\">@pierceboggan<\/a> or <a href=\"http:\/\/twitter.com\/mikecodesdotnet\">@MikeCodesDotNet<\/a>, or on <a href=\"https:\/\/github.com\/MikeCodesDotNet\/App-Service-Helpers\/issues\">GitHub<\/a>. To learn more about what Azure has to offer mobile developers, <a href=\"https:\/\/blog.xamarin.com\/podcast-building-connected-apps-with-azure-mobile-apps\/\">check out the latest episode of the Xamarin Podcast<\/a>, where we share our experiences building cloud-connected mobile apps with Microsoft Azure.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;ve built a backend for storing data, authenticating users, [&hellip;]<\/p>\n","protected":false},"author":546,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4],"class_list":["post-26436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>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&#8217;ve built a backend for storing data, authenticating users, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/26436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=26436"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/26436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=26436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=26436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=26436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}