Getting Started With Xamarin And Azure - Part One

Scope

The following article covers a presentation and demo done at Xamarin Dev Days in Mauritius. This article demonstrates how to get started with Azure Mobile apps and benefit the powers of the cloud in terms of Scalability, Offline Sync, and Data Analytics.

This is the first part of the series where the basics of Azure App Service are  demonstrated.

Introduction

Xamarin is a cross-platform implementations of the Common Language Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared code base, developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share the code across multiple platforms.



However, today, mobile apps can’t run stand-alone. The data needs to be stored somewhere where it can be shared and the application should be able to scale as required. This is where the cloud comes into the picture.

Azure App Service

App Service is a Platform-as-a-Service (PaaS) offering of Microsoft Azure to create web and mobile apps for any platform/any device. Azure App Service runs your apps on fully managed virtual machines (VMs), with your choice of shared VM resources or dedicated VMs.

App Service includes the web and mobile capabilities that we previously delivered separately as Azure Websites and Azure Mobile Services. It also includes new capabilities for automating business processes and hosting cloud APIs.

Creating an Azure App Service Account

1. Go to https://portal.azure.com/
2. Click on New > Web + Mobile > Mobile App.
   
   
   
   
3. Enter the App Name, Resource Group, Subscription, select pin to dashboard, and hit "Create".
   
   
   
   
4. You will be able to see the deployment progress on the top right section. This will take 2-3 minutes following which you’ll see the new service on your dashboard.
   
   
   
   
   

Examine the Quick Start Projects

Once the service is deployed, open the App Service and click on "Quick Start". This has sample projects that will help you get started with the server-side code and the client rapidly.

For this demo, click on "Quick Create" and then select "Xamarin.Forms". The Portal will then guide you through 3 steps as below.



Connect a database

1. Add a data connection.
   
   
   
   
2. Select Database.
   
   
   
   
3. Select Database Server.
   
   In this example, an existing SQL Server database shall be used.
   
   
   
   
4. The next step is to configure the connection string.
   
   
   
   
5. The new database will now be deployed and will be ready after some minutes.
   
   
   
   
   

Create the Table API

The Table API is the back-end code that will power the mobile app. Microsoft Azure App Service allows and supports 2 languages, namely, NodeJS and C#.

In this example, let’s consider the C# code.

• The sample can now be downloaded and opened with Visual Studio.
• Once you open the solution, build it to restore the NuGet packages.
• The 3 important sections to note are -
  
  
  1. The Data Object
     
     In this example, the class TodoItem represents the data object which will be used by Entity Framework to do the Object Relational Mapping.
     

     public class TodoItem: EntityData {
         public string Text {
             get;
             set;
         }
         public bool Complete {
             get;
             set;
         }
     }

  2. The Controller
     
     The Controller has all the CRUD methods that will interact with the database. The addition of a new Controller shall be demonstrated in the next article of the series.
     
     
  3. The Web.Config File
     
     The connection string to the SQL Server database, created previously, has already been added here.
     

     <add name="MS_TableConnectionString" connectionString="Data Source=(localdb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-devdaysblogService-20161116032732.mdf;Initial Catalog=aspnet-devdaysblogService-20161116032732;Integrated Security=True;MultipleActiveResultSets=True" providerName="System.Data.SqlClient" />

• Now, that the major components have been examined, we may now deploy the app to Azure App Service. Right-click on the project and click "Publish".
  
  
  1. Select Azure App Service.
     
     
     
     
  2. Select the Resource Group and click "Publish".
     
     
     
     
  3. After a few minutes, the back-end code will be deployed.
     
     
     

Consume the Back-end code from the Client

Now that the back-end codes have been deployed, we may connect it to the mobile clients. In this example, we’ll use a Xamarin.Forms project.

From the portal, click “Download” in the “CREATE A NEW APP” tab.

1. Open the application in Visual Studio 2015 and build the project to restore the NuGet packages.
   
   
2. All the codes will be in the Portable Project which will be used in Android, iOS, and Windows projects.
   
   
3. The constants.cs file contains the references to the back end mobile app service URI
   
   public static string ApplicationURL @"https://devdaysblog.azurewebsites.net";
   
   
4. The TodoItem.cs class contains the data model that will be used in the application.
   
   
5. The TodoItemManager.cs class is the class that will be used by the client to communicate with the Cloud Back-end. We’ll discuss more about this class in the next article.
   
   
6. You can now run the application
   
   
   

View the Database

1. To view the connection string, in the Azure Portal, go to “all resources” and select the Server that you have created above.
   
   
   
   Select the database and click "Show database connection strings".
   
   
   
   
   
   
2. In SQL Server Management Studio, input the Server name, Login, and Password.
   
   
   
   
3. Examine the tables
   
   As shown below, the cloud back-end automatically created the tables and all the data have been inserted.
   
   
   

Conclusion

In this article, the basics of Azure App Service were demonstrated and in 3 simple steps, the SQL Server, the Cloud Back-end, and the Client were deployed. In the next article, we’ll see how to extend this app by adding our own custom classes and logic.

References

http://blog.sohodragon.nyc/2016/07/19/49/
https://docs.microsoft.com/en-us/azure/app-service/app-service-value-prop-what-is?toc=/azure/app-service-web/toc.json