In this post, I would like to share with you How to develop a native cross platform mobile application that interacts with Azure Web service.
I. Requirement.
As an account manager, I would like to request a mobile application that allows connecting to Azure web service to add, update, delete and view user accounts remotely.
The user account information need be captured as below:
- First name: the first name of user
- Last name: the last name of user
- Account: the account of the user that can be used to login to our systems.
- Description
II. Build Azure service
1. Configuration Azure Web app and SQL Database.
- First, I will create an Azure SQL Database named AzureMobileDemo with Basic pricing tier because this is just a sample database for demonstration purpose so no need a powerful one.
- And then create new Web App + SQL named HBDMobileService in Azure with App server plan is F1 Free and lets it connect to AzureMobileDemo database that created in the previous step.
Until now, we shall have an HBDMobileServer that connecting to AzureMobileDemo SQL database on the Azure portal. The Application Settings should be shown as below. Please ensure that the connection name is DefaultConnection if not just click on the connection string and rename it. Because we will config this name into the WebApi project later on next section.
2. Develop Web API
Below are tool and libraries I’m using for this project.
- Tool: Visual Studio 2017
- Framework: .NetCore 1.1
- Libraries: EntityFrameworkCore
- Project Type: Web API
A new Web API project named AzureMobileService had been implemented as the class diagram below.
There is a UserController had been created which exposed all needed actions:
- Get all users in the database.
- Get user by primary key.
- Add new user.
- Update the existing user.
- Delete the existing user by primary.
This controller will user MobileDbContect to interact with Database. MobileDbContext is an instance of DbContext in EntityFrameWorkCore that’s using User as data model to transfer the information.
Please note that the name of connection string needs to be provided in the Startup class as below.
|
1 2 3 4 5 6 7 8 9 |
public void ConfigureServices(IServiceCollection services) { // Add framework services. services.AddDbContext<MobileDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddMvc(); } |
As I’m using code first in this project and wishing to execute the database migration automatically when applicate start in the Staging or Production environment. So, I updated the Startup.Configure method as below.
|
1 2 3 4 5 6 7 8 9 |
public async void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, MobileDbContext dbContext) { ... if (!env.IsDevelopment()) await dbContext.Database.MigrateAsync(); } |
3. Deploy AzureMobileService to Azure.
Before deploying AzureMobileService to Azure we need config the publish profile for this project. The publish setting can be downloaded from HBDMobileService as screenshot bellow.
Right click on the AzureMobileService and click on publish, select import profile and then click create profile button to import the publish profile file. After imported, the Publish configuration should be shown as bellow.
Now, click the Publish button to deploy the web service to your Azure portal. After deployed you can use Postman to verify the Web API to ensure it’s working properly.
Take note the Site URL in the screen shot above we will need it for the iPhone application on next section.
III. Build iPhone application
As the Visual studio 2017 already interested with Xamarin and able to develop a cross-flat form application that can be run on IOS, Android and Window Phone. However, if you want to build an IOS app on Window you still need to link Visual Studio with a Mac that installed XCode and Xamarin. So for simply, I will using Visual Studio for Mac to develop it instead and below is tool and libraries were used to develop this project.
- Tool: Visual Studio for Mac
- Framework: .NetCore 1.1
- Libraries: Xamarin Forms
- Project Type: Multiplatform – Connected App (Forms)
- AzureDemo: this is the main project we will implement the views and the logic of the app.
- AzureDemo.Droid: this project will port the AzureDemo to Android application.
- AzureDemo.iOS: similar with Droid project, this project will be port the AzureDemo to an iOS application.
- AzureDemo.Service: this project can be removed as we already develop the Azure service above. The reason I’m using Window to develop the Azure service because Visual Studio for Mac is still previewed version and it is not fully supported Azure deployment.
The implementation of AzureDemo as below:
- UsersPage: Display the list of users.
- UserDetailPage: Display details information of Use.
- NewUserPage: Allow to add new or Edit User information.
The screenshots on iOS
The screenshots on Android
Before running the source code you should update the AzureMobileAppUrl in App class with your Azure service url mentioned above.
|
1 2 3 4 5 6 7 8 9 |
public partial class App : Application { public static bool AzureNeedsSetup => false; public static string AzureMobileAppUrl = "[Replace your Azure Service Url here]"; public static IDictionary<string, string> LoginParameters => null; ... } |
IV. Source code
As you see in the current Web Api source code all APIs are opening for everyone without any restriction. This is bad idea that any application can access your production data. So the recommendation is using Filtering to secure your Web Api? I will post a separate topic to discusing How to secure the Web Api soon.
In these projects, I’m trying to keep the source code as simple as possible for those who want to start learning Azure and Mobile development can catch up easily.
Please feel free to comment your opinion or email to me via [email protected]