Seu aplicativo híbrido está pronto para AEM Mobile?

Observação

A Adobe recomenda o uso do Editor SPA para projetos que exigem renderização do cliente baseada em estrutura de aplicativo de página única (por exemplo, Reagir). Saiba mais.

Então você importou seu aplicativo Hybrid PhoneGap ou Cordova para AEM, e agora? Provavelmente, você desejará adicionar conteúdo autorável ao seu aplicativo. Para realizar essa tarefa, você precisará de um entendimento geral da estrutura de um aplicativo AEM. Um aplicativo em AEM é comumente dividido em duas partes. O 'shell' e o 'content'. A 'shell' é composta das partes estáticas do seu aplicativo; como os arquivos de configuração do PhoneGap, a estrutura do aplicativo e os controles de navegação. O conteúdo do arquivo importado é armazenado como parte do shell. No contexto desse documento, o shell é todo o conteúdo não AEM criado do aplicativo Hybrid PhoneGap criado pelo desenvolvedor do aplicativo.

Conteúdo refere-se aos componentes, modelos e páginas criadas que são criados em AEM criados pelo desenvolvedor AEM. O conteúdo é categorizado como conteúdo de desenvolvedor ou como conteúdo de autoria. Os componentes, designs e modelos de página são considerados como conteúdo dev, já que são criados por um desenvolvedor. author-content são páginas que foram criadas usando os componentes e modelos. Normalmente, são feitas por um designer ou um comerciante.

A adição de páginas de AEM criadas ao aplicativo Híbrido requer coordenação entre o desenvolvedor do aplicativo e o desenvolvedor AEM. Em qualquer lugar no aplicativo em que você deseja adicionar conteúdo de criação, o desenvolvedor do aplicativo precisa organizar essas páginas em uma estrutura que possa ser sobreposta no AEM. O desenvolvedor do aplicativo deve ser capaz de fornecer ao desenvolvedor do AEM os caminhos para onde o conteúdo de autoria do AEM será adicionado e, em seguida, fornecer uma página de espaço reservado no aplicativo Híbrido que será substituída depois que o desenvolvedor do AEM tiver criado o conteúdo da página.

Para tornar a explicação mais fácil de seguir, usaremos o Marketing Cloud AEM: Referência híbrida da AEM Mobile para explicar os conceitos. O aplicativo de referência híbrida consiste em uma página de boas-vindas com um menu lateral.

chlimage_1-76

Neste exemplo, vamos criar a página de boas-vindas do aplicativo. Veja a fonte https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference/blob/master/hybrid-app/www/js/app.js#L75. Vemos que o desenvolvedor do aplicativo definiu uma página de boas-vindas e forneceu um modelo para a página que é renderizada pelo aplicativo. É aqui que o desenvolvedor do aplicativo e AEM desenvolvedor precisam coordenar. O caminho para o modelo de página de boas-vindas no Aplicativo de referência híbrido é definido como ''content/mobileapps/hybrid-reference-app/en/welcome.template.html''. Esse caminho é extremamente importante porque o desenvolvedor AEM criará sua página de boas-vindas no repositório AEM usando o mesmo caminho.

chlimage_1-77

É importante que o aplicativo híbrido e o conteúdo AEM criado usem o mesmo caminho, pois dependemos da capacidade de sobrepor o conteúdo usando a Sincronização de conteúdo para adicionar novas páginas ao aplicativo híbrido. Quando o aplicativo híbrido é importado para AEM como parte do processo de importação, as configurações de Sincronização de conteúdo são configuradas.

chlimage_1-70

Quando você 'Baixar origem' do painel do aplicativo, esses scripts ContentSync serão executados para montar um arquivo do aplicativo híbrido.

chlimage_1-79

O ContentSync primeiro obtém "shell" do aplicativo, que é o local onde todo o conteúdo desenvolvido do aplicativo Híbrido é armazenado e, em seguida, puxa o "conteúdo" do aplicativo. Agora, se houver páginas no 'shell' que tenham o mesmo caminho que no 'conteúdo', as páginas em 'shell' serão (substituídas) pelas páginas em 'content'. Em outras palavras, na amostra do aplicativo de referência híbrido, se criarmos uma página no AEM que tenha o mesmo caminho que ''content/mobileapps/hybrid-reference-app/en/welcome.template.html'' quando o ContentSync for executado, ela sobreporá a página que fazia parte do aplicativo de referência híbrido com o que está no AEM desse local. A sobreposição é cuidada pelo ContentSync, de modo que para alguém que esteja usando o aplicativo, as atualizações para o aplicativo com conteúdo criado AEM parecerão perfeitas e não precisarão de uma recriação do aplicativo. Como resultado, quando você executa o aplicativo, a página de boas-vindas será exibida da seguinte maneira:

chlimage_1-80

Nesta página