1. Trước khi bắt đầu
Lớp học lập trình này cho biết cách sử dụng Gemini Code Assist để triển khai Material Design trên một trang web. Sau khi triển khai Material Design, bạn sẽ lặp lại thiết kế, điều chỉnh để cải thiện trải nghiệm người dùng và thêm chức năng. Khi kết thúc hội thảo này, bạn có thể sử dụng Gemini để tạo các trang web hữu ích và thân thiện với người dùng bằng Material Design hoặc một thư viện tương tự mà không cần phải viết CSS.
Điều kiện tiên quyết
- Hiểu biết về HTML, CSS và JavaScript
- Hiểu biết cơ bản về thiết kế web
Kiến thức bạn sẽ học được
- Cách triển khai thư viện định kiểu bằng Trợ lý mã Gemini
- Cách cải tiến một thiết kế bằng Gemini Code Assistant thay vì tinh chỉnh CSS theo cách thủ công
- Cách nhắc Gemini Code Assistant đóng góp mã theo kiểu bạn mong muốn một cách hiệu quả
Bạn cần có
- Quyền truy cập vào một dự án trên Google Cloud có bật Gemini cho Google Cloud
- Một trang web cần tạo kiểu hoặc ít nhất là một thư mục mà trong đó để tạo kiểu
2. Thiết lập
Đối với lớp học lập trình này, bạn cần có 2 điều kiện để truy cập vào một dự án trên Google Cloud có bật Gemini và một trang web để chúng ta định kiểu. Bạn có thể bật Gemini trong một dự án mới bằng cách nhấp vào nút Gemini ở trên cùng bên phải của Cloud Console, rồi nhấp vào nút bật trên bảng điều khiển bên dưới.
Đối với trang web mà bạn muốn tạo kiểu, vui lòng sử dụng bất kỳ trang web nào mà bạn tiện. Ngoài ra, vì Gemini đã được bật, bạn có thể yêu cầu Gemini tạo cho bạn. Nếu bạn nhắc Gemini một yêu cầu như Write me a web page with a form to gather profile information, kết quả sẽ tương tự như sau:
<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. Triển khai Material
Hãy bắt đầu bằng cách yêu cầu Gemini triển khai Material Design trên trang web của chúng tôi thông qua câu lệnh theo các dòng sau:Can you apply material design styles to this page?
LƯU Ý: Tất cả câu lệnh được cung cấp trong lớp học lập trình này đều là ví dụ. Hãy sử dụng chúng làm nguồn cảm hứng cho các câu trích dẫn của riêng bạn và thêm bối cảnh từ dự án để có kết quả tốt nhất.
Câu trả lời sẽ có dạng như sau:
Material Design được sử dụng cho mục đích của phòng thí nghiệm này. Tuy nhiên, bạn có thể yêu cầu Gemini triển khai thư viện tuỳ ý. Nếu Gemini nhập phiên bản Material khác với phiên bản bạn mong đợi, hãy thử cung cấp phiên bản mong muốn trong câu lệnh.
4. Lặp lại thiết kế
Gemini cũng có thể phối hợp với bạn để cải tiến thiết kế của một trang web mà không cần tìm hiểu về CSS theo cách thủ công. Hãy tự tạo câu lệnh để yêu cầu Gemini cải tiến thiết kế này. Để có kết quả tốt nhất trong những nhiệm vụ như thế này, hãy tập trung vào mô tả các yếu tố bạn muốn thay đổi và kết quả mong muốn của các yếu tố đó một cách ngắn gọn nhất có thể:
Can we center the content on this page?
Bạn cũng có thể yêu cầu Gemini thêm các thành phần chức năng vào trang của chúng tôi. Yêu cầu Gemini thêm các trường khác vào biểu mẫu hoặc thêm chức năng khác:
Can we add some more fields to this form, like phone number, email address?
5. Tổ chức
Bạn cũng có thể yêu cầu Gemini sắp xếp kết quả vào nơi phù hợp nhất cho dự án của chúng ta. Trong trường hợp này, vì trọng tâm là lặp lại thiết kế trong một tệp này, nên thẻ style là lý tưởng nhất. Yêu cầu Gemini đưa các câu trả lời vào một thẻ kiểu để tránh phải áp dụng các thay đổi của Gemini cho nhiều câu trả lời trong quá trình thực hiện:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Hỗ trợ tiếp cận
Như đã nêu trong Material Design, khả năng tiếp cận và khả năng hữu dụng là những yếu tố thiết yếu của thiết kế. Vì vậy, hãy thử yêu cầu Gemini để đảm bảo rằng dữ liệu đầu vào của chúng ta được sử dụng đúng loại. Điều này đảm bảo rằng các công cụ hỗ trợ tiếp cận như trình đọc màn hình có thể đọc đúng cách.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Kết luận
Chúc mừng bạn đã hoàn thành Lớp học lập trình này! Bạn đã tìm hiểu cách sử dụng Gemini để triển khai Material Design trên một trang web. Bạn cũng đã tìm hiểu cách lặp lại thiết kế và sắp xếp mã đã tạo. Kỹ năng mới này sẽ cho phép bạn tạo các trang web dễ sử dụng và thân thiện với người dùng bằng Material Design hoặc các thư viện tương tự mà không cần thiết lập nhiều.