Console de Modernização da experiência console-reference

Guia de referência para a interface e os recursos do Console de modernização de experiência

NOTE
Se você estiver interessado em usar o Console de modernização de experiência, poderá solicitar acesso para garantir uma experiência de integração tranquila.

Visão geral overview

O Console de Modernização da Experiência é um ambiente de desenvolvimento hospedado e assistido por IA para o Edge Delivery Services, exposto como uma interface da Web em aemcoder.adobe.io. Depois de se conectar ao projeto GitHub, você pode iniciar imediatamente a solicitação de alterações na linguagem natural sem precisar de mais instalação ou configuração de ambiente local.

TIP
Se você estiver interessado em começar imediatamente a usar o console, confira o documento Introdução ao Agente de Modernização de Experiência.

Recursos capabilities

Principais recursos do console:

  • Painel de bate-papo interativo com o agente e suas habilidades
  • Visualização do Live AEM para feedback visual imediato sobre as alterações
  • Navegador de arquivos de conteúdo e visualizador de Markdown
  • Sincronização de conteúdo com Criação de documentos
  • Navegador de código e visualizador de diferenças para revisar as alterações feitas
  • Integração do GitHub com a capacidade de criar solicitações de pull a partir de alterações

Os desenvolvedores mantêm controle total sobre quais envios. Todas as alterações feitas pelo console exigem análise e aprovação antes da implantação, garantindo a governança, a consistência da marca e a segurança.

Depois de entrar no console às aemcoder.adobe.io, você acessa a tela inicial do console.

Tela inicial do console

Barra de menus menu-bar

A barra do menu superior fornece:

  • Um botão Abrir menu à esquerda para expandir e recolher os detalhes do painel lateral esquerdo
  • Um botão Conta à direita para alternar para o modo escuro e sair do console

Barra lateral esquerda sidebar

A barra lateral esquerda permite acesso rápido a exibições importantes do console.

Exibição da página inicial home-view

A exibição Página Inicial é o seu ponto de partida para usar o console.

  • Na parte superior há uma entrada de prompt para fazer solicitações do console.
  • Abaixo do painel de prompts estão sugestões de prompts para começar a usar seu projeto.

Entrada de prompt prompt-input

A entrada do prompt fornece controles para interagir com a IA.

  • Planejar / Executar modos (ícones de lâmpada e varinha mágica): alternar entre os modos de planejamento e execução, respectivamente

    • Modo de plano: a IA analisa solicitações e descreve uma abordagem sem fazer alterações, o que é útil para entender a estratégia antes de confirmar.
    • Modo de execução: a IA executa o plano e faz alterações reais no arquivo.
  • Anexar arquivos (ícone de clipe de papel): carregue e anexe arquivos ao prompt para contexto adicional (por exemplo, designs de referência, capturas de tela, especificações)

Exibição de conteúdo content-view

A Exibição de conteúdo fornece ferramentas para navegar e visualizar conteúdo. Por padrão, a exibição é dividida em três painéis, da esquerda para a direita:

  • Solicitar painel para interagir com o console e o projeto
  • Navegador de arquivos para obter uma visão geral de seus arquivos de conteúdo (alterne mostrar este painel com o ícone de divisa)
  • Painel Visualizar para visualizar o conteúdo selecionado no navegador de arquivos

Exibição de conteúdo

Painel de bate-papo chat-panel

O painel de chat permite exibir e continuar sua conversa com o agente de Modernização de experiência. O painel de chat inclui o histórico de mensagens de chat e uma entrada de prompt para fazer solicitações adicionais do console.

  • Ações de chat

    • Limpar chat: redefine a conversa e limpa a janela de contexto da IA. Use esta opção ao iniciar uma nova tarefa não relacionada à conversa anterior.
    • Baixar chat: baixa o histórico da conversa como um arquivo de marcação.

Painel Visualizar preview-panel

