# 財團法人文化臺灣基金會109-110年度臺灣文化國際交流活動網站建置、營運及維護

:::info
- **截標時間:** 2020/10/12/1700
- **專案目標**
- **額外需求**
:::

# 專案概述 (R)
## 專案名稱
財團法人文化臺灣基金會109-110年度臺灣文化國際交流活動網站建置、營運及維護

## 專案範疇
1. 網站建置、營運及維護。
2. 網站介面設計與規劃。
3. 美術設計，包含網站整體設計、活動專頁設計及各專區版型設計。
4. 系統管理平台建置。

## 專案時程

## 專案價金

# 專案管理 (R)
## 公司背景
## 專案組織
## 時程規劃
## 專案執行
## 品質保證
## 履約實績

# 數位行銷 (R)

# 系統架構
<center>架構示意圖</center>

**架構說明**

* Node.js
Node.js 為輕量及快速的後端執行環境，搭配國際大廠亞馬遜雲端服務 AWS Lambda 無伺服器架構 (Serverless)，可以免除一切硬體建置及維護所帶來的成本。此外 AWS Lambda 提供自動展延機制確保其高可用性，這意味者在服務受到高乘載時會自動水平擴展節點已提供更高的吞吐量，且在高峰過後自動恢復為一般配置以節省資源，達到系統資源的彈性。

* 亞馬遜雲端運算服務 (Amazon Web Services, AWS)
* AWS Lambda
* 無伺服器運算服務
Lambda 是亞馬遜的無伺服器運算服務，除了可將應用程式部署於雲端上之外，完全不需額外配置、設和維護虛擬機，是真正擺脫硬體及網管的雲端服務。
* 完全自動化的管理
Lambda 負責管理所有基礎設施，因此，再也不需要更新作業系統，也不必擔心需要隨著使用量的增加而進行軟硬體的擴充。
* 內建容錯能力
Lambda 內建容錯能力及異地備援，以保護應用程式不受個別機器或資料中心設施故障的影響，因此，Lambda 具有十分高的可用性，沒有維護時段或計劃停機時間。
* 自動調整規模
Lambda 只在需要時執行應用程式，並能自動擴展來承受系統壓力，無須任何設定且不會有冗長的部署和組態延遲的情況。
* 僅需按實際用量付費
Lambda 依照應用程式的持續執行時間計費，只需支付處理的請求數及執行程式碼所需的運算時間。

* Amazon Simple Storage Service (S3)
是亞馬遜的靜態檔案儲存服務，提供領先業界的可擴展性、資料可用性、安全性及效能。S3 的設計可達到 99.999999999% (11 個 9) 的耐久性。並且可進行靜態網站託管。

* Amazon Route 53
是亞馬遜的一個可用性高、可擴展性強的雲端網域名稱系統 (DNS) Web 服務。

* AWS Certificate Manager (ACM)
是亞馬遜用來處理複雜的建立、儲存和更新公有 SSL/TLS X.509 憑證和金鑰的服務，提供 Https 保護網站和應用程式。

* Amazon API Gateway
是亞馬遜的一種全受管的服務，可讓輕鬆地建立、發佈、維護、監控和保護任何規模的 API。

* MongoDB Atlas
MongoDB 是一個 NoSQL 分散式資料庫，強大的讀寫能力可應付高強度的系統壓力。而 Atlas 是 MongoDB 公司的雲端資料庫服務。Atlas 按需付費、支持60多個全球區域、輕鬆擴縮容、支持多個公共雲、安全最佳實踐、自動備份和指定時間點回復等特性。

* 單頁應用（Single-Page Application, SPA）
單頁應用為目前網頁應用技術主流，相較於傳統網頁，單頁應用在初次加載頁面之後就僅以非同步方式叫用API來更新頁面，以最小所需資料更新頁面，屏除頁面刷新帶來的閃爍卡頓。此外，由於單頁應用全以 JavaScript 實踐，各種響應式互動功能可以輕易實現，提供使用者最佳的操作體驗。

* Angular
Angular 為 Google 團隊維護的單頁應用解決方案，是目前最受歡迎的前端框架之一，相較於 React (由 Facebook 維護)或 Vue (由作者一人及社群維護)，Angular 由 Google 最頂尖的開發人員維護，專門設計給企業及政府等級的應用程式，具有嚴謹及明確的架構規劃，易於整合及維護，同時可以減少伺服器端負載。

**架構比較**

| | 實體伺服器 | AWS Lambda(無伺服器) |
|:------------:|:--------------------------:|:--------------------:|
| 硬體建置成本 | 昂貴 | 無 |
| 硬體維護成本 | 昂貴 | 無 |
| 使用成本 | 硬體成本＋人事成本＋授權費 | 按使用量計費 |
| 高可用性 | 自行實作且並無實質保證 | 99.95% 可使用率 |
| 延展性 | 實作難度高 | 自動延展 |

