Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript

Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript

by
Released January 2011
Publisher(s): Apress
ISBN: 9781430232766

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Developing applications for Android and other mobile devices using web technologies is now well within reach. When the capabilities of HTML5 are combined with CSS3 and Javascript, web application developers have an opportunity to develop compelling mobile applications using familiar tools. Not only is it possible to build mobile web apps that feel as good as native apps, but to also write an application once and have it run a variety of different devices.

While the HTML5 specification is still evolving, there is a lot that can be used right now to build mobile web apps. Mobile web apps are now starting to provide many of the features that were once only available to native-language-based Apps in Java, Objective-C, etc. Pro Android Web Apps teaches developers already familiar with web application development, how to code and structure a web app for use on the Android mobile platform.

  • Understand both the why and how of mobile web app development, focusing on the Android platform.

  • Learn how to structure mobile web apps through a number of practical, real-world application examples.

  • Discover what cloud platforms such as Google AppEngine have to offer Android web apps, for both hosting web apps and providing device to cloud data synchronization solutions.

  • Get a real picture of the status of HTML5 on Android and other mobile devices, including some things to watch out for when building your own applications.

  • Understand the capabilities of the web application stack, and how to complement those with native bridging frameworks such as PhoneGap to access native features of the device.

  • Gain an understanding of the different UI frameworks that are available for building mobile web apps.

  • Learn how to include mapping and leverage Location Based Services in mobile web apps to create engaging mobile experiences.

  • Enable social integration with your Android web app and gain access to millions of potential users.

After reading this book, you will not only have a greater understanding of the world of web apps on Android, but also how to leverage additional tools and frameworks to increase the reach of your mobile web apps. Additionally, through the practical samples in the book you will have been given solid exposure of where both the opportunities and challenges lie when building mobile apps the web way.

