Build your first backend

8 min readMay 5, 2015

Don’t know anything? That’s AWESOME. This is a soft intro to backend development for those who want to do cool things fast.

This tutorial was originally part of Bitcamp 2015's Scout Trail.

I ❤ bitcamp.

Intro

We’ll get you up and hacking in no time. This tutorial has:

A little setup
Some HTML and CSS
Easy Backend with Sinatra. Smooooooth.

We’ll point you to other resources to help you keep moving. Get in touch if you get stuck, or reach out to the internet — everyone wants to help.

We’re gonna go super fast, and you won’t understand everything yet. That’s how it should be, so don’t worry! Bento has great free resources for anyone learning web development. If you want to really learn this stuff, it’ll take a few hundred hours of working on projects. But that’s no reason you can’t build something awesome right now!

Instead of spending a ton of time on installation and setup, we’ll use Cloud9.

https://c9.io

Create an account on Cloud9 + a new custom workspace

If you want to develop on your machine or a dev server (aws, digital ocean) that’s awesome — you’re ahead of the game. If you’ve got git and ruby already, then everything should just work. If none of that made sense, Cloud9 is pretty painless, so use it.

2. Get the files.

From the command line — either from a terminal on your computer or a terminal on Cloud9 (click the plus icon and select “new terminal”), copy/paste the following, and hit ‘enter’.

git clone 'https://github.com/rrcobb/bitcamp-scout-trail.git'

This command uses ‘git’ to get the files we’ll work with from the repository on github. We’ll actually write all the files from scratch as we go through the tutorial, but they are nice as a reference. Learn git somewhere else, some other time.

Follow along as we create a super-simple web app!

HTML

Hypertext Markup Language. HTML files are what your browser understands, interprets, and shows. If you want someone else to be able to see your thing on the internet, you have to set something up that sends them HTML files.

There are lots of ways to do that. We’ll use two this tutorial, one for static pages, and one for pages with dynamic content. You’ll see what that means in a few minutes, when we get to Sinatra. For now, let’s dive into HTML and CSS.

<tag attribute=”value”>content</tag>

This is how HTML is structured. The browser understands this. If something is wrong, the browser won’t get it.

Look at the index.html file from the ones you downloaded, and copy that structure. It’ll take a while to understand what all the terms mean, and you can learn more about it later. For now, just stick to the structure provided, then play with it and test it when you have time.

CSS

Cascading Style Sheets. Your HTML file will link to one or more CSS files. CSS tells the browser how your html should look. It’s cool.

Take a glance at the main.css file in the intro folder. That’s the basic structure of CSS. If something isn’t working, most often it is a typo or syntax issue. Check out CSS tutorials to get a bigger sense of what is possible.

selector { property: value }

This is how CSS is structured. Selection cascades to the most specific selector from the most general. The defaults are not that great, so feel good about overriding them. Positioning on the page is complicated and frustrating, even for experienced devs.

There are a billion selectors and properties out there; we’ll use a few just to get a taste. Look them up or ask someone if you are trying to do something specific.

Lots of websites also use boilerplate or framework CSS to get the job done. If you include bootstrap in addition to your own CSS, it’ll be prettier fast.

Sinatra

Sinatra is a very simple backend web framework. That means you write a tiny bit of code, and it does most of the work to send files to people who look at your site. It can do anything that the big frameworks (Rails, Django, Express) can do, like databases and MVC structure — but since all that sounds like gibberish right now, don’t worry about it too much.

What you should know is that Sinatra can do more than send your html and css files exactly as you made them — it can change things based on who is using your site, their input, or other data. This makes it super for hackathons — you can execute some code, and put the results up as a webpage.

Setup

If you git clone’d the files earlier, you don’t need to make these files (steps 1 and 3) — they’re already there! Just use steps 2 and 4.

Create a file named Gemfile, with the text:

source 'https://rubygems.org'gem 'sinatra'

2. Then, from the Terminal, type: bundle install

3. Make a file named app.rb, and write:

require 'sinatra'get '/' do"Hello, world"end

4. To run the server, from the terminal:

ruby app.rb -p $PORT -o $IP

If you get an error saying the port is used, free ports with:

kill -9 $(lsof -i:$PORT -t)

Don’t worry too much about what this does, or go learn about it.

Backend Basics

Programming is hard. It takes lots of time to learn. We’ll show you some stuff you can get working right now. If you’ve programmed before, it still might not make sense, because Ruby and Sinatra may be new to you.

ruby files end with .rb. A ruby file that uses sinatra (require ‘sinatra’) will respond to certain commands like ‘get’. Learn more about Sinatra.

