A short initial exploration of the new web client from Ionic

in «Technology / JS»
 by Kirill Gusyatin

Expert help

Got a technically challenging project? Ekreative’s not just a name, creative problem solving’s our forté.

Book a consultation

Ionic’s new Web Client

I want to tell you about the new Web Client from Ionic framework. I got the update message from their team and decided to explore it for myself. I faced a few little problems as I did it, so I’m writing this post to tell you about those problems and about the solutions I found for them.

What it does

The new Web Client is a service module which seems to offer a lot, as their update blog article points out, it has “future-proofed ECMAScript 6 support and no dependencies”. It makes it very easy to manipulate previously difficult things such as receive and register push services for push notifications (now you can use just one js-code for iOS and Android at the same time; with the Ionic team planning updates for all other platforms in future), deploy and analytics. On the official Ionic blog linked to above you can find out about all these new features. I just want to make some quick observations. Okay, let’s start!

First of all we need to update our Ionic (or install it):

$ npm install -g ionic

or run it with sudo if you you have no permissions.

If you need to install Ionic SDK this link should be helpful:
http://ionicframework.com/getting-started/

Let’s create a new Ionic app:

$ ionic start ionic-app-test
$ cd ionic-app-test

It’s ready, so we can serve it in the browser (I recommend Chrome):

$ ionic serve

Now sign up (or register) at ionic.io.
Now we need to add the platform web client and assign our app:

$ ionic add ionic-platform-web-client
$ ionic io init

Now we can see that on the “My apps” page we have our app! Also we have an App ID and an API Key. Now, we’re ready to start adding in the Ionic.io services, like Push, Deploy, and Analytics to the app.

Add this plugin to see easy usage of the ionic.io:

$ ionic plugin add phonegap-plugin-push

If you want to test push notifications in a browser or emulator you need to run the command:

$ ionic config set dev_push true

If you want to run on a real device, If you want to run on a real device set it to ‘false’.

I tested it on Android

Now we need to write some push code in the $ionicPlatform.ready() function:

.run(function($ionicPlatform) {
 $ionicPlatform.ready(function() {
 Ionic.io();

var push = new Ionic.Push({
“debug”: true
}); push.register(function(token) {
console.log(“Device token:”, token.token);
});
});
})

And use token.token for Push Notifications from ionic.io.

Issues I encountered

Over all, the web client is very easy to use and consistent across different platforms, but I faced a few problems relating to versions of SDK. Hopefully you won’t face these problems, but if you do – don’t be afraid, stackoverflow knows how to help you. As for me I got an Error during app building: my builder (gradle) wanted a new android.support library. I tried a lot of solutions but the best one was to update it via the Android Studio.

Conclusion

In conclusion, the Ionic Team wants to make code easier and faster to write for developers and concentrate them on specific tasks: not on preparing their code for use with different platforms. Due to the new Web Client a lot of improvements are now live. Here’s a short list (again from the official blog):
– Streamlined Installation. There’s only a single module to install, no matter what service you’re using.
– A new Push class that integrates with the latest phonegap-plugin-push and provides a consistent interface between iOS and Android.
– A new User model that puts you in control of your users and even gives you the ability to store your own custom data.

Technology