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

Mobile App Development with Ionic, Revised Edition

Mobile App Development with Ionic, Revised Edition

by Chris Griffith
Publisher: O'Reilly Media, Inc.
Release Date: August 2017
ISBN: 9781491998113
View table of contents
Start reading

Book Description

Learn how to build app store-ready hybrid apps with Ionic, the framework built on top of Apache Cordova (formerly PhoneGap) and Angular. This revised 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 Universal.

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 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. How to Contact Us
      8. Acknowledgments
    3. 1. Hybrid Mobile Apps
      1. What Is the Ionic Framework?
      2. What’s New in Ionic?
      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?
        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 Build 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 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 Services
      1. Setting Up Ionic Services
      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 Plug-ins
      7. Ionic View
        1. Supported Plug-ins
        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 From Ionic 1
      1. Create a New Ionic 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. Plug-ins
      6. Features
      7. Reference
    19. C. Ionic Component Library
    20. Index