臺北城市儀表板開發指南 — 1. 建立環境

臺北城市儀表板

最近參加 2025 雙北程式設計節，題目是要為「臺北城市儀表板」來做發想，並擴充原有儀表板，建立新的功能與組件。

什麼是臺北城市儀表板？臺北城市儀表板是一個整合多元城市數據的開源公開平台，透過視覺化圖表與互動介面，讓市民、研究人員與政策制定者能即時掌握台北市在人口、交通、環境、建設、經濟等各面向的發展現況與趨勢。它不僅提升政府施政透明度，也促進資料驅動的城市治理與公民參與，是智慧城市推動的重要基礎建設之一。

本篇將說明如何利用開源的台北城市儀表板，在「**不修改原始碼」**下，自行架設、新增組件、匯入資料，來建立自己的儀表板。

官方資料#

Github 開源的臺北城市儀表板不像官網有大量的資料，只有一些提供開發者測試用的資料。

儀表板前台介紹#

儀表板分為前台與後台，前台為呈現給市民查看的資料，後台則讓管理員進行管理用。

台北城市儀表板操作介面

台北城市儀表板操作介面

從上圖前台操作可以看出，架構分為三層「儀表板大項」>「儀表板分類」> 「組件 / 地圖」。

儀表板大項#

左側工具列分為「台北儀表板」、「雙北儀表板」，雙北儀表板是在版本 3.0 後才加入的功能，裡面可以切換看雙北的資訊或是台北市的資訊。

儀表板分類#

左側工具列的分類，管理員於後台可以建立各種類別，如上圖所示包含「捷運系統」、「道路交通」等，可以把各種組件加入其中。

組件 / 地圖#

儀表板的核心功能，如上圖的「Youbike 使用狀況」，每個組件可以包含一個或多個圖表，包含長條圖、折線圖、行政區圖等。組件資訊可另外呈現在地圖上，但不是每個組件都會有。

當民眾於右上角使用台北通登入後，如上圖所示，民眾可以建立個人儀表板，將想看的組件進行勾選，呈現在同一個畫面上。

儀表板後台介紹#

登入後，管理員可切換到後台，後台功能包含設定儀表板、設定組件、問體回報、管理使用者等功能。

儀表板設定#

為儀表板分類進行設定名稱、圖標、挑選組件

組件設定#

設定組件的名稱、文字資訊、圖表種類、顏色、地圖等資訊

架構介紹#

台北城市儀表板架構圖

台北城市儀表板架構圖

系統設計上為前後端分離，依上圖架構進行說明：

前端：使用 Vue 3 開發，圖表使用 ApexCharts，地圖使用 Mapbox
後端：使用 Go 開發
資料庫 1 (manager)：使用 PostgreSQL，儲存用戶資訊、設定
資料庫 2 (data)：使用 PostgreSQL，儲存組件資料
暫存資料庫：使用 Redis，儲存暫存資料

建立環境#

參考官方文件即可完成架設，官方將服務容器化，使用 docker compose 管理。

依官方文件設定好 .env 環境變數，首次運行時，要執行 init，進行資料庫的初始化。

1
# 完整流程請看官方文件
2
# 第一步
3
docker-compose -f docker-compose-db.yaml up -d
4
# 第二步
5
docker-compose -f docker-compose-init.yaml up -d
6
# 第三步
7
docker-compose up -d

第一步 docker compose 會建立四個容器，包含 Redis、兩個 Postgres、Postgres 管理工具 pgAdmin。

第二步 docker compose 會建立三個容器，用於前端初始化、兩個資料庫的建置與匯入資料，跑完容器就會關閉。執行一次就好，之後重開容器，不需要經過此步。

第三步 docker compose 會建立三個容器，包含前端、後端、NGINX 反向代理。