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 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 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 thiết kế bằng Gemini Code Assist thay vì điều chỉnh CSS theo cách thủ công
- Cách ra lệnh hiệu quả cho Gemini Code Assist đóng góp mã theo kiểu bạn 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 điều: quyền truy cập vào một dự án trên đám mây trên Google Cloud có bật Gemini và một trang web để chúng tôi 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 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ể thoải mái sử dụng bất kỳ trang web nào mà bạn có. Ngoài ra, vì Gemini đã được bật, nên bạn có thể yêu cầu Gemini tạo một trang web 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 (Viết cho tôi một trang web có biểu mẫu để thu thập thông tin hồ sơ), thì 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 ta bằng một 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ác câu lệnh đượ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 các câu lệnh này làm nguồn cảm hứng cho câu lệnh của riêng mình và đưa ngữ cảnh từ dự án của bạn vào để có kết quả tốt nhất.
Câu trả lời sẽ tương tự như sau:
Material Design được sử 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 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 của bạn.
4. Lặp lại thiết kế
Gemini cũng có thể làm việc với 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 đưa ra câu lệnh của riêng bạn để yêu cầu Gemini lặp lại thiết kế này. Để có kết quả tốt nhất trong các tác vụ như thế này, hãy tập trung vào việc mô tả các phần tử mà 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 nhiều trường hơn 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í hữu ích 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. Yêu cầu Gemini chứa các câu trả lời của mình trong một 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ế. Với suy nghĩ đó, hãy thử yêu cầu Gemini đảm bảo rằng các dữ liệu đầ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 dạng đúng.
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 đã học cách sử dụng Gemini để triển khai Material Design trên một trang web. Bạn cũng đã học 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ự với thiết lập tối thiểu.