Baadier Sydow

How to integrate Ionic Framework & WordPress REST API Tutorial

Wed, 31 Jan 2018 07:03:47 GMT

Learn how to integrate Ionic Framework & WordPress in this tutorial

WordPress officially merged in the REST API into core in 2017. Up until that point it had been a feature plugin. This was the culmination of a multi-year endeavour and opened up WordPress to becoming a generic backend content provider for a wide range of applications.

Ionic Framework makes integrating with WordPress a quick and easy process. Integration involves connecting to the correct resources via Angular’s HTTP provider. The WordPress API team has used REST principles in the development of the API which makes the API predictable and a cinch to work with.

You can learn more about the WordPress REST API and how to access its different resources by visiting the documentation.

After we complete this tutorial you will be able to integrate Ionic with WordPress.

This tutorial will focus primarily on teaching the fundamentals of interacting with WordPress via the API. To do that we will access a few different endpoints to retrieve and display data.

We will be loading all the post categories on a WordPress site, showing a selected categories posts and then viewing a single post.

I have added a repository with the completed tutorial code at https://github.com/Baadier-Sydow/ionic-wordpress-rest-api.

Last updated for Ionic 3.9.2

Getting Started

Let’s start by setting up your Ionic installation. Navigate to where you would like to install this project using your terminal and enter the following:

ionic start wordpress blank

Enter an appropriate project name, for example, wordpress as I’ve done, and select N to not add the Cordova native platforms to this project when the question is presented as it will not be needed.

Navigate to the folder using:

cd wordpress

Create a provider to interface with your WordPress API

Let’s start by creating a provider that will handle the heavy lifting of connecting to the API and returning the data as an Observable back to us. Our pages and components will be able to receive the response and update the view appropriately.

Run the following command to generate the provider:

ionic g provider Wordpress

Now add the provider to your app.module.ts to make it available to your application. Also, note that we add Angular’s HttpModule to make Http available within the application. You will need this to connect to remote resources.

...
import { HttpModule } from '@angular/http';
import { WordpressProvider } from '../providers/wordpress/wordpress';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    HttpModule
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    WordpressProvider
  ]
})
export class AppModule {}

Make the following changes your wordpress.ts file:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class WordpressProvider {

  baseUrl: string = "http://demo.wp-api.org/wp-json/wp/v2/"

  constructor(public http: Http) {

  }

  retrieveCategories(){
    return this.http.get(this.baseUrl + 'categories')
    .map(res => res.json());
  }

  retrievePostsInCategory(categoryId: number){
    return this.http.get(this.baseUrl + 'posts?categories=' + categoryId)
    .map(res => res.json());
  }

}

Now let’s talk through what is taking place in the provider.

We are importing Http into the provider to allow us to connect to the REST API. We also include Http in the constructor of the provider to create it.

Then we add the map operator so that we can map the Observable response that is returned. This allows you to transform the data and return it.

...
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class WordpressProvider {

  ...

  constructor(public http: Http) {

  }

A variable, baseUrl, is created to store the base URL of the endpoint you will be using. This is just to make it easier to work with and change. In a larger application, this would live in a constants or settings file.

I’ve opted to use the demo url provided by the WordPress REST API handbook to make this easier for you to follow the tutorial. This should be replaced by a URL pointing to your own site.

...

@Injectable()
export class WordpressProvider {

  baseUrl: string = "http://demo.wp-api.org/wp-json/wp/v2/"

  constructor(public http: Http) {

  }

...

Now we create a function that retrieves all the categories available on the WordPress site. This will return an observable stream of data.

  retrieveCategories(){
    return this.http.get(this.baseUrl + 'categories')
    .map(res => res.json());
  }

Finally, we add a function that retrieves all the posts for a selected category on the remote site. This function takes a category id.

  retrievePostsInCategory(categoryId: number){
    return this.http.get(this.baseUrl + 'posts?categories=' + categoryId)
    .map(res => res.json());
  }

Create pages that your app will navigate to

Now we can create the pages we need to interact with the API and display the posts. We have the HomePage available that will host our first view. We will add two more pages that you will be able to navigate to.

Run the following commands in your terminal:

ionic g page CategoryList --no-module
ionic g page Post --no-module

Add the pages to your app.module.ts to make them available to the application.

...
import { CategoryListPage } from '../pages/category-list/category-list';
import { PostPage } from './../pages/post/post';

@NgModule({
  declarations: [
    ...
    CategoryListPage,
    PostPage
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
    CategoryListPage,
    PostPage
  ],
  providers: [
    ...
  ]
})
export class AppModule {}

Retrieve all the categories from the WordPress site via the API

Start by making the following changes to your home.ts file.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { WordpressProvider } from './../../providers/wordpress/wordpress';
import { CategoryListPage } from './../../pages/category-list/category-list';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  categories: any;

  constructor(public navCtrl: NavController, public wordpress: WordpressProvider) {

  }

  ionViewDidLoad(){
   this.wordpress.retrieveCategories().subscribe(results => {
     this.categories = results;
   });
  }

  loadCategory(id: number){
    this.navCtrl.push(CategoryListPage, {
      categoryId: id
    });
  }

}

We start by importing the WordPress provider so that we can interact with the API. We initialize this in the constructor.

Then we add in the CategoryListPage so that we can navigate to this after selecting a single category to view.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { WordpressProvider } from './../../providers/wordpress/wordpress';
import { CategoryListPage } from './../../pages/category-list/category-list';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public wordpress: WordpressProvider) {

  }

When the view loads we make a request to the WordPress site to retrieve all the post categories that are available and then store the result in a variable named categories. We use ionViewDidLoad() to make sure that the request only fires off once the view has loaded.

...

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  categories: any;

  constructor(public navCtrl: NavController, public wordpress: WordpressProvider) {

  }

  ionViewDidLoad(){
   this.wordpress.retrieveCategories().subscribe(results => {
     this.categories = results;
   });
  }

}

A method has been added, loadCategory(), that will receive a category id and navigate to the CategoryListPage with the id attached as a NavParams.

