Photosrch Application

Welcome to the Brainwave Platform

Hello Folks!

Today we are going to use the Brainwave Platform to create a simple application.

This application will use the Flickr (http://www.flickr.com) web service to search for images on Flickr.

Guide

Step 1: Install the Brainwave Platform in your computer. Double click on the executable file and follow the instructions

Step 2: Install Python 2.5, available from http://www.python.org/download/releases/2.5/Python-2.5.msi. Download it & Install it.

Step 3: Download and install your favorite programmer's text editor. We use the free Notepad++ which can be downloaded from http://prdownloads.sourceforge.net/notepad-plus/npp.3.9.Installer.exe?use_mirror=umn.

Step 4: The Brainwave Platform requires Firefox 1.5 or later. Firefox can be be downloaded from http://www.mozilla.com/en-US/products/download.html?product=firefox-2.0&os=win&lang=en-US Download & Install Firefox.

To create the application click on the Brainwave icon on the desktop Or Go to Start -> Programs -> Brainwave -> Start Brainwave. The brainwave home page will be displayed. Click on the Application Builder icon.

The logon screen will appear. As the Brainwave Platform comes with a built-in authentication feature, you have to be logged in to view any application or to use the platform.

Log in as 'root' & password is 'password', as root has the super user permissions.

It will open the application builder application.

Enter 'Photosrch' as the application name or any name you want to give. Now follow the tutorial on the right side of the screen.

Here in our application we are using a web service called Flickrs, which is used to find out photos of a given tag. For this we need to have an API key & Secret No. You can get your API Key and Secret No. by making a request to http://www.flickr.com

To create the application we need the Flickr API. Download the flickrapi.txt from http://beej.us/flickr/flickrapi/flickrapi.txt and save it as flickrapi.py in the modules folder of your application folder. In this case default path is 'C:/Program Files/Brainwave/Apps/Photosrch/Modules/'

Go to the Photosrch folder, in this case default path is 'C:/Program Files/Brainwave/Apps/Photosrch', there you will see a file Photosrch.py, which is the main application file. Open it in Notepad++. The structure will look like this.

On the top you see something has been imported. These all are modules, which are needed to run this application on brainwave platform. And which are automatically imported for you.

In our application we have to import the Cheetah Template Plugins. This Plug-ins will be used to show the output of the application on the screen.

from __future__ import division
import iris, aphrodite
from plugins.CheetahPlugin import CheetahRender

Import the Cheetah Template Plug-in at the top.

Now as you go down you see, there is a class defined by the application name. Under the Class there are 3 methods, which have been automatically defined for you.

1.	def __init__(self):
iris.App.__init__(self)
self.aphrodite = aphrodite.Aphrodite('Photosrch')
2.	@iris.expose
def default(self, *args, **kwargs):
pass

3.	@iris.expose
def index(self, *args, **kwargs):
return self.aphrodite

The first method is the initialization method. Whenever the application is initialized this method is called.

The second method is the default method. This one is called, whenever the application is being called with arguments. If the arguments are any method or function, then that function or method is called.

The third method is the index method. Whenever the application is called without any arguments, this method gets called.

In python 'Indentation' has a significance importance. To know more about this refer to 'Python documentation' on http://docs.python.org/ref/indentation.html.

Now import the FlickrAPI in the def __init__(self) method. Like:

def __init__(self):
		iris.App.__init__(self)
		self.aphrodite = aphrodite.Aphrodite('Photosrch')
		from flickrapi import FlickrAPI

This is going to use the FlickrAPI method from flickrapi library.

Next pass the API Key and the Secret No. This is my API key, so you have to get your own. You can get a key by requesting for it on www.flickr.com.

def __init__(self):
	iris.App.__init__(self)
	self.aphrodite = aphrodite.Aphrodite('Photosrch')
	from flickrapi import FlickrAPI
	self.flickrAPIKey = 'c1df055dca66d9d8ba159801bdb8c9da'
	self.agent = FlickrAPI('c1df055dca66d9d8ba159801bdb8c9da','c58160057697c737')

Now when we launch the application, the platform is going to call the def index(self, *args, **kwargs): method. So in this we have to pass the interface filename for the platform.

def index(self, *args, **kwargs):
		self.aphrodite.file = "index.axml"
		return self.aphrodite

Aphrodite is the user interface DSL used by Brainwave Platform. For more Aphrodite please refers Aphrodite Documentation.

So here index.axml is our index page. To create index.axml. Open Notepad++ and create a blank file. Save it as index.axml. This will be the layout for our application.

Now we are going to use Aphrodite tags or widgets to create our interface. Please refer Aphrodite Documentation for more clarification on the Home page of the Application.

<window><scripts/>
	<box style="height:70px; width:720px;background-color:#999" align="center">
		<ajaxform id="searchform" url="/Photosrch/search" method="get" update="searchresults">
			<list style="height:20px;padding:20px">
				<item label="Enter Search Query : " style="font-size:18px;padding-top:5px">
					<textbox id="query" style="font-size:15px;float:left; width:300px;text-align:center"/>
					<button image="go" submit="searchform" url="/Photosrch/search"/>
				</item>	
			</list>
		</ajaxform>

		<div id="searchresults">
		</div>
	</box>
</window>

Here we have defined a div with id 'searchresults', where the result is going to be displayed.

In order to view the layout, we have to deploy the application first. To deploy the application or any other application use 'Application Builder' or 'Appdeployer' application.

Now press the 'Manual Deployment Tab' on the screen. And scroll down to find out the application name you have just created. You will see the 'Photosrch' application is also listed.

Now click on 'Deploy' button next to 'Photosrch'.

The application 'Photosrch' has been deployed.

Go to the menu bar, there you can see the Photosrch is coming.

Click on that or you can type in the url 'http://localhost:8080/Photosrch'.

The application layout is like this:

Now we are going to create the search method which is going to be called from the layout to search the photos. Open the Photosrch.py file. Define a method by the name search at the end.

@iris.expose
	def search(self, *args, **kwargs):

Now the flickrAPI is going to return a XML node instance, which we are going to store in a variable.

@iris.expose
	def search(self, *args, **kwargs):
	flickr = self.agent.photos_search(api_key=self.flickrAPIKey,tags=kwargs['query'])

Now create a blank list.

@iris.expose
	def search(self, *args, **kwargs):
	flickr = self.agent.photos_search(api_key=self.flickrAPIKey,tags=kwargs['query'],per_page='30')
	photos = []

Now we are going to store the selective attributes of the images retuned by the flickrAPI in photos. Here we are running a 'for' loop for any no. of images returned by the flickrAPI and creating a dictionary d to store the selective attributes. The 'url' key is being created by combining (secret, id & server) keys.

@iris.expose
	def search(self, *args, **kwargs):
	flickr = self.agent.photos_search(api_key=self.flickrAPIKey,tags=kwargs['query'])
	photos = []
	for x in flickr.photos[0].photo:
			d = {'server':x['server'],
				'id':x['id'],
				'secret':x['secret'],
				'title':x['title'],
				'url':'http://static.flickr.com/%s/%s_%s_t.jpg' % (x['server'],x['id'],x['secret'])
				}
			photos.append(d)

Now we are going to send this searched data to the div for viewing.

@iris.expose
	def search(self, *args, **kwargs):
	flickr = self.agent.photos_search(api_key=self.flickrAPIKey,tags=kwargs['query'])
	photos = []
	for x in flickr.photos[0].photo:
			d = {'server':x['server'],
				'id':x['id'],
				'secret':x['secret'],
				'title':x['title'],
				'url':'http://static.flickr.com/%s/%s_%s_t.jpg' % (x['server'],x['id'],x['secret'])
				}
			photos.append(d)

	return CheetahRender(data={'photos':photos},template="_photos.tmpl")

To view the div, create a template file with name "_photos.tmpl". To write the code, open a blank file in Notepad++ and add the following code into it.

#for $photo in $photos
<img  src="$photo['url']" style="border:1px solid #000; width:80px; height:80px; margin:5px">
</img>
#end for

This code will look for all the urls of images one by one and show them in to the screen.

So, you are finished with your code.

Save the file at <AppFolder>/resources/views/<AppFolderName>/.

Now launch the application and search for any keyword.

Note: Images shown above for the 'sky', may vary due to new image being tagged with sky in flickr.