Assignment 3 - Rails 宝可梦图鉴 (Pokédex)

项目简介

这是一个基于 Ruby on Rails 的网站，调用 PokéAPI 的免费 JSON API，展示宝可梦数据。

• Index 页面：按类型筛选宝可梦，以表格形式展示
• Details 页面：点击某只宝可梦查看详细信息（属性、技能、数值条）

---

项目文件结构

pokedex/
├── app/
│   ├── controllers/
│   │   └── pokemon_controller.rb   # 控制器：index 和 details 两个 action
│   ├── models/
│   │   └── pokemon.rb              # 模型：所有 API 请求和数据解析方法
│   ├── views/
│   │   ├── layouts/
│   │   │   └── application.html.erb  # 页面布局（导航栏等）
│   │   └── pokemon/
│   │       ├── index.html.erb       # 首页（表格 + 筛选）
│   │       └── details.html.erb     # 详情页
│   └── assets/
│       └── stylesheets/
│           └── application.css      # 自定义 CSS 样式
├── config/
│   └── routes.rb                    # 路由配置
├── Gemfile                          # 依赖（含 Bootstrap gem）
├── Procfile                         # Heroku 启动配置
└── README.md                        # 本文件

---

本地运行步骤

前提条件

确保已安装：

• Ruby 3.2.x
• Rails 7.1.x（gem install rails -v 7.1.5）
• Bundler（gem install bundler）

第一步：解压项目

把 zip 文件解压到一个目录，例如 C:\projects\pokedex

第二步：安装依赖

cd C:\projects\pokedex
bundle install

如果提示 bundle 找不到命令，先运行 gem install bundler

第三步：启动服务器

rails server

或简写：

rails s

第四步：打开浏览器

访问：http://localhost:3000

---

使用示例

按类型筛选（Index 页面）

网站默认显示 fire（火系）宝可梦。你也可以直接在地址栏加参数：

URL 示例	说明
http://localhost:3000/pokemon?type=water	显示水系宝可梦
http://localhost:3000/pokemon?type=grass	显示草系宝可梦
http://localhost:3000/pokemon?type=electric	显示电系宝可梦
http://localhost:3000/pokemon?type=dragon	显示龙系宝可梦

也可以直接在页面上用下拉菜单选择类型，然后点 Search。

查看详情（Details 页面）

在表格中点击任意宝可梦的 View 按钮，或直接访问：

http://localhost:3000/pokemon/pikachu
http://localhost:3000/pokemon/charizard
http://localhost:3000/pokemon/bulbasaur

---

部署到 Heroku

第一步：注册并安装

1. 注册账号：https://signup.heroku.com
2. 下载 CLI：https://devcenter.heroku.com/articles/heroku-cli
3. 重启终端，运行 heroku --version 确认安装成功

第二步：登录并创建应用

heroku login
heroku create your-app-name

your-app-name 随便起，比如 my-pokedex-app（全球唯一）

第三步：初始化 Git 并推送

cd C:\projects\pokedex
git init
git add .
git commit -m "initial commit"
git push heroku main

第四步：设置环境变量

heroku config:set RAILS_SERVE_STATIC_FILES=true
heroku config:set RAILS_LOG_TO_STDOUT=true

第五步：打开网站

heroku open

或直接访问 https://your-app-name.herokuapp.com

---

作业提交内容

提交时需要包含：

1. zip 文件：整个项目文件夹打包（不含 node_modules 文件夹）
2. Heroku 链接：格式为 https://your-app-name.herokuapp.com
3. 测试说明（可以复制以下内容）：

测试说明：
- 首页默认显示 fire 类型宝可梦
- 通过下拉菜单或 URL 参数 ?type=xxx 切换类型
- 可用类型：fire, water, grass, electric, ice, dragon, psychic 等
- 点击表格中的 View 按钮查看宝可梦详情
- 示例 URL：
    https://your-app-name.herokuapp.com/pokemon?type=water
    https://your-app-name.herokuapp.com/pokemon/pikachu

---

常见问题

Q: bundle install 报错
A: 确保 Ruby 是 3.2.x 版本，运行 ruby --version 检查

Q: 页面显示 "Could not load Pokemon"
A: API 请求失败，检查网络连接。PokéAPI 偶尔会限速，稍等重试即可

Q: Heroku 推送失败
A: 确认已运行 heroku login，以及项目根目录有 Procfile 文件