Introdução - Tutorial do desenvolvedor

Este tutorial lhe permitirá começar a usar um novo projeto do Adobe Experience Manager (AEM). Dentro de dez a vinte minutos, você terá criado seu próprio site e poderá criar, visualizar e publicar seu próprio conteúdo, estilizar e adicionar novos blocos.

Pré-requisitos:

Este tutorial usa o macOS, o Chrome e o Visual Studio Code como o ambiente de desenvolvimento, e as capturas de tela e instruções refletem essa configuração. Você pode usar um sistema operacional, navegador e editor de código diferentes, mas a interface do usuário exibida e as etapas necessárias podem variar de acordo.

Introdução ao modelo de repositório padronizado

A maneira mais rápida e fácil de começar a seguir as práticas recomendadas do AEM é criar seu repositório usando o repositório GitHub padrão como modelo.

https://github.com/adobe/aem-boilerplate

Basta clicar no link Use this template e selecione Create a new repositorye selecione onde deseja criar esse repositório.

Recomendamos que o repositório esteja definido como public.

A única etapa restante no GitHub é instalar o Aplicativo GitHub de sincronização de código AEM em seu repositório, acessando este link: https://github.com/apps/aem-code-sync/installations/new

No Repository access do aplicativo de sincronização de código AEM, selecione Only select Repositories (não All Repositories). Em seguida, selecione o repositório recém-criado e clique em Save.

Nota: se estiver usando o Github Enterprise com filtragem de IP, você pode adicionar o seguinte IP à lista de permissões: 3.227.118.73

Parabéns! Você tem um novo site em execução https://<branch>--<repo>--<owner>.hlx.page/ No exemplo acima, isso é https://main--my-website--lighthouse100.hlx.page/

Vincular sua própria fonte de conteúdo usando o Google Drive

Em sua bifurcação do repositório GitHub padronizado, o site aponta para uma fonte de conteúdo existente no Google Drive. Consulte esta pasta para obter alguns exemplos de conteúdo.

Esse conteúdo é somente leitura, mas pode ser copiado para a pasta Google Drive para servir como ponto de partida.

Para criar seu próprio conteúdo, crie uma pasta em seu próprio Google Drive e compartilhe a pasta com o usuário do Adobe Experience Manager (helix@adobe.com).

Uma boa maneira de começar a criar seu próprio conteúdo é copiar index, nav e footer do conteúdo de amostra e familiarize-se com a estrutura do conteúdo. nav e footer não são alterados com frequência em um projeto e têm uma estrutura especial. A maioria dos arquivos em um projeto é semelhante a index.

Abra os arquivos e copie/cole todo o conteúdo nos arquivos correspondentes em seu próprio Google Drive. Também é possível baixar os arquivos por meio de Download All ou baixar arquivos individuais. No entanto, lembre-se de converter o baixado .docx arquivos de volta para documentos nativos do Google quando você faz upload deles para sua pasta no Google Drive.

Agora que você tem seu conteúdo, precisa conectá-lo ao repositório do GitHub. Para fazer isso, altere a referência em fstab.yaml no repositório GitHub para a pasta que você acabou de compartilhar.
Copie/cole o URL da pasta do seu Google Drive para fstab.yaml.

Esteja ciente de que, após fazer essa alteração, você verá 404 not found erros, pois o conteúdo ainda não foi visualizado. Consulte a próxima seção para ver como começar a criar e visualizar seu conteúdo. Se você tiver copiado index, nav e footer todos esses três são documentos separados com seus próprios ciclos de visualização e publicação, portanto, visualize (e publique) todos eles, se necessário.

Confirme as alterações e você conectou a própria fonte de conteúdo ao site.

Pré-visualizar e publicar seu conteúdo

Depois de concluir a última etapa, a nova fonte de conteúdo não fica vazia, mas nenhum conteúdo foi promovido para a preview ou live estágios, o que significa que seu site serve 404s.

Para visualizar o conteúdo, um autor precisa instalar a extensão Sidekick do Chrome. Localize o Extensão do Chrome aqui.

Depois de adicionar a extensão ao Chrome, não se esqueça de fixá-la, isso facilitará a localização.

Para configurar a extensão do Chrome, vá para a pasta Google Drive compartilhada anteriormente, clique no ícone de extensão na barra de ferramentas do navegador e selecione Add this project.

Assim que a extensão for instalada e o projeto for adicionado, você estará pronto para pré-visualizar e publicar o conteúdo do seu Google Drive.

Selecione todos os três documentos e ative o AEM Sidekick clicando na extensão fixada. Uma nova barra de ferramentas será exibida. Clicar no preview ou publish botões acionarão a operação correspondente.

Abra o index doc e faça algumas alterações. Ative o Sidekick clicando na extensão fixada e clique no link Preview botão que acionará a operação de visualização e abrirá uma nova guia com a representação de visualização do conteúdo.

Começar a desenvolver estilo e funcionalidade

Para começar o desenvolvimento, é mais fácil instalar a Interface de linha de comando (CLI) do AEM e clonar seu repositório localmente usando o seguinte.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

A partir daí, altere para sua pasta de projeto e inicie seu ambiente de desenvolvimento local usando o seguinte.

cd <repo>
aem up

Isso é aberto http://localhost:3000/ e você está pronto para fazer alterações.
Um bom ponto de partida é a blocks pasta que é onde a maioria do estilo e do código vive para um projeto. Basta fazer uma alteração em um .css ou .js e você deverá ver as alterações no navegador imediatamente.

Quando estiver pronto para enviar suas alterações, basta usar o Git para adicionar, confirmar e enviar por push e seu código para a visualização (https://<branch>--<repo>--<owner>.hlx.page/) e produção (https://<branch>--<repo>--<owner>.hlx.live/) sites.

Pronto, você conseguiu! Parabéns, seu primeiro site está funcionando. Se precisar de ajuda no tutorial, entre no nosso canal Discord ou entre em contato conosco.