You are previewing PhoneGap 3 Beginner's Guide.
O'Reilly logo
PhoneGap 3 Beginner's Guide

Book Description

PhoneGap opens up mobile application development to more people by using HTML and JavaScript. This book gives you the know-how on all the essentials in friendly, example-driven tutorials that will empower you to do more.

  • Understand the fundamentals of cross-platform mobile application development from build to distribution

  • Learn to implement the most common features of modern mobile applications

  • Take advantage of native mobile device capabilities—including the camera, geolocation, and local storage—using HTML, CSS, and JavaScript

  • In Detail

    You don’t have to know complex languages like Objective C to compete in the ever-growing mobile market place. The PhoneGap framework lets you use your web development skills to build HTML and JavaScript-based mobile applications with native wrappers that run on all the major mobile platforms, including Android, iOS, and Windows Phone 8.

    "PhoneGap 3 Beginner's Guide" will help you break into the world of mobile application development. You will learn how to set up and configure your mobile development environment, implement the most common features of modern mobile apps, and build rich, native-style applications. The examples in this book deal with real use case scenarios, which will help you develop your own apps, and then publish them on the most popular app stores.

    Dive deep into PhoneGap and refine your skills by learning how to build the main features of a real world app.

    "PhoneGap 3 Beginner's Guide"will guide you through the building blocks of a mobile application that lets users plan a trip and share their trip information. With the help of this app, you will learn how to work with key PhoneGap tools and APIs, extend the framework’s functionality with plug-ins, and integrate device features such as the camera, contacts, storage, and more. By the time you’re finished, you will have a solid understanding of the common challenges mobile app developers face, and you will know how to solve them.

    Table of Contents

    1. PhoneGap 3 Beginner's Guide
      1. Table of Contents
      2. PhoneGap 3 Beginner's Guide
      3. Credits
      4. Foreword
      5. About the Author
      6. About the Reviewers
      7. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Time for action – heading
          1. What just happened?
          2. Pop quiz – heading
          3. Have a go hero – heading
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. Getting Started with PhoneGap
        1. PhoneGap and Apache Cordova
        2. The evolution of PhoneGap from 1.4 to 3.x
        3. A note about operating systems
        4. A note about the command-line tool
        5. Installing PhoneGap
        6. Installing dependencies
        7. Setting up your development environment
        8. Time for action – setting up Android using PhoneGap 2.x
          1. What just happened?
        9. Time for action – setting up iOS using PhoneGap 2.x
          1. What just happened?
        10. Time for action – setting up Windows Phone using PhoneGap 2.x
          1. What just happened?
        11. Getting Started with Android and Eclipse
        12. Time for action - installing ADT into Eclipse
          1. What just happened?
        13. Getting started with iOS and Xcode
        14. Getting started with Windows Phone and Visual Studio
        15. Creating a common code base for multiplatform apps
        16. Summary
      10. 2. Building and Debugging on Multiple Platforms
        1. Development tools
          1. Sublime Text
          2. IntelliJ IDEA
          3. Adobe Brackets
        2. Time for action – configuring the cloud service in Bracket
          1. What just happened?
          2. Eclipse
        3. Native, web, and hybrid apps
        4. Working with desktop browsers
          1. WebKit debugging (Chrome, Safari, and Opera)
          2. Gecko debugging (Firefox)
          3. Internet Explorer 10
        5. Mobile debugging workflow
        6. Remote debugging
          1. Using iWebInspector (OS X only)
        7. Time for action – configuring iWebInspector for iOS debugging
          1. What just happened?
          2. Debugging with weinre
        8. Time for action – configuring Node.js and weinre
          1. What just happened?
          2. Wireless debugging with Adobe Edge Inspect
        9. Time for action – integrating Edge Inspect and weinre
          1. What just happened?
          2. iOS 6 remote debugging
        10. Mimicking mobile counterparts
          1. Have a go hero – improve the "Hello World" app
          2. Pop quiz – getting started with mobile apps
        11. Summary
      11. 3. Getting Started with Mobile Applications
        1. Mobile-centric HTML/CSS/JavaScript
          1. The viewport meta tag
          2. Unwanted telephone number linking
          3. Autocorrect
          4. CSS media queries and mobile properties
          5. JavaScript for mobile 101
            1. querySelector and querySelectorAll
            2. addEventListener
          6. Screen orientation
          7. Device orientation
          8. Shake gestures
          9. Media capture API
          10. Data URI
        2. Performance best-practices
        3. Understanding screen size and pixel density
        4. Time for action – scaling UI images according to pixel density
          1. What just happened?
        5. Writing effective JavaScript
          1. Loose coupling
          2. Event handling best practice
        6. Choosing web app templates
          1. HTML5 Mobile Boilerplate
          2. Foundation
          3. Bootstrap
          4. jQuery Mobile
          5. Which is the right one?
        7. Setting up your project using cordova-cli
        8. Time for action – installing cordova-cli using npm
          1. What just happened?
        9. Your first application – "Hello World"
        10. Time for action – creating your first cross-platform app
          1. What just happened?
          2. Add interactivity to your app
        11. Time for action – programmatically opening a modal window using Bootstrap
          1. What just happened?
        12. Achieving a native look and feel on iOS
        13. Time for action – setting up a native-like CSS for your app
          1. What just happened?
          2. Have a go hero – improve the "Hello World" app
          3. Pop quiz – getting started with mobile apps
        14. Summary
      12. 4. Architecting Your Mobile App
        1. Fine-tuning your development environment
          1. Speeding up folder access with jump (OS X)
          2. Creating a server alias with serve
          3. Customizing your shell with iTerm2 (OS X)
        2. Time for action – customizing the shell
          1. What just happened?
          2. Let LiveReload refresh pages for you (OS X)
        3. Time for action – enabling Live Reload
          1. What just happened?
        4. Reviewing the JavaScript guidelines
        5. Exploring the sample app
          1. The navigation flow
          2. The app architecture
          3. Communication between modules
          4. The anatomy of a module
        6. Building the app's core
          1. Bootstrap loader
        7. Time for action – Require.js Bootstrap
          1. What just happened?
          2. Mustache templates
        8. Time for action – creating a Mustache template
          1. What just happened?
          2. Template initialization
        9. Time for action – loading and parsing a template
          1. What just happened?
        10. The splash screen
        11. Time for action – adding a splash screen to your app
          1. What just happened?
          2. Have a go hero – preparing additional app assets
          3. Pop quiz – getting started with mobile apps
        12. Summary
      13. 5. Improving the User Interface and Device Interaction
        1. Exploring JavaScript compression
          1. Google Closure Compiler
        2. Time for action – compressing files using the Closure Compiler
          1. What just happened?
          2. UglifyJS2
        3. Time for action – using UglifyJS with the Closure Compiler
          1. What just happened?
          2. Optimization with Require.js
        4. Time for action – optimizing JavaScript with Require.js
          1. What just happened?
        5. Comparing compression tools
        6. Using template engine compression
        7. Time for action – compiling a template using pistachio
          1. What just happened?
        8. Handling a retina display user interface
        9. Time for action – user interface elements and retina display
          1. What just happened?
        10. Creating fluid, multiple app views
          1. PhoneGap lifecycle events
        11. Time for action – accessing the device API
          1. What just happened?
          2. App views
        12. Time for action – creating the templates
          1. What just happened?
          2. Navigation between views
        13. Using hardware-accelerated transitions
          1. Alice.js
        14. Getting started with the PhoneGap APIs
        15. Exploring the Connection API
          1. Pop quiz – getting started with mobile apps
          2. Have a go hero – create a network detection utility
        16. Summary
      14. 6. Using Device Storage and the Contacts API
        1. Application data storage
          1. Exploring the PhoneGap LocalStorage API
        2. Time for action – reading and writing data on the LocalStorage
          1. What just happened?
          2. Exploring the PhoneGap SQL storage
          3. Database storage with PhoneGap
        3. Time for action – populating a local database
          1. What just happened?
        4. Database limitations
        5. The Contacts API
          1. The ContactName object
          2. The ContactField object
          3. The ContactAddress object
          4. The ContactOrganization object
          5. The Contact object
          6. Filtering contact data
        6. Time for action – filtering device contacts
          1. What just happened?
          2. Pop quiz – getting started with mobile apps
          3. Have a go hero – create a Todo list app
        7. Summary
      15. 7. Accessing Device Sensors
        1. What are device sensors?
          1. Sensors and human-computer interaction
        2. Accelerometer
          1. Detecting shakes
        3. Time for action – detecting shakes in your app
          1. What just happened?
          2. Device orientation events
          3. Handling orientation with JavaScript
        4. Time for action – handling device orientation with JavaScript
          1. What just happened?
        5. Compass
          1. Creating a compass
        6. Time for action – using the Compass API
          1. What just happened?
          2. Pop quiz – getting started with mobile apps
          3. Have a go hero – rendering the device orientation
        7. Summary
      16. 8. Using Location Data with PhoneGap
        1. An introduction to Geolocation
        2. The PhoneGap Geolocation API
        3. Time for action – showing device position with Google Maps
          1. What just happened?
          2. Other Geolocation data
        4. Time for action – discovering places with Google Places
          1. What just happened?
          2. Pop quiz – getting started with mobile apps
          3. Have a go hero – improving the Google API usage
        5. Summary
      17. 9. Manipulating Files
        1. Understanding the Files API
          1. Reading directories and files
        2. Time for Action – listing folders and files recursively
          1. What just happened?
          2. Writing and reading a file's data
        3. Time for Action – reading and rendering an Image
          1. What just happened?
          2. Transferring files
        4. Time for Action – downloading and saving a file
          1. What just happened?
          2. Pop quiz – working with files
          3. Have a go hero – uploading files
        5. Summary
      18. 10. Capturing and Manipulating Device Media
        1. Camera API or Capture API?
        2. Accessing the camera using the Camera API
        3. Time for action – accessing the device camera
          1. What just happened?
          2. Controlling the camera popover
        4. Time for action – controlling the position of the camera roll
          1. What just happened?
        5. The Capture API
        6. Time for action – manipulating images with a canvas
          1. What just happened?
          2. Pop quiz – getting started with media
          3. Have a go hero – applying effects
        7. Summary
      19. 11. Working with PhoneGap Plugins
        1. Introduction to plugins
          1. Getting started with plugins
          2. Using plugins with Plugman
          3. The anatomy of a plugin
        2. Working with plugins
          1. The Push Notifications plugin
        3. Time for action – using push notifications on Android
          1. What just happened?
          2. Pop quiz – getting started with PhoneGap plugins
          3. Have a go hero – improving the push notifications example
        4. Summary
      20. A. Localizing Your App
        1. Time for action – rendering localized messages
          1. What just happened?
        2. Summary
      21. B. Publishing Your App
        1. Publishing on Google Play
        2. Publishing on the Blackberry World
        3. Publishing on the Apple App Store
        4. Publishing on the Windows Phone Store
        5. Summary
      22. C. Pop Quiz Answers
        1. Chapter 2, Building and Debugging on Multiple Platforms
          1. Pop quiz – getting started with mobile apps
        2. Chapter 3, Getting Started with Mobile Applications
          1. Pop quiz – getting started with mobile apps
        3. Chapter 4, Architecting Your Mobile App
          1. Pop quiz – getting started with mobile apps
        4. Chapter 5, Improving the User Interface and Device Interaction
          1. Pop quiz – getting started with mobile apps
        5. Chapter 6, Using Device Storage and the Contacts API
          1. Pop quiz – getting started with mobile apps
        6. Chapter 7, Accessing Device Sensors
          1. Pop quiz – getting started with mobile apps
        7. Chapter 8, Using Location Data with PhoneGap
          1. Pop quiz – getting started with mobile apps
        8. Chapter 9, Manipulating Files
          1. Pop quiz – working with files
        9. Chapter 10, Capturing and Manipulating Device Media
          1. Pop quiz – getting started with media
        10. Chapter 11, Working with PhoneGap Plugins
          1. Pop quiz – getting started with PhoneGap plugins
      23. Index