How to integrate an Axure prototype with a live chat application using Flask and SocketIO.

I recently created a prototype sales flow in Axure that contained a dummy chat button. One of the next requests for prototyping that I received was on testing the actual activation of the chat button and the subsequent screens after. However, I went slightly further than only prototyping the chat button interaction.

Why not add live chat to it so you can test end-to-end ?

Since participating on a few U-lab sessions organised by my colleague, I firmly believe that the more realistic your environment, the better the tester can focus on the actual proces that is being tested. It doesn’t need to look exactly right (although that’s fine too) as long as most or all of the functionality is there. Otherwise a tester can become focused on an missing element and not on the actual prototype.

For instance, the sales flow I previously created contains a general conditions text. At first I just added a page to the prototype so the user could at least click on the general conditions link, but I left the actual page empty.

One or two test users found the empty page, and remarked on it repeatedly – it clearly bugged them, even though it was only a very small part of the flow they were asked to test. So I quickly added the beginning of the actual text to the page. Subsequently there were no more remarks.

So instead of using pre made ‘fake’ speech bubbles to ‘make pretend’ that there was a chat session going on, I got to thinking about my previous experiences with Python and Flask and the way you can use those tools to create a website with very little effort.

Wouldn’t there already exist a way to easily setup a live chat server and integrate it with the Axure sales flow prototype ?

A quick google search later I had found a simple tutorial (made by the wonderful knowledgeable Flask-guru Miguel Grinberg) on using websockets with Flask and Flask-SocketIO, setting up a simple chat application server that could be reached by surfing to the page, allowing actual client-server communication using a javascript socket.io library for the webclient.

The backend : live chat application using the Flask micro-framework

Let’s first describe the ‘backend’ : I used Flask together with some extra libraries like Flask-SocketIO to create the chat server.

[Flask is what is called a framework, written in Python, that allows you to code a web application using only a few tools and templating languages that have been configured to work together. It’s called a micro framework because it allows you to work fairly freely, not confining you too much. A full framework is much more rigid in using databases, templating languages, etc]

Soon after, I had a chat server running that allowed you to start up a browser, enter a room and type in a line of text, hit enter, and have it displayed on two different sessions that were in the same ‘chatroom’.

As long as you are on the same (wireless) network, you can visit the server and chat together in a room. So the U-lab organiser or a third party can run the ‘server’ on his mac, and the tester can use a browser on another device to visit the server url (using another id) and we have a live chat going between the two parties.

As I wanted to test the mobile view of it, I modified the provided example to use Bootstrap and css-styled it so that the chat lines are not shown as simple text but as speech bubbles, similar to Messenger. If the user entering the chat line is the same as the user it is being shown to, it is shown on the right side of the screen, else it is shown on the left.

Also, I removed the first ‘login’ screen from the example provided so I could call the chat screen up from within the Axure prototype based on url parameters so the user does not have to login any more.

Obviously this had an impact on using sessions (which is being used by the socket emitters to know who is emitting what), as these sessions were established in the separate login screen.

As I didn’t want to rewrite the whole code and only had a few days to set this up, I made it so that the sessions are actually created by the url parameters when the chat page is called.

The result is something that I consider to be unsafe for real live applications, but is ‘Good Enough’ to use for testing a prototype in a U-Lab.

The frontend : Integrating the Axure prototype with the chat app

The integration with the Axure prototype is fairly easy if you want to link on the desktop : you can code up an action to call an external url when clicking on an element, and decide wether to call this up in a new window or in the current window.

I first tried integrating the chat directly into an inline frame that was inside a dynamic panel, however once you use an inline frame you then lose all the session information and you can no longer chat. So it needs to open in a new window/tab.

