At the end of the day you should
- Feel comfortable in the terminal
- Know about ERB (Embeded Ruby) and how to use it
- Know how to start a new Rails project
- Have your project online
- Know the difference between your local and remote code
- Be comfortable in git
- Know what MVC means
- Learn some markdown
- Have added a Gem to your project
- Know about our friend Bundler
- Meet new friends to learn with
- Find a mentor
- Get resources to continue learning
- Have Fun! <3
We’re going to create a new Rails app called la_adventures
A bucket list for things to do in Los Angeles.
If you moved out of Los Angeles next month what are the places you wished you went to and the things you wish you did. Make a list of cool things to do so you can make a plan to do them in case you move someday. You don't want to have any regrets.
This is a long tutorial. You may want to browse through it quickly and decide together as a group which things are most important to you and be sure to do those things first.
Don't skip taking breaks and being away from the computer. Regular breaks allow you to go longer and learn more.
If you have any problems please let someone know. Code of Conduct
https://gist.github.com/jendiamond/5a26b531e8e47b4aa638#file-tutorial_sharing-md**
=====
Coach: - take notes for your group in a gist on GitHub. Write what they tell you to and add some links as you go along through the day. Share the file with each other. Use markdown. You can discuss markdown later in the tutorial.
=====
- Be kind to yourself. You are not less than anyone else because you don't know something.
- Be considerate. Remember that all the coaches and organizers are happily volunteering their time to help you.
- Respect others. Remember your coach is having patience with you so have patience with your student pair.
First, let’s open a terminal:
- Mac OS X: Open Spotlight, type Terminal and click the Terminal application.
- Windows: Click Start and look for Command Prompt, then click Command Prompt with Ruby on Rails.
- Linux (Ubuntu/Fedora): Search for Terminal on the dash and click Terminal.
Next, type these commands in the terminal:
mkdir railsgirls
You can verify that a directory named railsgirls was created by running the list command: ls.
You should see the railsgirls directory in the output.
Change into the railsgirls directory by running:
cd railsgirls
You can verify you are now in an empty directory or folder by again running the ls command.
Now you want to generate a new rails app called la_adventures by running:
rails new la_adventures
This will create a new app in the folder(directory) la_adventures.
Again, we want to change the directory to get inside of our rails app by running:
cd la_adventures
If you run ls inside of the la_adventures directory you should see folders such as app and config. Look at all the stuff you got from typing 3 small words. rails new la_adventures
The below chart is from the Railsbridge Intro to Rails tutorial
| File/Folder | Purpose |
|---|---|
| app/ | Contains the controllers, models, and views for your application. You will do most of your work here. |
| config/ | Configure your application's runtime rules, routes, database, and more. |
| db/ | Shows your current database schema, as well as the database migrations. |
| public/ | The only folder seen to the world as-is. If you put files in here, they will be served directly without any processing by Rails. |
| app/assets/ | This is where your images, JavaScript, stylesheets (CSS), and other static files should go. Modern Rails apps use something called the Assets Pipeline, which combines all the JavaScript and CSS files in this directory into a single file for speediness. |
Start the rails server to see your new app by running:
rails server
Open http://localhost:3000 in your browser.
You should see “Welcome aboard” page, which means that the generation of your new app worked correctly.
You may want to run a second terminal to have the rails server run continuously.
The WEBrick server. This is so you can see what your app will look like in production on the web. Notice that each time you add a new adventure or do anything inyour web site the server in your terminal shows a bunch of new stuff. If you look at it you can see what it is doing relates to what you are doing on the site. You should see something like this below:
=> Booting WEBrick
=> Rails 4.2.0 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
When you are running the Rails server you cannot execute new commands.
If you try running cd or another command it will not work.
To return to the normal command prompt:
Type
CTRL-Cin the terminal to quit the server.
Hooray for The Terminal Slide Show!
- pwd "print working directory" / it prints the path of our current directory, and by path, we mean the list of folders, or directories, we entered to get to where we are.
- cd <directory_name> "change directory" / this allows us to enter a different folder depending on what we substitute into <directory_name>. If we enter a name, it will bring us into that folder if there is a direct link to it as in if that folder is contained within our current folder.
- cd ../ brings us back one directory. From experience, I believe " cd .." alone would suffice.
- mkdir <directory_name> "make directory" / creates a new directory for us
- ls "list" / prints out all the files in our current directory
- up and down arrow keys enters our previous commands
- tab auto-completes file names
- rm "remove" / deletes the file. "rmdir" removes a directory.
- rails server or rails s starts our local server in our terminal
- ctrl+c shuts down our server if its active
- ctrl+l clears the terminal screen. "clear" itself also works, unless we're in the rails command-line.
- man <command_name> "manual" / help screen for any command combined with this
Before we do anything else lets create a local repository and save our new project to it. We will use a workflow for git that follows along these lines each time we commit. Hooray for TryGit!
If you are working in a Virtual Box / Vagrant instance
You can open your new app in your terminal in two places
- you can open it in the vagrant instance:
vagrant@vagrant-ubuntu-trusty-64:/vagrant/railsgirls/la_adventures- and in your home directory wherever you put it. Mine is here:
$Desktop/railsgirls/la_adventures
When you commit, do it from from outside of Vagrant #2. above
$ git init
git status
git add .
git status
git commit -m 'Initial commit'
git status
This chart shows what each command means. This is your git workflow. Which means EVERY TIME we ask you to commit to git and GitHub in this tutorial you should follow these steps. It is a good habit to follow all these steps.
| Your Git Workflow | :) |
|---|---|
git status |
Check status |
git add . |
Add everything to the repository |
git status |
Check status |
git commit -m |
'Your comment' Commit everything (-m means message) |
git status |
Check status* |
Again I will say, every time you commit, follow these steps. It's good practice and it will help you from getting messed up when things get more complex.
Where it says Your comment this is where you write in what you commit contains. It should note what you did. These comments are meant for you to remember what you did so make them very meaningful.
They are also public for everyone to read for ever. ;) A Note About Git Commit Messages
Psst - If you ever see a $ sign, it is generally not part of the code. The $ sign usually means that you should type the code into your terminal. (unless you are using PHP. :)
| Pushing to GitHub | :) |
|---|---|
| Create a Github repository | https://github.com |
| Add the remote host to your local git | git remote add origin git@github.com:your_username/your_repository_name |
| Check your remotes | git remote -v |
| Push commit to Github | git push -u origin master |
Coach: Discuss you git workflow.
https://youtu.be/IsvfofcIE1Q https://youtu.be/xnKhsTXoKCI
For the rest of the project you will only need to use the command git push origin master to push your changes to GitHub.
Change the name of this document and add your name.
$ git mv README.rdoc README.md
Open the README.md in your text editor. This is a markdown file that has a certain syntax like HTML. that why it's called README.md The .md suffix is for markdown. This guide is written in markdown. :)
## Rails Girls 2015
-----
### L.A. Adventure App
*Made by* **Your Name**
Coach: Discuss markdown a little bit and other DSLs. Show how to create a gist in Github.
http://daringfireball.net/projects/markdown/dingus
http://daringfireball.net/projects/markdown/syntax
DSL
Run your git workflow again to commit this change.
Remember to commit from outside of your Virtualbox / Vagrant Instance Commit from your home directory wherever you put it. Mine is here:
$Desktop/railsgirls/la_adventures
Do each of these commands one at a time...
git status
git add .
git status
git commit -m 'Initial commit'
git status
git push origin master
Coach: Look at your commit on Github. Show how the comments in Github can be changed with markdown.
We’re going to use Rails’ scaffold functionality to generate a starting point that allows us to list, add, remove, edit, and view things.
In our case the scaffold and C.R.U.D. will let us: list adventures, add adventures, remove adventures and view adventures.
In Rails we call it C.R.U.D., the acronym for
Create
Read
Update
Destroy
We will be creating this in our database and you can imagine it looking a bit like this:
| Adventure | - |
|---|---|
| name | string |
| description | text |
| picture | string |
| visit | date |
| id | (rails with provide an id automatically) |
Let's just peek in app/model
Note that there is no model there yet.
After we run the next command there will be an Adventure model. app/models/adventure.rb
( You can also peek at app/controllers and app/views.)
rails generate scaffold adventure name:string description:text picture:string visit:date
The scaffold creates new files in your project directory, but to get it to work properly we need to run a couple of other commands to update and create our Adventure database.
=====
Coach - Talk a bit about Active Record. Active Record is the M in MVC - the model - which is the layer of the Rails responsible for logic. Active Record facilitates the use of your database.
Active Record uses some naming conventions.
Rails will pluralize your class names to find the respective database table.
So, for a class Book, you should have a database table called books.
Therefore our class Adventure will have a database table called adventures.
=====
Open the db/migrate/(date_time)_create_adventures.rb file. (Psst - (date_time) will be different in every app)
Notice that all the things that we just typed to create the scaffold are here in this file:
class CreateAdventures < ActiveRecord::Migration
def change
create_table :adventures do |t|
t.string :name
t.text :description
t.string :picture
t.date :visit
t.timestamps null: false
end
end
end
db/migrate/(date_time)_create_adventures.rb
rake db:migrate
Restart your server and check out your app. (You have to restart your server when you run rake db:migrate)
Open http://localhost:3000/adventures in your browser.
rails server
(For now your image will only be a string. We will make it an image later in the guide.)
Play around with your new app.
- Create some new adventures.
- Delete some.
- List them all.
- Create some more.
- See what the C.R.U.D. is all about.
- Rails scaffolding
- The command
rails generate scaffold adventure name:string description:text picture:string visit:date - MVC Model View Controller
- The model name and related database table
- Naming conventions
- What are migrations and why do you need them?
- What is Rake?
All of our adventures are stored in our database. This is where we get into the MVC or the Model View Controller aspect of our application.
The following explanation is from the Railsbridge Intro to Rails tutorial
(Psst -You should try this tutorial on your own after this workshop. It is excellent! Sarah Mei and Sara Allen are responsible for creating Rails Bridge which inspired the creation of Rails Girls which is why you are here today. If you ever meet these women shake their hand vigorously and thank them.)
Also you should know the names Linda Liukas and Karri Saarinen who founded Rails Girls and are awesome! :)
This file contains code for our adventure model. If you look at it, it's nearly blank. Creating, reading, updating, and deleting records are built into Rails.
This folder contains all the views for our adventures model. This is where the code for the forms you used above is stored. Rails created all of these pages as part of the scaffold. If you've written HTML before, many lines in the views should look familiar. Rails views are HTML with some extra code added to display data from the database. Yay Dash tutorial!
This is the code for the page that lists all the adventures. Index is the name given to the "default" page for a web site or a section of a web site. When you navigate to http://localhost:3000/adventures the adventures index page is what is sent to your computer.
This is the page you get when you click the "Show" link on the "Listing adventures" page.
This is the page you get when you click "New Adventure".
This is the page you get when you click "Edit".
You may have noticed that the page for new adventures and the page to edit adventures looked similar. That's because they both use the code from this file to show a form. This file is called a partial since it only contains code for part of a page. Partials always have filenames starting with an underscore character.
Challenge question: Can you find the line of code in new.html.erb and edit.html.erb that makes the form partial appear?
This is the controller file that Rails created as part of the scaffold If you look you'll see a method (a line beginning with def) for each of the views listed above (except _form.html.erb)
You may have noticed that the first page of your application still shows the “Welcome aboard” page. Let’s make it go straight to the Adventures page.
Open config/routes.rb and after the first line add
root 'adventures#index'
Test the change by opening the root path http://localhost:3000 in your browser.
Coach: Talk about routes, and include details on the order of routes and their relation to static files.
http://guides.railsgirls.com/heroku
We are now going to put our app on the internet.
First you have to
Run your git workflow again to commit all changes.
Your message this time should be 'Add Adventure scaffold, Update routes to show Adventure on home page'
Because we are going to deploy our app to Heroku we need to update our Gemfile.
Why? Well, because we are using a Sqlite3 database and Heroku uses a Postgres database.
That's completely alright.
The Sqlite3 database easily transfers to the postgress data bases.
Luckily Rails has multiple environments Development, Production and Test.
- The Development environment is where you develop your app.
- The Production environment is what you "push to production" / Heroku or whatever server you use.
- The Test environment is for testing.
Open your Gemfile. Find the sqlite3 gem:
gem 'sqlite3'
Add it to the development environment and declare the production environment to use postgress:
Notice it says group :development and group :production.
The do end means this is a block ask your coach what a block is.
Put this in your Gemfile:
group :development do
gem 'sqlite3'
end
group :production do
gem 'pg'
end
Then run this in your terminal:
(You must be in your Virtual Box / Vagrant Instance to run bundle.)
bundle install --without production to setup your dependencies.
Coach: - Discuss why you run bundle install and what the Gemfile.lock is doing.
If heroku is not running you may need to install the heroku toolbelt. https://toolbelt.heroku.com/
Next, we need to add rails_12factor entry into our Gemfile to make our app available on Heroku.
This gem modifies the way Rails works to suit Heroku, for example Logging is updated and the configuration for static assets (your images, stylesheets and javascript files) is tweaked to work properly within Heroku’s systems.
https://github.com/heroku/rails_12factor/blob/master/README.md
heroku/rails_12factor#3
Please change the following in the Gemfile:
group :production do
gem 'pg'
end
to
group :production do
gem 'pg'
gem 'rails_12factor'
end
Then run this in your terminal:
bundle
Run your git workflow again to commit all changes and push to Heroku.
Your comment should be 'Add rails_12factor gem and update Gemfile.lock'
Yes, you did just do this. Ugh, why wasn't it just combined with the last change to your Gemfile?
So you know that EVERY TIME you change your Gemfile you have to run $ bundle!
Read this all first and discuss it and then we'll do these two commands.
In your terminal type:
heroku create
Then type:
git push heroku master
We need to create our Heroku app by typing heroku create in the terminal and see something like this:
Creating sheltered-refuge-6377... done, stack is cedar
http://sheltered-refuge-6377.herokuapp.com/ | git@heroku.com:sheltered-refuge-6377.git
Git remote heroku added
In this case “sheltered-refuge-6377” is your app name.
Next we need to push our code to heroku by typing git push heroku master. You’ll see push output like the following:
Initializing repository, done.
Counting objects: 101, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (91/91), done.
Writing objects: 100% (101/101), 22.68 KiB | 0 bytes/s, done.
Total 101 (delta 6), reused 0 (delta 0)
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.0.0
-----> Installing dependencies using 1.6.3
Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
Fetching gem metadata from https://rubygems.org/..........
...
-----> Launching... done, v6
http://sheltered-refuge-6377.herokuapp.com/ deployed to Heroku
You’ll know the app is done being pushed, when you see the “Launching…” text like above.
Next we need to migrate our database like we did locally during the workshop:
** Run this command in your terminal:**
heroku run rake db:migrate
In a browser got to http://sheltered-refuge-6377.herokuapp.com/ (except put the name of your app in there instead of sheltered-refuge-6377.)
You can also type heroku open in the terminal to visit the page.
Heroku’s platform is not without its quirks. Applications run on Heroku live within an ephermeral environment — this means that (except for information stored in your database) any files created by your application will disappear if it restarts which is why it takes so long to spin up when you first go to the site.
Obviously this doesn’t seem to be useful if you were running a real life application, but there are ways to work around this which is commonly used by a lot of popular websites.
Take a break. Stretch. Walk around the block. Notice that there are other people in the room.
Don't skip taking breaks and being away from the computer. Regular breaks allow you to go longer and learn more.