---
tags: 網頁切版直播班 - 2022 夏季班
---

# 如何發想程式作品題目

## 時間規劃
建議你**安排時間 1.5~2 個月，也就是 6~9 週來打磨一個作品**：
如果以 8 週來說，那麼可以做以下的安排：
- **第 1 關：思考主題**，可以先選 2~3 個，若沒想法，也可以爬一下社群文章大家都做哪些 side project，市場接受性比較高
- **第 2 關：規劃使用者故事(user story)、網站地圖(Sitemap)**：，建議先規劃到 10~20 個，最後再增減到 12 個上下，並思考哪些算是你會花比較多時間的「核心功能」
- **第 3 關：畫線稿、流程圖**：釐清核心功能、設計網站動線
- **第 4 關：進入開發期(保留三週)**：
- 第 4-1 關：環境建置
- 第 4-2 關：layout 設計開發
- 第 4-3 關：核心功能開發 (首頁、訂單頁)
- **第 5 關：簡報設計**：分享自己的學習歷程
- **最終關卡**：成果發表簡報

## 以 2022 夏季切版直播班為例子
1. 6/5：註冊課程
2. 6/17：開學典禮，開始發想主題
3. 7/8(五)：開課
4. 7/17：準備第一、二關
5. 7/31：準備好線稿圖
6. 8/1~8/31：**四週專注開發**
7. 9/1~/10：微調打磨、簡報準備
8. 9/18：成果發表會

# 第一關：如何發想作品，提供三建議
1. **復刻網站致敬**：例如蝦皮、訂票網、訂閱制服務網站。
* 你有用 App 嗎？
* 你的網頁書籤有哪一些？
3. **蹭時勢流量**：疫情、電量、KOL 平台
4. **思考自己想解決的問題**：甜點店點餐系統、韓國服飾店家網站

## 時勢流量範例
如果對題目沒想法時，有時做最近比較火熱的話題也不錯，舉些例子給你參考
1. 你所在縣市的登革熱非常嚴重，政府為了讓大家看到噴灑藥物軌跡，提供了 路線 OPEN DATA API，你藉由這資料集做了 Google Map 儀表板資料
2. 某個耳聞人知的大網站，因為 UI 或前端動線很差，被大家念爆，於是你藉由這題目來思考，如果是你，會如何重製網站動線。
3. 參加業界皆知的熱門技術活動，例如 IT 邦連續 30 天寫文活動、特定主題技術黑客松，趁這機會短時間累積能量，同時參與的技術活動內容，也可放到履歷上加分
4. 近期元宇宙趨勢火熱，你也對 VR 議題有興趣，所以搭建了一個網站，搜集 VR/元宇宙的資訊，來介紹何謂元宇宙。
而做這種題目有一個好處，當第一關人資 HR 看你的履歷時，儘管他不懂技術，但至少在作品辨識上，能知道你透過技術來跟上時代流行，相對來說也加分不少。

## 思考自己想解決的問題範例
這個方向是我最推薦的，但相對來說也可能最花時間，但就我歷往經驗來說，也是被邀請面試率最高的。
因為他是最能彰顯自己「有解決問題能力」的作品，以下我就舉一些例子給你參考：
1. 你以前做韓國衣飾網拍，想要幫自己搭建一個網站，來推銷自己的產品
2. 女朋友最近在開早餐店，所以想依照早餐店情境，幫她做一個線上點餐系統，幫助他的客戶點餐可以更順利
3. 你很喜歡旅遊，並到各咖啡廳遠端工作，你很希望能獲得店面是否有插座的情報，但 Google Map 通常都不會顯示，於是你起心動念，做了一個咖啡廳地圖情報網，讓數位遊牧民族都能一起提供適合工作的咖啡廳情報
4. 曾經是國中老師，對那時的校務系統的爛介面耿耿於懷，於是想重製一款專給校園用的校務系統
5. 母親是做民宿，但找不到合適的訂房系統，於是你一手包辦網站開發+訂房系統
這些題目都有個共通性，那就是「有故事性的」，沒有人不喜歡聽故事，更喜歡聽你是工程師，你透過自己的技術，去解決你周遭遇到的問題。
所以不妨從你自己的興趣、經歷、親友難題，來用紙筆都記錄下來你的人生歷程遇到的事情，或許靈感就不經意就蹦出來了。

