Skip to main content

Défi

Concevoir une expérience pour application mobile

Scénario

GoGoRoad souhaite que les clients puissent créer un dossier de demande d’assistance sur leur appareil mobile. Personnalisez le canal (channel) User Mobile App pour concevoir une expérience sur application mobile qui permette aux clients de : 

  • Créer un dossier de demande d’assistance
  • Vérifier les notifications envoyées au client
  • Mettre à jour les informations relatives à un dossier de demande d’assistance
  • Actualiser la localisation pour un dossier de demande d’assistance
  • Se déconnecter

Personnalisez également les éléments liés à la charte graphique de la marque, dont l’écran qui s’affiche à l’ouverture de l’application et l’icône de l’application, et configurez l’application pour qu’elle se verrouille après trois minutes d’inactivité. 

Vous trouverez dans le tableau suivant les identifiants dont vous avez besoin pour relever le défi.

Rôle Nom d'utilisateur Mot de passe
Développeur d’applications [email protected] pega123!
Note: Votre environnement de travail est susceptible de prendre en charge la réalisation de plusieurs défis.  Par conséquent, la configuration présentée dans la vidéo de présentation du défi peut ne pas correspondre exactement à votre environnement de travail.  

Présentation du défi

Vous devez initier votre votre propre instance Pega pour compléter ce Défi.

L'initialisation peut prendre jusqu'à 5 minutes, donc soyez patient.

Détail des tâches

1 Configurer la navigation pour le menu de l’application

  1. Dans le volet de navigation d’App Studio, cliquez sur Channels pour accéder à la configuration multicanal. 
  2. Dans la section Current channel interfaces, cliquez sur User Mobile App pour commencer à travailler sur l’application mobile.
    UserChannel
  3. Cliquez sur Enable it pour activer le Service d'authentification mobile.
    The Mobile Authentication Service activation ribbon.
  4. Dans la section Navigation , sélectionnez l'icône d'engrenage à côté de l'action Create. 
  5. Renommez Action Name pour créer le dossier.
  6. Sous Case types, vérifiez que Assistance Request est sélectionné et cliquez sur Submit.
  7. Dans la section Navigation, cliquez sur Add > List pages > Assistance Request list pour ajouter une nouvelle page au menu de navigation.
  8. Dans la section Navigation, faites glisser les icônes de la poignée pour réordonner les éléments dans l’ordre suivant : Assistance Request list, Create case, Notifications, Log off. 
  9. Dans la section Navigation, cliquez sur l’icône Delete dans les lignes d’éléments restants pour que la section Navigation ressemble à l’image suivante.
    navmenu05
  10. Dans l’aperçu de l’application mobile, vérifiez que seules quatre options sont présentes dans la barre de navigation inférieure. 
    navmenu06

2 Ajouter des actions aux dossiers de demande d’assistance

  1. À l’onglet Content , cliquez sur List pages puis sur Assistance Request list pour accéder aux paramètres de la page de liste Assistance Request.
  2. Dans la zone Swipe actions, dans la section Left side actions, à droite de Follow, cliquez sur l’icône Delete pour supprimer l’action de balayage.
    FollowAction
  3. Dans la section Left side actions, cliquez sur Add puis sur Identify location pour ajouter l’action de balayage.
    Note: Avec la version 8.7 de Pega PlatformTM, les options d’action des côtés gauche et droit sont configurées en tant qu’actions facultatives au niveau du dossier (case-wide optional action) dans le Case Designer. Pour plus d’informations, consultez la rubrique Création de pages de listes pour mobiles.
  4. À droite de Identify location, cliquez sur l’icône de l’engrenage pour ouvrir la boîte de dialogue Edit settings.
  5. Dans la boîte de dialogue Edit settings, cliquez sur Change pour accéder à la fenêtre Icon class picker.
  6. Dans la fenêtre Icon class picker, dans le champ Search, saisissez pi-location.
  7. Dans la fenêtre Icon class picker, sélectionnez l’icône pi-location puis cliquez sur Submit pour fermer la boîte de dialogue Edit settings.

 

3 Configurer le nom, la description et les paramètres de sécurité de l’application

  1. À la page du canal mobile, sélectionnez l’onglet Configuration puis cliquez sur la catégorie General.
  2. Dans le champ Mobile app name, saisissez Roadside Assist pour renommer l’application mobile. 
  3. Dans le champ Description, saisissez Help is never far away with Roadside Assist!.  
  4. Dans la liste Select role, sélectionnez Author pour accorder un accès au rôle Author pour ce canal. 
  5. Dans le menu de navigation de gauche, sélectionnez la catégorie Security.
  6. Dans la section des paramètres Authentication and Security, saisissez 3 comme valeur d’expiration de session dans le champ Lock app after x minutes of inactivity.

4 Personnaliser la charte graphique de l'application

  1. À l’onglet Layout, cliquez sur la catégorie Branding pour configurer les options de charte graphique. 
  2. Passez le curseur de la souris sur la zone Launch screen pour afficher une case Change.
  3. Cliquez sur Change pour ouvrir la fenêtre Launch screen.
    ChangeIcon
  4. Dans la fenêtre Launch screen, cliquez sur l’onglet Icon pour sélectionner une icône d’écran de lancement. 
  5. Dans la zone Select icon, cliquez sur l’icône de la jauge pour en faire l’icône de lancement de l’application.
    ChangeIcon2
  6. Cliquez sur Generate pour ajouter l’icône à l’application Roadside Assist.
  7. Répétez les étapes 2 à 6 pour modifier l’icône de l’application. 
  8. Cliquez sur la catégorie Theme pour configurer le thème de votre application mobile.
  9. Dans la section Mobile specific colors , cliquez sur le nuancier à droite de Mobile bottom navigation.
    Roadside assist mobile app Theme
  10. Dans la fenêtre du nuancier de couleurs, sélectionnez blanc ou saisissez la valeur Hex value #FFFFFF.
  11. Cliquez sur Save pour effectuer votre sélection et fermer la fenêtre du nuancier de couleurs.
  12. Répétez les étapes 9 à 11 pour faire apparaître en vert foncé Secondary swipe action et Primary button, ou saisissez la valeur Hex value #064F2E.
  13. Dans l’aperçu de l’application mobile, confirmez vos choix.
  14. Dans la fenêtre App Studio principale, cliquez sur Save pour enregistrer vos changements.
    Mobile Assist mobile app preview

Vérifier votre travail

Caution: Pega Mobile Preview vous demande de mettre à jour le mot de passe pour [email protected] Le mot de passe mis à jour vous sera demandé pour vous connecter aux défis suivants : Calculating fields using decision tables et Creating users and roles.
  1. Installez Pega Mobile Preview depuis l'app store de votre appareil (App Store pour iOS ou Google Play pour Android). 
  2. Dans votre navigateur web, en haut à droite, cliquez sur l'icône Pega pour générer votre QR code. 
    5-1mobilePreview
  3. Ouvrez Pega Mobile Preview et scannez le QR code pour prévisualiser votre application.
     
    Note: Vous pouvez continuer à vérifier votre travail en ouvrant l'application pour confirmer que l'aperçu sur l'appareil correspond à l'aperçu dans le canal.

Ce défi vise à appliquer ce que vous avez appris dans le Module suivant :


Disponible dans la mission suivante :

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

50% found this content useful

Want to help us improve this content?

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