1. Antes de começar
Este codelab mostra como usar a Duet AI para desenvolvedores com o objetivo de implementar o Material Design em um site. Depois que o Material Design for implementado, você vai iterar no design, fazendo alterações para melhorar a experiência do usuário e adicionar funcionalidade. Ao final deste workshop, você vai conseguir usar a Duet AI para criar páginas da Web fáceis de usar com Material Design ou uma biblioteca semelhante sem precisar programar em CSS.
Pré-requisitos
- Conhecimentos de HTML, CSS e JavaScript
- Conhecimentos básicos de Web design
Conteúdo do laboratório
- Como implementar bibliotecas de estilo com a Duet AI
- Como iterar um design usando a Duet AI em vez de ajustar manualmente o CSS
- Como solicitar que a Duet AI contribua com código no estilo desejado
O que é necessário
- Acesso a um projeto do Google Cloud com a Duet AI ativada
- Uma página da Web para estilizar ou pelo menos uma pasta para criar uma
2. Configuração
Neste codelab, são necessárias duas coisas: acesso a um projeto do Google Cloud com a Duet AI ativada e uma página da Web para definir o estilo. Para ativar a Duet AI em um novo projeto, clique no botão "Duet" no canto superior direito do console do Cloud e em "Ativar" no painel abaixo.
Para definir o estilo, você pode usar qualquer página da Web. Como a Duet AI está ativada, é possível solicitar a geração de uma para você. Se você der à Duet AI um comando como Write me a web page with a form to gather profile information, o resultado vai ser semelhante a este:
<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. Implementação do Material
Primeiro peça à Duet AI para implementar o Material Design na página da Web com um comando parecido com:Can you apply material design styles to this page?
OBSERVAÇÃO: todos os comandos usados neste codelab são exemplos. Fique à vontade para se inspirar e inclua o contexto do seu projeto para ter os melhores resultados.
A resposta vai ser semelhante a:
O Material Design é usado neste laboratório, mas é possível pedir à Duet AI para implementar a biblioteca que você escolher. Se a Duet AI importar uma versão do Material Design diferente da que você esperava, tente informar o que você quer no comando.
4. Iteração no design
A Duet AI também pode iterar no design de uma página da Web sem precisar acessar o CSS manualmente. Basta criar um comando para pedir para a Duet AI iterar no design. Para isso, descreva os elementos que você quer mudar e o resultado desejado da maneira mais concisa possível:
Can we center the content on this page?
A Duet AI também pode adicionar elementos funcionais à página. Peça para a Duet AI adicionar mais campos ao formulário ou incluir outras funcionalidades:
Can we add some more fields to this form, like phone number, email address?
5. Organização
A Duet AI também pode organizar os resultados no local mais conveniente para o projeto. Nesse caso, como o foco está em iterar o design do arquivo, uma tag style é o ideal. Peça para a Duet AI conter as respostas em uma tag de estilo. Assim você não precisa aplicar as alterações a várias outras ao longo do processo:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Acessibilidade
Conforme estabelecido no Material Design (link em inglês), acessibilidade e usabilidade são elementos essenciais do design. Com isso em mente, tente pedir à Duet AI para verificar se as entradas estão usando os tipos corretos. Isso garante que elas sejam detectadas corretamente por ferramentas de acessibilidade, como leitores de tela.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Conclusão
Parabéns por concluir este codelab. Você aprendeu a usar a Duet AI para implementar o Material Design em uma página da Web. Agora você também sabe iterar o design e organizar o código gerado. Com essa nova habilidade, é possível criar páginas da Web fáceis de usar e funcionais com Material Design ou bibliotecas semelhantes com o mínimo de configuração.