PhoneGap 2.x Mobile Application Development Hotshot


PhoneGap 2.x Mobile Application Development Hotshot
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • 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 : English
Paperback : 388 pages [ 235mm x 191mm ]
Release Date : February 2013
ISBN : 1849519404
ISBN 13 : 9781849519403
Author(s) : Kerri Shotts
Topics and Technologies : All Books, Mobile Application Development, Mobile, Open Source

Table of Contents

Preface
Project 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

                        Kerri Shotts has worked with computers for nearly 24 years. Her love for technology and programming started when she was introduced to her first computer: a Commodore 64. She obtained a degree in Computer Science and went on to become a soft ware test engineer. After that, she was an Oracle database administrator for several years. Now, she works as a Technology Consultant creating, implementing, and maintaining custom applications (both desktop and mobile), websites, graphics and logos, and much more for her clients. You can find her blog posts at her website (www.photokandy.com), and she is active on the Google Group for PhoneGap. When she isn't working, she enjoys photography, music, and fish keeping. She is the author of two other books, Instant PhoneGap Social App Development and PhoneGap 2.x Mobile Applicati on Development Hotshot, both published by Packt Publishing.

                        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 2013

                        Erata 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

                        PhoneGap 2.x Mobile Application Development Hotshot +    iAd Production Beginner’s Guide =
                        50% Off
                        the second eBook
                        Price for both: $37.50

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • 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

                        In Detail

                        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

                        Approach

                        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.

                        Who this book is for

                        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.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Resources
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software