Tidepools is Mobile Ready!
Blog Post
July 19, 2013
The Tidepools team at the Open Technology Institute just introduced a new mobile version of Tidepools (Beta 0.3), featuring an overhauled interface and code base at the Allied Media Conference in Detroit. This Tidepools instance helped attendees navigate and document the conference with ease. Read more about OTI at AMC here and about the Commotion Wireless mesh network here.
Visitors to the web app initially encountered a list of Conference Sessions in progress at that moment. Quick filter buttons let attendees see which sessions were “Happening Soon,” “Happening that Day,” and “All Sessions” over the three day conference. Attendees could also search session descriptions and locations.
Each Session Card in the list included a short description and two buttons. The first button, when selected, listed all tweets that include #AMC2013, the main conference hashtag, and the specific session’s (e.g. #Discotech). The second button showed the session’s location on the conference map, helping attendees navigate to the correct conference building and room.
Clicking on a Session Card itself lead to a session-specific page, which lists further details, session-specific tweets, and an embedded etherpad for collaborative note-taking.
Selecting “Talk” in the navigation bar led attendees to the latest tweets that included #AMC2013. The Talk stream automatically displayed media for tweets that included pictures (Twitpic, Instagram, Tumblr), videos (Youtube, Vimeo), and Vines. Participants could search through or click any hashtag to see all tweets that included that hashtag in the tweet.
Selecting Map in the navigation bar lead to a full view of the conference map, listing map markers where current sessions were taking place. The design of the conference map was modeled on Nina Bianchi and The Work Department’s style guide for the 2013 Allied Media Conference.
A common design feature currently used in web apps is a hidden menu for accomplishing quick navigation or communication tasks. We’ve introduced such a slide-out feature into Tidepools Mobile, which, for the AMC instance, showed all Sessions currently happening. If an attendee was on another page, they could easily switch to a live session. In the future, this slide-out menu will be used for quick Tidepools actions, like adding new Comments, new Landmarks/Events, and accessing Tidepools local Apps, such as “Stop & Frisk” or “Where’s the B61 Bus?”
What’s going on beneath the surface?
Tidepools was rebuilt from the ground up, on the front- and back-end, to be a more dynamic and flexible platform. The new version offers plug and play customization, allowing you to add your own APIs into the Tidepools ecosystem. The front end, or user-facing features, were coded primarily in Angular.js, a Javascript framework optimized for single-page mobile web apps, with Leaflet.js integrated for mapping support.
For the back-end, we used Node.js, Express, and MongoDB for local database storage. This combination of front-end and back-end tools is a new technology stack, referred to as a MEAN stack - Mongo, Express, Angular, and Node. This stack is gaining in popularity for web-based applications as it is a purely Javascript / JSON based solution. There was a definite joy in re-using code in Angular from Node, simply by copying and pasting! :)
We used Node in three parallel ways: a server for the Tidepools application, a script pulling live conference session data from the AMPTalk API - provided by AMP, and a script collecting the live API stream of #AMC2013 tweets. After Node grabbed the data streams, we used Mongoose.js to re-map the data into the Tidepools Landmark, Event and Comment data schema and stored in MongoDB.
The code is available here: https://github.com/opentechinstitute/Tidepools-Mobile
Reflection
Overall, AMC users were very positive and said that the application and new interface were relevant, useful and easy to use. A major relief for some users was that the first page showed what sessions were happening “now,” instead of having to parse through filter menus on the AMPTalk website to find out what was currently happening. Others found it wonderful to simply jump to a session page and click on the etherpad button to access the live session notes.
We learned a few lessons along the way. First, it is currently difficult to run Node.js alongside Apache: it requires relatively intricate proxy setups which are not well documented. This complication led to a last minute migration over to a seperate server, using http://tidepools.co/amc as a redirect page to the remote IP address. The etherpad integration on small mobile devices is not optimally usable. We implemented this as a modal dialog, but ideally, there would be a mobile version of etherpad that resizes appropriately and provides users access to the etherpad menus and settings. Finally, going forward we want to prompt users to add a bookmark to the Tidepools website to their mobile device’s home screen, to make it easier for users to come back to the application, increasing the number of returning visitors.
Using a combination of Angular.js and Express.js made it much easier to develop dynamic web pages for each Session, Talk #Hashtag, and Map Location. Many of the dynamic features that we developed in this new version line up directly with the needs identified by the Digital Stewards in Red Hook, Brooklyn, a group of young adults learning to plan, organize, install and maintain wireless networks and local applications. The Digital Stewards have identified that they want a tool where businesses or places, events and jobs will have their own web pages that are tied to a location on the Red Hook map. The application will be made available on the Red Hook Mesh Network splash page and neighborhood website. Over the next few weeks, we are working on integrating this new mobile interface into the original Tidepools system, to allow users to work with Tidepools from either a mobile device or a desktop computer.