Learning Ionic, Second Edition: Hybrid mobile apps with HTML5, CSS3, and Angular

Title Page

Learning Ionic

Second Edition

Build hybrid mobile applications with HTML5, SCSS, and Angular

Arvind Ravulavaru

BIRMINGHAM - MUMBAI

Copyright

Learning Ionic

Second Edition

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: July 2015

Second edition: April 2017

Production reference: 1260417

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-78646-605-1

www.packtpub.com

Credits

About the Author

Arvind Ravulavaru is a full stack consultant having over 8 years of experience in software development. For the last 4 years, Arvind has been working extensively on JavaScript, both on the server- and the client-side. Before that, Arvind worked on big data analytics, cloud provisioning, and orchestration. Arvind has good exposure on various databases and has also developed and architected applications built using Node.js.

For the past 2 years, Arvind has been working on his own startup, named The IoT Suitcase http://theiotsuitcase.com. With his experience in software development and his passion for building products, Arvind has architected and developed an end-to-end platform for rapidly building IoT products and solutions. The IoT Suitcase provides all the pieces needed to build an IoT solution, right from hardware to a mobile app with analytics and IFTTT as add-ons.

Apart from that, Arvind provides training, empowering companies with the latest and greatest technology in the market. He also conducts startup workshops, where he teaches rapid prototyping with today's amazing tooling stack and how to take ideas to the market in a very short time.

Arvind always looks for ways to contribute to the open source community in making this world a better place for developers. As an architect/consultant, he always tries to power amazing business ideas with awesome technology solutions (he is language agnostic), moving the human race up the technology evolution chain.

You can reach Arvind on his blog at http://thejackalofjavascript.com.

Arvind has written a book named Learning Ionic, which talks about building Mobile Hybrid applications using Ionic Framework v1. He has also signed the contract for his next book, named Advanced IoT with JavaScript, where he plans to show how to build IoT solutions using JavaScript.

Acknowledgements

First off, I would like to thank all the people who have purchased my Learning Ionic book. The support from you guys was tremendous; I really appreciate it. I would like to thank the Packt team for doing an amazing job in releasing the books on time.

Since the book was released, I have been busy building The IoT Suitcase. Thanks to Udaykanth Rapeti for spending a good year with me bringing this to the position it is now. I would like to take a moment to thank Surya Narayana Murthy for being part of this start up. He has given me tremendous support and invaluable advice in taking things to the next level. I would like to give special thanks to Murthy Prakki for everything he has done for the team and me.

Thanks to the awesome team at The IoT Suitcase, who would kept asking me about the status of the book frequently, and have been eagerly waiting for its release.

Last but not least, thanks to the entire team of Packt for supporting me. I sincerely thank my content editors Divij Kotian (and team), Sachin Karnani, and Merwyn D’souza. Thanks to Reshma Raman and the production team for taking the book to press.

Special thanks to my family for bearing me every day and going through all my shenanigans without complaining. Thank you.

About the Reviewer

Mike Hartington is a developer for the Ionic Framework with years of experience in mobile development with hybrid technologies. Within Ionic, Mike works with the framework team and the community members, helping to ensure that the code being shipped is well documented, tested, and easy to understand. Along with working on Ionic for his day to day, Mike is also a Google Developer Expert and an Egghead.io author, helping people learn new technologies with both.

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/1786466058.

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!

Dedication

Thanks to Mike Hartington for reviewing the book and providing valuable insights into the world of Ionic.

Dedication2

The only way out is through

Table of Contents

Preface

What this book covers

What you need for this book

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

Angular - A Primer

What is new in Angular?

TypeScript primer

Variable typing

Defining types

Classes

Interface

Modules and imports

Angular

Components

Zones

Templates

Giphy app

Architecture

API

Angular CLI

Installing software

Text editors

Scaffolding an Angular 2 app

Building the Giphy app

Summary

Welcome to Ionic

Mobile Hybrid architecture

What is Apache Cordova?

What is Ionic 2?

Ionic 3

Software setup

Installing Node.js

Installing Git

Text editors

Installing TypeScript

Installing Cordova and Ionic CLI

The platform guide

Hello Ionic

The browser developer tools setup

Google Chrome

Mozilla Firefox

The Ionic project structure

The config.xml file

The src folder

Scaffolding the tabs template

Scaffolding the side menu template

Summary

Ionic Components and Navigation

Core components

The Ionic Grid system

Ionic components

Buttons

Lists

Cards

Ionic icons

Modals

Segment

Ionic navigation

Basic navigation

Ionic CLI Sub-Generator

Multi page navigation

Summary

Ionic Decorators and Services

Decorators

Ionic module

Component decorator

Navigation

Passing data between pages

Config service

Platform service

Storage service

Summary

Ionic and SCSS

What is Sass?

Ionic and SCSS

Page-level overrides

Platform-level overrides

Component-level overrides

Theme a sample component

Summary

Ionic Native

Setting up a platform-specific SDK

The Android setup

The iOS setup

Testing the setup

Testing for Android

Testing for iOS

Getting started with Cordova plugins

The Ionic plugin API

Add a plugin

Remove a plugin

List added plugins

Search plugins

Ionic Native

Ionic Native test drive

The Cordova whitelist plugin

Working with Cordova plugins using Ionic Native

Device

Toast

Dialogs

Local notifications

Geolocation

Summary

Building the Riderr App

App overview

Uber APIs

Authentication

Registering with Uber

API

Building Riderr

Scaffolding the app

