Introduction to Building Hybrid Android Apps – Fall 2014

Cancelled

Date & Time: Saturday, November 22; 9AM – 1PM
Location: Constant Contact, Reservoir Place, 1601 Trapelo Road, Third Floor, Waltham, MA 02451
Speaker: C. L. Kim, Millennial Media

Sponsored by

By: Nov 12:

Members: $75
Non-Members: $95

After: Nov 12:

Members: $95
Non-Members: $110
Decision: Friday, Nov 14

Course Summary

Native, HTML5, or Hybrid? Let’s see what this Salesforce Developer webpage Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options has to say.

…“For the most part, hybrid apps provide the best of both worlds. Existing web developers that have become gurus at optimizing JavaScript, pushing CSS to create beautiful layouts, and writing compliant HTML code that works on any platform can now create sophisticated mobile applications that don’t sacrifice the cool native capabilities. In certain circumstances, native developers can write plugins for tasks like image processing, but in cases like this, the devil is in the details.”

…“Netflix has a really cool app that uses the same code base for running the UI on all devices: tablets, phones, smart TVs, DVD players, refrigerators, and cars. While most people have no idea, nor care, how the app is implemented, you’ll be interested to know they can change the interface on the fly or conduct A/B testing to determine the optimal user interactions. The guts of decoding and streaming videos are delegated to the native layer for best performance, so it’s a fast, seemingly native app, that really does provide the best of both worlds.”

Look up this article for a slightly dated survey in VentureBeat: HTML5 vs. native vs. hybrid mobile apps: 3,500 developers say all three, please. It concludes with a quote: “When considered in context, we’re seeing plenty of cases where hybrid is the right choice for a given app, and others where native still makes the most sense,” Anglin said. “What developers need, then, are tools that can help them be effective, regardless of the chosen approach.”

A hybrid mobile app can be considered to be a combination of a web app that is incorporated within a native app. The combination involves using HTML5, CSS and JavaScript code for the “web view” component provided by the native SDK. While it is possible that a hybrid app has a “web view” that is the entire UI of the mobile app, what is possibly even more interesting is something that the Apple AppStore app reportedly uses – “web view” for only part of the mobile app’s UI.

This class presents an introduction to building hybrid mobile applications for the Android platform, using HTML5, CSS and JavaScript, together with some popular JavaScript libraries. A simple demo hybrid app is used as an example to illustrate and bring home the concepts discussed. We are not covering popular container/cross-platform tools such as PhoneGap/ApacheCordova that turn mobile apps written in HTML5, CSS and JavaScript into native apps. Nor are we covering HTML5, CSS or JavaScript per se.

Instead, we present some of the considerations and gotchas for a WebView component, as well as a native Android app, when they both interact with each other in a hybrid app. We illustrate with actual code taken from our demo hybrid Android app that is essentially just a web app embedded as a WebView component in a native app. Our demo app shows an example of making a round trip call from Android native code into JavaScript and back to native Java code, by using JavaScript to retrieve a stored note item in the web app then using native TextToSpeech to say the contents of that note item. As a capstone, it shows an example of making a call from JavaScript into Android native code and back to JavaScript, by using Java to retrieve contacts in the native built-in People app then going back to JavaScript code to store those contacts in the web app.

Who Should Attend

This course is aimed at technical professionals in the software, mobile, media, communications, or other high-tech industries, who would like an introduction to developing enterprise mobile smartphone hybrid apps on the Android platform.

Prerequisites

Basic familiarity with Java and the Android platform is a pre-requisite for this half-day class. If you don’t have that, read up on the Android Developer website “Building Your First App” and complete all four relatively short lessons (Creating an Android Project through Starting Another Activity); or consider taking the companion IEEE Boston Section’s continuing education class Learning Android Development Framework and APIs. Basic familiarity with HTML5, CSS, and JavaScript is expected. Some basic familiarity with JQuery (and JQuery Mobile) would be helpful but we do go over some functions in the popular JQuery library as needed in the class. We do make use of node.js and MongoDB as the back-end for our demo hybrid app, as well as an open-source Java library to access the contacts data in the native People app, but we do not delve much into those code in this class.
Reference material
Material is taken from various sources and books, such as articles on the developer.android.com and developer.chrome.com websites. We use some good ideas gleaned from “Building Hybrid Android Apps with Java and JavaScript” by Gok and Khanna, but have not adopted the book. Our demo hybrid Android app uses an existing mobile web app as a starting point, taken from “Pro iOS and Android Apps for Business: with JQuery Mobile, node.js and MongoDB” published by Apress.

Course Objectives

To gain a basic familiarity with the Android’s WebView component, such as settings and responsive design
To gain a basic understanding of what is involved with writing a hybrid Android app, including special handling and gotchas
To see how basic debugging can be done for WebView and JavaScript in a hybrid app, including remote debugging using the Chrome Developer Tool
To use a working demo hybrid Android app to help students better understand and connect together the material covered

Outline of Concepts/Topics

Chrome WebView component in Android
Some Basics of a Hybrid Android App
WebView settings and considerations
Web app file loading and directory structure
WebView UI settings and considerations
@JavascriptInterface annotation
WebView.addJavascriptInterfact()
Thread, Security considerations and issues
WebView.evaluateJavascript()
Debugging WebView
Using Deferred object in jQuery
Event Pooling concept

Course Instructor

C. L. Kim is in Software Engineering at Millennial Media, the leading independent mobile ad platform company. He has an MBA and MSE in Computer & Information Science from the University of Pennsylvania, and is developer of a fun Android app.