在課程中還會透過實際範例，分享哪些工具安裝後，可以提升 Vibe Coding 的效率。

因為其實有很多的需求，根本不需要寫程式，直接使用別人完成的套件就好。

你也不用煩惱該使用哪個套件，以及套件該如何使用；因為安裝好這些工具後，AI Agent 會根據你提出的需求，自行判斷這些工具使用的時機點。

建議搭配影片觀看實際的操作步驟。

【Cursor 教學】安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練 #python #nodejs #nvm #git #ai #vibecoding

文章大綱

① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲
② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁
③ 加入 Git 版控，Vibe Coding 放心爆改

在這篇文章中，我會帶你一步步操作，讓你看完後也能打造出屬於自己的個人形象網站！

如果你是第一次接觸 Cursor，可以先看這隻影片。

文章開始前，先提醒一下大家：

AI Agent 的功能非常強大，給他權限後，不僅能自動安裝所需套件、執行指令，還能新增、修改甚至刪除檔案，因此使用時務必小心。

① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲

第一個建議大家安裝的工具是 Python。

我們安裝 Python 不是為了寫程式，而是為了讓 AI Agent 在面對問題時，有更多的解決方案。

安裝 Python

安裝 Python 這塊，大家可以直接到官網，根據自己的作業系統下載安裝檔即可。

安裝步驟我就不再贅述，安裝完成後，我們可以在 Cursor 打開一個新的終端機，然後輸入

python --version

如果有出現版號，就代表有順利安裝，接下來讓我們進入到實戰階段。

若輸入 python –version 沒有反應，請改用 python3 –version

提取文件資訊

像有些人會把 Cursor 當成 RAG 的工具使用，透過他快速檢索、分析、統整資訊。

但他有一個痛點，就是 Cursor 只能檢索「文字檔」，比如 Markdown/txt 這類型的文件，或是 JavaScript/Python 這類的程式。

假如你的檔案類型是 Word/PPT/PDF，Cursor 預設是沒辦法幫你檢索的。

但如果有安裝 Python，這一切就變成了有可能，像這邊我在資料夾放了自己的講師履歷。

如果今天想把裡面的文件、圖片提取出來，執行下面的指令，AI Agent 就會安裝對應的套件來解析文件，並根據需求將文件儲存成對應的 Markdown 檔案。

資料夾有 pdf/ppt/doc 等多種格式的文件，我想請你把所有文件內的「文字」取出來，並確定可以用繁體中文顯示。
並建立一個「doc」的資料夾，用 Markdown 的格式儲存，並整理文字結構，設計合適的大標、中標、小標，方便閱讀。
如果 ppt/doc 裡面有圖片，請建立一個「img」的資料夾，圖片檔的命名，前綴請使用文件檔名。

在執行這段指令後，AI Agent 就會設計執行步驟，一開始會先安裝需要的 Python 套件，設計程式來提取文件裡面的文字、圖片。

稍等一下，我們就可以在「doc」與「img」資料夾中，看到文字與圖片有順利的提取出來；節省過去需要手動複製貼上的步驟。

把文字提取出來後，就可以把 Cursor 當成 RAG 工具來協助統整資料了；首先把「doc」資料夾拖到 AI 的對話框，這樣 AI 才知道他要處理的內容範圍

接著貼上下面的 Prompt:

我是個講師，正在準備個人形象網站的素材，內容要呈現如下資訊：
- 擅長領域: 搭配可以佐證的資訊
- 個人成就: 找出可數據化的成就，展現實力的強大
- 課程資訊: 課程主題、說明、價格、受眾、預期成果
請先建立「integrate」資料夾，並將上面提到的面向用 Markdown 格式建立，並像個善於推銷自己的 KOL 般，用自信的語氣撰寫文案

這段 Prompt 我先表明自己的身份是「講師」，要求他幫我整理出「擅長領域、個人成就、課程資訊」的資訊，以此做為「個人形象網站」的素材。

