Skip to main content

Criando uma experiência no aplicativo móvel

4 Tarefas

15 min

Visible to: All users
Beginner Pega Platform 8.7 Móvel Português Brasileiro

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.  

Você deve iniciar sua própria instância da Pega para concluir este Challenge.

A inicialização pode leva até cinco minutos, portanto tenha paciência.

Challenge Walkthrough

Detailed Tasks

1 Configurar navegação do menu do aplicativo

  1. No painel de navegação do App Studio, clique em Canais (Channels) para acessar a configuração multicanal. 
  2. 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.
    UserChannel
  3. Clique em Habilitar (Enable it) para ativar o Serviço de Autenticação Móvel.
    The Mobile Authentication Service activation ribbon.
  4. Na seção Navegação (Navigation), selecione o ícone de engrenagem ao lado de Criar ação (Create action). 
  5. Renomeie o Action Name (Nome da ação) para Criar caso (Create case).
  6. Em Tipos de casos (Case types), confira se Assistance Request (Solicitação de assistência) está selecionado e clique em Submit (Enviar).
  7. 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.
  8. 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). 
  9. 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.
    navmenu05
  10. Na prévia do aplicativo móvel, confira se a navegação da parte inferior tem apenas quatro opções. 
    navmenu06

2 Adicionar ações para os casos Solicitação de assistência (Assistance Request)

  1. 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.
  2. 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.
    FollowAction
  3. 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.
  4. À direita de Identificar localização (Identify location), clique no ícone de engrenagem para abrir a caixa de diálogo Editar configurações (Edit settings).
  5. Na caixa de diálogo Editar configurações , clique em Alterar (Change) para acessar a janela Seletor de classes de ícones (Icon class picker).
  6. Na janela Seletor de classes de ícones (Icon class picker ), no campo Pesquisar (Search), insira pi-location.
  7. 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

  1. Na página do canal móvel, selecione a guia Configuração (Configuration) e clique na categoria Geral (General).
  2. No campo Nome do aplicativo móvel (Mobile app name), insira Assistência rodoviária (Roadside Assist) para renomear seu aplicativo móvel. 
  3. No campo Descrição (Description), digite A ajuda nunca está longe com a Assistência rodoviária!.  
  4. Na lista Selecionar papel (Select role), selecione Autor (Author) para conceder acesso ao papel de Autor neste canal. 
  5. Na navegação do menu esquerdo, selecione a categoria Segurança (Security).
  6. 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

  1. Na guia Layout, clique na categoria Branding para configurar as opções de branding. 
  2. Passe o cursor sobre a área Tela de inicialização (Launch screen) para exibir a caixa Alterar (Change).
  3. Clique em Alterar para abrir a janela Tela de inicialização (Launch screen).
    ChangeIcon
  4. Na janela Tela de inicialização, clique na guia Ícone (Icon) para selecionar um ícone para a tela de inicialização. 
  5. Na área Selecionar ícone (Select icon), clique no ícone de medidor para selecioná-lo como ícone da tela de inicialização.
    ChangeIcon2
  6. Clique em Gerar (Generate) para adicionar o ícone ao aplicativo Assistência rodoviária (Roadside Assist).
  7. Repita as etapas 2 a 6 para alterar o ícone do aplicativo. 
  8. Clique na categoria Tema (Theme) para configurar o tema do seu aplicativo móvel.
  9. 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).
    Roadside assist mobile app Theme
  10. Na janela da amostra de cor, selecione branco ou insira Valor hex (Hex value) #FFFFFF.
  11. Clique em Salvar (Save) para selecionar e descartar a janela de amostra de cor.
  12. 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.
  13. Na prévia do aplicativo móvel, confira as alterações de cor.
  14. Na janela principal do App Studio, clique em Salvar (Save) para salvar suas alterações.
    Mobile Assist mobile app preview

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).
  1. Instale o Pega Mobile Preview na loja de aplicativos específica para o seu dispositivo (App Store para iOS ou Google Play para Android). 
  2. No seu navegador web, no canto superior direito, clique no ícone da Pega para gerar seu código QR. 
    5-1mobilePreview
  3. 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.

Este conteúdo foi útil?

50% acharam esse conteúdo útil

Quer nos ajudar a melhorar esse conteúdo?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice