Modelos e componentes
O modelo e o código do componente do seu aplicativo devem estar em /apps/<brand name>/<app name>. De acordo com a convenção, você deve colocar seu modelo e 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/ e bloqueado para acesso anônimo por padrão em instâncias de publicação. Assim, seu código JSP bruto está oculto de possíveis invasores.
Os modelos específicos do aplicativo podem ser configurados para serem apresentados somente usando o nó de propriedade allowedPaths
no próprio modelo e definindo seu valor como '/content/mobileapps(https://experienceleague.adobe.com/.*?lang=pt-BR)?' - ou até mesmo algo mais específico se o modelo só puder ser usado para um único aplicativo. As propriedades allowedParents
e allowedChildren
também podem ser usadas para controle refinado de quais modelos estão disponíveis para um autor com base no local em que a nova página está sendo criada.
Ao criar um componente da página de aplicativo do zero, é recomendável definir sua propriedade sling:resourceSuperType
como "mobileapps/components/angular/ng-page". Isso configura a página para criação e renderização como um aplicativo de página única e permite que você sobreponha quaisquer arquivos .jsp que o componente possa precisar alterar. Como a ng-página não inclui nenhuma estrutura de interface do usuário, um desenvolvedor geralmente acaba sobrepondo (pelo menos) 'template.jsp' (sobreposto de /libs/mobileapps/components/angular/ng-page/template.jsp).
Os componentes de página editáveis, que desejam usar o AngularJS, têm um componente sling:resourceSuperType
equivalente em /libs/mobileapps/components/angular/ng-component, que pode ser sobreposto e personalizado da mesma forma.
Clientlibs do JavaScript e CSS
Nas bibliotecas de clientes, há algumas opções disponíveis para o desenvolvedor de onde colocá-las no repositório. O seguinte padrão é oferecido para orientação, mas não é um requisito difícil.
Se o código do lado do cliente puder ser usado sozinho e não estiver relacionado a um componente específico do aplicativo (o que significa que ele pode ser reutilizado em outros aplicativos), o Adobe recomenda armazená-lo em /etc/clientlibs/<brand name>/<lib name>. Por outro lado, se a clientlib for específica para um único aplicativo, você poderá aninhá-la como uma criança do nó de design do seu aplicativo; /etc/designs/phonegap/<brand name>/<app name>/clientlibs. Não use a categoria desta clientlib com outras bibliotecas; em vez disso, incorpore outras bibliotecas conforme necessário. Seguir esse padrão 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, verifique o nó de configuração da sincronização de conteúdo Geometrixx clientlibs-all em /content/phonegap/geometrixx-outdoors/en/jcr:content/page-app/app-config/clientlibs-all.
Se o código do lado do cliente estiver totalmente acoplado a um componente específico, coloque-o em uma biblioteca do cliente aninhada abaixo do local do componente em /apps/ e incorpore a categoria à clientlib "design" do aplicativo.
Configuração do PhoneGap
Cada aplicativo AEM Mobile contém um diretório que hospeda os arquivos de configuração usados pela interface de linha de comando do PhoneGap e pela compilação do PhoneGap em https://build.phonegap.com/
para transformar o 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 foi tomada porque ele contém 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.
Neste diretório, você também encontrará alguns ganchos Cordova que podem ser usados para instalar plug-ins, colocar arquivos de recursos em seus locais específicos da plataforma e outras ações que devem ser executadas como parte da compilação. Observação: como alternativa ao download de cada plug-in como parte da compilação, você pode seguir o padrão do aplicativo Coletor de Cozinha e incluir o código-fonte do plug-in com o restante do projeto do aplicativo.
Próximas etapas
Depois de saber mais sobre a estrutura do aplicativo, consulte Criação e edição de aplicativos usando o Console do Aplicativo.