---
tags: g0v-summit, 2020
---
# 2020-05-17 決定 Summit 網站技術架構

## 會議資訊

1. 時間： 5/17 （日）19:00 - 20:00
2. 行事曆：[Google Calendar](https://calendar.google.com/event?action=TEMPLATE&tmeid=Mm43dmRvNmhiZmU5dnEwM3NhZWplY2V2YmkgYXNrbWlzby5jb21fcnYyajRiYnZzdDQ0OW43M2g5cTZnZDYzNmtAZw&tmsrc=askmiso.com_rv2j4bbvst449n73h9q6gd636k%40group.calendar.google.com)
3. 線上會議：[Google Meet](https://meet.google.com/hfy-ijeh-bjj?hs=122&authuser=0)
5. 參加人請打卡：
- ddio
- mangoSu
- Chris
- RockLeon(立弘)

## 議程

1. 針對各項需求的解法提案
- 請大家提案，要提案者，請事先將提案寫在這份共筆中，提昇會議討論效率
- 各項需求請見下方段落
- 有時間又想練習的話，可以把握機會嘗試提案，但想要純討論，不提案也沒問題
2. 決定網站整體架構，包含使用的框架、大概分工與大概時程

## 已知網站需求

1. 綁定非資料庫後端的靜態網站

   **User Story**
   身為 Summit 網站維護者，我想要使用純前端解法，減少網站長期營運成本，例如照顧伺服器

1. 但網站須呈現許多結構化，且有可能頻繁修改的資料，包含：
- 贊助商
- 議程
2. 其中議程的不確定性較高，要看今年的議程規劃，才能決定資料結構，而且可以遇見，越接近開幕時間，變動頻率越高，因此需要結構化的方式描述它，才能減少犯錯機率 XD
3. 基本要求：
1. 假設資料來源是某個已經結構化的資料庫，例如 MongoDB / Airtable / Google Spreadsheet
2. 提出下載資料、將資料轉為網頁的工具和大概流程
2. 測試、正式雙站架設

   **User Story**
   身為 Summit 內部成員，我想要維護開發網站 -> 測試網站 -> 正式網站，的開發流程，
   - 讓開發時可以即時看到結果
   - 讓所有工作人員可根據測試網站給回饋
   - 讓所有人可以看到檢查過得正式網站

1. 基本要求
> IJS 有 FTP 可以當測試站，給所有工作人員檢查，再推上 master[name=mango]
1. 整個網站可以直接在工程師的電腦裡跑起來，盡可能連網站資料都能放到開發機中，呈現完整內容
2. 網站要能一行指令發佈到測試網域，並盡量使用獨立的 branch ，方便區分穩定程度
3. 網站要能一行指令，將測試 branch 的東西，發佈到正式網域，並盡量使用獨立 branch ，方便區分穩定程度
3. 雙語切換

   **User Story**
   身為 Summit 網站的不同語言的使用者，我想要有方便的語言切換、記憶功能，
   讓我無論是第一次進來、日後瀏覽，或是想要分享網站給其他人時，
   都可以使用同樣的語言設定

1. 基本要求：
1. 可在網頁上一鍵雙語切換
2. 切換後此瀏覽器記住語系設定
2. 加分：
1. 搜尋引擎友善的雙語設定
2. 分享時，會連語言設定一起帶走 aka 網址要包含語系
4. SEO + Social Share

   **User Story**
   身為 summit 營運者，我想要讓我的網站更容易被搜尋、社群分享，
   讓大家的貢獻更容易被其他人找到與分享

1. 基本要求：
1. 基本 SEF ，包含標題、網址、RWD、ssl，所有頁面都要靜態生成（雖然 google 目前已經可以偷跑 js XD）
2. 支援 open graph 以及 twitter 分享，可設定每頁、每項議程的網址、縮圖以及內容
2. 加分：
1. 其他 SEO 相關功能
5. 麻瓜（？）友善的文案共筆機制，方便共同編輯雙語文件 + 網站上稿，和第一點有關
> 上面敘述，不太能理解要做的功能[name=mango]
> 補充完畢，可以看看還有哪邊不清楚 [name=ddio]

   **User Story**
   身為 summit 網站的文案提供者（議程組、行銷組等），
   我想要有一個方便編輯議程以外的文案的地方，包含中英雙語，
   讓我就算不懂程式、github，也可以快速編修文案，減少與工程師來回溝通的時間

1. 基本要求
1. 提出一套工作流程，盡可能讓文案提供者可以使用簡單的文字編輯器，例如 Hackmd / Spreadsheet / Airtable / Wordpress 等等，編修議程以外的所有網站內容
2. 編輯器須支援中英雙語，讓程式可以在相對的語系設定中，顯示該語系的內容
3. 用編輯器編輯後的文字，可以半自動地更新到網站上，也就是要能用單一指令就完整部屬
6. 回應式網頁設計 (RWD)
1. 為了手機與 SEO ，RWD 一定要作的～
7. CICD

    **User Story**
    身為一個網站開發者，我想要讓網站有 CICD ，
    這樣才其他人想更新網站內容時，就不用再來騷擾我了

1. 基本要求：
1. 有新的 commit 進到 test branch 或 production branch 時，自動發佈到網頁上
2. 有新的內容出現時，包含議程與非議程的文案，可以自動或辦自動地產生新 commit ，或直接發佈到網頁上
8. 測試、正式網站的錯誤追蹤工具

   **User Story**
   身為一個網站開發者，我想要在測試與正式網站，增加錯誤追蹤工具，
   如此一來，才能知道有哪些開發時沒有處理到的錯誤正在發生

1. 基本要求：
1. 測試、正式網站要埋錯誤追蹤工具，例如 Sentry
2. 錯誤要能被網站組的所有成員看到，也可使用 slack 通知（所以不能只是 Sentry ，或要付錢）

## 技術架構提案

:::info
想提解法的請寫這邊！
:::

1. ddio - [Nuxt.js + nuxt-i18n](https://g0v.hackmd.io/wT1nunZTR_Wg3MNwR6FZDw)
- 包含：
- 1. 綁定非資料庫後端的靜態網站
- 3. 雙語切換 **`尚待試用`**
- 4. SEO + Social Share **`只有基本款`**
- 5. 麻瓜（？）友善的文案共筆機制，方便共同編輯雙語文件 + 網站上稿
- 8. 錯誤追蹤工具 **`尚待驗證`**
- 沒包含：
- 2. 測試、正式雙站架設
- 6. 回應式網頁設計 (RWD)
- 7. CICD

## 討論共筆

小結：

1. ddio 5/21 前會根據[討論](https://g0v.hackmd.io/wT1nunZTR_Wg3MNwR6FZDw)，把 1 + 3 + 4 + 5 + 8 作一個會動的版本出來給大家玩
2. 根據 5/21 的討論，決定優先順序與分工，讓網站正式開工～

{%hackmd jfvbUuzyQtOVjnWUOW1peQ %}