Desenvolvimento Front-end em AEM - Parte II
Tags: aem, adobe, frontend, cms
Published: 2021-10-07 15:32:02

## Use Core Components e Style System

**Introdução aos Core Components**

- Os core components oferecem componentes básicos robustos e extensos 
- Os core components tem sido construídos usando tecnologia de ponta e boas práticas, além de aderirem à paramêtros de acessibilidade. 
- Os core components fazem as páginas autorais mais flexíveis e customizáveis 
- Para desenvolvedores, é fácil extender os core components para oferecer uma funcionalidade customizada.

![Core Components e Foundation Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fadru7wzsqyoj9exl4w.jpg)

**Introdução ao Style System** 

O Style System te permite criar variações visuais de componentes sem nenhum desenvolvimento back-end. Isso permite a melhor reutilização de componentes AEM. 

- Style system permite que o autor selecione essas variações quando faz a edição de um componente em uma página. 
- Os template authors podem definir classes de estilo no conteúdo de políticas de um componentes – as opções de estilo serão disponibilizadas para autores baseadas na classes de estilo definidas 

**Arquitetura dos Style Systems**

![Arquitetura dos Style Systems](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fui2j0c538yhjn5szn4s.png)

## Criando Components

*Dialogs* 

- São interfaces gráficas que disponibilizam input para os componentes 
- Os autores usam caixas de diálogo para customizar o conteúdo ou comportamento de um componente. 
- Existem dois tipos: Touch UI Dialogs e Classic UI Dialog 

*Design Dialogs* 

- Disponibilizam configurações de design em um componente 
- Acessível somente no modo design 
- Não está disponível para páginas criadas usando templates editáveis 

*Overlays* 

- Te permitem extender e customizar componentes e consoles existentes 
- O AEM é configurado para procurar no /apps primeiro e depois no /libs para encontrar um recurso 
- O Sling Resource Merger disponibiliza serviços para acessar e juntas recursos. 
- O Sling Resource Merger e o métodos relacionados só podem ser usados com Granite 

O resource merger disponibiliza as propriedades a seguir: 
    - sling:hideProperties 
    - sling: hideResource 
    - sling:hideChildren 
    - sling:orderBefore

## Introdução às Clients Libraries

**Client Libraries Overview** 

- Uma client lib é um set organizado de arquivos javascript e css 
- Te permite guardar o código do lado do cliente no repositório, organizar em categorias e definar quando e como cada categoria de código deve ser servida ao cliente 
- A biblioteca do lado do cliente se ocupa de produzir os links corretamente na sua webpage final e carregar o código correto.

 ![Client libs I](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnfxc96fjwrrsofv6v9l.png)

**Propriedades das Client Libraries**

![Propriedades das Client Libs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iorf7rxod7qwx21d1l4s.png)

## Crie Content Fragments

**Introdução aos Content Fragments**

- Você pode criar e administrar Content Fragments como assets de página independentes 
- Content Fragments te permitem criar um conteúdo de "canal-neutro" junto com (possivelmente "canal-específico") variações 
- Você pode usar Content Fragments e suas variações quando autora conteúdo de páginas 
- O componente de Content Fragment dispõe de conteúdo do Content Fragment

![Esquema dos Content Fragments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1la90rtvyycltzfd9q1.jpg)

*Benefícios* 

- Revisar o conteúto pela administração central dos Content Fragments 
- Mapear assets criativos através de coleções associadas com Content Fragments 
- Escrever e administrar conteúdo através do editor de Content Fragments 
- Atualizar o conteúdo de múltiplas páginas a partir de uma localização simples

**Crie Content Fragments Models**

![Divisão de Tarefas - Content Fragments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aatvsqqrc04f89bxwtx8.jpg)

## Crie Experiências Fluídas usando AEM

**Introdução ao Headless CMS**

*Cenários* 

- Entregam conteúdo puro em aplicativos nativos de celulares 
- Entregam conteúdo puro para websites que utilizam o framework SPA (Single Page App) 
- Entregam conteúdo puro para aplicações terceiras (web, desktop, mobile) 
    - Conteúdo entregue para o Ponto de Venda de outras store experiences 
    - Conteúdo entregue para o offsite de experiências digitais 
    - Carros conectados 
    - Content fragments tagueados entregues ao IoT 

**Use Princípios Headless com React**

![Experiências Fluídas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tge19cbap903q6vyfyk2.jpg)

## Debugging e Teste

**Developer Mode**

Benefícios de usar o Developer Mode 

- Descobrir do que as páginas são compostas  
- Debugar aplicações 
- Testar aplicações para verificar se elas funcionam de acordo com o comportamento esperado

**Framework Hobbes para testes**

O Hobbes testing framework é baseado na linguagem JavaScript com User Interface (UI) para os produtos AEM 

- Automatiza a exceção de testes UI em browsers e disponibiliza um resultado de teste 
- Usa Hobbes.js, uma biblioteca de teste escrita em JavaScript 
- O framework permite que: 
- A API JavaSript para criar testes 
- Um painel UI para rodar os testes

## Desenvolva o front-end no AEM usando aemfed

![Aemfed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6suvetj3rnjnbmhg3oj0.jpg)

========

## Questões finais: 

**Use Core Components & Style System** 

*Em qual dos componentes abaixo o Style System é habilitado for a da caixa?* 
Core Components version 2 or later 

*Qual desses é uma fonte de core components?* 
Github 

*Onde estão alocados or core components no AEM?*
Apps 

*Quais propriedades são obrigatórias para consigurar a aba Style no dialog Design?* 
Path 
Sling:resourceType 

