iT邦幫忙

2025 iThome 鐵人賽

DAY 4
1
生成式 AI

左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲系列 第 4

Day 4: 【工具篇 #2】程式碼的時光機:Git 與 GitHub 版本控制

  • 分享至 

  • xImage
  •  

安安,我是 ChiYu!

昨天,我們扮演了「技師與軍火官」的角色,把我們的駕駛艙 (VS Code) 從毛胚屋打造成了精裝房,並備妥了所有核心的建材與燃料 (Python & Node.js)。

我們的開發環境已經準備就緒,但在我們正式動工、蓋起萬丈高樓之前,還有一件至關重要的事要做:我們需要為我們的建築工地,安裝一套最頂級的「安全監控系統」與「時光倒流機器」。

今天,我們就要來深入軟體開發中最最最重要的觀念——版本控制,並親手設定我們專案的「雲端保險庫」與「時光機總部」:GitGitHub

Part 1:核心觀念:什麼是「版本控制」?

在開始操作前,我們先用白話文搞懂什麼是「版控 (版本控制)」。你可以把它想像成玩遊戲時的「存檔」機制

你在寫報告時,是不是常常會這樣做:企劃書_v1.docx企劃書_v2_改了標題.docx企劃書_最終版.docx企劃書_最終版真的啦.docx?這就是最原始、最土炮的「手動版本控制」。你害怕把東西改壞,所以存了一大堆備份,最後連自己都搞不清楚哪個才是最新的。

而「版本控制系統」就是一個專業、自動化的工具,來幫你優雅地做這件事。它的好處有:

  • 追蹤歷史紀錄:系統會幫你記錄每一次的「存檔」,你可以清楚看到何時、何人、修改了什麼內容。
  • 隨時回到過去:如果不小心把專案改爛了、功能寫壞了,你可以像讀取遊戲存檔一樣,輕鬆回到任何一個過去的版本。
  • 方便多人協作:當很多人一起開發同一個專案時,版控系統能聰明地幫大家整合程式碼,避免互相覆蓋的慘劇。
  • 鼓勵大膽實驗:這是最棒的一點!它讓你可以隨時開一個「平行時空」,在裡面隨便亂搞、嘗試新功能,而完全不用擔心會把主線劇情(主要程式碼)搞砸。

Part 2:釐清工具:Git 與 GitHub 的關係

很多新手會把這兩個搞混,我們用一個簡單的比喻來拆解:

  • Git - 你的程式碼時光機
    • 它是什麼:Git 是一個「版本控制系統」,是你電腦裡的工具,用來建立「存檔點 (commit)」。
    • Git 官網:https://git-scm.com/ (建議先下載安裝)
  • GitHub - 你的雲端程式碼基地
    • 它是什麼:GitHub 是一個「提供 Git 託管服務的網站平台」。如果說 Git 是 Word 軟體,那 GitHub 就是 Google Docs。你可以在 GitHub 上建立一個專案倉庫 (Repository),然後把你用 Git 管理的本地專案,同步一份到這個雲端倉庫裡。
    • GitHub 官網:https://github.com/

Part 3:最重要的觀念:分支 (Branching) - 你的平行時空

在我們建立倉庫之前,你必須先理解「分支 (Branching)」這個專業開發中最重要的概念。

你可以把你的專案想像成一部電影的「主線劇情」,這條主線就是所謂的 main 分支。main 分支上的程式碼,永遠都必須是最穩定、可以正常運作的版本。

那如果我想開發一個新功能,例如「使用者登入」,我總不能直接在主線上亂改吧?萬一改到一半,主線劇情就崩潰了!

這時候,「分支」就登場了。我們可以從 main 主線上,拉出一條叫做 feat/login 的「支線劇情」(平行時空)。在這條支線上,我們可以盡情地開發、修改、測試登入功能,就算把它改爛了,也完全不會影響到 main 主線的穩定。

等到我們在這條支線上,把登入功能做得完美無缺了,我們就可以提出一個「合併請求 (Pull Request)」,請求專案管理員(也就是你自己)審核。一旦審核通過,我們就可以把這條 feat/login 支線,安全地合併回 main 主線中,讓主線劇情向前推進。

