Mobile App Development with Ionic 2: Cross-Platform Apps with Ionic, Angular, and Cordova

Mobile App Development with Ionic 2: Cross-Platform Apps with Ionic, Angular, and Cordova

by Chris Griffith

Paperback

$49.99
Choose Expedited Shipping at checkout for guaranteed delivery by Monday, November 19

Product Details

ISBN-13: 9781491937785
Publisher: O'Reilly Media, Incorporated
Publication date: 04/28/2017
Pages: 294
Sales rank: 1,182,244
Product dimensions: 6.90(w) x 9.10(h) x 0.70(d)

About the Author

Chris Griffith is the User Experience Lead at a home automation and security company and is also an instructor at the University of California, San Diego Extension, teaching mobile application development. He is also an Adobe Community Professional specializing in PhoneGap/Cordova and Experience Design. Chris is regularly invited to speak at conferences such as Fluent, Adobe MAX and ngConf. He has developed several mobile applications, a variety of code-hinters and ConfiGAP for PhoneGap Build. In addition, he has served as a technical reviewer for several publications and written for uxmag.com. In his spare time, Chris spends time with his family, sea kayaking, hiking, and drinking craft beer with friends. You can follow him on Twitter @chrisgriffith or at chrisgriffith.wordpress.com.

Table of Contents

Foreword xi

Preface xv

1 Hybrid Mobile Apps 1

What Is the Ionic Framework? 2

What's New in Ionic 2? 2

Comparing Mobile Solutions 3

Native Mobile Applications 3

Mobile Web Applications 4

Hybrid Mobile Applications 4

Understanding the Ionic Stack 5

Iconic Framework 5

Angular 6

Cordova 6

Prerequisites for Ionic Application Development 7

Summary 7

2 Setting Up Our Development Environment 9

Installing the Ionic Framework 9

Installing Node.js 10

Installing Git 11

Installing the Apache Cordova CLI 11

Installing Ionic CLI 11

Starting a New Ionic Project 12

Ionic Project Folder Structure 12

Platform Tools Installations 15

iOS 15

Android 15

Windows Universal 16

Setting Emulators 16

iOS 16

Android 17

Setting Up Your Devices 18

iOS 18

Android 19

Adding Mobile Platforms 19

Previewing on Emulator 20

Previewing on Device 21

Summary 21

3 Understanding the Ionic Command-Line Interface 23

Define Your Build Platforms 25

Managing Cordova Plugins 26

Ionic Generator 26

Previewing Your Application 27

The Ionic lab Command 28

Specifying an IP Address to Use 29

Emulating Your Ionic App 29

Emulating iOS Devices 30

Emulating Android Devices 30

Running Ionic App on a Device 31

Logging 31

CLI information 31

Summary 32

4 Just Enough Angular and TypeScript 33

Why Angular 2? 33

Components 34

Inputs 35

Templates 35

Events 37

Pipes 41

@ViewChild 41

Understanding ES6 and TypeScript 42

Variables 42

Classes 43

Promises 44

Observables 45

Template Strings 45

Arrow Functions 46

Types 46

Special Types 47

Typing Functions 48

:void 48

Summary 48

5 Apache Cordova Basics 49

The History of Cordova (aka PhoneGap) 51

Apache Cordova versus Adobe PhoneGap 51

A Deep Dive into Cordova 52

Configuring Your Cordova App 52

Device Access (aka Plugins) 53

Interface Components: The Missing Piece 53

Why Not Cordova? 54

Understanding Web Standards 54

Summary 56

6 Understanding Ionic 57

HTML Structure 57

Ionic Components 59

Understanding the SCSS File 60

Understanding TypeScript 61

Summary 62

7 Building Our Ionic2Do App 63

Adding our Platforms 64

Previewing Our Ionic2Do App 64

Understanding the index.html File 66

Exploring the app Directory 68

Updating the Page Structure 74

