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 run 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!

Swiper, no swiping!

Recently, I was asked if there was a solution to disable the swipe to reveal action on particular list items in an Ionic List. I initially wasn’t sure about how to do this. The component itself does not have an enabled property that can be set.

After thinking about it some, I wondered if not having the < ion-item-options > included in the template might serve as a proxy solution. As it turns out, that is exactly what will work. If you do not include the < ion-item-options > in the template there is nothing to reveal, hence no swiping!

noswiping

If you built the Ionic2Do app from my book, here are the few changes you need to make to have this functionality.

First, we need to add a new editable property to our Task class:
  export class Task {
title: string;
status: string;
editable: boolean
}

Next, we need to update our sample data set to include this new property:
this.tasks = [
{ title: 'Milk', status: 'open', editable: false },
{ title: 'Eggs', status: 'open', editable: true},
{ title: 'Syrup', status: 'open', editable: true },
{ title: 'Pancake Mix', status: 'open', editable: true }
];

The last change is actually where it all comes together. In the template, we now use the *ngIf to test if the editable property is true or false. If it is true, then it is included in the render. If this property is false, it is not included in the render and the swipe action will not be allowed.

< ion-item-options *ngIf="task.editable" side="right" (ionSwipe)="removeTask(slidingItem, task)" >

And with that, we have selective control over which items can have the swipe to reveal gesture functioning.

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.