這就是專業開發的日常:在分支上開發,在主線上整合。

Part 4:實戰開始:建立你的 GitHub 倉庫

好了,理論武裝完畢,讓我們來親手蓋起我們的「雲端機棚」!

Step 1:建立倉庫 (Create Repository)
https://ithelp.ithome.com.tw/upload/images/20250823/20132971i2dMjWPKsm.png
GitHub

  1. 登入你的 GitHub 帳號(如果沒有,請光速註冊一個)。
  2. 點擊頁面右上角的「+」號,選擇「 New repository 」。
    https://ithelp.ithome.com.tw/upload/images/20250823/20132971i45ttXHhaV.jpg
  3. 接著,你會看到建立倉庫的表單畫面。請跟著下圖的欄位,一一把它們填寫完成:
    • Repository name:為我們的專案取個名字吧!例如 2025-iThome-HabitTracker
    • Description:簡單寫一句描述,例如「2025 iThome 鐵人賽專案」。
    • Public:選擇「Public」。【重要小提示】:選擇 Public,GitHub 會提供無限使用額度的 Action 分鐘數(我們未來會用到的自動化工具)。但如果選擇 Private(私有),則有每月 2000 分鐘的限制!
    • Add a README file務必勾選,這會幫我們初始化倉庫。
    • Add .gitignore:這個很重要!點擊下拉選單,搜尋並選擇「Python」。它會自動幫我們建立一個檔案,用來忽略掉一些不需要被版本控制的 Python 暫存檔。
      https://ithelp.ithome.com.tw/upload/images/20250823/20132971hDJ4jvFPpR.jpg
  4. 都填好後,勇敢地按下綠色的「Create repository」按鈕!噹噹!我們在雲端的家就蓋好了。
    https://ithelp.ithome.com.tw/upload/images/20250823/20132971P27F15O3uZ.jpg

Step 2:把雲端倉庫「複製」到你的電腦 (Clone)

現在雲端上有個專案,我們要把它完整地複製一份到自己的電腦裡。

  1. 在剛剛建立好的 GitHub 倉庫頁面,點擊綠色的「<> Code」按鈕,在「HTTPS」分頁下,點擊旁邊的複製按鈕,把網址複製下來。
  2. 【方法一:VS Code 圖形化介面 (推薦新手)】
    • 回到 VS Code 的歡迎畫面,直接點擊「複製 Git 存放庫...」按鈕。
    • 或是從最左側選擇原始檔控制,進行操作。
      https://ithelp.ithome.com.tw/upload/images/20250823/20132971ti1A40tgir.png
      然後找到你的專案
      https://ithelp.ithome.com.tw/upload/images/20250823/20132971XIz8rQYazA.png
    • 在上方跳出的輸入框中,貼上你剛剛複製的網址,按下 Enter。
    • 選擇一個你想存放專案的本地資料夾。
    • 完成後,VS Code 會問你是否要開啟,點擊「開啟」即可!
  3. 【方法二:傳統終端機指令】
    • 如果你想體驗更傳統的方式,可以從 VS Code 上方的選單列找到「終端機」->「新增終端機」。
    • cd 指令切換到你想存放專案的資料夾。
    • 輸入 git clone [貼上你剛剛複製的網址],然後按下 Enter。
    • 完成後,再從「檔案」->「開啟資料夾...」來打開專案。

結語:萬事俱備,只待出征

太神啦!我們今天完成了技師的工作。現在,當你看到 VS Code 左邊的檔案總管,已經出現了專案的資料夾與 README.md.gitignore 檔案時,就代表一切準備就緒了!

我們的駕駛艙不但功能齊全、裝潢精美,停機坪也準備就緒,隨時可以起飛!明天,我們就要來安裝我們 Vibe Coding 的核心引擎——Gemini CLI,並且在終端機裡,下達我們與 AI 協作的第一個魔法指令!敬請期待!


上一篇
Day 3: 【工具篇 #1】萬丈高樓平地起:建置本地開發環境
下一篇
Day 5: 【工具篇 #3】終端機裡的魔法:什麼是 Vibe Coding 與 Gemini CLI?
系列文
左手藍圖,右手魔法:DDD 與 Vibe Coding 的開發協奏曲14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言