稍等一段時間，在「integrate」資料夾，就能看到 AI 按照需求，幫我們完成了資料的彙整。

用網頁爬蟲蒐集資訊

另外有些人會使用 AI 來蒐集網路資料，但許多網站是禁止爬蟲的。

這邊我打開 NotebookLM 示範給大家看，如果來源貼上用 ChatGPT 分享的對話，NotebookLM 的解析是錯誤的，甚至像是 Medium 這類部落格文章也無法辨識

但如果你請 AI Agent 幫你用 Selenium 這個網路爬蟲工具，模擬真實使用者就能夠完成這項爬蟲任務了。

大家可以嘗試下面的指令：

先建立「crawler」資料夾，然使用 Selenium 模擬 Chrome 瀏覽器來設計爬蟲程式
取得下面 ChatGPT 分享連結的對話內容，這個網頁有反爬蟲設計，所以網頁開啟後，先等 5 秒鐘渲染元素再去抓取與 ChatGPT 的對話
https://chatgpt.com/s/t_68d21677946081918576092e1c2d37c1
抓到對話後建立「output」，將資料寫入 Markdown 檔案，檔名使用網頁標題，並優化 Markdown 格式為好閱讀的結構

這段提示詞有 2 個重點：

• 要求 AI 使用 Selenium 模擬 Chrome 瀏覽器來設計爬蟲程式
• 提醒他網頁有反爬蟲設計，所以網頁開啟後，要先等 5 秒鐘渲染元素再去抓取與 ChatGPT 的對話

稍等一段時間，在 output 的資料夾中，就能看到 Cursor 突破原有的爬蟲限制，取得與 ChatGPT 的對話內容。

剛好透過這個範例提醒大家，雖然我們用 Vibe Coding 完成了這個爬蟲程式。

但他的成功是建立在指令非常明確之上，如果沒有網路爬蟲的基礎概念，AI 的失敗率是非常高的。

專業知識，是你在 AI 時代的護城河。

② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁

大多數人 Vibe Coding 的第一個作品，通常是網頁。

但如果你只是請 Cursor 幫你設計一個公司或是個人的形象網頁，那 AI 通常是使用簡單的 HTML 與 CSS 做基礎設計。

但如果安裝了 Node.js，你就可以直接使用知名的前端三大框架 Vue/React/Angular 來做設計。

這些框架生成出來的結果會更符合現代審美，未來想擴充功能時，也有豐富的套件可以直接使用。

安裝 Node.js

在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝

• Mac 執行指令就可以安裝了

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

• 但如果你是 Windows，就需要下載 exe 檔來安裝

因為 Node.js 有多個版本，而 NVM 這款工具可以幫你快速在不同版本間切換、更新。

nvm 安裝完成後，開啟終端機輸入 nvm -v，確認有成功安裝：

接下來輸入 nvm install –lts 來安裝最新版本的 Node.js

安裝完畢後，輸入 node -v 便可檢視剛剛安裝與現在使用的對應版本

完成上述步驟後，接下來就可以開始製作網頁了。

生成個人形象網頁

在前面，已經透過 AI 從 Word/PDF/PPT 裡面取出了個人資訊與相關照片，接下來我就直接示範如何用 Cursor 生成個人形象網頁的初版。

提醒大家，照片取出來後，建議給予分類、命名，這樣 AI 生成的結果會更好。

下面我們把生成網頁，要參考的文字、圖片資料夾拖到與 AI 的對話，然後貼上下面指令：

建立一個「personal-website」資料夾，我想要用 React 框架，設計一個個人形象網頁。
網頁一定要呈現的頁面如下：
- 頂部: 有個人形象照與基礎資訊
- 擅長領域: 切換不同領域時更換對應顏色
- 個人成就: 加上互動效果與圖片
- 課程資訊: 以卡片顯示，含說明與價格
- 聯絡洽詢: 頁面最下方
設計重點:
- RWD 響應式設計
- 有一致的色系規範
- 搭配對應圖片（請複製到專案並用相對路徑）
- 互動效果與視覺化呈現（例如 hover、切換）
整體水準:
- 高度專業感
- 資訊重點清晰
- 圖片長寬比例需考量版面配置

