Two weeks ago to this day, we at Green Gorilla Apps finished our weekly sprint early. We held an emergency meeting at a local pub to determine the next steps. The consensus was that we should set ourselves a challenge of building a simple app that could later be turned into a product in the remaining three hours of the day. The result of that afternoon is 8-Bit Weather and this is how we built it.
Keep it simple
The concept of 8-Bit Weather is easy to grasp. A little 8-bit man (“Al”) shows you what clothes to wear, depending on the weather in your location. Instead of scanning through the day’s forecast, trying to decide whether to take your umbrella or to put the shorts on, you can take one look at 8-bit Al and follow his lead.
So that’s the basic concept. However, one of the dangers that we find with discussing an idea for an app or product is overcomplicating it from the very beginning. You need to decide what features should be in the first version and rigorously stick to the plan. At this stage, we didn’t know whether anyone would like the idea, so we kept it simple in an attempt to get some validation on the concept.
We had the idea for an iOS/Android app, but knew it was going to be a lot quicker to build a web version. Therefore, the mobile apps would have to wait. We also thought it would be nice to choose the time of day for the forecast, so you could see how Al changes his clothes as appropriate. But that would have to wait too, as this was all about producing an MVP.
The brief was this: at the end of the day, we wanted Al to show the visitor whether to dress for hot, mild or cold weather, and to show whether it was raining (through the application of an umbrella). It should use geolocation to determine where the user was, and a suitable weather API to retrieve the information. It should provide a link to share to Twitter, which would post what Al is wearing.
We were ready to start building the app, and the task would be given to two developers, Jon and Kyle, and a designer, Ollie (who created all the fantastic “Al” images).
The Technology
The weather information was provided by Yahoo, using the jQuery plugin simpleWeather.js, which allowed us to serve the app as a static HTML page, with all the complexity handled in the user’s browser. We used AngularJS, our JavaScript framework of choice, to keep the logic and view separate. HTML5 geolocation gave us the ability to find the user’s approximate location and use it to retrieve the weather information. Finally, it was served using the excellent Nginx web server.
After building a simple skeleton for the site, we plugged in simpleWeather with geolocation. This worked first time, but we knew that some wouldn’t have the same experience. For example, what if your browser didn’t support geolocation? Well, that’s tough luck. But it was cases like this that we needed to handle, to at least present the user with a helpful message. Also, what happens if the weather API isn’t available, or times out? Error handling was critical, so it was addressed from the very beginning.
We used the temperature to determine which clothes Al should be wearing, which was a simple job. Ollie, our designer, created three images for cold, mild and hot (with plans to create more, to give better detail). We then simply swapped the image depending on which bracket the current temperature fell into.
However, it wasn’t that simple: at any of those temperatures it could be raining. At colder temperatures, it could also be snowing, hailing, raining frogs, etc., but in the interest of keeping it simple at this stage we just wanted to handle rain. So Ollie produced another three images with Al holding an umbrella. The weather API didn’t give us a definitive flag to say whether it was raining or not, so we used string matching on various status texts that were provided.
Finally, we added a few details to the presentation, created a Twitter link, and voilà! It was ready for release. We just added one more feature: Google Analytics, to allow us to track page activity. This also allowed us to add a dummy button saying “Download mobile app”, which would just display a message saying that it would be coming soon when clicked. This would fire off an event that we could see in Google Analytics, allowing us to see whether there was any interest in a mobile version before writing a single line of code.
The aftermath
We made 8-Bit Weather available to the world at the end of the day, and we’re pretty pleased with it. We’ve added a couple of things since its release (such as the ability to manually change your location), but it remains largely unchanged from the original concept.
The next stage is to spread the word! If you haven’t already, you can visit 8-Bit Weather at http://8bitweather.co. Spread the word, and click the button to download the mobile app if you’re interested — we’ll build it if we get enough clicks.
Thanks for reading, and remember: listen to 8-bit Al. He knows what he’s talking about.
