數據新聞第 0 步:手把手設定電腦開發環境
此文件以美國公共廣播電台 NPR 早期發布的內容為基礎,但 NPR 釋出的文章版本較舊,所以我依據原文章的架構,再去找補充資料,親自測驗後才完成。令人開心的是,NPR 團隊使用 Python 開發,根據此文章設定的環境,除了能做資料視覺化專案外,也能用於 Python 開發。
該如何使用這篇文章?
- 這篇文章是希望協助對數據新聞感興趣、正準備學習的人,用安全、快速、方便的方式,跟著一步一步完成適合開發的電腦設定。
- 由於不想在剛起步的階段,就讓大家承受資訊過載之苦,同時我也正在學習中,也不一定能將原理都說明清楚,所以只會簡單說明每個步驟的原因。
- 因為參考的 NPR 使用 Mac,而我自己也使用 Mac,所以下列內容以 Mac 的設定為主。(Windows,抱歉了)
安裝步驟
繫好安全帶,以下是我們會經歷的過程:
- 安裝 command line 工具
- 安裝 Homebrew
- 安裝 Python 3 (以及虛擬環境 virtualenv)
- 安裝 Node.js
- 設定 git 與 GitHub
- 安裝 Postgres 與 PostGIS
- 開發環境的其他設定(替換內建的終端機、選擇喜歡的編輯器)
好,開始動手!
請先開啟 Mac 內的 Terminal(終端機),之後都要在 Terminal 中輸入指令碼。
1. 安裝 command line 工具
- 在 Terminal 輸入指令碼:
xcode-select --install
- 按下 Enter 鍵,(需要等較久時間)就能完成安裝。
若上述指令碼無法成功安裝(看到 Terminal 出現錯誤訊息,請到 Apple 開發者網站下載 Xcode 最新版本) 絕對不要直接從 App Store 下載 Xcode。
2. 安裝 Homebrew
Homebrew 是專門管理安裝套件的軟體,讓人能有效率地安裝開發用套件。
- 在 Terminal 輸入指令碼:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 按下 Enter 鍵,(需要等待一小段時間),就能安裝好 Homebrew。
- 見到 Terminal 顯示安裝成功的訊息後,要檢查 Homebrew 是否有安裝成功,在 Terminal 輸入指令碼:
brew doctor
,再按下 Enter 鍵。若顯示 Your system is ready to brew. ,表示安裝成功。
若不幸出現警告訊息(通常會長這樣: Warning:….)表示有東西要更新或額外設定,這時請耐心閱讀螢幕上提供的訊息,並依照顯示的指示輸入指令。 補充:日後要更新 Homebrew,只要在 Terminal 內輸入指令碼: brew update
即可。
3. 安裝 Python3 與 virtualenv
Mac 以內建 Python 2.7,但 Python 已宣佈日後不再支援 2.7 版本,所以建議都升級到 Python 3.x。所以這裡會使用 Homebrew 安裝 Python3(也就是 Python 3.x 版本),以及搭配 Python 配置開發環境會用到的 virtualenv。
- 在 Terminal 輸入指令碼:
brew install python3
,按下 Enter 鍵,安裝 Python3 - 在 Terminal 輸入指令碼:
pip3 install virtualenv
,按下 Enter 鍵,安裝虛擬環境 virtualenv
補充:未來要建立 Python 專案時,想了解以 virtualenv 為專案建立與操作虛擬環境的方式,可以參考我之前記下的虛擬環境操作手冊。
4. 安裝 Node.js
因為 Node.js 的版本管理問題常讓人傷腦筋,因此這裡會教以 nvm 安裝 Node.js 的方法,方便安裝與刪除各種版本的 Node.js。
- 先安裝 nvm,在 Terminal 輸入指令碼:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
,按下 Enter 鍵後,就能安裝 nvm。 - 接著以 nvm 安裝 Node.js,在 Terminal 中輸入指令碼:
nvm install node
- 按下 Enter 鍵,就能以 nvm 安裝 Node.js(安裝 Node.js 的同時,電腦也會自動安裝 npm)
- 關閉 Terminal 再重新開啟,輸入指令碼:
nvm use node
- 確認是否有安裝成功,要在 Terminal 輸入以下指令碼,確認都出現版本號,就代表安裝成功
node -v
會顯示安裝的 Node.js 的版本號(會出現 v13.9.x)npm -v
會顯示安裝的 npm 的版本號(會出現 6.13.x)
補充:日後若要更新 Node.js,只要開啟 Terminal 輸入nvm install node --reinstall-packages-from=node
即可。
5. 設定 git 與 GitHub
- 在 Terminal 輸入指令碼:
touch ~/.gitconfig
,建立一個名為 .gitconfig 檔案 - 在 Terminal 輸入以下指令碼,設定自己的名稱與信箱
git config --global user.name "YOUR NAME"
,YOUR NAME 要改成自己的英文名字。git config --global user.email "xxx@mail.tw"
,xxx@mail.tw 要改成自己的信箱。
- 確認是否有設定成功,在 Terminal 輸入指令碼:
git config --list
,若顯示列表跟設定的相同(如下),表示成功。
user.name=YOUR NAME user.email=xxx@mail.tw
6. 安裝 Postgres 與 PostGIS
這兩者在製作地圖、圖表等就會用到,直接到 Postgres.app 網站下載安裝即可。
7. 開發環境的其他設定
7-1 安裝 iTerm2 取代內建的 Terminal
這不是必要步驟,若仍想使用 Mac 內建的 Terminal,可以跳過。
- 到此頁面下載 iTerm2
- 在 Terminal 輸入指令碼:
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
,安裝 zsh ,zsh 會比 Mac 原本的 bash 頁面更易讀。 - 電腦就會出現 iTerm 的應用圖示,之後遇到要用終端機的時候,直接打開 iTerm 使用即可。
7-2 安裝程式碼編輯器
推薦免費、使用社群活躍,常見的三種程式碼編輯器供參考,可以到官網逛逛,挑個自己喜歡的安裝就可以了。
- Atom,由 GitHub 開發。
- Sublime Text,因為用起來很輕量、快速,製作網頁時,我會用 Sublime Text。
- Visual Studio Code,微軟開源的編輯器,功能很強大、外掛多、更新也快,我會在開發 Python 專案時使用。
參考文件
- How to Setup Your Mac to Develop News Applications Like We Do
by NPR Visual Team
NPR 的舊版教學文章,使用 Python 2.7 - macOS Catalina 10.15: Setting up a Brand New Mac for Development
這篇教學如何在拿到新電腦後,快速用指令碼在短時間內建好開發環境。 - Connecting to GitHub with SSH
by GitHub official document
這篇文章同時發佈在我的 Tinker’s Backchannel 電子報。
Tinker’s Backchannel 每週分享數據分析、視覺化、新聞媒體、互動設計的內容。如果你也對這些感興趣,很期待一起學習與交流。