| | SQL Server | MongoDB Atlas |
|:------------:|:--------------------------:|:------------------------:|
| 架構/性質 | 實體關聯式資料庫 | 雲端分散式資料庫託管 |
| 硬體建置成本 | 昂貴 | 無 |
| 硬體維護成本 | 昂貴 | 無 |
| 使用成本 | 硬體成本＋人事成本＋授權費 | 依規格按月計費 |
| 高可用性 | 自行實作且並無實質保證 | 自動化容錯和自我修復機制 |
| 延展性 | 實作難度高 | 自動延展 |

# 網站功能建置

## 通用功能

### 多語系設計
* 實作多語系機制，可於後台增減語系及維護語系內容檔，前台網頁可透過語系選單進行語系切換。
* 可以網址進行語系區別與切換，例如中文網址為 https://domain.com/zh-tw，英文網址為 https://domain.com/en-us。
* 本公司將由專業翻譯人員提供三種語系支援：繁體中文、英文、日文。

### 響應式網頁設計
* 全站採用響應式網頁設計(Responsive web design, RWD)，針對不同尺寸大小之裝置切換自適性的顯示模式，確保使用者得以在任何裝置上進行系統操作，並且得到相對良好的閱讀體驗。

### 無障礙網頁開發
* 依照機關所需之無障礙等級進行網站設計開發。
* 實作基本無障礙網頁功能，包含(但不限於)：無障礙定位點（導盲磚:::）、網站導覽區塊、功能項快捷鍵支援、圖片替代文字說明、語意清楚的連結及按鈕文字，大中小字級切換。
* 後台上稿透過文章樣板的形式，避免上稿人員不慎產出不符無障礙規章之內文。

## 網站介面設計與規劃

### 首頁
<center>首頁示意圖</center>

* 採用黑白配色搭配同風格插圖讓使用者更快速直覺找到所需資料。
* SNS的串接也使用插圖，讓網頁的畫面簡潔卻又不失趣味。

### 橫幅
<center>橫幅設計示意圖</center>

* 將活動相關資訊置中，搭配插圖讓畫面不單調。

### 活動簡介頁
<center>活動簡介頁示意圖</center>

* 除了活動資訊外還設計報名按鍵，更吸引使用者報名。

### 表演介紹
<center>表演介紹示意圖</center>

* 根據各表演活動元素介紹不同表演的故事，採圖文方式呈現。

### 景觀介紹
<center>景觀介紹示意圖</center>

* 根據各講座活動元素介紹不同表演的故事，採圖文方式呈現。

### 飲食介紹
<center>飲食介紹示意圖</center>

* 根據各展覽活動元素介紹不同表演的故事，採圖文方式呈現。

### 新聞專區
<center>新聞專區示意圖</center>

* 以圖文方式呈現新聞報導，並設計社群按鈕可將新聞分享到各社群平台增加曝光。

### 講座專區
<center>講座專區示意圖</center>

* 依照時間順序將所有講座活動排序列出，也能透過檢索讓使用者搜尋所需之活動。

### 社群專區
<center>社群專區示意圖</center>

* 將社群軟體的圖文依照時間軸展示最新六篇，也能點擊圖文即可連結到該社群貼文。

:::danger
## 網站瀏覽使用者經驗設計
???包括(但不限於)以時間、地點、活動名稱等作為內容檢索基準之設計；
:::

## 後端系統建置
* 亞馬遜網域為購買後每年續約，其餘服務採依用量每月計費，本公司確保系統在營運期間各項租用服務不會到期，進而防止系統面臨中止的可能。
* 後台上稿系統
<center>文章管理示意圖</center>

* 建議採用文章樣板的形式進行文章內文編輯，可將常用的文章格式設定為樣板，上稿人員只需針對格式和大綱填入內文即可，減少反覆編輯文章格式或者文章風格不一等問題，亦可避免上稿內容不符合無障礙AA標準之問題。
* 針對不同文章或頁面，將對應不同之資料欄位、圖片上傳、附加檔案上傳、Google Map、內嵌 Youtube 影片等功能。
* 後台其他功能
<center>首頁管理示意圖</center>

* 前台各項功能皆可於後台對應進行操作維護，例如：首頁管理，可針對首頁項目排序、配置、新增、修改、刪除。
* 各項功能保持一致性的操作，降低系統維護人員的操作難度。
* 於後台提供相應的SNS串接所需功能。
* 後台系統語系預設使用英文。
* 協助申請及設定SSL憑證，確保網站採用 HTTPS 進行加密通訊。
* 網頁前端採用標準 HTML5 和 CSS3 構建、不使用 Flash 或 Silverlight 等非網頁原生支援物件；
* 瀏覽器相容性支援 Firefox、Chrome、Microsoft Edge 等主流瀏覽器。

## 保固維運期間負責項目
* 正式上線前各項除錯與功能測試
* 網站上稿服務(含各語系網頁內容所有圖片、文字、影音及新聞等相關資訊)
* 至少兩次的免費上稿教學
* 網站維運管理
* 與專案辦公室定期或依需求出席工作會議
* 其他臨時交辦任務