$30 off During Our Annual Pro Sale. View Details »

Workbook

 Workbook

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

Rails Girls Dublin

February 09, 2013
Tweet

More Decks by Rails Girls Dublin

Other Decks in Programming

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