30 天架起一個前後端分離網站 - Day 1
連載區索引
工欲善其事，必先利其器。首先，讓我們把開發環境都準備好，在這篇文章中，我們會做到兩件事情：一、分別介紹每一個必備元件及如何安裝，並進行相關說明。二、創建基本的專案結構，並在 Github 上開啟一個新的 Repository。
VS Code
Visual Studio Code（簡稱VS Code）是一款由微軟開發且跨平台的免費原始碼編輯器。通常我們稱這類專門為了程式碼開發而設計出來的編輯器為 integrated development environment (以下用 IDE 簡稱)。實際上，所謂的「寫程式」並沒有那麼複雜，如果喜歡的話，我們也可以用 windows 內建的記事本來寫程式。那麼用 IDE 寫程式又有什麼好處呢？關於一行代碼，比如 fmt.Print(“Hello world!”) 可以被電腦讀懂，並且順利執行這件事情，讓我們試著長話短說一下。
我們都知道電腦只讀得懂 0 和 1，想像一下英文有二十六個字母，而電腦的語言就只有兩個字母，分別是 0 和 1。實際上，我們寫了一行程式碼 fmt.Print(“Hello world”)，這是一行 Golang 程式碼， Go 會使用它的編譯器，把這一行 fmt.Print(“Hello world”) 變成二進制，並交給電腦執行。電腦讀懂了這是一行要透過 IO 把文字 Hello world 印出來的請求，所以就照著做了。簡單來說，編譯器負責把人讀得懂的高階程式語言，轉換成電腦讀得懂的低階程式語言。這裡舉 Go 當例子的原因是因為 Go 在把程式碼變成機器碼的過程相當單純，其他主流語言比如 Python 或 Java，過程都有涉及其它角色的參與。為了避免把事情複雜化，我們只談最基本的內容，不管程式語言怎麼變，編譯器都像是電腦和程式語言的翻譯官，負責把我們所輸入的程式語言，轉換成機器語言。
而軟體工程師在做什麼事情呢？軟體工程師使用人類的語言，並用編譯器讀得懂的格式，寫出程式碼，要求電腦做出我們想要它做到的事情。這裡稍微岔開一下話題，很多人喜歡列各種項目，來檢視一個工程師是否優秀。當然，每一間公司對他們的軟體工程師有不同的期待，甚至有些公司的軟體工程師的守備範圍，早就遠遠超出了「軟體」這兩個字。在我看來，軟體工程師如同上述，是一群使用人類語言，並用編譯器讀得懂的格式，與電腦合作進行創作與設計的人。本質上來看，這件事情做得好的，就是優秀的軟體工程師。
回到為什麼要使用 IDE？雖然我們剛剛用非常非常簡略的方式，把程式語言變成機器語言的路徑給畫了出來，但是問題卻沒有那麼簡單。讓我們用翻譯官來舉例，假設翻譯官要為我國總統和外國的政要翻譯，就算外國政要都是說英文，但是印度的英文、澳洲的英文、英國的英文，以及美國的英文，在口音與習慣用法上通通都不一樣——這就像是程式語言的版本、函式庫的版本是否相容的問題；而就算是我國總統，不同任總統的語言造詣，習慣用詞也都不一樣——這就像是電腦的作業系統版本，一樣會影響到程式是否能順利執行的問題。翻譯官如果在其中一個環節沒有辦法搞定，就沒有辦法順利地把正確意思傳達給另一方——編譯器也一樣。IDE 協助開發者可以更妥善的管理上述這個問題，同時，也整合了很多幫助開發者提升開發效能的工具，這就是我們最好還是使用 IDE 進行程式開發的原因。
VS Code 的安裝非常簡單，我們只需要進入 VS Code 官網，根據電腦選擇 Downloads for windows 和 Downloads for macOS。安裝完成 VS Code 以後，先把接下來一定要用到的 Extension 安裝起來吧（VS Code 擁有很強大的套件支援，就留待各位開發者自己去摸索了）！我們需要安裝的 Extension 有：
- Python，讓我們的 VS Code 可以看懂 Python，並且提供給我們基本的 Python 函式庫
- ES7 React，讓我們的 VS Code 可以看懂 React 在做什麼
- Prettier，讓我們可以輕鬆的透過 ctrl + s，就排版好前端的程式碼
Python
Python 可以說是近幾年來最火熱的程式語言，沒有之一。挾著社群廣大、適合用來做資料分析，並且程式碼簡單（陋？）等優勢，Python 不只對新手學習很友善，甚至出圈程度也很高，不寫程式的人都聽過這個語言。近年來 Python 在 AI 領域發光發熱，不過作為一個通用程式語言，我們其實也可以拿 Python 來做任何事情。
因為資源有限，在軟體的世界裡面充斥著 Trade off，往往沒有絕對的優點與缺點。以 Python 來說，如果我們單看程式語言執行效率的 Benchmark，它可是敬陪末座，慘不忍睹。這是因為 Python 的解釋器（我們暫且把它當作從程式碼變成機器碼的其中一個節點）負責的任務很繁重，什麼都要管。而它帶來的優勢是 Python 的開發速度非常快（如果沒有遇到套件相依問題的話），而且可以用新手也很容易看得懂的風格編碼。我們可能用 C 語言開發需要一週才能完成的功能，Python 可以在半天內搞定。
這個專案的後端邏輯非常單純，所以就讓我們採用可以簡單有效達成任務，並且學習門檻低的 Python 來開發吧！Python 官網 中有很多版本，由於我們需要使用虛擬環境來開發 Python（在開啟後端專案時再來細談原因），這裡暫時不需要管版本問題，挑選最新版本 (Python 3.13.2) 安裝即可。
接著，為了後續開發順利，我們需要修改電腦的環境變數，如此才可以很方便的隨時隨地使用 Python。先說說什麼是環境變數吧！我們可以把環境變數想成是一個代號系統，比如我們在電影中看到海豹部隊成員出任務時，每一個人都會有一個代號。可能是 Viper, Eagle, Rabbit 等等，而實際上 Viper 本人的名字當然不叫 Viper，它可能是 Bob, 也可能是 Steve，Viper 只是他的代號而已。這個代號的意義，其實就是讓我們可以很快速的過濾掉雜訊，馬上找出目標。那這和環境變數又有什麼關係呢？如果我們打開電腦資料夾，就會發現電腦的檔案是一個階層式的架構，資料夾中還可以再放新的資料夾，一層一層下去。實際上，我們「安裝」了 Python，是把運行 Python 所需的一整包資料解壓縮，放到電腦的某一個資料夾中。
按照我們使用電腦的經驗，我想大家都可以想像到了，在這種情況下我們要怎麼執行 Python 呢？是的，我們要找到它被放到哪個資料夾，並進到裡面把執行檔找出來，連點兩下。我們當然不可能願意每次都這麼麻煩，這就有點像是 101 的地址是臺北市信義區信義路5段7號，我們才不會告訴朋友要去臺北市信義區信義路5段7號吃飯，我們會說要去 101 吃飯。但這有個前提，前提是我們和朋友都知道 101 在哪裡，所以，如果對不知道 101 在哪裡的朋友聊起這件事，我們可能會先和他們介紹 101 的位置。這就是我們要設定環境變數的原因，我們要告訴電腦 Python 對應的「地址」，之後，每一次我們告訴電腦要執行 Python 時，它就會知道要去哪裡找到執行檔。
使用 Windows 的朋友可以參考這篇文章 Windows 安裝 Python 後，還需要設置環境變數。使用 Mac 的朋友則會遇到另一個問題，Mac 版的 Python 會自動被登錄到環境變數中，但是因為在比較舊的 MacOS 中是有內建 Python 2 的，當我們安裝 Python 時，MacOS 會自動把 Python 的環境變數的 Key name 設定成 Python3。如果覺得這樣子很彆扭的話，我們可以參考這篇文章 如何在macOS上預設 Python 3。
完成後，讓我們來確認 Python 是否被順利加到環境變數中吧！使用 Mac 的朋友，可以打開電腦內建的終端機（Terminal），輸入 python3 --version；Windows 用戶因為檔案管理系統不同，需要額外安裝 git 或 ubuntu vm 才能隨心所欲使用終端機。但沒關係，強大的 VS Code 替我們解決了這個問題，我們也可以直接打開 VS Code 的終端機， 
輸入 python --version。如果像圖片中一樣，跑出了 Python 版本資訊，那就沒有問題囉！
Node.js
Node.js 在我們的專案中扮演的角色非常簡單，由於我們選用了 Next.js 作為前端開發的技術，在 Next.js 的文件中的 System requirements 明確提到了需要安裝 Node.js 18.18 或更新版本。所以我們只需要到 Node.js 官網下載安裝 LTS（Long Term Support）版本即可。也許你會好奇，明明 Next.js 是一個前端框架，為什麼需要安裝後端框架 Node.js？這和我們上一篇文章提到的內容有關，Next.js 為了要能夠同時做到靜態渲染、SSR，以及 CSR 等等技術，所以整個框架會需要後端伺服器的參與。
上述的這些複雜的名詞，和整個前端發展歷史、Google 搜尋，還有 HTTP protocl 都有關係，不容易三言兩語帶過。但是我們現在只需要簡單理解：過去要開發一個大型網站是非常令人頭痛的事情。因為網站的每一個小分頁如果擁有自己的專屬路徑，我們就必須為它們編寫獨立的 html 檔案。小分頁越多，整個專案就會越混亂，三大（React, Angular, Vue）框架出現後，這個問題被很好的解決了，不管網站再怎麼大，我們的專案之中只需要一個 html 檔案，利用它動態渲染頁面內容就可以了。可是很快的，這又衍伸出了其他問題，比如這樣子的網站效能不好、十分笨重，並且 Google 爬蟲不能正確取得的分頁內容，導致它們不能照著開發者的期望出現在 Google Search 之中。而 Next.js 就是為了要解決這個問題，而產生出來的 Meta framework。
安裝完 Node.js 之後，我們一樣可以在終端機輸入 node --version，確認 Node.js 是不是正確的被安裝到電腦了。
確認 Node.js 被正確安裝後，我們可以先和 npm 打招呼，在終端機輸入 npm --version 以及 npm --help 來看看是不是會出現像下面圖片類似的資訊。
當我們後面進到前端開發的階段時，會很常使用到 npm 指令進行套件管理，開發測試等等功能。
Next.js
說實話，Next.js 實在不是可愛的東西。為了要同時克服靜態渲染、SSR，以及 CSR 等難題，這個框架異常的複雜。好消息是，絕大部分情況之中，我們並不需要為專案進行如此複雜的設定。相較於單純使用 React，Next.js 有另一個好處，Next.js 明確的定義專案中的資料夾結構，比如在 app 資料夾底下的 page 檔案，網址就會對應到專案資料夾的目錄；component 則對應到了業務邏輯的組件。這就很明確地把一個 MVC （詳見維基百科 Model–view–controller）模式給確立出來，讓開發者在彼此協作或者後續維護上，更輕鬆愉快。
當然，實際上專案會長什麼樣子，那又是另一回事了！相信有太多專業工程師看過根本難以理解，亂七八糟的 Next.js 專案，反而看到一些清晰易懂的 React 專案。就如同前述，厲害的工程師能夠優雅地實現功能，同時寫出讓其他人非常容易看懂，也很容易可以維護和擴充的程式碼。專案實際上最終長成什麼樣子，很多時候不一定是技術選型，反而和開發者的功力有關係。
回到 Next.js，如果我們前面有正確的安裝 Node.js，就可以照著官方文件來啟用一個全新的 Next.js 專案了。
我們利用官方文件上提到的指令來開啟新專案，命名 down-game（或者任何一個你喜歡的名稱）；TypeScript 選擇 No，因為我們要用的是 JavaScript；ESLint 協助我們檢查程式碼品質，選擇 Yes；Taiwind CSS 是好東西，沒有理由不用，Yes；是否使用 src 作為程式最外層資料夾，取決於個人習慣，對於開發體驗上沒有什麼實際影響，選擇 Yes；App Router 是 Next.js 用來管理網站的每一個分頁網址非常強大的工具，我們這裡會選擇 Yes；Turbopack 讓你在最後程式碼打包及部署時，可以不用等到天荒地老，Yes；customize the import alias，no，我很懶墮的，預設就很好用了！
完成這個流程後，我們應該就可以看到一個前端的 down-game 資料夾被建立出來了！
Github
不曉得大家是否有遇過大學和研究所時打報告，因為電腦當機或者磁碟壞軌，導致辛苦做的作業付之一炬的慘案？那種挫折感絕對是我們一次都不想要經歷到的，隨著資訊科技的進步，我們現在的設備其實已經有雲端同步的功能，讓我們不會再面臨這種狀況。
就像是把檔案備份在雲端一樣，我們也一定希望自己的程式碼被放在一個可以輕鬆取得，並且不必擔心外洩，甚至消失的地方。相較於個人雲端空間，Github 或許才是所有軟體工程師第一個會想到的地方。因為它不只是一個存放程式碼的地方而已，它還有很多強大的管理工具，協助開發者更有效率的開發協作。Github 是一個程式碼的代管服務平台，上面有龐大的開源套件，並且也有各種學習資源，說它是軟體世界的金山銀山，一點都不為過。
我們可以在 Github 上面註冊一個帳號，並且開啟一個新的 Repository，進行這個專案。不過我其實已經開了一個新的，不妨直接到我的 Github 專案，找到畫面右上角的 Fork，點擊後，分支一份到自己的 Github 倉庫中，就可以開始自己的軟體世界之旅囉！
Github 其實是由兩個字組成，Git 和 Hub。Git 是一個檔案管理系統（詳見維基百科），尤其可以很好的做到版本控制，在現代的軟體開發流程中，有能力使用基本的 Git 指令，可說是寫程式必備的技能！我們的小專案並不會涉及多人協作，也不太可能遇到分支管理、版本管理等問題。所以在這裡不特別介紹 Git 的使用，我們只會簡單說明後續實作中使用到的 Git 指令。
要簡單理解 Git ，我們可以先這麼說，我們使用 Git 來確保本地端的程式碼，與放在雲端（也就是 Github）上的程式碼可以同步。所以這些基本的 Git 操作，本質上涉及的只是拉取、推送的行爲而已。
而 Hub 顧名思義，這是一個中樞。在 Github ，我們可以找到幾乎各種想像得到的開源專案，甚至也可以找到各種腦洞大開，我們想都沒想過的內容。
最後回到我們剛剛說的分支，想像 Git 其實是用節點在控管每一個版本的程式碼內容。開出一個分支，有點像是訂閱電子報，隨時可以從主分支上取得最新內容；不只如此，這個分支也可以透過 Pull Request 的請求，將分支上的程式碼，合併回去主分支上。軟體工程師們便是透過這一個方法，彼此協作，確保程式碼之間不會衝突。
Thank you for reading. If you enjoyed this post, consider sharing it with others.