Table of contents

  1. Copyright
  2. About the Authors
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
    1. What's a Mobile Web App?
    2. Which Technologies Are Used in This Book?
    3. What's in This Book
  6. 1. Getting Started
    1. 1.1. Understanding Android Platform Capabilities
      1. 1.1.1. Device Connectivity
      2. 1.1.2. Touch
      3. 1.1.3. Geolocation
      4. 1.1.4. Hardware Sensors
      5. 1.1.5. Local Databases and Storage
      6. 1.1.6. Camera Support
      7. 1.1.7. Messaging and Push Notifications
      8. 1.1.8. WebKit Web Browser
      9. 1.1.9. Process Management
      10. 1.1.10. Android OS Feature Summary
    2. 1.2. Preparing the Development Environment
      1. 1.2.1. Text Editors and Working Directories
      2. 1.2.2. Web Server
        1. 1.2.2.1. Mongoose on Windows
        2. 1.2.2.2. Mongoose on Mac OS
        3. 1.2.2.3. Mongoose on Linux
        4. 1.2.2.4. Running Mongoose
        5. 1.2.2.5. Alternative Approaches
      3. 1.2.3. Emulator
        1. 1.2.3.1. Creating an Android Virtual Device
        2. 1.2.3.2. Starting the Emulator
    3. 1.3. Hello World
    4. 1.4. Summary
  7. 2. Building a Mobile HTML Entry Form
    1. 2.1. HTML for the Mobile Web
      1. 2.1.1. Mobile-Ready Web Pages
        1. 2.1.1.1. Introducing the viewport Meta Tag
        2. 2.1.1.2. Autohiding the URL Bar
      2. 2.1.2. Adding Form Elements
    2. 2.2. Adding Some Style
      1. 2.2.1. Form Styles with a Splash of CSS3
        1. 2.2.1.1. appearance (-webkit-appearance)
        2. 2.2.1.2. border-radius (-webkit-border-radius)
        3. 2.2.1.3. box-shadow (-webkit-box-shadow)
        4. 2.2.1.4. gradient fill style (-webkit-gradient)
      2. 2.2.2. Improving the Page Title Appearance
      3. 2.2.3. Coding for Different Screen Sizes
      4. 2.2.4. Handling Device Orientation Changes
    3. 2.3. Adding Form Validation
      1. 2.3.1. Providing Feedback with Limited Screen Space
    4. 2.4. Summary
  8. 3. HTML5 Storage APIs
    1. 3.1. The Web Storage API
      1. 3.1.1. Saving Objects to Web Storage Using JSON
      2. 3.1.2. Local vs. Session Storage
    2. 3.2. The Web SQL Database
      1. 3.2.1. Saving To-Do List Items with a Client-Side Database
      2. 3.2.2. Database Versioning and Upgrades
    3. 3.3. Summary
  9. 4. Constructing a Multipage App
    1. 4.1. Single HTML File, Multiple App Pages
      1. 4.1.1. Creating a View Manager
      2. 4.1.2. Implementing View Actions
    2. 4.2. Building the Application's Main Screen
      1. 4.2.1. Tweaking ViewManager Functionality
      2. 4.2.2. Home Screen Storage Requirements
      3. 4.2.3. Wiring Up the Home Screen
    3. 4.3. Building the All Tasks Screen
    4. 4.4. Implementing the View Stack
    5. 4.5. Summary
  10. 5. Synchronizing with the Cloud
    1. 5.1. Exploring Online Storage Options
      1. 5.1.1. Online Synchronization Store Requirements
      2. 5.1.2. Avoiding a Three-Tier Architecture
      3. 5.1.3. User Authentication
      4. 5.1.4. A JavaScript Synchronization Library
      5. 5.1.5. Possible Synchronization Solutions
    2. 5.2. Getting Started With Google App Engine
      1. 5.2.1. Deploying jsonengine Locally
      2. 5.2.2. Choosing a Suitable Synchronization Mode
      3. 5.2.3. Sending Your Offline Data to jsonengine
    3. 5.3. Updating the User Interface for Online Synchronization
    4. 5.4. Making a Desktop Interface
      1. 5.4.1. Querying a jsonengine Instance
      2. 5.4.2. Deploying Your Application on the Cloud
    5. 5.5. Summary
  11. 6. Competing with Native Apps
    1. 6.1. Adding Lightweight Animations and Native-Like Layouts
      1. 6.1.1. Adding a Simple Loading Spinner
      2. 6.1.2. Adding Scrollable Content
      3. 6.1.3. Sprucing Up the Action Bar
    2. 6.2. Making Your Application Location-Aware
      1. 6.2.1. The W3C Geolocation API Specification
    3. 6.3. Running Your Application Offline
      1. 6.3.1. The Offline Cache Manifest File
      2. 6.3.2. Exploring Hidden Offline-Caching Features
      3. 6.3.3. Detecting Your Connection Status
    4. 6.4. Summary
  12. 7. Exploring Interactivity
    1. 7.1. Introduction to the HTML5 Canvas
    2. 7.2. Drawing Interactively to the Canvas
      1. 7.2.1. Interactivity: The Way of the Mouse
      2. 7.2.2. Interactivity: The Way of Touch
    3. 7.3. Implementing Canvas Animation
      1. 7.3.1. Creating an Animation Loop
      2. 7.3.2. Drawing a Frame of Animation
        1. 7.3.2.1. A Working Example
        2. 7.3.2.2. A Quick Overview of Canvas Paths
      3. 7.3.3. Drawing Images: Accounting for Device DPI
        1. 7.3.3.1. A Tale of Three Androids
    4. 7.4. Advanced Animation Techniques
      1. 7.4.1. Creating Realistic Movement in Animations
      2. 7.4.2. Canvas Transformations and Animation
      3. 7.4.3. Transformations and Our Car Animation
    5. 7.5. Summary
  13. 8. Location-Based Services and Mobile Mapping
    1. 8.1. Location-Based Services
    2. 8.2. Geosocial Networking
    3. 8.3. Mobile Mapping
      1. 8.3.1. Displaying a Map with Google Maps
      2. 8.3.2. Tile5: An Alternative HTML5 Mapping API
      3. 8.3.3. Adding Markers to a Google Map
      4. 8.3.4. Showing Marker Detail
    4. 8.4. A Mobile-Optimized Mapping UI
      1. 8.4.1. A Mapping UI Mockup
      2. 8.4.2. Coding a Boilerplate Mobile Mapping UI
      3. 8.4.3. Implementing UI Navigation in the Boilerplate
      4. 8.4.4. Selecting Markers with the Navigation Bar
        1. 8.4.4.1. Setting Up the Markers and Showing Custom Icons
        2. 8.4.4.2. Implementing the Tapless Marker Selection
        3. 8.4.4.3. Applying Sorting to Ensure Intuitive Marker Navigation
    5. 8.5. Summary
  14. 9. Native Bridging with PhoneGap
    1. 9.1. Introducing Bridging Frameworks
      1. 9.1.1. When to Use PhoneGap
      2. 9.1.2. Downloading PhoneGap
    2. 9.2. A Sample PhoneGap Application
      1. 9.2.1. Building the Sample Application
      2. 9.2.2. Investigating the Sample Application
        1. 9.2.2.1. Accelerometer Data Capture
        2. 9.2.2.2. Camera and Photo Library
        3. 9.2.2.3. Notification Events
    3. 9.3. A Simple PhoneGap Mapping App
      1. 9.3.1. Tweaking the Sample PhoneGap Project
        1. 9.3.1.1. Tidying Up: Renaming Classes
      2. 9.3.2. Transferring Existing Code into a PhoneGap App
    4. 9.4. Summary
  15. 10. Integrating with Social APIs
    1. 10.1. Connecting to Web APIs
      1. 10.1.1. What Is JSONP?
      2. 10.1.2. Dealing with APIs That Lack JSONP Support
        1. 10.1.2.1. Writing a Server-Side Proxy
        2. 10.1.2.2. Yahoo Query Language
        3. 10.1.2.3. PhoneGap Native App
      3. 10.1.3. Introducing the Geominer API
    2. 10.2. Locating Resources in Moundz
      1. 10.2.1. Finding Nearby Resources with the Geominer API
      2. 10.2.2. Using Geolocation to Track Your Position
    3. 10.3. Implementing a User Login
      1. 10.3.1. Constructing the Welcome and Login Screen
      2. 10.3.2. Twitter Anywhere and the Login Process
      3. 10.3.3. Alternative Twitter Authentication via Geominer:
    4. 10.4. Summary
  16. 11. Mobile UI Frameworks Compared
    1. 11.1. Mobile UI Frameworks Overview
      1. 11.1.1. Similarities and Differences Between Frameworks
        1. 11.1.1.1. Markup-Based UI Frameworks
        2. 11.1.1.2. Declarative UI Frameworks
        3. 11.1.1.3. Finding Your Own Best Fit
      2. 11.1.2. Setting Up for the Framework Comparison
    2. 11.2. Jo
      1. 11.2.1. Getting Started with Jo
      2. 11.2.2. Moundz, Meet Jo
    3. 11.3. jQTouch
      1. 11.3.1. Getting Started with jQTouch
      2. 11.3.2. Applying SomejQTouch-Ups to Moundz
    4. 11.4. jQuery Mobile
      1. 11.4.1. Getting Started with jQuery Mobile
      2. 11.4.2. Moundz and jQuery Mobile
    5. 11.5. Sencha Touch
      1. 11.5.1. Getting Started with Sencha Touch
      2. 11.5.2. Moundz and Sencha Touch
    6. 11.6. Summary
  17. 12. Polishing and Packaging an App for Release
    1. 12.1. Continuing on with jQuery Mobile
      1. 12.1.1. Reinstating the Login Screen
      2. 12.1.2. Improving Navigation Layout
    2. 12.2. Gathering Resources
      1. 12.2.1. Building the Resource Details Screen
      2. 12.2.2. Using Geominer for Resource Tracking
    3. 12.3. Packaging Moundz As a Native Application
      1. 12.3.1. Bundling for PhoneGap
        1. 12.3.1.1. Supplying an Application Launcher Icon
      2. 12.3.2. Tweaking Application Permissions
    4. 12.4. PhoneGap, Authentication, and Intents
      1. 12.4.1. Our Previous Web Authentication Flow
      2. 12.4.2. An Overview of Android Intents
      3. 12.4.3. Using PhoneGap Plug-Ins to Handle Intents
    5. 12.5. Packaging Our Application for Release
    6. 12.6. Summary
  18. 13. The Future of Mobile Computing
    1. 13.1. The Era of Mobile Computing
      1. 13.1.1. A Worldwide Phenomenon
      2. 13.1.2. Death of the Desktop?
      3. 13.1.3. Embracing Progressive Enhancement
    2. 13.2. Mobile Technology Predictions
      1. 13.2.1. Improvements in Tools and Libraries
      2. 13.2.2. Changes in Device Architecture
      3. 13.2.3. Coding for Future Architectures
    3. 13.3. The Internet of Things
      1. 13.3.1. Hardware Sensor Networks
      2. 13.3.2. The Human Sensor
    4. 13.4. Summary
  19. A. Debugging Android Web Apps
    1. A.1. JSLint: Prevention Is Better Than Cure
    2. A.2. Debugging with the Google Chrome Developer Tools
      1. A.2.1. Catching Messages and Errors in the Console
      2. A.2.2. Script Debugging
      3. A.2.3. Inspecting the DOM with the Elements Tab
    3. A.3. Debugging with the Android Debug Bridge

Product information

  • Title: Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript
  • Author(s):
  • Release date: January 2011
  • Publisher(s): Apress
  • ISBN: 9781430232766