Skip to main content

Mobile Apps gestalten

Archived

4 Aufgaben

15 Min.

Visible to: All users
Anfänger Pega Platform 8.6 Mobil Deutsch
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded. Hier klicken to continue your progress in the latest version.

Szenario

GoGoRoad möchte Kunden die Möglichkeit geben, einen „Assistance Request“-Case mit einem Mobilgerät zu eröffnen. Passen Sie den Channel der mobilen App an, damit Kunden mit dem Smartphone oder Tablet Folgendes machen können: 

  • einen Case „Assistance Request“ für die Pannenhilfe erstellen
  • Benachrichtigungen abrufen, die an den Kunden gesendet wurden
  • Details zu einem Case „Assistance Request“ aktualisieren
  • Standort für einen Case „Assistance Request“ aktualisieren
  • sich abmelden

Darüber hinaus lässt sich das Branding der App anpassen. Sie können z. B. den Startbildschirm und das App-Icon festlegen sowie eine Sperrung der App nach drei Minuten Inaktivität konfigurieren. 

In der folgenden Tabelle finden Sie die Anmeldedaten, die Sie zur Durchführung der Challenge benötigen.

Rolle Benutzername Passwort
Application Developer author@gogoroad pega123!
Hinweis: Ihre Übungsumgebung unterstützt möglicherweise den Abschluss mehrerer Challenges.  Es kann daher vorkommen, dass die im Challenge-Walkthrough gezeigte Konfiguration nicht genau mit Ihrer Umgebung übereinstimmt.  

Challenge-Schritte

Genaue Übungsschritte

1 Navigation für das App-Menü konfigurieren

  1. Klicken Sie im Navigationspanel von App Studio auf Channels, um auf die „Multi-Channel“-Konfiguration zuzugreifen. 
  2. Klicken Sie im Abschnitt Current channel interfaces auf User Mobile App, um mit der Arbeit an der mobilen App zu beginnen.
    UserChannel
  3. Klicken Sie im Abschnitt Navigation rechts neben Createauf das Zahnrad-Icon, um die Einstellungen für das Navigations-Icon zu konfigurieren.
  4. Geben Sie im Feld Name Folgendes ein: Create case.
  5. Überprüfen Sie, ob die Checkbox Assistance Request ausgewählt ist und klicken Sie auf Submit, um das Dialogfeld zu schließen.
    SectionSelection
  6. Klicken Sie im Abschnitt Navigation auf Add > Mobile list pages, um eine Liste mit Menü-Optionen anzuzeigen.
  7. Klicken Sie in den Optionen unter der Kategorie Mobile list pages auf Assistance Request list, um sie zur Benutzeroberfläche hinzuzufügen.
  8. Ziehen Sie im Abschnitt Navigation die Icons der Optionen in diese Reihenfolge: Assistance Request List, Create Case, Notifications, Log off. 
  9. Klicken Sie im Abschnitt Navigation in den verbleibenden Elementzeilen auf das Icon Delete, sodass der Abschnitt Navigation der folgenden Abbildung ähnelt.
    navmenu05
  10. Bestätigen Sie in der Vorschau der mobilen App, dass die untere Navigation nur vier Optionen hat. 
    navmenu06

2 Aktionen für „Assistance Request“-Cases hinzufügen

  1. Klicken Sie im Tab Content auf List pages und dann auf  Assistance Request list, um auf die Einstellungen der Listenseite für Assistance Requests zuzugreifen.
  2. Klicken Sie im Bereich Swipe actions im Abschnitt Left side actions rechts neben Follow auf das Delete-Icon, um die Swipe-Aktion zu entfernen.
    FollowAction
  3. Klicken Sie im Abschnitte Left side actions auf Add und dann auf Identify location, um die Swipe-Aktion hinzuzufügen.
  4. Klicken Sie rechts neben Identify location auf das Zahnrad-Icon, um das Dialogfeld Edit settings zu öffnen.
  5. Klicken Sie im Dialogfeld Edit settings auf Change, um das Auswahlfenster „Icon class picker“ aufzurufen.
  6. Geben Sie im Fenster Icon class picker im Feld Search pi-locationein.
  7. Wählen Sie im Fenster Icon class picker das Icon pi-location aus und klicken Sie dann auf Submit, um das Dialogfeld Edit settings zu schließen.

 

