A Adobe recomenda o uso do Editor de SPA para projetos que exigem renderização do cliente baseada em estrutura de aplicativo de página única (por exemplo, Reagir). Saiba mais.
O processo de desenvolvimento de aplicativos móveis AEM reconhece que usuários de diferentes especialidades contribuem para o desenvolvimento de aplicativos móveis. O mapa de processos a seguir ilustra a ordem geral na qual 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 nessa página. Para obter informações sobre as tarefas de desenvolvedor, consulte Criação de aplicativos PhoneGap.
A AEM Mobile fornece o plano 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 secundárias 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 padrão do PhoneGap cria apenas um aplicativo em inglês. Seu desenvolvedor pode modificar o blueprint para que possa criar mais variações de idioma.
A página de idioma tem dois objetivos:
A página Home page ou index.html de uma variação de idioma de um aplicativo é exibida quando o aplicativo é aberto. O home page fornece aos usuários um menu de links para várias páginas no aplicativo. O sistema de parágrafo permite que você adicione componentes à página para criar conteúdo.
Os aplicativos móveis são baseados em um plano 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 em 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 de 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 criação 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 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 Visualização.
Para alterar os valores de 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 para detalhar o aplicativo móvel que deseja editar no console de administração de aplicativos. Selecione a versão do idioma do aplicativo a ser configurado e clique no ícone Propriedades do aplicativo de Visualização.
Para alterar os valores de 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.
Depois de criar o aplicativo móvel, adicione o conteúdo que é usado como a interface do usuário do aplicativo.
O cache de Sincronização de conteúdo na instância de publicação AEM é usado como repositório de conteúdo para aplicativos móveis:
Aplicativos móveis incluem um comando Atualizações que baixa e instala conteúdo atualizado do aplicativo. Quando uma instância do 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 o conteúdo atualizado para os aplicativos, atualize o cache de Sincronização de conteúdo. 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 será enviada para um aplicativo móvel.
Execute o seguinte procedimento 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 em seu aplicativo.
Selecione a página inicial e clique ou toque no ícone Atualizar cache.
Este é um recurso que está disponível com o Apps 6.1 Feature Pack 2 e fornece 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 nele como uma coleção de modelos de página e componentes que representam uma linha de base ou a base de um aplicativo.
Ao criar um novo aplicativo com base no modelo de outro aplicativo, você obterá um aplicativo que tenha um representante de ponto de partida do aplicativo no qual ele foi criado.
É necessário 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 mais recente do AEM Apps 6.1 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 incluir um Nome e uma Descrição.
Se você desinstalar o pacote do aplicativo de referência do Geometrixx Outdoors de AEM e criar um aplicativo com base em seu modelo, o aplicativo não funcionará mais. O aplicativo Geometrixx Outdoors pode ser removido, no entanto, o modelo do aplicativo deve permanecer se for usado por outros aplicativos móveis.
Geometrixx Outdoors App é um exemplo de aplicativo PhoneGap que demonstra os recursos do 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 Aplicativo Geometrixx Outdoors.
Cada página do aplicativo móvel inclui os seguintes recursos:
Um botão Voltar para retornar à página pai. Observe que o botão Voltar não aparece no Home page.
Um painel expansível que oferta um menu de comandos e links:
O sistema de parágrafo, para adicionar componentes e criar conteúdo.
O conteúdo do Home page é composto pelas seguintes ferramentas de navegação:
A página de engrenagens fornece aos usuários acesso às páginas de produtos. Um componente de lista de menu fornece acesso às páginas secundárias da página de engrenagens. As páginas secundárias são categorias de produtos que o site possui.
Cada página de categoria usa a mesma estrutura de conteúdo que a página de engrenagens. 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 ng Produto.
A página Produtos não está disponível para usuários do aplicativo. A página de engrenagens fornece acesso a cada página de produto.
Contém um botão Voltar. O sistema de parágrafo permite que você adicione 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 que você adicione 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 um componente de Imagem ou Texto. Os componentes são editáveis e o sistema de parágrafo permite que você adicione 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 Locais contém um componente Locais.
Ao usar o aplicativo, a página Locais está disponível na lista de menu na página em inglês.
Vários componentes estão imediatamente disponíveis no Sidekick ao criar as páginas de um aplicativo móvel. Os componentes pertencem ao grupo de componentes do PhoneGap.
O componente do Carrossel de troca é uma ferramenta para mostrar e navegar nas páginas do site. O componente inclui um carrossel que percorre imagens para as 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ágina é gerada:
O componente do Carrossel de troca 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 filhas
O componente lista todas as páginas secundárias de uma página específica. Depois de selecionar esse valor, selecione a página na guia Páginas secundárias ou não especifique nenhum valor para lista os filhos da página atual.
Lista fixa
Especifique uma lista de páginas de inclusão. Depois de selecionar esse valor, configure a lista na guia Lista fixa que aparece quando você seleciona Lista fixa:
A propriedade Order By não afeta a ordem das listas fixas.
Pesquisar
Preencha a lista usando os resultados de uma pesquisa de palavra-chave. A pesquisa é realizada nos filhos de uma página especificada:
Pesquisa avançada
Preencha a lista usando um query Querybuilder.
Adicione uma imagem ao conteúdo do aplicativo.
Adicione rich text ao conteúdo do aplicativo.
O componente Locais de loja fornece aos usuários ferramentas para encontrar pontos de venda:
O componente exige que o repositório contenha informações de localização para cada loja. Os locais de amostra são instalados no nó /etc/commerce/localizações/adobe.
Permite que você adicione componentes lado a lado a uma página.