Introdução ao Agente de modernização de experiência getting-started

Learn the first steps to get started using the Experience Modernization Agent and the Experience Modernization Console.

NOTE
If you are interested in using the Experience Modernization Console, you can request access through your account manager to ensure a smooth onboarding experience.

Preparar um repositório GitHub da Edge Delivery prepare-repo

NOTE
Está usando um projeto do AEM Sites e do Universal Editor? Siga as etapas de instalação do Introdução ao AEM Sites/Universal Editor.
  1. Selecione um repositório do Edge Delivery Services para usar com o Console de Modernização de Experiência.

  2. Verifique se o Conector de código do AEM está instalado no repositório.

    • Isso permite que o console inspecione o código.
  3. Verifique se o aplicativo GitHub da Sincronização de Código do AEM está instalado no repositório.

    • Isso permite que o Edge Delivery Services sincronize seu código.
    • Se o acordo de recompra se basear no tutorial, esta etapa já estará concluída.

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

  1. Navegue até aemcoder.adobe.io.
  2. Faça logon com sua Adobe ID.

Conectar seu repositório GitHub connect-repo

O console solicita um repositório ao fazer logon pela primeira vez.

Primeira tela de entrada do console

  1. Clique em Conectar repositório.
  2. Isso abre o aplicativo Conector de código AEM em uma nova guia do navegador. Clique em Autorizar Conector de Código AEM.
  3. De volta ao console, selecione Proprietário, Repositório e Seleção de ramificação e clique em Fazer check-out para o espaço de trabalho.
    Conectando ao projeto GitHub
  4. Quando solicitado a Substituir espaço de trabalho existente, clique em Substituir espaço de trabalho.
    Substituir espaço de trabalho existente

Seu projeto do GitHub agora está conectado ao console e você está na tela inicial.

Página inicial do console

Iniciar Solicitação start-prompting

Agora que o console pode acessar o código, você está pronto para começar a solicitar.

  1. Para começar, você pode importar o conteúdo de um site:

    • "Migrar a página https://wknd-trendsetters.site."
  2. Isso importa o conteúdo do site.

    • O console observa a separação de interesses e lida com o conteúdo e a apresentação separadamente.
    • A importação inicial do conteúdo de um site pode levar vários minutos.
    • O console fornece feedback contínuo à medida que inicia seu trabalho, incluindo uma visão geral de suas etapas planejadas.
      Importação de conteúdo
  3. Depois que o site for importado, o painel Workspace mostrará as páginas. Selecione uma página para visualizá-la no painel direito.
    Conteúdo importado

  4. Agora que você tem conteúdo, é possível solicitar a importação dos estilos da mesma origem.

    • "Importar os estilos gerais de https://wknd-trendsetters.site."
  5. Assim como na importação de conteúdo inicial, a importação pode levar vários minutos, e o console fornece feedback enquanto processa sua solicitação e importa os estilos. Quando a tarefa for concluída, clique em Atualizar visualização no painel direito para exibir o conteúdo estilizado.
    Estilos importados

Agora você tem o conteúdo e os estilos importados para o console.

TIP
Consulte o guia de prompts para obter mais ideias sobre como solicitar o agente e o que suas habilidades podem fazer.

Fazer upload de conteúdo upload-content

TIP
Se você estiver trabalhando em um projeto do AEM Sites e do Universal Editor, o upload de conteúdo para o AEM funcionará de forma um pouco diferente. Consulte Introdução ao Experience Modernization Agent para projetos do AEM Sites/Universal Editor para obter instruções específicas de carregamento.

Para carregar seu conteúdo para a Criação de Documentos:

  1. Verifique se você está no modo de exibição Conteúdo e clique no botão Carregar conteúdo no canto superior direito.

    • Por padrão, você está no modo de exibição Conteúdo ao entrar no console.
    • Sua visualização é indicada pelo ícone destacado na barra lateral ao longo do lado esquerdo do console.
  2. A caixa de diálogo Carregar conteúdo é aberta com a organização de destino e o repositório preenchidos previamente a partir do fstab.yaml.

    • Se um fstab.yaml não estiver presente no repositório conectado, você precisará inserir manualmente a Organização e o Repositório.
    • Se você usou o padrão de formatação, um fstab.yaml será fornecido.
  3. Selecione os arquivos que você deseja carregar e clique em Carregar.
    Caixa de diálogo Carregar conteúdo

  4. O console indica o processo de carregamento esmaecendo o botão Carregar.
    Carregando

  5. Uma vez concluída, uma notificação será exibida na parte inferior do console.
    Exibir no AEM

Para acessar o conteúdo carregado na Criação de Documentos, clique opcionalmente em Exibir na AEM na notificação quando o carregamento for concluído ou navegue até https://da.live/#/{organization}/{repository}.

Conteúdo na criação de documentos

O conteúdo importado agora está na Criação de documentos.

Alterações no código push push-code-changes

Quando estiver satisfeito com as alterações feitas no código, você poderá enviá-las para o repositório do GitHub.

  1. Alterne para a exibição Código (</> ícone na barra lateral esquerda) e, em seguida, para a guia Alterações do Git (ícone de ramificação na parte superior direita).
    Modo de exibição de código
  2. Na lista de arquivos alterados, se alguns arquivos forem exibidos como não rastreados, clique no botão + para prepará-los.
  3. Clique no botão Ações do GitHub no canto superior direito e selecione Push no menu suspenso.
  4. Na caixa de diálogo Enviar alterações, escolha enviar alterações para uma nova PR (padrão) ou para a ramificação atual e clique em Confirmar para enviar.
    • Na dúvida, você pode enviar para a ramificação atual para manter as coisas simples.
  5. Uma vez concluída, uma notificação será exibida na parte inferior do console.
    Exibir PR

Se quiser acessar diretamente as alterações enviadas no GitHub, clique em Exibir PR na notificação quando o envio for concluído.

Código no GitHub

Seu código agora está no GitHub.

Visualizar site preview-site

Para exibir as alterações no ambiente de visualização:

  1. Volte para Criação de documentos.

    • Ela ainda pode estar aberta em uma guia do navegador que você abriu depois de clicar em Exibir no AEM depois de carregar o conteúdo.
    • Ou navegue até https://da.live/#/{organization}/{repository}
  2. Abra uma das páginas que você carregou anteriormente no AEM.

  3. Clique no ícone de plano de papel (canto superior direito) e selecione Visualizar.
    Publicar para visualização

Parabéns! O conteúdo e os estilos migrados agora estão ativos no ambiente de visualização do AEM.

Conteúdo de visualização publicado

Se você enviou seu código para uma ramificação diferente de main, a visualização aberta da Criação de documentos não mostrará os estilos. Altere para a ramificação atualizando o URL da visualização e você poderá ver seus estilos.

Recursos adicionais additional-resources

Os documentos a seguir podem ser úteis à medida que você continua explorando o Agente de modernização de experiência e seu console.

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