Click here to Skip to main content
15,868,141 members
Articles / Web Development / HTML

Writing Android Programs with HTML and JavaScript

Rate me:
Please Sign up or sign in to vote.
4.11/5 (13 votes)
24 Sep 2014CPOL3 min read 104.6K   70   18
"Togosoft Device Browser" allows web programmers to create Android web apps in minutes with pure HTML and JavaScript.

Introduction

Recently, I was assigned to work on a new Android project for a pollution enforcement agency. Basically, the project itself is a traditional web database program; the challenging part of this project is the requirements for its client side program: 

  1. The client program runs on Android devices (Android smartphones with Android OS 2.3+). 
  2. The client program needs to take pictures and upload them to the backend database.
  3. The client program needs to read the barcodes on vendor's permits.
  4. The client program needs to record GPS locations of pollution sites.
  5. The client program needs to be easily deployed and maintained (20+ devices).

At beginning, the development team seemed to like to create an Android program from the scratches. However, most of the team members are web developers rather than Android programmers. The Android programming learning curve for some of them seems too steep. Also, the client program may be updated quite frequently, the deployment of a standalone Android program to 20+ devices may seem extra works for the project administrator.  

To resolve the above issues, the team decided (assigned me) to implement an Android specific web browser which can expose the lower level Android hardware features (camera, barcode scanner, GPS, ...) to the upper level web programmers through JavaScript interface. The web programmers can continue to use their favored HTML, JavaScript, CSS, PHP, and MySQL to complete the whole project.

After this project completed, I continued to refine some parts of my browser and wrapped it as a new Android program - "Togosoft Device Browser". In the rest of this article,  I will focus on "how to use the browser" rather than "how to implement the browser" (I may address this topic in another article). The following figure illustrates the basic features of the browser.  If anyone interests to learn it more, please visit http://www.togosoft.com/TDB for details.   

 

 

Setting Up

  1. "Togosoft Device Browser" can be downloaded from Google Play (previous Android Market), and installed to your Android device.  
  2. "Togosoft Device Browser" doesn't need any special setup. It runs as a regular mobile web browser. 

User Interface  

  

 

  1. [Back] to the previous web page.
  2. [Forward] to the next web page.
  3. [Menu] to display the browser menu.
  4. [Address Bar] to display or enter the web page address. Items (1), (2), (3), and (4) are on the browser toolbar.
  5. [Menu]/[Address] to enter the web page address.
  6. [Menu]/[Bookmarks] to access the browser bookmarks.
  7. [Menu]/[Reload] to reload the current web page.
  8. [Menu]/[Orientation] to change the browser orientation.
  9. [Menu]/[Toolbar] to turn on/off the browser toolbar.
  10. [Menu]/[Console] to display the web page source code, debugging messages, and error warnings. 

Sample Programs

1. The first demonstration HTML program is to create a simple barcode scanner.   

01 <html>  
02 <title>Barcode</title>
03 <script type="text/javascript" src="TogosoftDeviceBrowser.js"></script>
04
05 <body>
06   <div id="output">
07     Barcode : <input type="text" id="barcode" size="24"><br><br>
08     <input type="button" value="Scan Barcode" onclick=ScanBarcode()>
09   </div>
10 </body>
11
12 <script>  
13   if (!$device || !$device.hasCamera())
14   {
15     document.getElementById("output").innerHTML="No Camera found.";
16   }
17
18   function ScanBarcode()
19   {
20     $device.scanBarcode(function(barcode)
21     {
22       document.getElementById("barcode").value=barcode;
23     });
24   }
25 </script>
26
27 </html>   
  • [Line 03]TogosoftDeviceBrowser.js file is required to access Android device features.  
  • [Line 13]$device is defined and created if the current HTML program is running inside Togosoft Device Browser, and TogosoftDeviceBrowser.js file is loaded. Also this line checks if the device has a camera.  
  • [Line 20]: Scan the barcode, and pass the result though the callback function.  
 

 

