###### tags: Launchpad

[toc]

# 打造專業作品集

### 打造專業作品

如果這個專案是你應徵面試的作品，那你就要對於專案的品質精益求精，讓作品可以幫你說話，更可以展現你在 ALPHA Camp 所學習到的一切。

下面的小叮嚀，是為了幫助你提高專案的整體完成度：

* 讓專案作品更真實，作品上的「假資料」請務必要非常「真實」，圖片素材來源可參考圖庫：<a href="https://unsplash.com/" target="_blank">Unsplash</a>，<a href="https://www.flickr.com/" target="_blank">Flickr</a>，<a href="https://burst.shopify.com/" target="_blank">Burst</a>
* 到 <a href="https://www.freelogodesign.org/" target="_blank">FreeLogoDesign</a> 或類似網站設計一個 logo
* 建議到 <a href="https://tw.godaddy.com/" target="_blank">GoDaddy</a> 或 <a href="https://www.namecheap.com" target="_blank">namecheap</a> 購買一個適合的作品網址，而網址該與網站的 logo 或專案的名稱一致
* 瀏覽器的頁籤 favicon 符合專案 logo
* 如有使用任何第三方開源套件，需注意各種著作權的宣告方式
* 沒有資料的預設頁面
* 有 404 頁面與 302 自動跳轉
* 試著以 <a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank">Google Pagespeed</a> & <a href="https://search.google.com/test/mobile-friendly" target="_blank">Google Mobile-Friendly</a> & <a href="https://tools.pingdom.com/" target="_blank">Pingdom</a> 進行測試

### 客製化你的專案

除了完成基本功能外，建議同學也可以自行研究市面上不同的活動平台，並加以發想，看看能否設計新的功能，或是更細膩的使用者體驗，來突顯專案的特色。

如：針對電商網站「使用者新增會員」這功能來說，，除了做到標準的 form submit 外，可以思考下面幾點：

* 新增會員時會遇到什麼困難？
* 如何讓這個過程更方便？例如：當使用者輸入手機時，出現大型數字鍵盤方便點選。
* 完成資料填入時，是否能持續進行後續動作，資料補登流程為何？

### 進階實務工具應用

身為一個專業工程師，不斷學習新技術、新工具是必要的事。在這裡，我們提供幾個業界常用，但並沒有包括在教材中的軟體工具，以及它們的使用場景。我們建議你可以去探索，或是與助教討論一下這些工具的使用方式，讓你的專案更專業：

* **Database**
* 針對如電商、金融類型的網站，資料庫的操作要非常謹慎。例如提款與更新餘額等操作發生時，資料都必須保持一致性。同時，如何提高資料庫的效能也非常重要
* 常用工具／優化技巧
* **Transaction** 用於不可中斷的資料庫操作，讓資料保持一致性
* **Normalization/index** - Normalization 與 Index 是兩種資料庫設計的優化技巧，可以增加資料表查詢的效能

* **Caching**
* Caching 「快取」是用於 API 的暫存資料，將常見的查詢暫存起來，避免頻繁向資料庫索取資料所帶來的效能瓶頸
* 常用工具：<a href="https://redis.io/" target="_blank">Redis</a>

* Message Queue
* 有些操作是「有順序」但「需要時間處理」的行為，可以搭配 Message Queue 實現，其應用場景如訂票與寄簡訊等
* 常用工具：<a href="https://www.rabbitmq.com/" target="_blank">RabbitMQ</a> 與 <a href="https://kafka.apache.org/" target="_blank">Kafka</a>
* Web Sockets - websockets/Socket.io
* 當應用程式當中需要「即時雙向」的溝通，可以利用 Socket 來實現，不用受限於 HTTP 的 Request-Response 單向溝通。
* 常用工具：websockets/<a href="https://socket.io/" target="_blank">Socket.io</a>

* GraphQL
* GraphQL 是一種新的 API 設計概念，相對於 RESTFul 以物件為單位的請求，GraphQL 提供請求方更彈性的查詢機制。如此一來，不需要前端增加一個需求，後端就必須增加對應的 API
* 處理 Domain/SSL 機制
* 當服務最後要上線時，通常會在應用程式前面再加上一層 HTTP Server ，負責處理 Domain 、SSL(HTTPS) 等機制
* 常用工具：<a href="https://www.nginx.com/" target="_blank">Nginx</a>
* 開發環境優化
* 為了讓開發環境保持乾淨，可以利用 Docker 的機制來取代 VM 達到更輕量的環境分割，比如 <a href="https://kubernetes.io/" target="_blank">Kubernetes</a> 用於 <a href="https://www.docker.com/" target="_blank">Docker</a> 的管理。

