O’Reilly

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.

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.

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.

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.

Hybrid Mobile Apps with Ionic 2

rc_cat
I am excited to announce the early access release of my new book, Hybrid Mobile Apps with Ionic 2! For anyone looking to learn about this powerful mobile framework, this book aims to get you up and running. Here is overview:

The book itself provides a solid overview of hybrid mobile development before diving in and walking you through building 3 different applications. In it, I also cover Angular 2, TypeScript and Apache Cordova.

The core of the book focuses on building three applications, each that showcase different aspects of the Ionic Framework; the Ionic CLI, their starter templates, its component library and more.

Now, this is an early release version of the book, meaning there might be an error or two. Plus, Ionic 2 is not quite done yet, so something might break. I will keep a careful eye on its progress and flag anything that might arise. In the meantime, I will be pushing forward on the rest of the book as its technical dependencies allow.

You can pick up your digital copy from O’Reilly’s website now! I hope you enjoy reading it.