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!

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!