Using bottle.py and SL4A to build an Android Web Server for your phone / tablet

Ever thought of using your Android phone / tablet to test simple web app ideas?

Here’s a quick hack I threw together at lunch one day that lets you test simple python web applications on your phone via an android web server. It uses Google’s Scripting Layer for Android python scripting environment to provide you with an editor and an execution environment. For the server, I built it using the bottle python web framework.

From an ergonomics perspective, we’re still talking about coding on a phone here. You’re not going to rewrite Reddit on your lunch break. Any heavy coding (>100 lines) should be done on a laptop / desktop and copied into your project via a USB cable. However, the SL4A editor IS flexible enough to allow you create a basic prototype of your idea. For example, a simple interactive webpage that uses AJAX to execute a server side lookup or calculation. This approach is also an awesome way to demo your ideas - just start the server and hand your prospect the phone!

To get you started, here’s a quick inventory of some of the building blocks that SL4A’s python environment puts at your disposal:

  • SL4A’s Python Android Module – this is a wrapper around the android Java API. For this example, we use this to open up a web browser on the phone. I suspect you could actually use it for a lot more – eg. get phone data and display it…
  • The Python Standard Library - there are many useful things in the Standard Library (to explore this, check out Doug Hellman’s excellent Module of the Week series). Several items of immediate interest:
    • The multiprocessing module: Allows us to write an SL4A script which opens a web view (localhost browser) and then proceeds to start the server.
    • The time module: Helps us coordinate the two-step of starting a server and opening the browser. Included since this was a source of early frustration.
    • The sqlite3 module: Need a SQL database? Guess what, you got one!
  • For experienced developers, Google also loaded modules for accessing many of the Google API’s. There is also a copy of BeautifulSoup, a parser you can use for Web scraping. So this little package has a lot of punch!

For a summary of what bottle.py brings to the table, look here or here or here. I like it because the entire web framework fits within a single file, which you can drag and drop directly onto your phone. Bada Bing, Bada Boom…installation complete.

Since you are working on a small screen, it helps to be able to write tight simple code. Some things that are helpful to know: python dicts, list comprehensions, lambda functions, and functional programming techniques (map, reduce, filter). A good grasp of basic string operations is also useful. As a group, these features let you write small but powerful programs. On the client side, you should know some basic jQuery.

The code below was for an early “code doodle” which became the chassis for our website value calculator (granted we had to do some additional analytics work before we published it). The android version of the calculator consisted of a simple HTML/JQuery page that called a server side function. Once I was comfortable with the prototype, I copied the files to my desktop and started “building it up” into a full fledged web application (static html => template, content development, visual design, etc.).

The SL4A script below triggers a deferred call to the android API to open a web browser (delayed by five seconds) then uses the current SL4A process to start a localhost bottle.py server. This should be viewed as a starting template for a project – import this into your SL4A directory and clone it to build your own applications. I recommend including an HTML skeleton page (with JQuery and any other Javascript libraries or stylesheets that you commonly use) to simplify creating the boilerplate elements of your application. Both of the Python script and the HTML file are fairly easy to edit from SL4A’s built in editor.

from bottle import route, run, template,validate, static_file
from multiprocessing import Process
import time
import android
droid = android.Android()

def showurl(url=”http://localhost:8080“):
time.sleep(5)
droid.webViewShow(url)

@route(‘/’)
def home_page():
return static_file(“calc-projectcenter.html”,root=’scripts/’)

@route(‘/getanswer/:question’)
def send_answer(question):
return calc_answer(question)

def calc_answer(question):
return {‘answer’:42}

p=Process(target=showurl)
p.start()
run(host=’localhost’, port=8080)

 

Closing Comments

As I mentioned before, there are some ergonomic limits to how much work you actually want to do on an Android. I recommend doing any “heavy lifting” on a desktop and copying those libraries onto your phone. For example, I’ve got a couple of stock modules that simplify access to the android SL4A UI and sqlite3 database. These were developed on my laptop as Python classes and copied over to my phone.

However, while it is a pain to use SL4A to write code – the SL4A environment more than makes up for this by providing you with immediate access to your project. Want to make a little tweak? Easy…edit that line of code and start the test server. Want to do a quick demo for a friend? Simple, pull out your phone and show them your prototype. Stuck waiting for an appointment? No problem, you can use that time to work on your next great feature….

If you have any questions or comments, you can email us at hound@marginhound.com. If you like this article, please share it with your friends

Leave a Reply