Forem: Beatriz Maciel

Semi automatização de preenchimento de dialogs no AEM

Beatriz Maciel — Wed, 13 Sep 2023 13:17:57 +0000

Autoração de conteúdo de páginas pode ser uma das tarefas mais desestimulantes para desenvolvedores. Neste artigo buscarei explicar um exemplo de semi automatização para facilitar este processo. Devido à particularidades do editor do AEM, uma automatização completa não foi possível, mas esta solução está aberta a contribuições!
Essa solução foi construída em parceria com Felipe Martins.

Campos de Preenchimento

Os campos a serem preenchidos estavam dentro de um multifield sem limite de elementos, e cada elemento contava com:

Textfield
Pathfield
Menu dropdown com duas opções

A dialog que usamos de exemplo para preenchimento é a seguinte:

Cada campo tem um comportamento diferente para ser preenchido. É importante salientar que o pathfield recebia um path de arquivo do DAM do próprio AEM.

Desenvolvimento da solução

Neste caso, precisamos fazer duas listas com as opções a serem completadas. Os elementos precisam ser inseridos um a um, como o exemplo a seguir:

var links = ["/content/website/language-masters/en/home/arquivo01.pdf",
"/content/website/language-masters/en/home/arquivo02.pdf",
"/content/website/language-masters/en/home/arquivo03.pdf"]

var idsLinks = ["Arquivo 01","Arquivo 02","Arquivo 03"]

Neste exemplo temos três elementos, o primeiro link fará par com o primeiro idLink e assim sucessivamente.

✏️ Textfield

Como o editor do AEM conta com um HTML próprio, vamos utilizar as classes e ids já existentes nessa estrutura para acessar o campo de Textfield. Nesse caso, encontramos a única ocorrência de uma tag "mãe" e vamos acessar a classe correta na hierarquia para modificação.
Foi importante identificar uma classe única para que a função não se perdesse e pudesse encontrar mais de uma opção de modificação. Dessa forma, encontramos a classe coral-Well, que será a "mãe", enquanto e desceremos algumas tags até encontrarmos o campo de inserção de texto para popular o nosso textfield. Dessa forma:

$(".coral-Well div div.coral-Form-fieldwrapper:eq(0) input")[0].value = idsLinks[i];

A função eq() serve para identificar a posição do elemento. Usamos value para adicionar o valor do índice correto, buscando-o na nossa lista idsLinks.

✏️ Pathfield

Para popular o pathfield com conteúdo do DAM do AEM, utilizamos a função attr(). É importante que o path esteja completo, desde /content... até a propriedade do arquivo (no nosso caso, .../arquivo01.pdf).
O número de índice do eq() mudou porque os campos da dialog do AEM tem o mesmo nome (.coral-Form-fieldwrapper), e precisamos especificar qual dessas filhas de .coral-Well queremos.

$("div.coral-Well div div.coral-Form-fieldwrapper:eq(1) foundation-autocomplete coral-taglist coral-tag").attr("value",links[numeral]);

⚠️ Atenção : Essa forma de preenchimento do pathfield não popula o campo de dialog do AEM visualmente, é necessário salvar as alterações para que o path entre corretamente.

✏️ Menu dropdown

Usamos a mesma lógica hierárquica para acessarmos nossa tag e/ou nossa classe desejada. A diferença de um seletor é que usaremos a função click ao invés de popularmos com algum tipo de texto.

$(".coral-Well div div.coral-Form-fieldwrapper:eq(2) coral-select coral-overlay coral-selectlist coral-selectlist-item")[1].click();

Também utilizamos a posição [1] para especificar que queremos selecionar a segunda opção que apareça ao abrir o dropdown.

Montando a função

Agora que desmembramos os campos e definimos suas especificidades, devemos aplicar todas essas ações em uma função e aplicar um índice que vai ser sempre modificado, porque a partir do momento que preenchermos um bloco de campos de um elementos, deveremos passar para o próximo. Por isso, vamos abraçar as funcionalidades dentro da função preencheCampos().

Além disso, precisamos de um índice para iteração, que vamos chamar de numeral

⚠️ Atenção : é importante evitarmos usar índices com letras, como tradicionalmente usamos (i, z, entre outros), porque o editor do AEM guarda arquivos minificados que trabalham com variáveis com estes nomes. Então é sempre bom escolher uma variável de nome mais específico, para não ser alterado pelo próprio AEM.

Este numeral será importante para posicionarmos os campos, ele funciona na iteração como o tradicional i, e se certifica que estamos seguindo o array na ordem certa, enquanto o índice for menor do que idsLinks.length (mas poderia ser menor do que links.length, também, uma vez que eles têm a mesma quantidade de elementos e fazem duplas entre si).

Para adicioná-lo, também vamos usar a função eq() associada à classe única (.coral-Well), dessa forma:

$(".coral-Well:eq(" + numeral + ") div div.coral-Form-fieldwrapper:eq(0) input")[0].value = idsLinks[numeral];

Também será necessário um segundo índice para o click no botão de Add, porque o mesmo botão muda de posição de acordo com a quantidade de elementos que inserimos no multifield. Logo, teremos que iterá-lo com + 2 posições, dessa forma:

$(".coral-Form-fieldwrapper coral-multifield button.coral3-Button.coral3-Button--secondary")[numeralAdd].click();
numeralAdd+=2;

Por fim, montando todas essas partes, podemos finalmente construir uma função de preenchimento de campos, lembrando que é necessário atribuirmos o valor de 0 para o índice numeral e 2 para o índice numeralAdd, para que caminhe de dois em dois.

numeral = 0;
numeralAdd = 2;

A função fica assim, então:

function preencheCampos(){
    console.log("Criando link do index " + numeral + ". ID " + idsLinks[numeral]);
    // Popula o textfield
    $(".coral-Well:eq(" + numeral + ") div div.coral-Form-fieldwrapper:eq(0) input")[0].value = idsLinks[numeral];

    // Define o pathfield
    $("div.coral-Well:eq(" + numeral + ") div div.coral-Form-fieldwrapper:eq(1) foundation-autocomplete coral-taglist coral-tag").attr("value",links[numeral]);

    // Seleciona uma opção no menu dropdown
    $(".coral-Well:eq(" + numeral + ") div div.coral-Form-fieldwrapper:eq(2) coral-select coral-overlay coral-selectlist coral-selectlist-item")[1].click();

    numeral++;
    // Clica no botão de add para adicionar um novo elemento
    if(numeral < idsLinks.length)
        $(".coral-Form-fieldwrapper coral-multifield button.coral3-Button.coral3-Button--secondary")[numeralAdd].click();
    else
        alert("Fim");
    numeralAdd+=2;
}

Por que semi automatizado?

O editor do AEM pode ficar pesado com um loop de preenchimento e as tentativas de funções para automatizar de forma integral não foram bem sucedidas. Deixo esse tópico aberto à contribuições para pensar em formas de preenchimento de dialog de forma totalmente automatizada.

Content fragments em React no AEM | 🇧🇷

Beatriz Maciel — Mon, 29 May 2023 18:36:09 +0000

Uma das facilidades do AEM (Adobe Experience Manager) é usar content fragments, que são basicamente pedaços de conteúdo que podem ser reproduzidos em diversas partes do nosso site através de componentes.
Neste artigo, vamos construir um componente react simples que consome os dados de um content fragment e renderiza na tela.

Passo a passo ✏️

Primeiro precisamos criar um modelo de content fragment e um (ou mais) content fragment(s) no nosso AEM local. Para saber como criar um modelo de content fragment, acesse a documentação oficial. Depois de criar um modelo, é possível criar um content fragment que se utiliza desse padrão. Saiba como fazer isso através da documentação oficial ou deste vídeo explicativo (em inglês)

📌 Modelo

No meu caso construí o seguinte modelo de content fragment:

Este modelo contém:

Dois campos de texto simples (título e subtítulo)
Um campo de caminho (pathfield) para relacionar dois content fragments diferentes
Um campo de texto rico (descrição)

O modelo pode conter muito mais campos e detalhes, mas lembre-se que geralmente o content fragment é utilizado para reproduzir um mesmo conteúdo várias vezes, o que faz com que quanto mais genérico seu modelo, melhor. Entretanto, cada situação pode exigir estruturas diferentes, então fique à vontade para criar.

📌 Content Fragment