This method is triggered by user interaction on the list of categories.

  loadCategory(id: number){
    this.navCtrl.push(CategoryListPage, {
      categoryId: id
    });
  }

Display all the categories that were retrieved and handle the user selection

Change home.html to reflect the code below:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Framework & WordPress
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let category of categories" (click)="loadCategory(category?.id)">
      {{ category?.name }}
    </ion-item>
  </ion-list>
</ion-content>

We create an ion-list to hold the list of categories that are returned. An *ngFor is used to loop through each of the categories and create an ion-item that will display the category name.

Angular’s safe navigation operator is used to ensure that no error is triggered before the data is returned to the view.

Finally, a click handler is included which passes through the selected categories id to the loadCategory() function.

Receive the selected categories id and fetch its posts

Open your category-list.ts file and make the following changes before proceeding.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { WordpressProvider } from './../../providers/wordpress/wordpress';
import { PostPage } from './../post/post';

@Component({
  selector: 'page-category-list',
  templateUrl: 'category-list.html',
})
export class CategoryListPage {

  categoryId: number;
  posts: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, public wordpress: WordpressProvider) {
    this.categoryId = this.navParams.get("categoryId");
  }

  ionViewDidLoad() {
    this.wordpress.retrievePostsInCategory(this.categoryId).subscribe(results => {
      this.posts = results;
    });
  }

  openPost(post){
    this.navCtrl.push(PostPage, {
      post: post
    });
  }

}

Now, let’s walk through the changes to understand what is taking place.

We start by importing the providers that we will need in this component.

NavParams is imported to retrieve the category id coming from HomePage along with the WordpressProvider to interact with the API.

PostPage has also been included to display a single post that has been retrieved and selected by the user.

NavParams and WordpressProvider are initialized via the constructor.

...
import { NavController, NavParams } from 'ionic-angular';
import { WordpressProvider } from './../../providers/wordpress/wordpress';
import { PostPage } from './../post/post';

@Component({
  selector: 'page-category-list',
  templateUrl: 'category-list.html',
})
export class CategoryListPage {

  ...

  constructor(public navCtrl: NavController, public navParams: NavParams, public wordpress: WordpressProvider) {
    ...
  }

  ...

We create variables to hold the category id that has been selected and the posts that are available for this category.

...

@Component({
  selector: 'page-category-list',
  templateUrl: 'category-list.html',
})
export class CategoryListPage {

  categoryId: number;
  posts: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, public wordpress: WordpressProvider) {
    ...
  }

}

In the constructor, we use NavParams to retrieve and store the selected category id.

...

@Component({
  selector: 'page-category-list',
  templateUrl: 'category-list.html',
})
export class CategoryListPage {

  categoryId: number;
  posts: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, public wordpress: WordpressProvider) {
    this.categoryId = this.navParams.get("categoryId");
  }

}

The Ionic lifecycle hook, ionViewDidLoad() is used to fire off a request to retrieve all the available posts for this category. The category id is passed along with the request to the API.

All the posts that have been returned are stored in the posts variable for display on the view.

ionViewDidLoad() is run after the constructor so you can be assured that the category id will have been retrieved already.

...

@Component({
  selector: 'page-category-list',
  templateUrl: 'category-list.html',
})
export class CategoryListPage {

  categoryId: number;
  posts: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, public wordpress: WordpressProvider) {
    this.categoryId = this.navParams.get("categoryId");
  }

  ionViewDidLoad() {
    this.wordpress.retrievePostsInCategory(this.categoryId).subscribe(results => {
      this.posts = results;
    });
  }

}

Now we create a function, openPost(), that will send the full post object returned from the API to the PostPage for displaying. This is triggered via a click event on the selected post in the view which we will discuss in the next section.

...

@Component({
  selector: 'page-category-list',
  templateUrl: 'category-list.html',
})
export class CategoryListPage {

  ...

  constructor(public navCtrl: NavController, public navParams: NavParams, public wordpress: WordpressProvider) {
    ...
  }
   ...
   
  openPost(post){
    this.navCtrl.push(PostPage, {
      post: post
    });
  }

}

Show all the posts for this category and allow the user to select one

Change your category-list.html to the following before we move on.

<ion-header>

  <ion-navbar>
    <ion-title>Posts</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list *ngIf="posts.length">
    <ion-item *ngFor="let post of posts" (click)="openPost(post)">
      <h3>{{ post.title.rendered }}</h3>
    </ion-item>
  </ion-list>
</ion-content>

We take a similar approach to the home.html where we have a ion-list that will contains a few ion-item‘s. One difference is that we use *ngIf to make sure that the ion-list is only created when there are posts returned for this category.

Then we use a *ngFor to iterate over all the posts while displaying their respective titles with the safe navigation operator.

Note that the title of the WordPress post is within the rendered property of the object.

A click handler has been included that will send the full post object when selected.

Display the WordPress post’s full content on the Ionic page

Change post.ts to reflect the below:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {

  post: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.post = this.navParams.get("post");
  }

}

Once again, we are importing the providers we will need. We only include NavParams to retrieve the post object. No other additional providers are necessary as this is largely a presentational view.

...
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {

  ...

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
  }

}

Then we retrieve the post from NavParams and set it to a local variable, post.

...

@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
})
export class PostPage {

  post: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.post = this.navParams.get("post");
  }

}

With that out of the way, we can display the post on post.html.

Amend post.html to reflect the following:

<ion-header>

  <ion-navbar>
    <ion-title>Post</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <h1>{{ post.title.rendered }}</h1>
  <p [innerHTML]="post.content.rendered"></p>
</ion-content>

We display the post title first and beneath that the post content. Notice that we bind the post content using [innerHTML].

The post’s body content includes HTML markup that will display if you use the usual interpolation, {{ post.content.rendered }} instead of the [innerHTML] binding.

That concludes the final step.

You should now be able to load the categories from your WordPress website via the API and then select specific posts within the category for viewing.

Conclusion: Ionic Framework & WordPress REST API

We’ve learnt how to integrate WordPress into an Ionic project. The process is similar for retrieving and posting to other endpoints. Refer to the API documentation to try the other endpoints and to begin making more complex integrations.

The full completed repo can be viewed here.

How to integrate Ionic Framework & Stripe single and recurring payments

Fri, 26 Jan 2018 07:03:47 GMT

Learn how to integrate Ionic Framework & Stripe in this tutorial

Ionic Framework makes integrating Stripe a quick and easy process. Stripe is one of the world’s leading payment processors and has built a reputation for being extremely developer friendly. They are available in a number of countries and you can attempt to go the Stripe Atlas route if you fall outside of the approved countries.

There are two main ways of integrating Stripe into an Ionic application

You can either go with the Ionic Native implementation, which is a wrapper around the Stripe native SDKs for iOS and Android. This is powered by cordova-plugin-stripe. This has the limitation of only facilitating the creation of tokens for once off payments. The limitation is within the plugin and could change in the future.

The alternative approach is to use Stripe.js which is Stripe’s JavaScript implementation of their functionality. This is easy to use and quick to implement as this is implemented in JavaScript and Ionic at its core is powered by web technologies. The functionality is delivered dynamically into the page and supports both single and recurring payments.

After we complete this tutorial you will be able to integrate Ionic with Stripe and create tokens that you can use to charge your users with either a once off amount or a recurring payment.

The final payment processing will need to be integrated into your backend as a separate task. This tutorial will focus primarily on the creation of the tokens necessary to charge the user.

I have added a repository with the completed tutorial code at https://github.com/Baadier-Sydow/ionic-stripe

Last updated for Ionic 3.9.2

Getting Started

Let’s start by setting up your Ionic installation. Navigate to where you would like to install this project using your terminal and enter the following:

ionic start stripe blank

Enter an appropriate project name, for example, stripe as I’ve done, and select Y to add the Cordova native platforms to this project when the question is presented.

Navigate to the folder using:

cd stripe

Setup your Stripe profile and retrieve your API key

Stripe provides you with both testing and live API keys that you will need to use to complete the integration. Firstly, sign up for a Stripe account, and then retrieve your API keys by following the instructions here.

You should not have an issue signing up for a Stripe account even if you reside outside of their list of approved countries. The challenge occurs when you attempt to transact live payments. The test key will be sufficient for this tutorial.

Create the pages, add the plugins and connect them all

The first thing you will need to do is to create all the necessary pages you will need and add them to your app.module.ts.

Run the following commands to create the pages:

ionic g page StripeJavaScript --no-module
ionic g page StripeNative --no-module

Now add them to your applications module file:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { StripeJavaScriptPage } from '../pages/stripe-java-script/stripe-java-script';
import { StripeNativePage } from '../pages/stripe-native/stripe-native';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    StripeJavaScriptPage,
    StripeNativePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    StripeJavaScriptPage,
    StripeNativePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Open up your home.html file and change it to match the code below. We are doing this to make it easier to test the different versions of Stripe we are integrating.

<ion-header>
  <ion-navbar>
    <ion-title>
      Learn Stripe
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button large full (click)="openJavaScript()">Stripe JavaScript</button>
  <button ion-button large full (click)="openNative()">Stripe Native</button>
</ion-content>

Now let’s add the functions that the buttons are calling to your home.ts file. Include the code below to handle the button presses and ensure that the correct pages are being loaded.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { StripeJavaScriptPage } from './../stripe-java-script/stripe-java-script';
import { StripeNativePage } from '../stripe-native/stripe-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  openJavaScript(){
    this.navCtrl.push(StripeJavaScriptPage)
  }

  openNative(){
    this.navCtrl.push(StripeNativePage)
  }

}

Integrate Stripe.js into your Ionic project

Let’s start by adding the Stripe.js script file to your index.html. Make the following change to the head of your index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script src="https://js.stripe.com/v3/" async></script>

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

With that step completed we can start by making the changes we need to StripeJavaScriptPage().

Open up stripe-java-script.html and make the following amendments to it.

<ion-header>

  <ion-navbar>
    <ion-title>JavaScript</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

    <form action="/" method="post" id="payment-form">
    
      <div class="form-row">
        <div id="card-element">
          <!-- a Stripe Element will be inserted here. -->
        </div>
  
        <!-- Used to display Element errors -->
        <div id="card-errors" role="alert"></div>
      </div>
  
    <button ion-button block large>Add Card</button>
      
    </form>

</ion-content>

We are using Stripe Elements to bootstrap our payment form. This will be bound together in stripe-java-script.ts and the Stripe form will be injected in when ready. The form id will be used to bind everything together.

Before we move on we are going to add some generic styles to our stripe-java-script.scss.

page-stripe-java-script {
    .form-row{
        padding: 10px;
      }
    
      .StripeElement {
        background-color: white;
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid transparent;
        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
      }
    
      .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
      }
    
      .StripeElement--invalid {
        border-color: #fa755a;
      }
    
      .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
      }
}

Now we can start working on the stripe-java-script.ts. This where all the action takes place. First, amend your code in stripe-java-script.ts to match the following and then we can walk through it together.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

declare var Stripe;

@Component({
  selector: 'page-stripe-java-script',
  templateUrl: 'stripe-java-script.html',
})
export class StripeJavaScriptPage {