However, I wanted to test a mobile prototype, and coupled with the above, this caused some fairly unique problems :

  • the user is in the middle of a sales flow, so if (s)he needs to ask for help, (s)he should be able to get back to what (s)he was doing, without restarting the sales flow – so I need to open up the chat application in another mobile window
  • we usually install such a web app onto the home screen, so that Mobile Safari opens up full-screen. However, doing that makes it so that a new window created from there cannot be closed – you can only ‘return to the app’ which restarts the app, which is not what we want
  • using the javascript command window.close() on IOS to close a chat window and return to the prototype is problematic and not something that works consistently. Some browsers for example restart the whole prototype, or refuse to close the window at all. In the end, I could only use it with the ‘Brave’ browser, a fairly new browser for IOS

In the end, to keep everything on the same server, I published an export of the Axure prototype to html and stored those pages in the local chat server under the static directory (flask can easily serve static files as well).

Conclusion

My prototype can call up the chat in a new window, and the user can be returned to it. It is a worthwhile addition to actually see people start up, use, and end the chat.

Templating the chat page itself is fairly easy, it’s just bootstrap css that you can edit.

The chat server is however more finicky than it should be – if the computer hosting the chat server goes to sleep, it is best to restart the chat server. Plus caching by browsers means that if you do make any changes, you need to make sure that the cache in the (desktop) browser is refreshed. Or you keep wondering why your changes do not become visible…

The actual integration with the prototype was more difficult because I was integrating with a mobile prototype. I’ll have to look into this on how to do a better integration next time.

Importing a comma-separated csv file into Numbers Tool

I created this to scratch an itch of mine when reading a csv file into Numbers that contained commas. It turned out that Numbers puts each line into a single cell. It ignores the commas. And there’s no way to specify that the delimiter needs to be a comma, not a semi-colon.

Here’s a small tool made using a small python script and Platypus that will launch as a ‘droplet’ and will allow you to drop a csv file on it that has COMMA (meaning this , ) separated values.

It will accept any csv file and convert from commas (,) to semi-colons (;) and save the result out again as “filename2.csv” – Numbers should be able to open it correctly then. Your original csv file is only read.

Please note that commas inside double quotes are preserved and not converted.

It works on my smallish csv files, but please note :

! WARNING ! THERE ARE NO GUARANTEES THAT THIS WILL WORK FOR YOU – YMMV ! WARNING !

Please note there is NO feedback if something goes wrong.

It works on my 2 macs (using OS X Mavericks), so I figured I would throw it out in the wild for those people who also might need it.

You can download the (non-signed) app here : Com2DotCom.app – you’ll need to open it using RIGHT-CLICKING on the App the first time.

Feedback, comments, bug reports, etc are very welcome. If possible, I’ll try to respond and help you out.

Fun Project : visualisation of all the flemish schools

I’ve had a bit of fun recently with visualising some open data from onderwijs.vlaanderen.be where I downloaded the address list of flemish schools for kindergarten and “lower” schools.

  • imported the csv list via “base” in an sqlite database
  • added longitude and latitude fields to the db
  • wrote a small script that used geopy to query google for each address and add the coordinates to the db
  • then created another small script using pygmaps to create a custom html file which includes the necessary coordinates for each point on the google map.

The result is that I never knew how many schools there were in Vlaanderen !

Schools in Flemish Belgium

You can read more in the original post (in Flemish) that I made on the dataconnect website, where I advertise for my web site design and consultancy. For the full map, click on the above image to go there.

Bootstrap from twitter is very cool

A few months ago I mentioned Foundation from ZURB which to me was a pretty neat way to write some functional html and css code for a quick setup of a website or setting up a basic layout.

These last few days I’ve been busy with learning Bootstrap, which is made by the guys from Twitter, and while Foundation was definitely cool, I must admit that Bootstrap just fits me better and offers me more possibilities. YMMV ofcourse.

It may be because I had Foundation as a basis, and thus was already accustomed to the way things worked, but I learned the methods used much quicker than with Foundation.

I’ve made a decent, good-looking one-page landingpage website with a image Carousel in less than a day, and as a test I’ve reworked an existing website to see what it could do.

