Thông tin về lớp học lập trình này
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 tính năng Hỗ trợ mã Gemini để triển khai Material Design trên 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
- Có kiến thức 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 tính năng Trợ giúp mã Gemini
- Cách lặp lại một thiết kế bằng tính năng Hỗ trợ mã Gemini thay vì điều chỉnh CSS theo cách thủ công
- Cách hiệu quả để nhắc 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 đã 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ó hai thứ: quyền truy cập vào một dự án 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 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ó sẵn. Ngoài ra, vì Gemini đang bật nên bạn có thể yêu cầu công cụ này tạo một mã xác minh cho bạn. 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. Tài liệu triển khai
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 như sau:Can you apply material design styles to this page?
LƯU Ý: Tất cả câu lệnh trong lớp học lập trình này đều là ví dụ. Bạn có thể sử dụng những câu nói này làm nguồn cảm hứng cho câu nói 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ẽ tương tự như sau:
Material Design đượ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 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ể giúp 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ự tạo câu lệnh để 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 nhiệm vụ như thế này, hãy tập trung mô tả các phần tử mà bạn muốn thay đổi và kết quả mong muốn của chúng 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 vị trí phù hợp nhất với 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 đư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 cho nhiều thẻ:
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 hữu dụng là những yếu tố thiết yếu của thiết kế. Do đó, hãy thử yêu cầu Gemini đảm bảo rằng 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 thành phần đó được các công cụ hỗ trợ tiếp cận như trình đọc màn hình phát hiện đú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ã được tạo. Kỹ năng mới này sẽ giú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 mức thiết lập tối thiểu.