### 專注於前端的同學

如果你是專注於開發前端的同學，我們提供一個新的方式，可以用串接 API 的方式來呈現你的作品，<a href="https://jamstack.org/" target="_blank">JAMStack</a> (<a href="https://ithelp.ithome.com.tw/articles/10216119" target="_blank">中文介紹</a>) 可以透過第三方提供的服務放資料，吐出 API 供前端串接，例如：<a href="https://prismic.io/" target="_blank">Prismic</a>。

另一個以 Trello 為上資料的例子：<a href="https://letswrite.tw/trello-db-basic/" target="_blank">https://letswrite.tw/trello-db-basic/</a>，但是比較可惜的是 Trello 的資料需要設定為公開才可以。

### 參考專案

以下是過去學生完成的畢業專案，你可以參考他們專案的完整度：

#### Gogoro 遊戲化旅遊闖關 App

ALPHA Camp 學生跟 **Gogoro** 合作，打造一款旅遊闖關遊戲 (使用 RWD 透過瀏覽器呈現)。透過遊戲化功能，Gogoro 希望能鼓勵他們的車主能騎更多，提高使用率。

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://www.youtube.com/embed/PvFfHp2zaMM" frameborder="0" allowfullscreen></iframe></div>

#### 社群數據分析工具

ALPHA Camp 的合作夥伴**社企流**想幫助行他們的行銷團隊更容易去監控活動成效。我們的學生打造了一個自動化數據報表 (dashboard)，讓不管是 Facebook、Google、內容行銷呈現，能一目暸然。

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://www.youtube.com/embed/H_VDhgvAMgw" frameborder="0" allowfullscreen></iframe></div>

---

# 作品集引導：自主專案

### 大型自主專案的目的

為了讓同學能**綜合應用**所學，並在產品打造上建立接近業界水準的能力，我們蒐集了業界技術主管／CTO／CEO 們的意見，整理成指定題目與相關規格，希望能讓同學在完成專案時，充分發揮你的技術力與產品力。

### 專案題目

我們會提供 4 個業界常見的指定題目與現成作品，如下：

1. Customer Relationship Management (CRM) 系統
2. 電商網站
3. 旅遊網站
4. 活動平台

當然，如果你對產專案作品有不一樣的想像，我們也鼓勵你去嘗試。但在動手寫 code 之前，要先清楚定義一個具體的受眾以及你產品提供的價值。再把核心功能分階段列出來，按部就班的把專案完成。

我們非常建議去複習課程前面「產品設計」與「軟體開發流程」的兩個章節的內容。

至於希望只專注在前端的同學，你也可以參考像<a href="https://github.com/carlo-bruno/ga-wdi23-project-1" target="_blank">這樣</a>的作品，打造你自己的專案。但要記得，對一個軟體工程師來說，**技術力**才是你的核心能力。

### 品質與完成度要求

因為這個專案產品會成為你未來的求職作品，所以我們對它的品質與完成度要求，將針對你求職的方向而有所不同：

#### 前端

* 產品功能與使用者體驗的完成度與品質
* 頁面版型與互動的像真度（針對參考現有產品）
* Mobile first/RWD 開發的完整度（行動裝置的瀏覽體驗良好）
* HTML/CSS 架構與 coding style 的清晰度
* 透過參考範例，API 規格定義合理，並能自行產生假資料
* 前端框架的應用適當

#### 後端／全端

