程式碼研究室簡介
1. 事前準備
本程式碼研究室將說明如何使用 Gemini Code Assist 在網站上實作 Material Design。實作 Material Design 後,您將重複進行設計,做出變更以改善使用者體驗並新增功能。在工作坊結束後,您將能夠使用 Gemini 搭配 Material Design 或類似程式庫,建立可供使用且符合使用者需求的網頁,而無需撰寫 CSS。
必要條件
- 瞭解 HTML、CSS 和 JavaScript
- 對網頁設計有基本瞭解
課程內容
- 如何使用 Gemini Code Assist 實作樣式程式庫
- 如何使用 Gemini Code Assist 重複執行設計,而非手動調整 CSS
- 如何有效地提示 Gemini Code Assist 以您偏好的風格提供程式碼
需求條件
- 存取已啟用 Gemini for Google Cloud 的 Google Cloud 專案
- 要設定樣式的網頁,或至少要建立一個資料夾
2. 設定
本程式碼研究室需要兩項必要條件:已啟用 Gemini 的 Google Cloud 專案存取權,以及要設定樣式的網頁。如要在新專案中啟用 Gemini,請按一下 Cloud 控制台右上方的 Gemini 按鈕,然後點選下方面板中的「啟用」。
至於要設定樣式的網頁,您可以使用任何方便的網頁。或者,您也可以要求 Gemini 為您產生一個。如果您向 Gemini 提出 Write me a web page with a form to gather profile information
這類要求,結果應類似如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Profile Information</title>
</head>
<body>
<h2>Get Profile Information</h2>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<input type="submit" value="Save Profile">
</form>
</body>
</html>
3. 實作 Material
首先,請要求 Gemini 在網頁上導入 Material Design,並顯示以下類似的提示:Can you apply material design styles to this page?
注意:本程式碼研究室提供的所有提示均為範例。歡迎參考這些範例,自行撰寫引言,並加入專案背景資訊,以獲得最佳成效。
回應應類似如下:
本研究室使用 Material Design,但您可以要求 Gemini 實作所選的程式庫。如果 Gemini 匯入的 Material 版本與您預期的不同,請嘗試在提示中提供所需的版本。
4. 設計迭代
Gemini 也能協助您修改網頁設計,無須手動深入研究 CSS。請自行設計提示,要求 Gemini 重複執行這項設計。如要在這類工作中取得最佳成果,請盡可能簡潔地描述您想變更的元素,以及預期的結果:
Can we center the content on this page?
您也可以讓 Gemini 在網頁中加入功能元素。要求 Gemini 在表單中加入更多欄位或新增其他功能:
Can we add some more fields to this form, like phone number, email address?
5. 機構
您也可以讓 Gemini 將結果歸納到最適合專案的處所。在本例中,由於重點是針對此檔案中的設計進行疊代,因此 style
標記是理想的選擇。請 Gemini 將回覆內容納入樣式標記,以免您在進行時,需要將變更套用到多個標記:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. 無障礙設定
如同 Material Design 所述,無障礙和可用性是設計的必要元素。考量到這一點,請試著要求 Gemini 確保輸入內容使用正確的類型。這樣一來,螢幕閱讀器等無障礙工具就能正確擷取這些元素。
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. 結論
恭喜您完成本程式碼研究室!您已瞭解如何使用 Gemini 在網頁上實作 Material Design。您也學到了如何重複設計並整理產生的程式碼。有了這項新技能,您就能使用 Material Design 或類似程式庫,在設定最少的情況下,建立可用且符合使用者需求的網頁。