PhoneGap By Example电子书

PhoneGap By Example

Table of Contents

PhoneGap By Example

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Installing and Configuring PhoneGap

Downloading and installing

Installing Node.js on Mac

Installing Node.js from the official website

Installing Node.js with Homebrew

Installing Node.js on Windows

Installing Node.js on Linux

Installing PhoneGap with NPM

Understanding PhoneGap

Basic components

Development methods

Cordova installation

Creating an application

The config.xml structure

The iOS setup

Running the application in the iOS emulator

Running the application on an iOS device

Generating the iOS developer certificate

Adding the application identifier

Registering the device

Generating a provisioning profile

The Android setup

JDK Installation

Android SDK installation

Android Studio installation

Opening the project in Android Studio

Adding an Android emulator

PhoneGap development highlights

Use a single-page application approach

Don't generate the UI on the server

Limit network access

Increase perceived speed

Use hardware acceleration

Optimize images

Optimize payload

Minimize browser reflows

Test

Selecting a UI framework

Sencha Touch

jQuery Mobile

Ionic

Ratchet

The Kendo UI

Topcoat

React

Framework7

Famo.us

The Onsen UI

Summary

2. Setting Up a Project Structure with Sencha Touch

An introduction to Sencha Touch

The installation of Sencha Touch

The installation of the Sencha Touch SDK

The installation of Sencha Cmd

Sencha Cmd features

Generating the application

Understanding the basic application structure

Getting familiar with the Sencha Touch view

Creating the Sencha Touch controller

Using store

The Sencha Touch model

The Sencha Touch store

The Sencha Touch proxy

Environment detection

Creating device profiles

Following the launch process

The UI and theming

Summary

3. Easy Work with Device – Your First PhoneGap Application "Travelly"

Installing and using GapDebug

iOS debugging setup

Computer configuration

iOS device configuration

Android debugging setup

Computer configuration

Android device configuration

The Genymotion Android emulator for faster debugging

The initial application's MVC structure

Views

Adding Pictos icons to the application

Controllers

Model and store

Using the Cordova StatusBar plugin to fix overlap

Using a camera to capture pictures

Camera plugin installation

Camera plugin usage

Creating a new picture popup

Filesystem plugin installation and usage

Using a persistent file location

Detecting the current geolocation

Saving data in local storage

Displaying data with Google Maps

Displaying picture details in a popup

Summary

4. Integrating the Travelly Application with Custom Service

Discovering the REST API

Exploring technologies to build a REST API

Understanding Node.js

Introducing MongoDB

Installing MongoDB with Homebrew

Developing a REST API

Using Express

Generating an Express application

Exploring the basic Express application

Handling URLs with routes

Returning a response

Connecting Express and MongoDB

Creating a picture model

Creating a new picture record

Editing a picture record

Deleting a record

Implementing service authentication

Implementing a login form

Handling the authentication endpoint request

Verifying authentication

Implementing authentication on the application side

Implementing file upload on the service side

Implementing file upload on the application side

Summary

5. Crazy Bubbles - Your First HTML5 Mobile Game

What game framework to choose

What is HTML5 Canvas?

An introduction to Phaser

Planning the game

Generate a Cordova application

Getting started with Phaser

Download Phaser

Get tools

Use a web server

Prepare and create the game

Preloading sprite

Displaying sprite

Handling pointer events with Phaser

Handling the pointer move event

Detect the bubble position under the pointer

Check whether a selected bubble can be moved to a new position

Swap bubbles

Releasing a bubble

Check for matches

Remove matched bubbles

Drop down bubbles above the removed bubbles

Refill the board

Calculate score

Running the application on the mobile

Summary

6. Share Your Crazy Bubbles Game Result on Social Networks

Implementing the game over screen

The vertical scenario

The horizontal scenario

Coding the logic

Implementing game restart

Sharing on Twitter, Facebook, and other social media

Sharing on Instagram

Summary

7. Building a Real-time Communication Application – Pumpidu

WebRTC fundamentals

WebRTC audio and video engines

The WebRTC protocol stack

The RTCPeerConnection API

The WebRTC browser support scorecard

What is Crosswalk and why we need it?

Adding Crosswalk support to the Cordova application

Building our first real-time communication application

Server side

Client side

Cordova application tweaks

Running the application

Building a real-time communication application with PeerJS

Server side

Client side

Running the application

Exploring other tools to build WebRTC mobile applications

OpenTok

PhoneRTC

Summary

8. Building "Imaginary" – An Application with Instagram-like Image Filters

An overview of the Pixastic library

Bootstrapping the Sencha Touch application

Capturing photos

Rendering an effects list

Including Pixastic

showPhotoPopup

Defining the effects model and store

Applying effects to thumbnails

Applying effects to the photo

Saving the dressed photo into the application's folder

Defining the picture model and store

Saving the picture to the filesystem

Building a custom plugin to save the picture in the iOS library

The plugin setup

The JavaScript interface

Native iOS code

Publishing and using the plugin

Displaying the list of photos

Summary

9. Testing the PhoneGap Application

Running with PhoneGap

PhoneGap Developer App setup

Handling code changes on the fly

Including core plugins

Why we need tests

Testing theory

Test-driven development

Behavior-driven development

Tests classification

Unit testing

Integration testing

Functional testing

System testing

Performance or stress testing

Unit testing frameworks and test runners

Testing with Jasmine and headless browser PhantomJS

Introduction to the Jasmine

Writing unit tests with Jasmine

Writing an integration test with Jasmine

Writing Jasmine tests for Sencha Touch's Imaginary application

Writing Jasmine tests for a controller

Writing Jasmine tests for a model

Running tests with the headless browser PhantomJS

Testing with DalekJS in a real browser

Performance testing with Appium and browser-perf

Other testing tools

Telerik Test Studio

Sauce Labs

Summary

10. Releasing and Maintaining the Application

Versioning of the application

Using PhoneGap Build

PhoneGap config.xml

PhoneGap plugins

Initial upload and build

Beta release of the iOS application

Generate a distribution provisioning profile

Upload to iTunes Connect with Xcode

Upload to iTunes Connect with Application Loader

Invite internal and external testers

Release to the App Store

Release to Google Play

Create a keystore file

Build and sign an application in the release mode

Upload the application to the Google Play market

Using Fabric and Crashlytics

Summary

References

Index