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, 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.

Author Chris Griffith takes you step-by-step through Ionic’s powerful collection of UI components, 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

Table of Content

Chapter 1Hybrid Mobile Apps

What Is the Ionic Framework?

What’s New in Ionic 2?

Comparing Mobile Solutions

Understanding the Ionic Stack

Prerequisites for Ionic ApplicationDevelopment

Summary

Chapter 2Setting Up Our DevelopmentEnvironment

Installing the Ionic Framework

Starting a New Ionic Project

Platform Tools Installations

Setting Emulators

Setting Up Your Devices

Adding Mobile Platforms

Previewing on Emulator

Previewing on Device

Summary

Chapter 3Understanding the Ionic Command-LineInterface

Define Your Build Platforms

Managing Cordova Plugins

Ionic Generator

Previewing Your Application

The Ionic lab Command

Specifying an IP Address to Use

Emulating Your Ionic App

Running Ionic App on a Device

Logging

CLI information

Summary

Chapter 4Just Enough Angular and TypeScript

Why Angular 2?

Understanding ES6 and TypeScript

Summary

Chapter 5Apache Cordova Basics

The History of Cordova (aka PhoneGap)

Apache Cordova versus Adobe PhoneGap

A Deep Dive into Cordova

Configuring Your Cordova App

Device Access (aka Plugins)

Interface Components: The Missing Piece

Why Not Cordova?

Understanding Web Standards

Summary

Chapter 6Understanding Ionic

HTML Structure

Ionic Components

Understanding the SCSS File

Understanding TypeScript

Summary

Chapter 7Building Our Ionic2Do App

Adding our Platforms

Previewing Our Ionic2Do App

Updating the Page Structure

Adding Full-Swipe Gesture

Simple Theming

Proper Typing

Saving Data

Creating a FireBase account

Installing Firebase and AngularFire2

Ionic Build System

Adding AngularFire to Our app.module.ts File

Using Firebase Data

Using Ionic Native

Summary

Chapter 8Building a Tab-Based App

Bootstrapping Our App

Loading Data via the HTTP Service

Display our Data

Generating New Pages

Understanding the Ionic 2 Navigation model

Updating the Park Details Page

Add a Google Map

Rendering the Google Map

Add Map Markers

Adding Search

Theming Our Application

Virtual Scrolling

Custom List Headers

Summary

Chapter 9Building a Weather Application

Getting Started

Exploring the Side Menu Template

Side Menu Options

Displaying the Menu

Converting the Template

Mocking Up Our Weather Provider

Laying Out the Weather Data

Loading Feedback: Loading Dialogs and Pull toRefresh

Adding GeoLocation

Accessing Live Weather Data

Connecting the Geolocation and WeatherProviders

Getting Other Locations’ Weather

Pull to Refresh: Part 2

Editing the Locations

Using a Geocoding Service

Dynamically Updating the Side Menu

Ionic Events

Observables

Styling the App

Add a Weather Icon

Next Steps

Summary

Chapter 10Debugging and Testing Your IonicApplication

Dealing with CORS Issues

Debugging through an iOS or Android Simulator

Debugging On-Device

Debugging Ionic Initialization

Additional Tools

Summary

Chapter 11Deploying Your Application

Adjusting the config.xml File

App Icons and Splash Screens

Building Your Android APK

Building Your iOS App

Summary

Chapter 12Exploring the Ionic Cloud

Setting Up Ionic Cloud

Generating Your Ionic App ID

Configuring Your Application

Ionic Deploy

Security Profiles

Ionic Package

Ionic View

Ionic Creator

Summary

Chapter 13Progressive Web Apps

But What, Exactly, Is a Progressive Web App?

The manifest.json File

Service Workers

Push Notifications

What’s Next?

Chapter 14Conclusion

Components You Should Know About

Next Steps

Ionic Forums

Conclusion

Appendix Migrating Ionic 1 to Ionic 2

Create a New Ionic 2 Application

Switching to Ionic Native

Conclusion

Appendix Understanding the Config.xml File

Essential Properties

Preferences

Icons

Splashscreens

Plugins

Features

Reference

Appendix Ionic Component Library