1. Zanim zaczniesz
Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak używać Gemini Code Assist do implementacji Material Design w witrynie. Po wdrożeniu Material Design jego projekt musisz iterować, wprowadzając zmiany mające na celu zwiększenie wygody użytkownika i dodanie funkcji. Po zakończeniu tych warsztatów dowiesz się, jak używać Gemini do tworzenia łatwych w użyciu i przyjaznych dla użytkowników stron internetowych w stylu Material Design lub podobnej biblioteki bez konieczności pisania kodu CSS.
Wymagania wstępne
- Znajomość języków HTML, CSS i JavaScript
- Podstawowa znajomość zagadnień związanych z projektowaniem witryn
Czego się nauczysz
- Jak wdrożyć biblioteki stylów za pomocą Gemini Code Assist
- Jak iterować projekt za pomocą Gemini Code Assist zamiast ręcznie modyfikować CSS
- Jak skutecznie prosić Gemini Code Assist o współtworzenie kodu w wybranym przez Ciebie stylu
Wymagania
- Dostęp do projektu Google Cloud z włączoną usługą Gemini dla Google Cloud
- Strona internetowa do określenia stylu lub co najmniej folder, w którym można ją utworzyć
2. Konfiguracja
Ćwiczenie z programowania wymaga 2 rzeczy: dostępu do projektu Google Cloud z włączonym Gemini oraz strony internetowej, abyśmy mogli określić styl. Gemini możesz włączyć w nowym projekcie, klikając przycisk Gemini w prawym górnym rogu konsoli Cloud i klikając Włącz w panelu poniżej.
Jeśli chodzi o styl strony internetowej, możesz użyć dowolnej strony internetowej, którą masz pod ręką. Usługa Gemini jest włączona, więc możesz poprosić o jej wygenerowanie. Jeśli poprosisz Gemini o żądanie w rodzaju Write me a web page with a form to gather profile information, wynik powinien być podobny do tego:
<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. Wdrożenie materiału
Najpierw poproś Gemini o zaimplementowanie stylu Material Design na naszej stronie internetowej. W tym celu wpisz następujące wiersze:Can you apply material design styles to this page?
UWAGA: wszystkie prompty podane w tym ćwiczeniu z programowania są przykładami. Możesz wykorzystać je jako inspirację do tworzenia własnych cytatów i uzupełnić informacje o kontekście swojego projektu.
Odpowiedź powinna być podobna do tej:
W tym module wykorzystano projekt Material Design, ale możesz poprosić Gemini o wdrożenie wybranej biblioteki. Jeśli Gemini zaimportuje inną wersję Materialry niż oczekiwana, spróbuj podać w prompcie odpowiednią wersję.
4. Zmiany w projekcie
Gemini może też współpracować z Tobą przy powtarzaniu projektu strony internetowej bez konieczności ręcznego sprawdzania CSS. Wymyśl własny prompt, aby poprosić Gemini o przetestowanie tego projektu. Aby uzyskać najlepsze rezultaty w takich zadaniach, skup się na możliwie zwięzłym opisaniu elementów, które chcesz zmienić, oraz ich pożądanych rezultatach:
Can we center the content on this page?
Możesz też poprosić Gemini o dodanie przydatnych elementów do naszej strony. Poproś Gemini o dodanie do formularza więcej pól lub dodanie innych funkcji:
Can we add some more fields to this form, like phone number, email address?
5. Organizacja
Gemini może też uporządkować wyniki w miejscu, które będzie najbardziej przydatne w danym projekcie. W tym przypadku głównym celem jest iteracja projektu w tym jednym pliku, więc najlepiej nadaje się do tego tag style. Poproś Gemini o umieszczenie swoich odpowiedzi w tagu stylu, aby uniknąć konieczności stosowania zmian do kilku z nich na bieżąco:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Ułatwienia dostępu
Zgodnie z motywem Material Design dostępność i łatwość obsługi to kluczowe elementy projektowania. Mając to na uwadze, poproś Gemini o sprawdzenie, czy dane wejściowe korzystają z odpowiednich typów. Dzięki temu narzędzia ułatwień dostępu, takie jak czytniki ekranu, będą prawidłowo wychwytywane.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Podsumowanie
Gratulujemy ukończenia tego ćwiczenia z programowania. Wiesz już, jak używać Gemini do implementacji stylu Material Design na stronie internetowej. Wiesz już również, jak iterować projekt i porządkować wygenerowany kod. Ta nowa umiejętność pozwoli Ci tworzyć przydatne i przyjazne dla użytkownika strony internetowe w stylu Material Design lub podobnych bibliotek przy minimalnym wkładzie pracy w konfigurację.