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.
Chris Griffith, San Diego, January 2017
Who Should Read This Book
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.
- 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.
Conventions Used in This Book
The following typographical conventions are used in this book:
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Used for program listings, as well as within paragraphs to refer to program elements 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 determined 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 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 significant 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@example.com.
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, interactive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Professional, 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)
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 firstname.lastname@example.org.
For more information about our books, courses, conferences, and news, see our website 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
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 honored 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.