Hast du schon mal eine User Story in einer PowerPoint Präsentation gesehen und dich gefragt ob das nicht auch anders geht? Warum nicht gleich einen Prototypen entwickeln, der schon mal die groben Züge der Anwendung darstellt.

Im Kontext von SAP Fiori Anwendung geht das mit build. Auf build.me kannst du einen Prototypen deiner Applikation per Drag&Drop zusammensetzen. Großartige Funktionen kannst du mit build allerdings nicht einbauen, du wirst trotzdem Entwickler brauchen, welche die finale Anwendung programmieren. Neben der Entwicklung von Prototypen gibt es noch ein paar weitere Funktionen die ganz interessant für dich sein könnten.

[0]: Vorbereitungen

Im folgenden gehe ich mit dir durch die einzelnen Schritte eines build-Projekts, bis du einen groben Überblick über die Funktionen von build hast.

Neben einem Account auf build.me benötigst du einen großen Monitor und Chrome oder Chromium als Browser mit anderen Browsern kann es zu Problemen kommen.
Wenn du dir bereits einen Account angelegt hast, kann es direkt losgehen. Wenn du noch keinen hast? Dann aber schnell, ich warte hier solange auf dich ….. fertig?
Alles klar los geht’s:

Als erstes erstellen wir ein neues Projekt. Dafür gehst du auf Workspace und klickst dann auf New Project.

In dem kleinen Popup-Fenster, dass jetzt erscheint kannst du auch ein bestehendes Projekt aus der Galerie auswählen. Aber wir wollen selbst eines erstellen, keine Angst wir halten es ganz simpel. Du klickst also auf Create New Project und gibst deinem neuen Projekt einen Namen und eine kurze Beschreibung.

In diesem kleinen Beispiel will ich eine simple Applikation zur Zeiterfassung von Arbeitszeiten erstellen.

[1]: Persona anlegen

Als erstes klicken wir auf Create a Persona und legen unsere virtuelle Person an. Du kennst diese Peronas bestimmt bereits aus klassischen User Storys. In diesem Beispiel verzichten wir auf ein Bild und detaillierte Angaben. Wenn du mehr erfahren möchtest kannst du oben rechts auf den link im Editor klicken (hier gelb hinterlegt), dort kannst du weitere Informationen zu Personas falls du dir nicht sicher bist wofür man diese braucht.

Wenn du mit deiner neuen Persona zufrieden bist, klickst du oben rechts auf Done und gelangst in die Übersicht mit allen Personas in diesem Projekt. Wenig überraschend haben wir genau eine Persona. Wenn es nötig wäre könntest du natürlich noch weitere Personas anlegen. Um in unserem kleinen Beispiel könnte es vielleicht der Vorgesetzte sein, der die erfassten Zeiten genehmigen muss. Aber für unser Beispiel reicht uns eine Persona.

 

[2]: Prototypen erstellen

Jetzt geht es richtig los. Hol dir noch schnell einen frischen Kaffee und setz dich gerade hin. In dem nächsten Abschnitt haben wir zwei Optionen entweder laden wir Bilder von unserer neuen Applikation hoch und versehen diese mit Funktionen oder wir bauen unseren Prototypen aus UI5-Elementen.

Die erste Option bietet dir natürlich mehr Freiheiten bei der Gestaltung allerdings musst du bedenken, dass je weiter du dich vom Standard  entfernst desto schwieriger wird die Entwicklung. Über deine Bilder könntest du dann Interaktive Hotspots setzen die sehr limitierte Funktionen auslösen, wie zum Beispiel ein kleines Text PopUp oder ein Wechsel zu einer anderen Ansicht.

Ich klicke also auf Start With Template, wir werden unseren Prototypen direkt aus UI5-Elementen bauen.

Es gibt verschiedene Templates. Responsive eignet sich, um verschiedene Display-Größen mit einer Anwendung zu unterstützen. Daneben gibt es noch einige vorgefertigte Fiori-Anwendungen, die du an deine Bedürfnisse anpassen kannst. Als Template wählen wir Freestyle und klicken dort auf Select.

Auf der folgenden Seite sehen wir alle Ansichten innerhalb dieses Prototypen, hier könnte zum Beispiel noch eine Ansicht für Einstellungen oder eine Detailansicht angelegt werden. Zwischen diesen Ansichten können wir auch in unserem Prototypen wechseln. Unsere kleine Anwendung wird jedoch nur eine Ansicht haben.

Als nächstes öffnen wir unsere Page 1, klicke einfach auf die leere Miniaturansicht unserer App. Darauf hin öffnet sich der Prototypen Editor.

[3]: Der Prototypen Editor

Oben rechts aktivierst du den Header und die Navigation. Du gibst noch einen Titel ein und schon ist unsere App nicht mehr ganz so leer. Der $UserName ist hier ein Platzhalter für den Nutzernamen unseres Mitarbeiters hat aber keine weitere Funktion. Genau wie der Navigation Pfeil, er impliziert nur, dass sich unsere Anwendung in einem größeren Kontext befindet.

Als nächstes brauchen wir den Kalender. Den findest du im linken Menü unter Controls schnell geht es wenn du in die Suche Calendar eingibst. Per Drag & Drop ziehst du ihn aus der Liste direkt auf die leere Fläche. Wenn es nicht sofort klappt, nicht verzweifeln, der Editor funktioniert nicht immer so wie man es möchte und manchmal muss man die Elemente erstmal irgendwo platzieren bevor man sie an die richtige Stelle verschiebt.