這段指令除了一開始有指定使用的前端框架為 React 外，下面有分成 3 塊指引：

1. 首先我跟他說明頁面要呈現的資訊
2. 接著提醒設計要注意的重點
3. 最後則是放上一些額外的需求

然後稍等一段時間，個人形象網頁的初版就完成了：

但還是要提醒大家，AI 只是加速製作網頁的過程，你要自己去確認細節是否符合自己的需求。

像是基本的文字描述、圖片擺放是否恰當，以及 RWD 的設計是否完善等等。

如果不知道在哪新增圖片、或是文字大小不知道怎麼調整，可以直接向 AI 詢問。

如果生成網頁的過程遇到 Bug，出現一堆紅字，那也非常正常。

你可以把錯誤訊息複製下來，貼到 AI 的對話窗，請他協助解決。

這方法能解決大多數的基礎問題，但如果遇到的錯誤太多，或是邏輯上的問題，就需要根據實際情境來處理，這邊會再找時間寫一篇文章分享。

③ 加入 Git 版控，Vibe Coding 放心爆改

Vibe Coding 時，你的每個指令都可能大幅調整專案的程式。

但 AI 修改的結果未必是你要的，甚至有時會把正常的功能給改壞了。

為了把改壞的內容救回來，我會建議大家安裝 Git，這個程式碼版本控制工具，並註冊 GitHub 帳號來管理專案。

安裝 Git

首先，我們可以到 Git 官網下載安裝檔

安裝好 Git 後，開啟 Cursor 終端機輸入指令 `git -v` 確認有正確安裝

接著用下面的指令來完成初始化設定，請自行調整成自己的英文名字與 email

git config --global user.name "baobao"
git config --global user.email "baobao@gmail.com"

然後產生 SSH Key，這是為了確保這台電腦有更新專案的權限，這邊也請自行調整成自己的 mail

ssh-keygen -t ed25519 -C "baobao@gmail.com"

SSH Key 生成出來後，可以透過下面的指令顯示公鑰，這會在下一個步驟用到

cat ~/.ssh/id_ed25519.pub

註冊 GitHub

這邊我們來到 GitHub 的官網，你可以直接使用 Gmail 來註冊。

註冊完成後，我們到帳號右上角的 Settings

選擇側邊欄的「SSH and GPG Keys」，點擊「New SSH Key」來新增剛剛生成的公鑰

接著建立一個新的 repository，用來儲存剛剛 AI 生成的網頁專案。

Repository name 可以自由輸入，這邊我打「personal-website」，Description 可保留空

如果你不想把這個 Repository 公開，可以在「Configuration」把 visibility 改成「Private」

把專案更新到 GitHub

接著回到剛剛 Cursor 幫我們生成的專案，在終端機輸入 git init 來初始化專案 git。

然後回到網頁，複製第一行 git add… 貼到專案的終端機，這樣我們就可以把電腦的專案與 GitHub 上面的專案連結。

然後點擊左上方的 Source Control，你可以手動在框框內輸入這次的更新內容，又或是點擊旁邊的星星按鈕，讓 AI 自動產生：

確認文字描述符合自己的預期後，點擊 commit，就會在自己的電腦記錄這個變更；但如果想更新到雲端，你需要點擊 Push 才會成功喔！

Push 後我們回到 GitHub 網頁，刷新一下頁面，如果能看到專案的內容，就代表你成功了！

接著回到專案，嘗試與 AI 提出一個修改的需求

我希望可以有 Dark Mode 與 Light Mode 的設計

等 AI 執行完畢後，你可以在 Source Control 這個地方看到 Vibe Coding 更新的內容。

