Exercício: atualizar páginas da Web geradas com o Copilot

Concluído

Neste exercício, você atualizará as páginas adicionais do seu site criadas no exercício anterior. Você adicionará conteúdo às páginas usando o Copilot.

Atualizar a página Sobre nós

  1. Entre no seu ambiente do Power Pages.

  2. Na Página inicial, em Sites ativos, identifique o site do Power Pages da Contoso Real Estate que você criou antes e selecione Editar.

    Captura de tela exibindo o site da Contoso Real Estate na seção Sites ativos.

  3. No estúdio de design do Power Pages, selecione Páginas no painel esquerdo para acessar o espaço de trabalho de Páginas.

    Captura de tela exibindo o espaço de trabalho Páginas do estúdio de design do Power Pages.

  4. Selecione Sobre nós para abrir a página Sobre nós no estúdio de design.

  5. Exclua todas as seções entre as seções Cabeçalho e Rodapé.

  6. Sob o cabeçalho do site, selecione Adicionar uma seção>Um terço à esquerda.

    Esse layout de seção fornece à seção um layout de duas colunas em que a coluna da esquerda ocupa um terço da largura da seção.

    Captura de tela exibindo o layout de um terço à esquerda no estúdio de design do Power Pages.

  7. Na coluna esquerda, selecione Texto e altere o tipo de texto de Parágrafo para Título 2.

  8. Altere o texto para Our Vision.

  9. Selecione o ícone de mais abaixo do cabeçalho Nossa Visão e selecione Texto novamente.

  10. Desmarque o texto padrão para que a caixa de texto fique vazia. Depois, selecione Copilot na barra de ferramentas.

    No painel Descrever o texto necessário, insira Two paragraphs describing the vision of the Contoso Real Estate company.

    Pressione Enter e o Copilot gerará texto:

    Captura de tela exibindo o texto gerado pelo Copilot no estúdio de design do Power Pages.

  11. Você pode jogar com as opções para Reescrever, alterar o Tom ou aumentar e diminuir o Comprimento do texto até ficar satisfeito com o conteúdo.

    Selecione Adicionar à página para adicionar o texto gerado à página.

  12. Na coluna direita da seção, selecione Imagem>Imagens do Banco de Imagens e pesquise office building. Selecione uma imagem de que você goste e selecione Inserir.

    Captura de tela exibindo a seção Nossa Visão na página Sobre Nós.

  13. Adicionar uma nova seção para destacar a equipe da empresa.

    • Use o layout de Um terço à direita.
    • Defina Nossa equipe como o cabeçalho.
    • Use o Copilot para gerar um parágrafo descrevendo a equipe.
    • Uma imagem de uma equipe.

    Ela se parece com isto:

    Captura de tela exibindo a seção Nossa Equipe na página Sobre Nós.

  14. Adicione um botão abaixo do texto Nossa Equipe para navegar até a página Fale Conosco.

    Captura de tela exibindo a seção Nossa Equipe com um botão abaixo para navegar para a página Fale Conosco.

Atualizar a página Listagens

  1. No painel esquerdo em Páginas, selecione Listagem para abrir a página Listagem no estúdio de design.

  2. Exclua todas as seções entre as seções Cabeçalho e Rodapé.

  3. Adicione uma seção e selecione Editar segundo plano na barra de ferramentas. Selecione Imagem>Adicionar uma imagem.

  4. Selecione Imagens do banco de imagens e pesquise house. Selecione uma imagem de que você goste e selecione Inserir.

  5. Passe o cursor do mouse e selecione a seção, então selecione o ícone Design na barra de ferramentas.

    Captura de tela exibindo o ícone Design no estúdio de design do Power Pages.

  6. Na guia Padrão, defina a Sobreposição como 65%. Defina também a Cor de sobreposição como Preto ou uma cor escura.

    Captura de tela exibindo o painel Design no estúdio de design do Power Pages.

    Saia do painel Design.

  7. No alto da imagem, selecione Texto e altere o tipo de texto de Parágrafo para Título 2. Altere a Cor do texto para Branco ou uma cor visível na imagem.

  8. Selecione o ícone Design na barra de ferramentas. Na guia Tipografia, defina o Peso da fonte como Bold. Saia do painel Design.

  9. Defina o Alinhamento como Alinhar ao Centro e altere o texto para Featured Listings.

    Captura de tela exibindo a seção Listagens em Destaque na página Listagem.

  10. Abra o painel do Copilot, insira Create a new section to show real estate listings e pressione Enter.

    Selecione Manter para adicionar a seção gerada à página.

  11. Use uma combinação do Copilot e da barra de ferramentas no produto para atualizar a seção para exibir pelo menos três listagens. A seção deve ter um layout de Três colunas.

    Observação

    Você codificará os dados para as Listagens de Imóveis. Normalmente, esses dados seriam conectados a uma fonte de dados, como uma lista do SharePoint, uma tabela do Dataverse ou qualquer fonte de dados externa.

    Em seguida, você usaria um componente personalizado para exibir os dados de um modo visualmente atraente. No entanto, isso está fora do escopo deste módulo.

    Se você quiser saber mais, confira o artigo Usar componentes de código no Power Pages.

  12. Cada coluna deve conter uma imagem. Use a opção URL para adicionar as imagens.

    • Para a primeira imagem, selecione Imagem>URL e insira esta URL: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property1.jpg
    • Para a segunda imagem, use esta URL: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property2.jpg
    • Para a terceira imagem, use esta URL: https://raw.githubusercontent.com/microsoft/PowerPlatformAdvocates/main/MSLearn/AIModule/Images/property3.jpg

    Captura de tela exibindo as imagens de Listagens de Imóveis na página Listagem.

  13. Cada coluna deve conter um texto do Título 3 que contenha o preço do imóvel.

    • Para a primeira coluna, use o preço $350,000.
    • Para a segunda coluna, use o preço $250,000.
    • Para a terceira coluna, use o preço $600,000.
  14. Cada coluna deve conter um texto de Texto pequeno que contenha o endereço do imóvel.

    • Para a primeira coluna, use o endereço 432 Elm Street, Riverside, CA 92501
    • Para a segunda coluna, use o endereço 789 Maple Avenue, Lexington, KY 40502
    • Para a terceira coluna, use o endereço 210 Pine Road, Portland, OR 97204
  15. Cada coluna deve conter um Botão que navega até a página Fale Conosco.

    • O rótulo do botão deve ser Enquire Now.

    Captura de tela exibindo a seção Listagens de Imóveis na página Listagem.

    Você é livre para personalizar a seção como achar melhor.

