the node.js and postgis backend for seatmate

So far I haven't spent much development time working on the backend for seatMate.  I mentioned that I was using node.js to serve up the static files on my development server and nodejitsu.  The backend also saves and retrieves comments from a list stored in redis.

backend architecture choices, async events with node.js

The great thing about node and redis is that they support asynchronous operations in the same way that javascript handles events in the browser.  To make things even more responsive, I'm using socket.io to pass an object to a method on the server, rather than using an http post when the client submits a comment .  socket.io acts like a websocket, but degrades to flash sockets, long polling and other less fancy methods to support all browsers including IE6. In a previous post, I wrote more about node and redis.

pushing events back to the browser with socket.io

The benefit to using socket.io and node  is that I can trigger events in the browser from the server without doing any polling from the client.  This will be handy when it comes to the chat and instant messaging components, which update in real time.  When a user sends a message, the backend can immediately relay it to any other device connected to the channel causing it to appear in their browser.

using redis to store and relay information

redis is the other technology I added to the project.  It is one of the new nosql datastores, but it also supports other features that will make it useful here.  redis is a data structure storage engine and can handle strings, hashes, sets and sorted sets.  It also has a publisher/subscriber functionality that makes it a snap to implement a messaging queue. For the comment view, I'm pushing incoming messages into a redis list and retrieving the last 15 messages when rendering the comment view.  All these operations are extremely fast, even if the list gets huge.  No need to talk about the big o, but it will stay fast at scale.

performing spatial queries on a geodatabase with postgis

The next step is to actually tie the comments to specific bus routes and busses.  For the contest I have to use TriMet data.  The stops, routes, and possibly the real time transit feeds are exactly what I need.  To start matching up users with routes, I need to be able to select the route that is closest to the location of the the rider. It would be trivial to perform this sort of operation with points, although scaling might get difficult.  Calculating the distance to a line from a point is an easy to do with postgis, the geodatabase extension to postgresql.  My next step is to create a method that queries postgis for routes that are closest to the location of the device as reported by the geolocation api. In cases where the user is on a bus that travels the same path as our routes this operation will return multiple rows and, I will have to use other data to disambiguate the results.  Just grabbing the closest route is good enough for now, though.

first draft of seatMate interface using sencha touch

creating a mobile web app from a mockup

I've started on the interface using sencha touch, a mobile web framework.  Sencha Touch is part of the ExtJS family of javascript libraries.  I've hard good things about sencha and GeoExt, so I'm excited to give it a shot.  The style is similar to how we used to develop web apps at the company I work for, but we've since moved on to using knockout.js.

the sencha touch approach

Sencha lets you build up a mobile web frontend programmatically rather than starting from existing html.  You create objects that represent forms, tabs, carousels and everything else you need to develop a smartphone or tablet app.  Sencha produces html5 and supports many of the animations and transitions that are used in native iOS and android apps. I've made good progress and sencha seems robust and flexible.  My main concern is that the workflow is clumsy.  Rather than writing html to create the interface, you describe it in javascript.  I would rather create the page freely and then add behavior. Using code inspired by several of the online demos, I've put together a sencha app with an initial stab at a chat/comment view.  I have a comment entry field and a submit button as well as a table of comments.  The other tabs will follow the same general pattern, but aren't built yet.

 serving the static html, css and js files

Since the files are static html I can view them directly in a browser without spending time setting up a webserver.  However, I'm using a snippet of javascript for node.js that serves up the contents of the static directory on port 8000.  I've pushed this version to the repo and deployed it to nodejitsu.

deployed to hosting provider

You can check it out at http://seatmate.nodejitsu.com/ first sencha touch mockup                                               I've also attached a few more mockups of the other screens.  They are in landscape and portrait mode.    

trimet app contest entry: seatMate

2012 TriMet App Contest

I've decided to compete in the TriMet App Contest.  The deadline is February 1st, 2012, and I am starting this weekend.  The app must use TriMet and CivicApps open datasets and be released as an open source project. Rather than keeping my app under wraps until the end date, I've decided to do all the design and development in public.  I hope the other entrants will use my code and methods to develop their own cool apps.

My App: seatMate

For this contest I will build a chat and messaging app for TriMet passengers who are riding the same bus or route.  It will be targeted at riders with tablets and smartphones and use the TriMet route and arrival data to enable social interactions between passengers.

Leave a message/comments

Passengers will be able to leave message or comments that will be visible to other people riding the same bus or route.  They could be used for lost and found or "missed connection" type communication.  They will be public, archived and searchable.

Chat

There will also be the option of partaking in a chatroom or private instant messaging with other people riding the same bus or route.  There should be some expectation of privacy/anonymity for users.

Flirting

The third element of the app will be to facilitate romantic interaction between riders that opt in.  People that are interested in meeting other passengers can activate a "flirt" mode, that will enable private messaging between interested parties.  Users will only be identified by age/gender/sexual preference.

Requirements

seatMate will  be a mobile html5/javascript web application and also available as a native Android/iOS app from the app stores.  It should:
  • be fast and interactive
  • use geolocation to determine route information
  • have push notifications or sms
  • allow image uploading/sharing
  • deployable to cloud hosting (ideally at the freemium level)

Links

repo

The contest specifies that the app must be available as a public repository.  I'll be using git and host the code on github.  This will allow for public issue tracking and enable anyone to fork the repo and submit code through github pull requests. https://github.com/eknuth/seatMate

trello

For project management, I'll be keeping big picture task information in Fog Creek's trello app.  It'll be public and allow voting and comments. https://trello.com/board/seatmate/4f081075ffd434f16d04b1bc

blog

I will be blogging about the process on this site using the seatMate tag. http://iknuth.com/tag/seatMate/ Feel free to follow along and participate as much as you like.  I'm hoping that this will be a fun month!