Create your own one hour apps!

A 5 minute read written by Jordan January 3, 2013

bow tie

In a flash of inspiration Graeme and myself came up with an idea for a tiny webapp. Most of Yellow Pencil is active on Instagram. We put out #YPFancyFriday in under an hour, and wanted to share with the world how we did such a thing.

Ruby: Not just a type of grapefruit.

Ruby is a programming language from across the pond in Japan. It has an interesting history, and has really gained popularity the last few years with the Rails framework.

Several ruby libraries were used to put this app together:

  • Sinatra

    http://www.sinatrarb.com/
    Named after Ol' Blue Eyes himself, Sinatra is a lightweight ruby framework for building web applications.

  • Instagram-ruby-gem

    https://github.com/Instagram/instagram-ruby-gem
    This small library published by Instagram allows easy interaction with the Instagram API.

  • HAML

    http://haml.info
    So much prettier than HTML, HAML is my absolute favorite markup language on earth (Not that I have an opinion or anything...). You'll see later on how much cleaner our application code will be by using HAML.

    </ul>

    Although our blog post byline had some other unintelligible terms mentioned, we'll get to them a little bit later.

    Let's get started!

    First, you want to make sure that you have Ruby installed on your computer. Recent installations of OSX have it baked right in, so you're ahead of the curve. If you're on Windows, the Ruby Website will have instructions for you.

    Ruby utilizes a package system aptly called "ruby gems". To manage our gems, we'll be using a tool called Bundler. Follow the instructions on the Bundler site to get it installed.

    We're gonna start off by making a new folder on our computer. In our case, it's going to be called "fancyfriday":

    fancy friday folder In case you didn't know what a folder is

    Inside this folder, we're going to create a couple files:

    Gemfile: source 'https://rubygems.org' gem 'sinatra' gem 'thin' gem 'json' gem 'instagram' gem 'haml'

    This file tells Bundler what gems need to be installed to make this whole operation work.

    Before we write the application itself, we need to set up an API key within our instagram account.

    Log in to Instagram.com, and visit http://instagram.com/developer/. Go through the steps of registering our application. What you need from this process is a Client ID and Client Secret. Since our application doesn't actually tie itself to anyone's instagram account, we can put in a dummy URI.

    Now that we've hooked ourselves up with some credentials, the next file we'll create is the application itself: fancyfriday.rb

    require 'rubygems' require 'sinatra' require 'instagram' require 'bundler' require 'haml' Bundler.require Instagram.configure do |config| config.client_id = "d487dd0b55dfcacdd920ccbdaeafa351" config.client_secret = "a8f6830bce790a8a67fc2e84e12093ba" end get "/" do @photos = Instagram.tag_recent_media('ypfancyfriday') haml :index end

    The first 5 lines are requiring the libraries that we'll use in this app. Bundler.require ensures that we use Bundler as the source of these gems.

    Our Instagram.configure block allows us to show off our street cred and will allow us to actually use the Instagram API. Make sure you put in the values you got out of our last step!

    You can see that we're using Sinatra to handle requests to our app. Our app only does one thing: Any GET request to the root of our app will show off pictures on Instagram tagged with #ypfancyfriday.

    What's haml :index you ask? This statement calls HAML to render a template called index.

    Inside our fancyfriday folder (pictured previously), we need to create a folder called "views". I'll omit the screenshot as I'm hoping you know what a folder looks like by now.

    We're going to create a file called "index.haml"

    !!! %html %head %title Yellow Pencil Fancy Friday %link(rel="stylesheet" href="css/styles.css") %body %header{:role => "banner"} %h1 #ypfancyfriday %h2 at Yellow Pencil -@photos.data.each do |datum| .photo %img{:src => datum.images.standard_resolution.url} -if datum.caption.text != "#ypfancyfriday" .caption %p=datum.caption.text

    The part we want to look at starts at -@photos.data.each do |datum|. This little statement looks through the @photos variable we set back in our previous file, and spits out some nice clean markup. We only display the image's caption if there's something in there beyond our #ypfancyfriday tag. If you're curious on the syntax in this file, I highly recommend you go visit haml.info again. Writing regular HTML will be forever ruined for you. (Sorry in advance!)

    Now that we've got our little app built, it's time to test it out! In the interest of keeping this blog post short, I've left out the images and css we dropped in as well (Thanks Graeme!). Those types of things belong in a folder called ‘public'.

    In your terminal, we'll want to run a few commands:

    $ bundle install

    This will install all the required gems. When you see green text stating "Your bundle is complete!" we're ready to move on.

    Running our application is as simple as the following command, thanks to our install of the Thin webserver we included earlier:

    $ ruby fancyfriday.rb

    You'll see a few lines fly by, and then ">> Listening on 0.0.0.0:4567, CTRL+C to stop".

    Fire open the web browser of your choice, and browse on over to http://localhost:4567. If everything went well, you'll see our beautiful application! We're assuming at this point that someone with a public Instagram profile has posted a photo with our tag.

    If you make any change to your code you can send an interrupt signal to the web server by pressing Ctrl-C. Restart the application using the same command above.

    But how do I show people?

    Now that we've got it up and running locally, chances are you want to put this up on the internet for all to revel in!

    There's a whole pile of different ways to put this online, but we're going to be using Heroku.

    The cloud isn't just a buzzword anymore

    Heroku has changed my life as a developer. I can deploy applications in minutes, and it costs me almost nothing! Deploying via Heroku is probably another blog post unto itself, as it's integrated with git. If you know what git is you should have no problem getting it up and running. The one thing I want to note: to get our app on Heroku, we'll need to have a config.ru file.

    require './fancyfriday' run Sinatra::Application

    This is a little set of instructions telling Heroku how we want our application to run. This is due to the Rack webserver interface; again, too technical for us to jump into at this point.

    You can see the Yellow Pencil Fancy Friday app here at http://ypfancyfriday.herokuapp.com.

    1 hour apps!

    Utilizing these open source libraries allows us to build fun apps in no time flat. I've built a couple of these while at Yellow Pencil. From utilities like content scrapers, or even more important apps like our Yellow Pencil Beer Tracker, the sky is the limit with these frameworks.