Rails for Girls | 来自芬兰的女性编程社区原创教程
Ruby
RailsGirls
女性编程社区
6人收藏 2175次学习

Rails for Girls | 来自芬兰的女性编程社区原创教程

原文来自:http://rgcn.github.io/

这个教程的宗旨是给女性提供一个交流技术和实现理想的工具和社区,您可以在这里学习怎样自行组织活动、上传更多原创教程,当然也可以仅仅专注于学习Rails。

Rails Girls 视频介绍

Rails Girls的安装菜谱

烹调时间: 主动状态中5分钟 / 被动状态中15-30分钟

要用Ruby on Rails开发程序, 我们首先需要在我们的计算机中安装一些程序。

从下面适合您使用的操作系统的教程进行安装。如果碰到问题,不用着急,欢迎联系我们,我们可以一起来想办法。

  • OS X下的安装指南
  • Windows下的安装指南
  • Ubuntu下的安装指南

Setup for OS X

在安装开发软件之前我们需要安装一些通用软件。

第一步 查看操作系统的版本

点击“苹果”菜单并选择“About this Mac” (图 1).

第二步 在这个窗口中您能看到操作系统的版本(图 2)。如果您的版本号类似于10.6或10.7,这个教程适用于您。否则的话我们需要在活动中帮助您安装。

第三步 下载并安装以下开发程序,并注意选择对应您操作系统版本号的文件。

第四步 安装完毕后, 打开 Terminal.app. 点击 Spotlight (右上角的放大镜图标), 键入 Terminal.app 并选择图示的选项 (图 3).

第五步 现在复制以下代码并粘贴到Teriminal中,敲回车键。膜拜屏幕上飞过的字符,这恐怕要花好一会功夫,差不多30分钟(琳达,是你的Macbook Air太慢了吧?)。安装程序可能中途要提示您输入管理员密码。现在请给自己准备一份提神的饮料吧,一会儿见!

