Codiqa is the fastest mobile prototyping tool around. Learn more
16 Flares 16 Flares ×

This Saturday, open-government “unconference” CityCamp is coming to Madison, WI.  The CityCamp events encourage local government innovation through software development, open data initiatives, and other community-powered projects.

We were asked to present Codiqa at CityCamp Madison because many local developers have found it really great for making civic mobile web apps. I’ve been meaning to build an app with Firebase as the backend and jQuery Mobile as the frontend, and it seemed like a great chance to contribute something and show off tools to get cool stuff made faster.

James Tamplin, co-founder of Firebase and fellow UW-Madison alum helped me get integrated with Firebase and answered some questions I had while building this. He’s also a great resource for startup advice.

The app: OpenCount

Finding open spots in public places can be a pain. Maybe you want to know if a desk is open at a nearby co-working space, or whether there is any room in your nearby coffee shop for getting some work done. It sucks making a schlep only to find there’s no room for you at your destination.

Enter OpenCount: the public resource tracking system. A user can submit a new resource along with the maximum capacity of that resource. The resource is tagged so the user can update it again later (a really bad security model but it works for this example). Resources show up on the public stream. OpenCount is the brainchild of Preston Austin, local entrepreneur and open government developer, who shared the idea with us and helped demonstrate real use cases in the community.

Implementation

Models

This app just uses the concept of a “resource” as the main model. A resource takes a name, a unique tag, a maximum number of available slots, and a current count of available slots.

User Interface

I built the interface for OpenCount with my product Codiqa. Codiqa makes it really easy to build mobile web apps with jQuery Mobile. It doesn’t have any coding or web service features built in yet, it’s just for frontend development. Even so, it was easy to put together a linked app and get the HTML for it. Here is the quick app I built and then exported: http://civicmadison.codiqa.com/view/dd8a8276

Here is a screenshot of me building one of the pages:

 

Backend

For OpenCount, we need to be able to save and edit resources on the fly. Any new resources should show up without having to reload the app, and multiple users should be able to edit without any conflicts.

With Firebase, that’s all just built in. We grab “references” to objects in our Firebase, and we listen for various reference events, such as a new child being added to the reference or one being modified. The awesome thing is that any client listening will automatically receive the same message.  It’s intuitive to think of managing Firebase references as simply interacting with a JSON object.

Here is an example of us creating a new resource when the user fills out a form:

We need to listen for events for newly created and modified references. Here we bind to the firebase events for the resources reference:

Then, if any resource is ever modified or added from anywhere in the universe, we will know about it.

Demo

You can view the live running version on your phone or desktop by visiting http://codiqa.com/static/opencount/app/

The code is all open source (MIT) and you can fork it here: https://github.com/mlynch/opencount

Conclusion

Modern development tools make it extremely easy to put together working applications with fairly complex parts. This is a benefit for open government and civic development because often work done by the community is volunteer powered, with limited time and financial resources.

We hope OpenCount inspires you to hack together something useful for the community. If you do, we’d love to hear about it.

Max

Hi, I'm Max, Co-founder of Codiqa, the easiest way to build jQuery Mobile prototypes. I'd love to talk with you: follow me!

More Posts

16 Flares Buffer 1 Twitter 11 Facebook 2 Google+ 2 LinkedIn 0 16 Flares ×
Share →
Buffer