AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.
A Adobe recomenda usar o Editor de SPA para projetos que exigem renderização do lado do cliente com base em estrutura de aplicativo de página única (por exemplo, React). Saiba mais.
O processo AEM de desenvolvimento de aplicativos móveis reconhece que usuários de diferentes competências contribuem para o desenvolvimento de aplicativos móveis. O mapa de processos a seguir ilustra a ordem geral em que os autores de conteúdo e desenvolvedores de aplicativos executam tarefas.
As informações sobre como executar as tarefas do profissional de marketing são exibidas nesta página. Para obter informações sobre as tarefas do desenvolvedor, consulte Criação de aplicativos PhoneGap.
O AEM Mobile fornece o blueprint do aplicativo Phonegap para criar aplicativos móveis. O blueprint define a estrutura dos aplicativos que você cria. As candidaturas consistem nos seguintes elementos:
A página raiz dos aplicativos móveis criados no AEM é exibida no console Aplicativos .
A página raiz é armazenada abaixo da propriedade Caminho de destino do aplicativo que foi especificada ao criar o aplicativo (o caminho padrão é /content/phonegap/apps). O nome da página é a propriedade Name do aplicativo. Por exemplo, o URL padrão da página raiz do site chamado myphonegapapp
é http://localhost:4502/content/phonegap/apps/myphonegapapp.html
.
As primeiras páginas filhas da página raiz são as variações de idioma do aplicativo. O nome de cada página é o idioma para o qual o aplicativo é criado. Por exemplo, inglês é o nome da variação em inglês do aplicativo.
Observação: O blueprint padrão do PhoneGap cria apenas um aplicativo em inglês. Seu desenvolvedor pode modificar o blueprint para criar mais variações de idioma.
A página de idioma tem dois objetivos:
A página inicial ou a página index.html de uma variação de idioma de um aplicativo é exibida quando o aplicativo é aberto. A página inicial fornece aos usuários um menu de links para várias páginas no aplicativo. O sistema de parágrafo permite adicionar componentes à página para criar conteúdo.
Os aplicativos móveis são baseados em um blueprint que define a estrutura e as propriedades da página. Você pode configurar as seguintes propriedades do aplicativo:
Você também pode fornecer um arquivo de imagem para usar como miniatura do aplicativo, selecionar a configuração do PhoneGap Build a ser usada e selecionar a configuração de análise do aplicativo móvel a ser usada. Essa imagem é usada apenas como uma miniatura para representar seu aplicativo móvel no console de aplicativos móveis no Experience Manager.
Existem guias adicionais (e opcionais) para criar o serviço de nuvem e integrar o plug-in SDK do Adobe Mobile Services ao seu aplicativo.
Os desenvolvedores podem usar o AEM PhoneGap Starter Kit para criar aplicativos e adicioná-los ao console.
O procedimento a seguir usa a interface do usuário de toque para criar um aplicativo móvel.
No painel , clique em Aplicativos .
Clique ou toque no ícone Criar .
(Opcional) Na guia Avançado , forneça uma descrição para o aplicativo e altere o URL do servidor, se necessário.
(Opcional) Se você estiver usando o PhoneGap Build para compilar o aplicativo, na guia Criar , selecione a Configuração a ser usada.
Para criar uma configuração de build do PhoneGap, clique em Gerenciar configurações.
(Opcional) Se você estiver usando o SiteCatalyst para rastrear a atividade do aplicativo, na guia Analytics , selecione a configuração a ser usada.
Para criar uma Configuração de aplicativo móvel, clique em Gerenciar configurações.
(Opcional) Para fornecer um ícone de aplicativo, clique no botão Procurar, selecione o arquivo de imagem do seu sistema de arquivos e clique em Abrir.
Clique em Criar.
Depois de criar um aplicativo móvel, você pode alterar as propriedades.
No painel , clique ou toque em Aplicativos .
Selecione o aplicativo a ser configurado e clique no ícone Propriedades da página de exibição .
Para alterar os valores da propriedade, clique ou toque no ícone Editar .
Configure as propriedades Básicas e Avançadas e clique ou toque no ícone Concluído .
No painel , clique ou toque em Aplicativos .
Clique em para detalhar o aplicativo móvel que deseja editar no console de administração de aplicativos. Selecione a versão de idioma do aplicativo a ser configurado e clique no ícone Exibir propriedades do aplicativo .
Para alterar os valores da propriedade, clique ou toque no ícone Editar .
Configure as propriedades nas guias Básico, Avançado, Criar e Analytics e clique ou toque no ícone Concluído .
Após criar o aplicativo móvel, adicione o conteúdo que é usado como a interface do usuário do aplicativo.
O cache da Sincronização de conteúdo na instância de publicação do AEM é usado como um repositório de conteúdo para aplicativos móveis:
Os aplicativos móveis incluem um comando Atualizações que baixa e instala o conteúdo atualizado do aplicativo. Quando uma instância de aplicativo envia uma solicitação de atualização, a Sincronização de conteúdo determina qual conteúdo foi alterado desde a última vez que o aplicativo foi atualizado ou instalado e fornece o novo conteúdo.
Para disponibilizar conteúdo atualizado para os aplicativos, atualize o cache do Content Sync. Na primeira vez que você atualizar o cache, todo o conteúdo publicado será adicionado. As atualizações subsequentes adicionam somente o conteúdo publicado que foi alterado desde a atualização anterior.
A Sincronização de conteúdo também rastreia quando as atualizações ocorrem. Com essas informações, a Sincronização de conteúdo pode determinar qual atualização de cache enviar para um aplicativo móvel.
Execute o procedimento a seguir na instância em que deseja atualizar o cache. Por exemplo, se seu aplicativo solicitar atualizações da instância de publicação, execute o procedimento na instância de publicação.
No painel, clique ou toque em Aplicativos e, em seguida, clique ou toque no aplicativo.
Selecione a página inicial e clique ou toque no ícone Atualizar cache .
Este é um recurso disponível com o Pacote de recursos 2 do Apps 6.1 e oferece uma maneira fácil de aproveitar os modelos de aplicativos existentes para a criação de novos aplicativos no AEM.
O que é um modelo de aplicativo? Pense nisso como uma coleção de modelos de página e componentes que representam uma linha de base ou uma base de um aplicativo.
Ao criar um novo aplicativo com base no modelo de outro aplicativo, você obtém um aplicativo que tem um representante de ponto de partida do aplicativo no qual ele foi criado.
Você deve ter um modelo de aplicativo móvel existente (ou um aplicativo instalado que tenha um modelo de aplicativo) para usar esse recurso.
O pacote de amostras do AEM Apps 6.1 mais recente inclui uma versão atualizada do aplicativo Geometrixx com um modelo de aplicativo. Como alternativa, você pode instalar o StarterKit que também fornece um modelo.
Etapas para criar um novo aplicativo com base em um modelo de aplicativo:
Clique em Avançar.
Forneça uma ID e um Título do aplicativo, no entanto, você também pode querer incluir um Nome e uma Descrição.
Se você desinstalar o pacote de aplicativo de referência do Geometrixx Outdoors do AEM e tiver um aplicativo criado com base em seu modelo, esse aplicativo não funcionará mais. O aplicativo Geometrixx Outdoors pode ser removido, no entanto, o modelo de aplicativo deve permanecer se for usado por outros aplicativos móveis.
Geometrixx Outdoors App é um exemplo de aplicativo PhoneGap que demonstra os recursos do blueprint padrão do aplicativo PhoneGap e os componentes móveis de amostra.
Para abrir o aplicativo, no painel , clique em Aplicativos móveis e selecione Geometrixx Outdoors App.
Cada página do aplicativo móvel inclui os seguintes recursos:
Um botão Voltar para retornar à página principal. Observe que o botão Voltar não é exibido na página inicial.
Um painel expansível que oferece um menu de comandos e links:
O sistema de parágrafo, para adicionar componentes e criar conteúdo.
O conteúdo da Página inicial é composto pelas seguintes ferramentas de navegação:
A página de engrenagem fornece aos usuários acesso às páginas do produto. Um componente de Lista de menus fornece acesso às páginas filhas da página de engrenagens. As páginas filhas são categorias de produtos recursos do site.
Cada página de categoria usa a mesma estrutura de conteúdo que a página de engrenagem. O carrossel fornece acesso a páginas filhas que são subcategorias de produtos. As páginas de subcategoria contêm listas de produtos que fornecem links para páginas de produtos.
A página Produtos e sua hierarquia de páginas filhas implementam um sistema de classificação para páginas de produtos. As páginas mais baixas em cada ramificação da hierarquia são uma página de produto que contém um componente de produto ng.
A página Produtos não está disponível para os usuários do aplicativo. A página Engrenagem fornece acesso a cada página de produto.
Contém um botão Voltar. O sistema de parágrafo permite adicionar componentes.
Ao usar o aplicativo, a página Revisões está disponível no carrossel da página em inglês.
Contém um botão Voltar. O sistema de parágrafo permite adicionar componentes.
Ao usar o aplicativo, a página Notícias está disponível no carrossel da página em inglês.
A página Sobre nós contém vários componentes de Linha de duas colunas . Cada coluna contém uma Imagem ou um componente de Texto. Os componentes são editáveis e o sistema de parágrafo permite adicionar componentes.
Ao usar o aplicativo, a página Sobre nós está disponível no carrossel da página em inglês.
A página Localizações contém um componente Localizações .
Ao usar o aplicativo, a página Localizações está disponível na lista de menus na página em inglês.
Vários componentes ficam imediatamente disponíveis no Sidekick ao criar as páginas de um aplicativo móvel. Os componentes pertencem ao grupo de componentes PhoneGap.
O componente de Rastreamento de carrossel é uma ferramenta para mostrar e navegar pelas páginas do site. O componente inclui um carrossel que percorre as imagens das páginas acima de uma lista de links de página. Edite o componente para especificar as páginas a serem expostas e o comportamento do carrossel.
Observe que as imagens aparecem no carrossel para páginas que estão associadas a uma imagem de uma maneira específica. Quando as páginas não estão associadas a imagens, somente a lista de links é exibida.
Guia de propriedades do carrossel
Configure o comportamento do carrossel:
Guia Propriedades da lista
Especifique como a lista de páginas é gerada:
O componente Rastrear carrossel fornece os seguintes valores para a propriedade Criar lista usando . A caixa de diálogo de edição muda de acordo com o valor selecionado:
Páginas secundárias
O componente lista todas as páginas filhas de uma página específica. Após selecionar esse valor, selecione a página na guia Páginas secundárias ou não especifique nenhum valor para listar os filhos da página atual.
Lista fixa
Especifique uma lista de páginas de inclusão. Após selecionar esse valor, configure a lista na guia Lista fixa que aparece ao selecionar Lista fixa:
A propriedade Order By não afeta a ordem das listas fixas.
Pesquisar
Preencha a lista usando os resultados de uma pesquisa por palavra-chave. A pesquisa é executada nos filhos de uma página especificada:
Pesquisa avançada
Preencha a lista usando um Querybuilder query.
Adicione uma imagem ao conteúdo do seu aplicativo.
Adicione rich text ao conteúdo do aplicativo.
O componente Locais da loja fornece aos usuários ferramentas para encontrar pontos de venda:
O componente requer que o repositório contenha informações de localização para cada loja. Os locais de amostra são instalados no nó /etc/commerce/locations/adobe .
Permite adicionar componentes lado a lado a uma página.