## 做作品的兩個小叮嚀
1. 叮嚀一：**盡量不要做太冷門，大家都沒接觸過的題目**，舉例來說「YSC 偶像介紹網站」、「阿克希原料庫存」。

2. 叮嚀二：「**作品主題，就容易吸引到相關產業對你有興趣**」，但該產業是否是你喜歡的？或者是不排斥的？或者是否有前景？這也是你可以衡量的一環。

## 常見 QA
**Q：我想做 JS 接 API，但不確定自己訂出的功能是否能做到？**
A：請檢視自己的 JS 程度
* LV1：介接第三方資料 GET API，做篩選器功能 (例：[蔬菜比價網](https://hexschool.github.io/js-filter/)、[API](https://hexschool.github.io/js-filter-data/data.json)、[出處](https://data.gov.tw/dataset/8066))
* LV2：介接 restful API，透過 [JSON Server](https://www.youtube.com/watch?v=9TAanXxNvEI) 做 Todolist API 新增刪除修改([設計稿](https://hexschool.github.io/js-todo/#artboard0)、[CSS版本](https://codepen.io/hexschool/pen/KKmvpPP))
* LV3：介接 JWT 登入註冊功能，來做會員制代辦事項服務([設計稿](https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList?node-id=0%3A1)、[API](https://todoo.5xcamp.us/api-docs/index.html?fbclid=IwAR2k20zfzmWok6NTDX_S45KvBAzpqWaRazPGHg8K2Zb0FsmkF4FmK4WYwTE)、[活動影片](https://www.youtube.com/watch?v=DpvqDA_VUkY))

請看自己的程度是在 LV 幾，這樣會比較好規劃作品

**Q：我很想做登入、註冊、加入購物車、金流功能，我知道要後端跟資料庫，這樣我可以規劃起來嗎？**
可以，你可以先做純靜態的 CSS 切版頁面，來報名成果發表會，**之後再依照自己的能力發展，讓作品跟著你一起成長**

## 規劃程式作品延伸閱讀

1. [程式專題開發流程分享 — 以火箭隊為例](https://medium.com/@gonsakon/%E7%A8%8B%E5%BC%8F%E5%B0%88%E9%A1%8C%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B%E5%88%86%E4%BA%AB-%E4%BB%A5%E7%81%AB%E7%AE%AD%E9%9A%8A%E7%82%BA%E4%BE%8B-fc2c2b647a2f)

## 第二關：使用者故事(user story)

「**我是什麼角色，我可以操作平台哪些功能，獲得預期的利益**」，條列 3~7 個核心功能。

1. 我是前台使用者，我想使用註冊功能，獲得會員資格
2. 我是前台使用者，我想使用發文功能，發布一篇貼文
3. 我是前台使用者，我能進入會員中心修改個人資料，並成功修改個人密碼
4. 我是後台管理者，我能從首頁儀表板，觀看到今天有多少人註冊
5. 我是最高管理員，我能進入後台管理的貼文管理，去刪除指定貼文，同時前台也會顯示貼文被刪除

### 以網站為例

1. [IT 邦幫忙](https://ithelp.ithome.com.tw/)
2. [六角學院](https://www.hexschool.com/)
3. [黑客松 The F2E](https://2021.thef2e.com/)

### 學員發想
1. [攀岩運動網站](https://discord.com/channels/801807326054055996/987377418090213396/988328539227033620)
2. [車宿地圖](https://discord.com/channels/801807326054055996/987377418090213396/990881846118195250)

:::spoiler The F2E user story
### 個人報名者使用者故事

1. 開放報名期間，我可以在此活動進行報名流程
1. 團體組組長可以填寫隊名
2. 我報名後，之後仍可編輯我的報名資訊
- 組別選了就不能改變！（避免團體組改個人的驗證）
- 個人組可以改個人組別，例如從 前端到 UI 或是 UI 到前端
- 團體組可以改團體身份，例如：UI 改前端 或是 前端改其他（仍須符合一個 UI 一個前端）
3. 我報名後，可以進入專屬 discord 群組進行互動
1. Discord：身份組、頻道名稱、是否需要公告、直播平台（YT or Zoom）、機器人公告
4. 我報名後，我能藉由釋出的 API，讓大家可以看到目前報名人數、各參賽者資料(摒去個資)
5. 開賽期間，我能看到所有人的 UI / F2E 的作品進行參考
6. 開賽期間，我可以投稿我的作品，並檢視自己是否有在期限前投稿
7. **許願 -** 開賽期間，我是前端工程師，我能對我喜歡的投稿人按讚
1. 按讚不分身份，只要是用戶都可以
8. **許願 -** 開賽期間，我是 UI 設計師，我能看到有誰採用了我的稿件
1. 個人組有報前端就採用
2. 個人組有報 UI 就能看到採用
3. 團體組不能採用
4. 個人組也不能採用團體組的設計稿

### 第三屆團體組使用者故事

1. 我是團體組組長，我可以在此活動進行報名流程，並附上我組員的報名資訊
2. 我是團體組組長，開賽期間，我可以代表組別進行團體組投稿

> 一個人不可同時報團體組跟個人組
>
:::

### 網站地圖
1. [交通部網站導覽](https://www.taiwan.net.tw/m1.aspx?sNo=0000165)

## 第三關：wireframe 網站動線發想
1. 依照使用者故事與網站導覽編號，設計 wireframe 線稿圖
2. wireframe 文案與欄位必須正確，不可簡略
### 示範
1. The F2E([wireframe](https://cacoo.com/diagrams/fcL1BAphQvrlVBKo/AC1AC)、[網站](https://challenge.thef2e.com/))
2. 切切([wireframe](https://whimsical.com/ui-flow-9ikcQ3ThQBedxZbaGUh6gP)、[設計稿](https://www.figma.com/file/gM3CvZAEeGbMHNhtPQDLb3/%E5%AF%AB%E4%BD%9C%E5%B9%B3%E5%8F%B0?node-id=166%3A418)、[簡報](https://docs.google.com/presentation/d/1Qn2RvbRwQreSnpqyr1bc8HOt3NBO9UiC/edit))
3. 做伙來讀冊([wireframe](https://www.figma.com/file/v6GiTIoqpLOuc9waU4vYzx/%5Bedited%5DStudy-circle_wireframe?node-id=0%3A1)、[設計稿](https://xd.adobe.com/view/8828c659-a0a6-4b1d-b730-c07306e6dcdc-dd7b/)、[網站](https://thak-tsheh.rocket-coding.com/index.html#/study-circle))
4. 腦塞 side project([wireframe](https://www.figma.com/file/4JgkaPEnKdcYlZ7e0xTSyg/Prototype_SideProject?node-id=14%3A53)、[Mockup](https://www.figma.com/file/4JgkaPEnKdcYlZ7e0xTSyg/Prototype_SideProject?node-id=0%3A1)、[簡報](https://www.figma.com/file/4JgkaPEnKdcYlZ7e0xTSyg/Prototype_SideProject?node-id=1480%3A7622))
### 版型發想
* [Bootstrap 5 template](https://themewagon.com/theme-framework/bootstrap-5/)

## 火箭隊專題學員提供

1. 堅果電商 ([簡報](https://drive.google.com/file/d/1PYu6eRsj3yd4hQhagQBw_c6VPNcQXoqO/view?usp=sharing))

## notion 資訊

1. 作品名稱
2. 作品緣由(為什麼你要做這個作品)
3. 使用者故事
4. 網站地圖(https://whimsical.com/)
5. wireframe(https://whimsical.com/)
6. 聯絡資訊(Email)