03 planning-and-building-an-seo-analyzer
建立一個 SEO 分析器
在本課程中，我們將建立一個網站效能分析器。你將學習如何檢查 HTML 內容並理解網站結構，這意味著理解我們將要自動化的概念。
專案概述與目標
我們將在利用 Repl.it 的 Agent 建立第一個原型之前，建立一份產品需求文件 (PRD) 和線框圖 (wireframe)。正如我們剛才所涵蓋的，我們將建立一個 SEO 分析器，你可以在其中輸入任何網站 URL，並查看該網站的載入時間和標籤。我們還將詳細介紹這些是什麼以及它們為何重要。這使我們能夠檢查網站是否正確實施，並獲得關於 SEO 最佳實踐的洞察。
產品需求文件與線框圖
當我們談論建立 PRD 或線框圖時，這就是我們所指的。我們將詳細介紹我面前的內容，這是使用線上白板工具完成的，以及我認為它為何重要。
這是一個互動式工具，允許你輸入網站 URL，查看網站載入時間和標籤的視覺化呈現，以確保我們正在建立的內容配置正確，並檢查網站是否正確實施。作為一個延伸目標，我們可能會將最近分析過的網站儲存在資料庫中。
此處涉及的技能包括：
- 提示 (prompting)
- 處理和分析 HTML 內容
- 建立直觀的資料視覺化
- 處理錯誤和邊緣情況
- 儲存 (storage)
建立一個 SEO 分析器
在左側，我花了一些時間草擬了我們將要建立的應用程式模型。使用者將互動的主要入口點是一個簡單的文字框，你可以在其中輸入 URL。
輸入 URL 後，我們希望應用程式能針對你輸入的網站提供建議。例如，它可能會指出：「嘿，你的網站沒有標題，或者沒有描述。」這將使 Google 難以找到你的網站，或讓其他人難以了解你的網站內容。
這些 meta tags 嵌入在每個網站中。因此，當你建立網站或部署應用程式時，考慮這些事情實際上很重要。考慮你的網站在人們搜尋時的預覽顯示方式至關重要。這正是我們的應用程式將允許我們做的事情：分析任何網站並存取這些資訊。
規劃的重要性
當我們談論「vibe coding」（隨性編碼）或「順其自然」時，通常進行這項練習並精確分解我們想要的東西會更有幫助。透過概念化和視覺化，我們才不會在對自己正在做什麼毫無概念的情況下使用工具，或者至少能更好地理解我們想要達成的目標。
撰寫 Repl.it Agent 的初始提示
現在，讓我們來談談這如何轉化為 Repl.it Agent 的初始提示。我的提示是：「幫助我建立一個互動式應用程式，以互動且視覺化的方式顯示任何網站的 SEO 或 meta tags，以檢查它們是否正確實施。」
運用領域特定知識
請注意，這第一句話包含了領域特定知識。你可能不知道什麼是 SEO tags，你可能也不知道什麼是 meta tags。但 AI 知道。透過使用這些術語，透過理解框架或理解我們可能不了解的領域知識，我們能夠精確地引導 Repl.it Agent 進行建構。
提示的進一步細節
我們提示的下一部分是：「應用程式應該抓取網站的 HTML，然後根據 SEO 優化的最佳實踐提供關於 SEO tags 的回饋。」
預覽功能與視覺化
應用程式還應該提供 Google 和社群媒體的預覽。我認為最後這一點很重要，因為我曾從事過一些 SEO 優化工作。這是我特別想視覺化的東西，因為它可以非常直觀。
網頁抓取與可操作的洞察
但請注意，我們要求應用程式抓取網站的 HTML。這本質上就是網頁抓取 (scraping)。因此，我們要做的是，對於任何網站，我們將抓取它，然後獲取其內容。我們希望應用程式返回回饋，對嗎？我們希望對我們正在做的事情獲得可操作的洞察。因此，我們正在仔細思考可以提供給 Agent 的語言和措辭，以獲得這些結果。
SEO 標籤的基礎
值得注意的是，我知道 SEO tags 嵌入在網站的 HTML 中。任何人都可以存取它們，這就是我為什麼知道這個應用程式很有可能成功運作的原因。
視覺化 SEO 標籤與 HTML 檢查
作為我們正在建立的內容的非常清晰的視覺化呈現，當我們在 Google 上搜尋 Deep Learning AI 時，返回的結果實際上是網站的 SEO title。而描述則列在下方。
我們可以在控制台 (console) 或頁面的實際底層 HTML 中看到這一點。如果我點擊頁面，然後右鍵點擊「Inspect」（檢查），我們將會看到所謂的瀏覽器控制台 (browser console)，或者更確切地說，是 DevTools。
所以，如果我點擊頁面，在那裡右鍵點擊「Inspect」，我將會存取我們的 DevTools。這可能看起來有點嚇人，但這只是網站的底層 HTML。
現在，如果你進入 HTML 的 部分，你將會看到一大堆東西。你實際上會看到一些稱為 meta tags 的東西。其中之一是標題：「Deep Learning AI, Start or Advance Your Career in AI」。以及描述：「Join over 7 million people learning how to use and build AI through our online courses.」這些就是我們將要提取的標籤，以了解我們的網站是否正確實施。
啟動 Repl.it Agent 進行建構
我們已經討論了我們的提示，也回顧了我們的線框圖和 PRD。現在，我們將輸入我們的提示，然後在 Repl.it 上點擊「Start Building」。
Agent 的建構流程
接下來，我們將看到一些事情開始發生。我將逐步講解這個過程，因為這是我們的第一個課程，並討論 Agent 如何建立這些應用程式。
從根本上說，Agent 與其他類型的「vibe coding」應用程式不同，因為 Agent 會產生一個計畫。這個計畫將幫助我們理解我們正在建立什麼，並確認我們正在採取正確的行動，或者我們正在更接近我們真正想要的目標。
初始原型與計畫審批
因此，Agent 將分析該提示並向我們呈現一個計畫。它將建立初始原型，並詢問我們是否需要任何後續功能。在初始原型中，它還會提及是否使用了任何框架或整合。
Agent 的整合能力
我將在「Start」中批准這個計畫，然後再多談一點。重要的是要提到，Agent 確實帶有大量的整合功能。例如，如果你說：「為我建立一個使用 Anthropic API 的應用程式」，或者「為我建立一個具有 Stripe 支付功能的應用程式」，我們都原生支援這些整合。Agent 應該會在應用程式計畫中提及這些。
即時視覺預覽
現在，在右側發生的事情是，Agent 正在即時設計我們應用程式的視覺預覽。其目標是讓你盡可能快地獲得可以使用的東西，或者說，盡可能快地獲得可以視覺化的東西。
重要的是要注意，這不是實際的應用程式。因此，我們可以更接近我們的線框圖，看到主要入口點就是這個網站 URL。從那裡，我們將能夠分析它。
建立互動式應用程式
現在，一旦 Agent 完成了視覺預覽，它實際上會在這裡告訴我們，它正在建立一個完全互動的應用程式版本。
因此，在幕後，Agent 正在搭建這個專案，安裝套件，並配置你的環境。這就是我們一開始談到的，對嗎？Repl.it 不僅僅是 Agent 和 Assistant，它實際上是一個完整的環境，一個完整的工作區。
Repl.it 工作區概覽
在我們設定的同時，我將介紹一下工作區。如果你看左上角，你可以查看工作區中存在的檔案。隨著 Agent 繼續建構，這些檔案將會被專案包含的資料夾和目錄填充。
因此，再次強調，這是一個完整的雲端互動式工作區，這一點非常重要。任何時候，如果你熟悉程式設計概念，如果你想打開像 shell 或 console 這樣的東西，你都可以做到，我們有權限存取。
如果你不熟悉程式設計，你也不必做這些事情。我們將完全使用自然語言進行建構，但重要的是要提到，透過頂部的新分頁介面，或左側的所有工具區塊，你可以存取工作區中所有可用的服務和工具，其中包括：
- 整合 Git
- 安裝依賴項 (dependencies)
- 查看我們的輸出 (output) (我們將詳細介紹這是什麼)
應用程式建構時間與策略
還有儲存 secrets。Secrets 基本上是一種非常安全的方式來儲存環境變數，它不需要任何配置，還有許多其他功能。
回到我們的應用程式，Agent 仍在建立完整功能的版本，這可能需要 5 到 10 分鐘。這也是我們在建立這個應用程式時需要強調的另一件重要事情。Agent 的設計方式是從頭到 MVP (最小可行產品) 建立這些應用程式。這就是為什麼我們保持高層次，並讓提示保持簡單的原因。這些運行可能需要兩分鐘，也可能需要五到十分鐘，但對於第一次實施，你可以期待一個功能齊全的應用程式。
Agent 的檔案生成與透明度
正如你在左側看到的那樣，Agent 剛剛建立了一個 client、一個 server，以及一大堆其他的配置檔案。
現在我們看到 Agent 實際上正在這個互動式窗格中寫入和建立檔案。我們這樣做的部分原因是因為我們希望盡可能快地讓你達到 MVP。因此，與 Repl.it Agent 之間所需的來回溝通較少，但在整個過程中，Agent 會精確地向你展示它正在做什麼。
學習 Agent 的建構模式
我們可以看到它正在寫入這個檔案 server routes，它已經寫入了我們的 client index 和其他一些東西。
現在，深入探究所有這些東西如何運作並不重要，但開始關注 Agent 如何建立這些應用程式，並開始逆向工程應用程式的運作方式可能會很有用，因為這可以教你很多關於程式設計和建構的知識。
例如，我看到這裡有幾個資料夾：client、server 和 shared。如果你不熟悉，client 通常是前端 (front end)，而 server 通常是後端 (backend)。因此，點擊 server 會顯示像 routes 這樣的東西是合理的。如果你不熟悉 APIs，這是一種應用程式之間進行程式化通訊的方式，它發生在你的後端。
但在 client 中，我們可能會看到原始碼檔案，例如 index HTML 檔案，還有像 app.tsx 這樣的檔案，這可能是我們應用程式的主要入口點，或者 index.css，CSS 定義了應用程式的樣式。
所以，我這裡想強調的是，你真的不需要看這些東西。如果這讓你感到害怕，就關閉它，不要看。我們就繼續「vibe coding」（隨性編碼）。但是，如果你想在建立這些東西的同時學習和跟隨，你可以開始探索，開始留意。
應用程式組件與 MVP
哦，嘿，Agent 正在定義這個東西，這個稱為 social media preview 的組件。我敢打賭，如果我們進入我們的 components 資料夾並查看裡面的內容，Google preview 可能會定義一些東西，向我們展示它在 Google 上可能看起來的樣子。
因此，Agent 在第一次運行時，將從頭開始建立這個應用程式。它將實施前端和後端。是的，這有很多話要說，但是當 Agent 運行完成時，我們將擁有一個可以開始迭代的 MVP (最小可行產品)。它這樣做是為了向你提供一個可以直接運作的東西，一旦我們的應用程式建立起來，我們就可以繼續推進或繼續迭代。
總結與下一步
這就是我們的工作區概覽。我們將讓 Agent 繼續建構。你將能夠看到它所做的一切。然後，一旦我們有了 MVP，我們就會回來開始迭代。
使用 Repl.it Agent 開發原型
這通常是我使用 Repl.it Agent 建立第一個原型的方式。
應用程式實作與 Agent 歷史
你將在右側注意到，我們已經有了一個實作版本的應用程式。我想花點時間深入研究一下 Agent 的歷史記錄，也就是這裡的聊天歷史，看看發生了什麼。
Agent 的自動化流程
正如你所看到的，當我們編寫應用程式時，發生了大量的檔案編輯。任何時候你都可以深入研究這些內容，甚至可以點擊下拉選單，精確地查看創建了什麼或更改了什麼。
然後 Agent 繼續安裝了我們應用程式所需的依賴項 (dependencies)，以及一些我可能在第一次嘗試時遺漏的獨立依賴項。接著，它配置了頂部的運行按鈕來執行我們的應用程式，並循環檢查，實際識別出：「嘿，我們遺漏了一個套件。如果不安裝它，這個東西將無法運作。」
錯誤處理與自動修復
然後它進行了一些最終檢查，對我們的儲存實作進行了編輯，發現了一個問題，重新啟動了應用程式，並修復了該問題。
因此，使用 Replicant (Agent) 進行建構的一大優點是，你不必擔心一些麻煩的啟動問題。你可以讓 Agent 掌控一切，並實作部分功能。
Agent 報告與應用程式結構
從那裡，它確認了它所做的一切以及它所創建的一切。這也是了解我們正在建立什麼的另一種好方法。
Agent 報告了以下內容：
- 我們為儲存和分析這些標籤建立了一個完整的資料模型。
- 我們建立了後端 API endpoints。
- 我們使用 URL 輸入、結果概覽和視覺化來實作了前端。
- 我們還做了許多其他事情。
網頁預覽與部署環境
現在我們可以看看它是否運作。我們可以開始除錯 (debugging)。我們可以開始測試我們的應用程式。
右側有我們的網頁預覽 (web view)，它將向我們展示應用程式的預覽。值得注意的是，如果你曾經編寫過程式碼，或者使用其他工具進行建構，你可能是在 localhost 上進行的，這基本上是在你的本地機器上運行某些東西。這個網頁預覽看起來會很相似，但從根本上說，這個應用程式，這個 Repl.it 應用程式，是運行在一個 URL 上的。
因此，你實際上可以從任何地方存取它。你可以在你的瀏覽器中存取它。如果我點擊它，它會在一個新分頁中打開這個網頁預覽。你可以在開發時即時掃描並在你的手機上存取它。你的朋友可以在你建構時存取它。
重要的是要提到，一旦你離開這個應用程式，一旦你關閉這個頁面，這個 URL 將會進入休眠狀態。這不是一個部署 (deployment)，但它是一個技術上在網路上線的開發環境。所以從根本上說，我們正在處理一個真實的網頁。
測試應用程式功能
那麼，讓我們來測試一下。看看它如何運作。我將輸入我的部落格網址，看看會發生什麼。
我點擊「Analyze」（分析）。我們得到一個 SEO 摘要：86 分（滿分 100）。我想這還不錯，可能像是 B 或 B+。我沒有抱怨。看起來我們有一些分數。
SEO 分析結果與建議
讓我們看看這裡發生了什麼。
- Matt Palmer，沒錯。
- Developer marketing simplified，沒錯。
看起來有一個警告：我們的 title tag 太短了。描述 (description) 也有點太短。這些是詳細資訊。看起來我們正在獲得一些最佳實踐建議。這與我們想要的非常相似。
我們還有一些關鍵字 (keywords) 建議。我們在那裡得到了通過，還有一些其他建議。所以我們的分析器告訴我們的是：「嘿，如果我們想讓我們的網站顯示在 Google 搜尋上，甚至可能是 LLMs 的索引中（我不知道），我們可以優化我們的 title。我們可以改進 description，讓它可能長一點。」
社群媒體預覽與多網站測試
這真的很棒。我會說它接近我們想要的結果。看起來我們還有一些社群媒體預覽。所以讓我們去看看那裡發生了什麼。
我們有一個 Facebook 預覽，它正在正確載入圖片。我們還有一個 Twitter 預覽，它也在那裡正確載入圖片。
所以我們在這裡所做的是實作了這個工具，他們可以檢查以確保我們的網站在社群媒體上正確顯示，並且被 SEO 正確索引。這是一次性完成的，對嗎？我們所做的只是輸入了那個初始提示。
讓我們嘗試另一個網站，例如 deeplearning.ai。
測試與「Vibe Coding」的產品感
看看我們得到了什麼，好的。我只是想指出我的網站得分更高。我確信在我錄製完這個之後，Andrew 的網站會得分更高。我毫不懷疑他會在這方面做得更好。
但只是為了看看所有東西都正常顯示，我們確實得到了社群媒體預覽，也得到了 Twitter card 預覽以及所有其他東西。
所以這就是我們正在談論的部分，對嗎？現在我只是在測試應用程式。我正在查看它是否按照我的預期運作。「vibe coding」的一部分，很大一部分，是注重細節，並具有非常精準的產品感。
識別使用者介面問題與響應式設計的挑戰
例如，我不喜歡這裡的間距。83 好像疊在 100 上面。這不夠好。我們將修復它，讓它變得更好。
下面的一些其他元素。這看起來不錯，但它們沒有對齊。Past 不在這個「pill」的中央。
我認為這個網站的許多其他視覺呈現都非常好。但是，使用 AI 進行建構的一部分是，要非常詳細地描述什麼有效、什麼無效，以及你想要改變什麼，對嗎？
另一個例子是，這個網站的 padding，可能需要更多的 padding 才能看起來更好。網頁開發中一個有趣的事情是，你希望你的應用程式是響應式 (responsive) 的。所以你可以看到，如果我們把它做得更寬，padding 實際上看起來會好一點。所以這裡發生的情況可能是，這並沒有針對小螢幕進行優化。
我們可以透過調整網頁預覽的大小，或者點擊這個方便的螢幕尺寸切換器，來看看它在 iPhone 上看起來如何。也許我們想為 iPhone 建立這個應用程式。所以檢查這一點很重要，對嗎？
例如：
- 這些「pills」並沒有按照我想要的方式擴展。
- 這些「tabs」可能看起來有點壓縮。
- 圖示可能沒有正確對齊。
- 這些圖片沒有相同的長寬比。
再次強調，這可能看起來微不足道，但深入研究細節真的很重要，對嗎？這裡的文字正在重疊。
MVP 的達成與改進需求
綜合以上所有考量，我們已經有了一個 MVP。我們有一個可以運作的東西。我認為 Agent 一次性完成這項工作令人印象深刻。所以現在我們將跟進並修復其中一些特性。
改善應用程式的響應式設計
所以我要說：「讓我的應用程式完全響應式 (responsive)。」這個提示很重要。響應式是什麼意思？
在網頁開發中，它實際上意味著你的應用程式會回應螢幕尺寸的調整，對嗎？這將使其行動裝置友好 (mobile friendly)。因此，當我們說「讓我的應用程式完全響應式且行動裝置友好」時，我們正在使用與網頁開發技術同義的關鍵術語，AI 將會很好地理解並實作。
所以我要說：「讓我的應用程式完全響應式且行動裝置友好，並修復按鈕和元素的某些對齊和 padding 問題。具體來說，修復整體 SEO 分數的置中問題，並移除 /100。」
精確的修改提示
我在這裡非常詳細地描述了我想要編輯的內容。你可能會注意到我要求了幾件事。正如我們所討論的，我們希望這些編輯是簡潔的，但根據我使用 AI 進行建構的經驗，我們可以這樣做：「嘿，我想要讓應用程式響應式且行動裝置友好，而且我還想修復一些其他問題。」然後我們可以按下 Enter 鍵，讓 Agent 運行。
再次，我們將啟動一個 Agent 運行。我認為你可以預期這次運行會快一點，因為編輯的內容較少。
Agent 的執行與上下文理解
我將稍微談談我們在這裡做的事情，然後我們將讓它完成，並在完成後再回來。
再次，使用 AI 進行建構，也就是「vibe coding」，就像要求一個初級開發人員或從未見過你專案的人進行更改一樣。你必須非常詳細地描述你想要什麼。例如：「讓它完全響應式且行動裝置友好。修復一些對齊和 padding 問題，特別是我現在看到的這個。」如果你能做到這一點，Agent 就擁有所有工具來存取檔案和你的工作區上下文，以了解問題並修復它們。
Agent 的目標編輯
所以你可以看到：「嘿，我正在查看 home 組件。我正在編輯 client 中的 URL form，我將開始更新 results overview 以修復 SEO 顯示並使其更具響應性。」
就這樣，我們正在針對其中一些編輯，我們可以期望這將會貫徹執行並達到我們想要的效果。
Agent 的上下文與聊天管理
另一件重要的事情是，當我們要求 Agent 做這些事情時，它擁有這些檔案和目錄的所有上下文。因此，它將能夠搜尋檔案。它將能夠確切地理解正在發生什麼。
最後一點，這些，你實際上可以即時看到一些內容正在更新，這很酷。我們現在正在與 Agent 聊天。所以當我談到上下文，當我談到與 AI 交談並告訴它所有這些不同的事情時，這個聊天中的所有內容都在 Agent 的上下文視窗中。它擁有它所做過的所有這些事情的歷史記錄。
隨著聊天記錄變得越來越長，你可能會想像 AI 會變得更慢或響應性更差。因此，當我們處理不同的事情時，建立新的聊天很重要，這將本質上清除上下文或針對 Agent 的回應。Assistant 也是如此，Assistant 的運作方式非常相似。
聊天策略與功能迭代
所以我們正在做的是，我們建立了這個初始聊天，我們得到了一個原型，然後我們正在對它進行一些迭代。從那裡，我們可能會切換到一個新的聊天來處理我們的下一個功能。
這就是我想談的所有內容。我們將讓它運行，一旦我們有了結果，我們就會回來。
運行完成與 Agent V2 說明
看起來我們已經完成了這次運行。
在我們深入探討之前，我只想指出，如果你在相對較短的時間內學習本課程，你可能會看到這個「V2 early access」的小標籤。我們正在開發 Agent 的新版本。當你學習本課程時，希望這個版本已經向所有人發布了。你可能不會看到這個標籤，你可以假設你擁有最新最好的 Agent 版本，並且所有功能都將以相同的方式運作。
Agent 的改進報告
現在，我們在這裡看到的是一個與我們剛才所做的非常相似的介面。Agent 對我們的應用程式進行了改進，並返回了一份它所做工作的報告，沿途設置了一些檢查點 (checkpoints)。請注意，這些檢查點是免費的。你那邊應該也會看到同樣的情況。
Agent 進行了以下改進：
- 修復了 SEO 分數顯示。
- 透過響應式佈局改進了行動裝置視圖。
- 增加了陰影效果和圓角以增強視覺層次感。 (我們甚至沒有要求這個，但它看起來確實很不錯。我非常喜歡。)
因此，當我們思考框架以及設計美觀、引人入勝、有趣的應用程式的方式時，我們可以將此作為一個提示：「嘿，這看起來真的很酷。」它還使所有 UI 組件適應不同的螢幕尺寸。
重新測試與新問題
那麼我們現在該怎麼辦？嗯，我們將測試一下。所以讓我們做同樣的事情，輸入我們的網站。
好的，第一件事，這很好。它沒有在開頭添加 HTTPS，而且它需要一個網站。所以立即跟進：「讓我不必每次都輸入 HTTPS...」這是一個非常棒的跟進。我們稍後會將其作為我們下一個提示的一部分發送。
應用程式外觀改進
目前，我將只輸入我的 URL，看看會出現什麼。
- 這對齊得更好了。
- 我認為它仍然可以置中。
- 此外，右下角彈出了一個漂亮的小提示 (toast)。
- 這些「pills」現在實際上對齊並置中了。所以我們修復了這個問題很酷。
我真的很喜歡大部分的外觀。看起來所有東西都正常顯示。
響應式佈局與行動裝置體驗
所以我檢查了社群媒體預覽。這些，讓我們看看，這些看起來更好了。如果我在這裡調整螢幕大小會發生什麼？
如果我調整大小，看起來這些寬度顯示得更好了。如果你還記得，這些圖示有點擠壓。如果我們在這裡回到寬螢幕，我們就用像 iPhone 14 Max 這樣的，我們就用老式的方法。我們現在已經到 16 了。但這看起來更好了，對嗎？我們有一個更響應式的佈局。如果我在我的 iPhone 上操作，這會更友好一些。而且我開始得到一個設計更好且行動裝置友好的應用程式。
建立實用工具
所以這真的很酷。我們正在建立工具。我們正在建立任何人都可以使用的工具，我們可以用來分析我們自己的網站，而且它們確實有效，這真的很有趣。
應用程式 V1 總結與未來規劃
所以我們將把這個稱為我們應用程式的 V1 版本。在下一課中，我們將對其進行一些潤飾。我們將透過 Assistant 進行一些編輯，並真正將我們的應用程式提升到一個新的水平，可能會添加一些進階功能，然後進行部署。