Hybrid Mobile Development with Ionic

Title Page

Hybrid Mobile Development with Ionic

Build high performance hybrid applications with HTML, CSS, and JavaScript

Gaurav Saini

    BIRMINGHAM - MUMBAI

Copyright

Hybrid Mobile Development with Ionic

Copyright © 2017 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2017

Production reference: 1250417

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham 

B3 2PB, UK.

ISBN 978-1-78528-605-6

www.packtpub.com

Credits

About the Author

Open-source enthusiastic, Javascript full stack developer with Node.js, AngularJS, electron and Ionic. Currently working on IOT projects with BLE Beacons. Gaurav have been researching on VOIP technologies, IOT and material design whenever he get time from his daily activities. Gaurav is also associated with Apache software foundation where he is contributor and committer to Apache Roller, Apache Fineract and Apache OFBiz projects. He was selected and invited as speaker at multiple conferences Mifos Techdays, ApacheCON, Mifos Summit and also into many local colleges/institutions.

Gaurav was a student intern Google Summer of Code Student in 2014 and Mentored in 2016 with Mifos Initiative worked on AngularJs based community-app. He was selected as delegate for GSOC Summit in 2014 and 2016 San Fransico. He had worked on Google Adwords and analytics in past and was semi-finalist in Google Online Marketing Challenge in 2012.

I would like to thank my parents and my late uncle Raj, without them it would be really difficult for me to reach to here and write a book. Also, at difficult times my best friend Seema came with full support to continue working hard.

A special thanks also goes to my interns and content editor as they have been helping alot during the course of the book. It was pleasure to work with great minds around you.

Lastly, I want to thank you all for showing interest in this book and I hope that I can pass my enthusiasm to join Ionic community and take your exciting journey to new heights.

About the Reviewer

Nitish Sinha is a techie from Jharkhand, and is believer of Steve Jobs words:

The only way to do great work is to love what you do.

Nitish have managed to complete various projects as a freelancer and had the good fortune to be able to channel this obsession into something productive.

He joined TERI, India Habitat Centre, New Delhi as software developer, dealing with Angular.js and Ionic based hybrid apps along with PHP based web applications.

I would like to thanks all my mentors at each and every stage, whose golden words are inspiration for me.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Customer Feedback

Thanks for purchasing this Packt book. At Packt, quality is at the heart of our editorial process. To help us improve, please leave us an honest review on this book's Amazon page at https://www.amazon.com/dp/1785286056.

If you'd like to join our team of regular reviewers, you can e-mail us at [email protected]. We award our regular reviewers with free eBooks and videos in exchange for their valuable feedback. Help us be relentless in improving our products!

Table of Contents

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

Getting Started with Ionic 3

Angular 4, Ionic 3, and TypeScript

Angular and Ionic myths

Mapping Ionic 1 to Ionic 3

Controllers match components

Filters match pipes

Services match providers

TypeScript comes to the rescue

Installation and setup

Directory structure and modularity

Theming up SASS

Customizing

Automatically creating icons and splash screen resources

Image sizes and specifications

Platform specific resources

Adding Crosswalk browser

Ionic CLI tasks

Local development with Ionic serve

Adding platforms

Running application on devices

Uploading and sharing Ionic application

Ionic upload

Generating components

Ionic share

Summary

Ionic Components

Building vPlanet Commerce

Ionic components

Slides

Lists

Loading and Toast

Tabs versus Segments

Alerts

Cards and Badges

Ionic APIs and custom modules

Complex grids

Custom pipes

Navigation and view lifecycle

Navigating from overlay components

Lifecycle events and Nav Guards

Internationalization and localization

ItemSliding and pull-to-refresh

Virtual scroll and Infinite scroll

Ionic rating

Lazy Loading with Ionic 3

Summary

Ionic Native and Plugins

Cordova and how plugins work

What is Cordova?

Building and using Cordova plugins

Plugin specifications

Plugman

JavaScript interface

Native platform interface

Ionic Native

Installing Ionic Native

Testing plugins in browsers

Commonly used Cordova plugins

Device plugin

Splash screen plugin

Whitelist plugin

Network whitelisting

