Criando uma experiência no aplicativo móvel
4 Tarefas
15 min
Scenario
A GoGoRoad quer possibilitar que os clientes criem um caso de solicitação de assistência usando seus dispositivos móveis. Personalize o canal Aplicativo móvel do usuário (User mobile app) para criar uma experiência no aplicativo móvel que permita aos clientes:
- Criar um caso de solicitação de assistência
- Verificar as notificações enviadas para o cliente
- Atualizar detalhes em um caso de solicitação de assistência
- Atualizar a localização em um caso de solicitação de assistência
- Fazer logoff
Além disso, personalize o branding do aplicativo, incluindo a tela de inicialização e o ícone do aplicativo, e configure o aplicativo para bloquear após três minutos de inatividade.
A tabela a seguir apresenta as credenciais necessárias para concluir o desafio.
Papel (Role) | Nome do usuário | Senha |
---|---|---|
Desenvolvedor de aplicativo | author@gogoroad | pega123! |
Nota: Seu ambiente de prática pode oferecer suporte para a conclusão de múltiplos desafios. Como resultado, a configuração exibida na apresentação do desafio pode não corresponder exatamente ao seu ambiente.
Challenge Walkthrough
Detailed Tasks
1 Configurar navegação do menu do aplicativo
- No painel de navegação do App Studio, clique em Canais (Channels) para acessar a configuração multicanal.
- Na seção Interfaces de canal atuais (Current channel interfaces), clique em Aplicativo móvel do usuário (User Mobile App) para começar a trabalhar no aplicativo móvel.
- Clique em Habilitar (Enable it) para ativar o Serviço de Autenticação Móvel.
- Na seção Navegação (Navigation), selecione o ícone de engrenagem ao lado de Criar ação (Create action).
- Renomeie o Action Name (Nome da ação) para Criar caso (Create case).
- Em Tipos de casos (Case types), confira se Assistance Request (Solicitação de assistência) está selecionado e clique em Submit (Enviar).
- Na seção Navigation (Navegação), clique em Add > List pages > Assistance Request list (Adicionar > Páginas de lista > Lista de Solicitação de assistência) para adicionar uma nova página ao menu de navegação.
- Na seção Navegação (Navigation), arraste os ícones de movimentação para reproduzir a seguinte ordem: Lista de solicitação de assistência, Criar caso, Notificações, Sair (Assistance Request list, Create case, Notifications, Log off).
- Na seção Navegação (Navigation), clique no ícone de excluir nas linhas de itens restantes para que a seção Navegação fique igual à seguinte imagem.
- Na prévia do aplicativo móvel, confira se a navegação da parte inferior tem apenas quatro opções.
2 Adicionar ações para os casos Solicitação de assistência (Assistance Request)
- Na guia Content (Conteúdo), clique em Páginas de listas (List pages) e depois em Lista Solicitação de assistência (Assistance Request list) para acessar as configurações da página de lista Solicitação de assistência.
- Na área Ações de deslize (Swipe actions), na seção Ações do lado esquerdo (Left side actions), à direita de Seguir (Follow), clique no ícone de excluir para remover a ação de deslize.
- Na seção Ações do lado esquerdo (Left side actions), clique em Adicionar (Add) e depois em Identificar localização (Identify location) para adicionar a ação de deslize.
Nota: Com a versão 8.7 da Pega PlatformTM, as opções de ação do lado direito e esquerdo são configuradas como ações opcionais globais no designer de casos. Para obter mais informações, consulte Criação de páginas de listas móveis.
- À direita de Identificar localização (Identify location), clique no ícone de engrenagem para abrir a caixa de diálogo Editar configurações (Edit settings).
- Na caixa de diálogo Editar configurações , clique em Alterar (Change) para acessar a janela Seletor de classes de ícones (Icon class picker).
- Na janela Seletor de classes de ícones (Icon class picker ), no campo Pesquisar (Search), insira pi-location.
- Na janela Seletor de classes de ícones (Icon class picker), selecione o ícone pi-location depois clique em Enviar (Submit) para fechar a caixa de diálogo Editar configurações (Edit settings).
3 Configurar nome, descrição e segurança do aplicativo
- Na página do canal móvel, selecione a guia Configuração (Configuration) e clique na categoria Geral (General).
- No campo Nome do aplicativo móvel (Mobile app name), insira Assistência rodoviária (Roadside Assist) para renomear seu aplicativo móvel.
- No campo Descrição (Description), digite A ajuda nunca está longe com a Assistência rodoviária!.
- Na lista Selecionar papel (Select role), selecione Autor (Author) para conceder acesso ao papel de Autor neste canal.
- Na navegação do menu esquerdo, selecione a categoria Segurança (Security).
- Na seção de configuração Autenticação e segurança (Authentication and Security ), insira 3 como o valor de tempo limite no campo Bloquear aplicativo após x minutos de inatividade (Lock app after x minutes of inactivity).
4 Personalizar o branding do aplicativo
- Na guia Layout, clique na categoria Branding para configurar as opções de branding.
- Passe o cursor sobre a área Tela de inicialização (Launch screen) para exibir a caixa Alterar (Change).
- Clique em Alterar para abrir a janela Tela de inicialização (Launch screen).
- Na janela Tela de inicialização, clique na guia Ícone (Icon) para selecionar um ícone para a tela de inicialização.
- Na área Selecionar ícone (Select icon), clique no ícone de medidor para selecioná-lo como ícone da tela de inicialização.
- Clique em Gerar (Generate) para adicionar o ícone ao aplicativo Assistência rodoviária (Roadside Assist).
- Repita as etapas 2 a 6 para alterar o ícone do aplicativo.
- Clique na categoria Tema (Theme) para configurar o tema do seu aplicativo móvel.
- Na seção Mobile specific colors (Cores específicas em aplicativos móveis), clique na amostra à direita de Navegação da parte inferior (Mobile bottom navigation).
- Na janela da amostra de cor, selecione branco ou insira Valor hex (Hex value) #FFFFFF.
- Clique em Salvar (Save) para selecionar e descartar a janela de amostra de cor.
- Repita as etapas 9 a 11 para alterar a cor de Ação de deslize secundária (Secondary swipe action) e Botão primário (Primary button) para verde-escuro ou insira Valor hex (Hex value) #064F2E.
- Na prévia do aplicativo móvel, confira as alterações de cor.
- Na janela principal do App Studio, clique em Salvar (Save) para salvar suas alterações.
Confirm your work
Cuidado: O Pega Mobile Preview exige a atualização da senha para o autor@gogoroad. É preciso atualizar a senha para fazer login nos seguintes desafios: Calculating fields using decision tables (Calculando campos com tabelas de decisão) e Creating users and roles (criando usuários e papéis).
- Instale o Pega Mobile Preview na loja de aplicativos específica para o seu dispositivo (App Store para iOS ou Google Play para Android).
- No seu navegador web, no canto superior direito, clique no ícone da Pega para gerar seu código QR.
- Abra o Pega Mobile Preview e digitalize o código QR para visualizar seu aplicativo.
Nota: Você pode verificar seu trabalho mais detalhadamente abrindo o aplicativo e confirmando que a visualização no dispositivo está igual à visualização no canal.
Este Desafio serve para praticar o que você aprendeu nos seguintes Módulo:
Disponível na seguinte missão:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Quer nos ajudar a melhorar esse conteúdo?