Definir a solução para seus dados

  1. Agora você começará a trabalhar com tabelas e dados do Dataverse. Para manter o tema de organizar os componentes da Real State Solution, você precisa definir uma solução para todos os dados.

    No painel esquerdo, selecione Dados.

  2. Na parte superior do painel Dados, selecione o ícone de engrenagem Definir uma solução.

  3. Selecione a solução Real State Solution no menu suspenso.

    Captura de tela exibindo o painel Definir uma solução no estúdio de design do Power Pages.

    Isso garante que todas as tabelas de dados, colunas, exibições e formulários criados sejam adicionados à Real State Solution.

    Saia do painel Definir uma solução.

Atualizar a página Fale Conosco

  1. No painel esquerdo, selecione Páginas.

  2. Em seguida, selecione fale Conosco para abrir a página Fale Conosco no estúdio de design.

  3. Exclua todas as seções entre as seções Cabeçalho e Rodapé.

  4. Use as etapas da página Listagens para adicionar uma faixa de título à página Fale Conosco.

    Captura de tela exibindo a página Fale Conosco com um banner de título.

  5. Abaixo disso, adicione uma seção com o layout Um terço à esquerda.

  6. Na coluna esquerda, selecione Texto e altere o tipo de texto de Parágrafo para Título 2.

    Altere o texto para We want to hear from you!.

  7. Selecione o ícone de mais abaixo do cabeçalho Queremos saber sua opinião e selecione Texto novamente.

    Altere o texto para:

    Explore the world of real estate with us. Whether you're buying, selling, or investing, our expert team is here to guide you every step of the way. 
    
    Contact us today to start your real estate journey!
    
  8. Na coluna direita da seção, selecione as reticências Mais e selecione Formulário. É exibido um pop-up no qual podemos criar um formulário gerado por IA.

    Captura de tela exibindo o painel do formulário gerado por IA no estúdio de design do Power Pages.

  9. Na seção Descrever um formulário para criá-lo, insira Create a contact us form to capture user inquiries.

    Pressione Enter e o Copilot gerará um formulário para você. A versão preliminar desse formulário será exibida no lado direito do painel.

    Captura de tela exibindo o formulário gerado pelo Copilot no estúdio de design do Power Pages.

  10. Você pode continuar a fazer alterações no formulário inserindo novas solicitações, como Move the Email field up ou Remove the Subject field.

    Quando estiver satisfeito com o formulário, selecione OK para adicionar o formulário à página.

    Pode levar alguns instantes para gerar o formulário, mas, uma vez feito, o Copilot não apenas criará um formulário, como também criará uma tabela para o Dataverse armazenar os dados do formulário depois de enviados.

  11. Agora precisamos definir permissões para o formulário para que ele possa ser visto e usado por todos os usuários do site. Selecione + Nova permissão.

    Captura de tela exibindo o painel Nova permissão no estúdio de design do Power Pages.

  12. Configure a permissão de tabela da seguinte forma:

    • Nome: Contact Us Form
    • Tabela: deixe a tabela pré-selecionada como está
    • Tipo de acesso: Global Access

    Observação

    O tipo Acesso Global aplica a permissão e os privilégios da tabela selecionada aos usuários das funções selecionadas para todos os registros.

    Saiba mais sobre Tipos de acesso aqui.

    • Permissão para: Create
    • Para Funções, selecione + Adicionar funções e selecione usuários Anônimos e Autenticados.

    Selecione Salvar para salvar a permissão.

    Captura de tela exibindo a permissão do Formulário Fale Conosco no estúdio de design do Power Pages.

    Selecione Salvar novamente no painel Qualquer pessoa pode ver os dados exibidos em seu site.

    Observação

    Em um módulo anterior, você configurou um fluxo para usar IA para analisar o conteúdo de um email enviado por um usuário.

    Você pode configurar um fluxo semelhante para capturar os dados do formulário Fale Conosco e usar a IA para analisar o conteúdo do envio do formulário e executar ações com base no conteúdo.

    Isso está fora do escopo deste módulo, mas você pode saber mais sobre como configurar fluxos de nuvem do Power Automate na documentação de configuração do Power Pages

Atualizar a página Serviços

Use sua criatividade e conhecimento adquiridos até agora para atualizar a página Serviços. Use uma combinação do Copilot e da barra de ferramentas no produto para adicionar à página qualquer conteúdo que considere adequado.