Desenvolvimento Front-end em AEM - Parte II

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.

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

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.

Propriedades das Client Libraries

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

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

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

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

========

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