bash < <(curl -s https://raw.github.com/railsgirls/installation-scripts/master/rails-install-osx.sh)

如果一切顺利,我们现在应该拥有一个完备的Ruby on Rails编程环境啦,祝贺你!

最后一步 安装用于编辑代码文件的文本编辑器。在本工作室环境下我们推荐使用免费软件Komodo Edit。


Setup for Windows

下载 Rails安装程序 并运行它。一路点击默认选项即可完成安装。

您还需要用于编辑代码文件的文本编辑器。在本工作室环境下我们推荐使用免费软件Komodo Edit。

我们现在应该拥有一个完备的Ruby on Rails编程环境啦,祝贺你!


Setup for Ubuntu

请复制以下代码并粘贴到控制台中,敲回车键。欣赏屏幕上飞过的字符,这恐怕要花好一会功夫。安装程序可能中途要提示您输入管理员密码。现在请给自己准备一份提神的饮料吧,一会儿见!

bash < <(curl -s https://raw.github.com/railsgirls/installation-scripts/master/rails-install-ubuntu.sh)

您还需要用于编辑代码文件的文本编辑器。在本工作室环境下我们推荐使用免费软件Komodo Edit。

Rails Girls 应用程序(App)教程

0: 基本工具软件

任意文本编辑器(例如Komodo Edit,Ultraedit甚至记事本,保存时编码请选择UTF-8而不是GBK/GB2132) ,用来编辑代码和文件。
终端或者又称命令行、控制台甚至命令提示符(这里翻译将用“控制台”),用来启动Rails服务器和运行指令。
浏览器,用来预览你的程序。

1: 创建一个应用程序

我们现在来创建一个名为railsgirls的应用程序。

打开控制台/终端/DOS提示符(以下称“控制台”):

  • OS X: 打开Spotlight,键入Terminal并选择显示出来的命令行图标。
  • Windows: 点击开始菜单并搜索Command Prompt,点击Command Prompt with Ruby on Rails;或者使用Win-R也就是按住Windown图标键的同时键入R,然后键入cmd后回车。
  • Linux: 使用Alt-F2调出运行窗口,键入gnome-terminal或konsole。

键入指令:

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails s

在浏览器中打开 http://localhost:3000

在控制台中键入CTRL-C 可以退出服务。

教练: 请解释每一步指令的含义,以及我们刚刚生成了什么(哪些文件)? Rails服务是做什么用的? 并介绍MVC。

2: 创建一个名为idea的Scaffold

我们使用Rails的scaffold来创建一个模板,在此基础上我们可以对数据进行列出、加入、删除、修改和预览等操作,这里的数据指的是我们的ideas。

rails generate scaffold idea name:string description:text picture:string
rake db:migrate
rails s

在浏览器中打开 http://localhost:3000/ideas

探索一下你的网页然后CTRL-C 退出服务。

教练: 什么是scaffold,什么是migration。

3: 设计

网页的外观设计还有待我们动手改进。用Twitter的Bootstrap项目,我们可以轻松的生成网页的stylesheet

打开app/views/layouts/application.html.erb 找到这一行

<%= stylesheet_link_tag "application" %>

并在它上面加入以下代码

<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap.css">

然后把

<%= yield %>

换成

<div class="container">
    <%= yield %>
</div>

现在我们对ideas表格添加页眉、页脚和格式。

找到这个文件 application.html.erb,在<body>下添加:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">The Idea app</a>
            <ul class="nav">
                <li class="active"><a href="/ideas">Ideas</a></li>
            </ul>
        </div>
    </div>
</div>

并在</body>之上添加:

<footer>
    <div class="container">
        Rails Girls 2012
    </div>
</footer>

打开文件 app/assets/stylesheets/application.css 并在最底端添加:

#logo { 
    font-size: 20px;
    font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;
    float: left;
    padding: 10px;
}
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle !important; border: none !important; }
th { border-bottom: 1px solid #DDD !important; }
td.picture { width: 140px; }
td.picture img { width: 140px; }

教练: 请解释CSS和layouts。

4: 添加图片上传功能

为了实现图片上传功能我们需要安装额外的库(libraries)。

打开文件 Gemfile 并找到这一行

gem 'carrierwave'

在它下面添加

gem 'sqlite3'

教练: 请解释什么是库(libraries)以及为什么需要使用它们。不妨也聊聊开源?

现在我们来生成主管图片上传的代码,打开控制台并键入:

bundle
rails generate uploader Picture

打开 app/models/idea.rb 找到这一行:

class Idea < ActiveRecord::Base

并在其下方添加:

mount_uploader :picture, PictureUploader

打开 app/views/ideas/_form.html.erb ,找到这一行:

<%= f.text_field :picture %>

将它改成:

<%= f.file_field :picture %>

并将这一行:

<%= form_for(@idea) do |f| %>

改成:

<%= form_for(@idea, :html => {:multipart => true}) do |f| %>

我们的view还是不够耐看,因为它只显示文件路径。我们可以这么改进:

打开 app/views/ideas/show.html.erb 并将

<%= @idea.picture %>

改为

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

教练: 聊聊HTML。

5: 微调路径(Routes)

如果你试图打开 http://localhost:3000 看到的还是默认的页面,我们需要把它重定向到ideas页面。

在 OS X 或 Linux 下,在控制台下运行:

rm public/index.html

在 Windows 下,在控制台下运行:

del public\index.html

然后打开 config/routes.rb 并在第二行加入以下代码:

root :to => redirect("/ideas")

教练: 请谈谈Routes。

下来呢?

  • 改进HTML/CSS设计
  • 加入评分系统(Ratings)
  • 用 CoffeeScript(或 JavaScript)增加互动性
  • 加入缩略图支持,从而使图片加载更快

使用HTML和CSS美化你的应用

1.美化header样式

  • 打开文件 app/assets/stylesheets/application.css 并在最底端添加:

    .navbar { min-height: 38px; background-color: #f55e55; }

    刷新页面,查看样式有什么变化。 此处解释什么是css选择器,学员可以尝试修改header的颜色,字体等。 简单的颜色选取参考网站: http://color.uisdc.com/

    教练:解释display的属性,什么是内联元素,什么是块级元素

  • 在文件底部加入下面的代码:

    .navbar a.brand { font-size: 18px; } .navbar a.brand:hover { color: #fff; background-color: transparent; text-decoration: none; }

    教练:解释css中链接的四种状态

2.美化表格样式

  • 对于表格,我们可以使用Bootstrap的表格样式。打开app/views/ideas/index.html.erb文件,找到:

    
    <table>
    

    将其改为

    
    <table class="table">
    
  • 修改图片大小,找到这段代码

    <%= image_tag(idea.picture_url, :width => 600) if idea.picture.present? %>

    尝试修改width

  • 打开文件app/assets/stylesheets/ideas.css.scss,加入以下代码:

.container a:hover { color: #f55e55; text-decoration: none; background-color: rgba(255, 255, 255, 0); }

3.footer样式调整

  • 打开文件 app/assets/stylesheets/application.css 并在最底端添加:

    
    footer { 
      background-color: #ebebeb; 
      padding: 30px 0; 
    }
    

    尝试在footer中加入更多内容,并调整位置

4.按钮样式

在文件app/assets/stylesheets/ideas.css.scss最后加入

.container input[type="submit"] { height: 30px; font-size: 13px; background-color: #f55e55; border: none; color: #fff; }

教练:解释css中border的使用,学员可以尝试修改按钮样式,加圆角,阴影,颜色等。

利用Heroku将你的程序部署到网络上

下载Heroku

参照 quickstart guide 的三个步骤,注册,安装toolbelt,并登录。

教练: 谈谈部署到Heroku相对于传统主机托管服务的优越性。

准备好你自己的程序

更新我们的数据库

首先,由于Heroku使用PostgreSQL而不是SQLite,我们需要修改Gemfile才能使数据库在Heroku上运行。请修改以下代码:

gem 'sqlite3'

将它改为:

group :development do
  gem 'sqlite3'
end
group :production do
  gem 'pg'
end

运行 bundle install --without production 来加载程序所依赖的库。

教练: 请谈谈RDBMS,并举几个具体的例子。

版本控制系统(Version Control Systems)

我们需要把代码加入版本控制系统中去。您可以在控制台中运行:

git init
git add .
git commit -m "initial commit"

教练: 现在该是时候谈谈版本控制系统和git了。

部署你的程序

创建Heroku App

我们需要创建一个Heroku App,在控制台中键入 heroku create --stack cedar ,得到如下输出:

Creating evening-sky-7498... done, stack is cedar
http://evening-sky-7498.herokuapp.com/ | git@heroku.com:evening-sky-7498.git
Git remote heroku added

在这个例子中 “evening-sky-7498” 是你的Heroku App的名字

Push您的代码

接下来我们需要把代码push到Heroku上,键入 git push heroku master. 您将看到以下输出:

Counting objects: 134, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (115/115), done.
Writing objects: 100% (134/134), 35.29 KiB, done.
Total 134 (delta 26), reused 0 (delta 0)

-----> Heroku receiving push
-----> Ruby/Rails app detected
-----> Installing dependencies using Bundler version 1.1.2
       Running: bundle install --without development:test --path vendor/bundle --binstubs bin/ --deployment
       Fetching gem metadata from https://rubygems.org/.......
...
-----> Launching... done, v4
       http://evening-sky-7498.herokuapp.com deployed to Heroku

当您看到“Launching…”这一行文本的时候,我们就知道程序已经被push完毕了。

迁移数据库

接下来我们需要迁移(migrate)数据库,就像在工作室中练习过的一样: heroku run rake db:migrate

指令执行完毕后,您就可以用上面生成的URL访问您的程序了,在本例中,URL是: http://evening-sky-7498.herokuapp.com/. 也可以在控制台中键入 heroku open ,这会直接用您默认的浏览器打开以上URL。

贡献您原创的教程

这个教程网站是用 jekyll 生成的静态网页组成的,所有的文档都是用 markdown 编辑。如果您有意贡献自己原创的教程,请按照以下步骤进行:

  1. Fork repository on github ,点击 “Fork” 键。
  2. git clone 您刚创建的 fork。
  3. 创建一个文件,取名为 YYYY-MM-DD-guide_name.markdown (如:2012-05-01-jiaocheng_gitcafe.markdown)将它放在您的fork中的 _posts 目录下。
  4. 在这个文件中添加一些YAML文件头,结果应该看上去像这样:
---
layout: default
title: 教程的名字
permalink: one-word-summary.html
---
  1. 将这个新教程 commit 到您的 git repository中。
  2. 您的 commit 完成后,将它 push 到您的 fork 下.
  3. 您现在可以创建一个 pull request ,同时解释一下您这个教程的意义。大功告成!

您可以参考我们 Rails Girls App Tutorial 的结构。

非常感谢您腾出宝贵的时间帮助 Rails Girls!

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
Ruby Rails