Create an iOS app

Overview

This tutorial shows how to add Azure App Service Mobile Apps, a cloud backend service, to an iOS app. The first step is to create a new mobile backend on Azure. Then, download a simple Todo list iOS sample app that stores data in Azure.

To complete this tutorial, you need a Mac and an Azure account

Create a new Azure mobile app backend

  1. Sign in to the Azure portal.

  2. Click Create a resource.

  3. In the search box, type Mobile Apps.

  4. In the results list, select Mobile App, and then select Create.

  5. Choose a unique App name. This will also be part of the domain name for your App Service.

  6. Select the Subscription for this mobile app.

  7. Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  8. Click Create. Wait a few minutes for the service to be deployed successfully before proceeding. Watch the Notifications (bell) icon in the portal header for status updates.

Create a database connection and configure the client and server project

  1. Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C) iOS (Swift) Android (Java) Xamarin.iOS Xamarin.Android Xamarin.Forms Cordova Windows (C#)

  2. Azure Mobile Apps support .NET and Node backend SDK. Depending on your app type, download the .NET or Node project for open source repository.

  3. You will have to add a database connection or connect to an existing connection. First, determine whether you’ll create a data store or use an existing one.

  4. Create a new data store : If you’re going to create a data store, use the following quickstart:

    Quickstart: Getting started with single databases in Azure SQL Database

  5. Existing data source : Follow the instructions below if you want to use an existing database connection

    1. SQL Database Connection String format - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

      {your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {port} usually 1433. {your_catalogue} Name of the database. {your_username} User name to access your database. {your_password} Password to access your database.

      Learn more about SQL Connection String format

    2. Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

      To add a connection string:

      1. Click on the Application settings tab.

      2. Click on [+] New connection string.

      3. You will need to provide Name, Value and Type for your connection string.

      4. Type Name as MS_TableConnectionString

      5. Value should be the connecting string you formed in the step before.

      6. If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

Run the iOS app

  1. Open the downloaded client project using Xcode.

  2. Go to the Azure portal and navigate to the mobile app that you created. On the Overview blade, look for the URL which is the public endpoint for your mobile app. Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  3. For Swift project, open the file ToDoTableViewController.swift in this folder - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. The application name is ZUMOAPPNAME.

  4. In viewDidLoad() method, replace ZUMOAPPURL parameter with public endpoint above.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    becomes

    let client = MSClient(applicationURLString: "https://test123.azurewebsites.net")

  5. For Objective-C project, open the file QSTodoService.m in this folder - ZUMOAPPNAME/ZUMOAPPNAME. The application name is ZUMOAPPNAME.

  6. In init method, replace ZUMOAPPURL parameter with public endpoint above.

    self.client = [MSClient clientWithApplicationURLString:@"ZUMOAPPURL"];

    becomes

    self.client = [MSClient clientWithApplicationURLString:@"https://test123.azurewebsites.net"];

  7. Press the Run button to build the project and start the app in the iOS simulator.

  8. In the app, click the plus (+) icon, type meaningful text, such as Complete the tutorial, and then click the save button. This sends a POST request to the Azure backend you deployed earlier. The backend inserts data from the request into the TodoItem SQL table, and returns information about the newly stored items back to the mobile app. The mobile app displays this data in the list.

    Quickstart app running on iOS