1. Avant de commencer
Cet atelier de programmation explique comment utiliser Duet AI pour les développeurs afin d'implémenter Material Design sur un site Web. Une fois Material Design implémenté, vous effectuerez une itération sur la conception en apportant des modifications pour améliorer l'expérience utilisateur et ajouter des fonctionnalités. À la fin de cet atelier, vous serez en mesure d'utiliser Duet AI pour créer des pages Web accessibles et conviviales à l'aide de Material Design ou d'une bibliothèque similaire, sans avoir à rédiger de code CSS.
Prérequis
- Maîtriser HTML, CSS et JavaScript
- Avoir des connaissances de base en conception Web
Objectifs
- Apprendre à implémenter des bibliothèques de styles avec Duet AI
- Découvrir comment itérer sur une conception à l'aide de Duet AI au lieu d'ajuster manuellement CSS
- Apprendre à demander efficacement à Duet AI de participer à l'écriture du code dans le style souhaité
Ce dont vous avez besoin
- Un accès à un projet Google Cloud avec Duet AI activé
- Une page Web à laquelle appliquer un style, ou au moins un dossier dans lequel en créer une
2. Préparation
Pour cet atelier de programmation, deux éléments sont nécessaires : un accès à un projet Google Cloud avec Duet activé et une page Web à laquelle appliquer un style. Vous pouvez activer Duet dans un nouveau projet en cliquant sur le bouton "Duet" en haut à droite de la console Cloud et en cliquant sur "Activer" dans le panneau situé en dessous.
N'hésitez pas à utiliser n'importe quelle page Web à votre disposition pour y appliquer un style. Comme Duet est activé, vous pouvez également lui demander d'en générer une pour vous. Si vous envoyez à Duet une requête telle que Write me a web page with a form to gather profile information, le résultat devrait être semblable à ceci :
<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. Implémenter Material
Commencez par demander à Duet d'implémenter Material Design sur votre page Web à l'aide d'une requête ressemblant à ceci :Can you apply material design styles to this page?
REMARQUE : Toutes les requêtes fournies dans cet atelier de programmation sont des exemples. N'hésitez pas à vous en inspirer pour vos propres citations et à inclure le contexte de votre projet pour de meilleurs résultats.
La réponse devrait ressembler à ceci :
Material Design est utilisé pour les besoins de cet atelier, mais vous pouvez demander à Duet d'implémenter la bibliothèque de votre choix. Si Duet importe une version de Material différente de celle que vous attendiez, essayez d'indiquer la version souhaitée dans votre requête.
4. Itérer sur la conception
Duet peut également vous aider à itérer sur la conception d'une page Web sans avoir à parcourir manuellement le code CSS. Créez votre propre requête pour demander à Duet d'itérer sur cette conception. Pour obtenir les meilleurs résultats dans des tâches similaires, concentrez-vous sur la description des éléments à modifier et du résultat souhaité de manière aussi concise que possible :
Can we center the content on this page?
Vous pouvez également demander à Duet d'ajouter des éléments fonctionnels à votre page. Demandez à Duet d'ajouter d'autres champs au formulaire ou d'ajouter des fonctionnalités supplémentaires :
Can we add some more fields to this form, like phone number, email address?
5. Organisation
Vous pouvez également demander à Duet d'organiser ses résultats à l'endroit le plus adapté à notre projet. Dans le cas présent, nous mettons l'accent sur l'itération sur la conception dans ce fichier. Une balise style est donc idéale. Demandez à Duet de regrouper ses réponses dans une balise de style pour éviter d'avoir à appliquer ses modifications à plusieurs endroits au fur et à mesure :
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Accessibilité
Comme indiqué dans Material Design, l'accessibilité et la facilité d'utilisation sont des éléments essentiels de la conception. En gardant cela à l'esprit, essayez de demander à Duet de veiller à ce que nos entrées utilisent les types appropriés. Cela permet de s'assurer qu'elles sont correctement prises en compte par les outils d'accessibilité tels que les lecteurs d'écran.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Conclusion
Félicitations ! Vous avez terminé cet atelier de programmation. Vous avez appris à utiliser Duet AI pour implémenter Material Design sur une page Web. Vous avez également découvert comment itérer sur la conception et organiser le code généré. Vos nouvelles compétences vous permettront de créer des pages Web accessibles et conviviales à l'aide de Material Design ou de bibliothèques similaires, avec un minimum de configuration.