Uma vez criado o modelo, podemos habilitá-lo na pasta de asset que iremos utilizar para o nosso site. Depois de habilitado, criamos um novo content fragment que terá sempre os mesmos campos.

📌 Consumindo dados (AEM)

Para consumir os dados desse content fragment no react vamos ter que criar um endpoint. Para isso acessamos o localhost:4502 > tools > general > graphql (ou apenas acesse http://localhost:4502/libs/cq/graphql/sites/admin/content/console.html).
Clique no botão "create" e crie um novo endpoint referenciando o projeto desejado.
Depois de criado, entramos novalmente em localhost:4502 > tools > general > graphql editor
Selecionamos o endpoint no dropdown superior direito.

No modelo que é aberto automaticamente, vamos editar a partir da linha 29, como sinalizado abaixo:

Vamos adicionar a estrutura que incluímos no nosso model. No caso do exemplo acima, teremos título, subtítulo e descrição. Lembrando que, uma vez que a descrição é um texto rico, devemos incluir a linguagem de marcação (html, json, etc)

Para confirmar se os dados estão retornando corretamente, clicamos no "play" superior para mostrar os dados na tela à direita. Depois disso, salvamos com um novo nome, publicamos (clicando no botão publish) e, ao aparecer na barra lateral esquerda, podemos copiar o url do novo endpoint

📌 Consumindo dados (React)

Para consumir os dados que recebemos neste endpoint no react, criaremos um componente simples. Para que o AEM não se perca, sugiro criar uma dialog (em apps) e um model (em core/bundle), mas a parte principal será no front-end, onde criaremos o componente Content Fragment.

import React, { useEffect, useState } from 'react';

export default function ContentFragment(props) {
    const { title } = props;
    const [items, setItems] = useState([]);

    useEffect(() => {
        getPosts();
    }, []);

    function getPosts() {
        fetch('/graphql/execute.json/your-project-name/posts', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
            }
        })
        .then(res => res.json())
        .then(json => {
            setItems(json.data.postList.items);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    return (
        <section>
            <h1>Content Fragment</h1>
            <p>{title}</p>

            <ul>
                {items.map((item, index) => (
                    <div key={index}>
                        <li>{item.title}</li>
                        <li>{item.subtitle}</li>
                        <li dangerouslySetInnerHTML={{ __html: item.description.html }} />
                    </div>
                ))}
            </ul>
        </section>
    );
}

O código acima é um exemplo de como conseguimos consumir os dados do endpoint criado no aem de forma simples.

O comportamento desse componente é igual a qualquer outro componente react: deve ser importado no arquivo import-components.js, além de receber um MapTo para ser mapeado.

Pronto! Agora você terá um componente AEM que recebe content fragments! Basta apenas arrastar na sua página de preferência

Na imagem acima podemos ver como o componente exemplo renderiza. A partir deste ponto você pode estilizá-lo como quiser, como um componente qualquer.

Referências

Debug AEM com IntelliJ | 🇧🇷

Beatriz Maciel — Thu, 19 Jan 2023 17:21:18 +0000

Para debugar no AEM seguimos os seguintes passos:

Com o AEM desligado (sem inicializar ele), entramos nas pastas crx_quickstart > bin
Clicamos do lado direito no arquivo start.bat e o abrimos em algum editor de texto

Na linha 25, precisamos mudar a configuração set CQ_JVM_OPTS=-Xmx1024m para set CQ_JVM_OPTS=-Xmx2048m, alterando o número.
No final dessa linha também vamos inserir o seguinte comando: -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005, como demonstrado na imagem abaixo.

No IntelliJ

Agora, com o IntelliJ aberto, clicamos no dropdown ao lado do martelo verde, e depois clicamos em Edit Configurations...

Na janela que abrirá, clique no + do canto superior esquerdo

Depois, clicamos em Remote JVM Debug e daremos um nome para esse debugger. Note que, abaixo do campo para inserirmos o nome do nosso debugger, teremos o Command line arguments for remote JVM que terá exatamente o mesmo código que colocamos no start.bat

Clique em Apply e depois em Ok. Agora o seu debugger será mostrado no mesmo checkbox que clicamos para adicioná-lo.
Pronto! 😉 Agora é só debugar seu código normalmente, usando o checkpoint (o marcador vermelho 🔴) e o inseto (bug 🪲) na parte superior da navegação do IntelliJ

Observação: para abrir o AEM em modo debug, utilize o seguinte comando no terminal (bash): java -jar <arquivo jar> -debug 5005. Não esqueça de botar o nome completo do seu arquivo, por exemplo:

java -jar aem-sdk-quickstart-2022.9.8630.20220905T184657Z-220800.jar -debug 5005

Referências

Debugging Your AEM 6.4 Application in IntelliJ

Modelos de campos em uma dialog no AEM

Beatriz Maciel — Tue, 18 Oct 2022 12:29:01 +0000

Existem várias maneiras de construir dialogs nos componentes do AEM e a variedade de opções melhora a experiência do Author na construção da página.
Através da necessidade de um acervo de modelos reutilizáveis e simples para as dialogs AEM, decidi criar este artigo com alguns dos principais tipos de campos utilizados e seus respectivos códigos, facilitando a vida do(a) desenvolvedor(a).
Também vou explicar algumas propriedades dos campos e suas utilizações.

📌 Textfield

<text
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldDescription="Insira um texto simples, de apenas uma linha"
    fieldLabel="Texto"
    required="{Boolean}true"
    name="./text"/>

Aqui temos um exemplo de textfield com algumas propriedades relevantes. O nome editável para que possamos pegar esse input no Java precisa ser repetido tanto na abertura da tag quanto no campo name="".

1 - required="{Boolean}true"
2 - fieldLabel="Texto"
3 - fieldDescription="Insira um texto simples, de apenas uma linha"
4 - sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

📌 Textarea

Tem a mesma propriedade do textfield, mas a área de texto é maior, o que facilidade a visualização do que está sendo digitado.

<constraintMessage
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
    fieldDescription="Escreva uma mensagem"
    fieldLabel="Mensagem simples com campo alargado"
    name="./constraintMessage"/>

📌 Fileupload

Para que um author possa carregar arquivos na dialog de um componente podemos usar o seguinte modelo:

<img
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    autoStart="{Boolean}true"
    fileNameParameter="./imgName"
    fileReferenceParameter="./img"
    mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
    multiple="{Boolean}false"
    name="./file"
    required="{Boolean}true"
    title="image.title"
    uploadUrl="${suffix.path}"
    allowUpload="{Boolean}false"
    fieldLabel="Imagem"
    useHTML5="{Boolean}true"/>

Além de receber um parâmetro de nome na imagem (mas poderia ser no documento, no vídeo, qualquer asset), precisamos também receber um fileReferenceParameter para identificá-la.

mimeTypes : limita os tipos de arquivos que podem ser carregados
multiple : limita a quantidade
uploadUrl="${suffix.path}" : captura paths do AEM
allowUpload="{Boolean}false" : é uma recomendação Adobe que os arquivos sejam carregados através do DAM e não diretamente upadas do arquivo do computador. É ideal então é que deixemos esse campo como false, mas pode ser modificado caso necessário

📌 Colorfield

Seletor de cores em Hexa ou Rgb/a. O AEM gera cores padrões quando botamos showDefaultColors="{Boolean}true" e pode começar com um valor já pré estabelecido configurado em value="#000000".

<color
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
    fieldLabel="Selecione uma cor do texto"
    showDefaultColors="{Boolean}true"
    showProperties="{Boolean}true"
    showSwatches="{Boolean}true"
    autogenerateColors="off"
    value="#000000"
    name="./color"/>

📌 Richtext

O richtext dá mais opções de texto, permitindo alterações pré-estabelecidas no código, como negrito, itálico, links, caracteres especiais, quebras de texto, listagens, etc. O código abaixo é um modelo com opções diversas, mas existem outras configurações possíveis (aqui você pode encontrar algumas delas)

<text
        jcr:primaryType="nt:unstructured"
        sling:resourceType="cq/gui/components/authoring/dialog/richtext"
        fieldDescription="Insira o texto a ser exibido. Você pode adicionar modificadores de formato."
        fieldLabel="Texto"
        name="./text"
        useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <edit
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <format
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <subsuperscript
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <lists
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <paraformat
                jcr:primaryType="nt:unstructured"
                features="*">
            <formats jcr:primaryType="cq:WidgetCollection">
                <heading2
                        jcr:primaryType="nt:unstructured"
                        description="Heading 2"
                        tag="h2"/>
                <heading3
                        jcr:primaryType="nt:unstructured"
                        description="Heading 3"
                        tag="h3"/>
                <myparagraph
                        jcr:primaryType="nt:unstructured"
                        description="Paragraph"
                        tag="p"/>
            </formats>
        </paraformat>
        <links
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <misctools
                jcr:primaryType="nt:unstructured"
                features="*"/>
        <fullscreen
                jcr:primaryType="nt:unstructured"
                features="*"/>
        </rtePlugins>
        <uiSettings jcr:primaryType="nt:unstructured">
            <cui jcr:primaryType="nt:unstructured">
                <inline
                    jcr:primaryType="nt:unstructured"
                    toolbar="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,#paraformat,image#imageProps,#justify,#lists,links#modifylink,links#unlink,links#anchor,misctools#specialchars]">
                <popovers jcr:primaryType="nt:unstructured">
                    <lists
                            jcr:primaryType="nt:unstructured"
                            items="[lists#unordered,lists#ordered]"
                            ref="lists"/>
                    <paraformat
                            jcr:primaryType="nt:unstructured"
                            items="paraformat:getFormats:paraformat-pulldown"
                            ref="paraformat"/>
                </popovers>
            </inline>
        </cui>
    </uiSettings>
</text>

📌 NumberField

Este modelo de numberfield atribui um número mínimo e máximo (max="5" min="0") e um step, que faz com o que o author possa, além de digitar o número desejado, suba um a um utilizando as setas de controle. O Step pode ser em casas decimais e não necessariamente precisa de um mínimo ou máximo para esse campo, ele pode ser estruturado como for melhor.

<number
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
    fieldLabel="Avaliação"
    fieldDescription="A partir de 1 as estrelas de avaliação aparecem no componente. 0 ou nulo fazem com que a avaliação não apareça."
    max="5"
    min="0"
    name="./number"
    step="1"
    required="{Boolean}false"/>

📌 Multifield

Às vezes precisamos de múltiplos campos para que o author escolha a quantidade de componentes a serem inseridos. Isso pode acontecer com imagens em um carrossel, com cards de artigos ou até com listas de links.
É importante ressaltar que, quando temos um multifield, ele precisa ser primeiro chamado enquanto lista na classe Java principal com uma anotação @ChildResource e, depois, precisa de uma classe própria para que cada elemento tenha suas próprias propriedades. Esses detalhes não serão abordados neste artigo.

<cards
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
        fieldDescription="Clique em '+' para adicionar um novo card"
        fieldLabel="Cards"
        composite="{Boolean}true">
        <granite:data
                jcr:primaryType="nt:unstructured"
                min-item="1"
                max-item="10"/>
        <field
                granite:class="cmp-teaser__editor-action"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container"
                name="./cards">
            <items jcr:primaryType="nt:unstructured">
                <accordion
                        granite:class="js-cq-IPEPlugin-container"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/accordion"
                        variant="quiet">
                        <granite:data
                                jcr:primaryType="nt:unstructured"
                                accordion-title="./cardTitle"/>
                        <items jcr:primaryType="nt:unstructured">
                                <cardList
                                        jcr:primaryType="nt:unstructured"
                                        jcr:title="Card"
                                        sling:resourceType="granite/ui/components/coral/foundation/container"
                                        maximized="{Boolean}true">
                                        <items jcr:primaryType="nt:unstructured">
                                                <cardTitle
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                        fieldLabel="Título do card"
                                                        emptyText="Título"
                                                        name="./cardTitle"
                                                        required="{Boolean}true"/>
                                                <cardValue
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                                        fieldLabel="Preço"
                                                        required="{Boolean}true"
                                                        step="1"
                                                        name="./cardValue"/>
                                        </items>
                                </cardList>
                        </items>
                </accordion>
            </items>
        </field>
</cards>

<accordion/> : a tag accordion se refere aos elementos de dentro dessa lista. Nesse caso, temos um cardList que é abraçado pelo cards. O accordion é a retração das informações de cada um desses elementos. --> Logo abaixo do accordion temos uma tag que configura os nomes de cada menu retrátil com o cardTitle.
O cardList é um tipo de container que vai receber as informações de cada elemento, que nesse caso só tem título (textfield) e preço (numberfield), mas poderia ter quantos elementos fossem possíveis.

📌 Select

Podemos utilizar quantas opções forem necessárias em um selector e utilizando o seu value como parâmetro.

<selector
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="Seletor de opções"
        name="./selector">
        <items jcr:primaryType="nt:unstructured">
                <red
                        jcr:primaryType="nt:unstructured"
                        text="Vermelho"
                        value="red"/>
                <yellow
                        jcr:primaryType="nt:unstructured"
                        text="Amarelo"
                        value="yellow"/>
        </items>
</selector>

📌 Checkbox

Um checkbox pode ser usado para devolver um parâmetro booleano. O campo checked="" serve para delimitar se o campo por padrão deve vir marcado ou desmarcado.

<checkbox
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
  fieldDescription="Selecione caso seja verdadeiro"
  name="./checkbox"
  text="Adicionar layout escuro"
  uncheckedValue="false"
  checked="true"
  value="true"/>

📌 Radiogroup

Funciona como um seletor de opções, tal qual o selector.

<size
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
    fieldLabel="Selecione um tamanho de card"
    name="./size"
    vertical="{Boolean}true">
        <items jcr:primaryType="nt:unstructured">
            <small
                    jcr:primaryType="nt:unstructured"
                    checked="{Boolean}true"
                    text="Pequeno"
                    value="small"/>
            <medium
                    jcr:primaryType="nt:unstructured"
                    text="Médio"
                    value="medium"/>
            <large
                    jcr:primaryType="nt:unstructured"
                    text="Grande"
                    value="large"/>
        </items>
</size>

📌 Datepicker

O datepicker é útil como seletor de datas e pode incluir também horas e minutos. O formato é adaptável através da propriedade displayedFormat=""

<date
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
    displayedFormat="DD-MM-YYYY HH:mm"
    fieldLabel="Selecione uma data"
    name="./date"
    type="datetime"
    typeHint="Date"/>

📌 Pathbrowser & Pathfield

O Pathbrowser serve tanto para redirecionamentos internos quanto externos (como urls). Entretanto, a Adobe sugere que sempre busquemos imagens no próprio banco de dados do AEM (no DAM).
Neste caso o exemplo busca uma imagem, por isso o rootPath="" é indicando para o /content/dam. Este rootPath pode ser modificado conforme a necessidade.

<pathBrowser
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    fieldLabel="Selecione uma imagem"
    name="./pathBrowser"
    required="{Boolean}true"
    rootPath="/content/dam"/>

<pathField
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
    fieldLabel="Url or path"
    name="./pathField"
    required="{Boolean}false"
    rootPath="/content/dam"/>

Referências

Guia SEO para desenvolvedores 2022

Beatriz Maciel — Mon, 18 Jul 2022 01:05:38 +0000

O que é SEO?

O Search Engine Optimization (SEO) significa, em tradução livre, "otimização do motor de busca" e tem como objetivo rankear websites nas pesquisas de sites como Google, Bing e Yahoo. É claro que hoje em dia focamos nossos esforços na pesquisa do Google, que tem sido a mais forte ferramenta de pesquisa online, mas as práticas de SEO são úteis para além dele.

Os sites de busca têm robôs que são configurados para ler as páginas da web, identificando se o conteúdo que está ali é interessante para o usuário que faz a pesquisa. Ao entendermos como esses robôs funcionam, podemos deixar nosso site em evidência

📌 HTML5

Existe muito conteúdo sobre SEO, mas no desenvolvimento vamos focar na estrutura HTML e, mais especificamente, nas convenções estabelecidas no HTML5 e as tags que ele introduziu. No geral, um(a) programador(a) trabalha em conjunto quando pensamos em boas práticas de SEO e existem especialistas no assunto. Entretanto, em algumas situações podemos ter que fazer não só a parte de desenvolvimento como também de rankeamento do site. Para isso deixarei algumas referências no final do texto que são mais teóricas e conceituais. O foco aqui é entendermos a hierarquia e a relevância da programação nesse processo.

📌 URL

Outro detalhe importante para o rankeamento são as URLs amigáveis, ou seja, URLs que sejam facilmente legíveis pelos usuários. Evite usar códigos, números, letras e caracteres especiais e tente usar mais nomes separados por hífens e barras.

Exemplo:

http://www.meusite.com/produtos/perfumes

E evite coisas como:

http://www.meusite.com/conteudo/produtos/uh6Djvf81/perfumes_0232

As URLs também devem ter menos de 115 caracteres, mas quanto menor, melhor.

📌 Crawling

Crawling é o mapeamento que os robôs fazem em um website. Para guiar a facilitar o trabalho desses robôs existem dois tipos de arquivos importantes:

Robots.txt

O robots.txt funciona como um arquivo de instruções para os robôs de motores de busca. Se o seu site tem poucas páginas não é necessário mexer necessariamente nesse arquivo. Aqui dizemos mais quais são as páginas que não queremos que os robôs façam a varredura.

Um exemplo da sintaxe utilizada no arquivo é a seguinte:

User-agent: Googlebot-news
Allow: /

User-agent: *
Disallow: /

Aqui estamos permitindo que apenas o Googlebot mapeie o que está depois da barra (/) e estamos desautorizando os outros user-agents (outros robôs) a mapearam o que está depois da barra (/). Quando utilizamos o asterisco ( * ) queremos dizer todos. Para saber mais sobre a sintaxe do robots.txt, clique aqui.

Sitemap.xml

Como escrito no nome, este arquivo serve como Mapa do Site. Nele você deve listar as páginas do seu site que você quer que o site de buscas rastreie, guiando-o para seus conteúdos e páginas.
É importante ressaltar, entretanto, que é "mais importante ter um site facilmente rastreável pelos robôs do que usar o sitemap.xml para contornar falhas na arquitetura do site" (SEOMarketing).
Podemos inserir até 50.000 URLs no arquivo sitemap.xml, sendo recomendação do próprio Google. O arquivo também pode ser criado de forma manual ou através de ferramentas.
Um exemplo da sintaxe do sitemap.xml é a seguinte:

<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.seusite.com.br</loc>
      <lastmod>22-07-11</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.9</priority>
   </url>
</urlset>

Para saber mais sobre o sitemap.xml, acesse este arquivo completo do SEOMarketing.

📌 Favicon

É bastante nítido, neste ponto do artigo, que SEO tem tudo a ver com a experiência do usuário e em como o usuário pode navegar de forma mais confortável e intuitiva pelo nosso website. Neste sentido, um favicon é muito importante, porque deixa claro em qual aba está o seu website.
Para adicionar um favicon lembre-se de seguir a seguinte semântica:

<link rel="shortcut icon" type="image/ico" href="http://meusite/favicon.png">

O rel="" serve para acessibilidade enquanto o type="" serve para mostrar qual é o tipo de conteúdo que será anexado.

📌 Velocidade e carregamento

Uma das coisas que elencam negativamente um website é a velocidade de carregamento. No Google Chrome podemos fazer uma varredura simples e eficiente ao inspecionarmos um site, através da aba Lighthouse.

Ao apertar no botão "Analyze Page Load", o navegador gera um relatório do carregamento do site.

Como pode ser visto neste exemplo, a versão mobile do site do Google tem nota 60 de performance, 80 de acessibilidade, 100 de boas práticas e 85 de SEO. Se passarmos a barra de rolagem perceberemos que o Lighthouse detalha quais pontos estão bons e quais podem ser melhorados. Podemos salvar isso num pdf ou em formato json para analisar de forma minuciosa o que pode ser melhorado no nosso site. Saiba mais sobre como interpretar o relatório do Lighthouse aqui.

Imagens

O tópico de imagens aparece neste artigo dentro da seção de Tags e dentro da seção de Velocidade e Carregamento porque de fato é um elemento essencial na qualidade do SEO. Já falamos sobre a semântica das imagens ao introduzí-las no HTML, mas devemos falar também sobre o seu tamanho.
Uma das coisas que mais pesa o carregamento de um site é o tamanho das imagens e é muito importante carregar imagens o mais leves possíveis para as devidas finalidades. Se a imagem ocupa a tela inteira, se ocupa um tamanho de 200x200 pixels, tudo precisa ser levado em consideração para que nosso site não fique mais pesado do que o necessário.
O squoosh.app e o compressjpeg.com são ótimas opçãos para comprimir imagens. É importante salientar também que mobile e desktop precisam ter imagens de tamanhos diferentes, porque têm necessidades diferentes. Dica de ouro: use jpeg para imagens sem transparência, png para com transparência e SVGs para ícones, sempre que for possível. Demarque com clareza o que é ícone e o que é imagem, porque essa diferenciação é uma das que mais conta pontos no SEO dos robôs de motor de busca.

📌 Server Side Rendering (SSR)

O Server Side Rendering (SSR) é a habilidade de renderização de uma página através do servidor ao invés do browser. É o oposto the Client Side Rendering, que carrega a aplicação do lado do cliente, ou seja, no navegador do usuário.
Geralmente os frameworks the usamos, tais como o React.js e o Angular, são renderizados do lado do usuário e isso pode fazer com que o carregamento do site seja mais lento. Para lidar com esse problema podemos fazer a implementação do Next.js (no caso do React.js) e o Angular Universal (no caso de Angular). No geral, existem prós e contras em utilizarmos SSR ou CSR, mas quando estamos falando de SEO geralmente a indicação é que carreguemos a página do lado do servidor e não no do cliente.
Entretanto, recentemente parece que os crawlers (os robôs que fazem as varreduras dos motores de busca) estão aceitando e lendo JavaScript com mais facilidade, até porque as aplicações que usam frameworks como React, Angular e Vue estão cada vez mais populares.


Imagem retirada do canal Duomly

No Server Side Rendering, em ordem:

O usuário faz requisições para o website
O servidor cria arquivos HTML prontos
O navegador renderiza o HTML de forma não interativa
O navegador faz o download do JavaScript
O navegador executa o JavaScript
O website fica interativo


Imagem retirada do canal Duomly

No Cliente Side Rendering, em ordem:

O usuário faz requisições para o website
O servidor envia o arquivo HTML com os links JavaScript
O navegador faz o download do HTML
O navegador faz o download do CSS e do JavaScript
O navegador executa o framework ou a biblioteca
O navegador carrega o website

🎯 Conclusões

Em síntese, vimos neste artigo quais práticas um(a) desenvolvedor(a) deve seguir para melhorar as métricas de SEO. Muitas das coisas descritas aqui são também boas práticas para o cotidiano, como o taggeamento correto no HTML5, o uso de imagens no tamanho ideal e o cuidado no encurtamento das URLs. Pensar no SEO é também pensar em usabilidade e acessibilidade, além de desenvolver habilidades a fim de facilitar a navegação e os objetivos dos usuários.
Muitos dos assuntos tratados neste artigo foram feitos de forma superficial, então te convido a conferir o material de referência especificado abaixo. Aqui você encontrará uma curadoria no assunto de SEO para desenvolvedores em diversos âmbitos, se tornando um(a) programador(a) melhor e mais capacitado(a).

Referências

Git para iniciantes 🇧🇷

Beatriz Maciel — Fri, 01 Jul 2022 21:01:25 +0000

O que é o Git?

É um sistema de versionamento de controle para rastrear mudanças em arquivos do computador coordenando o trabalho feito nestes arquivos entre uma ou múltiplas pessoas.

Download

Baixar o Git é fácil! Basta entrar em git-scm.com, baixar a última versão e seguir os passos para a instalação. Bem intuitivo.

Configuração

A primeira coisa que devemos fazer é configurar nosso git. Se você tem dúvidas, use o seguinte comando:

git help

Usando esse comando você encontra uma série de utilizações do git. Para começar, vamos colocar nosso nome de usuário (o que vai aparecer quando publicarmos uma versão de código) e nosso e-mail, que ajuda na identificação e nas permissões.

git config --global user.name "Nina Silva"

git config --global user.email "nina@learning-git.com"

Nesse caso usamos "--global" para que a identificação seja global (em todo o sistema), mas podemos também definir identificações para repositórios específicos, substituindo o --global por --local, dessa forma:

git config --local user.name "Grace Hooper"

Comandos

✏️ Inicializando um repositório

git init

Para inicializar do zero.

git clone

Para clonar algum repositório. É preciso especificar qual repositório será clonado depois da palavra "clone"

✏️ Puxando atualizações de um repositório

Muitas vezes, quando estamos compartilhando código com outras pessoas, é importante "puxar" todas as atualizações feitas remotamente para o nosso local. Para isso utilizamos o seguinte comando:

git pull

Pull em inglês é "puxar", não se confunda! 😉

✏️ Fazendo atualizações

Agora chegou a hora de entregarmos nossas modificações para o repositório remoto. Geralmente quando trabalhamos em equipe trabalhamos em branches, que significa ramos ou ramificações. Geralmente um repositório tem um branch master, que concentra todo o código que já foi revisado e está correto, enquanto os desenvolvedores trabalham em branches separadamente.
Quando fazemos um clone de um repositório e atualizamos ele (pull), ficamos geralmente na branch master. Para fazermos uma ramificação, que será nosso ambiente de trabalho, usamos o seguinte comando:

git checkout -b minha-branch

O git checkout serve para sairmos de uma branch e entrarmos em outra, mas quando utilizamos o comando -b criamos uma nova branch! Nesse caso o nome da branch é "minha-branch", mas poderia ser "bananinha", "componente-banner" ou qualquer outra coisa.

❗ Importante! Usamos um padrão para criarmos novas branches. Geralmente usamos feature/ , bug/ ou hotfix/ antes do nome da nossa branch e esses acordos precisam ser feitos a priori com o time. Cada equipe se organiza de uma forma diferente, mas tenha em mente que quando criamos um novo componente ou versão usamos feature/minha-branch. Se estamos consertando um bug, bug/minha-branch e se é um hot fix, ou seja, uma melhoria urgente, usamos hotfix/minha-branch.

Depois de criarmos nossa branch vamos fazer as modificações necessárias em cada arquivo. Uma vez que terminamos de fazer as atualizações podemos adicionar nossa nova versão de código na nossa branch. Para isso, abrimos o terminal git bash e conferimos quais arquivos foram modificados com o seguinte comando:

git status

O git status nos ajuda a ver arquivos que foram mapeados pelo git. Nesse caso vamos adicioná-los usando o seguinte comando:

git add "nome do arquivo"

Ao usarmos o git status depois de adicionar um arquivo, vemos que sua cor muda de vermelho para verde e isso significa que as mudanças estão prontas para serem atualizadas. Para criar uma versão desse arquivo usamos o comando:

git commit -m "escreva uma mensagem aqui"

É importante escrevermos uma mensagem descrevendo o que fizemos na alteração do código. Precisamos ser sucintos e objetivos, porque se for preciso um dia voltar a esse commit sabemos exatamente o que foi feito. Exemplos de mensagens de commits: "criando os estilos do componente", "atualizando o serviço de mensageria", "adicionando versão mobile", "passando testes unitários" e por aí vai.
Uma coisa muito legal de usar nas mensagens de commits é o gitmoji.dev! Ele deixa os commits mais visuais!

Depois de ter feito o commit das suas modificações (não economize nos commits! Faça sempre que achar necessário) é preciso "empurrar" essas modificações para a sua branch (sim, ainda estamos trabalhando na nossa branch: minha-branch). Para isso usamos o seguinte comando:

git push origin minha-branch

É importante usarmos o origin antes da nossa branch, porque algumas vezes vamos trabalhar com branches de mesmo nome, sendo uma em cloud e outra a origin. É bom se acostumar a sempre especificar qual branch você quer puxar ou empurrar conteúdos.

✏️ Conferindo as mudanças

Pronto! Agora suas atualizações podem ser acessadas por qualquer desenvolvedor. Para verificarmos se o nosso commit foi realmente efetuado usamos o seguinte comando:

git log

O git log nos ajuda a ver todo o histórico de commits da branch, desde o seu "nascimento" na master. Também podemos ver os commits em outras plataformas, como Github, o Gitlab e o Bitbucket, mas quando não tivermos essas plataformas para nos ajudarmos é bom usar o git log e conferir se está tudo certinho.

✏️ Mesclando branches

Trabalho concluído e agora é hora de fazer o merge da sua branch na branch master! O merge é quando mesclamos uma branch na outra, levando todas as nossas atualizações para outra branch.

❗ Importante! Fazer o merge com outra branch pode ser um pouco complicado nas primeiras vezes, então é importante avisar os colegas que você fará esse movimento. Muitas vezes também precisamos resolver conflitos entre a nossa branch e a branch master (ou qualquer outra branch que vamos mesclar). É preciso ficar atento para não deixar bugs e erros passarem nesse momento. Faça tudo com orientação das primeiras vezes

Vamos pensar numa situação imaginária: pense que você quer levar todas as atualizações da minha-branch para a branch master. Para fazer isso nós vamos fazer git checkout master, onde vamos mudar para a branch master. Depois disso, rodaremos o seguinte comando:

git merge minha-branch

Dessa forma estaremos mesclando a nossa branch (minha-branch) dentro da branch master e teremos todas as atualizações!

✏️ Salvando alterações sem fazer commit

Agora que já entendemos o que são commits e sabemos que temos um histórico deles quando rodamos o comando git log, surge uma nova dúvida: o que fazer quando estamos trabalhando em uma atualização, mas ainda não terminamos e precisamos resolver algo em outra branch rapidamente? Se você já foi interrompido(a) fazendo alterações em uma branch sabe que o git não permite que mudemos de uma branch para outro com atualização "a commitar", ou seja, pendentes.
Para que nós não perdamos essas modificações, podemos usar o seguinte comando:

git stash

O git stash serve para salvarmos em uma fração da memória do computador nossas alterações sem commitar elas. Esse comando é bem útil quando estamos escrevendo algo que ainda não traz nenhum benefício para o nosso código, mas não queremos perder o que começamos. Para aplicar o que estava em stash usamos o comando git stash apply. Também é possível listar quantos stashs foram feitos através do git stash list ou limpar os stashs com git stash clear.

✨

Este treinamento de Git foi feito para o evento da FIEC em parceria com a Vilt. O intuito é aprender comandos básicos de versionamento de código, utilizados no dia a dia de um(a) programador(a).
O repositório oficial, de mesma autoria, pode ser encontrado aqui

HackerRank #30 | Map | 🇧🇷

Beatriz Maciel — Sat, 30 Apr 2022 14:32:38 +0000

Este problema pede para que, a partir de uma lista telefônica, seja inserido um número e retorne a mesma quantidade de contatos relativo à esse número.

O código começa assim:

//Complete this code or write your own from scratch
import java.util.*;
import java.io.*;

class Solution{
    public static void main(String []argh)
    {
        Scanner in = new Scanner(System.in);
        int n=in.nextInt();
        in.nextLine();
        for(int i=0;i<n;i++)
        {
            String name=in.nextLine();
            int phone=in.nextInt();
            in.nextLine();
        }
        while(in.hasNext())
        {
            String s=in.nextLine();
        }
    }
}

=========

O resultado final é:

package com.possible.map;

import java.util.*;
import java.io.*;

public class Solution {
    public static void main(String[] args) throws FileNotFoundException {
        Scanner in = new Scanner(new File("input.txt"));
        int n = in.nextInt(); // quantidade de contatos que vc quer
        in.nextLine();
        HashMap<String,Integer> listaTelefonica = new HashMap<>();

        for (int i = 0; i < n; i++) {
            String name = in.nextLine(); // pega o nome
            int phone = in.nextInt(); // pega o telefone
            listaTelefonica.put(name, phone);
            in.nextLine();
        }

        while (in.hasNext()) {
            String s = in.nextLine();
            if(listaTelefonica.containsKey(s)) // se existir
                System.out.println(s + "=" + listaTelefonica.get(s));
            else
                System.out.println("Not found");
        }
    }
}

=========

Referências

Map : Oracle
HashMap : Oracle
Map : DevMedia

HackerRank #40 | Java Dequeue | 🇧🇷

Beatriz Maciel — Mon, 22 Nov 2021 20:35:53 +0000

Esse exercício recebe dois inputs iniciais: um integer N, relativo à quantidade de números em um array, e um integer M, relativo a um subarray deslocável que fará a "varredura" dentro do array principal.

N = quantidade de números do array
M = tamanho do subarray que varrerá o array principal

Dessa forma, os arrays estruturados com M = 3 serão:

[5, 3, 5]
. . . [3, 5, 2]
. . . . . [5, 2, 3]
. . . . . . . [2, 3, 2]

Como todos os subarrays precisam ter M números, nesse caso esses serão os subarrays possíveis.

Depois disso, precisamos que o programa contabilize qual é o máximo de números únicos existentes em um subarray de tamanho M.

[5, 3, 5] = 2 números únicos
[3, 5, 2] = 3 números únicos
[5, 2, 3] = 3 números únicos
[2, 3, 2] = 2 números únicos

Sendo assim, o máximo de números únicos em um subarray será 3. Esse precisa ser o output.

Vamos para a solução, dividida em partes:

Primeiro declaramos um Array de Integers de nome deque.
Declaramos também um Hashset de Integers de nome hashset. Lembrando que um Hashset não repete números, e isso vai ser útil para que possamos contabilizar números únicos.
Depois escaneamos os ints N, M e maxUniqueIntegers (nossa resposta final)
Dentro de uma iteração, pegaremos, através de um input, os números do array. Lembrando: a quantidade de números do array é delimitada por N, mas será inserida pelo usuário.
Vamos adicionar todos os números do input no Array deque e no Hashset hashset através do .add
Faremos uma condicional que diz que nosso Array deque, tendo o mesmo tamanho de M, fará com que o hashset receba o maxUniqueIntegers para ir contabilizando as entradas de números únicos. Como o hashset só permite números únicos, o maxUniqueIntegers também só receberá a quantidade de números únicos.
Depois, declararemos uma variável firstQueueNumber que fará a remoção do primeiro número do nosso array deque. A propriedade .remove sempre remove o primeiro elemento, ou o elemento que tem a menor posição i (leia mais sobre isso nas referências)
Por fim, imprimimos o maxUniqueNumbers, com a quantidade de números únicos.

O código final fica assim:

    public static void main(String[] args) {
        Scanner in = new Scanner(System.in);
        Deque<Integer> deque = new ArrayDeque<>();
        HashSet<Integer> hashset = new HashSet<>();

        int n = in.nextInt();
        int m = in.nextInt();
        int maxUniqueIntegers = 0;

        for (int i = 0; i < n; i++) {
            int num = in.nextInt();

            deque.add(num);
            hashset.add(num);

            if (deque.size() == m) {
                if (hashset.size() > maxUniqueIntegers) {
                    maxUniqueIntegers = hashset.size();
                }
                int firstQueueNumber = deque.remove();
                if (!deque.contains(firstQueueNumber)) {
                    hashset.remove(firstQueueNumber);
                } 
            }
        }

        System.out.println(maxUniqueIntegers);
    }
}

=======

Referências:

ArrayList : Oracle

============

Essa publicação faz parte de uma série de exercícios resolvidos em Java no HackerRank. Acesse a série completa:

Desenvolvendo um SPA editável no AEM

Beatriz Maciel — Thu, 04 Nov 2021 12:39:36 +0000

SPA: Technical Overview of SPA (Single Page App) Editor

Editor AEM SPA

O Editor do AEM SPA permite que os desenvolvedores front-end a criar SPAs que podem ser integrados em um site AEM, permitindo que os autores de conteúdo a editar o conteúdo SPA tão facilmente quanto qualquer outro conteúdo AEM.

Com o Editor SPA, autores podem fazer:

Edição de conteúdo in-context pelo AEM
Configuração in-context dos componentes do lado do cliente
Administração de layout (grid-based) in-context dos componentes do lado do cliente
Composição in-context com os componentes do lado do cliente
Criação/edição de template in-context para estados de app

SPA: Using aem-clientlib-generator

O aem-clientlib-generator é um node plugin que transforma CSS compilado e arquivos JS do seu SPA em uma AEM Client Library
Precisa do clientlib.config.js, que define parâmetros como: -- Source path dos arquivos .css e .js -- Export path -- Categorias da clientlibrary

SPA: Fazendo o Deploy de um Project no AEM

É necessário criar uma tag que inclua o react em um arquivo pom.xml na pasta do react-app.

Templates in SPA

Você pode criar templates para o SPA usando o Template Editor, que define os componentes permitidos e as policies (regras) de conteúdo
O primeiro lançamento do editor SPA tem funcionalidades de edição de template limitadas
A funcionalidade de edição completa é esperada para futuros lançamentos do SPA Editor

Criando Page Components

Como os Page Components trabalham:

Um page component no AEM não dispõe de elementos HTML de seus componentes "filhos" (child components)
Um Sling Model busca a representação dos componentes filhos no formato de JSON na estrutura de dados
O app React adiciona componentes SPA para a página AEM de acordo com o modelo JSON disponibilizado
A Client Library chamada cq.authoring.pagemodel.messaging deve ser adicionada para permitir a comunicação entre o SPA e o editor de página
O PageModelManager permite administrar a representação do modelo das páginas AEM que compõem o SPA

Criando uma Página Editável

Workflow de Editor de Página

cq.authoring.pagemodel.messaging manda uma mensagem para o Page Editor para estabelecer uma comunicação com o JSON data type.
Quando a comunicação do data type está pronta no JSON, as requisições GET (GET requests) vão se comunicar com os end-points do Sling Model de um componente.
Depois que a atualização acontece no Page Editor, a representação do JSON do componente atualizado é mandada para o Page Model library.

Componentes no SPA Editor

A funcionalidade dos componentes AEM é dividida no cq:component no AEM e no componente React respectivo
Um componente em um projeto AEM, ou cq:component, disponibiliza funcionalidades como arrastar e soltar uma dialog para o componente AEM
O componente definido no React-app disponibiliza funcionalidades para o componente
O componente React mapeia o cq:component ou o resourceType no AEM através da função MapTo()
Os core components sustentaram o export do JSON desde o lançamento 1.1.0
A interface do component model deve implementar uma classe ComponentExporter
Isso garante que seu componente pode ser exportado por conta própria, usando o seletor .model e a extensão .json.

SPA Routing in AEM

A página model data structure expõe a URL do recurso subjacente (underlying resource)
A página model data structure expõe a URL de todas as páginas "filhas" subjugadas ao nodo JSON

Desenvolvimento Back-end em AEM - Parte II

Beatriz Maciel — Fri, 29 Oct 2021 16:12:18 +0000

Back-end Coding Practices

Escrevendo Sling Servlets

Arquitetura orientada à objetos

Tudo é um recurso

Pedaços de informação, novas entradas, descrições de produtos, fotos e outros
Recursos são identificados por suas URLs únicas

Stateless

A requisição para um recurso contém toda a informação relevante

Interação restrita com os recursos

Eles usam métodos HTTP (GET, POST) para operações

Sling Servlets

O Sling Servlet API extende o HTTPServelet class. Ele define uma execução adicional de path (caminho) com a ajuda do Apache Sling Servlet/Script Resolver e Error Handler. O diretório default do Servlet Execution é o /bin.

Aqui estão algumas instâncias que você pode evitar usando o @slingServlet:

Use @Component (service = Servlet.class)
Evite @Component (service = Servlet.class,property={"sling.servlet.paths=/bin/servletdata"})
Use o atributo resourceType para conectar o Sling Servlets a um componente e.g. @Component (service = Servlet.class, property = {"sling.servlet.resourceTypes=project/components/component"})

Configuring the LoginService

O LoginService não trabalha junto com o usuário admin padrão. Para que ele trabalhe, é necessário:

Criar um usuário do sistema

-- O username não é importante; pode ser qualquer coisa

-- A única forma de criar um usuário do sistema é pelo explorar do CRX usando o System User

-- Depois que você criar o usuário, os detalhes aparecem no Adobe Experience Manager Users and Groups
Garanta que você deu TODAS as permissões ao novo usuário do sistema

Event Admin

Especificação OSGi para lidar com o event:

Publish/Subscribe baseado nos tópicos de hierarquia

Acoplamento frágil de serviços

Whiteboard pattern (padrão de quadro branco), onde um ouvinte registra a si mesmo no registro de serviços como comparado a um Listener Pattern (por exemplo, no AWT), onde um ouviten registra a si mesmo em um assunto de event-generating (WHAT?!)

Eventos pré-definidos

Eventos de framework
Eventos de configuração

Receiving Events

Implementando a interface EventHandler

Se inscrever no registro de serviço

Whiteboard pattern (quadro branco padrão?!)

Seleção do Evento com as propriedades do serviço


@Component( 
Immediate = true, 
service = EventHandler.class, 
property = { 
EventConstantsEVENT_FILTER+"=(path=/content/*)", 
// …. 
})

Use Java Content Repository Observation

Existem 3 tipos diferentes de interpretações de eventos:

NODE_ADDED
NODE_REMOVED
NODE_MOVED
PROPERTY_ADDED
PROPERTY_REMOVED
PROPERTY_CHANGED

Listener Registration

O Listernet Registration acontece quando o objeto ObservationManager chama o addEventListener

Ele é especificado por um path para o novo onde os eventos devem ser recebidos
Ele especifica quando eventos são profundamente ou superficialmente recebidos (whole subtree)
Ele pode escolher receber eventos para nodos de um certo tipo ao invés de um path

Sling Events vs JCR Observation Listeners

Os tópicos de evento Sling usados no nível CQ5 (CQ5-level) incluem Replication e PageEvents. Por exemplo:

com.day.cq.wcm.api.PageEvent
com.day.cq.replication.ReplicationAction

Observation Listeners tem eventos mais sofisticados.

Sling Models

Aqui o que os Slings Models fazem:

Eles disponibilizam o framework para desenvolvimento
Eles deixam você usar orientado por anotações. Objetos Java simples e antigos (POJOs)
Eles são adaptáveis para vários objetos, incluindo Recursos e SlingServletRequest.
Anotações em Sling models asseguram os inputs
Fora da caixa, Sling models trabalham com:

-- Sling bindings

-- Serviços OSGi

-- Atributos de requisição

Sling Model Enhancements

Sobre o Sling Dynamic Include:

Substitui componentes gerados dinamicamente com tag inclusivas no server-side
É instalado através de um bundle OSGi
Pode trabalhar com CDNs para performar Edge-Side Include

Você não precisa modificar os componentes para usar esse módulo

Sling Model Exporter

O framework Sling Model Exporter te permite adicionar novas anotações nos Sling Models
A anotação @Exporter define como o Model pode ser exportado como um objeto Java diferente ou, mais usualmente, serializado em um formato diferente, como o JSON.
O Apache Slings disponibiliza um Jackson JSON exporter para cobrir os casos mais comuns, exportando os Sling Models como objetos JSON.
O Sling Model Exporter é perfeito para aproveitar Sling Models que já contém lógica de negócio que suportam renderizações HTML através do HTL

Sling Model Exporter

O Sling Model Exporter suporta passar por opções per-model Exporter para a implementação Exporter. Isso leva à como o Sling Model e finalmente exportado.
Opções per-model Exporter geralmente são aplicadas globalmente para como o Sling Model é exportado. Considerando que para cada data point podem ser aplicadas anotações inline do tipo:

-- Opções Jackson Exporter incluem:
```
> Opções Mapper Feature 

> Opções Serialization Feature
```

Usando Workflows

Modelos de workflow no AEM representam e implementam processos de negócios

Modelos de workflow atuam nas páginas ou assets para alcançar um resultado específico - essas páginas ou assets são conhecidas como workflows payload.
Os modelos de workflows incluem uma séria de passos que performam tarefas específicas
O Workflow payload passa por cada passo enquanto o workflow progride.

Uma instância do workflow é criada e está em andamento.

O primeiro passo do workflow model é executado
A engenharia do workflow usa o modelo para determinar o próximo passo para executar
Os passos subsequentes no workflow são executados
A instância do workflow termina e é arquivada

Passos do workflow

Quando os passos do workflow são executados eles são associados a uma instância do workflow. A história de uma instância do workflow inclui informação sobre cada passo que foi executado para a instância. Essa informação é útil para investigar problemas que ocorrem durante a execução.

Tanto um usuário quanto um serviço podem fazer os passos do workflow, dependendo do tipo de passo:

Quando um usuário faz um passo, ele se responsabiliza por um item de trabalho que fica localizado no seu Inbox. O usuário é responsável por completar manualmente o passo para que a instância do workflow progrida.
Quando um serviço faz um passo e completa uma instância do workflow isso faz com que o próximo passo progrida automaticamente.

Modificando Usuários e Grupos

Aspectos básicos do Access Control (Acesso de Controle)

O Access Control acontece em um nível de repositório

Permite que usuários e grupos sejam arquivados no repositório
Permite que permissões sejam arquivadas como nodos.
Oferece direitos de acesso de acordo com a Autenticação Java e Autorização de de Serviço (JAAS)

O Access Control consiste em:

Principals: uma conta de usuário ou de grupo
Subjects: os direitos atribuídos a um usuário ou grupo
Controle de Acesso e Autorização

Evaluation of a Subject

Evaluation é um processo de comparar as permissões do sujeito com aquelas necessárias para acessar um recurso.
Enquanto estamos avaliando, Oak olha para o ancestral mais próximo, permitindo ou negando uma ação e indo nesta decisão

Usando APIs Autorizáveis

Os três tipos de APIs autorizáveis são:

UserManager API:

-- Te permite acesso e mantém objetos autorizáveis como Users e Groups
-- Está atrelado a uma sessão particular de um usuário
Principal API

-- Representa a noção abstrata de um principal que pode ser usado para representar qualquer entidade, como um indivíduo, uma coorporação, ou um id de login
User interface

-- É uma API autorizável que pode ser autenticada (usando credenciais) e despersonalizada.

========

Questões Finais

Back-End Coding Practices

1 – O que ajuda a inicializar o observationManager object?
Session.getWorkspace().getObervationManager()

2 – Qual das opções são acessos a objetos do Java Content Repository?
Repository e Session

3 – O que acontece quando você faz um "deploy a servlet on a path"?
Ele sobrescreve os parâmetros existentes.

4 – Qual a forma que o sling models recupera as informações que mudou nessa versão do AEM?
Ele agora usa o "exporter framework"

5 – Qual o caminho das pastas dos arquivos JUnits?
Src/test folder

6 – Complete a lacuna:
To download Java docs and source files, you run the _______ command.
Mvn eclipse:eclipse

7 – Como você pode criar um system user?
No CRX explorer usando system user.

8 – O que voce precisa recupar para enviar um trabalho para o servidor?
Job manager interface

9 – Qual é a função de usar o Sling scheduler?
Ele permite fácil marcação (scheduling) do trabalho dentro da sua aplicação.

10 – Como você substitui os componentes gerados dinamicamente por tags de inclusão do lado do servidor?
Usando Sling Dynamic Include

11 – Complete a lacuna:
Sling resources map to the ______.
JCR node.
Back-end Advanced Features

Back-end Advanced Features

1 – O que são Workflow payloads?
Páginas ou recursos nos quais os fluxos de trabalho atuam.

2 – Complete a lacuna:
Access control happens on a ________ level.
Repository

3 – Access Control List (ACL) são armazenados em grupos de usuários autorizáveis.
False

4 – Qual API autorizavel providencia o acesso e mantém o User e Groups?
UserManager API

5 - Criar muitos launchers fará com que o processo de avaliação seja executado mais lentamente
Verdadeiro

6 – Complete a lacuna:
Workflow models in AEM represent and implement ______________.
Business processes

7 - Onde você pode encontrar informações que o ajudarão a investigar problemas que acontecem durante a execução de um
No historico do Workflow instance

Desenvolvimento Back-end em AEM - Parte I

Beatriz Maciel — Thu, 28 Oct 2021 13:40:18 +0000

O nome original dessa aula é: Back-end Development for Developer

Eclipse

Installing and Configuring Eclipse

Sobre o Maven:

Simplifica e disponibiliza processos uniformes
Faz uso do project object model (POM) -- O pom.xml define a informação do projeto, constrói um ambiente de configurações e relacionamentos -- O Maven Archetypes/Lazybones é um template de projeto

Ferramentas AEM para o Eclipse

O AEM Developer Tools para o Eclipse é um plug-in baseado no Apache Sling lançado pela licença 2 do Apache. Ele oferece várias features que podem fazer o desenvolvimento AEM mais simples:

Integração desacoplada com as instâncias AEM através do Eclipse Server Connector
Sincronização para ambos os conteúdos e OSGI bundles
Suporte de debbug com capacidade de código hot-swapping
Bootstrap simples de projetos AEM através de um Projeto Creation Wizard específico
Fácil edição de propriedades do Java Content Repository (JCR)

Use Pacotes e Run Modes customizados

Usando FileVault (VLT)

O FileVault tool (VLT) é uma ferramenta desenvolvida pela Adobe que mapeia o conteúdo de uma instância CRX/CQ para um arquivo de programa
O VLT tool tem funcionalidades similiares àquelas do source control system do cliente
O FileVault disponibiliza check-in normal, checkout e administração de operações, além de opções de configuração para representação flexível do conteúdo do projeto
FileVault está localizada no diretório ../crx-quickstart/opt/helpers

Usando Pacotes

Um pacote (package) é um arquivo zip que guarda conteúdo de repositório no formato de uma serialização file-system (também conhecida como serialização vault). Isso possibilita uma utilização facilitada e a representação editável de arquivos e pastas.
Packages incluem conteúdo, conteúdo de ambas as páginas e conteúdo relacionado ao projeto, selecionado usando filtros.
Packages também contém meta informação vault, incluindo as definições de filtro e a importação de informações de configuração. As propriedades adicionais de conteúdo (que não são usadas para a extração do package) podem ser incluídas no package, como descrição, uma imagem visual ou um ícone. Essas propriedades são somente para o consumidor de conteúdos do pacote e têm apenas o objetivo de informar.

Packages te permitem importar e exportar o conteúdo de um repositório. Por exemplo, você pode usar packages para instalar uma nova funcionalidade, transferir conteúdo entre as instâncias e fazer o backup de conteúdo do repositório.

Você pode acessar ou mantem packages a partir das seguintes páginas:

Package Manager, o qual você usa para administrar os pacotes na sua instância AEM local
Package Share, um servidor centralizado que contém tanto pacotes de publicidade disponível quanto os pacotes privados da sua empresa – os pacotes públicos podem conter hotfixes, novas funcionalidades, documentação e outros

Você pode transferir packages entre o Package Manager, Package Share e o seu sistema de arquivos

Passo a passo:

Tools > Deployment > Packages
Create Package > nomear
Edit > escolher os diretórios que esse package se aplica > clicar no link de download
Upload package > Force upload (se for duplicado) > Install

Use Custom Run Modes

Run modes te permitem equalizar a instância AEM para um propósito específico. Você pode usar para autorar ou publicar, testar, desenvolver ou usar a intranet
Você pode: -- Definir coleções de parâmetros de configuração para cada run mode (um set básico de parâmetros de configurações é aplicado para todos os run modes e você pode equalizar sets adicionais para alcançar o propósito do seu ambiente específico) -- Definir bundles adicionais para serem instalados para um modo particular
Todas as configurações e definições são guardadas em um repositório e ativadas quando configuramos o run mode.

=======

Questões Finais

Eclipse

1 – Para importar o projeto lazubones para o servidor AEM você pode rodar Mavens diferentes do prompt de comando ou adicionar um novo servidos e performar o deploy do código.
Verdadeiro

2 – O template lazybones te permite usar o bootstrap no projeto AEM com uma estrutura apropriada.
Verdadeiro

3 – Qual é a sequência correta para preparar o ambiente de desenvolvimento?
AEM login > ir para a janela do terminal > entrar o comando > gerar os arquivos de projeto do Eclipse > Ir para File > Selecionar Import no menu > Procurar > Terminar

4 – Qual arquivo te permite iniciar o servidor AEM?
.bat

5 – Qual das opção são verdadeiras no que diz respeito ao Maven projects?
Maven simplifica e fornece um processo de buid uniforme;
Maven faz uso do Project Object Model (POM).

6 – Qual a sequencia correta para criar um projeto Maven?
File > New > Project > Select a project > next > select an archetype > generate a project using command line

Use Packages and Custom Run Modes

1 – Qual é a função do filter.xml?
Controlar o conteúdo upado para o servidor AEM pelo FileVault tool

2 - Você pode acessar o Package Share somente através do menu Deployment na seção Tools na instância de AEM local.
Falso

3 - Você pode usar run modes customizados para diferenciar entre instâncias AEM.
Verdadeiro

4 – Qual desses te ajuda a importar e exportar o conteúdo do repositório?
Package

5 – Qual feature AEM te permite equalizar a instância AEM para um propósito específico?
Run modes

6 – O que os filtros no Packages map fazem?
O content path em um repositório

7 – As configurações e definições dos run modes estão guardadas em vários repositórios.
Falso

8 - Você pode fazer o download dos feature packs do Package Share e salver eles somente em uma instância local do AEM.
Falso

9 – Quantos tipoes de run modes você pode instanciar no AEM?
Três

10 – Onde o FileVault está localizado?
No diretório CRX quickstart

Maven e suas funcionalidades

Beatriz Maciel — Fri, 08 Oct 2021 20:48:55 +0000

O que é o Maven?

O Apache Maven é uma excelente ferramenta de apoio a qualquer equipe que trabalhe com projetos Java (outras tecnologias também são suportadas), fornecendo aos desenvolvedores uma forma de automatizar e padronizar a construção e publicação de suas aplicações. (fonte: DevMedia)

´groupId´ ➟ organização / compania
´artifactId´ ➟ o que está implementando
´build´ ➟ onde adiciona os executáveis]
´plugin´ ➟ no aem precisamos de um plug-in pra fazer o deploy dentro do AEM
´bnd´ ➟ empacotador de bundles, transformar o .jar em uma estrutura de bundle OSGi

