Book Image

Mastering PhoneGap Mobile Application Development

By : Kerri Shotts
Book Image

Mastering PhoneGap Mobile Application Development

By: Kerri Shotts

Overview of this book

PhoneGap is a useful and flexible tool that enables you to create complex hybrid applications for mobile platforms. In addition to the core technology, there is a large and vibrant community that creates third-party plugins that can take your app to the next level. This book will guide you through the process of creating a complex data-driven hybrid mobile application using PhoneGap, web technologies, and third-party plugins. A good foundation is critical, so you will learn how to create a useful workflow to make development easier. From there, the next version of JavaScript (ES6) and the CSS pre-processor SASS are introduced as a way to simplify creating the look of the mobile application. Responsive design techniques are also covered, including the flexbox layout module. As many apps are data-driven, you'll build an application throughout the course of the book that relies upon IndexedDB and SQLite. You'll also download additional content and address how to handle in-app purchases. Furthermore, you’ll build your own customized plugins for your particular use case. When the app is complete, the book will guide you through the steps necessary to submit your app to the Google Play and Apple iTunes stores.
Table of Contents (19 chapters)
Mastering PhoneGap Mobile Application Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Preface

PhoneGap/Cordova, as a technology to create hybrid mobile apps, relies heavily upon JavaScript, HTML, and CSS in order to present your apps to your users. This is ideal in many ways, especially since you can rely upon your knowledge of web-based technologies in order to create cross-platform mobile apps. Being able to build on your existing knowledge set is a major plus when it comes to recommending Cordova, and generally, one can build their first simple app using Cordova pretty easily. But when it comes to building larger, more complex apps, it is useful to explore various technologies and tools that allow us to more efficiently develop mobile apps. The first few chapters of this book focus exactly on this need. We'll cover task runners such as Gulp, packagers such as Browserify, and a method of writing CSS that's easier to maintain using Sassy CSS.

In this book we generally refer to PhoneGap and Cordova simply as Cordova—PhoneGap itself is a distribution of Cordova and supplies additional features and utilities. If there is a specific difference we need to mention, we will do so in at the appropriate time.

One particular hallmark of large, complex apps is a requirement for a way to store complex data efficiently. There comes a point when using the Local Storage and File API become unwieldy, and so it is important to learn about other methods to store data, such as IndexedDB and Web SQL Database.

Quite often, it's also necessary for apps to transfer large amounts of data between the device and external servers. You can imagine a social photography app might need to upload images, and an e-book app would need to download files that represent books. We'll devote an entire chapter to this topic as well.

Of course, most developers want to get their apps out into the devices of as many users as possible. This is why creating accessible applications is important. Not every user has perfect vision. Some users may have trouble reading small text or text with low contrast. Other users may have problems discerning various color shades. And other users may not be able to hear your app's sounds very well. With assistive technologies on many mobile platforms, it is a very good idea to build our apps so that as many users as possible can use them effectively.

Deployment, ultimately, is our goal, and so the latter portion of the book will deal exactly with that: how to create launch screens and icons for our app, how to create a release build, and ultimately, how to deploy the app to the various app stores.

Along the way, we'll also deal with other concepts, such as tips you can use to make your app's user interface respond appropriately to the various form factors it finds itself running on. You'll also find tools that can verify that your app is working as you expect, as well as tips on how to find and fix performance issues.

When you're finished with this book, you should hopefully have the knowledge necessary to tackle large scale and more complex apps that are accessible, performant, and responsive.

In this book, we'll focus on the iOS and Android platforms. Cordova, however, supports many other platforms. In general, most of what is covered in this book applies to these other platforms as well. However, there are some third-party plugins that are used. If you do want to support another platform, you'll want to verify that the same or a similar plugin is available.

What this book covers

Chapter 1, Task Automation, introduces you to the process of automating your common development tasks, including copying and transforming files in various ways as part of your build steps. Sections deal specifically with creating an extensible build system that can transpile JavaScript, minify code automatically, perform Cordova CLI tasks, and lint your code to catch syntax errors.

Chapter 2, ECMAScript 2015 and Browserify, is a short introduction to many of the new features in ECMAScript 2015 and beyond, including string interpolation, object destructuring, named and default parameters, lexically bound functions, and more. The chapter also introduces Browserify as a way to package your own code and reuse great code modules from other JavaScript developers.

Chapter 3, Sassy CSS, introduces you to the world of CSS transpilers, notably the Sassy CSS language. Specifically, the chapter covers variables, nesting, and mixins, all of which make it easier to write readable and maintainable CSS code.

