Introduction:

If you want to get your feet wet in actually creating an application that lives on the web, this is the guide you’re looking for. It will take you from start to finish and only assumes you already have an idea. The following tools will be covered:

• Sinatra
• Heroku
• Git & Github team workflow
• Bootstrap

If at any point you don’t understand what’s going on, I’m sorry, but I can’t help you. After all, this is only a loose guide. Our example application will be a simple search app that scrapes reddit.

Before we start:

When thinking about what to do next, or how to approach a problem/feature, keep in mind the following principles:

• single responsibility
• make it work, make it right, make it fast
• form follows function

We are building a single responsibility app. Sure you can think about features and fancy stuff to add to it, but right now our goal is to deploy something.

Basic outline of the process:

1. Think about what your app will do
2. Write down your conclusions
3. Set up the initial file structure
4. Start working
5. Finishing touches and troubleshooting
6. Deploy to Heroku

Let’s get into it!

1. Think about what your app will do

Your guiding principles here should be the single responsibility principle and working from the outside in. This means you should first write down a general list of things that your app has to do. In our case:

1
2
3
4

search reddit/ELI5
choose best match
choose best answer
display best three answers

As you can see, this is quite simple. During this process, questions like “Should I use an API or just crawl?” have to be addressed and answered. Again, keep in mind that you want to make it work first and foremost. Don’t obsess with API’s or gems that confuse you if you already have a tool you know how to use.

2. Write down your conclusions:

Now put those answers to paper and be a little more precise. Start looking at some of the details but don’t get caught up in them just yet.

1
2
3
4
5

get user input
search http://www.reddit.com/r/explainlikeimfive/search?q=  user.input  &restrict_sr=on&sort=relevance&t=all
open first search result with title explained
get the first answer with the highest upvotes
display that on our awesome web app

At this point you should already have a more concise idea of how you’re going to do things and you can already start thinking about division of labor.

Who should build the backend? Who should do the crawling? Who should set up the repo? Who should style and create your views? Who writes tests?

After those questions are answered, it’s finally time to get your hands dirty!

3. Set up the initial file structure:

At this point you should know enough about what your app has to do to be able to quickly set up your file structure and require your dependencies.

Don’t forget to git init a new repo and set up a remote so your teammates can fork it.

Keep in mind that when we want to deploy to Heroku later, we have to use Bundler and a Gemfile. A typical structure could look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

root/
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
│ ├── controllers
│ │ └── app_controller.rb
│ └── views
│   └── layout.erb
│   └── index.erb
├── config
│ └── environment.rb
├── config.ru
├── public
│ └── stylesheets
└── spec
├── controllers
├── features
└── spec_helper.rb

Your Gemfile could look like this:

1
2
3
4
5
6
7
8
9
10
11

source 'http://rubygems.org'

gem 'sinatra'
gem 'pry'
gem 'shotgun'
gem 'rake'
gem 'rspec'
gem 'thin'
gem 'nokogiri'
gem 'require_all'
gem 'rack-test'

Your environment.rb file could look like this:

1
2
3
4
5
6

require 'bundler/setup'
Bundler.require
require 'open-uri'

Dir[File.join(File.dirname(__FILE__), "../app/controllers", "*.rb")].each {|f| require f}
Dir[File.join(File.dirname(__FILE__), "../app/models", "*.rb")].each {|f| require f}

Your config.ru has to look something like this. Later we’ll get to why it has to.

1
2
3

require './config/environment.rb'
use Rack::Static, :urls => ['/css', '/js'], :root => 'public'
run AppController

Download Bootstrap and put it in it’s rightful place

4. Start working

At this point you should have pushed the initial setup of files and dependencies to github so that your teammates can fork your repo and get started on their own respective branches/features.

A few tips for using git correctly:

• Everyone in the team should work on feature branches
• Once a feature branch is developed:
  • rebase master into it
  • merge the branch into master (switch to branch master before merging)
  • push to your remote repository
  • submit a pull request to upstream master from github
• You should commit often and leave precise comments

Talk to each other every now and then to make sure the different parts of your app will also be able to talk to each other later.

How to use Bootstrap in the real world

CSS has many many different selectors and ways to style your websites, ok! Just stick with a neat little framework called google&bootstrap. If – like me – you don’t know ____ about bootstrap and css and all that stuff, all you need to do is have these two tabs open:

Bootstrap Documentation&Google

The bootstrap documentation will give a few good ideas on elements and their styles, but can be overwhelming. Lucky for us, bootstrap is a popular framework and you can find a lot of your answers on the web.

Just google what you want to do, then paste whatever bootstrap html you can find, and see what it looks like in the browser. Keep what you like and get rid of what you don’t like. Rinse and repeat, it’s really that simple.

5. Finishing touches and troubleshooting

After everyone has submitted their pull requests and you’ve merged everything into master, it is time to put the finishing touches on your app. This means fixing little bugs or formatting issues and making sure all your files are required properly.

This should really not take too long since hopefully, you and your teammates were talking to each other, and stuck to the agreed formats.

Keep in mind that rackup will only work correctly with your styles if you tell it where to look for your css directory. You can do that in the config.ru like above.

Alternatively you could use shotgun which will work just fine, but avoiding this will cause problems with Heroku later.

6. Deploy to Heroku

If you’ve set up your Gemfile and your config.ru correctly, deploying to Heroku should be a breeze.

1. Download the Heroku Toolbelt
2. Sign up for Heroku
3. From your master branch run
   • git remote add heroku <address>
   • git push heroku master
4. Watch it compile and copy the resulting link into the browser to see your web app live!

Yes, it is really that simple. If you want to change the name of your Heroku app because blazing-mist-4652 isn’t up your alley, do it from the command line using heroku apps:rename newname.

If you run into problems with your stylesheets, it is most likely for the same reasons rackup didn’t work. Heroku can’t find them. Take a look at the config.ru to change that.

Enjoy shipping your app

www.get-an-answer.com

Nice job on that app. From here you can feel free to add more functionality beyond the bare basics to make your app much sophisticated.