Estrutura de um aplicativo structure-an-app

Um projeto do AEM Mobile envolve um conjunto diverso de tipos de conteúdo, incluindo páginas, bibliotecas de clientes JavaScript e CSS, componentes AEM reutilizáveis, configurações de Sincronização de conteúdo e conteúdo do shell de aplicativo PhoneGap. Basear seu novo aplicativo AEM Mobile no Kit inicial é uma boa maneira de inserir todos os diferentes tipos de conteúdo em nossa estrutura recomendada para facilitar a portabilidade e a manutenção a longo prazo.

Conteúdo da página page-content

As páginas do seu aplicativo devem estar localizadas abaixo de /content/mobileapps para serem reconhecidas pelo console do AEM Mobile.

Por AEM convenção, a primeira página do aplicativo deve ser um redirecionamento para um dos filhos, que serve como o idioma padrão do aplicativo ('en' nos casos do Geometrixx e do Starter Kit). A página de local de nível superior normalmente herda do componente de base 'splash-page' (https://experienceleague.adobe.com/libs/mobileapps/components/splash-page?lang=pt-BR) que cuida da inicialização necessária para suportar a instalação de atualizações de Sincronização de conteúdo ao ar (o código contentInit pode ser encontrado em /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Modelos e componentes templates-and-components

O modelo e o código do componente do aplicativo devem estar localizados em /apps/<brand name="">/<app name="">. Em conformidade com a convenção, você deve colocar o modelo e o código do componente em /apps/<brand name="">/<app name="">. Esse padrão deve ser familiar aos desenvolvedores que já trabalharam com o Site no AEM. Normalmente, é seguido como /apps/ está bloqueado para acesso anônimo por padrão em instâncias de publicação. Dessa forma, seu código JSP bruto está oculto de possíveis atacantes.

Os modelos específicos do aplicativo podem ser configurados para serem apresentados apenas usando o allowedPaths nó de propriedade no próprio template e definindo seu valor para '/content/mobileapps(https://experienceleague.adobe.com/.*?lang=pt-BR)?' - ou até mesmo algo mais específico, se o modelo for utilizável apenas para um único aplicativo. O allowedParents e allowedChildren As propriedades também podem ser aproveitadas para obter um controle muito refinado de quais modelos estarão disponíveis para um autor com base no local em que a nova página está sendo criada.

Ao criar um novo componente de página do aplicativo do zero, é recomendável definir seu sling:resourceSuperType propriedade para 'mobileapps/components/angular/ng-page'. Isso configurará a página para criação e renderização como um aplicativo de página única e permitirá que você sobreponha quaisquer arquivos .jsp que seu componente precise alterar. Como a ng-page não inclui nenhuma estrutura de interface do usuário, um desenvolvedor normalmente acabará sobrepondo (pelo menos) "template.jsp" (sobreposto de /libs/mobileapps/components/angular/ng-page/template.jsp).

Os componentes de página autoráveis, que desejam utilizar o AngularJS, têm um equivalente sling:resourceSuperType componente localizado em /libs/mobileapps/components/angular/ng-component, que pode ser sobreposto e personalizado da mesma maneira.

Clientlibs de JavaScript e CSS javascript-and-css-clientlibs

Quando se trata de bibliotecas de clientes, há algumas opções disponíveis para o desenvolvedor de onde colocá-las no repositório. O seguinte padrão é oferecido como orientação, mas não é um requisito difícil.

Se o código do lado do cliente puder ficar por conta própria e não estiver relacionado a um componente específico de seu aplicativo - o que significa que pode ser reutilizado em outros aplicativos - recomendamos armazená-lo em /etc/clientlibs/<brand name="">/<lib name="">. Por outro lado, se a clientlib for específica de um único aplicativo, você poderá aninhá-la como filha do nó de design do seu aplicativo; /etc/designs/phonegap/<brand name="">/<app name="">/clientlibs. Esta categoria da clientlib não deve ser usada por outras libs e deve ser usada para incorporar outras libs, conforme necessário. Seguir esses padrões evita que o desenvolvedor tenha que adicionar novas configurações de Sincronização de conteúdo sempre que uma biblioteca do cliente for adicionada ao aplicativo, em vez disso, basta atualizar a propriedade "embeds" da clientlib de design do aplicativo. Por exemplo, dê uma olhada no nó de configuração da Sincronização de conteúdo tudo/clientlibs do Geometrixx em /content/phonegap/geometrixx-outdoors/en/jcr:content/pge-app/app-config/clientlibs-all.

Se o código do lado do cliente estiver totalmente acoplado a um componente específico, coloque esse código em uma biblioteca do cliente aninhada abaixo do local do componente em /apps/ e incorpore-o à categoria da clientlib "design" do aplicativo.

Configuração do PhoneGap phonegap-configuration

Cada aplicativo do AEM Mobile contém um diretório que hospeda os arquivos de configuração usados pelo PhoneGap interface da linha de comando e Build do PhoneGap para transformar seu conteúdo da Web em um aplicativo executável. Na amostra do Geometrixx, por exemplo, esse diretório (https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoors/shell/jcr:content/page-app/app-content?lang=pt-BR) está localizado como parte do Shell; uma decisão de design tomada devido ao fato de conter apenas conteúdo que não pode ser atualizado ao ar, como plug-ins que lidam com APIs de dispositivo e a configuração do próprio aplicativo.

Nesse diretório, você também encontrará vários Ganchos Cordova que podem ser usados para instalar plug-ins, colocar arquivos de recursos em locais específicos da plataforma e outras ações que devem ser executadas como parte da build. Observação: como alternativa ao download de cada plug-in como parte da build, você pode seguir o padrão do aplicativo Sink da Cozinha e incluir código fonte do plug-in com o resto do projeto do aplicativo.

Próximas etapas the-next-steps

Depois de saber mais sobre a estrutura do aplicativo, consulte Criação e edição de aplicativos usando o console do aplicativo.