Monthly Archives: March 2016

Offline First with Ionic 2, PouchDB and IBM Bluemix

A pretty important feature of any mobile app these days is the ability to function offline. For native apps I have often used Parse as a back-end data service (sadly Parse is not going to be available as an MBaaS for much longer).  Parse has a great Local Datastore feature which allows your native apps to function offline as well as online with hardly any work at all from a coding point of view.  You just have to pin your data locally when you first retrieve it and from then on that data is available to you online or offline (well, there’s a bit more to it than that but that’s basically it).

That Local Datastore functionality is only available with the Parse native SDKs so when I started to work with Ionic I needed an alternative solution (I’ll always look for ready made tried and tested solutions to problems rather than write my own).   The best solution I have found so far and one which I have used now in two or three Ionic apps is PouchDB.  PouchDB works with CouchDB as a back-end and it syncs the data for you automatically and allows you to work offline as well as online very very easily (very similar in a way to working with the Parse Local Datastore).  PouchDB is really well documented and works very well.  There are a few options for you when it comes to setting up a CouchDB back-end database, the one I have chosen to use is IBM’s Bluemix offering.  WIth Bluemix you have a ton of services available, one of them being their NoSQL IBM Cloudant DB service which provides you with an easy to use, instantly available CouchDB.

There’s two great posts here and here by Raymond Camden on setting up the Cloudant DB service in Bluemix and a great tutorial here on using PouchDB and Bluemix with Ionic 2 by Josh Morony.  Although I had already started using Ionic 2 with Pouch DB and Bluemix before Josh wrote this tutorial, what he says there is pretty much in line with the way I have done things.  The only thing I have done slightly differently is that I create a class called PouchDB containing general methods like GetAllDocs() and Sync() etc and then I have separate classes for each of my data-tables which extend this class and add functionality unique to them.

If you want to take your Ionic 2 (or Ionic 1) apps offline and you’ve yet not looked at using PouchDB I’d recommend you take a look at it.  IBM Bluemix is worth a look too if you need an MBaaS.

 


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.

 

 

 

 

Ionic – the truly Progressive Web App framework

There have been countless blog posts, presentations, articles etc over the last few years about the seemingly endless debate about which is the better approach for mobile development, native app or web apps.

Despite the title of this blog I’ve always been pretty technology agnostic.  I’ve developed applications with  Appcelerator Titanium (almost native), Sencha Touch (hybrid),  Objective-C (purely native) and Java (purely native).  And over the last 12 months I’ve been working with Ionic (hybrid).

How you choose to develop an app usually comes down to requirements and resources. If the requirements absolutely demand native development you go with native development. But in the majority of cases they don’t and it comes down to what skills you have and what resources you have available (time, money, people and so on).  Companies like Facebook, Google etc with armies of native developers will probably always develop apps natively to get the slickest performance possible.  And that makes sense.  But they’re in a different world to the rest of us.

What got me thinking about this subject this week was the idea of Progressive Web Apps that I talked about here and here.   This concept brings another factor into play – the ability to have a web site start out as a normal web site but then as you gradually engage with it more it becomes more app like (using Service Workers). This really brings the power of the web into play and its why I think it’s a really exciting time to be developing hybrid apps and in particular, hybrid apps with Ionic.

Having developed native apps with Titanium and then in Objective-C and Java and spent countless hours working out how best to do this or that on each platform, what I have always loved most about working with Ionic is that it truly is a write-once, run-anywhere framework.  I never have to adapt code for iOS or Android.  It just works, all the time, on all devices (well, 99% of the time). It’s a fantastic feeling – if you have developed apps natively in separate codebases – to work on an Ionic app and know that it will work across platforms without any hacks or work-arounds or separate components.  And recently, Windows Phone support was added to Ionic 2 (apparently it took Brandy Carney just three days to add support for it).

But what I’ve never really thought too much about is how my Ionic apps, because they already work in the browser,  are already servable websites.

So the Ionic app that I currently compile to native could initially be sitting on a server somewhere and be that Progressive Web App that operates as a normal device responsive web site but which – upon a certain level of engagement with the user – becomes more app like when added to the user’s home-screen.  And then maybe when engagement reaches a further level (or requires certain device features), the native version of that app is installed.  The user gets the experience they need but only when they need it.

From URL to tab.  From tab to home-screen.  From home-screen to app.

All with the same single codebase.

And although I’ve not tried it yet, with tools like Electron, that very same app with the very same single codebase, can become a desktop app for Windows, Mac or Linux.

How exciting is that?

I think (?) at the moment – until Safari supports Service Workers – the truly Progressive App experience described above is only possible on Android. But hopefully it’s only a matter of time before Safari supports it too.

What an extraordinary time it must be for the Ionic team right now and what an exciting time it is for us, as developers, to be part of it.

 


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.

 

 

 

From beacon to tab to home-screen

I’ve built a few apps now that use Beacons (one native iOS app, two native Android apps and one Ionic app) and it’s a technology that really interests me.  Following on from watching Alex Russell talk about Progressive Web Apps the other day, today I was listening to Jen Looper on JavaScript Air talking about her session about beacons at the Fluent conference.

Jen talked about Eddystone beacons and how they remove the need for a dedicated app to pick them up (Eddystone beacons can transmit URLs which can be automatically detected by the phone and have a web site / web app launched).

I couldn’t help thinking as I listened how this could work well with the Progressive Web App concept.  And then today Jen tweeted a link to this article which did link the two ideas together.  Getting all this right (the use of beacon technology) is a real challenge still for developers but I think the idea of Progressive Web Apps in combination with Eddystone technology is really exciting.

 


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.

Progressive Web Apps

I found this talk by Alex Russell at the recent Fluent Conference fascinating.  I’d not heard of the terms Progressive Web Apps or Service Workers before but the whole concept makes a lot of sense to me.  It’s a really exciting time for mobile/web development right now and I’m particularly interested to find out how Angular and Ionic will fit into this.

If you want to know a bit more, watch Alex’s presentation:

pwa

 

 


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.

Global variables in Ionic 2

[Updated for the latest version of Ionic 2]

I’ve seen a couple of questions in forums recently relating to global variables in Ionic 2 applications and what the “best practice” is.  In my Ionic 2 apps I like to handle global variables by injecting some sort of shared-data service into any components that need it.

import {Injectable} from '@angular/core';

@Injectable()
export class GlobalVars {
  
  constructor() {
    this.myGlobalVar = "";
  }

  setMyGlobalVar(value) {
    this.myGlobalVar = value;
  }

  getMyGlobalVar() {
    return this.myGlobalVar;
  }

}

in app.module.ts I would then import the service:

import {GlobalVars} from ./providers/globalVars;

and specify it as a provider:

providers: [GlobalVars]

and then it can be injected and used in any component.  To see this in action, take a look at the Conference app that the Ionic team are building as a reference project for Ionic 2.  Take a look at the user-data provider and see how they use that across the application to maintain data (such as the favourites list).



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.

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.