课程目标

两个主题：

• 什么是 Computational Thinking
• 如何把脑袋的点子落地变成代码

做第一个简单的网站：一个招聘网站。这个网站会跟 Rails 101 很像。你会发现，将脑袋的点子落地变成代码，并不是想像中的难

课程复盘

1. User Story 用户故事

User Story 用户故事

用户故事是进行软件开发时，常用的一个基本工具。

当我们在进行一个实体项目时，常常被许多需求压到喘不过气。有时候做太多、有时候做太少、有时候做歪。用户故事就是用来解决这些事情的。

用户故事的主张就是我们应该：

• 以「角色」的观点
• 理清会发生的「故事」
• 以解决或达到某种「效果」

用户故事的格式

所以用户故事是这样的：

身为「某角色」，会做「某事」，以完成「某商业价值」

如果以「招聘系统」为例的话，用户故事大概就会是这样：

• 身为管理员，可以发布职缺，以达到招募人才的需求；
• 身为应征者，可以筛选职缺，以达到「筛选到自己心仪薪资水准的工作」；
• ……

一般来说，小型专案初始项目约在 20-30 条，中型项目约 100 条。

为什么要使用 User Story 整理系统需求

这是因为如果使用 User Story，从用户的角度出发去思考，以角色为中心去叙述未来会发生什么事情。那么整个项目的视野，瞬间就会变得非常聚焦，所有功能都是「各角色所需要的关键功能」。

也不会花了一堆时间，按照「技术规格书」完善了自己认为的关键功能，却少了全局观。

常见的项目失败的例子

比如说像我们以前在开发项目时，最常出现的状况是：客户在规格上说项目要有订单系统，而开发组老老实实做了给「一般用户」用的订单系统。

但在结案最后一刻，客户却说：「你们怎么那么不专业呢？后台订单系统你们都没做，至少还需要出货功能、对账功能、物流系统啊！这些不都是你们应该想得到的吗？」

整个系统复杂度瞬间暴增 10 倍。

但是如果你若不完成，客户就扬言不给尾款，甚至告你……

失败的原因 ——「角色」

这是因为多数的开发者，常只顾着开发「规格上的东西」。

而忽略了「系统是要给人用的」，没有问清楚这个系统里面有多少个「角色」。

「角色」正是系统的复杂度关键。

通常来说，每多一个「角色」，系统复杂度就会多上一个「次方」。不得不谨慎。

这也是为什么我们要在这一课当中，削减「角色」数量的原因。

2. 用户故事举例：招聘网站

将用户故事不断的进行版本迭代，最后形成可以实作的版本。

找到Must Have / Should Have

当你写过一轮功能之后，会发现最后留下的 Must Have / Should Have，应该只剩下这四大部分。

• 发布系统 - 公司，撰写工作需求
• 观看机制 - 应征者，过滤理想工作
• 应征系统 - 应征者， 可以上传简历
• 管理系统 - 管理员可以删除隐藏工作

接着我们可以用最慢的镜头，再拆解一次，发现整个系统里面有三个角色：

• 发布系统 - 公司，撰写工作需求
• 观看机制 - 应征者，过滤理想工作
• 应征系统 - 应征者, 可以上传简历
• 管理系统 - 管理员可以删除隐藏工作

找出角色

• 公司
• 应征者
• 管理员

然而，一个系统里面若有三个角色，有些太复杂了。

我们可以将现在要做的这个招聘系统，设定为公司内部自己要用的招聘系统。那么角色就会只剩下两个而已：

• 公司 = 管理员
• 应征者

削减角色，只有两个角色的系统

让我们再重新整理一遍，需求最后会变成：

发布系统 - 管理员，撰写需求
管理系统 - 管理员，可以编辑/删除/隐藏工作
观看机制 - 应征者，过滤理想工作
应征系统 - 应征者, 可以上传简历

• 从一个角色开始做起

这个系统内有两个角色：

• 管理员
• 应征者

在第一周，我们会优先实作「管理员」这个角色。

写下「管理员」所需要做的事。

在哪里做这些事呢？在后台。

这些内容多多手写练习。

职缺需求有哪些栏位呢？

职缺

然后我们就会发现，我们需要一个 Job 的 model。里面要包含

• 标题
• 内容
• 薪资上限
• 薪资下限
• 联系方式
• 隐藏/显示

后台

而后台的设计，需要一个 User 的 model。而 user model 需要

• admin 身份登记
• 能够有 登入/登出 功能

最后得到一个可以实作的版本

