How to create an Ionic App with Jexia Part 1
Nande Konst, Friday, April 8, 2016

Ionic is a popular framework to build hybrid apps. And with reason. It’s incredibly easy and fast to build cross platform html/css/javascript apps. Ionic uses AngularJS and is build on top of Cordova, a techonology which helps you access native device functionality from Javascript to help you build applications cross platform. In my opinion, Ionic is great to create a quick prototype or to speed up your development when you develop data-driven apps. Since I was curious if it was easy to connect an Ionic app to the Jexia platform, I made a simple Ionic app which gets it data from Jexia. I would like to share my findings by demonstrating how to set up an Ionic app and connect it to the Jexia platform.

We are going to build an app that informs you when a new blog article is published on the Jexia website. In this tutorial I’ll walk you through the installation of Cordova and Ionic, show how to use the Jexia javascript SDK to authenticate and how to get the data from the Jexia platform. Then, in part 2 of this tutorial, I will show you how to work with local notifications, using Jexia’s real time functionality so our app will inform us when a new blogpost is published. Enough talking, let’s start building an Ionic App!

If you are not already running Ionic than go to the Ionic Documentation to install Ionic correctly.

Generate a new Ionic project

Now you have Ionic installed, we are going to create a new blank Ionic app. Go to your favorite commandline tool and use the following command:

$ ionic start nameofyourapp

This will set up the structure of the application directory. Use the following commands to add the IOS and the Android platform so you can deploy your app for the Android and Ios platform later on.

For Ios:

$ ionic platform add ios

 

And for Android:

$ ionic platform add android

 

With that all set up we can change the name of our app in the config. Open the config.xml and change the name of your app. I called mine BlogFeed, but of course you can choose any name you want.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.blogfeed618667" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 <name>BlogFeed</name>
 <description>
 An Ionic Framework and Cordova project.
 </description>
 <author email="you@example.com" href="http://example.com.com/">
 Your Name Here
 </author>
 <content src="index.html"/>
 <access origin="*"/>
 <preference name="webviewbounce" value="false"/>
 <preference name="UIWebViewBounce" value="false"/>
 <preference name="DisallowOverscroll" value="true"/>
 <preference name="android-minSdkVersion" value="16"/>
 <preference name="BackupWebStorage" value="none"/>
 <feature name="StatusBar">
 <param name="ios-package" value="CDVStatusBar" onload="true"/>
 </feature>
</widget>

Since we will start from scratch, we have some cleaning up to do first. Make sure you delete everything that is in the index.html and in www/js/app.js

Setup the index.html

Start out with creating an html structure in the index.html page and connect to the ionic libraries and stylesheets. Open your index.html file:

Include the Ionic libraries in your head section:

<!doctype html>
<html lang="en">

 <head>
 <meta charset="UTF-8">
 <title>Jexia Blog Feed</title>
 
 <!--Ionic Libs -->
 <link rel="stylesheet" href="lib/ionic/css/ionic.css">
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 
 </head>

 

 Include the stylesheet and the javascript your app will use below the Ionic Libs

<!doctype html>
<html lang="en">

 <head>
 <meta charset="UTF-8">
 <title>Jexia Blog Feed</title>
 
 <!--Ionic Libs -->
 <link rel="stylesheet" href="lib/ionic/css/ionic.css">
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 
 <!-- My App -->
 <link rel="stylesheet" href="css/style.css">
 <script src="js/app.js"></script>

 </head>

With our structure set up, the first thing we want to do is create a header bar. To do this we can use ionic’s Angular directive. The directive is <ion-header-bar></ion-header-bar>. To determine the color we can use one of Ionics css classes.

Associate the app to Angularjs

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Jexia Blog Feed</title>
		
		<!--Ionic Libs -->
		<link rel="stylesheet" href="lib/ionic/css/ionic.css">
		<script src="lib/ionic/js/ionic.bundle.js"></script>
		
		<!-- My App -->
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js"></script>

		<script src="cordova.js"></script>
	</head>

	<body>
	
		<ion-header-bar class="bar-energized">
			<h1 class="title">Jexia Blog Feed</h1>
			
			</button>
		</ion-header-bar>

At this moment, the Angular directives we used will not yet work because we haven’t associated our app with Angular yet. So let’s first do that.

Go to your app.js file and create an Angular Module.

var App = angular.module("BlogFeed", ["ionic"]);

Now we need to create a controller to bind our data. First we give the controller a name “AppCtrl”, than we inject the $scope variable, and we pass in a $log variable to log our output in case something goes wrong. The last parameter is the function name, which we will create later.

App.controller("AppCtrl", ["$scope", "$log", Appctrl”]);