如果發現他改壞了，後續對話也無法解決，你可以全部放棄變更！

這邊我再給他一個要調整的內容

1. 形象照的圖片顯示上半部就好
2. 最上方個人簡介區塊下面要有留白
3. 我的成就裡面的圖片，可以根據不同比例完整顯示，要上下左右置中，多個地方用透明顯示
4. 職涯發展顧問、職涯發展的顏色太淡，不好辨識

如果對這次的調整滿意，就提交並發布一版保存；提交我們的 commit，點擊同步變更後他就會提交到 GitHub 雲端上面，以上是最基礎的 Git 操作。

他是一個很棒的版本控制工具，功能非常多，這邊放上常用指令，有興趣深入研究的朋友可以保存一下。

git init：在目前資料夾初始化 git
git clone <repo-url>：將遠端的專案下載到電腦
git checkout <branch>：切換到指定分支
git checkout -b <branch>：建立並切換到新分支
git merge <branch>：將指定分支合併到當前分支
git stash：暫存目前變更
git stash pop：取回並套用暫存變更
git push origin <branch>：將本地分支推送到遠端
git pull origin <branch>：拉取遠端分支並合併
git fetch：抓取遠端最新狀態

如果不知道指令怎麼下，別忘記有 AI 這個好夥伴可以詢問～

Vibe Coding 的工具很重要，但電腦品質也不能太差

在舉辦幾場 Vibe Coding 的工作坊後；我發現一件特別的事，明明指令相同，有些學員可以很快取得期待的結果，而有些學員則是很容易卡住。

一開始我以為是運氣問題，但深入討論後，發現瓶頸其實是出在電腦的硬體規格上面。

因為 Vibe Coding 會需要索引專案、執行指令、編譯程式，假如電腦的記憶體、CPU，以及硬碟的配置較差。

那你執行的每一步都要會花更多的時間，有時不是 AI 做不出來，只是速度慢到你以為他卡住了。

其實電腦也不需要買多好的，我前陣子買了一台一萬八的 Windows 電腦，CPU 是 Intel i7、記憶體 16 GB、硬碟用 SSD，跑起來就很夠用了。

結語：掌握讓 Vibe Coding 效率翻倍的工具

最後來回顧一下今天分享的 3 個工具：

1. 我們可以透過 Python 幫我們讀取不同格式的文件內容，甚至用網路爬蟲取得詳細資訊。
2. 安裝 Node.js 後，我們可以使用最流行前端框架，打造更專業、漂亮的網站。
3. 有了 Git 協助版本控管後，我們就可以用 Vibe Coding 大膽嘗試創意的想法

安裝這些工具不是為了讓你變成程式設計師，而是讓 AI 有更多武器來幫你解決問題。

看到這裡，大家應該可以感受到 Vibe Coding 的可能性與便利。

但還是要提醒大家，Vibe Coding 並不是完全零門檻的事情。

在實務上，當問題變得更複雜，或需要跨領域整合時，專業知識仍然是必要的。

像今天分享的這些工具，對沒有資訊背景的人來說，可能都是知識盲區。

AI 能做到哪些事情，其實是取決於你對這個世界的認知。

希望今天的分享，能讓你使用 Cursor 做 Vibe Coding 時，獲得更好的體驗。

如果你對 AI 工具、自我成長、職涯發展感興趣，歡迎追蹤我！我會我會持續分享新的觀點 💡

工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定
不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的
為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

需要安裝哪些工具

說明包含 windows/mac 兩個系統的設定

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v16.19.1 (使用nvm安裝，後面會介紹)

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

windows 安裝步驟

1. 先進入windows下載頁面
2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

3. 下載後一路瘋狂下一步即可

4. 安裝後開啟命令提示字元(CMD)

5. 在 CMD 輸入指令確認 nvm 是否安裝成功

mac 安裝步驟

1. 打開終端機(Terminal)，以下步驟皆在終端機操作
2. mac 建議先下載 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. 下載後安裝 nvm

