Building Mobile Apps

(For more resources related to this topic, see here.)

As mobile apps get closer to becoming the de-facto channel to do business on the move, more and more software vendors are providing easy to use mobile app development platforms for developers to build powerful HTML5, CSS, and JavaScript based apps. Most of these mobile app development platforms provide the ability to build native, web, and hybrid apps. There are several very feature rich and popular mobile app development toolkits available in the market today. Some of them worth mentioning are:

And there are more. The list is only a partial list of the amazing tools currently in the market for building and deploying mobile apps quickly.

The Heroku platform integrates with the ( mobile app development platform to provide a seamless app development experience. With the mobile app development platform, the process of developing a mobile app is very straightforward. You build the user interface (UI) of your app using drag-and-drop from an available palette. The palette contains a rich set of user interface controls. Create the navigation flow between the different screens of the app, and link the actions to be taken when certain events such as clicking a button. Voila! You are done. You save the app and test it there using the Test menu option. Once you are done with testing the app, you can host the app using Appery's own hosting service or the Heroku hosting service. Mobile app development was never this easy.

Introducing ( is a cloud-based mobile app development platform. With, you can build powerful mobile apps leveraging the easy to use drag-and-drop tools combined with the ability to use client side JavaScript to provide custom functionality. enables you to create real world mobile apps using built-in support for backend data stores, push notifications, server code besides plugins to consume third-party REST APIs and help you integrate with a plethora of external services. is an innovative and intuitive way to develop mobile apps for any device, be it iOS, Windows or Android. takes enterprise level data integration to the next level by exposing your enterprise data to mobile apps in a secure and straightforward way. It uses Exadel's ('s parent company) RESTExpress API to enable sharing your enterprise data with mobile apps through a REST interface.'s mobile UI development framework provides a rich toolkit to design the UI using many types of visual components required for the mobile apps including google maps, Vimeo and Youtube integration. You can build really powerful mobile apps and deploy them effortlessly using drag and drop functionality inside the app builder.

What is of particular interest to Heroku developers is's integration with mobile backend services with option to deploy on the Heroku platform with the click of a button. This is a powerful feature where in you do not need to install any software on your local machine and can build and deploy real world mobile apps on cloud based platforms such as and Heroku r.

In this section, we create a simple mobile app and deploy it on Heroku. In doing so, we will also learn:

  • How to create a mobile UI form
  • How to configure your backend services (REST or database)
  • How to integrate your UI with backend services
  • How to deploy the app to Heroku
  • How to test your mobile app

We will also review the salient features of the mobile app development platform and focus on the ease of development of these apps and how one could easily leverage web services to deploy apps and consume data from any system.


The cool thing about is that it is a cloud-based mobile app development toolkit and can be accessed from any popular web browser. To get started, create an account at and you are all set.

You can sign up for a basic starter version which provides the ability to develop 1 app per account and go all the way up to the paid Premium and Enterprise grade subscriptions.

Introducing the app builder

The app builder is a cloud based mobile application development kit that can be used to build mobile apps for any platform. The app builder consists of intuitive tooling and a rich controls palette to help developers drag and drop controls on to the device and design robust mobile apps. The app builder has the following sections:

  1. Device layout section: This section contains the mock layout of the device onto which the developer can drag-and-drop visual controls to create a user interface.
  2. Palette: Contains a rich list of visual controls like buttons, text boxes, Google Map controls and more that developers can use to build the user experience.
  3. Project explorer: This section consists of many things including project files, application level settings/configuration, available themes for the device, custom components, available CSS and JavaScript code, templates, pop-ups and one of the key elements— the available backend services.
  4. Key menu options: Save and Test for the app being designed.
  5. Page properties: This section consists of the design level properties for the page being designed. Modifying these properties changes the user interface labels or the underlying properties of the page elements.
  6. Events: This is another very important section of the app builder that contains the event to action association for the various elements of the page. For example, it can contain the action to be taken when a click event happens on a button on this page.

The following app builder screenshot highlights the various sections of the rich toolkit available for mobile app developers to build apps quickly:

Creating your first mobile app

Building a mobile app is quite straightforward using's feature rich app development platform.

  1. To get started, create an account at and login using valid credentials:

  2. Click on the Create new app link on the left section of your account page:

  3. Enter the new app name for example, herokumobile app and click on Create:

  4. Enter the name of the first/launch page of your mobile app and click on Create page:

This creates the new app and points the user to the app builder to design the start page of the new mobile app.

Creating the user interface

Use the app builder to create the different user interface screens required for the mobile app. As we entered startScreen as the starting page of the mobile app, let us use the app builder to design the first page of our mobile app:

  1. Use the Properties-Input on the right section to edit the labels and internal names of the user interface controls.

    For example:

    • Modify the Caption to My Mobile app
  2. Add input boxes for username and password fields for the registered user and new user sections of the user interface.
  3. Add Sign in and Register buttons from the palette to the design area. Like before, use the Properties-Input on the right section to edit the labels and internal names of the buttons as required.
  4. The following screenshot shows the completed user interface for the first page of our sample mobile app:

  5. Click on the Create New link on the Project Explorer section located in the left. Choose Page:

  6. Enter the name of the new page for example, Products and click on Create Page:

  7. The Products page is displayed in the app builder. Design the page as required using the preceding steps.

The user interface design of the pages required for our mobile app is complete.

Creating a database for your app

For our basic mobile app, we need to store application data for two entities:

  • Application users
  • Product information

In the following steps we demonstrate how to create a simple database and add the required tables to our application.

  • Step 1: Click on the Databases tab in the available menu
  • Step 2: Click on the Create new database link on the left section and enter the preferred database name for example, MyFirstMobileAppDB as shown in the following screenshot:

  • Step 3: Now, you can see that there are two types of collections ('s term for database tables) in the left section of the database page. These are Predefined collections (defined by default by and Collections (defined by database designer/developer).
    • Predefined collections

      The following collections (tables) are predefined by for use by the mobile app:

      • Users: This consists of the application user information.
      • Files: This consists of information about files used in the mobile app. Files can be uploaded using a "File Browser" option.
      • Devices: The Devices collection displays devices with installed apps connected to this database.

    You can add custom columns to the Users and Devices data predefined collection.

    • (Custom) collections

      The custom collections are tables defined by the database designer for use by the mobile app. You can add custom columns to these collections. adds the acl, id, created and updated columns automatically even for the custom collections (tables).

    • Click on Create new collection to create the collection/table to store products data. We will reuse the predefined Users collection to store user information for the mobile app:

  • Step 4: Enter the new custom collection/table name for example, catalogitems and click ADD.

  • Step 5: Enter the desired column names for the collection to complete the creation of collections required for this simple mobile app:

  • Step 6: The following screenshots show the two collections to be used for the mobile app – the catalogitems collection (user defined) and the Users collection (defined by

Creating services for the mobile app

Let us create some simple backend services for our mobile app now. These services will be used by our mobile app to execute certain actions when an event takes place, for example, click of a signin button.

To create the services, we will use the app builder.

  1. In the app builder, navigate to Create New | Database services option in the Project Explorer section on left:

  2. Select the database for importing services, followed by the database services and collection services to import as shown in the following screenshot and click on Import selected services:

  3. The selected services are created with just the click of a button and displayed in the Services link of the Project Explorer as shown in the following screenshot:

    You can optionally verify the request/response parameters of each of these services to make sure that they are as expected. You can achieve this by clicking on each service in the Services section of the Project Explorer and selecting the request and response tab on the right.

  4. Now, let us add the data sources for each page of the mobile app to identify the services that will be called from each page of the mobile app. To begin with, click on the first page startScreen in the Pages section on the left in the Project Explorer.

  5. Click on the Data tab in the design window. Add the two data sources required for the "startScreen" page as shown in the following screenshot:

  6. For each of the added services, edit the mapping for request and response by clicking the Edit mapping link of the login service in the Data tab as shown in the screenshot:

  7. Create the appropriate mapping in the request and response tabs (of the login service) to reflect your input/output parameters for the requests made from the app and the responses received by the app from the server. The following screenshots show an example mapping configuration for the login service. Repeat the same for the signup service as well.

  8. Response mapping:

  9. In the Data | EVENTS tab, configure the actions associated with the successful and failed execution of each of the services created. For example, for the user login service, create two actions, one for the success case and one for the failure case as shown in the screenshot:

    Note how successful execution of the service navigates the user to the next page in the app flow.

  10. Switch to the Design tab of the app builder for the startScreen page. We will now link the events like clicking of a button to the services created to handle those events. Again, click on the EVENTS tab.

  11. Click on the Add Event link to create events for each of the buttons shown in the user interface of this page. The following screenshots show the events created for the buttons on this page:

    The preceding steps shown for the startScreen page can be replicated for the other pages of the mobile app. That is left as an exercise to the user. This completes the illustration of how to create and link backend services to the events occurring in your mobile app. Let us test the app now.

Testing the mobile app

Now that we are done developing a simple mobile app using's mobile app development platform, it is time to test the app. Here is a recap of what we did. We created two screens for our app, one for registering a user or logging in and another for adding products to the inventory of a user and listing them too.

  1. To get started, click on the Test menu option inside the app builder:

  2. The mobile app is launched in the test browser. Choose the resolution, enter a valid username and password to connect to the mobile app.

  3. On successful login, you will be directed to the Products page as shown in the following screenshot. Enter a new product Item1 in the input and click on ADD:

The newly added product is added for this user and displayed on the Products page. Similarly, you can test the register user flow as well.

Deploying a mobile app to Heroku

The mobile app development platform provides you two options to host/deploy your mobile app:

  • hosting: Your app will be deployed to the servers with options to use either an or custom domain name.
  • Heroku hosting: Your app will be deployed on the Heroku cloud environment.

In this section, we look at the steps required to deploy the mobile app to the Heroku platform.

  • Step 1: Log in to your account ( by entering valid credentials.

  • Step 2: Since we have already developed the Heroku mobile app, navigate to the Hosting section for this app as shown in the following screenshot:

  • Step 3: Click on the Heroku hosting option.

  • Step 4: Sign in to your Heroku account as shown in the following screenshot:

  • Step 5: A list of existing Heroku apps available in your account will be displayed as shown in the following screenshot:

  • Step 6: Click on Add Heroku app and enter a new app name of choice as shown in the following screenshot:

  • Step 7: Your mobile app will be deployed/published to the Heroku environment with the URL The startpage is the page configured in app builder to contain the first page of the app.

  • Step 8: The startpage of your app is now available to use in the browser. As per the mobile app we developed, enter the user credentials to login to your mobile app service.

  • Step 9: As expected, the user is directed to the Products page of the mobile app.


And we are done. To summarize, we followed the preceding steps to create a simple but fairly illustrative mobile app on's powerful mobile app development platform. You can add or supercharge this application with additional features at the click of a button. Such is the beauty of the platform that you hardly need to write any code. Added to this simplicity is the fact that you can deploy your app with multiple hosting options: Heroku or hosting. We did so with Heroku and wasn't that easy!

Resources for Article:

Further resources on this subject:

You've been reading an excerpt of:

Heroku Cloud Application Development

Explore Title