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

Hybrid Mobile Development with Ionic

Book Description

Build a complete, professional-quality, hybrid mobile application with Ionic

About This Book

  • Develop high-grade and performance-optimized hybrid applications using the latest version of Ionic
  • Discover the latest and upcoming features of Ionic
  • A practical guide that will help you fully utilize all the features and components of Ionic efficiently

Who This Book Is For

The target audience for this book is intermediate-level application developers who have some basic knowledge of Ionic.

What You Will Learn

  • Use every Ionic component and its customization according to the application along with some important third party components
  • Recently released Lazy Loading and Grid System supporting desktop application with Electron
  • Integration of the various Ionic backend services and features such as Ionic Push, DB, Auth, Deploy in your application
  • Exploration of white-listing, CORS, and various other platform security aspects to secure your application
  • Synchronization of your data with the cloud server and fetching it in real time using Ionic Cloud and Firebase services
  • Integration of the Cordova iBeacon plugin which will fetch contextual data on the basis of location and Websockets for real time communication for IOT based applications
  • Implementation of offline functionality in your PWA application using service-worker, cache storage and indexedDB

In Detail

Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps.

This book will help you to develop a complete, professional and quality mobile application with Ionic Framework. You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your applications. You will also implement various native plugins and integrate them with Ionic and Ionic Cloud services to use them optimally in your application. By this time, you will be able to create a full-fledged e-commerce application. Next, you will master authorization, authentication, and security techniques in Ionic 3 to ensure that your application and data are secure. Further, you will integrate the backend services such as Firebase and the Cordova iBeacon plugin in your application. Lastly, you will be looking into Progressive Web Applications and its support with Ionic, with a demonstration of an offline-first application.

By the end of the book, you will not only have built a professional, hybrid mobile application, but will also have ensured that your app is secure and performance driven.

Style and approach

A step-by-step guide (covering all its features and components) to build a complete mobile application using Ionic. Each chapter will cover different 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. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Getting Started with Ionic 3
    1. Angular 4, Ionic 3, and TypeScript
      1. Angular and Ionic myths
      2. Mapping Ionic 1 to Ionic 3
        1. Controllers match components
        2. Filters match pipes
        3. Services match providers
      3. TypeScript comes to the rescue
    2. Installation and setup
    3. Directory structure and modularity
    4. Theming up SASS
      1. Customizing
    5. Automatically creating icons and splash screen resources
      1. Image sizes and specifications
      2. Platform specific resources
    6. Adding Crosswalk browser
    7. Ionic CLI tasks
      1. Local development with Ionic serve
      2. Adding platforms
      3. Running application on devices
      4. Uploading and sharing Ionic application
        1. Ionic upload
        2. Generating components
        3. Ionic share
    8. Summary
  3. Ionic Components
    1. Building vPlanet Commerce
    2. Ionic components
      1. Slides
      2. Lists
      3. Loading and Toast
      4. Tabs versus Segments
      5. Alerts
      6. Cards and Badges
    3. Ionic APIs and custom modules
      1. Complex grids
      2. Custom pipes
      3. Navigation and view lifecycle
        1. Navigating from overlay components
        2. Lifecycle events and Nav Guards
      4. Internationalization and localization
      5. ItemSliding and pull-to-refresh
      6. Virtual scroll and Infinite scroll
      7. Ionic rating
    4. Lazy Loading with Ionic 3
    5. Summary
  4. Ionic Native and Plugins
    1. Cordova and how plugins work
      1. What is Cordova?
      2. Building and using Cordova plugins
        1. Plugin specifications
        2. Plugman
        3. JavaScript interface
        4. Native platform interface
    2. Ionic Native
      1. Installing Ionic Native
      2. Testing plugins in browsers
    3. Commonly used Cordova plugins
      1. Device plugin
      2. Splash screen plugin
      3. Whitelist plugin
        1. Network whitelisting
        2. Navigation whitelisting
        3. Intent whitelisting
      4. Camera plugin
      5. Geolocation plugin
      6. Social sharing plugin
      7. Call number
      8. Text to speech
      9. AppRate
      10. Google analytics
      11. Ionic deeplinks
      12. Facebook connect
      13. Building a music player
      14. Media, streaming, and transfer plugin
    4. Cordova versus phonegap
    5. Summary
  5. Ionic Platform and Services
    1. Ionic Cloud
      1. Installing Ionic Cloud
    2. Ionic Auth
    3. Ionic DB
      1. Authentication and permissions
    4. Ionic push
    5. Ionic deploy
    6. Ionic package
    7. Ionic View, Creator, and Playground
      1. Ionic View
      2. Ionic creator and playground
    8. Summary
  6. Authentication, Authorization, and Security
    1. Authentication
      1. Token based authentication
        1. CORS
        2. Proxy server for the Ionic app
        3. CSRF
    2. Securing the Ionic application
      1. Whitelisting
      2. Enabling SSL
      3. Sensitive data outside the app
      4. Secure storage
      5. General security points
    3. Demonstrating authorization in Ionic
    4. Summary
  7. TasteBite App with Firebase
    1. Introduction to Firebase and TasteBite apps
      1. Building TasteBite and installing Firebase
    2. Authentication and security using Firebase
      1. Enabling providers
      2. User auth state
    3. CRUD and securing data with AngularFire2
      1. CRUD operations
        1. Structuring and securing data
    4. Summary
  8. Ionic, IOT, and Beacons
    1. Ionic and IOT
      1. Ionic + Node = deadly combination
    2. BLE, beaconsm, and the physical Web
      1. iBeacons
      2. Eddystone and the physical Web
    3. Proximity-based screen lock using BLE
    4. Summary
  9. Ionic + PWA = Magic
    1. What and why PWA?
      1. Advantages of PWA
      2. Disadvantages of PWA
    2. Ionic supports PWA
      1. What makes a web application a PWA?
      2. PWA with Ionic
        1. Web manifest
        2. Service workers
    3. Offline currency converter PWA
    4. The future of PWAs
    5. Summary