Den Kalender passen wir noch etwas an, dafür ändern wir links den “First Day of Week” auf 1 damit unsere Wochen mit Montag beginnen. Als nächstes fügen wir neben dem Kalender ein Formular ein, dafür suchst du nach Form und ziehst das Element neben den Kalender. Im Zweifel musst du ein wenig herumprobieren, bis Formular an der richtigen Stelle sitzt.

In dem Formular fügen wir insgesamt 5 Rows hinzu, die Elemente die bereits in dem Form sind kannst du einfach per Rechtsklick -> Delete löschen oder in dem Outline unten rechts auch per Rechtsklick. Jede Row braucht ein Label für den Tag und drei Textfelder. Einen Formats-Hinweis schreiben wir in die Textfelder. Alle Elemente für unser Form findest du in der Controls-Liste auf der linken Seite. Wir brauchen Row, Input und Label diese ziehst du unten links ins Outline-Fenster. Elemente die du mehrfach brauchst kannst du im Outline duplizieren mach einfach mal einen Rechtsklick auf einen Input

Wenn du das Formular nicht auf Anhieb hin bekommst, ist das nicht schlimm, die Bedienung ist etwas fummelig und teilweise nicht intuitiv. Unter dem Formular fügen wir noch einen Segmented Button ein, den findest du auch über die Suche.

Bevor du dich zu viel über das Formular ärgerst oder zu viel Zeit damit verbringst, kannst du es auch einfach so lassen wie es ist. Schließlich ist das ganze nur ein Test und das Formular erfüllt eh keine Funktion. Meinem Beitrag kannst du auch ohne richtigem Formular folgen.

Jetzt konfigurieren wir die Button-Leiste, dieser soll die drei Funktionen Speichern, Aktualisieren und Abschicken enthalten.

Wenn du mit deinen Buttons zufrieden bist schließen wir unseren Ausflug in den Protoypen Editor ab. Man kann hier noch viel mehr machen und wenn du Lust hast kannst du deinen Prototypen ja noch etwas erweitern. Als nächstes wollen wir uns noch die Survery-Funktion ansehen.

[4]: Survey

Die Survey Funktion ist sehr praktisch um Feedback von Anwendern zu sammeln. Deine Anwender können die Applikation testen und Feedback hinterlassen. Aber eins nach dem Anderen oben rechts klicken wir auf Create Study. Als Titel kannst du eingeben was du möchtest.

Du landest nun in einer Übersicht mit allen Fragen innerhalb dieser Study. Hier siehst du jetzt eine Miniaturansicht unseres Prototypen. Wenn du oben auf New Question klickst könntest du eine weitere Frage anlegen uns reicht jedoch eine.

Wenn du auf die Miniaturansicht unseres Prototypen klickst, öffnet sich ein neuer Editor, in dem du eine Frage formulieren kannst. Es gibt verschiedene Möglichkeiten auf unsere Frage zu antworten. Ich denke die verschieden Optionen erklären sich von selbst, du kannst sie später ja einmal ausprobieren oder mehrere Fragen mit unterschiedlichen Typen anlegen.

Gib einfach irgendeine Frage ein und belasse die anderen Optionen so wie sie aktuell sind.

Wenn du soweit bist klickst du oben rechts klicke auf Done. Danach gelangen zurück in die Übersicht und können oben rechts einmal auf Preview klicken, dort können wir uns den Fragebogen anschauen, ohne ihn zu veröffentlichen.

Die Feedback Funktion ist eigentlich sehr intuitiv zu bedienen. Der Anwender kann in der Anwendung alle Elemente anklicken, in meinem Fall passiert nichts, da ich keine Funktionen hinterlegt habe. Mit Drop Comments kann der Tester an einer beliebigen Stelle einen Kommentar hinterlassen und zusätzlich angeben ob der eher unzufrieden oder zufrieden ist.

Wenn der du fertig mit deinem Feedback bist, klickst du oben rechts auf Done und die Antworten werden übermittelt. Im Preview-Modus werden allerdings keine Daten gespeichert. Wir kehren zurück zu unserem Fragebogen und klicken oben rechts auf Publish. Wir bekommen eine URL die wir mit allen Testern teilen können. Die Tester bekommen genau wie in der Preview die App ausprobieren und Kommentare hinterlassen. Kopiere die URL in einen neuen Tab und fülle einmal unsere kurze Survey aus. Wenn du nach dem Absenden zurück in deinen Workspace wechselst sollte es einen ersten Teilnehmer in deiner Survey geben wenn nicht, drück mal F5.

Nimm dir ruhig mal die Zeit um die verschiedenen Tabs und Funktionen anzusehen. So gibt es zum Beispiel eine Heatmap-Funktion, die dir anzeigt wo deine Tester hingeklickt haben.

Damit beenden wir unseren Ausflug in die Survey-Funktion.

[5]: Zusammenfassung

Diese Punkte solltest du dir Merken:

• build ist ein Tool zur Erstellung von Prototypen
• es bietet verschiedene andere Werkzeuge an, die dich in der Entwicklung deiner Anwendung unterstützen
• die Feedback Funktion kann sehr hilfreich sein um die Anwendung den Wünschen deiner Nutzer anzupassen
• es ersetzt nicht einen Entwickler
• ein Export des Prototypen in die Web IDE ist möglich

 

Du interessierst dich für Fiori und hast Lust coole Projekte mit uns zu machen? Wir suchen dich! Schau doch mal in unserer Stellenbeschreibung vorbei.