Create an Apache Cordova app

In this article

Overview

This tutorial shows you how to add a cloud-based backend service to an Apache Cordova mobile app by using
an Azure mobile app backend. You create both a new mobile app backend and a simple Todo list Apache Cordova
app that stores app data in Azure.

Completing this tutorial is a prerequisite for all other Apache Cordova tutorials about using the Mobile
Apps feature in Azure App Service.

Prerequisites

You may also bypass Visual Studio and use the Apache Cordova command line directly. Using the command line
is useful when completing the tutorial on a Mac computer. Compiling Apache Cordova client applications using
the command line is not covered by this tutorial.

{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.

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:

Click on the Application settings tab.

Click on [+] New connection string.

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

Type Name as MS_TableConnectionString

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

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

Download and run the Apache Cordova app

Navigate to the solution file in the client project (.sln) and open it using Visual Studio.

In Visual Studio, choose the solution platform (Android, iOS, or Windows) from the drop-down next to the start arrow. Select a specific deployment device or emulator by clicking the drop-down on the green arrow. You can use the default Android platform and Ripple emulator. More advanced tutorials
(for example, push notifications) require you to select a supported device or emulator.

Open the file ToDoActivity.java in this folder - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. The application name is ZUMOAPPNAME.

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.

Go to the index.js file in ZUMOAPPNAME/www/js/index.js and in onDeviceReady() method, replace ZUMOAPPURL parameter with public endpoint above.

To build and run your Cordova app, press F5 or click the green arrow. If you see a security dialog in the emulator requesting access to the network, accept it.

After the app is started on the device or emulator, type meaningful text in Enter new text, such as Complete the tutorial and then click the Add button.

The backend inserts data from the request into the TodoItem table in the SQL Database, and returns information about the newly stored items back to the mobile app. The mobile app displays this data in the list.