Navigation whitelisting

Intent whitelisting

Camera plugin

Geolocation plugin

Social sharing plugin

Call number

Text to speech

AppRate

Google analytics

Ionic deeplinks

Facebook connect

Building a music player

Media, streaming, and transfer plugin

Cordova versus phonegap

Summary

Ionic Platform and Services

Ionic Cloud

Installing Ionic Cloud

Ionic Auth

Ionic DB

Authentication and permissions

Ionic push

Ionic deploy

Ionic package

Ionic View, Creator, and Playground

Ionic View

Ionic creator and playground

Summary

Authentication, Authorization, and Security

Authentication

Token based authentication

CORS

Proxy server for the Ionic app

CSRF

Securing the Ionic application

Whitelisting

Enabling SSL

Sensitive data outside the app

Secure storage

General security points

Demonstrating authorization in Ionic

Summary

TasteBite App with Firebase

Introduction to Firebase and TasteBite apps

Building TasteBite and installing Firebase

Authentication and security using Firebase

Enabling providers

User auth state

CRUD and securing data with AngularFire2

CRUD operations

Structuring and securing data

Summary

Ionic, IOT, and Beacons

Ionic and IOT

Ionic + Node = deadly combination

BLE, beaconsm, and the physical Web

iBeacons

Eddystone and the physical Web

Proximity-based screen lock using BLE

Summary

Ionic + PWA = Magic

What and why PWA?

Advantages of PWA

Disadvantages of PWA

Ionic supports PWA

What makes a web application a PWA?

PWA with Ionic

Web manifest

Service workers

Offline currency converter PWA

The future of PWAs

Summary

Preface

This book teaches you how to master in hybrid mobile development using Ionic. 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.

Initial idea to write this book is to help understand developers what is the building blocks and necessary points to look for while you are developing an enterprise level or highly scalable Ionic application. Also, in the later half of the book we will target some latest features in Ionic such as IOT and PWA support. We have made sure that every concept addressed in this book is explained in easy language, and also with a technical example.

What this book covers

Chapter 1, Getting Started with Ionic 3, we will be going through all the essentials of Ionic, which will help in building large scale and enterprise grade applications.

Chapter 2, Ionic Components, will guide you towards Ionic components and how we can customize them according to our applications.

Chapter 3, Ionic Native and Plugins, covers almost everything regarding Cordova plugins, Ionic Native and some common and advance plugins. 

Chapter 4, Ionic Platform and Services, covers all the Ionic Platform services and how to use them in best way in your application.

Chapter 5, Authentication, Authorization, and Security, will be dealing with authentication, securing Ionic application and demonstrating authorization.

Chapter 6, TasteBite App with Firebase, focuses on building entire application from start to end by using Backend as a Service platform Firebase.

Chapter 7, Ionic, IOT and Beacons, we will be discussing about IOT, BLE and Physical Web. Besides this will demonstrate ibeacon based proximity application where your laptop will screen lock as soon as you will move away from your laptop.

Chapter 8, Ionic + PWA = Magic, we will be looking into Progressive Web Applications and its support with Ionic with a demonstration of offline-first currency converter application.

What you need for this book

You’ll need Sublime or Visual Studio Code for code editing. Both of these are available free for download. For BLE demo you will need a laptop with Bluetooth 4 supported or Bluetooth BLE beacon.

Who this book is for

This book is for intermediate-level application developers who have some basic knowledge of Ionic. Those who want to migrate their applications from Ionic 1 to Ionic 3 this book will be very helpful and who want to get latest technology updates such as PWA support with Ionic.

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: For setting up the APIs endpoints we have created constants file where we declared constant API_URL

A block of code is set as follows:

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

Any command-line input or output is written as follows:

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: Cancel and OK buttons. We have used this here for sorting the products according to relevance price or other sorting values.

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book 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 files e-mailed directly to you.

You can download the code files by following these steps:

Log in or register to our website using your e-mail address and password.

Hover the mouse pointer on the SUPPORT tab at the top.

Click on Code Downloads & Errata.

Enter the name of the book in the Search box.

Select the book for which you're looking to download the code files.

Choose from the drop-down menu where you