In less than a day I had a fully navigational website : full navbar, with menu, fluid rows that resized in most browsers on the fly with buttons and a good layout.

I am really impressed with the speed I’ve managed to make these websites, and I can see myself using bootstrap to built other sites in the future.

 

Woes in Python 2.x : UnicodeEncodeError : ‘ascii’ codec can’t encode

Phew ! This is a reminder to myself…

I’ve wrapped my head once already around unicode, but it was so long ago that I had to do it all over again when the error suddenly came up again.

The error I had was the dreaded “UnicodeEncodeError: ‘ascii’ codec can’t encode character u’\xa1′ in position 0: ordinal not in range(128)” error which does not really explain what you are doing wrong but leaves you scratching your head wondering where in heaven’s name you should start looking.

I read the following articles :

But what really solved the problem for me was this StackOverflow answer by Alex Martelli (Bless You Joel Spolsky for this idea and Bless all the people answering there!)

I was in a similar position code-wise : I had a unicode object that I wanted to convert tot utf-8, but I was using the “decode” function.

I actually should have been using the “encode to <codec>” function !

Duh ! Once you have a unicode object, you need to encode it into utf-8 or whatever encoding you need. I was using decode !!!

Oh. Well, perhaps my unicode fu is still not as good as it should be…

Small review of Zurb Foundation

It sounds more like a rock band, but it’s actually a tool for rapid prototyping in html and css, and a fairly easy way for a css-vapid guy like me to give my websites a basic ‘good look’ in about 5 minutes and still have some control over the design. Plus it’s very flexible, they aim to make it so that you can show your website on multiple different devices.

Foundation is a complete framework, and includes both the javascript, the css files and some instructions to get you going. And if you drop a mail, they are quick to respond, even if it is a stupid question like I asked.

I’ve been playing around with their open-source foundation download code, and I must admit their examples ‘click’ for me. For example to add a button, you specify a css class like this class=”nice blue radius button” which is almost human english ! This way I can focus on my python skills and still produce some nice-looking pages !

Getting XCode from the AppStore ? Don’t forget to install.

Yes, really, I totally missed this one. I was sure that I had XCode, that I had installed it from the AppStore.

Several frustrating moments finally led (via StackOverflow!) to the realisation that XCode is only downloaded, and still needs to be installed afterwards. So just go to your application folder and find the “install xcode” app and double-click it.

Duh (slaps forehead) !

Oh well, onwards with the show of getting mysql-python to install on 10.7.

Startup ideas I’m having.

The last few months I’ve been working on various projects, but I haven’t been blogging about them, mostly because I usually only post about either something amusing I found on the Interwebs or because whatever programming problems I’ve just solved merit some attention and I couldn’t readily find a solution for.

This blog has grown from being just a personal blog to one where lately quite a lot of the posts concern programming issues, interspersed with only some personal posts.

Currently I’m following quite a few entrepreneurs out there, and some of these blogs by entrepreneurs talk about start-ups and in the next blog post about a technical issue they had to deal with or solve. I quite like that combination. I think it interesting enough that I will start to blog about my quest to launch a start-up, and how I arrived at that idea.

So why I am looking to set up a start-up ?

Currently I’m working full-time as an Online Sales Manager, but more and more the technical side of things is being done by other people in other departments, less and less by me. Being somebody who loves IT and all the things around it, that leaves me with a serious technical itch to scratch. As pressure at work is sometimes heavy, I’ve started programming again during the evenings as a stress-release.  I figure I might ‘do’ something with this programming. Also, this answers my need to do ‘useful’ stuff.

In a large organization a lot of what you do are meetings, meetings, meetings to decide what to do. Then you make decisions which are challenged by committees. Finally after days or weeks or months of wrangling a compromise is reached. And then finally you or someone else can ‘do’ the necessary work. It’s not exactly instant coffee, if you know what I mean. A start-up of one means that I can focus on what I want and do something just about immediately (ahem. We’ll see).

