Informacje o tym ćwiczeniu (w Codelabs)
1. Zanim zaczniesz
To ćwiczenie z programowania pokazuje, jak za pomocą narzędzia Gemini Code Assist zaimplementować w witrynie projekt Material Design. Po wdrożeniu Material Design będziesz ulepszać projekt, wprowadzając zmiany, które poprawią wrażenia użytkowników i dodadzą funkcjonalności. Po zakończeniu tych warsztatów dowiesz się, jak używać Gemini do tworzenia przydatnych i przyjaznych dla użytkownika 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ść projektowania stron internetowych;
Czego się nauczysz
- Jak wdrożyć biblioteki stylów za pomocą Gemini Code Assist
- Jak poprawiać projekt za pomocą Gemini Code Assist zamiast ręcznie dostosowywać 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łączonym Gemini for 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. Możesz włączyć Gemini w nowym projekcie, klikając przycisk Gemini w prawym górnym rogu konsoli Cloud i wybierając opcję włączenia na 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
Zacznij od poproszenia Gemini o wdrożenie Material Design na naszej stronie internetowej, używając prompta w takim stylu: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 wyglądać mniej więcej tak:
W tym laboratorium używamy interfejsu Material Design, ale możesz poprosić Gemini o wdrożenie wybranej przez siebie biblioteki. Jeśli Gemini zaimportuje inną wersję Materiału niż oczekiwana, spróbuj podać żądaną wersję w prompt.
4. Zmiany w projekcie
Gemini może też współpracować z Tobą przy iteracji projektu strony internetowej bez konieczności ręcznego korzystania z CSS. Wymyśl własny prompt, aby poprosić Gemini o przetestowanie tego projektu. Aby uzyskać najlepsze wyniki w przypadku tego typu zadań, skup się na jak najkrótszym opisie elementów, które chcesz zmienić, i pożądanego wyniku:
Can we center the content on this page?
Możesz też poprosić Gemini o dodanie elementów funkcjonalnych do naszej strony. Poproś Gemini o dodanie pól do formularza lub o dodanie dodatkowych 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 Codelab. 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ę.