* 程式碼邏輯清楚
* 功能寫在適合的位置／檔案中
* 核心功能的完成度
* 資料庫的設計適當
* 簡單的功能測試
* 成功佈署（至少需在 Heroku 上，建議佈署到 AWS/GCP）
* 適當整合第三方 API
* 為產品的特殊使用場景，提供有效的問題解決方案 (如：使用 Redis）
* 設計並打造簡單的演算法處理資料

#### 個人專案管理

雖然這是一份個人專案，但養成專業工程師的技能與素養仍然是必要的。你需要符合以下規定：

* 提供一份清楚的功能／使用者故事 (user story) 表單
* 使用 Trello (或其他工具) 清楚規劃／記錄準備開發的功能，並註明每張 ticket 的狀態 (e.g. backlog, in development, testing, complete)
* 定義 Git commit 的頻次、原則與 comment style
* 撰寫一篇個人部落格，描述整個專案的過程；e.g.

* <a href="https://tw.alphacamp.co/blog/alpha-camp-student-mike-graduation-project" target="_blank">從零打造「美食預定」電商平台，三人團隊的AC畢業專案心得</a> (Mike)

* <a href="https://medium.com/@ianyshuang/triptrip-leaning-notes-f49aab04cb1e" target="_blank">Alphacamp — 畢業專案心得會</a> (Ian)

* <a href="https://medium.com/pierceshih/%E9%9B%BB%E5%95%86%E5%B0%88%E6%A1%88%E5%AF%A6%E6%88%B0-%E5%8E%9F%E4%BE%86%E7%94%A2%E5%93%81%E9%96%8B%E7%99%BC%E6%98%AF%E9%80%99%E9%BA%BC%E4%B8%80%E5%9B%9E%E4%BA%8B-529c3108a798" target="_blank">「電商專案實戰」- 原來產品開發是這麼一回事！</a> (Pierce)

* <a href="https://tw.alphacamp.co/blog/alpha-camp-web-dev-bootcamp-9-months-journey" target="_blank">在ALPHA Camp的九個月網路開發Bootcamp心路歷程</a> (Mike)

---

# 畢業專案題目：CRM 系統

### 問題

對於店家而言，他們需要一個簡單易懂的方式，用來記錄過去（或是潛在）客戶的資料、數據與行為，幫助他們提供最適合的產品與服務給最適合的客戶。

### 解決方式

Customer Relationship Management (CRM)，意即客戶關係管理系統：

* 能記錄現有與潛在客戶的資料，如個人資料、喜好，以及購買過的產品與金額等個人化訊息
* 能記錄現有與潛在客戶的行為，如購買過的產品與金額、溝通訊息等
* 能透過這些行為與資料將客戶分眾，讓店家可以針對最有價值的客戶，提供最適當的產品與服務

### 核心功能

一般的 CRM 系統會有以下的核心功能：

* 新增、修改與刪除客戶名單
* 記錄客戶的個人資料，包括名稱、職稱、聯絡方式、生日（提供生日優惠），以及其他客戶願意提供的資料
* 記錄客戶過去的行為，包括：
* 購買行為：購買過的產品（包括數量與金額）、購買日期與購買地點
* 溝通紀錄：客戶跟店家過去溝通的記錄與筆記
* 透過客戶資料（如 email 或手機號碼）來尋找特定的客戶記錄
* 透過篩選不同的參數，將客戶分類，例如：
* 特定時段內消費一定金額以上的大客戶
* 當月生日的客戶
* 根據客戶的屬性或是購買行為，定義不同的標籤來管理客戶，例如：
* 從潛在客戶到大客戶：lead → paid customer → VIP
* 根據客戶的資料，在適當的時候，透過 email 作客戶溝通
* 讓使用者輸出 (export) 特定的資料到 excel 或是 csv 檔案，作更深入的分析

### 錯誤訊息與處理方式

一個好的產品除了能讓使用者正常操作之外，更需要考慮到使用時會發生的不同狀況，加以處理，並顯示明確有效的警告／錯誤訊息來提醒使用者。比如：

專櫃人員在操作 CRM 時可能會犯什麼錯誤（例如新增會員時沒有輸入 email 或手機）？我們該如何處理這些狀況？系統該顯示什麼樣的訊息？

### 產品範例

為了讓你對 CRM 系統有更具體的認知，這裡準備了兩個範例。

#### HubSpot CRM

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/10776/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10776/ExportedContentImage_00.png"></a></div>

HubSpot 是業界最受歡迎的行銷軟體 (marketing software) 之一。而他們的 <a href="https://www.hubspot.com/products/crm" target="_blank">HubSpot CRM</a> 系統是免費的。它的功能非常完善，你可以參考 <a href="https://app.hubspot.com/academy/4959907/lessons/339/1872" target="_blank">HubSpot 提供的這系列 CRM 教學影片</a>（需先註冊免費帳號才能觀看），來瞭解 CRM 的功能與設計概念。不過以你的專案而言，並不需要完成 HubSpot 所有的功能。

#### AC 畢業生專案 - 茶籽堂 CRM

另外，ALPHA Camp 的學生曾跟我們的企業夥伴<a href="http://www.chatzutang.com/" target="_blank">茶籽堂</a>合作，打造了一個專門給茶籽堂實體店面員工使用的 CRM 系統。你也可以從以下的影片參考他們的功能與使用模式：

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://www.youtube.com/embed/GJRwUiQKTtA" frameborder="0" allowfullscreen></iframe></div>

如果你準備選擇 CRM 系統作為畢業專案，請參考上述的需求、功能與範例，來完成這個題目。

---

# 畢業專案題目：電商網站

### 問題

一般的線上賣場通常把所有的進駐店家放在一起，店家們並不能突顯各自的品牌風格，或是實現他們期待提供給消費者的購買體驗。更重要的是，客戶的購買資料與數據都是屬於賣場的，無法讓店家優化他們的產品與服務。

而中小企業店家希望能將他們的商品推廣到線上，接觸更多的消費者。

### 解決方式

一個專屬於中小店家的電商網站，讓店家可以輕鬆把商品上架，接受訂單。

### 核心功能

電商網站一般會分為「前台」與「後台」：

* 前台是一般消費者看到的頁面，目的是讓商品看起來吸引人，並讓消費者可以輕鬆下單。
* 後台是店家的管理系統。其目的是讓商家可以輕鬆經驗他們的線上商店。

從管理商品、追蹤訂單、執行促銷 (例如優惠卷發放)，甚至提供業績報表等，這些都是一個有效的電商網站該有的功能。

這裡我們提供了一些常見的核心功能：

店家能

* 一次上架多樣產品
* 清楚管理商店的產品種類、數量與定價
* 接受訂單與收取款項
* 設定各種優惠方式，如達到指定金額免運費、發放優惠卷 (coupon code) 等
* 查詢商品的銷售狀況
* 搜索與追蹤各種商品、客戶以及訂單資料，並能修改與刪除

消費者能

* 從購物車、結帳到付款，透過最簡短、方便的流程找到需要的商品並完成購買
* 查詢過去的訂單記錄
* 建立個人資料與產品收藏清單 (wish list)，方便未來購買
* 在付款成功後收到明確的訊息 (頁面與 email)，確認下訂成功

### 產品範例

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/10777/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10777/ExportedContentImage_00.png"></a></div>

為了讓你對電商網站有更具體的認知，我們以 <a href="https://www.citiesocial.com/" target="_blank">Citiesocial</a> 為範例，製作了一個簡單的網站說明：

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/401170380" frameborder="0" allowfullscreen></iframe></div>

### 錯誤訊息與處理方式

一個好的產品除了能讓使用者正常操作之外，更需要考慮到使用時會發生的不同狀況，加以處理，並顯示明確有效的警告／錯誤訊息來提醒使用者。例如：

* 當消費者下單時輸入了 1,000,000,000 或是其他錯誤輸入，系統該如何處理？
* 當消費者下單後需要修改訂單，該如何做？
* 商品缺貨時該如何顯示？
* 當同時有多位消費者在線上購物，我們如何防止庫存低的商品賣完後還能被下單？
* 當消費者使用的優惠券已經過期或無效，該如何顯示？
* 付款失敗時該如何處理？

如果你準備選擇活動平台作為畢業專案，請參考上述的需求、功能與範例，來完成這個題目。

---

# 畢業專案題目：活動平台

### 問題

辦活動或是講座時，主辦單位通常需要更多曝光的機會、接觸更多的消費者。但是，辦活動的流程還包含了售票（金流、銀行合作等）、退票的人工處理等，整個流程費時費力。

如果一次舉辦多場講座可能讓人心神耗盡。我們該如何讓活動能夠被有效管理、行銷與推廣呢？

### 解決方式

透過一個活動入口網站，讓各種類型的活動能集結在平台上。不論它們的規模是個位數，還是破萬人的大型活動，都可以在平台上輕鬆建置，規劃自己的售票方式，並且管理、行銷、推廣自己的活動！

### 核心功能

活動平台一般會分為「前台」與「後台」：

* 前台是一般使用者看到的頁面。目的是讓使用者瀏覽許多不同的活動或講座，並讓他們可以輕鬆報名
* 後台則是主辦單位的管理系統。目的是讓主辦單位可以管理現有的活動

管理活動、追蹤參加活動的人員，甚至提供報表等，這些都是一個活動平台該有的功能。這裡，我們提供了一些常見的核心功能：

主辦單位能

* 上架活動流程
* 管理活動的內容、價格與報名數量
* 接受購票訂單，收取款項
* 設定各種優惠方式，比如發放優惠卷 (Coupon code)、保留席次
* 查詢活動售票的銷售狀況
* 搜索、追蹤上架活動、訂單資料，並能修改與刪除

使用者能

* 從瀏覽到參與活動，透過最簡短、方便的流程找到活動並完成購票程序
* 能從不同角度搜尋到活動：使用者在所在的位置附近，時間排序
* 查詢過去的活動參與記錄
* 建立個人資料並追蹤主辦單位 (wish list)，方便下次參加
* 在購票成功後收到明確的訊息 (頁面與 Email)，確認下訂成功

### 錯誤訊息與處理方式

一個好的活動平台除了能讓使用者正常操作之外，更需要考慮到使用時會發生的不同狀況，加以處理，並顯示明確有效的警告／錯誤訊息來提醒使用者。例如：

* 當報名人數超過主辦單位的設定，系統該如何處理？
* 當使用者需要退票時，該如何做？
* 如果活動截止時，該如何顯示？
* 當消費者使用的優惠券已經過期或無效，該如何顯示？
* 如果付款失敗，該如何處理？

### 產品範例

為了讓你對活動平台有更具體的認知，我們提供了一個簡單的說明，以 Evenbrite 為例：

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/400801285" frameborder="0" allowfullscreen></iframe></div>

這裡，我們也提供了幾個不同活動平台使用介面 (UI) 設計的範例，給你參考：

1. 活動通：<a href="https://www.accupass.com/?area=north" target="_blank">https://www.accupass.com/?area=north</a>
2. KKTIX：<a href="https://kktix.com/" target="_blank">https://kktix.com/</a>
3. Meetup: <a href="https://meetup.com/" target="_blank">https://meetup.com/</a>

如果你準備選擇活動平台作為畢業專案，請參考上述的需求、功能與範例，來完成這個題目。

---

# 畢業專案題目：旅遊平台

### 問題

消費者在決定旅遊行程時，不管是機票、飯店或是旅遊體驗，都有許多考量的面向。這些時候，就會需要透過不同的資料來進行判斷，包含日期、地點、體驗類型、評價與價格等。

### 解決方式

一個一站式平台，讓消費者透過出遊日期、地點、體驗類型、評價、價格等多個面向，搜索、瀏覽，以及購買心儀的旅遊體驗。

### 旅遊平台的核心功能

旅遊平台與電商網站類似，一般也會分為「前台」與「後台」。不過兩者的使用者路徑與資料架構不同：

* 前台是一般消費者看到的頁面，目的是讓平台提供的旅遊服務吸引人，並讓消費者可以輕鬆下單
* 後台是平台的管理系統。平台管理者會把旅遊服務上架，同時管理以及追蹤訂單，甚至提供業績報表等

這裡我們提供了一些常見的核心功能：

平台管理者能

* 一次上架多樣產品
* 將旅遊商品分類，例如：國家／城市、屬性等
* 清楚管理旅遊商品的種類、數量與定價
* 接受訂單，並收取款項
* 發放優惠卷 (coupon code)
* 查詢平台上的銷售狀況
* 搜索與追蹤旅遊商品、客戶、以及訂單的資料，並修改或刪除有關的資料

消費者能

* 從瀏覽、購物車、結帳到付款，透過最簡短、方便的流程，找到需要的旅遊商品並完成下訂
* 查詢過去的訂單紀錄，更改或取消行程
* 建立相關的個人資料與產品收藏 (wish list)，方便往後購買
* 在付款成功後收到明確的訊息 (頁面與 email)，確認下訂成功
* 檢查旅遊商品，留下評論

### 產品範例

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/10781/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/10781/ExportedContentImage_00.png"></a></div>

為了讓你對旅遊平台有更具體的認知，我們以 <a href="https://www.kkday.com/zh-tw/" target="_blank">KKDay</a> 為範例，製作了一個簡單的網站說明：

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/401258108" frameborder="0" allowfullscreen></iframe></div>

### 錯誤訊息與處理方式

一個好的產品除了能讓使用者正常操作之外，更需要考慮到使用時會發生的不同狀況，加以處理，並顯示明確有效的警告/錯誤訊息來提醒使用者。例如：

* 當消費者下單後需要修改訂單，該如何處理？
* 如果旅遊商品已經超過名額，如何避免消費者下單？
* 當消費者使用的優惠券已經過期或無效，該如何顯示？
* 如果付款失敗，該如何處理？

---

# 開發期間，你要做什麼？

### 快速開發期

為期 4 周的快速開發期，你會體驗從無到有打造一個產品專案，解決一個實際發生的問題或是需求。在快速開發期開發專案，不只是學習，更是練習用程式語言解決問題的實戰演練。

#### 開發前準備

實作一個從無到有的專案，最忌諱的就是一開始就埋頭苦幹。在開發開始之前，確認專案目標、要解決的問題是很重要的，才能一致的目標往前衝刺。

從 program kick-off 到第一週的開發這段時間，請你完成以下功課：

* 根據要解決的問題或是痛點，以及初步的 user stories，定義出產品的完整使用流程
* 根據需求有初步的 ERD 架構、思考開發上可能面臨到的困難
* 根據需求以及定義出來的完整使用流程，能有初步的 wireframe，wireframe 是將想法視覺化、具象化的過程，會有助於專案的討論

**請同學們準備好以上資料，並在實際開發前和小組助教約第一次 tech hour 討論是否可行。**
**請同學們各自選題，但相同性質的題目，我們會分配給同樣的助教導師，視情況一同進行 tech hour**

#### 每週開發進度討論

以下提供每週開會討論的方式給同學參考：

* 會議前準備：提前將會議的 agenda、會議的目的、要討論的主題，提前 1 天透過 basecamp 分享給助教
* 會議進行：Demo 前一次會議之後到目前為止實作的使用者體驗；要討論的主題或是要進一步釐清的需求；到下一次會議預計會完成哪些使用者體驗
* 會議結束後：將會議記錄，在會議結束當天，透過 Basecamp 群組給所有與會者知道。

#### AC 建議的每週開發重點：

**Preparation / Sprint 1**

* 根據要解決的問題或是痛點
* 定義初步 user stories 與產品的完整使用流程
* 根據需求有初步的 ERD 架構、思考開發上可能面臨到的困難
* 根據需求以及定義出來的完整使用流程，能有初步的 wireframe，wireframe 是將想法視覺化、具象化的過程，會有助於專案的討論
* 確認預計會使用的第三方服務／API／library
* 第一次助教 tech hour 確認：

* 1) 要完成的產品目標；
* 2) 各階段開發重點；
* 3) 確認技術可行性的風險項目 (尤其是第三方服務)

