Mobile Apps gestalten
Archived
4 Aufgaben
15 Min.
Anfänger
Pega Platform 8.6
Mobil
Deutsch
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
- Klicken Sie im Navigationspanel von App Studio auf Channels, um auf die „Multi-Channel“-Konfiguration zuzugreifen.
- Klicken Sie im Abschnitt Current channel interfaces auf User Mobile App, um mit der Arbeit an der mobilen App zu beginnen.
- Klicken Sie im Abschnitt Navigation rechts neben Createauf das Zahnrad-Icon, um die Einstellungen für das Navigations-Icon zu konfigurieren.
- Geben Sie im Feld Name Folgendes ein: Create case.
- Überprüfen Sie, ob die Checkbox Assistance Request ausgewählt ist und klicken Sie auf Submit, um das Dialogfeld zu schließen.
- Klicken Sie im Abschnitt Navigation auf Add > Mobile list pages, um eine Liste mit Menü-Optionen anzuzeigen.
- Klicken Sie in den Optionen unter der Kategorie Mobile list pages auf Assistance Request list, um sie zur Benutzeroberfläche hinzuzufügen.
- Ziehen Sie im Abschnitt Navigation die Icons der Optionen in diese Reihenfolge: Assistance Request List, Create Case, Notifications, Log off.
- Klicken Sie im Abschnitt Navigation in den verbleibenden Elementzeilen auf das Icon Delete, sodass der Abschnitt Navigation der folgenden Abbildung ähnelt.
- Bestätigen Sie in der Vorschau der mobilen App, dass die untere Navigation nur vier Optionen hat.
2 Aktionen für „Assistance Request“-Cases hinzufügen
- 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.
- Klicken Sie im Bereich Swipe actions im Abschnitt Left side actions rechts neben Follow auf das Delete-Icon, um die Swipe-Aktion zu entfernen.
- Klicken Sie im Abschnitte Left side actions auf Add und dann auf Identify location, um die Swipe-Aktion hinzuzufügen.
- Klicken Sie rechts neben Identify location auf das Zahnrad-Icon, um das Dialogfeld Edit settings zu öffnen.
- Klicken Sie im Dialogfeld Edit settings auf Change, um das Auswahlfenster „Icon class picker“ aufzurufen.
- Geben Sie im Fenster Icon class picker im Feld Search pi-locationein.
- 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
- Gehen Sie auf der Seite des mobilen Channels auf den Tab Configuration und klicken Sie auf die General-Kategorie.
- Geben Sie im Feld Mobile app name Roadside Assist ein, um Ihre mobile App umzubenennen.
- Im Feld Description geben Sie Help is never far away with Roadside Assist! ein.
- Wählen Sie in der Liste Select role die Option User aus, um der Benutzerrolle Zugriff auf diesen Channel zu gewähren.
- Wählen Sie im linken Navigationsmenü die Kategorie Security aus.
- 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
- Klicken Sie im Tab Layout auf die Kategorie Branding, um die App für Ihre Marke anzupassen.
- Bewegen Sie den Mauszeiger über den Bereich Launch screen, um ein Change-Element anzuzeigen.
- Klicken Sie auf Change, um das Fenster Launch screen zu öffnen.
- Klicken Sie im Fenster Launch screen auf den Tab Icon, um ein Symbol für den Startbildschirm auszuwählen.
- Klicken Sie im Bereich Select icon auf das Tachometer-Icon, um es als Symbol on für den Startbildschirm auszuwählen.
- Klicken Sie auf Generate, um das Icon zur „Roadside Assist“-App hinzuzufügen.
- Wiederholen Sie die Schritte 2–6, um das App-Icon zu ändern.
- Klicken Sie auf die Kategorie Theme, um das Erscheinungsbild Ihrer mobilen App zu konfigurieren.
- Klicken Sie im Abschnitt Mobile specific colors auf das Kästchen rechts neben Mobile bottom navigation.
- Wählen Sie im Farbauswahlfenster Weiß aus oder geben Sie als Hex value #FFFFFF ein.
- Klicken Sie auf Save, um Ihre Auswahl zu bestätigen und das Fenster mit der Farbauswahl zu schließen.
- 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.
- Überprüfen Sie in der Vorschau der mobilen App Ihre Farbänderungen.
- Klicken Sie auf Save, um Ihre Änderungen im Hauptfenster von App Studio zu speichern.
Arbeit überprüfen
- Installieren Sie Pega Mobile Preview über den App Store Ihres Geräts (App Store für iOS oder Google Play für Android).
- Klicken Sie in Ihrem Webbrowser oben rechts auf das Pega-Symbol, um Ihren QR-Code zu generieren.
- Ö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.