brew install nvm

4. 在終端機輸入指令確認 nvm 是否安裝成功

用 NVM 安裝 node.js

• 指令：nvm install [version]
• 請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

nvm install 16.19.1

筆者nvm安裝版本：0.39.3

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控
windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

git fetch

• 抓取遠端數據庫更新

git pull

• 更新遠端數據庫

git push

筆者windows git安裝版本：2.27.0.windows.1

4. yarn

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠
下載頁面

常用指令

• 依據 package.json 安裝所有套件

yarn

• 安裝到 dependencies

yarn add [package]

• 安裝到 devDependencies

yarn add [package] –save-dev

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

yarn global add [package]

筆者yarn安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度
VScode下載頁面

在你的成長的路上總有不少值得你警惕的前輩

為什麼寫這篇文章？

慘痛經驗 part 1

筆者曾待過超瞎的公司，他們對於一個專案遷移的概念還停留在把程式 copy 到 USB，到現場的時候再把他放到正式的server上面

所以每次發布新版本都超級心驚膽跳擔心會不會檔案沒有 call 完全(如果你曾經在 windows 上複製過 node_modules 超過 2G 的專案就會知道我在說什麼惹)、會不會到現場的 server 跑不動，這個詭異的問題直到我離開那間公司後才知道根本是一道假命題…

• 都用 git 了，為什麼還要把程式 call 到 USB？？？
• 都有 package.json 紀錄要安裝的套件跟版本了，我幹嘛要複製好幾G的套件進去 USB？？？
  不要笑，我相信現在還是有公司用這麼瞎的方式在發布新版本XD

慘痛經驗 part 2

筆者曾在公司兼職 MIS，幫公司架一個 gitlab 提供內部使用；但每個人 git 使用的習慣相差很大，有些部門的同事根本就沒在管什麼檔案適合傳到 gitlab 什麼不適合，每次 push 都全部上傳(各種執行檔、暫存檔全部上傳，根本把 gitlab 當成 NAS 在用…)

因為 git 版本控管的特性，他的專案在 gitlab 就越來越肥，儘管跟他溝通很多次這樣的 git 版控很有問題但都被當成耳邊風，直到有一天 gitlab 的硬碟終於被他用完了…(他一個專案就用了 15GB 的容量)，他才開始願意去了解自己專案中有多少檔案是不需要上傳的

PS.因為 gitlab 一般只會儲存程式碼，所以當時只劃分了 100GB 的硬碟空間

慘痛經驗 part 3

這個事件發生在一個熱愛技術的朋友身上，他使用了一個需要憑證的套件，這個憑證會根據使用者使用的次數去做收費，不知道他當時是喝多了還是太累了；他居然把憑證加入 git 版控上傳，我永遠記得下個月他收到帳單時臉上的表情有多麼的驚嚇

昨日經驗

昨天我們說到 .env 裡面存放的資料有許多都不適合公開(ex:資料庫帳號密碼、token…)，這些資料外流出去我想就不是檢討報告能解決的問題惹，為了避免誤傳檔案，今天我來介紹一個好用的東西 .gitignore，他是一份忽略清單，忽略清單上的都是不需要加入版本控制的檔案

今日目標

1. 了解哪些檔案/資料夾不需要放入版控
2. 在專案加入 .gitignore
3. 透過 VSCode 知道是否成功將檔案加入忽略清單
4. 為環境變數加上一個可以上傳的範例檔

1. 哪些檔案/資料夾不需要放入版控?

有了上方慘痛經驗的範例，我想大家應該對要加入 .gitignore 的檔案/資料夾有基礎概念了，在這我也整理了常見在忽略清單如下：

1. 機敏性資料：資料庫帳號密碼、存取權限的權杖(token)、憑證(credentials)…
2. 環境變數：專案env檔(因為裡面通常存有ip、password…等隱私資訊)
3. 套件資料夾：node_module、vendor…
4. 日誌檔案：log相關紀錄
5. 程式編譯時產生的檔案：快取檔案、暫存檔案、編譯結果

