No-Code-Plattform “Panda”

Pepper ist ein interaktiver Roboter und als solcher eine erstaunliche Plattform, um Menschen auf eine einzigartige Weise zu erreichen. Wie kann man schnell und einfach, ohne zu programmieren, eine Robotikanwendung erstellen, um ein einzigartiges Erlebnis zu bieten? Entdecken Sie PandaSuite, eine No-Code-Plattform, mit der Sie interaktive Anwendungen mit Pepper entwerfen, erstellen und testen können!

1. Eine Pepper-kompatible, einfach zu bedienende no-code Plattform

Als Teil einer Partnerschaft haben SoftBank Robotics Europe und PandaSuite eine spezielle Komponente entwickelt, um die PandaSuite-Plattform mit dem Pepper-Roboter kompatibel zu machen.

Lehrer und Schüler können nun von den Interaktionsleistungen von Pepper in ihren Klassenzimmern profitieren, ohne dass Programmierkenntnisse erforderlich sind.
Designer können neue Möglichkeiten mit Pepper entdecken und ihre Ideen schnell umsetzen.
Entwickler können jetzt ganz einfach Prototypen von Demo-Anwendungen erstellen, um ihre Anwendungsfälle zu illustrieren.
Das Erstellen einer robotischen und interaktiven Android-Anwendung für Pepper wird so einfach wie das Erstellen einer Diashow!

Pepper feat. PandaSuite

PandaSuite ist eine sehr interaktive no-code Plattform, um Anwendungen und Prototypen zu erstellen und diese während des gesamten Prozesses zu testen. Sie ermöglicht es Ihnen, interaktive Erlebnisse zu entwerfen, zu erstellen und zu starten, ohne zu kodieren.

PandaSuite verfügt bereits über eine Vielzahl von vorgefertigten Komponenten. Die Integration einer speziellen Pepper-Komponente mit dem Namen “Pepper chat” ermöglicht nun die Erstellung und den Einsatz von Pepper-Anwendungen über die PandaSuite Studio-Schnittstelle.

Die Funktionen der Pepper-Chat-Komponente sind hauptsächlich, aber nicht ausschließlich:

  1. Verwaltung von Lesezeichen,
  2. Integration der Kamera des Pepper-Tablets,
  3. Ablaufmanagement, Timer,
  4. Texteingabe und Variablenverwaltung,
  5. Verwendung von Pepper-Animationen,
  6. Mehrsprachige Fähigkeiten,
  7. PandaSuite Pepper Viewer zur Vorvisualisierung und Simulation von Ereignissen,
  8. Export der endgültigen Pepper-Anwendung aus dem PandaSuite-Dashboard mit einem personalisierten Icon, ohne Branding und Analysen.

Haftungsausschluss: Die “Pepper-Chat”-Komponente resultiert aus einer Partnerschaft zwischen PandaSuite und SoftBank Robotics Europe und wird in dieser ersten Beta-Version “wie besehen” zur Verfügung gestellt, ohne jegliche Garantie. Das bedeutet, dass einige Probleme bei der Verwendung dieses Tools auftreten können. Bitte zögern Sie nicht, den Support von PandaSuite oder Softbank Robotics Europe zu kontaktieren, wenn Sie Probleme haben.

Dieser Artikel wurde für PandaSuite Studio Version 1.3.5 und PandaSuite Viewer Version 2.1.27 geschrieben.

2. Erste Schritte mit PandaSuite Studio

PandaSuite-Konto

Als erstes müssen Sie ein Konto auf PandaSuite erstellen und dann das PandaSuite Studio herunterladen und installieren. Weitere Informationen finden Sie in der PandaSuite-Dokumentation.

Sie können ein kostenloses Konto erstellen, um Ihr Projekt auf Pepper mit PandaSuite Studio zu erstellen!

Hinweis: Ein Projekt kann nicht von mehreren Benutzern gemeinsam genutzt werden. Wenn also mehrere Personen an einem bestimmten Projekt arbeiten, sollten Sie ein spezielles Konto anlegen und dieses abwechselnd nutzen.

Herunterladen und Installieren des PandaSuite Viewers auf Pepper

Um Ihre Anwendung auf einem echten Pepper-Roboter zu verwenden, müssen Sie die PandaSuite Viewer-Anwendung installieren. Es gibt zwei Möglichkeiten, sie auf dem Pepper-Tablet zu installieren.

Mit adb:
Laden Sie die apk auf Ihrem Computer von diesem Link herunter.
Vergewissern Sie sich, dass sowohl Ihr Computer als auch Ihr Roboter mit demselben Netzwerk verbunden sind, und verbinden Sie sich mit seinem Tablet, um sie zu installieren, indem Sie folgendes eingeben:

$ adb connect TABLET_IP
$ adb install pandaviewer-pepper-pandaviewer-release.apk

Direkt auf dem Roboter:

Öffnen Sie auf dem Tablet von Pepper Google Chrome und navigieren Sie zu: https://pandasuite.com/dashboard/download-viewer?pepper
Downloaden und öffnen Sie die apk
Installieren Sie sie gemäß den angezeigten Anweisungen

3. Entdecken der PandaSuite und ihrer allgemeinen Funktionen

PandaSuite Studio bietet eine breite Palette von Funktionen, wir werden die abdecken, die Sie benötigen, um eine einfache, aber funktionale Anwendung für Pepper zu erstellen, aber zögern Sie nicht, die PandaSuite Dokumentation für weitere Details zu lesen.

Entwerfen des Ablaufs Ihrer App

Bevor Sie mit der Arbeit in der PandaSuite beginnen, sollten Sie einen guten Überblick darüber haben, was Sie erstellen wollen. Wir empfehlen Ihnen, mit der Erstellung eines grundlegenden Ablaufs zu beginnen und diesen zu verfeinern, bis Sie ein Schritt-für-Schritt-Diagramm Ihrer zukünftigen Anwendung haben.

Sammlung von Assets

Anschließend müssen Sie die verschiedenen Assets, die Sie für die Anwendung benötigen werden, erstellen oder sammeln:

  1. Grafische Assets wie z. B. Bilder für den Hintergrund, Schaltflächen…
  2. Sounds (Audio abspielen – Hilfe-Center)
  3. PandaSuite-Animationen: Sie können Animationen (Animations – Help Center), Übergänge (States & Transitions – Help Center) erstellen, oder sogar Ihre After Effects Animationen importieren (After Effects Animations – Help Center)
  4. Pepper Animationen: PandaSuite erlaubt es noch nicht, spezielle Animationen hochzuladen, aber Sie können die bereits in Ihrem Pepper-Roboter vorhandenen über die Animationsbibliothek verwenden. Wir empfehlen Ihnen, diese auszuprobieren, um zu suchen, welche am besten zu Ihrer Anwendung passen.
  5. Dialog: Sie müssen Ihre .top-Datei erstellen und sie gründlich testen, bevor Sie sie in die PandaSuite hochladen. Wenn Sie mit der QiChat-Sprache nicht vertraut sind, suchen Sie den entsprechenden Artikel hier: QiChat entdecken, die SBR-Sprache zum Erstellen von Chatbots.

Bitte beachten Sie, dass die Dialog-.top-Dateien einzeln gezippt werden müssen, bevor Sie sie in die PandaSuite importieren können. Wenn Sie mehrere Sprachen in Ihrer Anwendung verwenden müssen, müssen alle .top-Dateien den gleichen Namen haben, bevor sie gezippt werden, entsprechend der qiSDK-Konvention.

Hinweis: Bitte verwenden Sie keine Unterstriche für Lesezeichen in einem Dialog, der in der PandaSuite verwendet werden soll, da diese sonst abgeschnitten werden. Das Problem sollte bald behoben sein.

Überblick über die verschiedenen Funktionen in PandaSuite

Um ein Projekt zu erstellen, gehen Sie auf https://pandasuite.com/dashboard/create und klicken Sie auf “New project“, wählen Sie “Blank project“, wählen Sie “Tablet” und wählen Sie die Einstellungen “1280×800” und “Querformat”, dann vergeben Sie einen Namen.

Nachdem Sie es im Studio geöffnet haben, sehen wir uns alle Funktionen an, die wir benötigen, um eine tolle Pepper-Anwendung zu erstellen!

Eigenschaften, Aktionen und Medien

Schauen wir uns zuerst die Media-Funktion an: Klicken Sie auf das Media-Symbol, um das Fenster zu öffnen, in dem Sie alle Ihre Assets in PandaSuite Studio importieren können.

Aktionen ist das, was Ihnen hilft, Ihr Projekt interaktiv zu machen, wir werden darauf zurückkommen.

Das Fenster “Eigenschaften” erlaubt Ihnen, sie auf verschiedenen Ebenen zu verwalten, sei es für Ihr Projekt oder innerhalb einer bestimmten Komponente.

Bildschirme, Vordergrund & Hintergrund

