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
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
chevron up
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

Applying effects to the photo

Now, we can implement logic to apply an effect for the big picture we have already displayed. Applying the effect to such a big picture takes some time, so I would like to implement a pre-loader to display it while it is processing. Here is the code I added in the app/LoadMask.js file:

Ext.define('Imaginary.LoadMask', {
    extend: 'Ext.LoadMask',
    xtype: 'loadmask',

    config: {
        message: '',
      html: '<div class="loader">
      <div class="item-1"><span></span></div>
      <div class="item-2"><span></span></div>
      <div class="item-3"><span></span></div>
      <div class="item-4"><span></span></div>
      <div class="item-5"><span></span></div>
      <div class="item-6"><span></span></div>
      </div>',
     zIndex: 3000
    }
});

Here, I left a message blank and added some HTML content...

End of Section 5
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