  stripe = Stripe('YOUR_API_KEY');
  card: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.setupStripe();
  }

  setupStripe(){
    let elements = this.stripe.elements();
    var style = {
      base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    this.card = elements.create('card', { style: style });

    this.card.mount('#card-element');

    this.card.addEventListener('change', event => {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    var form = document.getElementById('payment-form');
    form.addEventListener('submit', event => {
      event.preventDefault();

      // this.stripe.createToken(this.card)
      this.stripe.createSource(this.card).then(result => {
        if (result.error) {
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          console.log(result);
        }
      });
    });
  }

}

The first step we are doing is to declare a Stripe variable that will stop the compiler from complaining about a missing object.

Then we new up a Stripe object using your Stripe API key and create a variable to hold the Stripe Elements object.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

declare var Stripe;

@Component({
  selector: 'page-stripe-java-script',
  templateUrl: 'stripe-java-script.html',
})
export class StripeJavaScriptPage {

  stripe = Stripe('YOUR_API_KEY');
  card: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

The code that sets up the Stripe Element and the handlers for the events that comes back from the Stripe element is setup using the ionViewDidLoad() lifecycle event.

  ionViewDidLoad() {
    this.setupStripe();
  }

The majority of the work for this functionality takes place in the setupStripe() function.

setupStripe(){
    let elements = this.stripe.elements();
    var style = {
      base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    this.card = elements.create('card', { style: style });

    this.card.mount('#card-element');

    this.card.addEventListener('change', event => {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    var form = document.getElementById('payment-form');
    form.addEventListener('submit', event => {
      event.preventDefault();

      // this.stripe.createToken(this.card)
      this.stripe.createSource(this.card).then(result => {
        if (result.error) {
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          console.log(result);
        }
      });
    });
  }

The function does quite a bit and it would be better to separate the setup and binding code from the setup of the event handlers but this is sufficient for what we are attempting to do.

We first set up a Stripe Element, add some base styles, create a card and then mount it onto the view.

let elements = this.stripe.elements();
    var style = {
      base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    this.card = elements.create('card', { style: style });

    this.card.mount('#card-element');

With the card created we can now listen to errors from the card and add a listener for submit events. We prevent the default from taking place on submit and then select either createToken() or createSource() to authorise the card for future charges.

Use createToken() if you need to make a once off payment or createSource() to create a card that can be billed multiple times in the future.

When the promise resolves you will receive an object back that has everything you need to make payments with this card. This is where you would integrate an API call to your server to send through the source id, last 4 digits etc

    this.card.addEventListener('change', event => {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    var form = document.getElementById('payment-form');
    form.addEventListener('submit', event => {
      event.preventDefault();

      // this.stripe.createToken(this.card)
      this.stripe.createSource(this.card).then(result => {
        if (result.error) {
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          console.log(result);
        }
      });
    });

Integrate Stripe Native SDKs ie iOS & Android into your Ionic project

To integrate the native Stripe implementation into Ionic we start with adding the Cordova plugin and then add the Ionic Native wrapper to make working with it easier.

ionic cordova plugin add cordova-plugin-stripe
npm install --save @ionic-native/stripe

Once this is completed we need to add the Ionic Native Stripe helper to your app.module.ts.

...

import { Stripe } from '@ionic-native/stripe';

@NgModule({
  ...
  providers: [
    ...
    Stripe,
    ...
  ]
})
export class AppModule {}

We now have all the setup complete and can move onto setting up our view to host our payment form.

I’ve opted to make this as simple as possible for the purpose of showing you how to do the foundational setup. I’m just binding variables to the view using ngModel instead of using a reactive form that will make firing some inline validation easier for the sake of simplicity.

The view will include some Ionic inputs and a button to submit the request to Stripe.

Amend stripe-native.html to the following.

<ion-header>

  <ion-navbar>
    <ion-title>Native</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

<ion-list>

  <ion-item>
    <ion-label color="primary" stacked>Card Number</ion-label>
    <ion-input type="text" placeholder="Enter your 16 digit card number" 
    [(ngModel)]="cardNumber"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Expiration Month</ion-label>
    <ion-input type="number" placeholder="Enter your card expiration month"
    [(ngModel)]="cardMonth"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>Expiration Year</ion-label>
    <ion-input type="number" placeholder="Enter your card expiration year"
    [(ngModel)]="cardYear"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label color="primary" stacked>CVV</ion-label>
    <ion-input type="number" placeholder="Enter your CVV"
    [(ngModel)]="cardCVV"></ion-input>
  </ion-item>

</ion-list>


  <button ion-button block large (click)="validateCard()">Add Card</button>

</ion-content>

Your stripe-native.ts will handle the legwork of validating the card details and submitting it to the Stripe servers. You will be able to communicate to your own API once you receive a successful response back from Stripe with the tokenized card object.

Amend your stripe-native.ts file to reflect the code below and we can walk through it together afterwards.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Stripe } from '@ionic-native/stripe';

@Component({
  selector: 'page-stripe-native',
  templateUrl: 'stripe-native.html',
})
export class StripeNativePage {

  cardNumber: string;
  cardMonth: number;
  cardYear: number;
  cardCVV: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public stripe: Stripe) {
  }

  ionViewDidLoad() {
    this.stripe.setPublishableKey('YOUR_API_KEY');
  }

  validateCard(){
    let card = {
      number: this.cardNumber,
      expMonth: this.cardMonth,
      expYear: this.cardYear,
      cvc: this.cardCVV
     };

     // Run card validation here and then attempt to tokenise
     
     this.stripe.createCardToken(card)
        .then(token => console.log(token))
        .catch(error => console.error(error));
  }

}

First, we import the Ionic Native Stripe helper into this component and then we create a few variables that will hold the card details that we bound to the view in the previous step.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Stripe } from '@ionic-native/stripe';

@Component({
  selector: 'page-stripe-native',
  templateUrl: 'stripe-native.html',
})
export class StripeNativePage {

  cardNumber: string;
  cardMonth: number;
  cardYear: number;
  cardCVV: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public stripe: Stripe) {
  }

Now we set the Stripe key on the object when the view loads. Once again, we are using the ionViewDidLoad() lifecycle hook. This step would be better suited done in your app.component.ts when the application boots up but I’ve done it here for simplicity.

  ionViewDidLoad() {
    this.stripe.setPublishableKey('YOUR_API_KEY');
  }

Finally, we call our validateCard() function which only creates the Stripe card object and then fires off the captured card details to Stripe. When the promise resolves you would retrieve the data and then communicate with your own API to actually bill the card.

It’s important to actually validate the card details before attempting to create the token. The Ionic Native Stripe documentation includes all the available functions that you can use to validate the card number, cvv etc.

  validateCard(){
    let card = {
      number: this.cardNumber,
      expMonth: this.cardMonth,
      expYear: this.cardYear,
      cvc: this.cardCVV
     };

     // Run card validation here and then attempt to tokenise
     
     this.stripe.createCardToken(card)
        .then(token => console.log(token))
        .catch(error => console.error(error));
  }

Unfortunately, the Native implementation only supports creating card tokens and bank account tokens for once-off payments. If you want to bill the card more than once in the future then you will need to use the Stripe.js integration and create a payment source.

Conclusion: Ionic Framework & Stripe

We’ve learnt how to do two different ways of integrating Stripe into an Ionic project. You can use both in the same application if you wanted to though you would have to use the JavaScript integration if you want recurring payments.

You still have a fair bit of work to do once you’ve completed the integration of the frontend of the application as you will need to bill the payment source from your server.

The full completed repo can be viewed here.

Ionic - How to Use Google Maps & Geolocation (Native & JavaScript)

Sat, 20 Jan 2018 07:03:47 GMT

Ionic Google Maps: An alternate approach

Many developers want to use Ionic Google Maps to add mapping and geolocation to their applications. I’ve been exploring different ways to integrate Google Maps into an Ionic application over the last month. MobeeWash, an Ionic Framework application, uses the map as an integral part of the user experience.

You have two options for integrating Google Maps into your Ionic application. There are versions using the native SDK’s for iOS and Android or the JavaScript version intended for the web. Your choice affects how you will interact with the map and both options have different pros and cons.

One of the key advantages of Ionic is the speed of development while in the browser. Things like live reload for native testing improve performance but does not get you to the same productivity level as staying in the browser.

The native Google Maps experience is smoother than the JavaScript Google Map version while the JavaScript version is easier to test in the browser.

I’ve been exploring a method for using both Native & JavaScript Google Maps in the same application. The correct version is chosen when the device boots. This allows you to test in the browser while developing and deliver the best experience for the current device when the application is deployed.

This approach does come with some overhead which I am still exploring.

I have added a repository with the completed tutorial code at https://github.com/Baadier-Sydow/ionic-google-maps

Last updated for Ionic 3.9.2

Getting Started

Let’s start by setting up your Ionic installation. Navigate to where you would like to install this project using your terminal and enter the following:

ionic start

Enter an appropriate project name, for example GoogleMaps, and select blank for the starter. Select Y to add the Cordova native platforms to this project when the question is presented.

Navigate to the folder using:

cd projectname

Add Geolocation to the project

Geolocation allows you to retrieve the current location from the user’s device. This works on both browsers and mobiles.

The device will request permission when the user loads a page that triggers a Geolocation lookup. You won’t be able to retrieve the user’s location until the permission is granted.

The official documentation for the Ionic Native wrapper for Geolocation can be viewed at https://ionicframework.com/docs/native/geolocation/

Run the following commands in your terminal to install the plugin:

ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
tnpm install --save @ionic-native/geolocation

Now add the plugin to your app’s module by editing app.module.ts.

...
import { Geolocation } from '@ionic-native/geolocation';
...


providers: [ 
... 
Geolocation 
... 
]

Retrieve the users location using Geolocation

Everything has now been set up for you to use the Geolocation functionality. Lets open up home.ts and retrieve the user’s location by amending home.ts to the following:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  location: {
    latitude: number,
    longitude: number
  };
  
  constructor(public navCtrl: NavController, public geolocation: Geolocation) {
    
  }

  ionViewDidLoad() {
    this.findUserLocation();
  }

  findUserLocation(){
    let options = {
      enableHighAccuracy: true,
      timeout: 25000
    };


    this.geolocation.getCurrentPosition(options).then((position) => {

      this.location = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      };

     }).catch((error) => {
       console.log('Error getting location', error);
     });
  }

}

Let’s walk through the code to get an understanding of what’s going on.

We first import the Geolocation provider and then use dependency injection to initialize the object.

Then we create a location variable to hold the user’s location. We are declaring the type for the location inline.

It will store both longitude and latitude as two separate properties.

...
import { Geolocation } from '@ionic-native/geolocation';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  location: {
    latitude: number,
    longitude: number
  };
  
  constructor(public navCtrl: NavController, public geolocation: Geolocation) {
    
  }

}

With that being completed we have a function that requests the user’s location that fires using the Ionic Framework lifecycle event, ionViewDidLoad().

Using this lifecycle event ensures that we only initiate the request once the view is ready and loaded.

The function findUserLocation() will perform the legwork of fetching and handling the user’s location.

In the body of the findUserLocation() function, we set some initial options. It’s important to set the enableHighAccuracy to true as it may not activate the Geolocation on some devices if not turned on.

We use getCurrentPosition() to retrieve the position which is returned to us via a Promise.

When the promise resolves we are given the users location as properties on the response.coords object.

This we store in the location variable that we set up for this purpose earlier.

You can handle any errors in the catch block. For now, we will only include the console.log().

  ionViewDidLoad() {
    this.findUserLocation();
  }

  findUserLocation(){
    let options = {
      enableHighAccuracy: true,
      timeout: 25000
    };


    this.geolocation.getCurrentPosition(options).then((position) => {

      this.location = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      };

     }).catch((error) => {
       console.log('Error getting location', error);
     });
  }

Create the different Map providers you will require

We will be creating three different providers to interact with Google Maps. The MapsProvider() will interface with the different implementations of Javascript and Native maps.

The JsMapsProvider() and NativeMapsProvider() will have the concrete implementation of the map functionality.

Run the following in your terminal to create the providers:

ionic g provider MapsProvider
ionic g provider JsMapsProvider
ionic g provider NativeMapsProvider

Now add the new providers to your app module:

...
import { MapsProvider } from '../providers/maps/maps';
import { JsMapsProvider } from '../providers/js-maps/js-maps';
import { NativeMapsProvider } from '../providers/native-maps/native-maps';
...

providers: [
    ...
    MapsProvider,
    JsMapsProvider,
    NativeMapsProvider
    ...
  ]

Setup your Google Maps API keys

To use the Google Maps API you will need an API key for each environment you want to tackle. In our case, we will be using the Web ie JavaScript and Native which covers iOS and Android.

You can find instructions for retrieving your API keys at:

We can move on once you have created and recorded your API keys.

Install the Native Google Maps Cordova plugin

We can install the Google Maps Cordova plugin using the API keys for Android and iOS you created from the previous step.

Run the following commands in the terminal ensuring that you replace the API key placeholder with your actual API keys:

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

npm install --save @ionic-native/google-maps

Add the Google Maps plugin to your app module:

...
import { GoogleMaps } from '@ionic-native/google-maps';
...

  providers: [
    ...
    GoogleMaps
    ...
  ]

Install the JavaScript Google Maps script

The JavaScript version of Google Maps doesnt require installation using NPM and Cordova. It gets added directly to the head of your index.html.

Make the following addition to your index.html using your API key for Google Maps Web:

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script src="https://maps.googleapis.com/maps/api/js?key="></script>

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

Note that I’ve highlighted where you need to add the script tag. You do not need to add the surrounding code.

A note on restricting your API key use

It’s important to restrict where your API keys can be used. Someone could get a hold of your API key and use it resulting in you paying for their usage.

You can find options to restrict the API key usage when you create it. It will be under Credentials if your key has already been created.

The key can be restricted using the following different options:

None
HTTP referrers
IP addresses
Android applications
iOS applications

I would suggest using None while following through this tutorial and then amending the restrictions to suit your needs later.

Setup your MapsProvider() to initialize the correct Google Maps implementation

Amend your MapsProvider(), which can be found at providers/map/map.ts, to the following:

import { Platform } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { JsMapsProvider } from './../js-maps/js-maps';
import { NativeMapsProvider } from './../native-maps/native-maps';
import { GoogleMaps } from '@ionic-native/google-maps';

@Injectable()
export class MapsProvider {

  map: any;

  constructor(public platform: Platform) {
    if(this.platform.is('cordova') && 
      (this.platform.is('ios') || this.platform.is('android'))){
      this.map = new NativeMapsProvider(GoogleMaps);
    } else {
      this.map = new JsMapsProvider();
    }
  }

  init(location, element){
    this.map.init(location, element);
  }

}

Let’s talk through what is taking place above.

First we import the different providers we will be using in this provider:

import { Platform } from 'ionic-angular';
import { JsMapsProvider } from './../js-maps/js-maps';
import { NativeMapsProvider } from './../native-maps/native-maps';
import { GoogleMaps } from '@ionic-native/google-maps';

Then we create a map variable that will eventually hold our map and initialize the Platform provider.

...

@Injectable()
export class MapsProvider {

  map: any;

  constructor(public platform: Platform) {
   ...
  }

In the MapsProvider() constructor we check to see whether we are on the web or on a native device and then initialize the correct Google Maps provider.

...

  constructor(public platform: Platform) {
    if(this.platform.is('cordova') && 
      (this.platform.is('ios') || this.platform.is('android'))){
      this.map = new NativeMapsProvider(GoogleMaps);
    } else {
      this.map = new JsMapsProvider();
    }
  }

...

Finally, we create an init() function that will create the actual map using the users Geolocation and a DOM element to display it in.

  init(location, element){
    this.map.init(location, element);
  }

This function will be called when we decide where we are going to display the map.

The map variable will store the correct provider and call its init() function. We will create the corresponding init function in a later step.

Create your concrete JavaScript Google Maps implementations

Let’s create the providers that will actually create the iOS, Android and JavaScript Google Maps.

Amend your js-maps.ts to the below and we can work through what is taking place.

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

declare var google;

@Injectable()
export class JsMapsProvider {

  map: any;

  constructor() {
    
  }

  init(location, element){
    let latLng = new google.maps.LatLng(location.latitude, location.longitude);

    let opts = {
      center: latLng,
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(element.nativeElement, opts);
  }

}

The first thing to take a note of is our declaring the var google. We do this to stop the compiler from complaining about a missing variable.

declare var google;

Then we create a map variable to hold the Google Map and create the init() function that will initialize and display the map.

@Injectable()
export class JsMapsProvider {

  map: any;

  constructor() {
    
  }

  init(location, element){
    let latLng = new google.maps.LatLng(location.latitude, location.longitude);

    let opts = {
      center: latLng,
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(element.nativeElement, opts);
  }

}

When the init() is fired we use the location to set the center of the map. The new map is created by passing in the options and the DOM element that will hold the map.

Create your concrete Native Google Maps(iOS & Android) implementations

Amend your native-maps.ts to the below and we can work through what is taking place.

import { Injectable } from '@angular/core';
import { GoogleMaps, LatLng, GoogleMapsEvent } from '@ionic-native/google-maps';

@Injectable()
export class NativeMapsProvider {

  map: any;

  constructor(public googleMaps: GoogleMaps) {

  }

  init(location, element){

    let latLng = new LatLng(location.latitude, location.longitude);

    let opts = {
      camera: {
        latLng: latLng,
        zoom: 11,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create(element.nativeElement, opts);

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log('Map is ready!');
    });
  }

}

Note that additional objects have been imported specifically for the native Google Maps implementation.

import { GoogleMaps, LatLng, GoogleMapsEvent } from '@ionic-native/google-maps';

Then we create a map variable to hold the Google Map and create the init() function that will initialize and display the map.

@Injectable()
export class NativeMapsProvider {

  map: any;

  constructor(public googleMaps: GoogleMaps) {

  }

  init(location, element){

    let latLng = new LatLng(location.latitude, location.longitude);

    let opts = {
      camera: {
        latLng: latLng,
        zoom: 11,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create(element.nativeElement, opts);

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log('Map is ready!');
    });
  }

}

When the init() is fired we use the location to set the center of the camera for the map. The new map is created by passing in the options and the DOM element that will hold the map.

We’ve also added a listener that will log out to the console when the GoogleMapsEvent.MAP_READY event is fired. You can add logic here to handle things like adding map markers, changing the map center programmatically etc.

Handle the creation and display of the map on your page

This is the final step to display the map on your page.

First, we create the DOM element that will host our map on the page.

<ion-header>
  <ion-navbar>
    <ion-title>
      Google Maps
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>
</ion-content>

Then we add some styles that will ensure that the DOM element can host the map. If you don’t include this your map will not display.

page-home {
    #map {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    ion-app._gmaps_cdv_ .nav-decor{
        background-color: transparent !important;
    }
}

Finally we create the map by passing the users location and the DOM element to our map provider.

Make the following amendments to your home.ts file to create the map.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { MapsProvider } from './../../providers/maps/maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  location: {
    latitude: number,
    longitude: number
  };

  @ViewChild('map') mapElement: ElementRef;
  
  constructor(public navCtrl: NavController, public geolocation: Geolocation, public mapsProvider: MapsProvider) {
    
  }

  ionViewDidLoad() {
    this.findUserLocation();
  }

  findUserLocation(){
    let options = {
      enableHighAccuracy: true,
      timeout: 25000
    };


    this.geolocation.getCurrentPosition(options).then((position) => {

      this.location = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      };

      this.mapsProvider.init(this.location, this.mapElement);

     }).catch((error) => {
       console.log('Error getting location', error);
     });
  }

}

Testing

We are now ready to test the final implementation. You can do this by running ionic serve to test the web-based implementation of Google Maps. Run ionic cordova run android or ionic cordova run ios to test the iOS and Android implementations.

Unfortunately, Ionic DevApp, does not currently support the native Google Maps implementation.

Conclusion: Ionic Google Maps

This approach to handling Ionic Google Maps is focused on having the flexibility of being able to test in the browser and the performance of running the iOS or Android SDK versions of Google Maps. It takes a bit more effort as you have to maintain the code in two places but I feel the payoff is worth it.

Changing from an existing Google Maps implementation should not be too difficult as long as you don’t leave out any functions when you refactor this alternative approach.

The full completed repo can be viewed here.

Why choose Ionic Framework for your mobile application development framework

Fri, 17 Nov 2017 07:03:47 GMT

Foreword

I wrote this article in early January 2017 and somehow never got round to publishing it. I had planned on publishing it the very next day! Somehow life must have got in the way of my good intentions. After a 10 month hiatus, I decided to re-look at it and see if anything has changed since then and to finally publish it.

I’ve been working with Ionic Framework since 2016 while the framework was still in Beta. The initial commit on MobeeWash was made on the 5th July 2016 and ionic-angular was at 2.0.0-beta.10 at the time. I also worked on an early prototype for MobeeWash in May 2016 using Ionic on an earlier version of the Beta. I tinkered with Ionic before that, in 2015, while it was at version 1 but found Angular 1, at the time, to be bewildering.

The current state of the ecosystem

There are a plethora of options available for developing on the major mobile platforms and I’ve tinkered with the majority of them. I’ve sampled everything from web apps to Xamarin, Titanium and more recently a brief fling with React Native. Going native on both major platforms always felt a bridge too far. Each ecosystem is different and carries its own cognitive load. Going hybrid is the best option if you have a small team and want to be on both platforms as soon as possible.

Ionic has unique advantages that set it apart from others within the mobile application development space. While it is not as performant as native and doesn’t purport to be, it gets damn close to it. The average user cannot spot the difference between a well designed Ionic app and a native one. A fair number of developers would not be able to either.

A vote for Ionic

Ionic provides exactly what it says on the tin. Choose Ionic if you want a technology that allows you to build high-quality mobile applications at breakneck speed. Ionic makes the single code base pipe dream a concrete reality. Your mileage will vary but I’ve had to write very limited platform specific code. The majority of the platform-specific code I’ve written has been isolated to the UI and not logic.

These are some of the key advantages that set Ionic apart.

Use your existing web skills

Ionic allows you to bring your existing web development skills along with you. It has a foundation of familiar and robust web technologies. Angular, Typescript, SCSS and HTML are the key building blocks of Ionic applications. I had no experience with Angular 2 or Typescript when I starting learning it but found it easy to grok.

The ecosystem and tooling will feel familiar if you’re coming from a web development background. I was able to start being productive significantly faster than I expected. Once I understood exactly how all the different pieces fit together and interacted I could start operating at full tilt.

Speed of development and iteration

Ionic allows you to spend most of your time doing your testing in the browser. This saves you from having to deploy to an emulator and/or device which can disrupt your flow. This increases your speed of development and iteration on ideas. Ionic provide convenient live reloading on devices that will speed up your device testing.

Being able to whip together a quick-and-dirty prototype in a week is useful. This allows you to mockup parts of your application while getting feedback. End users can start testing functional prototypes much earlier in the development cycle. Ionic View provides a useful way to get your application in front of your decision makers while Ionic DevApp allows you to test your application live on multiple devices.

You can mockup native plugins that will only run on devices to return mock data on the browser. This ensures that you can spend as much time as possible in the browser where you are the most efficient. Community member, Josh Morony, has a good overview of how to achieve this in the video below.

First class cross-platform support

Ionic currently supports all the major deployment targets for a mobile application. You are able to build and deploy for Android, iOS and Windows Mobile. They have also worked hard on getting full support for Progressive Web Apps. The support is comprehensive and you can use the same code across all platforms.

Ionic allows you to spend less time writing code to support individual platforms and more time focusing on your actual app. That’s a major win in my book.

Ionic allows you to spend less time writing code to support individual platforms and more time focusing on your actual app.

Ionic Native provides support in Ionic for a wide range of Cordova plugins. Cordova allows you to develop in Javascript and interact with the native app environment. Ionic provides interfaces around this native functionality. This allows you to work with native interaction in a consistent and predictable way. Native interaction return promises and observables which are easy to handle for developers.

High quality and well-documented components

Ionic has created a comprehensive set of high-quality components. The components look and act the part of their native counterparts. They have been developed to match the feel of their respective platform. This ensures that Android and iOS components don’t look out of place on the device. They feel natural and performant to the end user.

The components have been completely documented with a number of examples and demos. This is an important consideration that is often overlooked in open source projects. Being able to refer to the documentation with confidence makes a big difference to your daily workflow.

Ionic has made massive strides to make their components sustainable for the long term with their introduction of Stencil.js. They have migrated their Angular-based components to 100% standards compliant web components. This allows you to start using Ionic components without having to use Angular. The change will allow developers to use any Javascript framework or no framework at all with the components.

You can view an introduction to Stencil.js in the video below:

Holistic ecosystem for mobile application development

Ionic has provided a comprehensive toolset to develop a mobile application from genesis to delivery. Their Pro functionality has changed since this article was initially written. It used to include push notifications and user authentication as part of the offering but this has since fallen away. The team also invested time into a real-time database offering but this has been sunsetted. The offering now includes live deployment, application packaging and comprehensive error monitoring.

A subset of this functionality is available in a generous free tier. The paid tiers are reasonably priced starting at $29 for individual developers. This pricing is per user and you can have unlimited applications on your profile. They also have offerings tailored towards teams and enterprise users.

Ionic Market has some plugins and starter packages. The volume is slim and of varying quality. Further options exist to get your project kickstarted. You can find assets on Envato and developers selling direct for example Ionic Themes.

Leverage existing libraries and components

Ionic currently uses the latest version of Angular. At the time of writing, this was Angular 5.0.0. As Angular is the base of your project you can leverage any open source Angular components in your project. If you need a star rating component its a simple a matter of installing a compatible component from NPM. This gives you a massive productivity boost.

Your application runs as a web view with a native wrapper. This gives you the ability to pull in any Javascript library that you would like. If you need a library to work with time or to provide a map then you can turn to Moment or Google Maps without a second thought. It just works.

Transparent leadership, support and an active community

Ionic is an open source project and hosts its repositories on Github. The project milestones are made publicly available along with notes of their weekly framework meeting. They’ve also made their roadmap for the next year available. This view into the behind the scenes activities and the future has engendered a lot of trust.

Ionic has provided both a support forum and Slack channel to get assisted with issues. Both the forum and the Slack channel are active which is always a good sign. I prefer the Slack channel for getting quick answers when stuck on an issue. Mike Hartington, one of the Ionic team members, is omnipresent on the channel assisting users with issues. Do not ping him for the love of all things holy.

What are you waiting for?

Ionic’s ease of development, agile workflow and cross-platform support make it an easy choice for your next mobile application. The wide range of plugins, their high-quality components and the cream of the web’s Javascript libraries will get you developing your next app at lightspeed.

Introduction to Ionic DevApp and first impressions using it

Fri, 17 Nov 2017 07:03:47 GMT

Ionic DevApp Launched

The Ionic team announced the release of their new Ionic DevApp yesterday, 31 October 2017. The team developed the new application with the aim of improving Ionic developers daily workflow.

The application is free to download and can be found on both iOS and Android.

This has come about as a split of their Ionic View app which will remain focused on demoing your app to stakeholders. I use Ionic daily while working on MobeeWash and I was keen to give it a try to see how it would improve my daily workflow.

My typical workflow is to develop and test as much as I can within the browser. The browser currently provides the most efficient development experience and feedback loop.

As a team, we try to create mocks of native functionality to allow it to be easily tested within the browser. This is not always possible and we are forced to either open an emulator or deploy to a device to continue testing. Push notifications on iOS, for example, have to be tested on real devices.

Ionic does support live reload by running either ionic cordova run android -l or ionic cordova run ios -l.

The experience is still not as responsive as the browser. Although, this experience has improved significantly over the last year.

How it works

The Ionic DevApp works by installing it on your iOS and Android device. Your device will need to be on the same network as your development machine and you will need to sign into the app using your Ionic account.

Ionic DevApp will listen in real time for Ionic builds running and will update when you make any changes.

All it takes is the usual ionic serve for this to work.

Some glitches

I decided to give this a shot on both iOS and Android to see what the experience is like.

When I tried running it to test an existing project I got no visual confirmation on the two phones I was using for testing. The application I was using pegged at ionic-angular 3.6.0 for the time being as the update to 3.7.0 would take additional work on our end.

I then ran npm install -g ionic but that didn’t help either.

To see if my project was the issue I decided to create a new project with ionic start.

This did not work either.

The test application would build and provide feedback via the CLI but zero feedback on either of the mobile devices I was using.

I then restarted both devices and was greeted with a list of applications running on my dev machine.

iOS was working without issue but Android gave me a white-screen-of-death. I was able to run the application that I was initially wanting to, so the older version of ionic-angular does not appear to be an issue. At the time of writing, I believe Ionic DevApp on Android is a slightly older version in comparison to iOS so this will hopefully be resolved in future.

Looking much better

Moving around the application felt as fluid as normal on iOS. Running the application via Ionic DevApp did not appear to result in any performance hit.

Making changes to my codebase and saving resulted in an immediate update on the listening device. The interface displays the same Building… loader as shown when using live reload on via ionic cordova.

One of the major features missing from Ionic DevApp is the ability to debug the running applications. I tried to do this via Chrome Inspect but no connection was picked up.

I’m under the impression that you cannot debug applications that have been signed and deployed so I don’t see how they can resolve this in the future.

A further issue that I have not had a chance to test is how Ionic DevApp handles multiple developers working on the same project on the same WiFi network.

They mentioned the app was built using the app in their release notes so I suspect the app is smart enough to pick up specific dev machines and builds?

You can view the supported native plugins here. There is a lot of plugins supported which is really positive. This should provide a large amount of coverage for most use cases.

Firebase Push Notifications are not supported but that’s not too surprising.

In closing

Josh Morony has blogged about Ionic DevApp and some of its limitations after his testing on his blog. He some good insights into some of the apps pros and cons.

Overall, barring the glitches in getting it set up, this has left me pretty excited for the future. The ability to have a body of test devices updating live while developing will result in better quality products. I believe this is a huge step forward for mobile application development.

Hat tip to the Ionic team for another great release!