Tag Archives: PouchDB

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.

 

 

 

 

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.