**Sprint 2**

* 完成專案基礎架構 (e.g. model design, user authentication.....etc)
* Key feature 開發 / 實作產品完整使用者體驗流程
* 驗證關鍵功能的技術可行性 (e.g. 查閱第三方服務文件、模擬串接流程等等)
* 第二次助教 tech hour：依實際工作內容，再次確認：

* 1) 要完成的產品目標；
* 2) 各階段開發重點；
* 3) 技術可行性驗證 (尤其是第三方服務)

**Sprint 3**

* deploy to Heroku or GCP
* UI implement / 套版
* 功能優化

**Sprint 4**

* 專案收尾，確認【專案口試評審標準】裡的項目是否都有完成
* 第三次助教 tech hour 確認專案完整度

**Feature Freeze 後**

* 不能修改 deploy 網址、不能新增 user story
* 根據助教的回饋與提出的 issue 做修改
* 準備畢業口試的簡報

#### Weekly Check-in @ Basecamp

請你在 basecamp 群組中回報團隊開發的近況、遇到的困難、下週預計的進度以及是否有固定與提案主開會討論專案內容，請在**週日中午前**完成回報。

除了讓 AC 團隊清楚同學們專案開發的進度以及狀況，我們也會針對團隊遇到的困難或是開發的 priority 給予適時的回饋（但不是 PM 的角色，開發的 priority 以及溝通的責任仍然在團隊身上）。

