How to create an Ionic App with Jexia Part 1

How to create an Ionic App with Jexia Part 1

How to create an Ionic App with Jexia Part 1

Nande Konst

Nande Konst

Loves IT for the same reason every developer does: to create solutions. Have a question? Want to get in touch? Nande[at]jexia.com
Nande Konst

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!

Setting up our app in Ionic

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:

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:

 

And for 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.

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:

 

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

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

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.

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.

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.

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.

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.

 

Use the following class to use the icon

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()

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.

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:

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.

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. 

Setting up the data

 

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

Connecting our application using Jexia Javascript SDK

 

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.

 

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.

Using the data in the Application

 

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.

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.

 

Rendering the data

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

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.

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.

  • Jhony Grillet

    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

      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