*Em qual cenário os Styles podem ser combinados?* 
Quando Styles estão presentes em dois grupos diferentes de Styler permitidos em um template
Quando a opção "Styles can be combined" está marcada no checkbox


**Creating Components** 


*Qual é o tipo do nodo de um componente AEM?* 
cq:component 

*Qual desses é categorizado como cq:WidgetCollection?* 
Items 

*Qual dessas features te ajuda a extender e customizar consoles já existentes em uma interface?* 
Overlays 

*Onde estão os valores disponíveis para um design dialog?* 
Conf folder 

*Os autores do seu time estão trabalhando em fazer uma nova interface de design. Você quer que eles customizem o comportamento do componente através de um input nele. Qual feature do AEM vai ajudar para fazer isso?* 
Dialog boxes 

*Como autor, o que você precisa fazer com um componente para deixá-lo editável?* 
Destrancá-lo

**Introduction to Client Libraries** 

*Qual das seguintes são propriedades da Client Library?* 
Dependecies e Categories. 

*Qual das seguintes você pode usar para aplicar Page Designs?*
Page component e Template. 

*Onde o Page Design aplicado em um Template refletirá como estilos ou design?* 
Nos templates que o Page Design for aplicado e nas paginas criadas apartir de templates que tenham sido aplicado o Page Design. 

*Como o AEM evita a criação de várias cópias da biblioteca JS na saída final e permite a organização lógica do client-side library?* 
Usando pastas na client-side libraty. 

*Onde você cria uma Page Design?* 
Client Library in/apps/project


**Introduction to Client Libraries** 

*Qual das propriedades de um client clibrary atua como identificador?* 
Categories 

*Quais desses podem ser usados para adicionar ao Page Designs?* 
Page component e Template 

*O que um arquivo js.txt define?* 
A pasta base e a lista de arquivos JavaScript usado pela biblioteca do cliente 

*Quais dessas afirmações sobre client libraries são verdadeiras?* 
Elas estão organizadas em sets de arquivos JavaScript e CSS 
Definem quando e como cada categoria do código é servida ao clinete 
Permitem que você guarde o código do lado do cliente em um repositório, organizado em categorias.

**Create Content Fragments and Content Fragments Models** 

*Qual dessas é uma etapa obrigatória para permitir a sumarização dos Content Fragments?* 
Adicionar o Content Fragment no nodo de línguas 

*Como nós podemos exportar o Content Fragment no formato JSON?* 
Nós podemos criar um Content Fragment e aproveitar o Asset HTTP API para exportar o Content Fragment no formato JSON 

*Onde os Content Fragments ficam guardados no JCR?* 
/content/dam/ 

*Qual feature um autor DAM usa para compartilhar o feedback com um copywriter?* 
Annotate 

*Quais são as vantagens de usar os Content Fragments?* 
Eles te permitem atualizar o conteúdo em múltiplas páginas a partir de uma só 
Eles permitem que o autor reveja o conteúdo 

*Quais dessas features são sustentadas pelos Content Fragments?* 
Summarization 
Associated Asset Collection 
Rich Text 


**Create Fluid Experiences using AEM** 

*Quais são as três formas de implementar uma entrega de conteúdo headless?* 
Usar um CMS híbrido 
Usar ferramentas customizadas para apresentar dados do legacy CMS 
Autorizar uma única solução headless 

*O que ajuda o AEM a facilitar a entrega de conteúdo headless?* 
Content fragment models 

*Qual desses está incluido no Content Fragment Model?*
Content Schema and Data Types 

*Como podemos disponibilizar uma feature de texto e de sumário em um campo de multi-texto definido por um Content Fragment Model?* 
Criando um content fragment na linguagem root 

*Complete:* 
Para exporter um conteúdo de página nof formato JSON o Sling Model Exporter Framework autoriza o Jackson Exporter 

**Create and Export Experience Fragments** 

*Se um autor quer deletar um Experience Fragment do Adobe Target, qual dessas opções ele deve usar?* 
Deletar do Adobe Target 

*Qual dessas afirmações sobre experience fragments está correta?* 
Um experience fragment é um grupo de um ou mais componentes que incluem layout e conteúdo 

*No out-of-the-box AEM 6.5, para qual dos seguintes sites você pode criar variações usando experience fragments dos seus produtos?* 
Facebook e Pinterest 

*Qual opção um autor deve selecionar para autorizar o Adobe Target personalizar SPA e aplicativos mobile?* 
O JSON exportado do experience fragment do Adobe Target 

**Perform Debugging & Testing**

*Você pode usar http://localhost:4502/libs/cq/ui/content/dumblibs.html para procurar uma client library por sua categoria. Verdadeira ou Falso?* 
True 

*O que você pode usar no /libs/cq/ui/content/dumblibs.html?* 
Reconstruir cliente libraries 

*Qual valor você colocaria para a propriedade dependency de uma client library que guarda casos de teste?* 
Granite.testing.hobbes.testrunner 

*Qual configuração OSGi configura a compressão usando Gzip para uma client library?* 
Adobe Granite HTML Library Manager 

* O que você pode fazer para remover os espaços em branco e novas linhas de uma client library sem mudar sua funcionalidade?* 
Checar minify no Adobe Granite HTML Library Manager 

*Complete:*
Vários scripts Java em uma client library são compilados e gerados na pasta /var


**Develop the AEM Front-end using aemfed** 

*What is the purpose of –e in the aemfed command?* 
To provide regex to exclude the files from deployment 

*What is the purpose of –t in the aemfed command?* 
To provide the AEM server URL 

*Which of the following statements is true about aemfed?* 
It is a npm module 

*What is the purpose of –w* 
To provide the path of jcr_root node