PhoneGap 2.x Mobile Application Development Hotshot
eBook:
$26.99
Formats:
Formats:
$22.94
save 15%!
save 15%!
Print + free eBook + free PacktLib access to the book:
$71.98
Print cover: $44.99
$44.99
save 37%!
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
| Also available on: |
|
- Ten apps included to help you get started on your very own exciting mobile app
- These apps include working with localization, social networks, geolocation, as well as the camera, audio, video, plugins, and more
- Apps cover the spectrum from productivity apps, educational apps, all the way to entertainment and games
- Explore design patterns common in apps designed for mobile devices
- Many exciting and engaging suggestions that you can use to improve your apps
- A practical guide for those with some HTML, JavaScript, and CSS experience who want to take their ideas to the next frontier: mobile apps
Book Details
Language : EnglishPaperback : 388 pages [ 235mm x 191mm ]
Release Date : February 2013
ISBN : 1849519404
ISBN 13 : 9781849519403
Author(s) : Kerri Shotts
Topics and Technologies : All Books, Mobile, Open Source
Table of Contents
PrefaceProject 1: Let's Get Local!
Project 2: Let's Get Social!
Project 3: Being Productive
Project 4: Let's Take a Trip
Project 5: Talking to Your App
Project 6: Say Cheese!
Project 7: Let's Go to the Movies!
Project 8: Playing Around
Project 9: Blending In
Project 10: Scaling Up
Appendix A: Quick Design Pattern Reference
Appendix B: Installing ShareKit 2.0
Index
- Project 1: Let's Get Local!
- What do we build?
- Designing the app – UI/interactions
- Designing the data model
- Implementing the data model
- Implementing the start view
- Implementing our game view
- Implementing the end view
- Putting it all together
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 2: Let's Get Social!
- What do we build?
- Designing the app – UI/interaction design
- Designing the app – the data model
- Implementing the data model
- Configuring the plugins
- Implementing the social view
- Implementing the tweet view
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 3: Being Productive
- What do we build?
- Designing the user interface
- Designing the data model
- Implementing the data models
- Implementing documents view
- Implementing the file view
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 4: Let's Take a Trip
- What do we build?
- Designing our UI and the look and feel
- Designing our data model
- Implementing our data model
- Changing our document manager
- Implementing our map view
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 5: Talking to Your App
- What do we build?
- Designing the user interface and the look and feel
- Designing the data model
- Implementing the data model
- Implementing gesture support
- Implementing the main view
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 6: Say Cheese!
- What do we build?
- Designing the user interface and the look and feel
- Designing the data model
- Implementing the document view
- Implementing the image view
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 7: Let's Go to the Movies!
- What do we build?
- Preparing for the video thumbnail plugin
- Implementing the video thumbnail plugin for iOS
- Implementing the video thumbnail plugin for Android
- Integrating with the video thumbnail plugin
- Implementing recording and importing of video
- Implementing video playback
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 8: Playing Around
- What do we build?
- Designing the game
- Implementing the options view
- Generating levels
- Drawing to the canvas
- Keeping up
- Performing updates
- Handling touch-based input
- Handling the accelerometer
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 9: Blending In
- What do we build?
- Installing the plugins
- Adding the navigation bar
- Adding the tab bar
- Adding the ActionSheet
- Adding the message box
- Adding the picker
- Adding the e-mail composer
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Project 10: Scaling Up
- What do we build?
- Designing the scaled-up UI
- Implementing the scaled-up UI
- Designing the split-view UI
- Implementing the split-view UI
- Game Over..... Wrapping it up
- Can you take the HEAT? The Hotshot Challenge
- Appendix A: Quick Design Pattern Reference
- The navigation list
- The grid
- Carousel 1
- Carousel 2
- The login screen
- The sign-up form
- The table
- The list of choices
- Doing things in bulk
- Searching
- Some things to keep in mind
- Summary
Kerri Shotts
Code Downloads
Download the code and support files for this book.
Submit Errata
Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.
Errata
- 8 submitted: last submission 17 May 2013Erata Type: Code | page no: 138
The code in the book is:
fileView.loadDocument = function ()
{
fileView.viewTitle = $ge("fileView_title");
fileView.viewTitle.innerHTML =
fileView.theFileEntry.name.substr(0,
fileView.theFileEntry.name.length-4);
fileView.theTextElement = $ge("fileView_text");
fileView.theTextElement.value = "";
fileView.theFilerDocument = new DOC.Filer (
fileView.theFileEntry,
function ()
{
fileView.viewTitle.innerHTML =
fileView.theFilerDocument.getTitle();
fileView.theTextElement.value =
fileView.theFilerDocument.getText();
fileView.theSaveTimer =
setInterval (
fileView.saveDocument, 5000 );
},
function (e)
{
PKUI.CORE.popView();
var anAlert = new PKUI.MESSAGE.Alert
(__T("Oops!"),
__T("Couldn't open the file.") );
anAlert.show();
}
);
}
It should be replaced by:
fileView.theFilerDocument = new DOC.Filer (
fileView.theFileEntry,
function ()
{
PKUTIL.delay(100, function()
{
fileView.viewTitle.innerHTML = fileView.theFilerDocument.getTitle();
fileView.theTextElement.value = fileView.theFilerDocument.getText();
fileView.theSaveTimer = setInterval ( fileView.saveDocument, 5000 );
});
},
function (e)
{
PKUI.CORE.popView();
var anAlert = new PKUI.MESSAGE.Alert (__T("Oops!"),
__T("Couldn't open the file.") );
anAlert.show();
}
);
}
(The file operations may fail on the iOS Simulator. The file operations work on the real device, but because the iOS Simulator has a space in the path, the file operations thus fails here.)
Errata Type: Code | Page no: 165-166
The code in the book is :
document.addEventListener("backbutton",
mapView.backButtonPressed, false );
mapView.actionButton.innerHTML = __T("RECORD");
mapView.trackButton.innerHTML = __T("CENTER");
}
mapView.viewDidAppear = function ()
{
if (mapView.theFirstTime)
{
mapView.map = new google.maps.Map (
$ge("mapView_mapCanvas"),
{ disableDefaultUI: true,
center: new google.maps.LatLng(40,-90),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
google.maps.event.addListener ( mapView.map,
'dragstart', function () {
mapView.keepMapCentered = false; } );
mapView.currentPositionMarker = new
google.maps.Marker(
{
map:mapView.map,
title: "Current Position"
}
);
}
mapView.watchID = navigator.geolocation.watchPosition (
mapView.geolocationUpdate, mapView.geolocationError,
{
enableHighAccuracy: true
}
);
mapView.loadDocument();
}
This should be replaced by:
mapView.loadDocument = function ()
{
mapView.viewTitle = $ge("mapView_title");
mapView.viewTitle.innerHTML = mapView.theFileEntry.name.substr(0,
mapView.theFileEntry.name.length-4);
mapView.thePathDocument = new DOC.PathRecDocument (
mapView.theFileEntry,
function ()
{
PKUTIL.delay(100, function()
{
mapView.viewTitle.innerHTML = mapView.thePathDocument.getTitle();
mapView.theSaveTimer = setInterval ( mapView.saveDocument, 5000 );
for (var i=0; i<mapView.thePathDocument.getNodeCount(); i++)
{
var theNode = mapView.thePathDocument.getNodeAtIndex ( i );
mapView.polyline.getPath().push ( new google.maps.LatLng ( theNode.latitude, theNode.longitude ) );
}
});
},
function (e)
{
PKUI.CORE.popView();
var anAlert = new PKUI.MESSAGE.Alert (__T("Oops!"),
__T("Couldn't open the file.") );
anAlert.show();
}
);
mapView.polyline = new google.maps.Polyline ( { strokeColor: '#80A0C0', strokeOpacity:0.85, strokeWeight:5 } );
mapView.polyline.setMap ( mapView.map );
}
(The file operations may fail on the iOS Simulator. The file operations work on the real device, but because the iOS Simulator has a space in the path, the file operations thus fails here.)
Errata type: Code | Page no: 179
The code in the book is:
if (self.media == null)
{
if (PKDEVICE.platform()=="android")
{
self.fileName = self.fileName.replace ("file://","");
}
It should be replaced by:
if (self.media == null)
{
if (PKDEVICE.platform()=="android")
{
self.fileName = self.fileName.replace ("file://","");
self.fileName = PKUTIL.FILE.getFilePart(self.fileName);
}
Errata Type: Code | Page no: 203
fileType = ".3gr"; should be fileType = ".3gp";
We also need to have the line in app.js below the translation matrix:
APP.globalFileExtension = ".wav|.mp3|.3gp";
Errata Type : Code | Page No: 248
The code in the book is:
Bitmap thumbnail = ThumbnailUtils.createVideoThumbnail ( sourceVideo,MediaStore.Images.Thumbnails.MINI_KIND);
This should be replaced by:
Bitmap thumbnail = ThumbnailUtils.createVideoThumbnail ( sourceVideo.substring(7), MediaStore.Images.Thumbnails.MINI_KIND);
Errata Type: Code | Page no: 276
For calculating the canvas height:
var cWidth=screen.width;
var cHeight=screen.height;
var cMiddle=screen.width/2;
if (device.platform=="Android")
{
// the window.devicePixelRatio screws us over; handle it.
cWidth = cWidth / window.devicePixelRatio;
cHeight = cHeight / window.devicePixelRatio;
cMiddle = cMiddle / window.devicePixelRatio;
}
Then the calculating portion should be:
var c = $ge("gameView_canvas");
var ctx = c.getContext("2d");
c.setAttribute ("width", cWidth * window.devicePixelRatio);
c.setAttribute ("height",cHeight * window.devicePixelRatio);
c.style.width = ""+cWidth+"px";
c.style.height = ""+cHeight+"px";
A few notes:
Project 8: Known issue: on Android the canvas doesn't always clear between games.
Project 9: The project needs to have the MessageUI framework added. We can add it to the step when adding the Email Composer on page 295 to add the MessageUI Framework.
Project 10, Project 2: Known issue: Sometimes the sidebar doesn't display the newly created file (it's a timing condition). Create a new file, and the new file that was missed will appear.
A quick update. Link to the github repo for the files is incorrect. Instead of https://github.com/photokandyStudios/phonegap-hotshot it should be https://github.com/photokandyStudios/PhoneGap-HotShot-Book-Code-Bundle.
Sample chapters
You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.
Frequently bought together
+
=
50% Off
the eBooks
the eBooks
Buy both these recommended eBooks together and get 50% off the total price
- Explore localization and globalization tools
- Interact with various social networks
- Create, save, and retrieve user-created data
- Learn about maps and geolocation
- Interact with the camera and the photographs it creates
- Work with playing and recording both audio and video
- Create a fun, high-performance game
- Integrate with custom plugins to extend the functionality of PhoneGap, including how to use native UI controls
- Explore mobile app design patterns
- Discover how to migrate a phone app to a tablet app
Do you want to create mobile apps that run on multiple mobile platforms? With PhoneGap (Apache Cordova), you can put your existing development skills and HTML, CSS, and JavaScript knowledge to great use by creating mobile apps for cross-platform devices.
"PhoneGap 2.x Mobile Application Development Hotshot" covers the concepts necessary to let you create great apps for mobile devices. The book includes ten apps varying in difficulty that cover the gamut – productivity apps, games, and more - that are designed to help you learn how to use PhoneGap to create a great experience.
"PhoneGap 2.x Mobile Application Development Hotshot" covers the creation of ten apps, from their design to their completion, using the PhoneGap APIs. The book begins with the importance of localization and how HTML, CSS, and JavaScript interact to create the mobile app experience. The book then proceeds through mobile apps of various genres, including productivity apps, entertainment apps, and games. Each app covers specific items provided by PhoneGap that help make the mobile app experience better. This book covers the camera, geolocation, audio and video, and much more in order to help you create feature-rich mobile apps
This book is a step-by-step guide to creating a mobile app. Each chapter begins with the design of the user interface using wireframes, as well as the data models using various diagrams. After the design, the chapter moves on to the implementation of the app, describing each block of code, including how it works and why it is needed in the context of the project. At the end of each project, various suggestions are proposed to help extend or enhance the project in order to stimulate your creativity and programming skills.
If you are a developer looking to create a mobile app using HTML, CSS, and JavaScript, then this book is for you. While this book should be approachable for anyone looking to create mobile apps using PhoneGap, you should have some degree of experience using HTML, CSS, and JavaScript. You should also be able to create the basic PhoneGap project in the IDE of your choice (XCode, Eclipse, or Visual Studio). Understanding Java, C#, or Objective C is not required.