Lifecycle do Maven

Ordem de execução

Processa primeiro recursos (preparando os arquivos, fazendo as cópias para uma pasta específica)
Compila as classes Java
Processamento das classes
Repete os três primeiros processos, mas com processamento focado nos testes. Ele compila e roda os testes.
Empacotamento jar.

No integration test, roda-se os testes de integração. Como o pacote jar já estará criado ou até mesmo em execução, esse momento serve para executar testes de integração, como testes de workflow ou de performance. Isso só é possível porque outras funcionalidades já terão sido testadas no nível de teste superior.
O Verify executa todos os passos até o dado momento e verifica se a compilação e o teste está apropriado.
A Instalação acontece pegando o jar que foi compilado e guardando dentro da pasta .m2* e instalando localmente ou
O Deploy (é paralelo ao deploy, não consecutivo) serve para instalar em um repositório remoto (Nexus – no maven central).

=======

Em um projeto Maven, o esquema padrão de pastas é o seguinte:

Acessamos src e, dentro dele, temos as pastas main e test. Main compila e processa classes e test compila e processa testes. Ambos contam com arquivos java e properties.

A pasta target é o destino de toda a compilação do maven. Tudo o que for feito é encaminhado para esta pasta.

=======

.m2 é a pasta para instalação

☆ Atenção: Install e Deploy não são executados ao mesmo tempo, são independentes e finais no ciclo de vida do Maven.