Now let’s associate Angular with our app. Go back to your index.html file. We associate our app by using data-ng-app = “Appname”  in our <html> tag.

<!doctype html>
<html lang="en" data-ng-app="BlogFeed">

	<head>
		<meta charset="UTF-8">
		<title>Jexia Blog Feed</title>
		
		<!--Ionic Libs -->
		<link rel="stylesheet" href="lib/ionic/css/ionic.css">
		<script src="lib/ionic/js/ionic.bundle.js"></script>
		
		<!-- My App -->
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js"></script>

	</head>

Next we have to bind the controller. We will do this in the <body> tag by using data-ng-controller= the name of our controller.

<body data-ng-controller="AppCtrl">
	
		<ion-header-bar class="bar-energized">
			<h1 class="title">Jexia Blog Feed</h1>
			
		</ion-header-bar>

If we load our index.html file in our browser, you should see something like this:

ionic_app_1

Add a refresh button

Let’s add a refresh button to load the new posts. Ionic comes with some nice icons that we can use.

ion-refresh

To use them we only have to use the class name. Let’s first add a button that will use the icon.

<body data-ng-controller="AppCtrl">
	
		<ion-header-bar class="bar-energized">
			<h1 class="title">Jexia Blog Feed</h1>
			<button class="button">
				<i class="icon ion-refresh"></i>
			</button>
		</ion-header-bar>

 

Use the following class to use the icon

<i class="icon ion-refresh"></i>

Since we want the button to do something when we click it, so we add data-ng-click. We bind a function to it that we call refresh()

<body data-ng-controller="AppCtrl">
	
		<ion-header-bar class="bar-energized">
			<h1 class="title">Jexia Blog Feed</h1>
			<button class="button" data-ng-click="refresh()">
				<i class="icon ion-refresh"></i>
			</button>
		</ion-header-bar>

Let’s go back to our app.js and create the function. We will create the function in our controller.

We now create a function that we call AppCtrl which will, for now, display an alert when the button is clicked.

function AppCtrl ($scope, $log){
	$scope.refresh = function(){
		Alert("button clicked");
	}

}

Listcards to display the items

Later, when we load our blogposts into the app from Jexia we will come back to this function. First we need to create a container to display our blogposts. Ionic has a very nice component to display a blogpost called listcard:

listcard

In the body we can create a card using the html shown above:

<ion-content>
   <div class="list-card">
	<div class="item item-avatar-left">
		<img src="" alt="">
		<h2>Author name</h2>
		<p>Date</p>
	</div>
	<div class="item item-body">
		<h1>Title of the blogpost</h1>
                <p>The blogpost content</p>
	</div>

   </div>
</ion-content>

When you load your index.html in your browser, you will now see something like this:

ionic_app_2

Create a service

Now it’s time to retrieve our blogposts. The data will be stored on the Jexia Platform. To pull our data we are going to create an Angular service in our app.js. Let’s create the  service that’s going to provide our app with the data from Jexia.

var App = angular.module("BlogFeed", ["ionic"]);

App.controller("AppCtrl", ["$scope","getData", "$log", AppCtrl]);

App.service("getData", function($http, $log){

});

Next to the name of the service, which I called getData, we pass in the http variable and again the log variable. The service will get our data from Jexia using the Jexia Javascript SDK. But first it’s time to go to our Jexia dashboard and create a dataApp with a dataset to store our data in.

Before we create the getData service we need to create a data app and a dataset with the required fields in Jexia that is going to hold our data. In order to do this you have to create a free account at Jexia

In Jexia I first created a data app and I added a dataset to it. My dataset holds the following fields:

ionic_dataset_posts

In a later stadium you might want to show also blogarticles from other websites. You don’t want to fill out a field for this in every post. With Jexia you can create relations between datasets that relates them in a “sql-like” way. In order to do this we are going to create a new dataset in Jexia called website. We add the fields website id and website name to the dataset.

dataset_website

Next we head over to the relations tab to make a relationship between the two datasets. One website can have many blogposts but one blogpost is only written by one website. In Jexia we can create this relation by dragging and dropping a line between the datasets specifying which side is the one and which side is the many. It’s as simple as that!

relations_view

Now when we add a post we only need to add the related website once and for each future blogpost related to that website we can choose the website from our website dataset. Jexia now adds an additional field rel_website to the post dataset that we can use in our application.

Post data using REST client

For this tutorial I posted my data manually to Jexia using the Jexia REST client. Note that the field author needs to get another JSON with author id, name and avatar url defined.

restclientexample

Now I can view my inserted data using the dataviewer:

jexia_dataviewer

The next step is to download and install the Jexia Javascript SDK. This Javascript SDK authenticates automatically and makes it easy to interact with the data.