Adding Full-Swipe Gesture 86

Simple Theming 87

Proper Typing 87

Saving Data 88

Creating a FireBase account 88

Installing Firebase and AngularFire2 89

Ionic Build System 90

Adding AngularFire to Our app.module.ts File 92

Using Firebase Data 92

Using Ionic Native 94

Summary 98

8 Building a Tab-Based App 99

Bootstrapping Our App 104

Loading Data via the HTTP Service 105

Display our Data 107

Extending parklist.ts 109

Generating New Pages 110

Understanding the Ionic 2 Navigation model 111

Passing Data Between Pages 112

Updating the Park Details Page 113

Add a Google Map 114

Adding Additional Typings 115

Adding Our Content Security Policy 115

Adjust the CSS to support the Google Map 115

Rendering the Google Map 116

Add Map Markers 117

Making the Markers Clickable 119

Adding Search 122

Theming Our Application 125

Virtual Scrolling 127

Custom List Headers 129

Summary 131

9 Building a Weather Application 133

Getting Started 133

Exploring the Side Menu Template 134

Exploring the app.component.ts File 136

Side Menu Options 137

Displaying the Menu 138

Converting the Template 138

Mocking Up Our Weather Provider 141

Laying Out the Weather Data 143

Loading Feedback: Loading Dialogs and Pull to Refresh 145

Adding GeoLocation 148

Accessing Live Weather Data 150

Connecting the Geolocation and Weather Providers 151

Getting Other Locations' Weather 153

Pull to Refresh: Part 2 156

Editing the Locations 157

Deleting a City 161

Adding a City 161

Using a Geocoding Service 161

Dynamically Updating the Side Menu 165

Ionic Events 165

Observables 167

Styling the App 170

Add a Weather Icon 175

Next Steps 177

Summary 178

10 Debugging and Testing Your Ionic Application 179

Dealing with CORS Issues 184

Debugging through an iOS or Android Simulator 185

Android 185

Debugging On-Device 186

Android 186

iOS 187

Debugging Ionic Initialization 187

Additional Tools 187

Summary 188

11 Deploying Your Application 189

Adjusting the config.xml File 189

App Icons and Splash Screens 190

Building Your Android APK 190

Generating the Signing Key 191

Submitting to the Google Play Store 192

Building Your iOS App 193

Request a Distribution Certificate 193

Create a Distribution Provisioning Profile 193

Creating the App Listing 199

Building the App for Production 202

Creating an Archive of the Application 202

Using TestFlight Beta Testing 204

Releasing to the App Store 205

Summary 206

12 Exploring the Iconic Cloud 207

Setting Up Ionic Cloud 207

Generating Your Ionic App ID 208

Configuring Your Application 208

Ionic Deploy 209

Setting Up Ionic Deploy 210

Testing Ionic Deploy 210

Security Profiles 216

Creating a Profile 217

iOS Setup 218

Supporting iOS Push Notifications 219

Android Setup 219

Android Push Notifications 220

Ionic Package 221

Preparing a Release Build 222

Getting Build Information 222

Getting Your Build Results 222

Downloading Your Build 223

Updating Your Cordova Plugins 223

Ionic View 223

Supported Plugins 224

Uploading Your App 225

Viewing Your App 225

Ionic Creator 226

Summary 227

13 Progressive Web Apps 229

But What, Exactly, Is a Progressive Web App? 230

The manifest.json File 231

Service Workers 232

Push Notifications 235

What's Next? 235

14 Conclusion 237

Components You Should Know About 237

Slides 237

Date-Time 238

Popover 239

Reorder List 241

DeepLinker 242

Storage 242

Next Steps 244

Ionic Forums 244

Ionic Worldwide Slack Channel 244

GitHub 244

Conclusion 245

A Migrating Ionic 1 to Ionic 2 247

B Understanding the Config.xml File 251

C Iconic Component Library 261

Index 265

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews