Ionic Cloud Push Service

I had to create a demo application in Ionic 2 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 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.

Developing mobile Applications for the Salesforce platfom

aa

 

For the last three months I have been lucky enough to be working with the team at MobileCaddy developing mobile applications for the Salesforce platform. MobileCaddy have created their own framework/methodology and toolset that enables you to mobilise Salesforce data in a hybrid cross-platform application using the Ionic Framework.

I had no prior knowledge of the Salesforce platform prior to this contract so there was an eye opening period of Salesforce Platform “on-boarding” when I started. I was amazed at just how vast the Salesforce platform is – I had always thought of it as just another CRM system. If you have experience of Salesforce yourself you’d know how far that is from the truth.

There is a mobile application available from Salesforce called Salesforce 1 which allows customers to access their data via mobile devices. However, there are serious limitations to how it works and the functionality it provides – in particular the ability to work on your data off-line in a robust, secure and scalable way. MobileCaddy’s toolset tackles these limitations head-on and solves them.

What I love about the MobileCaddy solution is that as a developer, you get a lot of highly valuable and highly functional code straight out of the box – leaving you to concentrate on the UI and the business logic. Their starter templates come pre-built with off-line sync services, and a utilities library allowing you to easily make API calls to your Salesforce data – safe in the knowledge that if you are off line it will work, if you are on-line it will work and if you are moving between off-line and on-line mode it will work. It just works!

Using the API is simple and elegant and that’s what I love about the MobileCaddy framework.

One of the applications that I have built with MobileCaddy is a Food Ordering proof of concept application that Justin Halfpenny, co-founder of MobileCaddy talks about here.

It’s been a great learning curve for me, working with MobileCaddy and using their framework.  Their team are incredibly knowledgable about the Salesforce platform and in particular the challenges posed by mobilising your data.  If you are a Salesforce customer and are looking at mobilising your data but are unsure how to go about it, I highly recommend that you contact the MobileCaddy team and ask them to talk to you about their product set.

Ionic 2 Blueprints

A few months ago Packt publishing contacted me to ask if I could be the Technical Reviewer for a new Ionic 2 book. I was delighted to accept and over the next few weeks I was able to review the chapters as they became available.  The author, Indermohan Singh, did a fantastic job with the book. As I read through each chapter I could see how much time and effort he had put into it. I realised how hard it must be to write  a book of this type. 
Indermohan has written a far better book than I would ever have managed.

3739os_5467_ionic-2-blueprints

The book, Ionic 2 Blueprints, was published last week and I was delighted to receive my complimentary copy yesterday.

ion-view title not appearing

I haven’t been blogging much recently because I intended this blog to be all about Ionic 2 and for the last month or so I’ve been working on a contract doing some Ionic 1 development (an interesting experience having been working with Ionic 2 for 8 months or so).

Anyway, my Ionic 1 app was driving me crazy for a couple of hours yesterday as I found that my view title was not displaying correctly.  I had this in my templates:

 

<ion-view title=" {{ categoryName }}">

 <ion-content>
What I needed was this (ion-nav-title) :
<ion-view>
    <ion-nav-title>{{ categoryName }}</ion-nav-title>
    <ion-content>

 

The former works some of the time but sometimes fails.  The latter method seems to work all of the time.

I expect this is a well known thing but in case someone has the same problem and comes looking, I thought I’d post the solution.

 


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.

 

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 {Page,NavController} from ‘ionic-angular’;
import {DevicePage} from ‘../device/device’;
import {BLE} from ‘ionic-native’;

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

static get parameters() {
return [[NavController]];
}

constructor(nav) {
this.nav = nav;
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 {Page, NavController,NavParams} from ‘ionic-angular’;
import {CharacteristicPage} from ‘../characteristic/characteristic’;
import {BLE} from ‘ionic-native’;

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

export class DevicePage {

static get parameters() {
return [[NavParams],[NavController]];
}

constructor(navParams,nav) {
this.nav = nav;
this.navParams = navParams;
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.