Mobile App Development with Ionic 2, 1st Edition

Mobile App Development with Ionic 2, 1st Edition

by Chris Griffith
Released April 2017
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491937785

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon
Start your free trial

Book description

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

Publisher resources

View/Submit Errata

Table of contents

  1. Foreword
  2. Preface
    1. Who Should Read This Book
    2. Navigating This Book
    3. Online Resources
    4. Conventions Used in This Book
    5. Using Code Examples
    6. O’Reilly Safari
    7. Acknowledgments
  3. 1. Hybrid Mobile Apps
    1. What Is the Ionic Framework?
    2. What’s New in Ionic 2?
    3. Comparing Mobile Solutions
      1. Native Mobile Applications
      2. Mobile Web Applications
      3. Hybrid Mobile Applications
    4. Understanding the Ionic Stack
      1. Ionic Framework
      2. Angular
      3. Cordova
    5. Prerequisites for Ionic Application Development
    6. Summary
  4. 2. Setting Up Our Development Environment
    1. Installing the Ionic Framework
      1. Installing Node.js
      2. Installing Git
      3. Installing the Apache Cordova CLI
      4. Installing Ionic CLI
    2. Starting a New Ionic Project
      1. Ionic Project Folder Structure
    3. Platform Tools Installations
      1. iOS
      2. Android
      3. Windows Universal
    4. Setting Emulators
      1. iOS
      2. Android
    5. Setting Up Your Devices
      1. iOS
      2. Android
    6. Adding Mobile Platforms
    7. Previewing on Emulator
    8. Previewing on Device
    9. Summary
  5. 3. Understanding the Ionic Command-Line Interface
    1. Define Your Build Platforms
    2. Managing Cordova Plugins
    3. Ionic Generator
    4. Previewing Your Application
    5. The Ionic lab Command
    6. Specifying an IP Address to Use
    7. Emulating Your Ionic App
      1. Emulating iOS Devices
      2. Emulating Android Devices
    8. Running Ionic App on a Device
    9. Logging
    10. CLI information
    11. Summary
  6. 4. Just Enough Angular and TypeScript
    1. Why Angular 2?
      1. Components
      2. Inputs
      3. Templates
      4. Events
      5. Pipes
      6. @ViewChild
    2. Understanding ES6 and TypeScript
      1. Variables
      2. Classes
      3. Promises
      4. Observables
      5. Template Strings
      6. Arrow Functions
      7. Types
      8. Special Types
      9. Typing Functions
      10. :void
    3. Summary
  7. 5. Apache Cordova Basics
    1. The History of Cordova (aka PhoneGap)
    2. Apache Cordova versus Adobe PhoneGap
    3. A Deep Dive into Cordova
    4. Configuring Your Cordova App
    5. Device Access (aka Plugins)
    6. Interface Components: The Missing Piece
    7. Why Not Cordova?
    8. Understanding Web Standards
    9. Summary
  8. 6. Understanding Ionic
    1. HTML Structure
    2. Ionic Components
    3. Understanding the SCSS File
    4. Understanding TypeScript
    5. Summary
  9. 7. Building Our Ionic2Do App
    1. Adding our Platforms
    2. Previewing Our Ionic2Do App
      1. Understanding the index.html File
      2. Exploring the app Directory
    3. Updating the Page Structure
    4. Adding Full-Swipe Gesture
    5. Simple Theming
    6. Proper Typing
    7. Saving Data
    8. Creating a FireBase account
    9. Installing Firebase and AngularFire2
    10. Ionic Build System
    11. Adding AngularFire to Our app.module.ts File
    12. Using Firebase Data
    13. Using Ionic Native
    14. Summary
  10. 8. Building a Tab-Based App
    1. Bootstrapping Our App
    2. Loading Data via the HTTP Service
    3. Display our Data
      1. Extending parklist.ts
    4. Generating New Pages
    5. Understanding the Ionic 2 Navigation model
      1. Passing Data Between Pages
    6. Updating the Park Details Page
    7. Add a Google Map
      1. Adding Additional Typings
      2. Adding Our Content Security Policy
      3. Adjust the CSS to support the Google Map
    8. Rendering the Google Map
    9. Add Map Markers
      1. Making the Markers Clickable
    10. Adding Search
    11. Theming Our Application
    12. Virtual Scrolling
    13. Custom List Headers
    14. Summary
  11. 9. Building a Weather Application
    1. Getting Started
    2. Exploring the Side Menu Template
      1. Exploring the app.component.ts File
    3. Side Menu Options
    4. Displaying the Menu
    5. Converting the Template
    6. Mocking Up Our Weather Provider
    7. Laying Out the Weather Data
    8. Loading Feedback: Loading Dialogs and Pull to Refresh
    9. Adding GeoLocation
    10. Accessing Live Weather Data
    11. Connecting the Geolocation and Weather Providers
    12. Getting Other Locations’ Weather
    13. Pull to Refresh: Part 2
    14. Editing the Locations
      1. Deleting a City
      2. Adding a City
    15. Using a Geocoding Service
    16. Dynamically Updating the Side Menu
    17. Ionic Events
    18. Observables
    19. Styling the App
    20. Add a Weather Icon
    21. Next Steps
    22. Summary
  12. 10. Debugging and Testing Your Ionic Application
    1. Dealing with CORS Issues
    2. Debugging through an iOS or Android Simulator
      1. Android
    3. Debugging On-Device
      1. Android
      2. iOS
    4. Debugging Ionic Initialization
    5. Additional Tools
    6. Summary
  13. 11. Deploying Your Application
    1. Adjusting the config.xml File
    2. App Icons and Splash Screens
    3. Building Your Android APK
      1. Generating the Signing Key
      2. Submitting to the Google Play Store
    4. Building Your iOS App
      1. Request a Distribution Certificate
      2. Create a Distribution Provisioning Profile
      3. Creating the App Listing
      4. Building the App for Production
      5. Creating an Archive of the Application
      6. Using TestFlight Beta Testing
      7. Releasing to the App Store
    5. Summary
  14. 12. Exploring the Ionic Cloud
    1. Setting Up Ionic Cloud
    2. Generating Your Ionic App ID
    3. Configuring Your Application
    4. Ionic Deploy
      1. Setting Up Ionic Deploy
      2. Testing Ionic Deploy
    5. Security Profiles
      1. Creating a Profile
      2. iOS Setup
      3. Supporting iOS Push Notifications
      4. Android Setup
      5. Android Push Notifications
    6. Ionic Package
      1. Preparing a Release Build
      2. Getting Build Information
      3. Getting Your Build Results
      4. Downloading Your Build
      5. Updating Your Cordova Plugins
    7. Ionic View
      1. Supported Plugins
      2. Uploading Your App
      3. Viewing Your App
    8. Ionic Creator
    9. Summary
  15. 13. Progressive Web Apps
    1. But What, Exactly, Is a Progressive Web App?
    2. The manifest.json File
    3. Service Workers
    4. Push Notifications
    5. What’s Next?
  16. 14. Conclusion
    1. Components You Should Know About
      1. Slides
      2. Date-Time
      3. Popover
      4. Reorder List
      5. DeepLinker
      6. Storage
    2. Next Steps
    3. Ionic Forums
      1. Ionic Worldwide Slack Channel
      2. GitHub
    4. Conclusion
  17. A. Migrating Ionic 1 to Ionic 2
    1. Create a New Ionic 2 Application
      1. Create Your Page Structure
      2. Update the Theming
      3. Replacing Your Controllers and Views
      4. Replace Your Factories/Services
      5. Convert the Application Initialization
      6. Update the Routing
    2. Switching to Ionic Native
    3. Conclusion
  18. B. Understanding the Config.xml File
    1. Essential Properties
    2. Preferences
      1. Common General Preferences
      2. Common iOS Preferences
      3. Common Android Preferences
      4. Common Windows Preferences
    3. Icons
      1. Android
      2. iOS
      3. Windows
    4. Splashscreens
      1. Android
      2. iOS
      3. Windows
    5. Plugins
    6. Features
    7. Reference
  19. C. Ionic Component Library
  20. Index

Product information

  • Title: Mobile App Development with Ionic 2, 1st Edition
  • Author(s): Chris Griffith
  • Release date: April 2017
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491937785