Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • PhoneGap By Example
  • Toc
  • feedback
PhoneGap By Example

PhoneGap By Example

By : Andrew Kovalenko
close
PhoneGap By Example

PhoneGap By Example

By: Andrew Kovalenko

Overview of this book

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.
Table of Contents (12 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Installing and Configuring PhoneGap
1. Installing and Configuring PhoneGap
Downloading and installing
Installing PhoneGap with NPM
Understanding PhoneGap
Creating an application
The config.xml structure
The iOS setup
Running the application on an iOS device
The Android setup
PhoneGap development highlights
Selecting a UI framework
Summary
2
2. Setting Up a Project Structure with Sencha Touch
2. Setting Up a Project Structure with Sencha Touch
An introduction to Sencha Touch
The installation of Sencha Touch
Sencha Cmd features
Generating the application
Understanding the basic application structure
Summary
3
3. Easy Work with Device – Your First PhoneGap Application "Travelly"
3. Easy Work with Device – Your First PhoneGap Application "Travelly"
Installing and using GapDebug
The initial application's MVC structure
Using the Cordova StatusBar plugin to fix overlap
Using a camera to capture pictures
Filesystem plugin installation and usage
Detecting the current geolocation
Saving data in local storage
Displaying data with Google Maps
Summary
4
4. Integrating the Travelly Application with Custom Service
4. Integrating the Travelly Application with Custom Service
Discovering the REST API
Exploring technologies to build a REST API
Developing a REST API
Implementing authentication on the application side
Implementing file upload on the service side
Implementing file upload on the application side
Summary
5
5. Crazy Bubbles - Your First HTML5 Mobile Game
chevron up
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
Prepare and create the game
Preloading sprite
Displaying sprite
Handling pointer events with Phaser
Handling the pointer move event
Releasing a bubble
Calculate score
Running the application on the mobile
Summary
6
6. Share Your Crazy Bubbles Game Result on Social Networks
6. Share Your Crazy Bubbles Game Result on Social Networks
Implementing the game over screen
Implementing game restart
Sharing on Twitter, Facebook, and other social media
Sharing on Instagram
Summary
7
7. Building a Real-time Communication Application – Pumpidu
7. Building a Real-time Communication Application – Pumpidu
WebRTC fundamentals
What is Crosswalk and why we need it?
Building our first real-time communication application
Building a real-time communication application with PeerJS
Exploring other tools to build WebRTC mobile applications
Summary
8
8. Building "Imaginary" – An Application with Instagram-like Image Filters
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
Applying effects to the photo
Saving the dressed photo into the application's folder
Building a custom plugin to save the picture in the iOS library
Displaying the list of photos
Summary
9
9. Testing the PhoneGap Application
9. Testing the PhoneGap Application
Running with PhoneGap
Why we need tests
Testing theory
Unit testing frameworks and test runners
Testing with Jasmine and headless browser PhantomJS
Testing with DalekJS in a real browser
Performance testing with Appium and browser-perf
Other testing tools
Summary
10
10. Releasing and Maintaining the Application
10. Releasing and Maintaining the Application
Versioning of the application
Using PhoneGap Build
Beta release of the iOS application
Release to the App Store
Release to Google Play
Using Fabric and Crashlytics
Summary
References
11
Index
Index

Handling pointer events with Phaser

After we filled the board with bubbles, we need to define user event handlers. We should detect when the user touches the bubble, moves it, and releases it. We should handle both types of events: generated by mouse and by fingers. We have to handle three different events. Let's define three different functions to handle these events:

  • selectBubble

  • slideBubble

  • releaseBubble

First, let's look at the select and release event handlers. We should attach them to each bubble we have on the stage. We can do this when we spawn the board. Let's add the following lines of code to the spawning loop in the spawnBoard() function:

bubble.inputEnabled = true;
bubble.events.onInputDown.add(selectBubble, this);
bubble.events.onInputUp.add(releaseBubble, this);

We enabled bubble for input and attached our event handlers to the onInputDown and onInputUp events, which are explained here:

  • onInputDown – This is dispatched when the down event from a pointer is received. The sprite...

End of Section 13
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete