Category Archives: Code

Wine Cellar Mobile Starter Application with PhoneGap and Backbone.js

I ran across a great wine cellar management mobile app, created by Christophe Coenraets (@ccoenraets), a Technical Evangelist for Adobe.

His mobile app is a great walk through, showing you the power of building a cross platform mobile application using PhoneGap.

He builds the wine cellar management application using:

  • PhoneGap – An open source platform that allows you develop cross-platform Mobile applications using HTML and JavaScript. Specifically, it allows you to:
    • Package an HTML application as a native app on all the key mobile platforms (iOS, Android, BlackBerry, Windows Phone, WebOS, Symbian, Bada).
    • Access your device capabilities (Camera, GPS, database, accelerometer, etc) using a cross-platform JavaScript API.
  • Backbone.js – A framework to give structure to your web application regardless of where it is running: in a traditional Web Browser, or as an app packaged with PhoneGap.

His implementation is a simple consumer application, allowing you to look for wines in your Wine Cellar, meant to be a tutorial demonstrating how to create, update, delete items in a mobile app–a great how-to, that you can apply to almost anything a user would collect.

He has posted the source code for the mobile application to a GitHub repository, complete with an iOS, Xcode project, and an Android Eclipse project.

I like finding starter kits like this that walk developers through building web and mobile applications. I’m building some of these here at CityGrid, and I will post my projects as well as other cool ones like Christophe Coenraets, here on the blog when find them.

Using Twitter Bootstrap for your Local Web Application

I’m a web application developer. I can efficiently build web applications, but when it comes to the UI, I know what looks good, but I struggle to actually implement a consistent look and feel.

Usually in a weekend I can throw together a pretty complete app, but when I try to make it look good it can take weeks, and often even kills a project before it get going.

This is why I started using Twitter Bootstrap for all my web applications and prototypes. Twitter Bootstrap is a “simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions”.

In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Inconsistencies among the individual applications made it difficult to scale and maintain them. Bootstrap began as an answer to these challenges and quickly accelerated during Twitter’s first Hackweek. By the end of Hackweek, they had reached a stable version that engineers could use across the company.

With the help and feedback of many engineers, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns. Providing a collection of CSS and HTML conventions, employing the latest browser techniques to deliver typography, forms, buttons, tables, grids, navigation and many of the common elements you need to deliver a sharp looking web application.

I used Twitter Bootstrap to deploy Hyp3rL0cal, my first set of local web app prototypes in PHP, Python and Ruby, built using the CityGrid Places and Advertising API. I’ve rolled up these prototypes, complete with Twitter Bootstrap as Amazon EC2 AMIs, so anyone can quickly deploy a local directory that looks good.

I highly recommend using Twitter Bootstrap in all your projects, it allows you to focus on what you do best, delivering the next generation of local directory or guide web applications.

CityGrid PHP Amazon EC2 AMI for Rapid Local Web App Development

I have updated our PHP Amazon AMI after using it at a hackathon last week.  If you haven’t checked out our PHP AMI yet, it is a Fedora Linux, Apache and PHP Amazon Machine Image (AMI) we created for building local web apps around the CityGrid APIs.

I’ve organized all php code libraries, samples, prototypes and starter kits on a Linux server, and made a public Amazon EC2 AMI with it.

Currently I have the following projects and code libraries on the AMI:

  • Twitter Bootstrap - The open source UI library created by Twitter.
  • Local Directory - A basic local business directory that uses CityGrid APIs.
  • PHP Class and Samples - A PHP class for CityGrid places and advertising APIs with usage samples.
  • Twilio PHP Library - Official PHP Twilio REST API and TwiML library

The Amazon Machine Image is - ami-d3f928ba and is available to the public.

The server is pre-configured with the following:

  • Linux (Fedora)
  • Web Server (Apache)
  • FTP (VSFTP)
  • MysQL

The root user is - ec2-user

The FTP user is:

  • u: hyp3r
  • p: l0cal

This AMI is a work in progress, I will update the image as I can make time. If you have questions you can reach me @kinlane or @citygridapiteam.