3 App-Name, Beschreibung und Sicherheit konfigurieren

  1. Gehen Sie auf der Seite des mobilen Channels auf den Tab Configuration und klicken Sie auf die General-Kategorie.
  2. Geben Sie im Feld Mobile app name Roadside Assist ein, um Ihre mobile App umzubenennen. 
  3. Im Feld Description geben Sie Help is never far away with Roadside Assist! ein.  
  4. Wählen Sie in der Liste Select role die Option User aus, um der Benutzerrolle Zugriff auf diesen Channel zu gewähren. 
  5. Wählen Sie im linken Navigationsmenü die Kategorie Security aus.
  6. Geben Sie bei den Einstellungen für Authentication and Security 3 als Zeitüberschreitungswert in das Feld Lock app after x minutes of inactivity ein.

4 Branding der App anpassen

  1. Klicken Sie im Tab Layout auf die Kategorie Branding, um die App für Ihre Marke anzupassen. 
  2. Bewegen Sie den Mauszeiger über den Bereich Launch screen, um ein Change-Element anzuzeigen.
  3. Klicken Sie auf Change, um das Fenster Launch screen zu öffnen.
    ChangeIcon
  4. Klicken Sie im Fenster Launch screen auf den Tab Icon, um ein Symbol für den Startbildschirm auszuwählen. 
  5. Klicken Sie im Bereich Select icon auf das Tachometer-Icon, um es als Symbol on für den Startbildschirm auszuwählen.
    ChangeIcon2
  6. Klicken Sie auf Generate, um das Icon zur „Roadside Assist“-App hinzuzufügen.
  7. Wiederholen Sie die Schritte 2–6, um das App-Icon zu ändern. 
  8. Klicken Sie auf die Kategorie Theme, um das Erscheinungsbild Ihrer mobilen App zu konfigurieren.
  9. Klicken Sie im Abschnitt Mobile specific colors auf das Kästchen rechts neben Mobile bottom navigation.
    Roadside assist mobile app Theme
  10. Wählen Sie im Farbauswahlfenster Weiß aus oder geben Sie als Hex value #FFFFFF ein.
  11. Klicken Sie auf Save, um Ihre Auswahl zu bestätigen und das Fenster mit der Farbauswahl zu schließen.
  12. Wiederholen Sie die Schritte 9–11, um die Farbe für Secondary swipe action und Primary button in Dunkelgrün zu ändern, oder geben Sie als Hex value #064F2E ein.
  13. Überprüfen Sie in der Vorschau der mobilen App Ihre Farbänderungen.
  14. Klicken Sie auf Save, um Ihre Änderungen im Hauptfenster von App Studio zu speichern.
    Mobile Assist mobile app preview

Arbeit überprüfen

  1. Installieren Sie Pega Mobile Preview über den App Store Ihres Geräts (App Store für iOS oder Google Play für Android). 
  2. Klicken Sie in Ihrem Webbrowser oben rechts auf das Pega-Symbol, um Ihren QR-Code zu generieren. 
    5-1mobilePreview
  3. Öffnen Sie Pega Mobile Preview und scannen Sie den QR-Code, um eine Vorschau Ihrer App zu sehen.
     
    Hinweis: Sie können Ihre Arbeit noch tiefgehender prüfen, indem Sie die App öffnen und bestätigen, dass die Vorschau auf dem Gerät der Vorschau im Channel entspricht.


In der folgenden Mission verfügbar:

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