Otherwise, when you run that script (ruby script.rb), it will run the rest of your program normally — if you write another ruby program, you can serve the results on a webpage, if you like.

Ruby is a great language for beginners. Learn more Ruby.

Routes.

Sinatra is doing all kinds of complicated heavy lifting underneath. You just have to say ‘get’ and the pattern you want to match, and then return a string. It looks like this:

# Ruby ignores comments after a ‘#’get '/' do # matches the pattern (in quotes) after the 'get'"Hello, world" # do things between 'do' and 'end'end # return a string before 'end'

The string you return will get sent as the html response to that route.

Anatomy of url:

We’re going to be matching lots of urls to routes. Let’s look deeper at https://api.umd.io/v0/courses?semester=201408

https:// — the first letters define the protocol your browser will use. http, ftp, file — don’t worry too much about this part, just know that it will be there.

api. — the subdomain. This indicates a ‘region’ of a site. Don’t worry too much about this, just know that you can set them up on your site if you want. www is a common subdomain (this all has to do with A Records and CNAMEs and DNS, and eventually you might want to know all about it. This is a fuzzy outline.)

umd. — the domain. This is the ‘name’ of the site. You can buy your own for anywhere between $5 and $500000, or get a .me for free!

io — this is the top level domain or tld. ‘com’, ‘org’, ‘gov’, and ‘edu’ are all pretty common, now there are tons more (like ‘io’).

/v0/courses — the path or page. This is what your Sinatra routes will match. They often correspond to folders or pages within pages — if you have a big site, it’s a good idea to think hard about the design of your urls. Nice urls are nice!

?semester=201408 — the query or parameters. This is data that your server can use if it wants, but usually doesn’t need to be there. People will rarely type this into the bar, it’s more to pass data around within the site or something like that.

Using Sinatra for static files

Sinatra will automatically serve files if they are in a folder named ‘public’ in the same directory as your app.rb file. So, sweet. If there is a file named ‘resume.pdf’ in the public folder, directing the browser to yoursite/resume.pdf will yield that file. Cool. Works with any file type, though browsers might not know what to do with certain types of files.

If you want sinatra to serve those same files to other paths, it’s not that hard.

get '/home' dosend_file File.expand_path('index.html', settings.public_folder)end

‘/home’ is the route we are matching — we could name it something else if we want.

send_file lets us send a file. Pretty nice naming, Sinatra.

File.expand_path builds the path of a file for us. In case this code is running on someone else’s computer or we move the files around, we don’t want things to break. So, instead of typing the whole path ourselves, we let Ruby figure the path out.

‘index.html’ is the name of the file we are serving, and settings.public_folder gives us the route to the public folder — in our case, ./public.

Dynamic Pages + Templating Languages

If we want Sinatra to fill in pieces of the html based on something that is happening dynamically — like user input or getting data from a database or whatever, we could just change the string that we are returning, like we’ve seen.

If we’ve got a big html page, or even the simple one we’ve been working with, working with the string directly is a big pain. Plus, it’s probably pretty slow, and you definitely don’t want slow page load time.

Instead, people build their pages using templating languages — like html, but you can put some code in that will get evaluated and then turned into real html before getting sent to a site visitor.

In short, put templates in a folder called views, pass values into the template engine, which you call like this:

get '/template' doerb :name, :locals => {:name => params[‘name’]}end

If someone accessed /template?name=yourname, they would see the erb file rendered. Check out the demo in the file!

erb is the embedded ruby language and also the keyword you use to call that template engine. Check this intro to erb for more. Sinatra supports other templating languages too.

More Resources:

HTML:

http://learn.shayhowe.com/html-css/ if the ones bento suggests aren’t working. W3 is always there as a reference too.

CSS:

http://learnlayout.com/ once you get the basics of the syntax down, the hard part is layout. CSS makes it possible, but it’s still frustrating and difficult, particularly if you want your pages to look good on different sized devices.

http://www.w3schools.com/cssref/default.asp reference for all selectors and attributes you can affect. There’s a huge number, don’t worry too much about learning them all. You can look it up when you need it.

Some more resources:

Bento has great free resources for anyone learning web development. Definitely check it out.

More HTML & CSS and a little JavaScript too, https://dash.generalassemb.ly/
Try programming with Ruby, http://tryruby.org/
http://www.codecademy.com/learn
design, https://hackdesign.org/
always a great place to start, https://www.google.com/

Hope you enjoyed your first dive into backend development! As you can tell, there is a ton more to learn.

Check out my other tutorials — How to Make A Resume Website and Getting Started with APIs. Get in touch with comments, questions, or thoughts! @robcobbable on twitter, hi@robcobb.me by email.

If you think its good, share it on!