透過這份清單，大家可以想一下昨天的專案有哪些檔案/資料夾是要加入這份忽略清單的呢

2. 在專案加入.gitignore

1. 上一篇有提到我們這次的爬蟲會用到 FB & IG 的帳號密碼還有你 google sheet 的 id，這些資訊我們統一設定在 .env 環境變數裡面，我相信大家都不希望把這些機敏資訊放到 git 外流出去
2. 另外我們 透過 yarn 安裝的 dotenv 套件也產生了一個 node_modules 的資料夾，從經以後你所安裝的套件都會儲存到這個資料夾裡面，通常一個中型專案套件他的大小都高達 300MB 以上，所以這個 node_modules 的資料夾是不適合上傳到到 git 的(這些套件到新環境下指令yarn就能安裝)

所以我們的忽略清單會長這樣

.gitignore

node_modules
.env

3. 透過 VSCode 知道是否成功將檔案加入忽略清單

如果你也是用 VSCode 當成編輯器，可以用他觀察使用 .gitignore 的前後變化

• 使用 .gitignore 前： .env 及 node_modules 會被列入變更；綠色的字代表有新增(U)的檔案，棕色的字代表有改變(M)的檔案

  

• 在 SOURCE CONTROL 中可以看到有哪些檔案被列入變更

  

• 使用 .gitignore 後： .env 及 node_modules 會變成淺灰色，代表不會被列入變更

  

這份忽略清單會隨著你專案的變動而調整，如果你在撰寫其他種類程式語言可以參考github的官網來調整自己的.gitignore

4. 為環境變數加上一個可以上傳的範例檔

今天我們把 .env 放入 .gitignore 中讓他不會加入版控，但為了讓專案快速遷移，我會建立一個 .env.example 的檔案，他是環境變數的範例檔，這樣你在新環境只需要將他複製一份到 .env 檔填上自己的參數就能完成環境設定了，下面是本專案未來會用到的環境變數

.env.exmaple

#填寫你目標放入的sheet id
SPREADSHEET_ID='your sheet id'

#你FB及IG的帳號密碼(建議用小帳號)
IG_USERNAME='ig username'
IG_PASSWORD='ig password'
FB_USERNAME='fb username'
FB_PASSWORD='fb password'

#這是設定排程的時間參數(目前預設每日22:30準時執行)
CRONJOB_TIME='0 30 22 * * *'

⏭️ 下個階段

關於撰寫程式的基礎介紹就到今天，從明天會開始撰寫爬蟲，這裡先跟各位分享一下我對於功能撰寫順序的邏輯以及技術文章未來的規劃

• 判斷哪個功能需要最先研究
  1. 我們先前列出很多功能項目，我個人對於研究的前後順序是先把不熟悉的完成，因為他通常會花你最多時間
  2. 如果中間有遇到無法解決的問題，最慘的結果就是你必須放棄這個專案，所以我建議不熟悉的東西你最好再接案前要做一下功課確認是可以完成的，這就是你從最難的部分開始實作的好處：及時止損，避免你完成大部分功能最後因為卡在一個關鍵功能無法完成交付
• 專案撰寫順序
  我會按照我當時撰寫的思路完整的呈現給大家，目前的順序是：
  • 爬蟲功能 → 儲存到雲端Google Sheets → 電腦自動排程執行 → LINE通知提醒執行結果

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定

不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的

為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

今日目標

1. 了解使用工具的重要性 & 為什麼選擇他
2. 完成開發前環境設定

使用什麼工具完成

說到爬蟲，我想絕大多數的人第一個想到的一定是 python，python 是一個很好的語言，但很可惜我對他的鑽研不夠深入，如果這份外包使用一個自己不夠熟悉的語言來撰寫那是一個不負責任的行為，所以在這裡我選擇的語言是 javacscript

