You are previewing PhoneGap By Example.
O'Reilly logo
PhoneGap By Example

Book Description

Use PhoneGap to apply web development skills and learn variety of cross-platform mobile applications

About This Book

  • Utilize the robust features of the mobile hybrid approach to develop, test, and publish mobile applications using the PhoneGap framework

  • Use your web skills for hybrid mobile application development and deliver to many mobile platforms without rewriting the code

  • Develop a set of ready-to-use mobile applications with this practical, comprehensive, step-by-step guide

  • Who This Book Is For

    If you are a web developer with some experience in development of single page applications and want to enter the world of mobile applications, then this technology and book is ideal for you. Since PhoneGap maintains an incredibly easy-to-use plugin interface, no previous experience in native languages development (such as Objective-C or Java) is required.

    What You Will Learn

  • Set up plugins to access the camera and filesystem to capture media

  • Build a custom RESTful service and integrate it with a PhoneGap application

  • Integrate a HTML5 Canvas element to create mobile games

  • Build scalable applications using a modern mobile web framework

  • Interact with RESTful services from a mobile application

  • Build an audio/video chat facility using PhoneGap and WebRTC technologies

  • Develop a PhoneGap plugin with native interfaces for iOS and Android

  • In Detail

    PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. It is one of the first and fastest spreading tools to develop hybrid applications using CSS, JavaScript, and HTML, without losing the advantages of native applications.

    If you are already a web developer, this book will provide you with the skills you need to create, customize, test, and deploy hybrid mobile applications. Starting from the beginning, this book will cover how to set up your PhoneGap development environment, add mobile web frameworks and plugins, design and customize the application layout, and utilize the embedded features of the PhoneGap framework.

    By working through the steps in each chapter, you will quickly master a variety of mobile applications with totally different approaches. You will then learn how to develop a PhoneGap plugin with native interfaces for iOS and Android, as well as common approaches to test PhoneGap applications.

    With ample screenshots that show you how to build a phenomenal application, PhoneGap by Example will ensure your success with this cutting-edge mobile development framework for hybrid applications.

    Style and approach

    An easy-to-follow guide packed with hands-on examples of real-world mobile applications. Each topic is explained sequentially in the process of creating a hybrid mobile application, and detailed explanations of the basic and advanced features of PhoneGap are included.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

    1. PhoneGap By Example
      1. Table of Contents
      2. PhoneGap By Example
      3. Credits
      4. About the Author
      5. About the Reviewers
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Installing and Configuring PhoneGap
        1. Downloading and installing
          1. Installing Node.js on Mac
            1. Installing Node.js from the official website
            2. Installing Node.js with Homebrew
          2. Installing Node.js on Windows
          3. Installing Node.js on Linux
        2. Installing PhoneGap with NPM
        3. Understanding PhoneGap
          1. Basic components
          2. Development methods
          3. Cordova installation
        4. Creating an application
        5. The config.xml structure
        6. The iOS setup
          1. Running the application in the iOS emulator
        7. Running the application on an iOS device
          1. Generating the iOS developer certificate
          2. Adding the application identifier
          3. Registering the device
          4. Generating a provisioning profile
        8. The Android setup
          1. JDK Installation
          2. Android SDK installation
          3. Android Studio installation
          4. Opening the project in Android Studio
          5. Adding an Android emulator
        9. PhoneGap development highlights
          1. Use a single-page application approach
          2. Don't generate the UI on the server
          3. Limit network access
          4. Increase perceived speed
          5. Use hardware acceleration
          6. Optimize images
          7. Optimize payload
          8. Minimize browser reflows
          9. Test
        10. Selecting a UI framework
          1. Sencha Touch
          2. jQuery Mobile
          3. Ionic
          4. Ratchet
          5. The Kendo UI
          6. Topcoat
          7. React
          8. Framework7
          10. The Onsen UI
        11. Summary
      9. 2. Setting Up a Project Structure with Sencha Touch
        1. An introduction to Sencha Touch
        2. The installation of Sencha Touch
          1. The installation of the Sencha Touch SDK
          2. The installation of Sencha Cmd
        3. Sencha Cmd features
        4. Generating the application
        5. Understanding the basic application structure
          1. Getting familiar with the Sencha Touch view
          2. Creating the Sencha Touch controller
          3. Using store
          4. The Sencha Touch model
            1. The Sencha Touch store
            2. The Sencha Touch proxy
          5. Environment detection
          6. Creating device profiles
          7. Following the launch process
          8. The UI and theming
        6. Summary
      10. 3. Easy Work with Device – Your First PhoneGap Application "Travelly"
        1. Installing and using GapDebug
          1. iOS debugging setup
            1. Computer configuration
            2. iOS device configuration
          2. Android debugging setup
            1. Computer configuration
            2. Android device configuration
          3. The Genymotion Android emulator for faster debugging
        2. The initial application's MVC structure
          2. Adding Pictos icons to the application
          3. Controllers
          4. Model and store
        3. Using the Cordova StatusBar plugin to fix overlap
        4. Using a camera to capture pictures
          1. Camera plugin installation
          2. Camera plugin usage
          3. Creating a new picture popup
        5. Filesystem plugin installation and usage
          1. Using a persistent file location
        6. Detecting the current geolocation
        7. Saving data in local storage
        8. Displaying data with Google Maps
          1. Displaying picture details in a popup
        9. Summary
      11. 4. Integrating the Travelly Application with Custom Service
        1. Discovering the REST API
        2. Exploring technologies to build a REST API
          1. Understanding Node.js
          2. Introducing MongoDB
          3. Installing MongoDB with Homebrew
        3. Developing a REST API
          1. Using Express
          2. Generating an Express application
          3. Exploring the basic Express application
          4. Handling URLs with routes
          5. Returning a response
          6. Connecting Express and MongoDB
          7. Creating a picture model
          8. Creating a new picture record
          9. Editing a picture record
          10. Deleting a record
          11. Implementing service authentication
            1. Implementing a login form
            2. Handling the authentication endpoint request
            3. Verifying authentication
        4. Implementing authentication on the application side
        5. Implementing file upload on the service side
        6. Implementing file upload on the application side
        7. Summary
      12. 5. Crazy Bubbles - Your First HTML5 Mobile Game
        1. What game framework to choose
        2. What is HTML5 Canvas?
        3. An introduction to Phaser
        4. Planning the game
        5. Generate a Cordova application
        6. Getting started with Phaser
          1. Download Phaser
          2. Get tools
          3. Use a web server
        7. Prepare and create the game
        8. Preloading sprite
        9. Displaying sprite
        10. Handling pointer events with Phaser
        11. Handling the pointer move event
          1. Detect the bubble position under the pointer
          2. Check whether a selected bubble can be moved to a new position
          3. Swap bubbles
        12. Releasing a bubble
          1. Check for matches
          2. Remove matched bubbles
          3. Drop down bubbles above the removed bubbles
          4. Refill the board
        13. Calculate score
        14. Running the application on the mobile
        15. Summary
      13. 6. Share Your Crazy Bubbles Game Result on Social Networks
        1. Implementing the game over screen
          1. The vertical scenario
          2. The horizontal scenario
          3. Coding the logic
        2. Implementing game restart
        3. Sharing on Twitter, Facebook, and other social media
        4. Sharing on Instagram
        5. Summary
      14. 7. Building a Real-time Communication Application – Pumpidu
        1. WebRTC fundamentals
          1. WebRTC audio and video engines
          2. The WebRTC protocol stack
          3. The RTCPeerConnection API
          4. The WebRTC browser support scorecard
        2. What is Crosswalk and why we need it?
          1. Adding Crosswalk support to the Cordova application
        3. Building our first real-time communication application
          1. Server side
          2. Client side
          3. Cordova application tweaks
          4. Running the application
        4. Building a real-time communication application with PeerJS
          1. Server side
          2. Client side
          3. Running the application
        5. Exploring other tools to build WebRTC mobile applications
          1. OpenTok
          2. PhoneRTC
        6. Summary
      15. 8. Building "Imaginary" – An Application with Instagram-like Image Filters
        1. An overview of the Pixastic library
        2. Bootstrapping the Sencha Touch application
        3. Capturing photos
        4. Rendering an effects list
          1. Including Pixastic
          2. showPhotoPopup
          3. Defining the effects model and store
          4. Applying effects to thumbnails
        5. Applying effects to the photo
        6. Saving the dressed photo into the application's folder
          1. Defining the picture model and store
          2. Saving the picture to the filesystem
        7. Building a custom plugin to save the picture in the iOS library
          1. The plugin setup
          2. The JavaScript interface
          3. Native iOS code
          4. Publishing and using the plugin
        8. Displaying the list of photos
        9. Summary
      16. 9. Testing the PhoneGap Application
        1. Running with PhoneGap
          1. PhoneGap Developer App setup
          2. Handling code changes on the fly
          3. Including core plugins
        2. Why we need tests
        3. Testing theory
          1. Test-driven development
          2. Behavior-driven development
          3. Tests classification
            1. Unit testing
            2. Integration testing
            3. Functional testing
            4. System testing
            5. Performance or stress testing
        4. Unit testing frameworks and test runners
        5. Testing with Jasmine and headless browser PhantomJS
          1. Introduction to the Jasmine
            1. Writing unit tests with Jasmine
            2. Writing an integration test with Jasmine
          2. Writing Jasmine tests for Sencha Touch's Imaginary application
            1. Writing Jasmine tests for a controller
            2. Writing Jasmine tests for a model
          3. Running tests with the headless browser PhantomJS
        6. Testing with DalekJS in a real browser
        7. Performance testing with Appium and browser-perf
        8. Other testing tools
          1. Telerik Test Studio
          2. Sauce Labs
        9. Summary
      17. 10. Releasing and Maintaining the Application
        1. Versioning of the application
        2. Using PhoneGap Build
          1. PhoneGap config.xml
          2. PhoneGap plugins
          3. Initial upload and build
        3. Beta release of the iOS application
          1. Generate a distribution provisioning profile
          2. Upload to iTunes Connect with Xcode
          3. Upload to iTunes Connect with Application Loader
          4. Invite internal and external testers
        4. Release to the App Store
        5. Release to Google Play
          1. Create a keystore file
          2. Build and sign an application in the release mode
          3. Upload the application to the Google Play market
        6. Using Fabric and Crashlytics
        7. Summary
        8. References
      18. Index