課程介紹

再次歡迎回來

在前兩個課程中，我們學習了如何建立基本的 AMP 網站。我們學習了如何使用元件來為我們的網站新增功能並處理使用者互動。

我們一起從頭開始為虛構的 Chico’s Cheese Bicycles 商店建立了一個網站。我們新增了影片和圖片等內容、電子報訂閱表單、滑出式選單，以及更精美的圖片輪播。

我們已經做了這麼多，還有什麼可以學習的呢？

首先：在我們目前建立的網站中，每位訪客看到的內容都相同。如果我們想要建立一個網站，該網站會根據造訪網站的使用者而有所不同呢？

這種動態網站在今天的網際網路上很常見。我們可能會造訪相同的 URL 來閱讀電子郵件，但我們看到的電子郵件卻各不相同。在購物網站上，我們看到根據我們過去的選擇而個人化的產品清單，以及我們建立的購物車。在社群媒體上，我們看到由演算法產生的目標內容（這些演算法會判斷我們的興趣），以及我們自己建立的內容。在新聞網站上，我們閱讀突發新聞和其他讀者的評論。在每種情況下，這些網站的設計者都必須在不知道確切顯示內容的情況下開發頁面。

在本系列課程的最後一個課程中，我們將學習如何根據使用者與我們網站的互動方式，變更頁面的外觀或內容。在本課程結束時，您將學習如何

• 儲存應用程式狀態變數中的資訊，以回應使用者動作。

• 在狀態變數更新時，變更網站的內容或外觀。

• 使用範本在您的頁面上擷取和顯示伺服器資料。

• 動態變更螢幕上的內容（即篩選和排序資料）。

為了達成這些目標並持續開發我們的起司自行車網站，我們將繼續改進我們的圖片輪播。在初級課程中，我們學習了如何使用 AMP 元件建立輪播。在中級課程中，我們透過新增額外的縮圖輪播來擴展輪播的功能。當使用者在任一輪播中變更投影片時，兩個輪播中的活動投影片都會更新。我們使用 AMP 事件和動作完成了此操作。

在本進階課程中，我們將變更輪播以在應用程式狀態下執行。我們將目前投影片儲存在狀態變數中，並使用繫結在每次投影片值變更時更新每個輪播。然後，我們將探索新增第三個元件有多麼容易，該元件也會觀察選取的投影片值並在值變更時更新。

接下來，我們將在我們的 Chico’s Cheese Bikes 網站上新增我們的第一批產品。在初級和中級課程中，我們頁面上的所有內容都包含在我們的 HTML 檔案中。但是，此產品清單將從伺服器載入，然後顯示在螢幕上。使用者也可以按價格排序產品，並使用產品類別篩選產品。為了做到這一點，我們將結合應用程式狀態、繫結和擷取伺服器資料的新概念，以及先前課程中關於結合元件和回應使用者輸入的課程。

除了增強我們的自行車商店網站之外，我們還將花時間查看您可以使用 AMP 建置的其他類型網站。在本訓練完成且您開始在 AMP 中建置自己的網站之後，您可能會發現自己正在處理完全不同類型的網站。因此，我們將檢查熱門網站範例，例如影片和電子商務網站，並使用我們在這些課程中學到的概念來了解它們是如何建置的。最後，我們將在 AMP 中重新建立這些網站的基本版本，以展示程式庫的彈性和多功能性。

課程先修條件

本課程專為想要建置高效能網站的現任開發人員，以及想要建置他們第一個網站的有抱負開發人員而設計。此外，本課程非常適合任何維護或處理現有 AMP 網站的人員。

為了從這些課程中獲得最大收益，您應該對 HTML 和 CSS 有基本的了解。能夠識別現有的 HTML 和 CSS，並能夠對其進行少量新增和修改就已足夠。此外，本課程還包含 JavaScript 類型的語法，以 AMP 事件處理常式的形式呈現。了解如何在 JavaScript 或類似語言中進行函式呼叫，應該足以完成本課程的要求。

在進階課程中，我們在幾個範例中從伺服器擷取的資料是 JSON 格式。伺服器已設定為傳回正確的資訊，並且每個練習都包含 JSON 資料範例。就本課程而言，重要的是要知道如何讀取 JSON 物件中的資料、如何使用 JavaScript 參考 JSON 物件中的特定資料片段，以及能夠進行基本的 JavaScript 函式呼叫。如果您不熟悉 JSON 或想要複習一下，您可以閱讀此訓練教材。

本課程旨在作為初級和中級課程的延續。因此，它假設您已了解我們已涵蓋的概念。這些概念包括

• AMP 頁面結構和樣板

• AMP 驗證

• AMP 元件以及如何將它們組合在一起

• 如何使用 AMP 文件

• AMP 快取

• 使用事件和動作處理使用者輸入

如果對這些主題中的任何一個不熟悉，我們建議您複習初級課程的教材，請按此處，以及/或中級課程的教材，請按此處。

開始設定

在本課程中，我們將繼續使用 Glitch 來完成我們的程式設計練習。如果您已完成初級和/或中級課程，您可以繼續使用相同的 Glitch 儲存庫來完成進階教學課程。如果您沒有完成初級訓練，或者如果您想從新的 Glitch 儲存庫開始，您可以重新混合這一個，其中已實作中級訓練中的所有程式碼。如果您想進一步了解 Glitch，您可以在附錄中閱讀相關資訊。

本課程也需要 AMP Validator。AMP Validator 是一種用於偵測 AMP 頁面中錯誤的工具。編寫有效的 AMP 頁面是獲得 AMP 完整效能優勢的重要部分。驗證器主要透過 Chrome 擴充功能存取。若要安裝 Chrome 擴充功能，請造訪此連結此處。

讓我們開始吧！