更多關於快速開發期中，會提供給團隊的支援，會在下個單元中有更詳細的說明。

---

# 畢業專案開發支援

### 畢業專案支援 Tech Office Hour

#### 說明

為了幫助同學能順利完成畢業專案，我們特別加開安排了 4 次助教支援。也為了能夠有效利用助教與同學們的時間，建議同學們將 4 次的 Tech Office Hour 安排在不同的專案開發階段，讓助教們能夠有效地給予適當精準的回饋與修改建議。同時也請同學務必遵守下列的實行規則，讓你們的 Tech Office Hour能夠更順利進行。

以下提供開會討論的方式給各位同學參考：

#### 實行規則

* 會議前準備：提前將會議要討論的主題，提前至少提前 24小時透過 basecamp提供給助教
* 每組團隊總共有 4 次的 Tech Office Hour，每次時間為 1 個小時。
* 會議進行：Demo 前一次會議之後到目前為止實作的功能；要討論的主題或是要進一步釐清的需求；到下一次會議預計會完成哪些功能開發
* 會議結束後：將會議記錄和收穫，在會議結束當天，上傳到每組的 Basecamp 群組

#### 如何在 Tech Office Hour 提問

為了有效發揮 Tech Office Hour 的效用，請務必在諮詢前 24 小時將以下資訊上傳到 basecamp給助教，幫助助教針對開發的狀況進行事前準備：

