Scientific web apps. Eureka!
I remember talking to Michael Sumner at resbaz 2015 about web apps being the ultimate user interface because everyone knows how to use a webpage.
I’m going to show you how easy it is to make a simple web app with Python. It requires a web micro-framework called Flask and an understanding of HTML but it is surprisingly easy.
Although it might not be obvious if you’ve ever used the developer view of your browser and seen the HTML code that makes up a webpage, the page you see is often created as you make the call to the website. It also disappears as soon as you browse to the next page. The software that does that is generating the page based on a set of software rules and often based on the information it has about you. When you ask the site for information, the formatting of the page will be modified to display the amount of information that will be returned. But why is any of this important to researchers?
As a bit of an explanation, I saw a post from a friend who works at Swinburne in vision neuroscience about detecting faces in images for one of their experiments. I know how to do that with opencv and wanted to help but it’s not very helpful to send Python code to someone who doesn’t code. Telling them they should “just learn how to program” is a little bit douche-baggy. It doesn’t solve their immediate problem and ultimately isn’t very helpful. It’s not an option for me to develop an entire GUI based application using one of the Python GUI makers like TKInter or WxPython. It would be an enormous amount of work and the result without user-experience testing would probably not be great.
That’s when the idea of using a web app first started. Everyone knows how to use a standard web interface. Uploading and downloading files, checking boxes to indicate what actions to perform on those uploaded files. Navigating around the site using standard buttons along the top. It’s a common language now and with the little helpers like bootstrap and jquery, it’s not that much work.
For my friend at Swinburne, I could send a link to the site I built. It would have a paragraph of introduction, some references to articles that the function of the site is based on and some instructions on how to use the site to return images with faces marked. It could even provide details of how to reference the site if the resulting images are used in an article.
There could be a standard file upload box and a list of option for what actions to perform on the uploaded images. With a little bit more effort, a preview of the result could be displayed. The processed images could then be downloaded. My friend get’s the benefits of Python without having to know how to write Python syntax.
Now I realise resbaz 2016 has come and gone and I am no closer to being able to create one! So, I have sat down and started that journey.
Flask has been on my very long list of ‘software to learn’ for some time.
After initially looking at Django, I came across Flask. Partly because it was written as a joke, I’ve liked it more and more as I’ve looked into it. Flask is a micro-framework. Actually it was an April fools joke about micro-frameworks that scratched an itch and became popular. It doesn’t come with a database or forms module, these are optional add-ons. It is a very basic framework to do the simplest part of creating a web page. Another aspect of Flask I find compelling is Miguel Grinberg. He is hilarious! Although not intentionally, I suspect.
If you have ever watched a talk of his, his deliver is so dry and flat that it is strangely compelling. I have always tried to be animated and engaging in my lectures and workshops. Miguel on the other hand is like the asian guy in the Simpsons mob fight scene. You just know he knows stuff.
The other project that is getting some of my elove is word_net
The word_net project will initially use Trove, a repository of textual information. Steve Bennet has helpfully given a brief intro to using the Trove API with Flask as an interface. This is going to be the start of my webapp.
Fortunately, the Trove site was going through a transition to a new version on the day I tried this - which meant I actually had to think and not just follow along with pre-written code. I was able to create a site that displayed the results of a call to the trove site within a couple of hours, including setting up flask.
Here’s a brief rundown on how i did it - if you want more details, just say so!
Start a new virtual environment with
conda create -n flask python=2.7 flask requests
Acitvate the environment with
source activate flask
Make a new directory for the project and move into it.
mkdir troveproject
and
cd troveproject
Create two folders and a simple flask app.
mkdir static templates
and
touch simple.py
For the moment the python code below goes in the simple.py file and a html file with the html code below it goes in templates. It doesn’t really matter what it is called right now because it isn’t used.
from flask import Flask
import urllib2
app = Flask(__name__)
apikey='1b2c3d4f'
troveURL = 'http://api.trove.nla.gov.au/'
zone = 'book'
search = '%22' + 'piers' + '%20' + 'anthony' + '%22'
r = urllib2.urlopen('http://help.nla.gov.au/trove/trove-outage').read()
@app.route('/list')
def show_list():
return r
@app.route('/')
def hello_world():
return 'Hello World!'
if __name__ == '__main__':
app.run()
`
There’s a lot of the code in the above snippet that doesn’t do anything. It’s there for when the Trove site is back up and I can continue. The main functional part is where urllib2.urlopen( ) calls the outage page and then when I go to http://127.0.0.1:5000/list on my local machine, I can see that page.
When the Trove API is back up, the call to the trove API will return a list of results that will be rendered with the following template.
<pre>`<!doctype html>
</pre><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
Trove test
<h1>Results</h1>
{% for article in results.response.zone.0.records.article %}* {{ article.title.value }} - More info
<br><i><small>{{ article.snippet | safe}}</small></i>
Notice code surrounded by % % and the line within the double curly brackets {{ }}, that’s where the results of the API call will be inserted when I get access to Trove again.
If you type
python simple.py
within the troveproject folder, Flask will start up a webserver and tell you the address. Copy and paste that into a browser and you should see “hello world”. add
/list
to the end of that address to see the “Trove is broken” message.
Looking forward to progressing this and I’ll post more details soon
