Author: Chris Griffith

I am a rapid prototype software developer. My other interests include interaction design, web standard, rich internet applications, and mobile.

What is the Ionic Framework?

I am giving a presentation at the next San Diego JS Monthly Meeting, May 2 @ 7:30 pm. If you have ever been curious about what Ionic is and how it works, this talk is for you.

What is the Ionic Framework? The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.

In this talk, I will give you an overview of the Ionic Framework, show how to install it, and finally build a quick app and deploy it to both iOS and Android using some of the additional Ionic.io services.

Hope to see you there!

Customizing Ionic Generators

I recently was having a conversation with @leifwells about some Ionic development, and he mentioned that he was having to add in some Google analytics code on each of his existing pages. This led to talking about being able to modify the templates the Ionic generate command uses to include custom items. For example, this might be some standard code like adding in the shell code for GA, or it might be needing to add in legal notices required by corporate. After some failed attempts wandering through various repos on GitHub, I ask the Ionic team where they were kept. I had thought they would be in the CLI or maybe in the app-scripts. Instead, they are in the ionic-angular package. Specifically, the templates are located here: node_modules/ionic-angular/templates/.

Here is what the ts.tmpl file for a page contains:

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

/**
 * Generated class for the $CLASSNAME page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
 selector: 'page-$FILENAME',
 templateUrl: '$FILENAME.html',
})
export class $CLASSNAME {

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

 ionViewDidLoad() {
   console.log('ionViewDidLoad $CLASSNAME');
 }

}

Now, if you have been developing with Ionic for a while, you probably delete the comment block at the top of the file, as well as the console.log call within the ionViewDidLoad function. By editing the actual template, we can save ourselves those steps.

Note, the edits you make here can be overwritten by running npm install, and they are specific to this specific Ionic App. You will need to keep your template changes in another directory and apply them again to each new project.

Now, that you know where these templates are located, you can go in and adjustment to improve your workflow. Happy coding!

Live Online Training: Building Hybrid Mobile Apps with Ionic, Angular, and Cordova

 

I am pleased to announce I will be giving live online training on Ionic through O’Reilly training. The online sessions will be held on June 5 & 6, 2017 from 7:00 am – 10:00 am PDT.
By the end of this live, online course, you’ll understand:
  • How Ionic, Cordova, and Angular work together to create hybrid mobile apps
  • How to design and program Ionic apps
  • How to publish your applications to the app stores
And you’ll be able to:
  • Generate Ionic applications using the Ionic CLI
  • Use common Ionic UI components
  • Extend your Ionic applications with Ionic Native
  • Preview your applications on your devices
  • Compile your applications to ready them for submission to mobile app stores
Here is the course outline:
The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Introduction to Ionic (20 minutes)

  • Lecture: What’s new in Ionic 2; introduction to the Ionic CLI; Ionic file structure
  • Hands-on exercise: Create an Ionic blank template

Introduction to Angular and TypeScript (30 minutes)

  • Lecture: Introduction to Angular and TypeScript
  • Hands-on exercise: Short quiz

Building your first app (30 minutes)

  • Lecture: Building your first app with Ionic2Do; using Ionic serve to preview your application
  • Hands-on exercise: Compile and run your Ionic2Do app locally in the browser

Break (10 minutes)

Styling your Ionic app (30 minutes)

  • Lecture: How Ionic apps are themed; using Ionic View to quickly preview the app on your device
  • Hands-on exercise: Preview your app on your mobile device (with data stored remotely)

Ionic Native (30 minutes)

  • Lecture: Adding native touches to your application using Cordova plugins via Ionic Native; publishing the application to the app stores
  • Hands-on exercise: Replace the JavaScript dialog with a native dialog

Debugging Ionic applications (20 minutes)

  • Lecture: How to debug your application
  • Hands-on exercise: Use Chrome or Safari to remote debug your application

Wrap-up and Q&A (10 minutes)

DAY 2

Building your second app (30 minutes)

  • Lecture: Building an app with IonicParks; exploring Ionic Tabs; loading data; Ionic Lists
  • Hands-on exercise: Build an application using the local data file and rendering the park list

Ionic navigation (30 minutes)

  • Lecture: How navigation works in an Ionic application; using the Ionic generate command to improve your workflow; designing the park details screen
  • Hands-on exercise: Generate and populate the park details screen of the app

Google Maps integration (30 minutes)

  • Lecture: Adding a map to your application; custom classes
  • Hands-on exercise: Add a live Google map to your application

Break (10 minutes)

Exploring other Ionic components (30 minutes)

  • Lecture: Common Ionic components (slides, popover, date and time, toast, grid, and gestures)
  • Hands-on exercise: Short quiz

Accelerate your application’s development and features (30 minutes)

  • Lecture: The larger elements of Ionic that can accelerate your application’s development and features (exploring Ionic.io, deploy, build, notification, and users)
  • Hands-on exercise: Short quiz

Next steps, wrap-up, and Q&A (20 minutes)

I hope to see you there.
To sign up for the course, visit Safari Online.

Updating MOBILE APP DEVELOPMENT WITH IONIC

bookcoverJust as I thought I was done with the final edits on my Mobile App Development with Ionic 2 book, Ionic releases Ionic 3…

Fortunately, I was attending ng-conf, so I quickly got all the inside scoop on this new release from Mike and Josh from the Ionic team, who were also in attendance. Rather than delay the book, yet again to breaking changes, I opted to write new appendix that covers these new changes and what steps you need to take to have the three sample apps work under Ionic 3.

You can download the appendix now, and get up to speed using Ionic 3!

Mobile App Development with Ionic is Released!

My Ionic book has just been published by O’Reilly!

Mobile App Development with Ionic 2 Cross-Platform Apps with Ionic, Angular, and Cordova

Mobile App Development with Ionic 2 Cross-Platform Apps with Ionic, Angular, and Cordova

Learn how to build app store-ready hybrid apps with the Ionic 2/3, the framework built on top of Apache Cordova (formerly PhoneGap) and Angular. This practical guide shows you how to use Ionic’s tools and services to develop apps with HTML, CSS, and TypeScript, rather than rely on platform-specific solutions found in Android, iOS, and Windows Phone.

The book takes you step-by-step through Ionic’s powerful collection of UI component and then helps you use it to build three cross-platform mobile apps. Whether you’re new to this framework or have been working with Ionic 1, this book is ideal for beginning, intermediate, and advanced web developers.

  • Understand what a hybrid mobile app is, and what comprises a basic Ionic application
  • Learn how Ionic leverages Apache Cordova, Angular, and TypeScript to create native mobile applications
  • Create a Firebase-enabled to-do application that stores data across multiple clients
  • Build a tab-based National Park explorer app with Google Map integration
  • Develop a weather app with the Darksky weather API and Google’s GeoCode API
  • Debug and test your app to resolve issues that arise during development
  • Walk through steps for deploying your app to native app stores
  • Learn how Ionic can be used to create Progressive Web Apps

The digital version is available now, and the print edition will be out soon. Amazon, Barnes & Noble, or O’Reilly.

Understanding the Default Ionic Plugins

When you create a new Ionic application, six plugins are automatically installed. This post will take a brief look at them and how they are used within your Ionic app.

 

What is a Cordova plugin?

A plugin is a bit of add-on code that provides JavaScript interface to native components. They allow your app to use native device capabilities beyond what is available to pure web apps.

cordova-plugin-whitelist

If your application is going to run on Android, this plugin is critical if you want to interact with any external resources.  The Navigation, Intent and Network Request whitelists are defined within the config.xml file.

cordova-plugin-statusbar

This plugin allows you to customize the Android and iOS statusbar. Starting with iOS 7, the webview that would contain our Ionic application would have the statusbar overlaid with the web content. In the default app initialization code, this plugin is called to reset the positioning.

cordova-plugin-device

Ionic uses this plugin as part of its platform method. This allows it to resolve the actual device type our application is running on.

cordova-plugin-console

To enable better development logging while running on device, this plugin is installed for us. As a reminder, you should remove this plugin before making a production build.

cordova-plugin-splashscreen

The other plugin used during the app initialization code is the Splashscreen plugin. It is used to hide your splash screen image once the app is ready.

ionic-plugin-keyboard

The final pre-installed plugin is the Ionic keyboard plugin. One issue with working with the device’s native keyboard was how the content in the webview responded. This plugin gives you more control in interacting with the keyboard. Notably, the ability to show and hide it programmatically, hide the Accessory Bar and disable scrolling of the content.

As you can see from these brief descriptions, these six plugins provide some of the common interface adjustments almost all Ionic developers would perform on their applications. Now, you should have a better idea of why they are pre-bundled for us.

If you want to learn more about developing Ionic applications, you can get a copy of Mobile App Development with Ionic 2 from your favorite bookseller.