O painel de visualização oferece até quatro modos:

  • Visualizar (documento com ícone de lupa) para exibir o conteúdo do HTML renderizado

    • Modo de exibição responsivo para exibir o conteúdo renderizado do HTML em um modo de exibição de desktop, tablet ou móvel
    • Modo de design (ícone de pincel) para adicionar elementos da página ao seu prompt para contexto adicional
  • Exibição de documento (ícone de documento) para exibir a estrutura de conteúdo de criação do documento subjacente, respectivamente

  • Exibição do Markdown (criação no AEM) (ícone de código) para exibir a estrutura de conteúdo subjacente do Markdown

  • Visualização JCR XML (criação no AEM) (ícone de dados) para exibir a estrutura de conteúdo JCR XML resultante

Você sempre pode clicar no ícone Atualizar visualização para atualizar o painel de visualização.

O botão Excluir remove a página selecionada do espaço de trabalho. O conteúdo visualizado ou publicado não será excluído.

O botão Erros (criação do AEM) abre uma janela modal para exibir os erros na página selecionada.

O botão Carregar conteúdo abre uma janela modal para carregar arquivos para o AEM.

  • Os campos Organização e Repositório serão preenchidos previamente se o projeto tiver um arquivo fstab.yaml
  • A seleção de arquivo fornece caminhos de destino editáveis
  • Upload para JCR (para Universal Editor) não suportado

Carregar conteúdo

Visualização de código code-view

A Visualização de código fornece ferramentas para procurar código e gerenciar alterações de código. A exibição é dividida em três painéis, da esquerda para a direita:

  • Painel de bate-papo para interagir com o console e o projeto
  • Navegador de arquivos para obter uma visão geral dos arquivos de código ou alterações como diferenciais
  • Painel Visualizar para visualizar um arquivo de código ou alterações selecionadas no navegador de arquivos

Modo de exibição de código

O painel de visualização oferece dois modos diferentes:

  • Arquivos Workspace para procurar os arquivos de código no espaço de trabalho atual

    • Use o botão Adicionar ao chat para adicionar o arquivo ao painel de chat para contexto.
  • Alterações do Git para exibir as diferenças de arquivos, alterações criadas pelo seu trabalho no projeto

    • Clique no ícone + para preparar o arquivo alterado
    • Clique no ícone de seta para descartar o arquivo alterado

O ícone Informações lista a conta GitHub e o projeto conectados no momento.

O menu Ações do GitHub (canto superior direito) fornece operações do repositório.

  • Conectar/Reconectar: inicia o GitHub OAuth
  • Alternar Repositório: substitui o espaço de trabalho por um repositório diferente. Qualquer trabalho não comprometido será perdido.
  • Alternar ramificação: alterna ramificações dentro do mesmo repositório
  • Sincronização: obtém as alterações mais recentes da origem remota
  • Push: abre um modal para enviar alterações do espaço de trabalho para o GitHub
  • Logout: desconecta-se do GitHub

Ao enviar alterações, você deve ter as primeiras alterações preparadas para incluí-las no push. Ao enviar, você pode optar por criar uma nova PR ou enviar diretamente para a ramificação atual

Enviar alterações

Exibição de configurações settings-view

A visualização de configurações permite gerenciar configurações básicas do console.

Modo de exibição de configurações

  • O Project permite que você exiba e edite as configurações do projeto, como a personalização da URL da biblioteca.

  • O Suporte permite solicitar ajuda à equipe de suporte da AEM.

  • Credenciais permite que você especifique um token de acesso pessoal para o Figma, para que o console ​ possa acessar blocos de design para o seu projeto.

    • O token requer os seguintes escopos somente leitura:

      • file_content:read
      • file_metadata:read
      • library_assets:read
      • library_content:read
      • team_library_content:read
      • file_dev_resources:read
      • projects:read
    • Consulte a documentação do Figma para obter mais informações sobre como configurar tokens de acesso pessoal.

  • Redefinir espaço de trabalho reverte o console para seu estado inicial e todas as alterações não enviadas ou não carregadas serão perdidas.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab