Introdução ao AEM Sites - Tutorial do WKND

Bem-vindo a um tutorial de várias partes projetado para desenvolvedores novos no Adobe Experience Manager (AEM). Este tutorial aborda a implementação de um site AEM para uma marca fictícia de estilo de vida na WKND. O tutorial aborda tópicos fundamentais como configuração do projeto, Componentes principais, Modelos editáveis, bibliotecas do lado do cliente e desenvolvimento de componentes com o Adobe Experience Manager Sites.

Visão geral

O objetivo deste tutorial em várias partes é ensinar um desenvolvedor a implementar um site usando os padrões e as tecnologias mais recentes no Adobe Experience Manager (AEM). Após concluir este tutorial, um desenvolvedor deve entender a base básica da plataforma e com conhecimento de padrões de design comuns no AEM.

O tutorial foi projetado para funcionar com o AEM as a Cloud Service e é compatível com versões anteriores do AEM 6.5.5.0+ e AEM 6.4.8.1+. O site é implementado usando:

Estime de 1 a 2 horas para visualizar cada parte do tutorial.

Ambiente de desenvolvimento local

Um ambiente de desenvolvimento local é necessário para concluir este tutorial. Capturas de tela e vídeo são capturados usando o SDK do AEM as a Cloud Service em execução em um ambiente Mac OS com o Visual Studio Code como IDE. Os comandos e o código devem ser independentes do sistema operacional local, salvo indicação em contrário.

Software necessário

Devem ser instalados:

OBSERVAÇÃO

Novo no AEM as a Cloud Service? Consulte o guia a seguir para configurar um ambiente de desenvolvimento local usando o SDK do AEM as a Cloud Service.

Novo no AEM 6.5? Consulte o guia a seguir para configurar um ambiente de desenvolvimento local.

Sobre o tutorial

A WKND é uma revista e um blog fictício online que se concentra na vida noturna, nas atividades e nos eventos em várias cidades internacionais.

Kit da interface do usuário do Adobe XD

Para tornar este tutorial mais próximo de um cenário real, os talentosos designers UX da Adobe criaram os modelos para o site usando Adobe XD. Ao longo do tutorial, várias partes dos designs são implementadas em um site AEM totalmente criável. Agradecimentos especiais a Lorenzo Buosi e Kilian Emenda que criaram o belo design para o site WKND.

Baixe os kits da interface do usuário XD:

O nome WKND está configurado, pois esperamos que um desenvolvedor faça a melhor parte de um fim de semana para concluir o tutorial.

Github

Todo o código para o projeto pode ser encontrado no Github no repositório do AEM Guide:

GitHub: Projeto de Sites WKND

Além disso, cada parte do tutorial tem sua própria ramificação no GitHub. Um usuário pode iniciar o tutorial a qualquer momento, fazendo o check-out da ramificação que corresponde à parte anterior.

OBSERVAÇÃO

Se estava trabalhando com a versão anterior deste tutorial, ainda é possível encontrar os pacotes de solução e código no GitHub.

Site de referência

Uma versão concluída do Site WKND também está disponível como referência: https://wknd.site/

O tutorial aborda as principais habilidades de desenvolvimento necessárias para um desenvolvedor do AEM, mas não criará todo o site de ponta a ponta. O site de referência finalizado é outro excelente recurso para explorar e ver mais recursos prontos para uso do AEM.

Para testar o código mais recente antes de passar para o tutorial, baixe e instale a versão mais recente de do GitHub.

Alimentado pelo Adobe Stock

Muitas das imagens no site de Referência da WKND são do Adobe Stock e são Materiais de terceiros, conforme definido nos Termos adicionais do ativo de demonstração em https://www.adobe.com/legal/terms.html. Se você quiser usar uma imagem do Adobe Stock para outros propósitos além da exibição deste site de demonstração, como exibi-la em um site ou em materiais de marketing, poderá comprar uma licença no Adobe Stock.

Com o Adobe Stock, você tem acesso a mais de 140 milhões de imagens de alta qualidade e isentas de royalties, incluindo fotos, gráficos, vídeos e modelos para começar seus projetos criativos.

Próximas etapas

O que você está esperando?! Inicie o tutorial navegando até o capítulo Configuração do projeto e saiba como gerar um novo projeto do Adobe Experience Manager usando o Arquétipo de projeto AEM.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now