Chapter 4, More Responsive Design, focuses on the steps and features you can use to create hybrid apps that respond appropriately to the form factors of various devices. This chapter explores logical and physical pixels, important CSS units, media queries, image sizing, and using the flex box model to design complex yet responsive user interfaces.

Chapter 5, Hybrid Application Accessibility, explores the various methods you can use as a developer to make your app accessible to users who may need assistance seeing, hearing, or utilizing the content within your application.

Chapter 6, Testing and UI Automation, addresses the very real need to ensure that the apps we build actually function correctly. The chapter introduces you to testing concepts as well as various tools to automate tests. Finally, the chapter addresses how to automate the user interface as another method to test on real devices.

Chapter 7, IndexedDB, introduces you to a method of persistent storage other than Local Storage or the File API. The chapter covers how to create new object stores, save, retrieve and search for data, and more.

Chapter 8, Web SQL Database, introduces you to relational databases and how they can be used within Cordova using a third-party plugin. The chapter focuses on how to store and retrieve data using SQL.

Chapter 9, Transferring Files, covers how to download content from an external server into your app as well as how to upload content from your app and transfer it to an external server.

Chapter 10, Performance, discusses methods you can use to check how well your application performs on real devices, and also provides tips you can use to improve the performance if necessary.

Chapter 11, Graphical Assets, discusses how to create launch screens and icons for your application. The chapter provides tips on how to create a memorable icon and a good launch screen.

Chapter 12, Deployment, shows you how to create developer accounts for the Google Play Market and Apple App Store step by step so that you can deploy your apps to the world. Once your accounts are created, the chapter guides you through the process of uploading your app's graphical assets, defining metadata, and finally, uploading your app itself.

What you need for this book

To build/run the code supplied for the book, the following software is required (divided by platform where appropriate):

 

Windows

Linux

OS X

For iOS Apps

   

IDE

  

XCode 7+

OS

  

OS X 10.10.5+

SDK

  

iOS 7+

For Android Apps

   

IDE

Not required; you can use Android Studio if you want an IDE

OS

Vista or newer

Any modern distro supporting: GNU C library 2.15+, if 64-bit, must be able to run 32-bit apps. Ubuntu must be 15.04+

OS X 10.8.5+

Java*

JDK 7 or higher

JDK 7 or higher

JDK 7 or higher

SDK Level

Version 19+

Version 19+

Version 19+

For All Platforms

   

Apache Cordova / Phonegap

5.x** or better

5.x** or better

5.x** or better

ANT

1.9.4+

1.9.4+

1.9.4+

* A JRE is not sufficient.

** The code accompanying this book has been tested with Cordova 6.0.0. It should work with any 5.x or 6.x version. The code also relies on core and third-party plugins, as well as various other software and node packages; check the README file in the code package for this book for specific plugin, software, and package versions, if applicable.

While not required, it is considered good practice to work using source control. Git is an easy-to-use source control management solution, and the one the author uses.

Websites and download locations:

Who this book is for

If you are a developer using Cordova to create hybrid mobile applications and wish to take your app to the next level by including any of the following features, this book is for you:

  • Automate code transformation, syntax checking, and build steps

  • Package your code more efficiently, and use npm packages to speed development

  • Use responsive design techniques so that your app can respond appropriately to different form factors and orientations

  • Increase your app’s audience by making it more accessible

  • Verify correctness using automated tests and UI automation tools

  • Store structured data using databases

  • Transfer files between the app and external servers

  • Locate and fix performance issues

  • Create signed release versions of your app, ready for deployment

This book assumes that the reader has the following knowledge and abilities:

  • Understand how to use the operating system’s command-line interface, whether Mac OS X, Linux, or Windows

  • Can install and configure Android and iOS SDKs

  • Has a basic understanding of the Cordova CLI, and the typical workflow

  • Understands typical HTML5, CSS, and JavaScript code

  • Has some knowledge of the browser’s Document Object Model or DOM

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We can include other files through the use of the import keyword."

A block of code is set as follows:

function mul(a, b, log) {
  var ans = a * b;
  if (log === true) {
    console.log ([a, b, ans]);
  }
}

When we wish reference a portion of code in the following text, the code is marked with a commented number, like so:

function mul(a, b, log) {
  var ans = a * b;
  if (log === true) { // [1]
    console.log ([a, b, ans]);
  }
}

We use the strict equality operator in [1] to avoid type coercion.

Any command-line input or output is written as follows:

$ gulp copy && gulp init

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Right-click on An Element and then on Inspect Element."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail , and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

The code package for this book is also available on GitHub: https://github.com/kerrishotts/Mastering-PhoneGap-Code-Package.

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from http://www.packtpub.com/sites/default/files/downloads/1234OT_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at , and we will do our best to address the problem.