Die Bildschirme sind der Körper Ihrer Anwendung, in dem Sie den Fluss, den Sie zuvor entworfen haben, nachbilden und alles miteinander verbinden.

Im Hintergrund können Sie ein visuelles Hintergrundbild hinzufügen, das auf allen Bildschirmen gleich sein wird, um ein kohärentes Projekt zu erstellen.

Im Vordergrund können Sie technische Elemente wie die Pepper-Chat-Komponente platzieren, die dann für das gesamte Projekt verfügbar sind.

Sie können zwischen den Bildschirmen, Vorder- und Hintergründen mit den 3 kleinen Symbolen oben rechts im Fenster navigieren.

Fangen wir mit dem Hintergrund an. Klicken Sie auf “Add background”, und geben Sie ihm einen Namen. Dann ziehen Sie das Bild, das Sie als Hintergrund verwenden möchten, einfach per Drag & Drop aus dem Medias-Fenster auf den Bildschirm.

Klicken Sie nun auf das Symbol “Foregrounds“, dann auf “Add foreground” und benennen Sie es. Klicken Sie oben auf das Symbol “Komponente” und wählen Sie den Pepper-Chat aus. Ziehen Sie ihn per Drag and Drop neben den Bildschirm, öffnen Sie dann das Fenster “Eigenschaften” und wählen Sie Ihre Dialog-.top-Datei aus. Wenn Sie jetzt auf die Pepper-Chat-Komponente doppelklicken, sehen Sie die Liste aller Tags: Sie werden später nützlich sein, um Verknüpfungen zwischen dem, was angezeigt wird, und dem Dialog zu erstellen (klicken Sie auf “add markers”, um sie als interaktive Aktionen für den Rest des Projekts hinzuzufügen).

“Screens” und “States”

Jetzt, wo Hintergrund und Vordergrund fertig sind, wollen wir uns den “screens” und den “states” widmen.

Die erste wichtige Sache, die es zu beachten gilt, ist der Unterschied zwischen einem “screen” und einem “state” in der PandaSuite: ein screen ist wie ein Ordner, der einen oder mehrere states enthalten kann, ein state ist eine bestimmte Szene, eine Art Schnappschuss zu einem bestimmten Zeitpunkt von einem oder mehreren Objekten. Als Sie Ihren Ablauf entworfen haben, haben Sie wahrscheinlich mehrere Schritte erstellt, die in kleinere Einheiten unterteilt sind: Sie können jetzt die Screens als die großen Schritte Ihres Ablaufs verwenden, um sie klar voneinander zu trennen, und Zustände darin nach Bedarf hinzufügen.

Erstellen Sie Ihren ersten screen und benennen Sie ihn. Klicken Sie oben auf “Eigenschaften” und wählen Sie den Vorder- und Hintergrund, den Sie zuvor erstellt haben, um ihn mit diesem screen zu verknüpfen.

Erstellen Sie einen state in diesem screen und benennen Sie ihn.

Jetzt ist es an der Zeit, kreativ zu werden!

Personalisieren Sie Ihre Zustände mit Objekten

Verwenden Sie die Symbole “Text” und “Image”, um bestimmte Bereiche für Text und Bilder auf Ihrem Status zu definieren. Bei Bedarf können Sie auch das Symbol “Shapes” verwenden, zum Beispiel für Pfeile. Vergessen Sie nicht, sich die “Components” für interaktive Effekte (Scrollen, Pop-up, Drag & Drop…) und technische Lösungen wie einen QR-Code-Reader anzusehen.


Animieren Sie Ihre Objekte mit interaktiven Aktionen

Wenn Sie mit dem Layout zufrieden sind, ist es an der Zeit, die interaktiven Aktionen hinzuzufügen: Wählen Sie ein Objekt aus und klicken Sie dann auf das Symbol “Actions”. Klicken Sie auf “add”, wählen Sie einen Auslöser (single tap, swipe up…) und das Ergebnis.

Beachten Sie, dass es für einen einzelnen Auslöser mehr als eine Aktion geben kann: hier zum Beispiel wird ein einzelner Tap auf eine Sprachflagge die Sprache setzen, ein Dialog-Lesezeichen auslösen, so dass der Roboter etwas sagt, und in einen anderen Zustand gehen, um mit dem Anwendungsablauf fortzufahren. Dies alles wird im Bedienfeld “Aktionen” durchgeführt.

