Developing an Ionic Edge: HTML5 Cross-Platform Hybrid Apps

151 Pages·2015·5.47 MB·English

by  Anton Shevchenko

Developing an Ionic Edge
HTML5 Cross Platform Hybrid Apps
Here are the true identities of the Hybrid Collective:
Robin van Baalen, Alan Levicki, Keith D. Moore, Diego Netto, Anton Shevchenko
Developing an Ionic Edge
Copyright (c) 2015 Bleeding Edge Press
All rights reserved. No part of the contents of this book may be reproduced or transmitted
in any form or by any means without the written permission of the publisher.

This book expresses the authors views and opinions. The information contained in this
book is provided without any express, statutory, or implied warranties. Neither the
authors, Bleeding Edge Press, nor its resellers, or distributors will be held liable for any
damages caused or alleged to be caused either directly or indirectly by this book.

ISBN 9781939902160
Published by: Bleeding Edge Press, Santa Rosa, CA 95404
Title: Developing an Ionic Edge
Authors: Robin van Baalen, Alan Levicki, Keith D. Moore, Diego Netto, Anton Shevchenko
Editor: Troy Mott
Copy Editor: Christina Rudloff
Typesetter: Bob Herbstman
Cover Designer: Martin Murtonen
Website: bleedingedgepress.com
Table of Contents
Preface ix
CHAPTER 1: Introduction 17
Ionic 18
CHAPTER 2: Development environment, tooling, and workflow 19
Installing prerequisites: Node.js and Git 19
Installing Node.js 19
Installing Git 20
Installing Ionic 20
Cordova 20
Ionic Command Line Interface (CLI) 21
Starting a new project 21
Developing in the browser 22
Adding a platform 25
Creating a build 26
Running your build on an emulator 26
Running on a device 26
Adding plugins 29
Generate icons and splash screen 29
Source control best practices 29
Git and templated applications 30
Root files 30
v
Table of Contents
Included directories 30
Excluded directories 30
Summary 30
CHAPTER 3: Trendicity 31
Side menu 31
Home 33
Favorites 34
About 46
Login/Logout 49
Search 54
Loading service 58
Map view tab 61
Card view tab 61
Working files 62
Introductory popup 62
Card view 64
Card view controller 65
List view tab 66
Related files 66
Template layout 67
Refreshing the list of posts 67
List of posts 70
Liking posts 71
Displaying options with action sheet 74
Summary 78
CHAPTER 4: Implementing a side menu and setting up the routes 79
Introduction to Ionic’s side menu directives 79
ion-side-menus 82
ion-side-menu-content 82
ion-side-menu 82
ion-header-bar 84
Wrapping up the side menu 84
vi
Table of Contents
Handling routes with the Angular UI Router component 85
About Angular UI 85
The future of AngularJS application routing 85
Setting up the application routes 85
Defining the root state 87
Defining a state with named view and custom template and controller 88
Finished routing Trendicity 89
CHAPTER 5: Integrating a map view with Ionic 91
Picking an AngularJS directive for Google Maps 91
The candidates 92
Creating the geolocation utility service 93
Implementing ngCordova and the $cordovaGeolocation service 93
$ionicPlatform.ready() 94
Converting addresses to geolocation objects using the Google Maps Geocode API 94
Setting up the map view inside a tab 95
Touchstart, touchend, and click events on touch-enabled devices 97
ui-gmap-google-map 98
ui-gmap-markers 98
Overriding the Nav Bar 99
Map View Controller 100
Initializing the Controller 100
Refreshing Posts 101
Locating the User 102
Displaying Posts 102
Loading a Favorite Location 104
Summary 104
CHAPTER 6: Authentication 105
Desired user experience 105
Incorporating angular-http-auth 109
OAuth2 based approach 109
Token-based approach 110
Cancel login 114
vii
Table of Contents
Summary 114
CHAPTER 7: Designing the application 115
Layout components 115
Designing Trendicity 118
Ionicons 121
Creating native-looking applications 124
Customizing Ionic with Sass 125
Overriding Ionic design with Sass 125
Using Sass in Trendicity 129
Gotchas 132
Extending Ionic 134
Summary 135
CHAPTER 8: Instagram Service 137
Authentication 137
Login 138
Logout 143
CORS 143
Non-Authenticated Requests 145
Authenticated Requests 145
Summary 146
CHAPTER 9: What’s next? 147
Promoting your Ionic application 147
Prototyping with Ionic Creator 147
Ionic’s evolution 148
Ionic CLI 149
Ionic View 149
AngularJS 2.0 Support 149
ngCordova 149
Ions 149
Other Tidbits 150
Ionic as a platform 150
Summary 151
viii
Preface
With a powerful framework built on AngularJS at its core, Ionic helps developers build rich,
robust hybrid mobile applications. With an emphasis on native performance, Ionic plays
nice with Apache Cordova to build native-like hybrid mobile applications for both Android
and iOS platforms. It even provides its own wrapping command-line interface (CLI) in order
to build, test, and deploy Cordova-based mobile applications.
With tons of popular mobile components, typography, and a gorgeous and extendable
base theme, Ionic has been designed to work and display beautifully and consistently on all
current mobile devices.
The first alpha release of Ionic was made public in late 2013. While this first release was
mainly focused on iOS support, the creators made it very clear from the beginning that
they wanted the same performance and behavior on both iOS and Android. After many be-
ta releases and breaking changes, Ionic has released v1.0 RC, which covers both iOS and
Android, and we have used it for this book and to create our sample Trendicity application.
Why use Ionic?
Have you ever found yourself building a mobile application, but essentially duct taping to-
gether common components such as a side menu, modals, tabs, and buttons? Or perhaps
you have used a mobile-first framework like Twitter Bootstrap that just doesn’t cover
enough of what you need? Or perhaps you’ve already built a great mobile application in
your desktop browser, only to find yourself stuck with a slow performing application that
relies on many DOM manipulations on your devices?
If you answered yes to any of the above questions, you know why you should use Ionic.
At its core, with the powerful AngularJS framework and a focus on native performance, Ion-
ic is your first go-to library when developing a cross platform mobile application. Many is-
sues like scrolling behavior, long list performance, and tap detection are already taken care
of, allowing you to focus on developing your application without the headache of cross
platform compatiblity issues.
ix
Preface
What should readers know prior to reading this book?
Before reading this book, you should have at least a basic knowledge of web (application)
development in general, including HTML, CSS, and JavaScript. For a better understanding
of our example code and Ionic’s features, it is required that the reader has a solid under-
standing of JavaScript in general and basic knowledge of common AngularJS specific
terms.
You won’t find a comprehensive reference to AngularJS-specific features or design pat-
terns in this book.
Source code/sample app
For this book, we, the authors, have developed a demo application for you to play around
with and as a reference to the mentioned techniques and features of Ionic.
The application is open source and available for free to anyone. Just head over to
https://github.com/trendicity/trendicity and get your hands dirty with the source code,
or directly clone the repository with git:
git clone https://github.com/trendicity/trendicity.git

What will this book teach you?
In this book, we take you through the process of starting, developing and customizing a
mobile application built with the Ionic framework and AngularJS. We start with covering
some essential productivity tools such as the Ionic CLI. From there we dive into the devel-
opment of Trendicity, the mobile application we developed to demonstrate as much of
Ionic’s features as possible.
Development environment, tooling, and workflow
It’s important to first get you started with the required and recommended tools and
workflow for this and any future Ionic projects. The most important prerequisites such as
installing Node.js, Git, and Ionic CLI are covered. Some generic uses of the Ionic CLI are de-
tailed, and we start off by setting up our demo application project, Trendicity, using front
end power tools like Gulp and Bower.
Trendicity
We’ll start off by lining out the actual Trendicity demo application. All views will be cov-
ered, and some core Ionic UI elements are mixed together to create a basic setup. From
x