Computer Science Tutorials
Created by @lachlanjc
You can find this tutorial online at https://hackclub.com/workshops/rails_notes
Links to a live demo and the final code below. This workshop should take around 1 hour.
We’re using a programming language called Ruby, and a framework for building web apps called Ruby on Rails. (A framework makes specific tasks with a programming language easier by including code you’ll need so you don’t have to write it.)
A few quick terms you should know before we get started:
At the end, we’ll deploy the app by uploading the code to a service called Heroku, which runs servers for us without much configuration.
gem install rails(always press return to run terminal commands). It will take a moment.
rails new notes --database postgresql
Great. Unfortunately there’s a bit of setup we have to do to get the database running.
Start up the database server.
sudo service postgresql start
Create the database:
psql -c "create database notes_development owner=ubuntu"
notes/config/database.yml and replace the
development section with this: (feel free to copy + paste)
development: adapter: postgresql encoding: SQL_ASCII database: notes_development pool: 5 username: ubuntu password: password
We’re making changes to our setup, so back in our terminal, let’s commit to Git:
git add --all
git commit -m "Start Notes project"
Connect the Rails app to its database. We’ll need to run this command from inside our new application’s directory (folder), so run
cd notes. Then:
Finally, let’s start our app’s server. Open a new terminal tab (click the ⨁ icon and New Terminal). Again, this needs to be inside the Rails app, so
cd notes. Now:
rails s -b $IP -p $PORT
Click Preview, then Preview Running Application button to see your app so far:
Yay! You’re on Rails! You’ve installed Rails, made a new app, started and set up a database server, created a database, and started the application server. Nice job.
We’ll get to building in just a moment! First, a quick intro on Rails.
Rails runs on your server, sitting between incoming requests and your code. It’s what’s called Model-View-Controller (MVC) framework:
A Model is a structured piece of data. A site like Facebook might have models for
Comment. In this notes app,
Note is the model. Models have attributes (think form fields), such as
A View is the content of an actual webpage, like the HTML we’ve been writing. In Rails, your view files will not end with
.html.erb. This is embedded Ruby: you can embed Ruby code in your webpage using special HTML tags:
<h1><%= note.name %></h1> <div><%= note.content %></div>
A Controller connects requests (like for the
/notes page) to your view, usually referencing a model. A Controller has (typically several) actions, which are different ways to interact with the
Note. Here are the standard pages:
index.htmlfile. This page usually lists all the items (like notes), from which you can tap to open one individually. URL:
Consider an incoming request for
/notes in our app. The basic lifecycle of the request is like this:
NotesController, and a specific action inside that controller (in this case,
index). Any setup code for that action is run, such as fetching the
Noteobjects from the database.
That was a lot to take in! Don’t worry if you don’t understand it all. Let’s write some code and you’ll see where each of these pieces fit in.
We’re building an app for keeping notes. We’ll need a
Note model, the
NotesController so we can see our notes in our browser, and views for our controller to render. That’s a lot to write, but Rails can help out!
Return to the first tab in your terminal (the one in which your server is not running) and run this command:
rails generate scaffold Note name:text content:text
Wow! That’s a lot of things. What did we just do?
Notethat has two attributes,
content. Both of these attributes are of type
text(you could also use
Before seeing what Rails has put together, run
rails db:migrate again. This will set up the
Note model in the database.
In your Preview, add
notes to the end of the URL box, so it says
https://projects-yourname.c9users.io/notes, and press enter.
Here’s your basic app! Click on “New Note”, write in the boxes, and submit the form with the “Create Note” button. Your note has been saved in the database! Click “Back” and you’ll see it in your note list. Pretty cool, right? You can edit your note or destroy (delete) it, and add more notes.
It’s not required, but poke around and read some of the files Rails wrote for you. What’s in your model (
app/models/note.rb)? What about your controller (
app/controllers/notes_controller.rb)? The views (
app/views/notes/show.html.erb)? Read some of the code, even if you can’t yet understand it all.
While our Notes app has some good functionality, it’s not very fun to use. Let’s customize it! Here are a few things you can easily change—it’s all up to you.
config/routes.rband add a root URL, like this:
Rails.application.routes.draw do root 'notes#index' resources :notes end
<body>…</body>HTML. There’s a template for this at
app/views/layouts/application.html.erb. Try a new title (like Awesome Notes) by changing what’s inside
<title>…</title>on line 4! When your refresh the page in the Preview, you’ll see the new title.
app/controllers/notes_controller.rband change the text inside the quotes like
notice: 'Note was…'text (see line 31), like We’ve saved your awesome note!. Next time you run a request of that type, you’ll see your new message.
app/assets/stylesheets/scaffolds.scssand make some changes. On lines 19-21 you’ll find the CSS setting the color of links (HTML
#000to your favorite color, like
When you’re done, commit to Git.
cd ..(changes directory to the parent directory, where your Git repository is)
git add --all(adds all the new files to Git)
git commit -am "Add notes"(commits the changes)
cd notes(returns to the application directory)
We’ll need to install Heroku’s tools on our command line.
sudo add-apt-repository "deb https://cli-assets.heroku.com/branches/stable/apt ./"
curl -L https://cli-assets.heroku.com/apt/release.key | sudo apt-key add -
sudo apt-get update && sudo apt-get install heroku —yes
Create a new Heroku app:
heroku create (or, if you want to use a custom name,
heroku create notes-MYNAME)
git push heroku master
heroku run rails db:migrate
Now, open the URL you copied in a new tab. Your app is live! Anyone can publish notes on your new website.
If you want, show it off on Slack’s
#shipit channel 🙂
Finally, and push your work today to GitHub:
cd ..(back to the parent directory)
git push origin master