Category Archives: Ionic 2

Why Ionic Devs Should Use Ionic Serve

As I pointed out here, Nic Raboy’s brilliant blog on Ionic development has been a fantastic resource for me as I have learned about Ionic and Angular.  Nic is a prolific blogger – he comes out with stuff almost daily, always good quality, relevant and useful.

Recently Nic posted a blog entitled “Why you should not use Ionic Serve for your hybrid apps”.  This was an interesting post (go and read it) and provoked a bit of discussion.

Yesterday I started developing a new Ionic 2 application and at the end of the working day I realised I had spent ALL DAY using Ionic Serve.  So I thought a very short blog post defending the tool was in order.

I think the problem with Nic’s post is that a better title for it might have been something like “Why you should be aware of Ionic Serve’s limitations” or words to that effect rather than a blunt “do not use it” message.

I have to say I love Ionic Serve.  When I start developing an app I like to get the structure right first – menus, navigation stack, data displays and so on.  For this stage of development Ionic serve is a priceless timesaver.  It’s quick.  It’s easy.  De-bugging is easy.

I tend to move on from using Ionic Serve to testing my application on simulators and devices only when this stage of development is complete.  Usually this is when I can no longer rely on Ionic Serve, when I need to use a plugin that requires the presence of the device for example.

So my message would be use ionic serve (especially at the early stages of developing an app) but be aware of its limitations (all of which are pointed out in Nic’s blog).

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

IBM Bluemix Cloudant DB Setup

I’m working on an Ionic 2 app right now that has an IBM Bluemix Cloudant back-end.  I’m using PouchDB in my Ionic 2 app to synchronise the data from the remote server to my app.

I couldn’t work out why I was getting the following error from PouchDB when I tried to connect to my remote database:

EXCEPTION: {“status”:500,”name”:”unknown_error”,”message”:”Database encountered an unknown error”}

And then I remembered that in the Bluemix Cloudant dashboard I needed to enable CORS (which in my case was actually enabled by default) and also set the Origin Domains to “All Domains”.  In my case the latter option wasn’t set.

 

cors

I may write about integrating Ionic 2, PouchDB and Bluemix in a later blog post.

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

Changed best practice for Ionic 2 Component constructor

Up until now in my Ionic 2 applications when creating a component I have specified object types in the component’s constructor parameters e.g

 

import {NavController} from ‘ionic/ionic’;

@Page({
templateUrl: ‘build/pages/myPage/myPage.html’,
})

export class MyPage {
constructor(nav: NavController) {
this.nav = nav;
} {

}

i.e nav is of type NavController

Recently I noticed that in the Conference reference app being maintained by the Ionic team, the pages are now set up like this:

import {NavController} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/myPage/myPage.html'
})
export class MyPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
    this.nav = nav;
  }
  
  ....
}

So nav is passed into the constructor and this magical looking get parameters method returns the NavController type.  I’m not exactly sure why this change has been made – presumably this is now considered Angular 2 best practice for component constructors?

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

AngularAir episodes 56, 57 and 58

I love listening to the AngularAir podcasts and last week saw the first in a series of three episodes that should be of interest to anyone doing mobile development right now.

Episode 56 was titled “Is NativeScript the Holy Grail for mobile development”.  I first came across NativeScript at last years Angular Connect conference in London.  I think the possibilities with NativeScript are pretty amazing if they get it right and I’m particularly excited about their integration with Angular 2.

For now I’m concentrating on Ionic 2 – I love the Ionic framework and it does everything I need it to do – but I will certainly be giving NativeScript a try soon just to compare it with Ionic.

This week on AngularAir we have episode 57 when the Ionic Framework team are the guests.  The show is called “Why Ionic 2 is going to rock your world” (and of course, it will)

Episode 58 will be talking about React Native, another must-listen show.

Interesting times….

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

Publishing and Subscribing to Events in Ionic 2

Sooner or later when you’re building your mobile application you’ll probably want to fire an event in one component of your application and have that event handled or acted upon in another component.

In native iOS development you would probably handle this scenario either using the NSNotification class or the Delegate pattern. The former is loosely coupled and allows multiple listeners, the latter is more tightly coupled and allows just a single listener (I think).  In Android development you can use Listeners or perhaps use an event bus architecture such as EventBus or Oto.

In an Ionic 2 application we have an Events system which allows you to subscribe to events in one component that have been published in another component.  Like the NSNotifcation class in iOS this is a loosely coupled architecture and allows multiple listeners i.e component 1 can publish an event and components 2 and 3 can subscribe to it.

It’s incredibly simple to use.  In both the publishing and subscribing events you need to inject the Event class i.e :

import {Events} from ionic-angular;

In the component you wish to fire the event from simply publish it like this:

this.events.publish(‘myEvent);

and in the component you want to act on the event you subscribe to it i.e:

this.events.subscribe(‘myEvent’,() => {

// do something

});

The event can also take an object as a parameter e.g

let myParam = {

name: “Bruce”,

age: 100

}

this.events.publish(‘myEvent‘,myParam);

To handle this in the subscriber you would do something like:

this.events.subscribe(‘myEvent’,(object) => {

// do something with object

});

To read more about Events in Ionic 2 see the documentation here and also have a look at the excellent Conference app that the Ionic team have created and are constantly updating as they add new features to the framework.  In the Conference app, app.js subscribes to the login event fired by the UserData component.

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

My favourite learning resources for Ionic 2

I’m pretty new to the Ionic and Angular frameworks and am always on the lookout for blogs and other resources that help me learn.  The following is my current go-to list of resources for Ionic development.

Firstly the Ionic 2 Forum itself.  This is a great place to pick up hints and tips from other developers and also help people who are coming across problems for the first time that you may have hit before.  I visit this forum several times a day.

Outside of the forum there are several blogs I follow, all of them really great resources for Ionic hints, tips and tutorials:

Josh Morony’s blog at http://www.joshmorony.com/blog

(Josh has an Ionic 2 book out that is well worth checking out)

Nic Raboy’s blog at https://blog.nraboy.com

Andrew McGivery’s blog at http://mcgivery.com

Raymond Camden’s blog at http://www.raymondcamden.com

Ashteya Biharisingh’s blog at http://gonehybrid.com/author/ashteya/

 

I also love podcasts and at the moment, I am regularly listening to:

The Angular Air podcast

The Javascript Air podcast

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.

 

 

 

Adding plugins to Ionic 2

In the current app I am building I need to use the network information plugin so to add it I ran the command:

ionic plugin add cordova-plugin-network-information

In my Ionic 1 apps I always used ionic plugin add to add my plugins as the plugin is then automatically added to the package.json file (which I assumed was good).

Anyway, after adding the plug-in (and without adding any code to actually use it) I built the app and tested it on a device. The app crashed on loading (no errors in the log – just crashed on startup). I removed the plugin and added it again and re-tested. Same thing happened.

Then I tried removing the plugin and adding it back again but this time using:

cordova plugin add cordova-plugin-network-information

This time when I built the app, it worked.  I thought the only difference between the ionic plugin command and the cordova plugin command was the entry in package.json but presumably there are other differences?   Changing to the cordova command also appears to have helped someone else so its not just me.

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.