另外我會詳細說明前置環境的設定，如果每個人的環境設置都不一樣，那麼我文章的程式可能在許多電腦上都是無法執行的，所以說明包含 windows/mac 兩個系統的設定，讓你們了解到為什麼叫使用這些工具

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v12.19.0

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

• windows 安裝步驟

  1. 先進入windows下載頁面

  2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

     

  3. 下載後一路瘋狂下一步即可

  4. 安裝後開啟命令提示字元(CMD)

  5. 在 CMD 輸入指令確認 nvm 是否安裝成功

     nvm
     

     

• mac 安裝步驟

  1. 打開終端機(Terminal)，以下步驟皆在終端機操作

  2. mac 建議先下載 Homebrew

     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
     

  3. 下載後安裝 nvm

     brew install nvm
     

  4. 確認 nvm 是否安裝成功

     nvm
     

     

• 常用指令

  • 安裝特定 Node.js 版本

    nvm install [version]
    

    請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

    nvm install 12.19.0
    

  • 切換 Node.js 版本

    nvm use [version]
    

  • 列出本機(local)已經安裝好的 Node.js 版本

    nvm list
    

  • 顯示當下 Node.js 版本

    nvm current
    

  筆者安裝版本：1.1.7

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控

windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

  git fetch
  

• 抓取遠端數據庫更新

  git pull
  

• 更新遠端數據庫

  git push
  

筆者windows安裝版本：2.27.0.windows.1

4. yarn 官網

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠

windows下載頁面、mac下載頁面

常用指令

• 依據 package.json 安裝所有套件

  yarn
  

• 安裝到 dependencies

  yarn add [package]
  

• 安裝到 devDependencies

  yarn add [package] –save-dev
  

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

  yarn global add [package]
  

筆者安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度

VScode下載頁面

優點

1. 適合新手：不需在終端機(Terminal)安裝及設定各種前置作業，能節省建立開發環境的成本，並加速對開發環境的了解。
2. 執行程式：可以在 IDE 內直接執行一段程式碼，不需離開編輯器。
3. 程式碼高亮：將原始碼以不同顏色顯現，讓我們閱讀更方便。
4. 程式碼自動格式化：當輸入 if 或 while 時，他會自動縮排。
5. 版本控制方便：git add、git commit 有 GUI 可以操作，並且有 work tree 讓你比對自己更改了哪些地方
6. 功能擴充方便：能透過 Extentions 來安裝所需要的擴充的套件

常用快捷鍵

以下為 mac 快捷鍵，windows 按鍵請自行轉換：cmd = ctrl, option = alt

• 區塊註解 cmd + k + c
• 區塊取消註解 cmd + k + u
• 區塊縮退 cmd + [
• 區塊縮進 cmd + ]
• 自動整理程式碼 option + shift + f

今天對於專案的前置環境說明到這裡，如果環境設定上有什麼問題的話實屬正常，畢竟每個電腦的環境都有些許不同，可以先用 google 查詢看看喔～進入工程師的世界後stackoverflow會是你最好的朋友

筆者碎碎念

在文章的最後分享一個心態，無論是面對工作還是外包都一樣

在面試工作或是談外包時要先衡量一下自己的實力

如果你即將要面對的工作(外包)已經遠遠超過了你的能力範圍

強烈建議你拒絕這個機會，不要把工作(外包)當成是一個給你練習基礎的地方

你的同事跟業主會恨你的

尤其是外包，如果你的基礎不穩，運氣好你可能會做出一個貌似可以用的專案

但實際上這個專案充滿著你所不知道的漏洞

這塊我想只有實際在業界磨練過一段時間才能比較感同身受

參考資源

1. nvm：快速安裝、切換不同版本的 Node.js
2. 連猴子都懂的Git入門指南
3. Windows 10 安裝並使用 nvm 切換 NodeJS 版本
4. 一應俱全的整合開發環境IDE
5. 用Yarn取代npm加速開發

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008