然后我们就得出了最后一个可以实作的版本：

• 身为管理者，我可以新增职缺需求；
  • 包括「标题」「内容」「薪资上限」「薪资下限」「联系方式」
• 身为管理者，我可以编辑、删除、隐藏职缺需求 （在后台）；
• 身为使用者，我必须「登入」才能申请职缺；
• 身为使用者，我必须要有「admin 身份标识」才能进入后台。

3. Fork别人的项目

Fork别人的项目，并在本地跑起来。

先Fork别人的项目，然后执行：

1
2
3
4
5
6
7

git clone git@github.com:XXXXX/job-listing.git （XXXXX 是你的 github 用户名）
cd job-listing
git checkout -b version-1
cp config/database.yml.example config/database.yml
bundle check
bundle install
rails s

参考：
Rails 多人开发，database.yml 怎么管理？

4. Pull Request

Pull Request 教学

如果要对他人的 Repo 进行修改或是建议的话，参考以下流程：

• 先 Fork 过来，并且切换新的分支(Branch)
• 将新的 commit 推送到远程代码仓库(git push origin 新的Branch)
• 到自己或对方的专案提交 Pull Request

5. 网站开发常用套路（1）

已招聘网站为例，其他网站的快速开发，也可以按照这个套路开始。

回顾一下我们的Userstory

• 身为管理者，我可以新增职缺需求；
• 包括「标题」「内容」「薪资上限」「薪资下限」「联系方式」
• 身为管理者，我可以编辑、删除、隐藏职缺需求 （在后台）；
• 身为使用者，我必须「登入」才能发表职缺；
• 身为使用者，我必须要有「admin 身份注记」才能进入后台。

步骤其实是这样的：

Step 1

• Fork或 rails new 新项目
• git 存档
• 套上 Bootstrap 页面/navbar/footer/flash
• 安装 simple_form
• 安装 devise （须做到可以登入 / 登出）
• 安装debug套件
• 安装展示model关系的gem套件

参考文章：穿衣服。

还可以顺便将debug套件和model关系套件加上。

安装debug套件

打开Gemfile

1
2
3
4
5
6
7

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
  gem 'sqlite3'
+ gem 'pry'
+ gem 'awesome_rails_console'
end

执行

1
2

bundle install
rails g awesome_rails_console:install

安装展示model关系的gem套件

安装 Graphviz 2.22+:

终端机中执行

1

brew install graphviz

安装gem rails-erd

1
2
3
4

gem 'qiniu-rs'
gem 'figaro'
+ gem 'rails-erd'
group :development, :test do

执行

1

bundle install

使用说明：

• 终端机中执行 rake erd 可生成erd文件
• GEM自动生成的PDF格式文件，在ATOM中无法正常打开，显示一堆乱码。
• 在ATOM中找到新建的 erd.pdf ，右击找到 Show in Finder点击进入文件夹找到该文件，打开即可看到目前的model之间的关系。

Step 2

• 实作 Job 的 CRUD （ JobsController )
• 先只开 Job 的 title, description（最小可行性界面）

Step 3 - 1

• 要新增 / 修改 / 删除 Job 必须得登入

Step 3 - 2

• 实作 Job 的 Admin 的 CRUD，在 admin/jobs
• 下拉选单要有一个链接可以到 admin_jobs_path

Step 3 - 3

• 在 admin / jobs 皆需要先过 require_is_admin 才能进入，否则回去首页
• 定义一个条件 admin? 判断是否是 admin

Step 3 - 4

• 新增「薪资上限」与「薪资下限」、「联络方式」
  • wage_upper_bound
  • wage_lower_bound
  • contact_email
• 「薪资上限」、「薪资下限」不得为空
• 「薪资」必须是数字

1
2
3

validates :wage_upper_bound, presence: true
validates :wage_lower_bound, presence: true
validates :wage_lower_bound, numericality: {greater_than: 0}

Step 3 - 5

• 管理者可以设定职缺是否在前台隐藏

Step 3 - 6

• 被设为隐藏的职缺，是不可以在前台看到的。

1
2
3

def index
  @jobs = Job.where(:is_hidden => false)
end

Step 4

• 首页职缺应该按照发表时间顺序

1
2
3

def index
  @jobs = Job.where(:is_hidden => false).order("created_at DESC")
end

如果你准备做第三遍，请不要特意去背诵后缀为 html.erb 文件里的代码。需要背诵的只有 app/controllers/xxx.rb 里的 CRUD。