課程介紹

歡迎回來

在先前的課程中，我們學習了如何透過為我們虛構的 Chico’s Cheese Bike Shop 建立網站來建立基本的 AMP 網站。我們也學習了如何使用 AMP 元件將靜態內容新增到我們的網站。我們新增了圖片輪播、社群媒體貼文、影片和其他基本元素。

接下來要做什麼？現在，我們想要為我們的網站增添更多活力。我們想要讓使用者有與我們網站互動的新方式。我們想要能夠從網站訪客收集資訊，並確認我們已成功收到該資訊。

我們應該在網站中新增哪些類型的功能來達成這些目標？我們的產品經理有一些想法。例如：

• 隨著網站成長，我們將需要一種讓使用者在頁面之間導覽的方式。常見的方式是使用滑出式選單。我們會按下按鈕來開啟選單，然後再按下另一個按鈕來關閉它。

• 為了為我們的行銷團隊收集使用者資訊，我們可能會決定新增電子報訂閱表單。

• 當使用者填寫他們的資訊時，我們會將他們的資料儲存在我們的伺服器上，並顯示一則確認訊息，說明我們已成功為他們註冊電子報。

現在我們知道要建立哪些新功能。我們將如何建置它們？

在入門訓練中，我們學到，若要新增功能，我們只需找到並新增正確的元件即可。但問題是，沒有「amp-newsletter-subscription-form」元件。您可能會認為目標是找到諸如「amp-newsletter-subscription-form」之類的元件。如果開發人員想要建置的每個功能都有不同的 AMP 元件，則元件的數量將是無限的！

相反地，我們可以透過組合元件並讓它們協同運作來建置我們的功能。這種方法稱為「元件組合」。

組合元件並不困難，但確實需要一些練習。首先，我們會識別我們想要建置的功能的需求。其次，我們會尋找滿足我們需求的基本 HTML 元素和 AMP 元件。最後，我們會將元件連接在一起，方法是將一個元件放在另一個元件內部，或設定它們，以便與我們的其中一個元件互動會導致另一個元件發生變更。

在此過程中，我們也會：

• 學習 AMP 如何透過事件處理常式和動作來處理使用者互動。

• 討論如何使用 <amp-form> 收集使用者資訊。

• 說明如何使用 AMP Mustache 範本格式化伺服器資料。

• 探索如何透過新增的元件和互動來增強功能。

課程先修條件

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

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

本課程旨在作為入門課程的延續。因此，它假設您理解該訓練涵蓋的概念。這些概念包括：

• AMP 頁面結構

• AMP 樣板

• AMP 驗證工具

• 如何使用 AMP 元件文件

• AMP 快取

如果您對這些主題中的任何一個不熟悉，我們建議您查看入門課程中的資料 這裡。

開始設定

在本課程中，我們將繼續使用 Glitch。如果您已完成入門課程，您可以繼續使用相同的 Glitch 儲存庫來完成中階訓練。如果您想從新的 Glitch 儲存庫開始，您可以混音 這一個，其中已實作所有程式碼。

想進一步了解 Glitch 嗎？您可以在附錄中閱讀相關資訊。

本課程也需要 AMP 驗證工具。AMP 驗證工具是用於偵測 AMP 頁面中錯誤的工具。Chrome 擴充功能提供了一種存取驗證工具的便利方式。若要安裝 Chrome 擴充功能，請造訪此連結 這裡。

準備好了嗎？讓我們開始吧！