Forem: Beatriz Maciel

Semi automatização de preenchimento de dialogs no AEM

Campos de Preenchimento

Desenvolvimento da solução

✏️ Textfield

✏️ Pathfield

✏️ Menu dropdown

Montando a função

Por que semi automatizado?

Content fragments em React no AEM | 🇧🇷

Passo a passo ✏️

📌 Modelo

📌 Content Fragment

📌 Consumindo dados (AEM)

📌 Consumindo dados (React)

Referências

Debug AEM com IntelliJ | 🇧🇷

No IntelliJ

Referências

Modelos de campos em uma dialog no AEM

📌 Textfield

📌 Textarea

📌 Fileupload

📌 Colorfield

📌 Richtext

📌 NumberField

📌 Multifield

📌 Select

📌 Checkbox

📌 Radiogroup

📌 Datepicker

📌 Pathbrowser & Pathfield

Referências

Guia SEO para desenvolvedores 2022

O que é SEO?

📌 HTML5

Tags

Estrutura

Cabeçalho

Rodapé

Seções

Imagens

Títulos e subtítulos

Descrição

Meta tags

Canonical

Outras tags

📌 URL

📌 Crawling

Robots.txt

Sitemap.xml

📌 Favicon

📌 Velocidade e carregamento

Imagens

📌 Server Side Rendering (SSR)

🎯 Conclusões

Referências

Git para iniciantes 🇧🇷

O que é o Git?

Download

Configuração

Comandos

✏️ Inicializando um repositório

✏️ Puxando atualizações de um repositório

✏️ Fazendo atualizações

✏️ Conferindo as mudanças

✏️ Mesclando branches

✏️ Salvando alterações sem fazer commit

HackerRank #30 | Map | 🇧🇷

Referências

HackerRank #40 | Java Dequeue | 🇧🇷

Referências:

Desenvolvendo um SPA editável no AEM

SPA: Technical Overview of SPA (Single Page App) Editor

Desenvolvimento Back-end em AEM - Parte II

Back-end Coding Practices

Questões Finais

Desenvolvimento Back-end em AEM - Parte I

Eclipse

Use Pacotes e Run Modes customizados