Book Image

JavaScript Mobile Application Development

Book Image

JavaScript Mobile Application Development

Overview of this book

Table of Contents (15 chapters)
JavaScript Mobile Application Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Preface

Mobile development is one of the hottest trends and an essentiality in today's software industry. As you might have noticed, almost every popular website today has its own equivalent mobile application version to allow its current users to access the website's functions from their mobiles and cater to a large number of users who don't have personal computers. Adding to this, with the powerful hardware specification and computing capability of today's smart phones, they have become real competitors to personal computers, and many people now prefer to use their smart phones for their daily activities (such as checking the current news, capturing videos and posting them on Facebook and YouTube, and checking e-mails), instead of using their personal computers.

Although developing mobile applications is a really interesting thing, it is worth mentioning that developing them on mobile platforms requires mobile developers to put in a lot of effort and have a wide skill set. For example, in order to develop a native mobile application on Android phones and tablets, the developer should be familiar with the Android SDK and Java programming language. In contrast, if there is a need to develop the same mobile application on iPhone and iPad devices, the mobile developer has to be familiar with Xcode and the Objective-C language. A developer on a Windows Phone, however, will require skills in .NET programming in order to develop an app.

Adding to the previous challenges, and as each mobile platform has its own philosophy of mobile application development, you will need to handle the different types of problems that you will face on every platform using different programming languages. For example, you might face a common problem when reimplementing your Android application logic (which is written using Java) on the Windows Phone 8 platform. The problem will most likely be that your code logic, which was sending an SMS directly from your application code without any interruptions, is not valid anymore, as in the Windows Phone platform, it is not allowed to send SMS messages from the application code without launching the default platform SMS application. This means that you will need to do this logic change in your new code, which is implemented using a different programming language (a .NET programming language in this case).

All of these challenges will cost you a huge amount of development and testing effort in order to develop an important mobile application that can work on many mobile platforms.

All of these previous facts and challenges offered me a great motive to write this book. This book is about how to efficiently develop mobile applications using common web technologies, such as HTML, CSS, and JavaScript. After finishing this book, you should be able to develop your mobile application on different mobile platforms using only JavaScript, without having to learn the native programming languages of every mobile platform. This will definitely reduce the development cost and effort of your cross-platform mobile application, as you will use only one popular programming language, which is JavaScript. Adding to this, using a single popular programming language to handle the different problem types of every mobile platform will allow handling these problems to be in a centralized place in the code. This increases the readability and maintainability of your mobile application code across mobile platforms.

In order to achieve this mission, this book focuses on Apache Cordova, a platform that uses HTML, CSS, and JavaScript to build mobile applications. Apache Cordova offers a set of APIs that allow the mobile application developer to access native mobile functions, which will be covered in more detail in Chapter 1, An Introduction to Apache Cordova.

The Apache Cordova project was originally known as PhoneGap. The PhoneGap project was started in 2008 by a company called Nitobi, with the goal to simplify cross-platform mobile development using a team of mobile developers. However, this framework supported only one platform: Apple iPhone. Fortunately, it then added Android and BlackBerry support.

In 2009, this project won the People's Choice Award at O'Reilly Media's 2009 Web 2.0 Conference, with the framework being used to develop many applications since then. The PhoneGap team continued working hard on the project to support more mobile platforms and enhance the project APIs.

In 2011, Adobe announced the acquisition of Nitobi, and the project contributed to Apache Software Foundation, first called Apache Callback and later renamed to Apache Cordova. Interestingly enough, Cordova was the name of the street where the Nitobi offices were located. In this book, Apache Cordova is the project that will be discussed.

In order to develop neat-looking mobile applications, this book also utilizes jQuery Mobile. jQuery Mobile is one of the best mobile web application frameworks, and it allows the web developer to develop web applications that are mobile friendly.

Finally, this book is a practical guide for web developers who need to develop interactive mobile applications using their current skill set. If you are a native mobile application developer who wants to develop your mobile applications in much less time and effort using JavaScript and Apache Cordova, you will also find this book to be incredibly useful.

What this book covers

Chapter 1, An Introduction to Apache Cordova, teaches you what Apache Cordova is and the differences between mobile web, mobile hybrid, and mobile native applications. You will also know why we should use Apache Cordova, along with the current Apache Cordova architecture, and finally, the chapter offers an overview of the Apache Cordova APIs.

Chapter 2, Developing Your First Cordova Application, explains how to develop, build, and deploy your first Sound Recorder mobile application on the Android platform.

