Category Archives: Ionic 2

Ionic Cloud Push Service

I had to create a demo application in Ionic for a customer this week that handled Push Notifications. I thought this would be an excellent opportunity to try out Ionic’s very own Cloud Services which recently became available for Ionic 2 apps.

I have to say I was very impressed with the documentation on the site. I’ve only been through the Push Docs so far but everything was very clearly explained and it didn’t take very long at all to build an application and have Push Notifications being received on the device. I have only tested the iOS side of things so far and will test the Android side next.  But so far so good.  Very impressed.

 

 



I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic 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 but also with other mobile frameworks and technologies.  Thanks for visiting.

Google Places Autocomplete and Ionic 2

The Google Places Autocomplete service is a useful service if you want to add location autocomplete to your app.  Recently I needed this in an Ionic 2 app I was developing.

What is the Google Places Autocomplete service?  From the Google Places website:

The Place Autocomplete service is a web service that returns place predictions in response to an HTTP request. The request specifies a textual search string and optional geographic bounds. The service can be used to provide autocomplete functionality for text-based geographic searches, by returning places such as businesses, addresses and points of interest as a user types.

Using the service in your Ionic 2 app is very easy:

In your index.html add the following line:

<script type=text/javascript src=http://maps.googleapis.com/maps/api/js?key=yourkey&amp;libraries=places></script>

replace yourkey with your own Google Maps API key which you generate via the Google API Console.

