1. Zanim zaczniesz
Z tych ćwiczeń z programowania dowiesz się, jak używać Gemini Code Assist do wdrażania Material Design w witrynie. Po wdrożeniu Material Design będziesz iteracyjnie ulepszać projekt, wprowadzając zmiany, które zwiększą wygodę użytkowników i dodadzą nowe funkcje. Po ukończeniu tych warsztatów będziesz w stanie używać Gemini do tworzenia użytecznych i przyjaznych dla użytkownika stron internetowych z wykorzystaniem 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ę dowiesz
- Implementowanie bibliotek stylów za pomocą Gemini Code Assist
- Jak iterować projekt za pomocą Gemini Code Assist zamiast ręcznie dostosowywać CSS
- Jak skutecznie prosić Gemini Code Assist o generowanie kodu w wybranym stylu
Wymagania
- Dostęp do projektu Google Cloud z włączoną usługą Gemini for Google Cloud
- strona internetowa do ostylowania lub przynajmniej folder, w którym można ją utworzyć;
2. Konfiguracja
W tym samouczku potrzebne są 2 rzeczy: dostęp do projektu Google Cloud z włączoną usługą Gemini oraz strona internetowa, którą będziemy stylować. Aby włączyć Gemini w nowym projekcie, kliknij przycisk Gemini w prawym górnym rogu konsoli Cloud, a następnie kliknij Włącz w panelu poniżej.
Jeśli chodzi o stronę internetową, której styl chcesz zmienić, możesz użyć dowolnej strony, którą masz pod ręką. Możesz też poprosić Gemini o wygenerowanie takiego podsumowania. Jeśli wpiszesz w Gemini prompta takiego jak 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. Materiały do wdrożenia
Zacznij od poproszenia Gemini o wdrożenie Material Design na stronie internetowej za pomocą prompta w tym stylu:Can you apply material design styles to this page?
UWAGA: wszystkie prompty podane w tym ćwiczeniu z programowania są przykładowe. Możesz się nimi zainspirować, ale aby uzyskać najlepsze wyniki, dodaj kontekst ze swojego projektu.
Odpowiedź powinna być podobna do tej:
W tym laboratorium używamy 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ć w prompcie żądaną wersję.
4. Ulepszanie projektu
Gemini może też pomagać w ulepszaniu projektu strony internetowej bez konieczności ręcznego przeglądania kodu CSS. Wymyśl własny prompt, aby zaprosić Gemini do zmodyfikowania tego projektu. Aby uzyskać najlepsze wyniki w przypadku takich zadań, skup się na jak najzwięźlejszym opisaniu elementów, które chcesz zmienić, i oczekiwanego efektu:
Can we center the content on this page?
Możesz też poprosić Gemini o dodanie do strony elementów funkcjonalnych. Poproś Gemini o dodanie do formularza kolejnych pól lub dodatkowych funkcji:
Can we add some more fields to this form, like phone number, email address?
5. Organizacja
Możesz też poprosić Gemini o uporządkowanie wyników w miejscu, które będzie najbardziej przydatne w Twoim projekcie. W tym przypadku, ponieważ skupiamy się na iteracyjnym projektowaniu w tym jednym pliku, idealny będzie tag style. Poproś Gemini, aby umieścił odpowiedzi w tagu stylu, dzięki czemu nie będziesz musiał(-a) stosować zmian do kilku elementów:
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 wytycznymi Material Design dostępność i łatwość obsługi to kluczowe elementy projektu. W tym celu poproś Gemini o sprawdzenie, czy dane wejściowe mają prawidłowe typy. Dzięki temu będą one prawidłowo odczytywane przez narzędzia ułatwień dostępu, takie jak czytniki ekranu.
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! Wiesz już, jak używać Gemini do wdrażania Material Design na stronie internetowej. Dowiedzieliśmy się też, jak iteracyjnie ulepszać projekt i porządkować wygenerowany kod. Ta nowa umiejętność pozwoli Ci tworzyć użyteczne i przyjazne dla użytkownika strony internetowe przy użyciu Material Design lub podobnych bibliotek przy minimalnej konfiguracji.