1. 就整體任務，你目前已經完成了什麼？
2. 現在的任務現狀，和你最一開始設計的 User Stories，有沒有任何演化需要先 Update 的？
3. 當前功能的階段性目標是什麼？
4. 就你打算要實現的功能，在技術面上遇到了什麼難題、阻礙？
5. 是否已嘗試或思考過某些方法？若有，針對你試過或想過的這些方法，有什麼困難？
6. 就以上提到的困難，你期待在這次 office hour 裡，得到哪方面的技術協助？

以上的資訊，能呈現的愈充分詳細（如錯誤訊息截圖、文字描述狀況），對助教提供協助會有愈大的幫助。

#### 約 tech hour 範例

以下是過往同學的優秀範例，請同學們在跟助教約 tech hour 時，請務必事先說明狀況才能讓助教也更有效率協助你們的專案進行。

<div style="width:100%"> <a href="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8974/ExportedContentImage_00.png" target="_blank"><img style="max-width:500px;width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8974/ExportedContentImage_00.png"></a></div>

<div style="width:100%"> <a href="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8975/ExportedContentImage_01.png" target="_blank"><img style="max-width:500px;width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8975/ExportedContentImage_01.png"></a></div>

#### 會議連結

Tech Office Hour 會以線上會議的形式進行，AC 不會協助提供 zoom 的連結，需要同學自行準備會議連結並寄給助教。