Chapter 3, Apache Cordova Development Tools, explains how to configure your Android, iOS, and Windows Phone development environments. You will also learn how to support and run your Sound Recorder mobile application on both iOS and Windows Phone 8 platforms.

Chapter 4, Cordova API in Action, dives deep into the Apache Cordova API, and you will see it in action. You will learn how to work with the Cordova accelerometer, camera, compass, connection, contacts, device, geolocation, globalization, and InAppBrowser APIs by exploring the code of the Cordova Exhibition app. The Cordova Exhibition app is designed and developed to show complete usage examples of the Apache Cordova core plugins. The Cordova Exhibition app supports Android, iOS, and Windows Phone 8.

Chapter 5, Diving Deeper into the Cordova API, continues to dive into the Apache Cordova API by exploring the remaining main features of the Cordova Exhibition app. You will learn how to work with the Cordova media, file, capture, notification, and storage APIs. You will also learn how to utilize the Apache Cordova events in your Cordova mobile app.

Chapter 6, Developing Custom Cordova Plugins, dives deep into Apache Cordova and lets you create your own custom Apache Cordova plugin on the three most popular mobile platforms: Android, which uses the Java programming language, iOS, which uses the Objective-C programming language, and Windows Phone 8, which uses the C# programming language.

Chapter 7, Unit Testing the Cordova App's Logic, explains how to develop JavaScript unit tests for your Cordova app logic. You will learn the basics of the Jasmine JavaScript unit testing framework and understand how to use Jasmine in order to test both the synchronous and asynchronous JavaScript code. You will learn how to utilize Karma as a powerful JavaScript test runner in order to automate the running of your developed Jasmine tests. You will also learn how to generate the test and code coverage reports from your developed tests. Finally, you will learn how to fully automate your JavaScript tests by integrating your developed tests with Continuous Integration tools.

Chapter 8, Applying it All – the Mega App, explores how to design and develop a complete app (Mega App) using the Apache Cordova and jQuery Mobile APIs. Mega App is a memo utility that allows users to create, save, and view audible and visual memos on the three most popular mobile platforms (Android, iOS, and Windows Phone 8). In order to create this utility, Mega App uses jQuery Mobile to build the user interface and Apache Cordova to access the device information, camera, audio (microphone and speaker), and filesystem. In this chapter, you will learn how to create a portable app that respects the differences between Android, iOS, and Windows Phone 8.

What you need for this book

You should have basic knowledge of the common web technologies (HTML, CSS, and JavaScript). It is also highly recommended that you learn the basics of jQuery and jQuery Mobile in order to be familiar with the code examples. A quick introduction to jQuery and jQuery Mobile can be found at http://www.w3schools.com/jquery/ and http://www.w3schools.com/jquerymobile/, respectively.

Who this book is for

If you are a web developer, then reading this book to learn how to develop mobile applications using Apache Cordova is a great option for you, as you don't have to spend extra time learning JavaScript, CSS, and HTML before reading this book.

If you are a native mobile developer, then spending some time learning about the common web technologies, namely JavaScript, CSS, and HTML, will add great value and impact to your work. After acquiring these skills, along with reading this book to learn about Apache Cordova, you will be able to develop cross-platform mobile application(s) in much less time and effort as compared to the time and effort you will need to spend in order to develop the same application(s) on every platform using the native programming languages.

Conventions

In this book, you will find a number of styles of text 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: "This js directory also includes the common.js file that includes the common app utilities."

A block of code is set as follows:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.jsmobile.soundrecorder" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>SoundRecorder</name>
<description>
        A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
</widget>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

 (function() {
   
    var memoManager = MemoManager.getInstance();
    var recInterval;
   
    $(document).on("pageinit", "#memoCapture", function(e) {        
        $("#saveMemo").on("tap", function(e) {
            e.preventDefault();
   
            var memoItem = new MemoItem({
                "type": $("#mtype").val(),
                "title": $("#title").val() || "Untitled",
                "desc": $("#desc").val() || "", 
                "location": $("#location").val() || "",
                "mtime":  $("#mtime").html() || new Date().toLocaleString(),
                "id": $("#mid").val() || null
            });
   
             memoManager.saveMemo(memoItem);
   
             $.mobile.changePage("#memoList");
        });
   
        // ...
    });
})();

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

> sudo npm install -g cordova

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Once you are done, click on the Stop Recording button to finish recording."

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 may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title through 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 on 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 for all Packt books you have purchased from your account at http://www.packtpub.com. 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.

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 would 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/support, 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.

Piracy

Piracy of copyright 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

You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.