Contents
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
Installing the Ionic Framework 9
Installing Nodejs 10
Installing Git 11
Installing the Apache Cordova CLI 11
Installing Ionic CLI 11
Starting a New Ionic Project 12
Ionic Project Folder Structure 12
Platform Tools Installations 15
iOS 15
Android 15
Windows Universal 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
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
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
Arrow Functions 46
Types 46
Special Types 47
Typing Functions 48
:void 48
Summary 48
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
HTML Structure 57
Ionic Components 59
Understanding the SCSS File 60
Understanding TypeScript 61
Summary 62
Adding Our Build Platforms 64
Previewing Our Ionic2Do App 64
Understanding the indexhtml 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 appmodulets File 92
Using Firebase Data 92
Using Ionic Native 94
Summary 98
Bootstrapping Our App 104
Loading Data via the HTTP Service 105
Display our Data 107
Extending parklistts 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
Getting Started 133
Exploring the Side Menu Template 134
Exploring the appcomponentts 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
Ionic Events 166
Observables 167
Styling the App 171
Add a Weather Icon 175
Next Steps 178
Summary 178
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
Adjusting the configxml 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
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
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
But What, Exactly, Is a Progressive Web App? 228
The manifestjson 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 Configxml File 249
C Ionic Component Library 259
Index 263
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 dramatically 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 nativelike 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 development 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 mobilefirst 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 generation 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.
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 translate 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 mapped very naturally to ES6 concepts. In fact, in many cases, they felt much more natural in ES6.
When we heard about Angular 2, we knew immediately that it was our own opportunity 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 developers using tools like Atom and Visual Studio Code. Also, the code is more 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 understand. 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 underneath, with much-expanded support for Material Design and easier theming. Our navigation system makes it possible to build the kinds of flexible and parallel navigations 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 connectivity, 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 progressive 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 recommend 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.
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 engineer 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 maintaining 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 AngularJS.
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 leveraged 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 frameworks offered and was sold on them as my solution.
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.
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 todo application.
• 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 outlines 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 components 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.
