Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Started With Azure App Service: Mobile Apps

DZone's Guide to

Getting Started With Azure App Service: Mobile Apps

The cloud can be your salvation for mobile app development. Take a look at how Azure Mobile App Service can get your backend running no matter what platform you choose.

· Cloud Zone
Free Resource

Linkerd, the open source service mesh for cloud native applications. Get the complete guide to using Linkerd and Kubernetes to build scalable, resilient applications.

Earlier, apps were transforming into the mobile realm, but now, they are going forward into the cloud. Now think, what would happen if this transformation leveraged the power of Microsoft's public cloud, Azure?

This article provides a quick and smart high-level overview of Microsoft Azure Mobile Apps service with a practical example of how to start with creating an app in Azure Mobile Services, along with performing backend processes for different platforms.

For novice cloud developers, aspiring cloud architects, pre-sales consultants, and all other IT professionals associated with the cloud computing, especially with Microsoft Azure, this tutorial will explain the importance and capabilities of Microsoft Azure Mobile Apps.

Quick High-Level Overview

As defined, "Azure App Service is a fully managed "Platform as a Service" (PaaS) offering for professional developers that bring a rich set of capabilities to web, mobile, and integration scenarios."

Mobile apps in Azure App Service have at their disposal a highly scalable and globally available mobile application development platform for enterprise developers and system integrators. Its capabilities for building native and cross-platform apps seamlessly get connected to your enterprise systems to build offline-ready apps with data sync and super-quick push notifications to millions. That makes Azure Mobile App great choice to go with.

It's MIT licensed, open-source, simple, and easy to integrate. Client SDKs cover native development (iOS, Android and Windows), cross-platform development (Xamarin for iOS and Android, Xamarin Forms) and hybrid application development (Apache Cordova), to make it the best choice for developers, across the platforms.

Prerequisites

For creating an app and setting up the back-end process, all we need is Microsoft Azure Account. If not, create your free account by clicking here.

Once an app is created, further development tools depend on the platform we go with. We'll go through all the available platforms and tools in this article.

Let’s Start

Go to the Microsoft Azure portal and login with your Azure account credentials.

Click ‘+’ sign => Web + Mobile => Mobile App.
azure

A blade with following details will appear. 

  • App Name: Enter a unique name for your Mobile App. This name is unique across Azure.
  • Subscription: Your subscription for Azure services
  • Resource Group: Group of related products/services created on Azure Portal. You can select an existing resource group or create a new one.
  • App Service Plan: You can select an existing App Service Plan or create a new one.
    azure

For this article, I have entered the details below. 

Once you're done entering all the required details, click "Create."

azure

As seen in the above image, we have pinned this to our Dashboard. You can easily track the deployment process through the Dashboard. 

azure

Once you're done with deployment, you'll also get a notification.

azure

So now, it’s shown as running. Click it for diving in for details.

azure

An overview of the created mobile app can be seen here with all the essential details.

azure

Click on the Quickstart option under AppDeployment. The options available are listed as seen.
azure

To explore more, click any one of the listed options.

You can see that three steps need to be performed.

  1. Connect to Database - Required to completed the process.
  2. Create a table API -  It’s to store data in your backend. C# and Node.js can be used as backend language.
  3. Configuring Client Application:
    • Create a New App - The application here is pre-configured to work with a mobile backend. Instructions related to the tools required are also provided. This configuration and the tool details change with change depending on the platform selected.
    • Connect An Existing App - Steps to configure your backend are provided here.
      azure

Step 1: Connect to Database

This will give you an option to use a SQL database or use a data connection as storage. You can select from your existing database and storage account, or you can create a new one.

To learn more about Azure SQL database creation, I would recommend you read Azure SQL creation and connection.

http://www.c-sharpcorner.com/article/getting-started-with-azure-sql-creation-and-connection/

Here, I have selected my existing storage account, completing the step.

Step 2: Creating a Table API

http://www.c-sharpcorner.com/article/getting-started-with-azure-sql-creation-and-connection/

Here, you have two options for languages to be selected as the backend language — C# and Node.js.

For this article, let’s select Node.js as our backend Language. Check the acknowledge statement and click "CreateTodoItemtable".

Azure

Step 3: Configuration

Selecting ‘Connect An Existing App’ as an option will instruct you with all details needed for configuration, as seen in the below image. This instruction changes with the platform options being selected.

Azure

Now, selecting "Create a New App" as an option will display details of development tools required for your pre-configured app to work with the mobile backend.

Again, this changes with the platform selected, as shown below.

For iOS

For iOS (Objective-C) and iOS (Swift) on a Mac, you'll need Xcode.

Azure

For Android

On a Mac or Windows PC, you'll need Android Studio.

Azure

For Windows C#: Universal Windows Platform

On a Windows PC, you'll need Visual Studio 2015.
Azure

For Windows 8.1: C#

Again, you're looking at Visual Studio 2015.

Azure

For Xamarin.Android, Xamarin.iOS, and Xamarin.Forms

On a Windows PC, as stated, you'll need Visual Studio 2015, and on a Mac or Windows PC, you night also need Xamarin for Windows.

Azure

For Cordova

Click on Download and follow the instructions to get it installed and working.

Azure

Now, click on another option under the App Deployment section, i.e. Deployment options.

You can select any options listed in the Source blade as a source of files to be deployed for a mobile app.

Azure

For this article, we'll be selecting GitHub as a source.

I'd recommend you go through how to deploy files to an app using GitHub. Click OK, and you are done!

Azure

For a quick glance at your app status, URL, its mode, IP addresses, and FTP-related details along with diagnostics logs, go to Properties, as seen below.

Azure

Conclusion

Azure Mobile App is simply awesome to work with to make engaged enterprise applications. And it’s really super easy to start working with it. So if it’s Android, UWP, or Windows, you can seamlessly leverage features of Azure Mobile App in your application.

We'll be learning more about mobile apps in upcoming articles. Stay tuned!

I hope you enjoyed this tutorial. If you have any questions or any interesting use cases or suggestion, please comment below. 

Knowledge grows by sharing! Don't forget to share this article. If it has helped you, it will also help others! 

Thank you! Happy azure coding!

Linkerd, the open source service mesh for cloud native applications. Get the complete guide to using Linkerd and Kubernetes to build scalable, resilient applications.

Topics:
cloud ,azure app service ,azure mobile services ,mobile app development

Published at DZone with permission of Kasam Shaikh. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}