Upgrading to Ionic 2.0.0-rc.4

If you are having problems installing Ionic 2.0.0-rc.4 you may want to check out this issue.  I had problems myself and could only get everything working by uninstalling cordova as well as Ionic.  So the commands I ran were:

npm uninstall -g cordova
npm uninstall -g ionic
sudo npm install -g cordova ionic

 

All works fine now….

 

 



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 2 and Azure

I’m building an Ionic 2 application at the moment using the very latest version of the framework (RC0) and one of the problems I encountered was how to include and reference the Azure Javascript SDK so that my app could use an Azure back-end.

I had some problems with this initially but finally got it to work in the end.  Two things came to my rescue.

Firstly, just at the time I was struggling with this, the Ionic team published an article “Using 3rd Party Libraries”.  This was a great help and I urge you to check it out of you are having any difficulties in using 3rd party libraries with Ionic 2.

Following that article I knew that all I had to do to use the library  was run the following command from the CLI:

npm install azure-mobile-apps-client –save

and then add:

declare module ‘azure-mobile-apps-client’;

to my declarations.d.ts file (as there was no Typings file available for the library)

I then had some problems trying to reference the library and use it within my application. Although I was working at the weekend, I reached out to Ionic’s Dan Bucholtz via twitter, expecting that maybe on the Monday I might get a reply.  That was to underestimate Super Dan and within minutes he was helping me out (thanks Dan).  Finally I managed to get things working.  And it was all very simple.

In my components/services I now have:

import azureMobileClient from ‘azure-mobile-apps-client’;

and in their constructor:

this.client = new azureMobileClient.MobileServiceClient(azureURL);
this.table = this.client.getTable(tableName);

and it now all works swimmingly well !  🙂

 

 

 

 

 

 

 

 

 

Firstly thanks to this timely article from the Ionic Framework team about using 3rd party libraries and secondly thanks to some help from Dan Bucholtz

 



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 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.