Back to blog home page

Perfect Recipe for Building Mobile Apps with Ionic and a Backend

Posted by on Apr 21, 2015

Today many AngularJS developers are using Ionic to build the user interface for their mobile apps.  AngularJS provides the app structure.  But these mobile apps still need a backend.  In this blog we’ll give you the recipe you need to build an Ionic mobile app with Backand’s Backend as a Service (BaaS). Review working demo.

What is Ionic?

The Ionic framework is a mobile programming framework for constructing hybrid mobile apps. Hybrid mobile apps use a web technology (HTML, JS, CSS) to build cross-platform mobile apps (iOS, Android).  Ionic is built on top of the Cordova hybrid app technology.

The major advantage of using Ionic over Cordova itself or its commercial version PhoneGap is that it provides a plethora of mobile user interface templates both for the entire structure of the app (side menu, tabs) and for common parts (navigation top bar).

Ionic is built using the well known AngularJS web MVC framework.  Hence, developing Ionic apps is done at a higher level of abstraction than using plain HTML and jQuery. To facilitate working with the mobile device APIs in the AngularJS way, Ionic developed ngCordova, a set of AngularJS components for interacting with the various mobile device capabilities (like taking pictures).  Ionic also provides a set of convenient command line tools for building and running apps.

What is Backand?

Backand allowing AngularJS developers to focus solely on their apps, Backand removes all of the server side and hosting hassles.

The Perfect Recipe for Building Mobile Apps

In this blog we’ll provide you with the recipe you need to use the Ionic template for a mobile app with a side menu.

Backand

Create an app in Backand using the free database feature. For this example we will demonstrate simple ‘playlists’ app with 3 tables: users, playlists and songs.
You can use the following JSON mode:

Ionic

Now create your mobile app, naming it ‘PlaylistsApp’, with the Ionic command-line tools.

JS Libraries

Your Ionic app has a ‘www’ folder which is a single page application (SPA) built with AngularJS.  You will need to include the Backand libraries in your application. Either download them or use bower to obtain them. Then, copy them into your ‘index.html’.

* angularbknd-sdk, install with bower using:

* Include in your ‘index.html’:

Authorization

Backand uses authorization headers in HTTP requests. The token for authorization is obtained upon sign in to Backand and is then stored using cookies via ‘ngCookies’. The Backand sdk adds authorization headers to each HTTP request using an ‘$http’ interceptor.

In your main ‘js’ file, ‘app.js’ requires ‘backand’:

And in your app ‘config’ add:

Defining the interceptor as:

Sign In

In your controllers module require ‘Backand’ and ‘ngCookies’:

In your login controller require ‘Backand’:

To perform the login call, remember that ‘playlists’ is our Backand database name:

CRUD

Now you will need to define a service to make the database operations.  In your services module require ‘backand’:

Define a ‘DatabaseService’, require ‘Backand’:

Using Backand Data

In your controller, require ‘DatabaseService’, and make calls like:

Now you can add more Tables and build more views by repeating the above steps. You can also add server side code or send emails in the Backand cloud service under the Action tab.

To review in Github: ionic demo.

Sign up and start creating your app today.