2. The second demonstration HTML program is to get the list of sensors from the current device.

01 <html>  
02 <title>Sensor List</title>
03 <script type="text/javascript" src="TogosoftDeviceBrowser.js"></script>
04
05 <body>
06   <div id="output"></div>
07 </body>
08
09 <script>
10   if (!$device)
11   {
12     document.getElementById("output").innerHTML="No sensor found.";
13   }
14   else
15   {
16     var sensors=$device.getSensorList();
17     var html="<table border='1'>";
18     for (var i=0;i<sensors.length;i++)
19     {
20       html+="<tr><td>"+sensors[i]+"</td></tr>";
21     }
22     html+="</table><br><br>";
23     document.getElementById("output").innerHTML=html;
24   }
25 </script>
26
27 </html>

 

  • [Line 03]TogosoftDeviceBrowser.js file is required to access Android device features.  
  • [Line 10]: Check if $device is defined and created. 
  • [Line 16]: Get an array of sensor information from Android device.


   

Final Words 

"Togosoft Device Browser" acts as a bridge between Android device and the regular web browser. It allows most of web developers to take advantages of Android device hardware, sensor, and service features without installing Android SDK and even knowing Android programming.  The browser is a simple but powerful tool to use for web application development. It supports standard HTML5 and JavaScript interfaces.  If you can code your web programs in jQuery, there is no reasons that you can't implement your Android web apps with "Togosoft Device Browser" in minutes.  Hope you can try it soon. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionTired of the HTML thing Pin
j.saer14-Nov-14 10:16
j.saer14-Nov-14 10:16 
GeneralMy vote of 2 Pin
Aman.Jen23-Jul-14 20:09
Aman.Jen23-Jul-14 20:09 
QuestionRe: My vote of 2 Pin
thatraja24-Sep-14 21:26
professionalthatraja24-Sep-14 21:26 
QuestionSeems to be nice, I will buy a Android phone to test. Pin
TonyBR21-Feb-13 4:54
TonyBR21-Feb-13 4:54 
QuestionSo what you are doing is bypassing all of the security infrastructure Pin
Rabb Moshe Plotkin3-Apr-12 18:18
Rabb Moshe Plotkin3-Apr-12 18:18 
AnswerRe: So what you are doing is bypassing all of the security infrastructure Pin
shiuhlin4-Apr-12 20:41
shiuhlin4-Apr-12 20:41 
SuggestionmobiUs Pin
Ashraf Sabry29-Mar-12 1:05
Ashraf Sabry29-Mar-12 1:05 
GeneralRe: mobiUs Pin
shiuhlin29-Mar-12 9:48
shiuhlin29-Mar-12 9:48 
QuestionPhonegap Pin
Member 843739526-Mar-12 21:11
Member 843739526-Mar-12 21:11 
AnswerRe: Phonegap Pin
shiuhlin27-Mar-12 7:10
shiuhlin27-Mar-12 7:10 
GeneralInteresting Concept Pin
gcstang26-Mar-12 12:45
gcstang26-Mar-12 12:45 
GeneralRe: Interesting Concept Pin
shiuhlin26-Mar-12 16:00
shiuhlin26-Mar-12 16:00 
GeneralRe: Interesting Concept Pin
gcstang27-Mar-12 2:28
gcstang27-Mar-12 2:28 
GeneralRe: Interesting Concept Pin
funtikar30-Apr-13 17:25
funtikar30-Apr-13 17:25 
QuestionAny link to JS code? Pin
t_rex25-Mar-12 8:01
professionalt_rex25-Mar-12 8:01 
AnswerRe: Any link to JS code? Pin
shiuhlin25-Mar-12 12:07
shiuhlin25-Mar-12 12:07 
GeneralRe: Any link to JS code? Pin
moongarden26-Mar-12 1:22
moongarden26-Mar-12 1:22 
GeneralRe: Any link to JS code? Pin
elha5824-Sep-14 21:45
elha5824-Sep-14 21:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.