O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Ionic - Second Edition

Book Description

Create real-time hybrid applications with the leader of HTML5 frameworks: Ionic Framework

About This Book

  • Step into the world of amazingly interactive and real-time app development using Ionic 2
  • Leverage the powerful Angular 2 along with Ionic to develop cutting edge apps
  • Detailed code examples and explanations will help you get up and running with Ionic quickly and easily

Who This Book Is For

This book is for JavaScript developers with basic skills. No previous knowledge of Ionic is required for this book.

What You Will Learn

  • Understanding the world of the mobile hybrid architecture
  • Scaffolding and working with Ionic templates
  • Transforming a single page app to a multi-page app using Navigation Controller
  • Integrating Ionic components, decorators, and services and rapidly developing complex applications
  • Theming Ionic apps as well as customizing components using SCSS
  • Working with Ionic Native to interface with device features, such as camera, notifications, and battery
  • Building a production grade app using Ionic and Uber API to let users book a ride
  • Migrating an Ionic 1 app to Ionic 2 or Ionic 3
  • Performing unit testing, end-to-end testing, and device testing on your apps
  • Deploying Ionic apps to store and manage their subsequent releases

In Detail

Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5, SCSS, and Angular. Ionic also makes app development easier, faster, and more fun.

This hands-on guide will help you understand the Ionic framework and how you can leverage it to create amazing real-time applications. We begin by covering the essential features of Angular 2, and then dive straight into how Ionic fits in today’s world of hybrid app development and give you a better understanding of the mobile hybrid architecture along the way.

Further on, you will learn how to work with Ionic decorators, services, and components, which will allow you to build complex apps using the Ionic framework. We will take a look at theming Ionic apps using the built-in SCSS setup. After that, we will explore Ionic Native, and you will learn how to integrate device-specific features, such as notifications, with the Ionic app. To complete our learning, we will be building a Rider app, using Ionic and Uber API, to book a ride.

Next, you will learn how to unit test, end-to-end test, monkey test, and execute device testing on AWS Device farm. Then, we will take a look at migrating the existing Ionic 1 apps to Ionic 2 and deploy them to the App Store. The final chapter on Ionic 3 wraps up this book by explaining the new features of Ionic 3 at the time of writing this book.

By the end of this book, you will be able to develop, deploy, and manage hybrid mobile applications built with Cordova, Ionic, and Angular.

All the examples in this book are valid for both Ionic 2 and Ionic 3.

Style and approach

A step-by-step, practical approach to learning Ionic using the example of designing an online course app. Each topic is explained sequentially in the process of creating a course. This includes explanations of both basic and advanced features of Ionic.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Conventions
    4. Reader feedback
    5. Customer support
      1. Downloading the example code
      2. Errata
      3. Piracy
      4. Questions
  2. Angular - A Primer
    1. What is new in Angular?
    2. TypeScript primer
      1. Variable typing
      2. Defining types
      3. Classes
      4. Interface
      5. Modules and imports
    3. Angular
      1. Components
      2. Zones
      3. Templates
    4. Giphy app
      1. Architecture
      2. API
      3. Angular CLI
      4. Installing software
      5. Text editors
      6. Scaffolding an Angular 2 app
      7. Building the Giphy app
    5. Summary
  3. Welcome to Ionic
    1. Mobile Hybrid architecture
    2. What is Apache Cordova?
    3. What is Ionic 2?
    4. Ionic 3
    5. Software setup
      1. Installing Node.js
      2. Installing Git
      3. Text editors
      4. Installing TypeScript
      5. Installing Cordova and Ionic CLI
      6. The platform guide
    6. Hello Ionic
    7. The browser developer tools setup
      1. Google Chrome
      2. Mozilla Firefox
    8. The Ionic project structure
      1. The config.xml file
      2. The src folder
    9. Scaffolding the tabs template
    10. Scaffolding the side menu template
    11. Summary
  4. Ionic Components and Navigation
    1. Core components
    2. The Ionic Grid system
    3. Ionic components
      1. Buttons
      2. Lists
      3. Cards
      4. Ionic icons
      5. Modals
      6. Segment
    4. Ionic navigation
      1. Basic navigation
      2. Ionic CLI Sub-Generator
      3. Multi page navigation
    5. Summary
  5. Ionic Decorators and Services
    1. Decorators
      1. Ionic module
      2. Component decorator
    2. Navigation
      1. Passing data between pages
    3. Config service
    4. Platform service
    5. Storage service
    6. Summary
  6. Ionic and SCSS
    1. What is Sass?
    2. Ionic and SCSS
      1. Page-level overrides
      2. Platform-level overrides
      3. Component-level overrides
    3. Theme a sample component
    4. Summary
  7. Ionic Native
    1. Setting up a platform-specific SDK
      1. The Android setup
      2. The iOS setup
    2. Testing the setup
      1. Testing for Android
      2. Testing for iOS
    3. Getting started with Cordova plugins
      1. The Ionic plugin API
        1. Add a plugin
        2. Remove a plugin
        3. List added plugins
        4. Search plugins
      2. Ionic Native
        1. Ionic Native test drive
      3. The Cordova whitelist plugin
    4. Working with Cordova plugins using Ionic Native
      1. Device
      2. Toast
      3. Dialogs
      4. Local notifications
      5. Geolocation
    5. Summary
  8. Building the Riderr App
    1. App overview
    2. Uber APIs
      1. Authentication
      2. Registering with Uber
      3. API
    3. Building Riderr
      1. Scaffolding the app
      2. Uber API service
      3. Integration
      4. Installing dependencies
      5. Testing the app
    4. Summary
  9. Ionic 2 Migration Guide
    1. Why migration?
    2. Todo app - Ionic v1
      1. Building the app
    3. Migration plan
    4. Summary
  10. Testing an Ionic 2 App
    1. Testing methodologies
    2. Setting up the unit testing environment
      1. Setting up the project
      2. Writing unit tests
      3. Executing unit tests
    3. driftyco/ionic-unit-testing-example
    4. E2E testing
      1. Setting up the project
      2. Writing E2E tests
      3. Executing E2E tests
    5. Code coverage
    6. AWS Device Farm
      1. Setting up AWS Device Farm
      2. Setting up Todo app
      3. Monkey testing the Todo app
      4. Manually testing the Todo app on various devices
    7. Automation testing
    8. Summary
  11. Releasing the Ionic App
    1. Preparing the app for distribution
      1. Setting up Icons & Splash screens
      2. Updating the config.xml
      3. The PhoneGap build service
    2. Generating Installers using Cordova CLI
      1. Android installer
      2. iOS installer
    3. Ionic package
      1. Uploading a project to Ionic cloud
      2. Generating the required keys
    4. Summary
  12. Ionic 3
    1. Angular 4
    2. Ionic 3
    3. Ionic 3 updates
      1. TypeScript update
      2. Ionic Page decorator
      3. Lazy Loading
    4. Ionic 2 versus Ionic 3
    5. Summary
  13. Appendix
    1. Ionic CLI
      1. Ionic login
      2. Ionic start
        1. No Cordova
        2. Initializing a project with SCSS support
          1. Listing all Ionic templates
        3. App ID
      3. Ionic link
      4. Ionic info
      5. Ionic state
      6. Ionic resources
      7. Ionic server, emulate, and run
      8. Ionic upload and share
    2. Ionic help and docs
    3. Ionic Creator
    4. Ionic Cloud
    5. Auth
    6. IonicDB
    7. Deploy
    8. Push
    9. Package
    10. Summary