Hinweis: Ein “Gehe zu”-Bildschirm ermöglicht es Ihnen, zwischen Bildschirmen zu wechseln, Sie können natürlich auswählen, zu welchem spezifischen Zustand innerhalb eines Bildschirms Sie gehen möchten. Ein Wechsel zum Status kann nur innerhalb des Bildschirms erfolgen, in dem Sie sich bereits befinden.

Um mit der Pepper-Chat-Komponente zu interagieren, müssen Sie zwischen dem Vordergrund und den Bildschirmen wechseln, um sie auszuwählen.

So können die Pepper-Animationen durch eine interaktive Aktion ausgelöst werden: Choose a trigger > Interact with a component > Switch to Foregrounds > Select your Pepper Chat Component > Start QiAnim.

Apropos Animationen: Es ist wirklich einfach, sanfte Übergänge für Ihre Objekte zu erstellen, da diese automatisch von der PandaSuite gehandhabt werden: Wenn Sie einen verknüpften Zustand erstellen und die Position einer Schaltfläche ändern, wird diese scheinbar sanft zwischen den beiden Positionen gleiten, wenn das Verhalten abgespielt wird. Um die Animation zwischen Ihren beiden Zuständen zu erstellen, wählen Sie einen Auslöser und die Aktion “Go to selected state/screen” (Sie können eine Verzögerung und Dauer für Ihren Übergang festlegen).

Seien Sie vorsichtig, wenn Sie einen Zustand B basierend auf einem Zustand A erstellen, wird Zustand A zum Parent von Zustand B. Alle Objekte sind dann zwischen diesen beiden Zuständen verknüpft. Standardmäßig wird jede Änderung an Zustand A automatisch auf Zustand B angewendet. Um eine Transition zu erstellen, müssen Sie eine Änderung an den Eigenschaften Ihrer Objekte in Zustand B vornehmen. Weitere Informationen finden Sie in der PandaSuite-Dokumentation (States & Transitions – Help Center).

Sie haben nun alle Informationen, die Sie benötigen, um eine großartige Pepper-Applikation zu erstellen, aber vergessen Sie nicht, sie während der Entwicklung regelmäßig zu testen!

Testen Ihrer Anwendung

PandaSuite Studio

In PandaSuite Studio können Sie Ihre Anwendung jederzeit über die Vorschau testen: Speichern Sie Ihre Arbeit und klicken Sie auf das Symbol “Vorschau” oben links. So können Sie überprüfen, dass nichts fehlt und alles so funktioniert, wie es soll.

Bitte beachten Sie, dass einige der roboterbezogenen Eingaben, wie z.B. QR-Code-Reader oder Dialog, nicht nur innerhalb von PandaSuite Studio getestet werden können: Sie werden irgendwann einen echten Roboter benötigen.


Pepper-Viewer

Am Anfang dieser Lektion haben wir erklärt, wie man die PandaSuite Viewer-Anwendung auf Pepper installiert (siehe Herunterladen und Installieren des PandaSuite Viewers auf Pepper). Zögern Sie nicht, Ihre Anwendung auf dem Roboter zu testen, auch wenn sie noch nicht ganz fertig ist: Es ist besser, Fehler und fehlende Teile des Ablaufs frühzeitig zu erkennen.

Öffnen Sie auf Ihrem Pepper-Roboter die PandaSuite-Anwendung auf dem Tablet, indem Sie auf das Symbol klicken:

Beim ersten Start müssen Sie sich mit Ihrem zuvor angelegten PandaSuite-Konto anmelden. Aktualisieren Sie Ihr Projekt auf den neuesten Stand und öffnen Sie es dann. Ihre Anwendung wird dann auf Pepper abgespielt, und Sie können sie ausgiebig testen!

Wir hoffen, dass dieses Tutorial Ihnen hilft, Ihre Ideen zu implementieren und zu testen, sei es ein schneller Prototyp oder eine einfache Demo, und alle Möglichkeiten von Pepper zu entdecken.

Dank PandaSuite Studio werden Sie einen neuen Weg entdecken, um Roboteranwendungen ohne Code zu erstellen, indem Sie Pepper als interaktive Plattform für jedermann nutzen!

Um noch weiter zu gehen, hat Softbank Robotics ein Schritt-für-Schritt-Tutorial veröffentlicht, wie man eine grundlegende Check-in-Anwendung für Pepper auf PandaSuite erstellt, aber in der Zwischenzeit zögern Sie nicht, Ihre eigenen Ideen zu entwickeln, und haben Sie Spaß bei der Umsetzung mit PandaSuite!