Live Online Training

banner
I am pleased to announce I will be giving another live online training on Ionic 3 through O’Reilly training. The online sessions will be held on September 5 & 6, 2017 from 10:00 am – 1:00 pm 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.

What is the Ionic Framework?

I had the good pleasure of presenting to a full room at the recent SoCal Code Camp on the Ionic Framework. Here are my slides from the talk.

ionic-slide

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.

More Ionic CLI Updates

In preparation for my Safari Online Training, I was checking all the course instructions and discovered a surprise. With version 2 of the Ionic CLI, we could generate new Ionic apps based on external URLs, like GitHub repos. This is exactly what I did for two of the apps in my book. But, with the latest release of the Ionic CLI, this functionality has been disabled. Here are the steps you need to take to get back on track for each of those sample apps in the book.

IonicParks

Instead of just using the start command in the CLI, now we will need to manually overwrite the src directory with our new starter.

$ ionic start IonicParks tabs

In the IonicPark directory that was just created, delete the src directory.

Next, download the master branch from https://github.com/chrisgriffith/Ionic2Parks to another location. Unzip these files, then copy this src directory into the IonicParks directory. You should now be ready to work your way through the chapter.

IonicWeather

The same procedure for this application.

$ ionic start IonicWeather sidemenu

In the IonicWeather directory that was just created, delete the src directory.

Next, download the master branch from https://github.com/chrisgriffith/Ionic2Weather to another location. Unzip these files, then copy this src directory into the IonicWeather directory. You should now be ready to work your way through the chapter.

 

 

AngularFire 2 Updates

As I warned in the book about “everything in beta” (a phrase my friend Leif Wells loves to quote), some recent updates to AngularFire 2 impact the To Do application in my book.The reason behind these changes is by breaking AngularFire into smaller modules, your app will load and run faster (always a good thing). For example, if you don’t need the user auth module in AngularFire, no need to load it.

There are just a few minor changes, so let get started…

First, make sure you have installed the latest versions of AngularFire2 and Firebase. Check your package.json and check the version numbers:

"angularfire2": "^4.0.0-rc.0",
"firebase": "^3.9.0"
If you are referencing an older version, update the version numbers and update your node modules.
Next, in the app.module.ts file you need to now import this additional module:
import { AngularFireDatabaseModule } from 'angularfire2/database';

and then include it within the imports array:

imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp),
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireDatabaseModule
]
The tasklist.ts file will also need two changes. The first is to change
import { AngularFire, FirebaseListObservable } from 'angularfire2';

to

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

The AngularFire variable will need to be typed to AngularFireDatabase.

constructor(public navCtrl: NavController, public af: AngularFireDatabase, public dialogs: Dialogs) {...}

Finally, our reference to the data is now just:

this.tasks = af.list('/tasks');

And with that, your Ionic2Do app will run with the latest AngularFire.

Using the new Ionic CLI

With the release of the new Ionic CLI, several of the commands used throughout my book, Mobile App Development with Ionic 2, are now different. Here is a short table of the slight changes you need to make in order to use the new CLI:

v2 command v3 command
ionic start [appName] [template] --v2 ionic start [appName] [template]
ionic platform add|remove [platform] ionic cordova platform add|remove [platform]
ionic plugin add|remove [plugin] ionic cordova plugin add|remove [plugin]
ionic emulate ionic cordova emulate
ionic run ionic cordova run
ionic build ionic cordova build

If you ever have a question, the help in the CLI is greatly improved. You just need to add --help after any command.

What’s new in the Ionic CLI v3!

In addition to working on the framework itself, the Ionic team has also been working on improving the CLI as well. In this post, I am going to touch on some of the changes and improvements you need to be aware of. For those who bought my book, an update will be coming shortly to help guide you through those specific changes.

The two main goals of the complete rewrite of the CLI were to improve its performance and to make the overall user experience of using it better. From my use of it, I can say that they met those goals. As of now, the new CLI is at 3.0.0.rc1, but I suspect the final release is right around the corner.

To install the Ionic v3 Beta CLI, run  npm install -g ionic@beta

Defaulting to Ionic 2+

Previously, you had to opt in to have the CLI generate version 2/3 Ionic app, by using the –v2 flag. That requirement has been dropped! Now, by default, the CLI will generate Ionic 2+ apps. If you need to generate an Ionic 1 app, the new command is
ionic start mynewapp blank --type ionic1

Platform Management

In the past, if you used the CLI on a Mac, the iOS platform was automatically added. Ionic being used for Progressive Web Apps (PWAs) and Electron apps, so having the iOS platform was not always the right choice. Now, we must explicitly add iOS, just like we have always had to do with Android, but with one slight change.

Cordova Commands Namespaced

Another big change to the CLI is all the commands that relate to interacting with the Cordova CLI now require you to include cordova as part of the command. For example, using the v2 CLI, to add a platform we would simply say ionic platform add ios. Now, using the v3 CLI, the command is ionic cordova platform add ios.  Here is a list of the namespaced commands:

  • cordova build ……. Build (prepare + compile) an Ionic project for a given platform
  • cordova compile ……. Compile native platform code
  • cordova emulate ……. Emulate an Ionic project on a simulator or emulator
  • cordova platform ……. Add or remove a platform target for building an Ionic app
  • cordova plugin ……. Manage Cordova plugins
  • cordova prepare ……. Transform metadata to platform manifests and copies assets to Cordova platforms
  • cordova resources ……. Automatically create the icon and splash screen resources
  • cordova run ……. Run an Ionic project on a connected device

The reasoning behind this is to allow for future platform support, as well as to reduce internal code clutter. Also, the Ionic CLI’s Cordova functionality has been moved into a plugin, which is installed by default with new Ionic projects and can be installed in existing Ionic projects with npm i --save @ionic/cli-plugin-cordova.

Guided Help

I mentioned that one of the goals of the CLI was to improve the user experience. For example, using the CLI’s generate command, this is what happens when we use it to generate new tabs:

$ ionic g tabs
? What should the name be? myTab
? How many tabs? 4
? Name of this tab: home
? Name of this tab: maps
? Name of this tab: contacts
? Name of this tab: more
[OK] Generated a tabs named myTab!

The CLI now guides us through the process of spawning our new tabs. Even the ionic start command has interactive prompts available!

In addition, the CLI also provides a lot more help to the user. If you are ever unsure of a command, just add the --help flag and you should have your answer.

Updating Your Existing Ionic Apps

If you are working with an existing Ionic project you will also need to execute the following command in your project directory.

For Ionic1 Projects
npm install --save-dev @ionic/cli-plugin-ionic1@beta @ionic/cli-plugin-cordova@beta

For Ionic2/3 Project
npm install --save-dev @ionic/cli-plugin-ionic-angular@beta @ionic/cli-plugin-cordova@beta

If you need additional documentation, it can be found in the project’s README. If you encounter an issue, let the team know by filing an issue on the repo for the project http://github.com/driftyco/ionic-cli

Happy Coding!