![978-1-491-99812-0
[LSI]
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 corporate@oreilly.com.
Editor: Meg Foley
Production Editor: Justin Billing
Copyeditor/Proofreader: Amanda Kersey
Indexer: WordCo Indexing Services, Inc.
Interior Designer: David Futato
Cover Designer: Karen Montgomery
Illustrator: Rebecca Demarest
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.](https://image.slidesharecdn.com/5704661-250528192148-1a820dd2/85/Mobile-App-Development-With-Ionic-Crossplatform-Apps-With-Ionic-Angular-And-Cordova-Revised-Edition-Griffith-8-320.jpg)
![device selected as the target. After a few moments, this test app should launch on
your device!
Now, to integrate this into our command-line tool chain, we need to install another
node tool, ios-deploy. From the command line, enter the following command:
$ npm install -g ios-deploy
Installation on El Capitan
If you are running macOS 10.11 El Capitan, you may need to add
the --unsafe-perm=true flag when running npm install or else it
will fail. For more information on this issue see GitHub.
For additional assistance, refer to Apple’s documentation.
Android
Setting up an Android device is almost the complete opposite from setting up an iOS
device. The first step is to enable developer mode on your device. Since each Android
device’s user interface can vary, these are the general instructions:
1. Open the Settings and scroll to the About Phone item.
2. There should be a Build Number—you must tap it seven times to enable the
developer mode. As you get closer to seven taps, the device should notify you
how many taps are left.
3. Once this is complete, you can go back to the Settings list and you’ll see a new
Developer Options item.
If you encounter an issue enabling Developer Mode on your device, review the devi‐
ce’s user guide. Next, we need to enable USB debugging in order to deploy our apps.
In the Developer Options screen, locate the USB debugging option and enable it.
Your Android device is now ready for development. You may be prompted with a dia‐
log to confirm the pairing when you connect the device to the computer for the first
time.
Adding Mobile Platforms
Although the Ionic CLI will scaffold much of our application, we might need to add
in the target mobile platforms. In order to view our app in either the emulator or on-
device, the corresponding platform must be installed. Open your terminal window,
and make sure that your working directory is your Ionic project directory. The Ionic
CLI command is ionic cordova platform add [platform name] .
Adding Mobile Platforms | 19](https://image.slidesharecdn.com/5704661-250528192148-1a820dd2/85/Mobile-App-Development-With-Ionic-Crossplatform-Apps-With-Ionic-Angular-And-Cordova-Revised-Edition-Griffith-45-320.jpg)
![Ionic CLI’s Namespacing
Starting Ionic CLI version 3, all commands that were using the
Cordova CLI, have been namespaced to require the inclusion of
cordova in the command. Ionic CLI’s Cordova functionality has
been moved into a plug-in, which is installed by default with new
Ionic projects and can be installed in existing Ionic projects
with npm i --save @ionic/cli-plugin-cordova.
To add the project files for Android:
$ ionic cordova platform add android
To add the project files for iOS:
$ ionic cordova platform add ios
To add the project files for Windows:
$ ionic cordova platform add windows
By default, the iOS platform is added if you are running on a Mac, so you rarely need
to install that platform manually. This command will generate all the needed files for
each specific platform.
Previewing on Emulator
With a mobile platform added to our Ionic project, we can now verify that we can
preview our app in the platform emulator. To run our app in an emulator, use the fol‐
lowing command:
$ ionic cordova emulate [platform]
The Ionic CLI will begin building your app for use on that platform’s emulator. You
will see a lot of output in the terminal as it goes through the process. Once it is fin‐
ished, the emulator will automatically launch and run your application.
If you need to target a specific emulated device, append the command to include the
--target switch. For example, if I wanted to emulate an iPad Air, I would use:
$ ionic cordova emulate ios --target="iPad-Air"
For a list of iOS device types, use:
$ ios-sim showdevicetypes
For a list of Android devices, you will need to refer to the AVD Manager for the
device names.
Once you already have the emulator up and running, you can run the cordova emu
late command again without closing the emulator. This is faster than exiting the
20 | Chapter 2: Setting Up Our Development Environment](https://image.slidesharecdn.com/5704661-250528192148-1a820dd2/85/Mobile-App-Development-With-Ionic-Crossplatform-Apps-With-Ionic-Angular-And-Cordova-Revised-Edition-Griffith-46-320.jpg)
![CHAPTER 3
Understanding the Ionic
Command-Line Interface
One of the key tools that we will be using while developing our Ionic applications is
the Ionic command-line interface, or CLI. We touched briefly upon this tool during
our initial setup, but this chapter will explore the various options this utility gives us.
First, if you have not installed the Ionic CLI, you can use npm to do so. If you are on a
Macintosh, launch the Terminal application. For Windows users, launch Git Bash (or
another command prompt). Then enter the following command:
$ npm install -g ionic
This will install the latest version of the Ionic CLI. The Ionic CLI is fully backward
compatible with version 1 projects, which is helpful if you have already done some
Ionic development.
macOS users might need to prepend the npm command with sudo
for the installations to work.
Once the installation of the Ionic CLI is complete, we can test its installation by build‐
ing our first test application:
$ ionic start myApp [template name]
This command will create a new Ionic application in a new directory named myApp
using the template that we pass to the command. Let’s explore the various template
options that we can use.
23](https://image.slidesharecdn.com/5704661-250528192148-1a820dd2/85/Mobile-App-Development-With-Ionic-Crossplatform-Apps-With-Ionic-Angular-And-Cordova-Revised-Edition-Griffith-49-320.jpg)
![followed by the actual application name. Since your appname will probably include
spaces, your will need to use quotes around the name for this to work:
$ ionic start myApp -n "My Awesome Ionic App"
There are several other new flags that you might want to use when starting your new
Ionic application. If you do not want to include any of the default dependencies when
generating the application, pass in the --skip-dep flag. By default, the Ionic CLI will
now seed the starter for integration with Git. If you to override this functionality, use
the --no-git flag. Another new flag is the the --cordova flag. Since the Ionic CLI has
moved all the Cordova related functions into a sub-module, we need to install it if we
are going to be working with Cordova. Don’t worry if you forget to pass in this flag,
the Ionic CLI will prompt you to install it once you use a related command. You
might be wondering why would we not want to include Cordova into our project—
aren’t we building mobile applications and don’t we need to use Cordova as part of
the process? Yes. However, you might want to use Ionic as the UI framework for a
progressive web application, so you could avoid using Cordova. Another option
might be using Ionic as the UI framework for an Electron-based desktop app. In
either case, it is an option that is available if you need it.
Define Your Build Platforms
Once the base Ionic application has been scaffolded, we next need to add the target
platform we will want to build for. The command to do this is:
$ ionic cordova platform add [platform name]
Common Mistake
If you try to run this command without changing your active
directory into the project directory that was just created, you will
get an error. Always remember to issue cd [app name] before run‐
ning any of the other Ionic CLI commands.
In the past, macOS users would have the iOS platform automatically added to the
project. Starting with Ionic CLI 3, this automatic install has been removed. You will
now need to manually install the iOS platform using this command:
$ ionic cordova platform add ios
To build for the Android platform, you will need to add it to the project:
$ ionic cordova platform add android
To build for the Windows Universal platform, you will need to add it to the project:
$ ionic cordova platform add windows
Define Your Build Platforms | 25](https://image.slidesharecdn.com/5704661-250528192148-1a820dd2/85/Mobile-App-Development-With-Ionic-Crossplatform-Apps-With-Ionic-Angular-And-Cordova-Revised-Edition-Griffith-51-320.jpg)
![Remember for iOS, Android, and Windows Universal, their respective SDKs must be
installed on the local machine in order to actually build for that platform. This Ionic
command only configures the local project files for use by the SDKs.
If for some reason you need to remove a platform from your project, you can use:
$ ionic cordova platform remove [platform name]
Occasionally, something might go wrong during an installation of a plugin or during
an update. One common solution is to remove the platform, then reinstall it into the
project.
Managing Cordova Plugins
The installation of Cordova plugins is often one of the first things you will do after
including your build platforms. Although we will touch upon using Cordova plugins
and Ionic Native in a later chapter, the basic command is:
$ ionic cordova plugin add [plugin id]
Usually, the plugin ID is the npm domain name—for example, cordova-plugin-
geolocation. However, it could reference a local directory or a GitHub repo.
To remove an installed plugin, the command is simply:
$ ionic cordova plugin rm [plugin id]
If you ever need to see a listing of all the plugins you have installed in your project,
use:
$ ionic cordova plugin ls
Ionic Generator
Although the Ionic CLI will scaffold your application via the ionic start command,
you can then extend your app with new pages, components, providers, pipes, and
more via the CLI. The generate command allows you to quickly create a boilerplate
version of the element you need:
$ ionic g [page|component|directive|pipe|provider|tabs] [element name]
For example, if we want to create a new page for an application, the command is sim‐
ply:
$ ionic g page myPage
The Ionic CLI will then create a new directory in our app directory, and generate the
HTML, SCSS, and TS files for us.
26 | Chapter 3: Understanding the Ionic Command-Line Interface](https://image.slidesharecdn.com/5704661-250528192148-1a820dd2/85/Mobile-App-Development-With-Ionic-Crossplatform-Apps-With-Ionic-Angular-And-Cordova-Revised-Edition-Griffith-52-320.jpg)
Mobile App Development With Ionic Crossplatform Apps With Ionic Angular And Cordova Revised Edition Griffith
- 1. Mobile App Development With Ionic Crossplatform Apps With Ionic Angular And Cordova Revised Edition Griffith download https://ebookbell.com/product/mobile-app-development-with-ionic- crossplatform-apps-with-ionic-angular-and-cordova-revised- edition-griffith-11409322 Explore and download more ebooks at ebookbell.com
- 2. Here are some recommended products that we believe you will be interested in. You can click the link to download. Mobile App Development With Ionic Revised Edition Crossplatform Apps With Ionic Angular And Cordova Chris Griffith https://ebookbell.com/product/mobile-app-development-with-ionic- revised-edition-crossplatform-apps-with-ionic-angular-and-cordova- chris-griffith-35503894 Mobile App Development With Ionic 2 Early Release Chris Griffith https://ebookbell.com/product/mobile-app-development-with- ionic-2-early-release-chris-griffith-5703734 Build Mobile Apps With Ionic 2 And Firebase Hybrid Mobile App Development 1st Edition Fu Cheng https://ebookbell.com/product/build-mobile-apps-with-ionic-2-and- firebase-hybrid-mobile-app-development-1st-edition-fu-cheng-5880866 Build Mobile Apps With Ionic 4 And Firebase Hybrid Mobile App Development 2nd Ed Fu Cheng https://ebookbell.com/product/build-mobile-apps-with-ionic-4-and- firebase-hybrid-mobile-app-development-2nd-ed-fu-cheng-7319514
- 3. Lightningfast Mobile App Development With Galio Build Stylish Crossplatform Mobile Apps With Galio And React Native Alin Gheorghe https://ebookbell.com/product/lightningfast-mobile-app-development- with-galio-build-stylish-crossplatform-mobile-apps-with-galio-and- react-native-alin-gheorghe-36104842 Full Stack Development With Mongodb Covers Backend Frontend Apis And Mobile App Development Using Php Nodejs Expressjs Python And React Native Manu Sharma https://ebookbell.com/product/full-stack-development-with-mongodb- covers-backend-frontend-apis-and-mobile-app-development-using-php- nodejs-expressjs-python-and-react-native-manu-sharma-43812750 Learning Mobile App And Game Development With Solar2d Dr Brian G Burton https://ebookbell.com/product/learning-mobile-app-and-game- development-with-solar2d-dr-brian-g-burton-61530386 Beginning App Development With Flutter Create Crossplatform Mobile Apps 1st Edition Rap Payne https://ebookbell.com/product/beginning-app-development-with-flutter- create-crossplatform-mobile-apps-1st-edition-rap-payne-50805112 Learning Mobile App Development A Handson Guide To Building Apps With Ios And Android 1st Edition Jakob Iversen https://ebookbell.com/product/learning-mobile-app-development-a- handson-guide-to-building-apps-with-ios-and-android-1st-edition-jakob- iversen-4577018
- 5. Chris Griffith Mobile App Development with Ionic CROSS-PLATFORM APPS WITH IONIC, ANGULAR & CORDOVA R e v i s e d E d i t i o n
- 7. Chris Griffith Mobile App Development with Ionic, Revised Edition Cross-Platform Apps with Ionic, Angular, and Cordova Boston Farnham Sebastopol Tokyo Beijing Boston Farnham Sebastopol Tokyo Beijing
- 8. 978-1-491-99812-0 [LSI] 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 Production Editor: Justin Billing Copyeditor/Proofreader: Amanda Kersey Indexer: WordCo Indexing Services, Inc. Interior Designer: David Futato Cover Designer: Karen Montgomery Illustrator: Rebecca Demarest 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.
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. C. Ionic Component Library. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Table of Contents | ix
- 17. 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. xi
- 18. Transpilers were built to translate the new JavaScript syntax into the ES5 syntax that browsers could understand. Developers experimented to figure out the best way to distribute their JavaScript libraries as reusable modules. New build tools were created, thrown out, and created again to build and distribute disparate JavaScript modules. New projects like TypeScript and Flow took off in an attempt to reduce errors and standardize the syntax of modern JavaScript. Experimental features from ES7 and beyond made their way into transpilers and, much to the chagrin of conservative JavaScript developers, into production code bases before being deprecated and removed from the standards track. In short, it was chaos. Framework authors from the pre-ES6 era were suddenly faced with the daunting task of throwing out custom abstractions in exchange for standardized ones now available in ES6 and beyond. Of those frameworks, few had developed such momentum with custom abstractions as Angular 1. For Angular, the question was clear: how do all these framework-specific things like scope, controllers, directives, and the like trans‐ late to the world of standardized JavaScript classes, web components, and beyond? With the rare evolution of JavaScript, the Angular team saw an opportunity to take the lessons learned from building one of the first major JavaScript frameworks and apply them to a framework that would adapt and scale with the future of both web and mobile development. It didn’t hurt that the majority of Angular 1 concepts map‐ ped very naturally to ES6 concepts. In fact, in many cases, they felt much more natu‐ ral in ES6. When we heard about Angular 2, we knew immediately that it was our own opportu‐ nity to take the lessons learned from Ionic 1 and the over one million apps that had been built at the time to build our own framework for the future. The Ionic team broke ground on Ionic 2 in spring of 2015. After almost a year and a half of development, mistakes made, novel solutions discovered, and a whole lot of experimentation, we are excited to finally roll out a major, production-ready release of Ionic 2. At a high level, Ionic 2 is similar to Ionic 1. Components are used by writing custom HTML tags that Ionic turns into powerful mobile components. Actions are bound to callbacks in a class that acts as a controller for a given page in the app. The project is built and tested using the same command-line tool. The look, feel, and theming are similar, drawing on the classic Ionic look from the original release. What’s different is what goes under the hood. In this case, Ionic 2 was rewritten from the ground up using TypeScript and Angular 2. All of the Ionic code is typed, which has dramatically reduced bugs and type issues in our own code. It has also led to wonderful new features, such as inline documentation and easy refactoring, for devel‐ opers using tools like Atom and Visual Studio Code. Also, the code is more object- xii | Foreword
- 19. oriented, which just makes more sense for a UI framework. That architecture wasn’t as natural in Angular 1. Angular 2 was rebuilt with the goal of running wonderfully on mobile by reducing overhead and streamlining core operations such as change detection. Thus, Ionic 2 apps run faster and can handle more complexity than Ionic 1 apps. The goal of Ionic has always been to be the easiest way to build awesome mobile apps, period. We wouldn’t have embarked on a costly and risky rewrite of the framework if we didn’t truly believe we could make Ionic easier to use and more powerful at the same time. We believe that TypeScript makes Ionic code easier to write and to under‐ stand. We believe that Angular 2 is easier to use than Angular 1 and requires far less domain-specific language and understanding. We believe that Ionic 2 projects are cleaner and more organized and that using components is more straightforward. In addition to the technologies underneath, Ionic 2 has some major new features. Today, Ionic 2 will adapt the look and feel of your app to match the platform under‐ neath, with much-expanded support for Material Design and easier theming. Our navigation system makes it possible to build the kinds of flexible and parallel naviga‐ tions native apps do uniquely well, but which don’t have a natural analog in the browser. We’ve added a plethora of features, components, and a ton of native APIs. Additionally, the mobile world saw a dramatic shift in 2016. Suddenly, the mobile web is back in vogue as progressive web apps have come onto the scene in a major way. With Google pushing a new world where apps run right in the browser with no install required and provide a great experience regardless of bandwidth and connec‐ tivity, mobile developers are faced with the daunting prospect of adding mobile web as a part of their mobile strategy. Developers using Ionic 2 can now target the mobile web with practically zero code changes. Ionic apps work both as a native app on iOS and Android and as a progres‐ sive web app on the mobile web. Write once, run everywhere! We’ve put our heart and soul into Ionic 2, and we’re excited to finally be able to rec‐ ommend Ionic 2 for production-ready mobile apps. We hope that you find it just as performant and flexible as we do and that it makes building mobile apps and mobile websites easier than you ever thought possible. After nearly three million apps built on Ionic, we’ve learned a thing or two about how to build a quality app framework, and we’ve taken every lesson learned and put them all into Ionic 2. And if you like Ionic 2, we hope you take a look at some of the supporting tools we’ve built to give Ionic developers an edge up, including our rapid testing tool Ionic View, our fast prototyping and rapid app development tool Ionic Creator, and our suite of tightly integrated backend services with Ionic Cloud. Ionic is becoming a one-stop shop for everything mobile. Foreword | xiii
- 20. From all of us on the Ionic Team, please enjoy Ionic 2, and we hope to see you on the forum! — Max Lynch Cofounder/CEO, Ionic xiv | Foreword
- 21. Preface My introduction to the world of mobile development happened back in 2007. I was being interviewed by the user experience team at Qualcomm to join as their UX engi‐ neer while Steve Jobs was announcing the first iPhone. Several of my interviews turned into an analysis of Apple’s announcement. A day like that will leave a lasting impression upon one’s professional career. Over the next decade, I have had a chance to explore a wide range of solutions for mobile development. Always, my underlying goal with any solution was to make sure it allowed for rapid development, enabling my group to quickly test and validate new ideas and concepts. For many of the early mobile prototypes I worked on, the user interfaces were highly customized. Rarely was there a need to simulate a device’s native component library. Occasionally, when native components were required, I could recreate them in the solution I was using at the time. Eventually, more and more of the prototypes were less customized, and more default in their design. I needed to find a solution that offered a rich component suite, because I was not interested in developing and main‐ taining a custom component library just for myself. I explored using libraries like Ratchet and TopCoat on some projects. The “Intro to Mobile Development” course I taught at the University of California San Diego Extension program was based on jQuery Mobile (and PhoneGap Build). However, none of those solutions gave me the rich component library I needed to build my prototypes. I don’t recall when I discovered the Ionic Framework, but I do recall seeing that it was built atop Apache Cordova and AngularJS. I had just finished recording two video courses on PhoneGap Build and Apache Cordova but knew very little about Angu‐ larJS. As a rule, I had tended to shy away from large frameworks due to the nature of prototype development. Not long after, I saw another component library that lever‐ aged the same base technology stack. Thus, I made the commitment to begin learning AngularJS and the Ionic Framework. I quickly saw the power that these two frame‐ works offered and was sold on them as my solution. xv
- 22. I began learning as much as I could about Ionic, even releasing my first commercial mobile app, Hiking Guide: Sedona using Ionic 1. Then Ionic 2 was announced in October 2015. This release was no mere update, but rather a quantum leap forward. So the journey began again: learning the new Angular syntax, working with first ES6, then TypeScript—even switching my default editor to one made by Microsoft! All this while Ionic 2 grew and matured. Writing this book has been a long but fun process. Each release of Ionic has forced me to carefully review the changelog and see how it affected the chapters that were written and those left to write. This, in turn, has made me understand the framework at a deeper level. I hope this book will serve as a guide along your journey as you learn how to build hybrid mobile applications with Ionic. Chris Griffith, San Diego, January 2017 Who Should Read This Book This book is for anyone who is looking to get started with the Ionic Framework. It is expected that you are comfortable with JavaScript, HTML, and CSS. We will cover some key concepts of TypeScript, ES6, Angular, and Apache Cordova, but you may want to have resources available on those topics as well. We will take it step by step, so relax and get ready to learn how to build hybrid mobile apps with Ionic, Angular, and Cordova. Navigating This Book This book walks you sequentially through each part of the Ionic Framework. It is roughly organized as follows: • Chapter 1, Hybrid Mobile Apps, is an introduction to the concept of hybrid mobile applications. • Chapter 2, Setting Up Our Development Environment, covers what is needed to build Ionic applications. • Chapter 3, Understanding the Ionic Command-Line Interface, digs into the CLI’s functions. • Chapter 4, Just Enough Angular and TypeScript, introduces the basic concepts of Angular and TypeScript. • Chapter 5, Apache Cordova Basics, covers the foundations of Apache Cordova and how it is used as part of the Ionic Framework. • Chapter 6, Understanding Ionic, provides an overview of what makes up an Ionic page. • Chapter 7, Building Our Ionic2Do App, goes over creating a Firebase-enabled to- do application. xvi | Preface
- 23. • Chapter 8, Building a Tab-Based App, uses the tab template to create a national park explorer application with Google Map integration. • Chapter 9, Building a Weather Application, builds a side-menu–style application using the Forecast.io weather API and Google’s GeoCode API. • Chapter 10, Debugging and Testing Your Ionic Application, covers some common techniques to resolving issues that can arise during development. • Chapter 11, Deploying Your Application, walks you through the steps needed to submit your application to the app stores. • Chapter 12, Exploring the Ionic Services, explores the additional services offered by the Ionic platform. • Chapter 13, Progressive Web Apps, explores how to use Ionic as a starter for your PWAs. • Chapter 14, Conclusion, goes over some additional Ionic components and out‐ lines additional resources. • Appendix A, Migrating From Ionic 1, touches on the key changes between the releases. • Appendix B, Understanding the Config.xml File, covers the various attributes that configure our application’s build process. • Appendix C, Ionic Component Library, lists each of the available Ionic compo‐ nents and outlines their general use. The entire code repository is hosted on GitHub, so if you don’t want to type in the code examples from this book, or if you want to ensure that you are looking at the latest and greatest code examples, do visit the repository and grab its contents. If you have done Ionic 1 development, then you might just want to skim Chapters 1 through 3. If you have experience with TypeScript and Angular, then feel free to skip Chapter 4. For those who have used Apache Cordova or PhoneGap, you can bypass Chapter 5. Online Resources The following resources are a great starting point for any Ionic developer and should be always available at your fingertips: • The Official Ionic API documentation • The Official Angular documentation • The Official Apache Cordova documentation • The Ionic Worldwide Slack Channel Preface | xvii
- 24. Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program ele‐ ments such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter‐ mined by context. This element signifies a tip or suggestion. This element signifies a general note. This element indicates a warning or caution. Using Code Examples If you see the ↵ at the end of a code line, this indicates the line actually continues on the next line. Supplemental material (code examples, exercises, etc.) is available for download at https://resources.oreilly.com/examples/0636920104988. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not xviii | Preface
- 25. need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a signifi‐ cant amount of example code from this book into your product’s documentation does require permission. We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Mobile App Development with Ionic, Revised Edition, by Chris Griffith (O’Reilly). Copyright 2017 Chris Griffith, 978-1-491-99812-0.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [email protected]. O’Reilly Safari Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals. Members have access to thousands of books, training videos, Learning Paths, interac‐ tive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Profes‐ sional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others. For more information, please visit http://oreilly.com/safari. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) Preface | xix
- 26. We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://shop.oreilly.com/product/ 0636920104988.do. To comment or ask technical questions about this book, send email to bookques‐ [email protected]. For more information about our books, courses, conferences, and news, see our web‐ site at http://www.oreilly.com. Find us on Facebook: http://facebook.com/oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia Acknowledgments First, I must thank the entire team at Ionic for all their hard work in creating this incredible framework. Foremost to Max Lynch and Ben Sperry for having that wild idea and the passion to grow Ionic into what it has become today. I can’t wait to see what the future holds. Also to various members of the Ionic family: Adam Bradley, Mike Hartington, Brandy Carney, Dan Bucholtz, Tim Lancina, Alex Muramoto, Matt Kremer, Justin Willis, and Katie Ginder-Vogel, thank you for taking the time answer my questions, read early drafts of chapters, and offer guidance along the way. It has been a pleasure working with you. To the rest of the Ionic team, my thanks as well. My deepest thanks to my two technical reviewers of this book: Ray Camden and Leif Wells. Your suggestions and thoughtfulness made this book better. I was truly hon‐ ored when both of you took the time to carefully read through my first book. At O’Reilly, a special thank you to Meg Foley, my kind and patient editor. This book took much longer than we planned as the technology kept evolving. And to my agent, Margot Hutchison at Waterside Productions, for introducing me to Meg. To my friends, thank you for all the words of encouragement throughout this whole process. Now we can talk about important things like craft beer or rocket launches the next time we see each other. Finally, to my wife Anita and my twins, Ben and Shira, thank you for giving me the time and support to retreat to my computer and work on this book. I know it was a sacrifice for you as well. I never thought I would ever attempt something like this, but you helped me believe I could. xx | Preface
- 27. CHAPTER 1 Hybrid Mobile Apps Mobile application development is becoming one of the most important skills that a developer can possess. Over the past decade, we have seen an explosion of mobile devices—phones, tablets, and now wearables—that have given rise to a whole ecosys‐ tem of mobile applications. We are now living in an age of mobile apps. But learning how to create them is still a challenge. Typically, a developer will need to learn and master each platform’s specific development language: Objective-C or Swift if you are creating iOS-based applications, or Java if you are creating Android-based applica‐ tions. Wouldn’t it be nice if there were a solution that allowed for one shared language that we could use across multiple platforms? There is: by leveraging the shared lan‐ guage of the web and some incredible frameworks, developers can now develop their applications in one code base and deploy it to a wide range of mobile platforms. This is known as a hybrid mobile application because it blends the native capabilities of the mobile device with the ability to develop using web technologies. What exactly is a hybrid mobile application? Unlike traditional native mobile apps that are built using the device’s native development language. Hybrid apps are built with web technologies (HTML, CSS, and JavaScript) instead. In fact, you probably have more than one hybrid app installed on your mobile device right now. The Ionic Framework is one of the most popular hybrid mobile application frame‐ works in use today. The framework has over 30,000 stars on GitHub and has been forked over 8,000 times. With the release of the next major version of the framework, it is poised to continue its growth as the go-to solution for hybrid mobile developers. This book presents the foundations required to build Ionic applications by guiding you through the process of creating three separate applications. Each of these applica‐ tions will give you insight into the various components available in the Ionic Frame‐ work, as well as an understanding of the Ionic ecosystem. Before we get into creating our first application, we need to make sure we have a good understanding of the vari‐ 1
- 28. ous foundations that Ionic is built upon, as well as some of the tooling we will be using throughout this book. What Is the Ionic Framework? So what exactly is the Ionic Framework? Simply put, it is a user interface framework built with HTML, CSS, and JavaScript for use with hybrid mobile application devel‐ opment. Beyond just the user interface components, the Ionic Framework has expan‐ ded to include a robust command-line interface (CLI) and a suite of additional services such as Ionic View and Ionic Creator. We will explore each of these through‐ out the book. Ionic is really a combination of several technologies that work together to make building mobile applications faster and easier. The top layer of this stack is the Ionic Framework itself, providing the user interface layer of the application. Just beneath that is Angular (formally known as AngularJS), an incredibly powerful web applica‐ tion framework. These frameworks then sit on top of Apache Cordova, which allows for the web application to utilize the device’s native capabilities and become a native application. The combination of these technologies enables Ionic to deliver a robust platform for creating hybrid applications. Each of these technologies will be explored further in this book. What’s New in Ionic? To say the Ionic Framework underwent a major upgrade after version 1 is almost an understatement. Not only did the Ionic Framework itself evolve significantly, but one of its underlying technologies, Angular, did as well. Although some things might look the same on the surface, under the hood, there are radical changes. Ionic is almost a new framework. If you are familiar with Ionic 1, much of the component syntax will appear similar, but the code that brings them to life will be new. Ionic Version 3 In March 2017, Ionic announced version 3 of the framework. This new version is more like a traditional upgrade, and not the radical change that occurred from Ionic 1 to Ionic 2. The company also announced that going forward, the framework will just be referred to as Ionic, without the version number. For clarity, in this book, we will only append a version number to Ionic to highlight some‐ thing to you. 2 | Chapter 1: Hybrid Mobile Apps
- 29. The following are some of the major improvements to the framework: Overhauled navigation Completely control the navigation experience of your app without being tied to the URL bar. Navigate to any page inside of any view, including modals, side menus, and other view containers, while maintaining full deep-linking capability. Native support There is now more native functionality directly into Ionic, making it easy to take advantage of the full power of the device without hunting down external plug-ins and code. Powerful theming With the new theming system, it’s easy to instantly match your brand colors and design. Material Design Full Material Design support for Android apps. Windows Universal apps Support for developing applications that will run on the Windows Universal plat‐ form. But with these improvements to Ionic comes the added effort of learning the new version of Angular, as well as learning TypeScript. We will touch on these requirements in a later chapter. Comparing Mobile Solutions When needing to deliver your application to a mobile platform, there are three pri‐ mary solutions that are available, each with its own strengths and weaknesses. They can be grouped into native mobile applications, mobile web applications, and hybrid mobile applications. We’ll look at each solution in a bit more detail to understand the overall mobile application landscape. Native Mobile Applications Typically, native code is the solution most developers think of when they need to cre‐ ate a mobile application. To build a native application, developers need to write in the default language for each targeted mobile platform, which is Objective-C or Swift for iOS devices, Java for Android, and C# or XAML for Windows Universal. This type of development comes with several strong advantages over the other options. First, the development tools are tightly integrated into the device platform. Developers are able to work in IDEs that are configured to create mobile applications for that platform: Xcode for iOS, and Android Studio for Android. Second, since Comparing Mobile Solutions | 3
- 30. development is done in the native framework, all the native APIs and features are available to the developer without the need of additional bridge solutions. The third advantage is the performance of the application will be as good as possible. Since the application is running natively, there are no intermediate layers of code that can affect performance. The primary disadvantage of native mobile application development centers around development language issues. Since quite often you will want to release your applica‐ tion for both iOS and Android (and possibly Windows), you will need to have profi‐ ciency in all the different languages and APIs. None of the client-side code can be reused, and it, therefore, must be rewritten. In addition, there is the technical burden of maintaining multiple code bases. Mobile Web Applications When the iPhone was first announced, there were no third-party applications—or even an App Store, for that matter. In fact, the initial vision was that third-party applications were only to be available as mobile web applications and not as native applications. While this is certainly not the case today, creating a mobile web app is still an option. These apps are loaded via the device’s mobile web browser. Although the line between a mobile website and mobile app can become blurred, this option is really just about creating your application using web technologies and delivering it through the device’s browser. One of the advantages of this solution is that we can have a much wider reach with our application. Beyond iOS and Android, additional mobile platforms become avail‐ able. Depending on the market that you are targeting, this may be a critical factor. Since you have direct access to your web server, the application approval process that can be tricky or slow at times for native apps is not an issue. Updating your applica‐ tion to add a new feature or resolve a bug is as simple as uploading new content to the server. However, the fact that these applications run inside the native browser brings along a set of limitations. First, the browser does not have access to the full capabilities of the device. For example, there is no ability for the browser to access the contact list on the device. Second is the discoverability of the application. Users are used to going to their device’s app store and finding the app. Going to the browser and inputting a URL is not common behavior. Hybrid Mobile Applications A hybrid application is a native mobile application that uses a chromeless web browser (often called a WebView) to run the web application. This solution uses a native application wrapper that interacts between the native device and the WebView. Hybrid apps have a number of advantages. Like mobile web applications, the majority 4 | Chapter 1: Hybrid Mobile Apps
- 31. of the code can be deployed to multiple platforms. By developing in a common lan‐ guage, maintaining the code base is easier, and if you are a web developer there is no need to learn a completely new programming language. Unlike mobile web applica‐ tions, we have full access to the device’s features, usually through some form of a plug-in system. However, this solution does have some real disadvantages. Since the application is still just a web app, it is limited by the performance and capabilities of the browser on the device. The performance can vary widely. Older devices often had very poor per‐ forming mobile browsers, meaning the app’s performance was less than ideal. Although this solution is a native application, communication between the WebView and the device’s native features is done via plug-ins. This introduces another depend‐ ency in your project and no guarantee that the API will be available through this method. Finally, the other native user interface components are not available within the WebView. Your application’s entire UI/UX will be completely written by you. The Ionic Framework takes the hybrid app approach. The team at Ionic has taken great care in recreating web-based UI components that look and feel like their native counterparts. With the framework leveraging Cordova and its plug-in library, the lack of access to the device’s capabilities are solved. Understanding the Ionic Stack Now that we have a general understanding of the types of mobile application devel‐ opment, let’s look a bit deeper into how the Ionic Framework works. Ionic applica‐ tions are built as part of three layers of technology: Ionic, Angular, and Cordova. Ionic Framework The Ionic Framework was first launched in November 2013, and its popularity has quickly grown and continues to increase. Ionic is provided under the MIT license and is available at the Ionic Framework website. The primary feature of the Ionic Framework is to provide the user interface compo‐ nents that are not available to web-based application development. For example, a tab bar is a common UI component found in many mobile applications. But this compo‐ nent does not exist as a native HTML element. The Ionic Framework extends the HTML library to create one. These components are built with a combination of HTML, CSS, and JavaScript, and each behaves and looks like the native controls it is recreating. Ionic also has a CLI tool that makes creating, building, and deploying Ionic applica‐ tions much easier. We will be making extensive use of it throughout this book. Understanding the Ionic Stack | 5
- 32. The Ionic platform also extends to several add-on services. These include an online GUI builder to visually lay out the interface of your Ionic applications and packaging and updating solutions. Although these Ionic services all have free developer access to test and develop with, any production use will require a monthly charge. The main focus of the Ionic Framework is in the user interface layer and its integra‐ tion with both Angular and Cordova to provide native-like experiences. Angular The next part of the Ionic stack is Angular (formally known as AngularJS), an open source project primarily supported by Google. Since its release in 2009, Angular has become one of the more popular web application frameworks. The goal of Angular is to provide an MVW (model-view-whatever) framework to build complex, single- page web applications. The Ionic team decided to leverage the power that this frame‐ work offers, so they built upon. For example, Ionic’s custom UI components are just Angular components. Angular is licensed under the MIT license and is available at the Angular website. With the release of Angular 2, the framework has changed massively. This change did cause some discord within the Angular community, but many of the concerns about the new aspects of the framework have been addressed. We will explore Angular in more detail in Chapter 4. Cordova The final element of the Ionic stack is Apache Cordova. Cordova was originally devel‐ oped by Nitobi Software in 2009 as an open-source solution to build native applica‐ tions using web technologies via an embedded WebView. In 2011, when Adobe Systems bought Nitobi—and along with it the PhoneGap name—the project had to be renamed. Although the project was always open source, the name was not. The open source version was eventually named Cordova (after the street where the Nitobi offices were located). As Brian Leroux, one of the founders of PhoneGap, put it: “PhoneGap is powered by Cordova. Think: Webkit to Safari.” Adobe continues to be a major contributor to Cordova (along with several other major software companies) and it is licensed under the Apache 2.0 license. Cordova provides the interface between the WebView and the device’s native layer. The library provides a framework to bridge the gap between the two technology stacks (hence the original name of PhoneGap). Much of the functionality is handled through a system of plug-in modules, which allows the core library to be smaller. Beyond working on the two primary mobile platforms, Cordova is used on a much wider range of mobile platforms, such as Windows Phone, Blackberry, and FireOS. For a full list, see https://cordova.apache.org. 6 | Chapter 1: Hybrid Mobile Apps
- 33. Beyond the library, Cordova as has its own command-line tool to assist in scaffold‐ ing, building, and deploying your mobile applications. The Ionic CLI is built atop the Cordova CLI, and we will be making use of it throughout this book. Prerequisites for Ionic Application Development In order to develop Ionic applications, you will need to have some additional techni‐ cal skills that are not covered in this book. While you do not need to be an expert in these skills, you will need a general knowledge in order understand the concepts of Ionic development: Understanding HTML, CSS, and JavaScript Since Ionic applications are built using HTML, CSS, and JavaScript, you should have a fundamental understanding of how these technologies combine to build web applications. We will be using HTML to create the foundational structure of our applications. Our CSS will provide the visual styling for our applications. Finally, JavaScript will provide the logic and flow for the applications. While we will work a modest amount with JavaScript, you will need to be famil‐ iar with its syntax and concepts like variable scoping, asynchronous calls, and events. Understanding Angular Beyond understanding basic HTML, CSS, and JavaScript, you will need some understanding of building web applications. In this book, we will be writing our applications with JavaScript, specifically Angular 2. This means we will be devel‐ oping in ES6 and writing the code in TypeScript. For many, this is probably something that is new to you. We will cover the basics in Chapter 4 to get you up and running. Access to a mobile device It goes without saying, you are going to need an actual mobile device to install and test your applications on. In fact, you will probably need at least one device for each platform you plan to develop for. While both the iOS and Android SDKs provide emulators/simulators that allow you to see what your app looks like and functions, they are no substitute for testing on a real device. Summary Hopefully, now you have a better understanding of the difference between the types of mobile application solutions and how the Ionic stack is composed. In addition, you should have a clearer picture of the elements needed for Ionic development. In the next chapter, we will demonstrate how to set up your computer to develop Ionic applications. Prerequisites for Ionic Application Development | 7
- 35. CHAPTER 2 Setting Up Our Development Environment One of the initial challenges in developing with the Ionic Framework is the installa‐ tion and setup of the several tools that Ionic requires. In this chapter, we will walk you through the process of installing all the necessary components and configurations for developing Ionic applications. The installation process can be broken down into to two main parts: the base Ionic installation, and the platform-specific SDK installa‐ tions. The base installation will cover just the tools that you need to generate your first Ionic application and preview it in your browser. If you want to dive right in and start developing with Ionic, then this is all you will need to do. The second portion of the installation is about setting up your native development environment(s). Even though we are building our apps with web technologies, we will still need to have the native development environments installed on our computers. This will give us access to the emulators, as well as the ability to deploy and test the applications on our devi‐ ces, and eventually submit them to the app stores. Throughout this book, we will be using the command line to use the Ionic CLI. On macOS, we will be using the Terminal application. We recommend adding either a shortcut on the desktop or adding it to your Dock. If you are developing on a PC, I personally recommend using Git Bash (which can be installed when we install Git) instead of the default command prompt. Its command syntax is the same as in macOS, so following along with the code samples should be easier. Installing the Ionic Framework This section we will get the essential Ionic development environment set up, then generate our first Ionic application and preview it in our browser. You may be won‐ dering why we want to preview our application in a browser. Remember, we are writ‐ ing our application with web technologies, so it makes sense to target a browser as our first “platform.” We can leverage browser debugging tools and iterate through our 9
- 36. development more quickly. My personal development cycle is to try to stay away from testing on a mobile device until I need to. There are four components we need to install; in Table 2-1, you can see the software we need to get started along with their corresponding URLs. Table 2-1. Ionic Framework Tools Tool URL Node.js nodejs.org Git git-scm.com Ionic ionicframework.com Apache Cordova cordova.apache.org Installing Node.js The foundation for Ionic is built atop Node.js (often referred to simply as Node). Node is a platform that enables you to run JavaScript outside the browser. This has enabled developers to create applications and solutions that are written in JavaScript and can be run almost anywhere. Both the Ionic and Cordova CLIs are written using Node. Because of this requirement, we need this framework installed first. To install Node, go to Node website and download the installer for your development platform. If you already have Node 6.X installed, you can skip this step. You will want to use the 6.X version of Node. If you have an additional need to use a later version of Node, you might want to look at Node Version Manager to allow you to easily switch between node versions. Once Node has been installed, open the Terminal and enter node -v. This command tells Node to report back the currently installed version: $ node -v $ v6.11.0 If you encounter an issue with the installation, review the documentation. You should also make sure that npm—a package manager for node modules is up to date (note: npm actually does not stand for “node package manager”). When you install Node.js this is automatically done for you. But if you want to check which ver‐ sion of npm you installed: $ npm -v $ 3.10.10 If you need to update your installation of npm, the command is: $ npm install npm -g With Node and npm successfully installed, we will now install Git. 10 | Chapter 2: Setting Up Our Development Environment
- 37. Installing Git While you are free to choose any version control solution (Perforce, SourceSafe, or Git), the Ionic CLI leverages Git for the management of templates. In addition, I have found that for Windows users, using Git Bash makes it easier to follow along with the examples in this book. Go to http://git-scm.com, and click the Download button. Go ahead and open the package file and follow the default installation. Once the installation is complete, launch the Terminal window and verify it. In Terminal, type git --version and press Enter: $ git --version $ git version 2.8.4 (Apple Git-73) With Git now installed on our system, we can install the Apache Cordova CLI. Installing the Apache Cordova CLI Although we can install both Cordova and Ionic at the same time, I recommend installing each one individually in case there is an issue during the installation pro‐ cess. The installation of Cordova CLI uses the Node package manager (npm) to perform the installation. To install it, open either your Terminal window or Git Bash, and enter the following command: $ npm install -g cordova Depending on your internet connection, this can take a while. For macOS users, you may encounter an issue with permissions during the installation. There are two options: rerun the npm command, but preface it with the sudo command. This will allow the node modules to run as the root user. Alternatively, you can configure your system to solve this permission problem: $ cordova -v $ 7.0.1 With these tools in place, we can finally install the Ionic CLI on to our system. Installing Ionic CLI Just like the installation of the Cordova CLI, the Ionic CLI is also installed via npm. In your Terminal window, enter the following command: $ npm install -g ionic Installing the Ionic Framework | 11
- 38. This install will also take some time to complete. Once the Ionic CLI has completed its installation, we will again check it by issuing the ionic –v command in our termi‐ nal: $ ionic -v $ 3.4.0 Now we have our base installation in place for Ionic development. However, we even‐ tually will want to test our applications either in a device emulator or on an actual device. We will take a look at the installation of these tools shortly. But first, let’s set up a sample app and see how to preview it in our browser. Starting a New Ionic Project The Ionic CLI provides an easy command to enable you to set up an Ionic project: ionic start. This CLI command will generate a basic Ionic application in the active directory. The Ionic Framework can scaffold this project via a collection of starter templates. These can come from a named template, a GitHub repo, a Codepen, or even a local directory. The named templates are blank, sidemenu, and tabs. We will explore those later in this book. For now, run the following command to create an Ionic project: $ ionic start testApp Since we did not define a starter template, the Ionic CLI will now present a list of starter templates that we can pick from. Select the tabs option, and press enter. The CLI will now begin the process of downloading the template and configuring the var‐ ious components. It may ask you if you wish to create an Ionic.io account. For now, we can ignore this, but we will be exploring the Ionic services later in this book. Once the process is completed, we need to change the working directory to the testApp directory that the CLI generated: $ cd testApp Let’s take a quick look at the elements that were installed in this directory. Ionic Project Folder Structure The project directory contains quite a number of files and additional directories. Let’s take a moment to understand each item and its role: src This directory will contain the actual application code that we will be developing. hooks This directory contains scripts that are used by Cordova during the build process. node_modules Ionic now uses npm as its module management system. The supporting libraries can be found here. resources The default icons and splash screens for both iOS and Android are included. platforms This directory contains the specific build elements for each installed build platform. This directory will be added once a platform is installed. 12 | Chapter 2: Setting Up Our Development Environment
- 39. plugins This directory contains Cordova plug-ins. www This directory contains the index.html that will bootstrap our Ionic application with the transpiled output from the app directory. .gitignore A default gitignore file is generated. config.xml Used by Cordova to define various app-specific elements. ionic.config.json Used by the Ionic CLI to define various settings when executing commands. package.json A list of all the npm packages that have been installed for the project. tsconfig.json The tsconfig.json file specifies the root files and the compiler options required to compile the project. tslint.json TypeScript linter rules. This is the standard structure of any Ionic project. As we add platforms and plug-ins, additional subdirectories and files will be created. Hidden Files Any file starting with a dot on macOS will not be visible in Finder. Changes from Ionic 1 If you have used Ionic 1, there are a number of changes that you might want to be aware of. First, Ionic is no longer using Bower for its package management. Instead, this is now handled through node modules. But the biggest difference is instead of writing your app directly within the www directory, your development is now done in the src directory. We will explore the various elements in the project folder in a later chapter. For now, let’s just test previewing our application in a browser and ensure that we have a work‐ ing development environment. For more information on migrating from Ionic 1, see Appendix A. Previewing in the browser One of the advantages of building hybrid applications is that much of the develop‐ ment and testing can be done locally in the browser. In a traditional native applica‐ tion workflow, you would have to compile your application, then either run it in the emulator or go through the process of installing it on a device. The Ionic CLI has a built-in command to run the application locally in a browser. With the working directory still the one that was created by the ionic start command, enter the fol‐ lowing command: ionic serve. This will start a simple web server, open your browser, and load the application for us. It will also listen to changes and auto-refresh the browser whenever a file is saved. Starting a New Ionic Project | 13
- 40. Setting the Port Address In most cases, ionic serve will prompt you to choose an IP address. You should usually just select the local host choice. If port 8100 is in use, you can select an alternate port by passing in the --p flag followed by the port number you wish to use. We should now see the starter tab Ionic application running in our browser. The Ionic tab template contains several screens, and we can navigate through them and explore some of the various components in the Ionic Framework (Figure 2-1). Figure 2-1. Our Ionic tabs sample application Since you are viewing your Ionic app in a browser, you can use all the developer tools that you normally use. 14 | Chapter 2: Setting Up Our Development Environment
- 41. Browser Options While you are free to use whichever browser you are comfortable with, I recommend sticking with Google Chrome. Although this is not exactly the same browser that your content will run in on your mobile devices, it is similar, and you will have fewer issues between the desktop testing and the mobile versions. Platform Tools Installations While we have a working development environment, eventually we will need to con‐ tinue our development in emulators, and finally on-device. To do this we will need to install the native application platform tools. This section will be a bit more complex than the previous installation and specific to each platform we need to install. Thank‐ fully, this is a one-time process; so give yourself time to complete this section. Currently, Ionic officially supports iOS, Android, and Windows Universal. iOS If you plan to develop for iOS, you will need to use Xcode for both emulation and distribution of your app. Xcode is only available for Mac. While there are some solu‐ tions that sidestep the need for a Macintosh (PhoneGap Build and Ionic Package), I recommend having at least an entry-level Mac computer available for development. To install Xcode, simply open the App Store and search for “Xcode”. The download is quite large (well over 3 GB), so make sure you have a good internet connection and disk space for installation. Android Unlike iOS, development for Android can be done on Windows, Mac, and Linux sys‐ tems. Installation of the Android SDK can be done either via Android Studio or via the standalone SDK tools. If you want a complete IDE for Android, then download Android Studio, but we only need the SDK for our development. To download either option, go to the Android Developer website. Personally, we prefer to have the full IDE installed instead of just the SDK. Installing the Android Studio or SDK will require the installation of the Java Devel‐ opment Kit as well. These additional installation instructions can be viewed on the Android Studio page. Windows Universal If you wish to build Windows Universal applications, you will have to do this on a Windows machine. Download and install Visual Studio 2015 Community Edition. Platform Tools Installations | 15
- 42. During the installation, select “Tools for Cross Platform Development” as well as the SDK for Windows Universal Apps. Setting Emulators With the base mobile SDKs installed, we can continue the installation process. For both iOS and Android development, we need to set up the appropriate device emula‐ tors. These emulators will allow you to run a virtual mobile device on your computer. We can use them to test our application quickly on various versions of an OS or device type without needing a physical device. They are slower to work with than directly testing in your browser but can enable the ability to test device specific fea‐ tures, such as working with the Contact database. Emulators require some additional installation and configuration. Let’s look at the steps for each platform. iOS Technically, the iOS emulator is a simulator as it does not actually run the native OS, but rather simulates its execution. To install our iOS simulators, launch Xcode, then choose Preferences from the Xcode menu. In the Downloads tab, you will find a list of available simulators that can be installed. Please note that each simulator is over 1 GB is size, so make sure you have the disk space and internet connection for the download and installation. We typically only have the last two releases installed on our development machine. Once this installation is complete, we also need to install the Command Line Tools for Xcode. From the Xcode menu, select Open Developer Tool, then the More Devel‐ oper Tools option. Then locate the Command Line Tools for Xcode for your version of Xcode and download and install it. The last piece to work with iOS simulator is to install the ios-sim node module. Open a terminal window and enter the following command: $ npm install -g ios-sim You might need to issue this command with sudo depending on your configuration. The ios-sim tool is a command-line utility that launches an iOS application in Simu‐ lator. Now we will be able to run our Ionic apps in the iOS simulator. We will look at this in just a bit. 16 | Chapter 2: Setting Up Our Development Environment
- 43. Android Before we can configure our Android emulator, we need to install and set up the SDK packages. If you are using the SDK only, run the following from the command line: $ android sdk This will launch the standalone SDK manager. This tool will allow you to download the platform files for any version of Android. Like, iOS we recommend only down‐ loading the last two releases packages and tools. You need to choose the following items: • Android Platform SDK for your targeted version of Android • Android Platform-Tools • Android SDK build-tools version 19.1.0 or higher • Android Support Repository (found under “Extras”) If you are using Android Studio, from the welcome screen, select Configure, then choose SDK Manager. Then install the same components as the standalone option. With the SDKs installed, along with the corresponding platform tools, we can now configure the Android emulator. While we can create and configure our virtual Android devices within Android Studio, you need to have an active project to do this. Rather, I suggest just using the command line to configure your virtual devices: $ android avd This will open the Android Virtual Device (AVD) Manager. Once it has launched, select the Device Definitions tab to choose a known device configuration. Select the Nexus 5 definition, then click the Create AVD button. A new window will open with a variety of configurations and additional details that you can set for your virtual device—screen size, which version of Android to run, etc. Once you are satisfied with your device, click OK to finish the process. You can have as many virtual devices as you would like. Android Emulators The Android emulators are known to be slow to launch and use. This process has improved greatly in recent releases of the default emulator. However, you might want to look at an alternate solution from Genymotion for your virtual Android needs. Setting Emulators | 17
- 44. Setting Up Your Devices At some point, you will have to actually test your application on your mobile devices. Each platform has a different set of requirements for this. iOS While anyone can test their iOS app in the iOS simulator for free, you must be a paid member of the iOS Developer Program in order to test on a device. In the past, provi‐ sioning your iOS device for development was a complex process. Thankfully recent changes to Xcode have simplified this process. 1. First, directly connect your iOS device to your Mac. This process can not work via a wireless connection. Next, we need to create a temporary Xcode project. In Xcode, select New→Project from the File menu. The New Project assistant will open, then select the Single View Application choice. On the next screen, enter Demo as the Project Name, then click Next. The settings aren’t important because we are going to delete this project once we have configured the device. Select a location for the project, then click Create. Xcode will now display the configuration window for our project. We now need to set the active scheme to our device. This is set via the Scheme control near the top-left of the Xcode window. 2. With your device unlocked and displaying its Home Screen, select it from the Scheme drop-down. You should have a warning that there is No Signing Identity Found. Instead of letting Xcode fix this issue, we should manually address it. 3. In the General settings, in the Identity panel, select your team’s name (which is probably just your name) from the drop-down list. If you do not see your team’s name listed, you will need to add your team’s account to Xcode. To do this, select Add Account in the drop-down list. The Accounts preferences window will now open. Enter your Apple ID and password that is associated with your iOS Developer Program account, and click Add. 4. Once Xcode has finished logging you in and refreshing its list, close the Accounts window. Select your newly added team from the Team drop-down list. Xcode will now display a new warning about No Matching Provisioning Profiles Found. Click the Fix Issue option and Xcode will resolve this issue. In order to configure the provisioning profile, Xcode will need some additional information and permissions. You can just answer the question with the defaults. 5. Let’s validate that everything is configured correctly. Click the Run button, loca‐ ted in the top-left of the Xcode window, making sure that you have your iOS 18 | Chapter 2: Setting Up Our Development Environment
- 45. device selected as the target. After a few moments, this test app should launch on your device! Now, to integrate this into our command-line tool chain, we need to install another node tool, ios-deploy. From the command line, enter the following command: $ npm install -g ios-deploy Installation on El Capitan If you are running macOS 10.11 El Capitan, you may need to add the --unsafe-perm=true flag when running npm install or else it will fail. For more information on this issue see GitHub. For additional assistance, refer to Apple’s documentation. Android Setting up an Android device is almost the complete opposite from setting up an iOS device. The first step is to enable developer mode on your device. Since each Android device’s user interface can vary, these are the general instructions: 1. Open the Settings and scroll to the About Phone item. 2. There should be a Build Number—you must tap it seven times to enable the developer mode. As you get closer to seven taps, the device should notify you how many taps are left. 3. Once this is complete, you can go back to the Settings list and you’ll see a new Developer Options item. If you encounter an issue enabling Developer Mode on your device, review the devi‐ ce’s user guide. Next, we need to enable USB debugging in order to deploy our apps. In the Developer Options screen, locate the USB debugging option and enable it. Your Android device is now ready for development. You may be prompted with a dia‐ log to confirm the pairing when you connect the device to the computer for the first time. Adding Mobile Platforms Although the Ionic CLI will scaffold much of our application, we might need to add in the target mobile platforms. In order to view our app in either the emulator or on- device, the corresponding platform must be installed. Open your terminal window, and make sure that your working directory is your Ionic project directory. The Ionic CLI command is ionic cordova platform add [platform name] . Adding Mobile Platforms | 19
- 46. Ionic CLI’s Namespacing Starting Ionic CLI version 3, all commands that were using the Cordova CLI, have been namespaced to require the inclusion of cordova in the command. Ionic CLI’s Cordova functionality has been moved into a plug-in, which is installed by default with new Ionic projects and can be installed in existing Ionic projects with npm i --save @ionic/cli-plugin-cordova. To add the project files for Android: $ ionic cordova platform add android To add the project files for iOS: $ ionic cordova platform add ios To add the project files for Windows: $ ionic cordova platform add windows By default, the iOS platform is added if you are running on a Mac, so you rarely need to install that platform manually. This command will generate all the needed files for each specific platform. Previewing on Emulator With a mobile platform added to our Ionic project, we can now verify that we can preview our app in the platform emulator. To run our app in an emulator, use the fol‐ lowing command: $ ionic cordova emulate [platform] The Ionic CLI will begin building your app for use on that platform’s emulator. You will see a lot of output in the terminal as it goes through the process. Once it is fin‐ ished, the emulator will automatically launch and run your application. If you need to target a specific emulated device, append the command to include the --target switch. For example, if I wanted to emulate an iPad Air, I would use: $ ionic cordova emulate ios --target="iPad-Air" For a list of iOS device types, use: $ ios-sim showdevicetypes For a list of Android devices, you will need to refer to the AVD Manager for the device names. Once you already have the emulator up and running, you can run the cordova emu late command again without closing the emulator. This is faster than exiting the 20 | Chapter 2: Setting Up Our Development Environment
- 47. emulator and relaunching it every time you change files because the emulator doesn’t have to reboot the OS each time. The Ionic CLI has another very powerful feature that allows you to reload the app instantly using the live reload flag, --livereload. This feature was a huge timesaver when working with emulators during our Ionic 1 development workflows. However, recent device security changes have currently disabled it, and it is not clear if a solu‐ tion will be found. You can also output the console logs to Terminal so you can read them more easily (see the Ionic blog post about this feature): $ ionic cordova emulate ios -l -c $ ionic cordova emulate android -l -c Previewing on Device Although the emulators do a fine job, eventually you will need to install your applica‐ tion on a physical device. The Ionic CLI makes it extremely easy to do so with the cordova run command. In your terminal, enter ionic cordova run platform. The Ionic CLI will then begin the process of compiling the app for installation on your device. When it is finished, it will automatically install the app on the connected device. Be aware that each installation will overwrite the existing installation of the app. For iOS deployment, you will also need the ios-deploy node module installed; other‐ wise, you will have to manually perform the installation via Xcode: $ ionic cordova run ios -l -c If you are developing for Android on a Windows machine, you might need to down‐ load and install the appropriate USB driver for your device. Check the Android Stu‐ dio website to see if one is needed for your device. No additional drivers should be needed for macOS to deploy to an Android device: $ ionic cordova run android -l -c If a device is not found, the Ionic CLI will then deploy your app to an emulator/simu‐ lator for that platform. Summary This chapter covered all the steps needed to set up your Ionic development environ‐ ment. We built a first test app and previewed it locally in our browser, in an emulator, and finally on our device. Previewing on Device | 21
- 49. CHAPTER 3 Understanding the Ionic Command-Line Interface One of the key tools that we will be using while developing our Ionic applications is the Ionic command-line interface, or CLI. We touched briefly upon this tool during our initial setup, but this chapter will explore the various options this utility gives us. First, if you have not installed the Ionic CLI, you can use npm to do so. If you are on a Macintosh, launch the Terminal application. For Windows users, launch Git Bash (or another command prompt). Then enter the following command: $ npm install -g ionic This will install the latest version of the Ionic CLI. The Ionic CLI is fully backward compatible with version 1 projects, which is helpful if you have already done some Ionic development. macOS users might need to prepend the npm command with sudo for the installations to work. Once the installation of the Ionic CLI is complete, we can test its installation by build‐ ing our first test application: $ ionic start myApp [template name] This command will create a new Ionic application in a new directory named myApp using the template that we pass to the command. Let’s explore the various template options that we can use. 23
- 50. Ionic currently has several starter templates. There are the original layout templates: blank, sidemenu, and tabs, as well as several advanced templates: super, conference, tutorial, and aws. If no template is passed as a parameter, then the CLI will prompt you to select an option. Figure 3-1. The Ionic templates: blank, sidemenu, and tabs Previously, the Ionic CLI allowed you to reference external templates by passing in a URL. This functional was disabled with the release of version 3 of the Ionic CLI. Another change was dropping the requirement to pass in the --v2 flag to generate an Ionic 2 application. By default, the Ionic CLI will alway generate the current ver‐ sion. If you need to generate an Ionic 1 application, you are now able to do so using the --type=ionic1 flag. The --ts Flag If you used earlier versions of Ionic 2, you might be familiar with the --ts flag, which told the CLI to use TypeScript as the develop‐ ment language. Starting with beta 8, the decision was made to only support TypeScript. Thus, the need to include this flag was removed. There are some additional command-line flags that you can pass to the command as well. By default, the ionic start command will take the name of the directory that is created and set that as the app’s name in the config.xml file. You are free to change this within config.xml at any time, but instead you can use either the –appname or –n flag 24 | Chapter 3: Understanding the Ionic Command-Line Interface
- 51. followed by the actual application name. Since your appname will probably include spaces, your will need to use quotes around the name for this to work: $ ionic start myApp -n "My Awesome Ionic App" There are several other new flags that you might want to use when starting your new Ionic application. If you do not want to include any of the default dependencies when generating the application, pass in the --skip-dep flag. By default, the Ionic CLI will now seed the starter for integration with Git. If you to override this functionality, use the --no-git flag. Another new flag is the the --cordova flag. Since the Ionic CLI has moved all the Cordova related functions into a sub-module, we need to install it if we are going to be working with Cordova. Don’t worry if you forget to pass in this flag, the Ionic CLI will prompt you to install it once you use a related command. You might be wondering why would we not want to include Cordova into our project— aren’t we building mobile applications and don’t we need to use Cordova as part of the process? Yes. However, you might want to use Ionic as the UI framework for a progressive web application, so you could avoid using Cordova. Another option might be using Ionic as the UI framework for an Electron-based desktop app. In either case, it is an option that is available if you need it. Define Your Build Platforms Once the base Ionic application has been scaffolded, we next need to add the target platform we will want to build for. The command to do this is: $ ionic cordova platform add [platform name] Common Mistake If you try to run this command without changing your active directory into the project directory that was just created, you will get an error. Always remember to issue cd [app name] before run‐ ning any of the other Ionic CLI commands. In the past, macOS users would have the iOS platform automatically added to the project. Starting with Ionic CLI 3, this automatic install has been removed. You will now need to manually install the iOS platform using this command: $ ionic cordova platform add ios To build for the Android platform, you will need to add it to the project: $ ionic cordova platform add android To build for the Windows Universal platform, you will need to add it to the project: $ ionic cordova platform add windows Define Your Build Platforms | 25
- 52. Remember for iOS, Android, and Windows Universal, their respective SDKs must be installed on the local machine in order to actually build for that platform. This Ionic command only configures the local project files for use by the SDKs. If for some reason you need to remove a platform from your project, you can use: $ ionic cordova platform remove [platform name] Occasionally, something might go wrong during an installation of a plugin or during an update. One common solution is to remove the platform, then reinstall it into the project. Managing Cordova Plugins The installation of Cordova plugins is often one of the first things you will do after including your build platforms. Although we will touch upon using Cordova plugins and Ionic Native in a later chapter, the basic command is: $ ionic cordova plugin add [plugin id] Usually, the plugin ID is the npm domain name—for example, cordova-plugin- geolocation. However, it could reference a local directory or a GitHub repo. To remove an installed plugin, the command is simply: $ ionic cordova plugin rm [plugin id] If you ever need to see a listing of all the plugins you have installed in your project, use: $ ionic cordova plugin ls Ionic Generator Although the Ionic CLI will scaffold your application via the ionic start command, you can then extend your app with new pages, components, providers, pipes, and more via the CLI. The generate command allows you to quickly create a boilerplate version of the element you need: $ ionic g [page|component|directive|pipe|provider|tabs] [element name] For example, if we want to create a new page for an application, the command is sim‐ ply: $ ionic g page myPage The Ionic CLI will then create a new directory in our app directory, and generate the HTML, SCSS, and TS files for us. 26 | Chapter 3: Understanding the Ionic Command-Line Interface
- 53. A Quick Note on Naming Conventions Ionic 2 uses kebob-casing for filenames (e.g., my-about-page.html) and CSS classes (e.g., .my-about-page). It uses PascalCasing for JavaScript classes in TypeScript (e.g., MyAboutPage). Previewing Your Application Often, early development can be previewed and tested locally in a browser. Although the Ionic CLI does make it fairly easy to launch your application in an emulator or on an actual mobile device, the ability to preview and debug in what is probably a very familiar environment, your browser is a real advantage. The ionic serve command will start a local development server, then automatically load your application into the browser. In addition, the command will start a LiveRe‐ load watcher, so as you make changes to the application, it will be automatically reloaded in the browser without you needing to manually reload it (Figure 3-2). $ ionic serve Figure 3-2. The Ionic tab template being run in a browser Previewing Your Application | 27
- 54. The Ionic lab Command With the --lab flag passed to ionic serve, your application will be displayed in an iOS frame, an Android frame, and a Windows frame in the same browser window. This feature will let you quickly see the various platform-specific differences that may exist. To use this simply type the following (see Figure 3-3): $ ionic serve --lab Figure 3-3. Ionic serve running in --lab mode In this mode, each instance of the Ionic app will run as if on that mobile platform. So any platform-specific CSS or JavaScript will be executed. This feature can be a real timesaver during the early part of the development cycle, but it is in no way a substi‐ tute for testing on actual devices. Specifying an IP Address to Use If you need to specify what address the LiveReload server will run on, you can pass that value via the --address flag, followed by the IP address: $ ionic serve --address 112.365.365.321 28 | Chapter 3: Understanding the Ionic Command-Line Interface
- 55. Other documents randomly have different content
- 56. but he has agreed to donate royalties under this paragraph to the Project Gutenberg Literary Archive Foundation. Royalty payments must be paid within 60 days following each date on which you prepare (or are legally required to prepare) your periodic tax returns. Royalty payments should be clearly marked as such and sent to the Project Gutenberg Literary Archive Foundation at the address specified in Section 4, “Information about donations to the Project Gutenberg Literary Archive Foundation.” • You provide a full refund of any money paid by a user who notifies you in writing (or by e-mail) within 30 days of receipt that s/he does not agree to the terms of the full Project Gutenberg™ License. You must require such a user to return or destroy all copies of the works possessed in a physical medium and discontinue all use of and all access to other copies of Project Gutenberg™ works. • You provide, in accordance with paragraph 1.F.3, a full refund of any money paid for a work or a replacement copy, if a defect in the electronic work is discovered and reported to you within 90 days of receipt of the work. • You comply with all other terms of this agreement for free distribution of Project Gutenberg™ works. 1.E.9. If you wish to charge a fee or distribute a Project Gutenberg™ electronic work or group of works on different terms than are set forth in this agreement, you must obtain permission in writing from the Project Gutenberg Literary Archive Foundation, the manager of the Project Gutenberg™ trademark. Contact the Foundation as set forth in Section 3 below. 1.F.
- 57. 1.F.1. Project Gutenberg volunteers and employees expend considerable effort to identify, do copyright research on, transcribe and proofread works not protected by U.S. copyright law in creating the Project Gutenberg™ collection. Despite these efforts, Project Gutenberg™ electronic works, and the medium on which they may be stored, may contain “Defects,” such as, but not limited to, incomplete, inaccurate or corrupt data, transcription errors, a copyright or other intellectual property infringement, a defective or damaged disk or other medium, a computer virus, or computer codes that damage or cannot be read by your equipment. 1.F.2. LIMITED WARRANTY, DISCLAIMER OF DAMAGES - Except for the “Right of Replacement or Refund” described in paragraph 1.F.3, the Project Gutenberg Literary Archive Foundation, the owner of the Project Gutenberg™ trademark, and any other party distributing a Project Gutenberg™ electronic work under this agreement, disclaim all liability to you for damages, costs and expenses, including legal fees. YOU AGREE THAT YOU HAVE NO REMEDIES FOR NEGLIGENCE, STRICT LIABILITY, BREACH OF WARRANTY OR BREACH OF CONTRACT EXCEPT THOSE PROVIDED IN PARAGRAPH 1.F.3. YOU AGREE THAT THE FOUNDATION, THE TRADEMARK OWNER, AND ANY DISTRIBUTOR UNDER THIS AGREEMENT WILL NOT BE LIABLE TO YOU FOR ACTUAL, DIRECT, INDIRECT, CONSEQUENTIAL, PUNITIVE OR INCIDENTAL DAMAGES EVEN IF YOU GIVE NOTICE OF THE POSSIBILITY OF SUCH DAMAGE. 1.F.3. LIMITED RIGHT OF REPLACEMENT OR REFUND - If you discover a defect in this electronic work within 90 days of receiving it, you can receive a refund of the money (if any) you paid for it by sending a written explanation to the person you received the work from. If you received the work on a physical medium, you must return the medium with your written explanation. The person or entity that provided you with the defective work may elect to provide a replacement copy in lieu
- 58. of a refund. If you received the work electronically, the person or entity providing it to you may choose to give you a second opportunity to receive the work electronically in lieu of a refund. If the second copy is also defective, you may demand a refund in writing without further opportunities to fix the problem. 1.F.4. Except for the limited right of replacement or refund set forth in paragraph 1.F.3, this work is provided to you ‘AS-IS’, WITH NO OTHER WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY OR FITNESS FOR ANY PURPOSE. 1.F.5. Some states do not allow disclaimers of certain implied warranties or the exclusion or limitation of certain types of damages. If any disclaimer or limitation set forth in this agreement violates the law of the state applicable to this agreement, the agreement shall be interpreted to make the maximum disclaimer or limitation permitted by the applicable state law. The invalidity or unenforceability of any provision of this agreement shall not void the remaining provisions. 1.F.6. INDEMNITY - You agree to indemnify and hold the Foundation, the trademark owner, any agent or employee of the Foundation, anyone providing copies of Project Gutenberg™ electronic works in accordance with this agreement, and any volunteers associated with the production, promotion and distribution of Project Gutenberg™ electronic works, harmless from all liability, costs and expenses, including legal fees, that arise directly or indirectly from any of the following which you do or cause to occur: (a) distribution of this or any Project Gutenberg™ work, (b) alteration, modification, or additions or deletions to any Project Gutenberg™ work, and (c) any Defect you cause.
- 59. Section 2. Information about the Mission of Project Gutenberg™ Project Gutenberg™ is synonymous with the free distribution of electronic works in formats readable by the widest variety of computers including obsolete, old, middle-aged and new computers. It exists because of the efforts of hundreds of volunteers and donations from people in all walks of life. Volunteers and financial support to provide volunteers with the assistance they need are critical to reaching Project Gutenberg™’s goals and ensuring that the Project Gutenberg™ collection will remain freely available for generations to come. In 2001, the Project Gutenberg Literary Archive Foundation was created to provide a secure and permanent future for Project Gutenberg™ and future generations. To learn more about the Project Gutenberg Literary Archive Foundation and how your efforts and donations can help, see Sections 3 and 4 and the Foundation information page at www.gutenberg.org. Section 3. Information about the Project Gutenberg Literary Archive Foundation The Project Gutenberg Literary Archive Foundation is a non- profit 501(c)(3) educational corporation organized under the laws of the state of Mississippi and granted tax exempt status by the Internal Revenue Service. The Foundation’s EIN or federal tax identification number is 64-6221541. Contributions to the Project Gutenberg Literary Archive Foundation are tax deductible to the full extent permitted by U.S. federal laws and your state’s laws. The Foundation’s business office is located at 809 North 1500 West, Salt Lake City, UT 84116, (801) 596-1887. Email contact
- 60. links and up to date contact information can be found at the Foundation’s website and official page at www.gutenberg.org/contact Section 4. Information about Donations to the Project Gutenberg Literary Archive Foundation Project Gutenberg™ depends upon and cannot survive without widespread public support and donations to carry out its mission of increasing the number of public domain and licensed works that can be freely distributed in machine-readable form accessible by the widest array of equipment including outdated equipment. Many small donations ($1 to $5,000) are particularly important to maintaining tax exempt status with the IRS. The Foundation is committed to complying with the laws regulating charities and charitable donations in all 50 states of the United States. Compliance requirements are not uniform and it takes a considerable effort, much paperwork and many fees to meet and keep up with these requirements. We do not solicit donations in locations where we have not received written confirmation of compliance. To SEND DONATIONS or determine the status of compliance for any particular state visit www.gutenberg.org/donate. While we cannot and do not solicit contributions from states where we have not met the solicitation requirements, we know of no prohibition against accepting unsolicited donations from donors in such states who approach us with offers to donate. International donations are gratefully accepted, but we cannot make any statements concerning tax treatment of donations received from outside the United States. U.S. laws alone swamp our small staff.
- 61. Please check the Project Gutenberg web pages for current donation methods and addresses. Donations are accepted in a number of other ways including checks, online payments and credit card donations. To donate, please visit: www.gutenberg.org/donate. Section 5. General Information About Project Gutenberg™ electronic works Professor Michael S. Hart was the originator of the Project Gutenberg™ concept of a library of electronic works that could be freely shared with anyone. For forty years, he produced and distributed Project Gutenberg™ eBooks with only a loose network of volunteer support. Project Gutenberg™ eBooks are often created from several printed editions, all of which are confirmed as not protected by copyright in the U.S. unless a copyright notice is included. Thus, we do not necessarily keep eBooks in compliance with any particular paper edition. Most people start at our website which has the main PG search facility: www.gutenberg.org. This website includes information about Project Gutenberg™, including how to make donations to the Project Gutenberg Literary Archive Foundation, how to help produce our new eBooks, and how to subscribe to our email newsletter to hear about new eBooks.
- 62. Welcome to our website – the perfect destination for book lovers and knowledge seekers. We believe that every book holds a new world, offering opportunities for learning, discovery, and personal growth. That’s why we are dedicated to bringing you a diverse collection of books, ranging from classic literature and specialized publications to self-development guides and children's books. More than just a book-buying platform, we strive to be a bridge connecting you with timeless cultural and intellectual values. With an elegant, user-friendly interface and a smart search system, you can quickly find the books that best suit your interests. Additionally, our special promotions and home delivery services help you save time and fully enjoy the joy of reading. Join us on a journey of knowledge exploration, passion nurturing, and personal growth every day! ebookbell.com