Zoom 的免費方案有限制 40 分鐘，在這裡告訴團隊一個小 tip，讓團隊在 40 分鐘跳出之後，可以繼續使用同一個 zoom 連結進行會議。登入 Zoom 之後進到 <a href="https://zoom.us/profile" target="_blank">https://zoom.us/profile</a> 頁面（如下圖），你會看到 Zoom 有提供一組「個人會議 ID」，使用這個做為會議連結，在 40 分鐘時間限制到了之後，只要在再重新點連結就可以繼續進行會議囉！（記得也要提醒助教點同個連結進入會議）

<div style="width:100%"> <a href="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8976/ExportedContentImage_02.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/8976/ExportedContentImage_02.png"></a></div>

### 注意事項

請避免詢問 UI 設計、排版的問題，如果團隊使用 Bootstrap 產出頁面有遇到困難，建議團隊直接購買套版來解決。

另外也提供團隊關於 UI 設計的參考連結：

* <a href="https://support.balsamiq.com/ui101/" target="_blank">Introducing: UI Design 101</a>
* <a href="https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/" target="_blank">Comprehensive guide on UX Design</a> (Smashing Magazine)
* <a href="https://learntocodewith.me/posts/color-palette-tools/" target="_blank">21 Color Palette Tools for Web Designers and Developers</a>