O'Reilly logo
live online training icon Live Online training

Building Hybrid Mobile Apps with Ionic, Angular, and Cordova

Chris Griffith

The Ionic framework is one of the best solutions for building hybrid mobile applications that behave like native apps across multiple mobile platforms. Join expert Chris Griffith as he walks you through building Ionic applications from scratch using the Ionic CLI. You’ll explore Ionic’s UI components and templates as well as the underlying technologies of Angular and Apache Cordova, giving you a firm understanding of how Ionic, Angular, and Cordova work together to create app-store-ready applications. You’ll also learn how to use Ionic’s cloud services to extend the functionality of your applications.

What you'll learn-and how you can apply it

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

This training course is for you because...

  • You’re a web developer who wants to learn how to create mobile applications with the Ionic framework.
  • You’re a current Ionic developer who is looking to learn the new syntax and capabilities of the latest version Ionic.

Prerequisites

Prerequisites:

  • A general understanding of HTML, CSS, and modern JavaScript
  • Experience with Angular 2 and beyond (useful but not required)

Recommended preparation:

HTML & CSS: The Good Parts (book)

Learning JavaScript, 3rd edition (book)

Beginning JavaScript (Learning Path)

Beginning Programming with JavaScript (video)

On the Road to Angular 2 (Learning Path)

AngularJS: Up and Running (book)

Angular 2 Development with TypeScript (book)

Switching to Angular 2 (book)

Apache Cordova in Action (book)

Recommended follow-up:

Pro Angular, 2nd edition (book)

Angular 2 Development with TypeScript (book)

Apache Cordova in Action (book)

Building Progressive Web Apps (book)

Materials and downloads needed:

  • A connected computer, laptop, or other machine with an up-to-date copy of Google Chrome, Node.js, Xcode (for those wanting to develop for iOS—macOS required), Android Studio (for those wanting to develop for Android), Microsoft Visual Studio Code or similar IDE, and the Ionic CLI installed
  • An Ionic.io account
  • A mobile device (iOS or Android) with the Ionic View mobile app installed (highly recommended)

About your instructor

  • Chris Griffith is a User Experience Engineer specializing in creating prototypes for desktop, web, and mobile devices. He is also an instructor (Mobile Application Development) at UCSD Extension, and an author for lynda.com and O'Reilly. Chris is also an Adobe Community Professional and PhoneGap Build Champion.

Schedule

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)