PhoneGap 3 Beginner's Guide

Book Image

PhoneGap 3 Beginner's Guide

By : Giorgio Natili

Book Image

PhoneGap 3 Beginner's Guide

By: Giorgio Natili

Overview of this book

<p>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.</p> <p>"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.</p> <p>Dive deep into PhoneGap and refine your skills by learning how to build the main features of a real world app.</p> <p>"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.</p>

PhoneGap 3 Beginner's Guide

PhoneGap 3 Beginner's Guide

Credits

Foreword

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Getting Started with PhoneGap

Getting Started with PhoneGap

PhoneGap and Apache Cordova

The evolution of PhoneGap from 1.4 to 3.x

A note about operating systems

A note about the command-line tool

Installing PhoneGap

Installing dependencies

Setting up your development environment

Time for action – setting up Android using PhoneGap 2.x

Time for action – setting up iOS using PhoneGap 2.x

Time for action – setting up Windows Phone using PhoneGap 2.x

Getting Started with Android and Eclipse

Time for action - installing ADT into Eclipse

Getting started with iOS and Xcode

Getting started with Windows Phone and Visual Studio

Creating a common code base for multiplatform apps

Building and Debugging on Multiple Platforms

Building and Debugging on Multiple Platforms

Development tools

Time for action – configuring the cloud service in Bracket

Native, web, and hybrid apps

Working with desktop browsers

Mobile debugging workflow

Remote debugging

Time for action – configuring iWebInspector for iOS debugging

Time for action – configuring Node.js and weinre

Time for action – integrating Edge Inspect and weinre

Mimicking mobile counterparts

Getting Started with Mobile Applications

Getting Started with Mobile Applications

Mobile-centric HTML/CSS/JavaScript

Performance best-practices

Understanding screen size and pixel density

Time for action – scaling UI images according to pixel density

Writing effective JavaScript

Choosing web app templates

Setting up your project using cordova-cli

Time for action – installing cordova-cli using npm

Your first application – "Hello World"

Time for action – creating your first cross-platform app

Time for action – programmatically opening a modal window using Bootstrap

Achieving a native look and feel on iOS

Time for action – setting up a native-like CSS for your app

Architecting Your Mobile App

Architecting Your Mobile App

Fine-tuning your development environment

Time for action – customizing the shell

Time for action – enabling Live Reload

Reviewing the JavaScript guidelines

Exploring the sample app

Building the app's core

Time for action – Require.js Bootstrap

Time for action – creating a Mustache template

Time for action – loading and parsing a template

The splash screen

Time for action – adding a splash screen to your app

Improving the User Interface and Device Interaction

Improving the User Interface and Device Interaction

Exploring JavaScript compression

Time for action – compressing files using the Closure Compiler

Time for action – using UglifyJS with the Closure Compiler

Time for action – optimizing JavaScript with Require.js

Comparing compression tools

Using template engine compression

Time for action – compiling a template using pistachio

Handling a retina display user interface

Time for action – user interface elements and retina display

Creating fluid, multiple app views

Time for action – accessing the device API

Time for action – creating the templates

Using hardware-accelerated transitions

Getting started with the PhoneGap APIs

Exploring the Connection API

Using Device Storage and the Contacts API

Using Device Storage and the Contacts API

Application data storage

Time for action – reading and writing data on the LocalStorage

Time for action – populating a local database

Database limitations

The Contacts API

Time for action – filtering device contacts

Accessing Device Sensors

Accessing Device Sensors

What are device sensors?

Time for action – detecting shakes in your app

Time for action – handling device orientation with JavaScript

Time for action – using the Compass API

Using Location Data with PhoneGap

Using Location Data with PhoneGap

An introduction to Geolocation

The PhoneGap Geolocation API

Time for action – showing device position with Google Maps

Time for action – discovering places with Google Places

Manipulating Files

Manipulating Files

Understanding the Files API

Time for Action – listing folders and files recursively

Time for Action – reading and rendering an Image

Time for Action – downloading and saving a file

Capturing and Manipulating Device Media

Capturing and Manipulating Device Media

Camera API or Capture API?

Accessing the camera using the Camera API

Time for action – accessing the device camera

Time for action – controlling the position of the camera roll

The Capture API

Time for action – manipulating images with a canvas

Working with PhoneGap Plugins

Working with PhoneGap Plugins

Introduction to plugins

Working with plugins

Time for action – using push notifications on Android

Localizing Your App

Localizing Your App

Time for action – rendering localized messages

Publishing Your App

Publishing Your App

Publishing on Google Play

Publishing on the Blackberry World

Publishing on the Apple App Store

Publishing on the Windows Phone Store

Pop Quiz Answers

Pop Quiz Answers

Chapter 2, Building and Debugging on Multiple Platforms

Chapter 3, Getting Started with Mobile Applications

Chapter 4, Architecting Your Mobile App

Chapter 5, Improving the User Interface and Device Interaction

Chapter 6, Using Device Storage and the Contacts API

Chapter 7, Accessing Device Sensors

Chapter 8, Using Location Data with PhoneGap

Chapter 9, Manipulating Files

Chapter 10, Capturing and Manipulating Device Media

Chapter 11, Working with PhoneGap Plugins

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Time for action – user interface elements and retina display

Here's how to prepare the app user interface elements to correctly render on a retina display device:

Open the Adobe Illustrator file you find in the assets folder on GitHub at https://github.com/GiorgioNatili/PhoneGapGettingStarted and create two different PNG files (the first one using the real size of the buttons and the second one doubling the size of the buttons) containing the buttons available in the first screen of the app.
Save the images using a name that clearly identifies which is the one to use with retina displays (i.e., sprite.png and [email protected]).

Open the index.css CSS file and update the selectors previously created to define the buttons background in order to use a single sprite image.

.sectionNav #createBtn a{
    background:url(../img/sprite.png) no-repeat 0 0;
}

.sectionNav #openBtn a{
    background:url(../img/sprite.png) no-repeat -100px 0;
    margin-left: 10px;
}

.sectionNav #shareBtn a{
    background...