So I’m thinking about setting up a start-up where I can scratch that programming itch and (perhaps) make some pocket money doing that.

I’ve done some soul-searching…

The questions I’ve been asking myself these last 6 months have been various :

  • What do I want to achieve ?
  • What do I really want to do ?
  • Just how far do I want to go with this ?
  • Do I really want or need a startup ?
  • What sort of startup ?
  • And what are my business ideas ?
  • Do I want to sell something ?
  • What exactly ?
  • How much time am I willing to spend on this in time and money ?
  • And so on…

In the end, I’ve made a few decisions and come to a conclusion.

Decision: I want do this as an independent.

I’m going to set myself up as an independent “on the side”. Even if I fail, if I don’t sell anything or things don’t work out, I want to know what it is to be your own boss, even in a limited way. At least I will have tried, and who knows, I might make make something worthwhile out of it, learn from the experience. I hope to set up something small that can grow over the years.

Decision: Work with the technical strengths I have or can readily acquire.

I have to be realistic. I’ve made a few websites over the past few years, for me or for friends of mine, but I’ve realised that I’m not a real websitedesigner and probably never will be one. I’m no big Photoshop designer that can create a beautiful design from scratch and cut up the psd in elements and then code them in html. I love the user experience of a well-designed site, but have no huge creativity when it comes to designing one myself beyond making it functional and error-free.

I’m more interested in the back-end of the web systems, how things work. Sure, it gives me satisfaction to spruce up a website with JavaScript (JQuery-ui rulez because it’s so easy to make a nice site with it), putting up the layout and such, but I get an even bigger kick out of setting up a back-end database and writing the functions that allow you to search it. Making it work, puzzling out the different ways you can access content. Interfacing it with other content.

A combination of HTML, JQuery, Flex and Python, all of which I know to varying degrees allows me to do both the front-end and the back-end of a website in such a way that the result looks reasonably competent.

  • HTML and JQuery for the front-end
  • Flex for the display of tables, graphs and complex user interface parts
  • Python for database connectivity and back-end functions that the front-end parts call.

Web hosting providers that provide Python are currently not that much in evidence, but there are more and more out there. I myself use WebFaction, which I can heartily recommend for their quick answers, nice admin interface and reasonable prices.

That is the base functionality, how to get things done. But that is only a means to an end.

Decision: How much time do I want to invest  in it ?

I’m working a full-time job. Do I want to go all-out, quit my job, or do I want to do this part time ? And am I sure that I can control how much time I invest in it ?

After weighing pro’s and contras I’ve decided to do this low-key but long-term. I still want to see my family, not be off to meet some client every evening. I want to build this up over the years.

My main goal, after all, is to scratch my programming itch and make what I create ‘useful’ to other people. So no website design, no consultancy (at least not at first), no excel sheet programming. No individual programming stuff for one particular client (exceptions may happen). I am gonna make things more than one person / company can use. Probably sell them as a service or downloadable program.

And as an entrepreneur I respect told me recently: to keep your costs low, make it yourself. Own it. Don’t sell stuff someone else made if you can create it yourself.

He also told me another golden rule: if you want to do this you  full-time you must sell something people want to buy. This seems to be evident, but it’s not. In fact, I’m not sure that I’m going to be doing that. One more reason to start up on the side, testing the waters so to speak.

Decision: What am I going to sell ?

After deciding on limiting my time used for it, I have narrowed the choices down. So I’m selling software or services via a little webshop. What sort of software service ? I’ve decided I’m going to sell tools, tools that I myself think I need. After all, if I can think of uses for those tools, perhaps other can use them as well ? The first one is a social media tool, to keep track of stuff on Twitter. There are already several tools out, but I am not out to corner the market, I out to learn stuff and see if what I make is useful to other people.

Conclusion: I’m doing this. This year.

I’m somebody who needs time to adjust to new stuff. I take my time researching, sometimes too much so. It’s time to start doing.

I’ll update on this in the coming months with how it goes…