Uber API service

Integration

Installing dependencies

Testing the app

Summary

Ionic 2 Migration Guide

Why migration?

Todo app - Ionic v1

Building the app

Migration plan

Summary

Testing an Ionic 2 App

Testing methodologies

Setting up the unit testing environment

Setting up the project

Writing unit tests

Executing unit tests

driftyco/ionic-unit-testing-example

E2E testing

Setting up the project

Writing E2E tests

Executing E2E tests

Code coverage

AWS Device Farm

Setting up AWS Device Farm

Setting up Todo app

Monkey testing the Todo app

Manually testing the Todo app on various devices

Automation testing

Summary

Releasing the Ionic App

Preparing the app for distribution

Setting up Icons & Splash screens

Updating the config.xml

The PhoneGap build service

Generating Installers using Cordova CLI

Android installer

iOS installer

Ionic package

Uploading a project to Ionic cloud

Generating the required keys

Summary

Ionic 3

Angular 4

Ionic 3

Ionic 3 updates

TypeScript update

Ionic Page decorator

Lazy Loading

Ionic 2 versus Ionic 3

Summary

Appendix

Ionic CLI

Ionic login

Ionic start

No Cordova

Initializing a project with SCSS support

Listing all Ionic templates

App ID

Ionic link

Ionic info

Ionic state

Ionic resources

Ionic server, emulate, and run

Ionic upload and share

Ionic help and docs

Ionic Creator

Ionic Cloud

Auth

IonicDB

Deploy

Push

Package

Summary

Preface

This book explains how to build Mobile Hybrid applications with ease using Ionic. Be it simple apps that integrate with REST APIs or complex apps that involves native features, Ionic provides a simple API to work with them.

With a basic knowledge of web development and TypeScript, and a decent knowledge of Angular, one can easily convert a million-dollar idea into an app with a few lines of code.

In this book we will explore how you can do this.

What this book covers

Chapter 1, Angular - A Primer, introduces you to the power of all-new Angular. We will look at the basics of TypeScript and the concepts to understand Angular. We will be looking at Angular Modules, Components, and Services. We will conclude the chapter by building an app using Angular.

Chapter 2, Welcome to Ionic, talks about the Mobile Hybrid framework called Cordova. It shows how Ionic fits into the bigger picture of Mobile Hybrid application development. This chapter also walks through the software needed for application development using Ionic.

Chapter 3, Ionic Components and Navigation, walks you through the various components of Ionic, right from Header to a Navbar. We also take a look at navigation between pages using the Ionic Framework.

Chapter 4, Ionic Decorators and Services, explores the decorators that we use for initializing various ES6 classes. We will also be looking at the Platform Service, Config Service, and a couple more to get a better understanding of Ionic.

Chapter 5, Ionic and SCSS, talks about theming Ionic apps with the help of the built-in SCSS support.

Chapter 6, Ionic Native, shows how an Ionic app can interface with device features such as Camera, and the Battery using Ionic Native.

Chapter 7, Building Riderr App, shows how the book can be able to build an end-to-end application that interfaces with Device APIs as well as REST APIs using the knowledge gained so far in this book. The app we are going to build is going to be a frontend for the Uber API. Using this app, a user can book a Uber ride.

Chapter 8, Ionic 2 Migration Guide, shows how an Ionic app built using v1 of the Ionic Framework can be migrated to Ionic 2, and how the same approach can be used for Ionic 3 as well.

Chapter 9, Testing an Ionic 2 App, walks you through the various of testing an Ionic app. We are going to look at Unit Testing, end-to-end testing, monkey testing, and device testing using AWS Device Farm.

Chapter 10, Releasing the Ionic App, shows how you can generate installers for the apps that you have built with Cordova and Ionic using the Ionic CLI and PhoneGap Build as well.

Chapter 11, Ionic 3, talks about the upgrades to Angular 4 and Ionic 3. We will look at a couple of new features of Ionic 3 as well.

Appendix, shows how you can efficiently use the Ionic CLI and Ionic cloud services to build, deploy, and manage your Ionic applications

What you need for this book

To start building Ionic apps, you need to have a basic knowledge of Web Technologies, TypeScript, and Angular. A good knowledge of mobile application development, device native features, and Cordova is optional.

You need Node.js, Cordova CLI, and Ionic CLI installed to work with Ionic framework. If you want to work with device features such as the Camera or Bluetooth you need have the mobile OS setup on your machines.

This book is intended for those who want to learn how to build Mobile Hybrid applications using Ionic. It is also ideal for people who want to work with theming Ionic apps, integrating with the REST API, and learning more about device features such as Camera, Bluetooth using Ionic Native.

Prior knowledge of Angular is essential to complete this book successfully.

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: A TypeScript file is saved with a .ts extension.

A block of code is set as follows:

x = 20;

// after a few meaningful minutes 

x = 'nah! It's not a number any more';

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

npm install -g @angular/cli

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: We will be writing three methods, one to get a random gif, one to get the latest trends, and one to search the Gif API with a keyword.

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 purchased this book from.

Click on Code Download.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows

Zipeg / iZip / UnRarX for Mac

7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learning-Ionic-Second-Edition. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.

Angular - A Primer

When Sir Timothy Berners-Lee invented the Internet, he never anticipated that the Internet would be used to publish selfies, share cat videos, or bomb web page with ads. His main intention (guessing) was to create a web of documents so a user on the Internet can access these hypertexts from anywhere and make use of it.

An interesting article published by