Ionic : Hybrid Mobile App Development

Rahat Khanna, Sani Yusuf, Hoc Phan

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781788297813
• Edition: 1
• Topic: Computer Science
• Subtopic: Application Development
• Index: Computer Science

An end–to-end journey, empowering you to build real-time, scalable, and interactive mobile applications with the Ionic frameworkAbout This Book• Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS.• Use out-of-the-box Ionic functionalities, customize existing components, and add new components with this comprehensive course.• Learn Ionic by creating three complete mobile applicationsWho This Book Is ForIf you are a web developer who wants to build hybrid mobile app development using the Ionic framework, then this comprehensive course is best-suited for you.What You Will Learn• Get to know about Hybrid Apps and AngularJS• Set up a development environment to build Hybrid Apps• Navigate around components and routing in Ionic• Authenticate users using an e-mail password, Twitter, Facebook, Google+, and LinkedIn• Retrieve data and store it using Firebase• Access native device functionalities such as the camera, contact list, e-mail, and maps using NG-Cordova• Integrate PhoneGap plugins with NG-Cordova• Test your apps to improve and optimize performanceIn DetailHybrid Apps are a promising choice in mobile app development to achieve cost-effectiveness and rapid development. Ionic has evolved as the most popular choice for Hybrid Mobile App development as it tends to match the native experience and provides robust components/tools to build apps. The Ionic Complete Developers course takes you on an end–to-end journey, empowering you to build real-time, scalable, and interactive mobile applications with the Ionic framework.Starting with an introduction to the Ionic framework to get you up and running, you will gradually move on to setting up the environment, and work through the multiple options and features available in Ionic to build amazing hybrid mobile apps. You will learn how to use Cordova plugins to include native functionality in your hybrid apps.You will work through three complete projects and build a basic to-do list app, a London tourist app, and a complete social media app. All three projects have been designed to help you learn Ionic at its very best. From setting up your project to developing on both the server side and front end, and best practices for testing and debugging your projects, you'll quickly be able to deliver high-performance mobile apps that look awesome.You will then hone your skills with recipes for cross-platform development. Integrating Ionic with Cordova will bring you native device features, and you will learn about the best modules from its ecosystem. Creating components and customizing the theme will allow you to extend Ionic. You'll see how to build your app to deploy to all platforms to make you a confident start-to-finish mobile developer.This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products: • Getting Started with Ionic – by Rahat Khanna• Ionic by Example – by Sani Yusuf• Ionic Cookbook – by Hoc PhanStyle and approachThis course shows you how to get up and running with the Ionic framework. It doesn't just give you instructions, expecting you to follow them. Instead, with a hands-on approach, it demonstrates what Ionic is capable of through a series of practical projects that you can build yourself.

Ionic : Hybrid Mobile App Development

---

Table of Contents

Ionic : Hybrid Mobile App Development

Ionic : Hybrid Mobile App Development

Credits

Preface

What this learning path covers

What you need for this learning path

Who this learning path is for

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Module 1

1. All About Hybrid Mobile Apps and Ionic Framework

Introducing a Hybrid Mobile Application

Types of Hybrid Mobile Apps

WebView-based Hybrid Apps

Cross-compiled Hybrid Apps

Anatomy of a Hybrid Mobile App

Custom WebView

Native library

Native to JS Bridge

Using web technologies to develop for mobile

What is AngularJS?

Important concepts in AngularJS

Modules

Directives

Controllers

Services

Templates

Expressions

Filters

Why use Apache Cordova?

Introducing Ionic Framework

Summary

2. Setting up the Environment the Right Way

Setting up Native Mobile development environments

For iOS

Installing and running simulators for testing

For Android

Download links

Setting the environment variables

For Windows

For Linux/Mac OS

Managing Android SDK and emulators

Alternative to Android emulators – Genymotion

Ionic development environment

Installing NodeJS

Basic npm commands

Installing Cordova CLI and Ionic CLI

Installation command for Cordova CLI

Basic Ionic CLI commands

Building a dummy app

Popular issues faced and solutions

Alternative to installation fuss – Ionic Playground

Using Ionic Framework with different Code Editors

Brackets

Sublime Text

Visual Studio

Summary

3. Start Building Your First Ionic App

Starting a new project

Multiple ways to start a project

Method 1 – using CDN-hosted library files

Method 2 – using Ionic Creator to design a prototype and start a project

Method 3 – using Ionic CLI locally

The anatomy of Ionic Project

Project folder structure and important files

Main components

The index.html file

App.js and the root module

Simple content directives – ion-content and ion-pane

ion-content

ion-pane

The Ionic starter template

The blank template

The tabs template

The sidemenu template

The maps template

E-commerce sample app – BookStore

Features

Architecture and design

Summary

4. Navigation and Routing in an Ionic App

Introduction to Angular UI Router

States and URLs

Nested states and views

Using the dot notation

Using the parent property

Using object-based states

Views for nested views

Ways to transition to a state

Abstract state

Multiple and named views

View names – relative versus abstract

State parameters

Basic parameters

Regex parameters

Query parameters

Single parameter

Multiple parameters

The $stateParams service

State events and resolve

Resolve

Ionic header and footer

The <ion-header-bar> directive

The <ion-footer-bar> directive

Ionic Tabs

The <ion-tabs> directive

The <ion-tab> directive

Ionic side menu

The <ion-side-menus> directive

The <ion-side-menu> directive

The <ion-side-menu-content> directive

Other important directives

Navigation and back menus

Navigation and layout to be used in BookStore

Summary

5. Accessorizing Your App with Ionic Components

Ionic CSS components

Header

Footer

Buttons

Icon buttons

Button bar

Lists

List dividers

List icons

List buttons

Item avatars or thumbnails

Cards

Forms

Input elements

Checkbox

Radio button list

Toggle

Range

Tabs

Grid

Utility

Ionic JS components

Actionsheet – $ionicActionSheet

Backdrop - $ionicBackdrop

Form inputs

The <ion-checkbox> directive

The <ion-radio> directive

The <ion-toggle> directive

Gestures and events

The $ionicGesture service

The on method

The off method

Gesture events

Lists

The <ion-list> directive

Loading – $ionicLoading

Modal – $ionicModal

The IonicModal controller

initialize(options)

Popover – $ionicPopover

Spinner – ion-spinner

Miscellaneous components

$ionicPosition

$ionicConfigProvider

Summary

6. Integrating App with Backend Services

$http services

The response object

The $http constructor method

Ionic services vs factories

Ionic service – authentication service

Ionic factory – BooksFactory

$resource and REST API

Demystifying mBaaS

Integrating with Parse

Step 1 – creating an app on Parse

Step 2 – getting API keys

Step 3 – configuring appropriate settings

Step 4 – integrating SDK or integrating using REST API

Using SDK – downloading and overview

Using REST API

Integrating to Firebase

Summary

7. Testing App on Real Devices

Testing on browser emulators

Overview of device mode in Chrome dev tools

Ionic view app

The Ionic upload command

Viewing your app

Making debug build

Android debug build

iOS debug build

Remote debugging

Remote debugging using Chrome dev tools

Android debugging

iOS debugging

Remote debugging using jsconsole.com

Testing using Ngrok

Summary

8. Working with Cordova Plugins – ngCordova

Introduction to Cordova plugins

Plugin management

Integrating ngCordova to Ionic App ...

Table of contents

• Ionic : Hybrid Mobile App Development