1. Trước khi bắt đầu
Lớp học lập trình này hướng dẫn 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 quy trình thiết kế, thực hiện các thay đổi để cải thiện trải nghiệm người dùng và thêm chức năng. Khi kết thúc buổi hội thảo này, bạn sẽ có thể sử dụng Gemini để tạo các trang web hữu ích, 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 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 các thư viện tạo kiểu bằng Gemini Code Assist
- Cách lặp lại một thiết kế bằng Gemini Code Assist thay vì điều chỉnh CSS theo cách thủ công
- Cách đưa ra câu lệnh hiệu quả cho Gemini Code Assist để đóng góp mã theo phong cách bạn mong muốn
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 để tạo kiểu hoặc ít nhất là một thư mục để tạo trang web
2. Thiết lập
Đối với lớp học lập trình này, bạn cần có 2 thứ: quyền truy cập vào một dự án trên đám mây của Google Cloud đã bật Gemini và một trang web để chúng ta tạo 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 Bảng điều khiển Google Cloud, sau đó 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 cần tạo kiểu, bạn có thể sử dụng bất kỳ trang web nào mà bạn có. Hoặc bạn có thể yêu cầu Gemini tạo một bản tóm tắt cho bạn vì Gemini đã được bật. Nếu bạn đưa ra cho 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
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 bằng một câu lệnh tương tự như sau:Can you apply material design styles to this page?
LƯU Ý: Tất cả lời nhắc được cung cấp trong lớp học lập trình này đều là ví dụ. Bạn có thể thoải mái sử dụng những câu trích dẫn này làm nguồn cảm hứng cho câu trích dẫn của riêng mình và thêm bối cảnh từ dự án của bạn để đạt được kết quả tốt nhất.
Phản hồi sẽ có dạng tương tự như sau:
Thiết kế theo Material được dùng cho mục đích của lớp học lập trình này, nhưng bạn có thể yêu cầu Gemini triển khai thư viện mà bạn chọn. Nếu Gemini nhập một phiên bản khác của Material so 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 của bạn.
4. Lặp lại thiết kế
Gemini cũng có thể cùng bạn lặp lại thiết kế của một trang web mà không cần phải tìm hiểu CSS theo cách thủ công. Hãy tự nghĩ ra câu lệnh để hỏi Gemini tinh chỉnh thiết kế này. Để có kết quả tốt nhất trong những tác vụ như thế này, hãy tập trung mô tả các phần tử bạn muốn thay đổi và kết quả mong muốn 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 phần tử chức năng vào trang của chúng ta. 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 bổ sung:
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 vị trí phù hợp nhất cho dự án của mình. 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ựa chọn lý tưởng. Yêu cầu Gemini đưa các câu trả lời vào thẻ kiểu để tránh phải áp dụng các thay đổi cho nhiều thẻ khi bạn 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 hỗ trợ tiếp cận và khả năng sử dụng là những yếu tố thiết yếu của thiết kế. Hãy yêu cầu Gemini đảm bảo rằng các đầu vào của chúng ta đang sử dụng đúng loại. Điều này sẽ đảm bảo rằng các công cụ hỗ trợ tiếp cận như trình đọc màn hình sẽ nhận diện đúng các thành phần này.
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 hữu ích, 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.