Workbook

Check out the last page - What Next?
Tips on continuing learning Ruby and Ruby on Rails

Transcript

1. Get excited and
   make things
   Software changes cultures. We believe
   that in a world where everything will
   involve the Internet, we need to get more
   girls involved.
   Web applications are modern
   craftsmanship. Build tomorrow's
   products. Learn to solve problems.
   Wonder how things work.
   We can give the ingredients, but you make
   the recipes.
   

   View Slide

2. Timetable
   Friday 8th February
   18:00 – 20:00 Installation Party
   Saturday 9th February
   09:00 – 10:00 Registration, Installation & Coffee
   10:00 – 10:20 A Word From Sponsors
   10:20 – 10:40 Designing Your Web App
   10:40 – 11:20 Introduction to Programming
   11:15 – 11:30 Bento Box Exercise
   11:30 – 13:00 WORKSHOP
   13:00 – 14:00 Lunch
   14:00 – 16:00 WORKSHOP
   16:00 – 16:30 Lightning Talks
   AR Drones, From Web to Mobile,
   Writing a Blog in Less Time Than
   it Takes to Paint Your Nails.
   16:30 – 17:30 WORKSHOP
   Extending Your App
   18:30… After Party Drinks
   In Arthur’s on Thomas Street
   

   View Slide

3. Workshop Tutorial
   Step 1: Get to know the tools
   Text editor
   This is a fancy version of Notepad or TextEdit used for
   writing and editing your code.
   Terminal (aka Command Prompt on Windows)
   A window where you can type commands to the
   computer. This is where you will run the Rails server
   which will allow you to view your application in your web
   browser.
   Web browser
   e.g. Firefox, Safari, Chrome, for viewing your application.
   Step 2: Creating the application
   We’re going to create a new Rails app called railsgirls.
   First, let’s open a terminal:
    Mac OS X: Open Spotlight, type Terminal and click
   the Terminal application.
    Windows: Click Start and search for Command
   Prompt, then click Command Prompt with Ruby on
   Rails.
    Linux (Ubuntu): Search for Terminal on the dash and
   click Terminal.
   Next, type these commands in the terminal – remember
   to ask your coach to explain what each one means.
   

   View Slide

4. mkdir projects
   cd projects
   rails new railsgirls
   cd rails girls
   rails server
   Open http://localhost:3000 in your browser. Hit CTRL-
   BREAK or CTRL-C in the terminal to quit the server.
   Step 3: Create Idea scaffold
   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 ideas. Type the
   following:
   rails generate scaffold idea name:string
   description:text picture:string
   rake db:migrate
   rails server
   Open http://localhost:3000/ideas in your browser.
   Hit CTRL-BREAK or CTRL-C to quit the server again
   when you’ve clicked around a little.
   

   View Slide

5. Step 4: Design
   The app doesn’t look very nice yet. Let’s do something
   about that. We’ll use the Twitter Bootstrap project to
   give us nicer styling really easily.
   Open app/views/layouts/application.html.erb in
   your text editor and above the line
   <%= stylesheet_link_tag "application" %>
   add
   href="http://railsgirls.com/assets/bootstrap.cs
   s">
   and replace
   <%= yield %>
   with
   
   <%= yield %>
   
   Let’s also add a navigation bar and footer to the layout.
   In the same file, under add
   
   
   

   View Slide

6. 
   The Idea
   app
   
   href="/ideas">Ideas
   
   
   
   
   and before

   View Slide

7. footer { margin-top: 100px; }
   table, td, th { vertical-align: middle
   !important; border: none !important; }
   th { border-bottom: 1px solid #DDD !important;
   }
   Have a look at the new look of your app in the browser.
   When you are done hit CTRL-BREAK or CTRL-C to quit
   the server.
   Step 5: Adding picture uploads
   We need to install a piece of software to let us upload
   files in Rails. Ask your coach about libraries, gems and
   open source.
   Open Gemfile in the project directory and under the
   line
   gem 'sqlite3'
   add
   gem 'carrierwave'
   In the terminal run:
   bundle
   Now we can generate the code for handling uploads. In
   the terminal run:
   

   View Slide

8. rails generate uploader Picture
   At this point you need to restart the Rails server
   process in the terminal. This is needed for the app to
   load the added library. To do this, in the terminal type:
   rails server
   Open app/models/idea.rb and under the line
   class Idea < ActiveRecord::Base
   add
   mount_uploader :picture, PictureUploader
   Open app/views/ideas/_form.html.erb and change
   <%= f.text_field :picture %>
   to
   <%= f.file_field :picture %>
   and
   <%= form_for(@idea) do |f| %>
   to
   <%= form_for(@idea, :html => { :multipart =>
   true }) do |f| %>
   

   View Slide

9. When you upload a picture it doesn’t look nice because it
   only shows a path to the file, so let’s fix that.
   Open app/views/ideas/show.html.erb and change
   <%= @idea.picture %>
   to
   <%= image_tag(@idea.picture_url, :width => 600)
   if @idea.picture.present? %>
   Step 6: Finetune the routes
   If you try to open http://localhost:3000 it still shows the
   default page. Let’s make it redirect to the ideas page.
   On Mac OS X and Linux, in the terminal run:
   rm public/index.html
   On Windows, in the command prompt run:
   del public\index.html
   Then open config/routes.rb and after the first line
   add
   root :to => redirect('/ideas')
   

   View Slide

10. What next?
    Rails For Zombies
    This in-browser tutorial will cover what we’ve done in
    the workshop and more. It’ll also give you an appetite
    for brains. When you’ve got the basics there are more
    advanced Rails topics to move on to.
    railsforzombies.org
    Codecademy
    Learn Ruby, HTML, CSS and Javascript for free.
    codecadamy.com
    Rails Casts
    Ryan Bates of Rails Casts has kindly offered 3 free
    months of pro subscription to his video tutorials. To
    access, use the coupon we have provided.
    railscasts.com
    Why's Poignant Guide to Ruby
    Cult book with cartoon foxes and ruby exercises.
    bit.ly/YRtbqR
    Stack Overflow
    Googling a coding problem will inevitably lead you to
    Stack Overflow where a community of programmers
    ask and answer questions on everything to do with
    programming and computing.
    stackoverflow.com
    Ruby Ireland
    This is your local Ruby on Rails community. They have
    frequent meet-ups and the next one is on Tue 19th Feb
    at 7pm in Against The Grain, Wexford St. Please come
    along!
    rubyireland.com
    

    View Slide