On a component’s HTML page add the fields you want to use for the autocomplete (in this example I have two, a FROM field and a TO field:

<p class = “label”>From</p>
<input (focus)=”clearFrom()” id=”journey_from” name=”journey_from” type=”text” placeholder=”Enter location”[(ngModel)]=”fromValue”>
<p class = “label”>To</p>
<input (focus)=”clearTo()” id=”journey_to” name=”journey_to” type=”text” placeholder=”Enter location”[(ngModel)]=”toValue”>

In your component (this example used Typescript) define the model values:

fromValue:string;

toValue:string;

and in the constructor initialise them:

this.fromValue = “”;
this.toValue = “”;

Then add an ngOnit() method that setups up autocomplete service listeners against both fields:

ngOnInit(){

// get the two fields
let input_from = (<HTMLInputElement>document.getElementById(“journey_from”));
let input_to = (<HTMLInputElement>document.getElementById(“journey_to”));

// set the options
let options = {
types: [],
componentRestrictions: {country: “uk”}
};

// create the two autocompletes on the from and to fields
let autocomplete1 = new google.maps.places.Autocomplete(input_from, options);
let autocomplete2 = new google.maps.places.Autocomplete(input_to, options);

// we need to save a reference to this as we lose it in the callbacks
let self = this;

// add the first listener
google.maps.event.addListener(autocomplete1, ‘place_changed’, function() {

let place = autocomplete1.getPlace();
let geometry = place.geometry;
if ((geometry) !== undefined) {

console.log(place.name);

console.log(geometry.location.lng());

console.log(geometry.location.lat());

});

// add the second listener
google.maps.event.addListener(autocomplete2, ‘place_changed’, function() {
let place = autocomplete2.getPlace();
let geometry = place.geometry;

if ((geometry) !== undefined) {

console.log(place.name);

console.log(geometry.location.lng());

console.log(geometry.location.lat());

});

});

}

That’s all there is to it – you should now be able to see google place names appear when you type in either of those fields – and see the selected item’s attributes written to the console.

 


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.

 

 

Connecting to a Bluetooth Smart Sensor with Ionic 2

You’d have to have been living in a box for the last couple of years not to have heard of the Internet Of Things and all the buzz  around it.  A big part of IoT is Bluetooth Smart technology which I started working with as a mobile developer a couple of years ago whilst working as a contractor for the Innovations department of a large corporation in London.

We began looking at Bluetooth Smart Beacons and investigating ways in which they could be used in an office environment.  To prove they could be useful we created FreeDesk, a native application for iOS and Android that used beacons to help people find free desks in the office (particularly contract staff requiring a hot desk). After that we did lots of stuff with Bluetooth Smart that I can’t talk about as it was under an NDA 🙂

Later I worked with Beacons again when I developed Open Day, an application for colleges and universities that uses beacons placed around campus buildings in order to provide a more engaging experience for visitors.  The Open Day  app was initially built natively in Android and iOS but I later developed a hybrid version of the application using Ionic.  I’ll probably write a blog post soon about using Beacons with Ionic 2.

For now I want to talk a little bit about how to get started with an Ionic 2 app that communicates with a a Bluetooth Smart device.   If you want to get serious about working with Bluetooth Smart communications you really need to head over to the Bluetooth SIG website where there is an abundance of resources to help you.  In particular you need to read up on the Bluetooth Generic Attributes protocol (GATT) which is what you need to understand if you want to connect and communicate with a Bluetooth Smart device.

When I started looking at Bluetooth Smart and wanted a device to connect to I ordered a Texas Instruments  SensorTag Development Kit. This is a very neat little device and has a number of sensors on it that you can read from – temperature, humidity, pressure etc.  Its a really great way to start and I’d recommend buying something like this if you want to have a play. Another similar piece of kit available is the Broadcom WICED Sense Kit and this is what I used recently to create a Bluetooth Smart app in Ionic 2.

Broadcom_BCM9WICED-SENSE

The following steps should help you on your way to creating an Ionic 2 application that can start communicating with a Bluetooth Smart device.  The application will use the new Ionic Native wrappers which are used in Ionic 2 (as a replacement for the ngCordova which was used in Ionic 1).  One of the Cordova plugins already provided by the Ionic Native wrapper is the ble-central plugin and its this one which we will use to handle our communications with the device.

Start by creating your Ionic 2 application:

ionic start ionic2-BLE-demo blank –v2

Move into the application folder

cd ionic2-BLE-demo

Install Ionic Native

npm install ionic-native –save

Add the ble-central Cordova plug-in

ionic plugin add cordova-plugin-ble-central

In your main view template (mine is called pages/home.html) provide a button (to start scanning for devices), a list (to display devices found) and a spinner to be displayed when we are scanning for devices and hidden when we’re done scanning:

<ion-navbar *navbar>

<ion-title>
Devices
</ion-title>

<ion-buttons end>
<button (click) = “startScanning()” >Scan</button>
</ion-buttons>

</ion-navbar>

<ion-content>
<ion-list inset>
<ion-item-sliding *ngFor=”#device of devices” #slidingItem>
<button ion-item (click)=”connectToDevice(device)”>
<h2>{{device.name}}</h2>
<p>{{device.id}}</p>
<p>{{device.rssi}}</p>
</button>

</ion-item-sliding>
</ion-list>
<ion-spinner *ngIf=”isScanning==true” name=”circles”></ion-spinner>
</ion-content>

In the associated component (pages/home.js) provide a startScanning function that is executed when the Scan button is pressed.  When this button is pressed a 3 second scan will be carried out and any Bluetooth Smart devices found will be displayed in a list.

import {Component,NavController} from ‘@angular/core’;
import {DevicePage} from ‘../device/device’;
import {BLE} from ‘ionic-native’;

@Component({
templateUrl: ‘build/pages/home/home.html’
})
export class HomePage {

constructor(public nav: NavController) {
this.devices = [];
this.isScanning = false;
}

startScanning() {
console.log(“Scanning Started”);
this.devices = [];
this.isScanning = true;
BLE.startScan([]).subscribe(device => {
this.devices.push(device);
});

setTimeout(() => {
BLE.stopScan().then(() => {
console.log(‘Scanning has stopped’);
console.log(JSON.stringify(this.devices))
this.isScanning = false;
});
}, 3000);

}

connectToDevice(device) {
console.log(‘Connect To Device’);
console.log(JSON.stringify(device))
this.nav.push(DevicePage, {
device: device
});
}

}

We also need a DevicePage which is displayed when the user clicks on a device.  Mine is called pages/device.js.  The template (pages/device.html) looks like this:

<ion-navbar *navbar>
<ion-title>{{device.name}}</ion-title>
</ion-navbar>
<ion-content>
<ion-list inset>
<ion-item-sliding *ngFor=”#characteristic of characteristics” #slidingItem>
<button ion-item (click)=”connectToCharacteristic(device.id,characteristic)”>
<h2>{{characteristic.characteristic}}</h2>
<p>{{characteristic.properties}}</p>
<p>{{characteristic.isNotifying}}</p>
<p>{{characteristic.service}}</p>
</button>
</ion-item-sliding>
</ion-list>
<ion-spinner *ngIf=”connecting==true” name=”circles”></ion-spinner>
</ion-content>

The component (pages/device.js) looks like this:

import {Component, NavController,NavParams} from ‘@angular/core’;
import {CharacteristicPage} from ‘../characteristic/characteristic’;
import {BLE} from ‘ionic-native’;

@Component({
templateUrl: ‘build/pages/device/device.html’
})

export class DevicePage {

constructor(public navParams: NavParams,public nav: NavController) {
this.device = this.navParams.get(‘device’);
this.connecting = true;
this.connect(this.device.id);
}

connect(deviceID) {
this.characteristics = [];

BLE.connect(deviceID).subscribe(peripheralData => {
console.log(peripheralData.characteristics);
this.characteristics = peripheralData.characteristics;
this.connecting = false;
},
peripheralData => {
console.log(‘disconnected’);
});
}

connectToCharacteristic(deviceID,characteristic) {
console.log(‘Connect To Characteristic’);
console.log(deviceID);
console.log(characteristic);
}

}

The component connects to the device and displays that device’s services and characteristics on screen.  If you read up on the GATT protocol and understand it you should be able to create the final component we need – a component that would be pushed on the navigation stack by the connectToCharacteristic function and which displays the value of that characteristic e.g a temperature value or humidity value etc.  I hope this has helped you get started on your journey into the IoT !

 


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.

A Central Provider for Constants in Ionic 2

I’m not really sure what the best practice is in Angular 2 (and therefore Ionic 2) for defining your application’s constants in a central place but the question came up in the Ionic 2 forum yesterday.   I replied to the post with the method I have been using.  In my Ionic 2 apps I have a config.js file in the providers folder.

In this config.js file I export the constants like this:

export let SERVER_NAME = “myServer.com”;
export let TEST_USERNAME = “myName”;

(I suppose I could export a single object containing the values rather than exporting all the values individually but this is the way I have been doing this so far)

In any components that then need to reference a constant I do this:

import {SERVER_NAME) from ‘./config’;

and then I just use that value (in this case SERVER_NAME) whenever I need to in that component.

As I said, I have no idea really if this is considered best Angular 2 practice or whether or not there are any problems with it but so far it has worked for 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.

 

 

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.

 

 

 

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.