Download and install the Jexia Javascript SDK

Download and install the SDK. You will find a detailed instruction how to install it in the readme.md.

Now copy the file jexia-sdk-js to the www/js folder and go to your index.html to link to the sdk as described below.

<!doctype html>
<html lang="en" data-ng-app="BlogFeed">

	<head>
		<meta charset="UTF-8">
		<title>Jexia Blog Feed</title>
		
		<!--Ionic Libs -->
		<link rel="stylesheet" href="lib/ionic/css/ionic.css">
		<script src="lib/ionic/js/ionic.bundle.js"></script>
		
		<!-- My App -->
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js"></script>
		<script src="js/jexia-sdk-js/lib/browser/index.min.js"></script>

		<script src="cordova.js"></script>
	</head>

 

Authenticate with the SDK

Now it’s very easy to authenticate our app and make a connection to our data using the Jexia SDK. Let’s get back to our getData service. First we will initiate the Jexia Client, and then we will create a function that will return our posts.

App.service("getData", function ($http, $log) {


  var JexiaClient = window.jexiaClientBrowser.JexiaClient;

  this.getBlog = function () {

    var client;

        return client = new JexiaClient({
        appId: '97bf9520-e9d1-11e5-9c1d-337c49e0a8d3',
        appKey: '4520c79f162cdaa8bc2f8367d7dbffec',
        appSecret: '7acf5d40cfd3ebd30e7323b4185c950284f15dd4ec7c163b'
      }).then(function (app) {
        // you can start interacting with your app
        var posts = app.dataset('posts');

        posts.subscribe("*", function (message) {
        //this is for part II
        });

        return posts.list().then(function (posts) {
          //posts array
          return posts;
        });

     });

    } 
 
       
  }

})
   

 

Now we can get our data without any problems from Jexia, it’s time to let our app show the data on the screen. In order to do so, the first thing we need to do is hook our getData service to the controller by adding it as a dependency.

Inject the service into the controller

We inject the service into the controller by adding it as a dependency so we can use the functionality when we click the refresh button.

App.controller("AppCtrl", ["$scope", "getData", function ($scope, getData) {

  $scope.refresh = function () {

    getData.getBlog().then(function (data) {
      $scope.posts = data;
         $scope.$broadcast("scroll.refreshComplete");

    });


  }

  $scope.refresh();


}]);

Don’t forget to pass in getData as a parameter. Now we go back to our index.html and attach the function to our refresh button with data-ng-click.

<ion-header-bar class="bar-energized">
	<h1 class="title">Jexia Blog Feed</h1>
	   <button class="button" data-ng-click="refresh()">
		<i class="icon ion-refresh"></i>
           </button>
</ion-header-bar>

 

Rendering the data

Now lets get back to our index.html to render the data. For this we use:

<div class="card list" data-ng-repeat="p in posts">

Posts refers to our posts array in the controller. No we can bind our data to the HTML using Angular expressions. To get to the website that belongs to our blogpost we use the field rel_website that was automatically added by Jexia when we made the relation between the dataset.

		<ion-content>
			<ion-refresher on-refresh="refresh()"></ion-refresher>
			<div data-ng-show="!posts.length">
				<center><h3>Pull to refresh</h3></center>
			</div>
			<div class="card list" data-ng-repeat="p in posts">
				<div class="item item-avatar-left">
					<img data-ng-src="{{p.author.avatar_url}}" alt="">
					<h2>{{p.author.name}}</h2>
					<p>{{p.date}}</p>
                                        <p>{{p.rel_website.sitename}}</p>
				</div>
				<div class="item item-body">
					<h1>{{p.title}}</h1>
					<div data-ng-bind-html="p.content"></div>

				
			</div>
		
		</ion-content>

Our app is now finished. It loads the data from Jexia into the Ionic elements showing us a nice list of blogposts with the avatars of the authors.

ionic_end_result

This is it for now. In part 2 of this tutorial we will integrate a local notification system that informs you when a new blog post is posted using Jexia’s Real Time Channels.

If you want to see an overview of all the code please check out the project on Github. I’t there to download it, use it and learn from it.

Tags: ,

Categorised in: ,

This post was written by Nande Konst

2 Comments

  • Jhony Grillet says:

    Awesome, Nande!!! Sincerely, i didn’t know nothing about the Jexia SDK (guess that i have my blog abandoned). I’m on it, thanks for the post and for the platform.
    BTW, i’m on a project that involves mobile development and, of course, we will use Jexia!!!
    Regards from Venezuela.

    • Nande Sophia Konst says:

      Thanks Johny, yes the SDK is a very handy tool. Looking forward to hear what kind of project you are working on and for what purposes you are using Jexia. Regards from The Netherlands

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.