Mobile App Development with Ionic, Revised Edition Cross-Platform Apps with Ionic, Angular, and Cordova
Total Page:16
File Type:pdf, Size:1020Kb
Revised Edition Mobile App Development w i t h I o n i c CROSS-PLATFORM APPS WITH IONIC, ANGULAR & CORDOVA Chris Griffith Mobile App Development with Ionic, Revised Edition Cross-Platform Apps with Ionic, Angular, and Cordova Chris Griffith Beijing Boston Farnham Sebastopol Tokyo Mobile App Development with Ionic, Revised Edition by Chris Griffith Copyright ©2017 Chris Griffith. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti‐ tutional sales department: 800-998-9938 or [email protected]. Editor: Meg Foley Interior Designer: David Futato Production Editor: Justin Billing Cover Designer: Karen Montgomery Copyeditor/Proofreader: Amanda Kersey Illustrator: Rebecca Demarest Indexer: WordCo Indexing Services, Inc. September 2017: First Edition Revision History for the First Edition 2017-08-18: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781491998120 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Mobile App Development with Ionic, Revised Edition, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights. 978-1-491-99812-0 [LSI] Table of Contents Foreword. xi Preface. xv 1. Hybrid Mobile Apps. 1 What Is the Ionic Framework? 2 What’s New in Ionic? 2 Comparing Mobile Solutions 3 Native Mobile Applications 3 Mobile Web Applications 4 Hybrid Mobile Applications 4 Understanding the Ionic Stack 5 Ionic 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 iii Android 15 Windows Universal 15 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 28 Emulating Your Ionic App 29 Emulating iOS Devices 29 Emulating Android Devices 30 Running Ionic App on a Device 30 Logging 30 CLI information 31 Summary 31 4. Just Enough Angular and TypeScript. 33 Why Angular? 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 iv | Table of Contents 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 55 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 Build Platforms 64 Previewing Our Ionic2Do App 64 Understanding the index.html File 66 Exploring the app Directory 68 Updating the Page Structure 75 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 Table of Contents | v 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 Navigation model 112 Passing Data Between Pages 113 Updating the Park Details Page 114 Add a Google Map 115 Adding Additional Typings 115 Adding Our Content Security Policy 116 Adjust the CSS to support the Google Map 116 Rendering the Google Map 116 Add Map Markers 118 Making the Markers Clickable 120 Adding Search 123 Theming Our Application 126 Virtual Scrolling 128 Custom List Headers 130 Summary 132 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 142 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 162 Using a Geocoding Service 162 Dynamically Updating the Side Menu 165 vi | Table of Contents Ionic Events 166 Observables 167 Styling the App 171 Add a Weather Icon 175 Next Steps 178 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 Ionic Services. 207 Setting Up Ionic Services 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 Table of Contents | vii 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 Plug-ins 223 Ionic View 223 Supported Plug-ins 224 Uploading Your App 224 Viewing Your App 225 Ionic Creator 226 Summary 226 13. Progressive Web Apps. 227 But What, Exactly, Is a Progressive Web App? 228 The manifest.json File 229 Service Workers 230 Push Notifications 233 What’s Next? 233 14. Conclusion. 235 Components You Should Know About 235 Slides 235 Date-Time 236 Popover 237 Reorder List 239 DeepLinker 240 Storage 240 Next Steps 242 Ionic Forums 242 Ionic Worldwide Slack Channel 242 GitHub 242 Conclusion 243 A. Migrating From Ionic 1. 245 B. Understanding the Config.xml File. 249 viii | Table of Contents C. Ionic Component Library. 259 Index. 263 Table of Contents | ix Foreword In 2013, our small team was then one year into working on drag-and-drop developer tools for the two most popular mobile and desktop web frameworks at the time: jQuery Mobile and Bootstrap. We saw the rapid rise of reusable components and frameworks for web development, and we were working hard to make it easier to use them through better and more inclusive tooling. Around this time, the iPhone 5 came out, followed shortly by iOS 7, with dramati‐ cally faster web performance and new web APIs that unlocked previously inaccessible performance and features for mobile browser apps. We wondered: could a web framework be built that took advantage of this new performance to provide a native- like UI kit for web developers to build native-quality apps with standard browser technologies? A “Bootstrap for mobile,” if you will? Coincidently, Angular 1 was seeing incredible adoption in the broader web develop‐ ment space and seemed to provide a perfect answer for reusable JavaScript and HTML components for the web. We decided to try our hand at building a mobile- first web UI framework, using the fast-growing Angular 1 framework to make it interactive and distributable. The first release of Ionic, at the end of 2013, was met with excitement from web developers, and the project quickly accumulated stars on GitHub and installs on npm. Over the next year and a half, the project saw over one million apps built by startups, dev shops, and enterprise users alike. Then in 2015, JavaScript seemingly evolved overnight. Suddenly, ES5, the JavaScript we all knew from the web 2.0 era, was old news. In its place was ES6, the next genera‐ tion of JavaScript complete with major new features for object-oriented development, sharing and loading modules, easier syntax, and a whole lot more. The JavaScript world was turned upside down as browser runtimes and developers alike struggled to keep up with the rapid transition to ES6.