Überblick
Stell Dir vor, Du möchtest eine App für dein Team erstellen, mit der jeder sein Essen bestellen kann. Die Bestellung soll dann automatisch per E-Mail an den Caterer geschickt werden. Klingt kompliziert? Muss es aber nicht sein!
In dieser Artikelreihe erfährst Du, wie Du auch ohne Programmierkenntnisse solche Apps selbst bauen kannst. Das sind die sogenannten „No-Code-Lösungen“. Bedeutet: Du brauchst keine einzige Zeile Code zu schreiben. Stattdessen nutzt Du fertige Bausteine und Tools, die Du zusammenklickst.
Schritt für Schritt zeige ich Dir, was die Plattform alles kann und wie Du damit deine Essensbestell-App erstellst. Am Ende hast Du eine nützliche Lösung, die deinem ganzen Team die Bestellung erleichtert. Und das Beste: Du musst dafür kein IT-Profi sein! Auch als normaler Anwender kannst Du solche Apps selber bauen.
Ein Wort noch bevor wir starten: Die hier angezeigte App ist nur einer von vielen Wegen, wie man die Anforderungen umsetzen kann. Sonderfälle gibt es immer und Essensbestellung bei Organisation A ist anders als Essensbestellung bei Organisation B. Hier versuche ich einen Gleichgewicht zwischen einfache, leicht nachvollziehbare Schritte und Praxisnähe herzustellen. Ich würde mich auf Feedback freuen (per Mail an hello@opt4ino.de oder auf LinkedIn), ob es mir gelungen ist oder nicht.
Voraussetzungen
Die fett markierten Varianten nutze ich in dieser Anleitung.
– Power Apps Probeversion (kostenlos) ODER Power Apps-Plan (1 Nutzerlizenz) ODER Teams Plan (PowerApps für Teams) ODER Power Apps Community Plan (kostenlos).
– Mindestens die Berechtigungsstufe “Environment Maker” (manchmal als Umgebungsersteller übersetzt)
– Solltest Du noch keine Community-Version haben: https://learn.microsoft.com/de-de/power-apps/maker/developer-plan oder eine Trial-Version auf https://make.powerautomate.com
– PC- und Web-Grundwissen- E-Mail-Postfach (idealerweise über Microsoft 365 Outlook, Outlook.com oder Gmail)
Zeitplanung
- Für die Umsetzung + Lesezeit: Mindestens 1 Stunde, besser lieber 2 Stunden einplanen am Anfang
- Stufe: Basis
So gelingt die Erstellung, als erstes geht es um die Registrierung des Plans (falls noch nicht geschehen).
Schritt 1: Power App Plan registrieren
Wenn Du den Developer Plan nutzt, kannst Du bis zu 750 Mal im Monat deine App laufen lassen („Flow-Ausführungen“). Für Deine Tests und ersten Versuche reicht das locker aus.
Außerdem hast Du in diesem Plan 2 GB Speicherplatz für deine Datenbank. 2 GB sind eine Menge Platz, vor allem wenn die App noch ganz am Anfang steht.
Zum Ausprobieren und Üben ist der Developer Plan also perfekt geeignet.
- https://aka.ms/PowerAppsDevPlan öffnen.
- Auf “Kostenlos starten” klicken
- Mit einem Microsoft-Konto registrieren (Unternehmenskonto wäre besser)
Profi- Tipp: Ich empfehle, eher mit den Daten anzufangen, obwohl es vielleicht am Anfang nicht intuitiv vorkommt. In diesem Artikel benutze ich Excel als Datenquelle. Von hier aus kann man sich zu den “mächtigeren” Werkzeuge wie Dataverse Tables oder SharePoint-Listen.
Wichtiger als Daten sind jedoch die Anforderungen – besonders dann, wenn Du die Umsetzung selbst in die Hand nimmst. Daher werde ich die Herstellungsschritte anhand der Anforderungen aufzeigen.
Schritt 2: Funktionen oder Anforderungen beschreiben
Nun wollen wir überlegen, was wir von der App wollen – die Funktionalität. Genauer gesagt: die Anforderungen. Diese können so ausführlich oder knapp wie Du magst – schließlich bist Du derjenige oder diejenige, die sie umsetzt. Allerdings hat diese Dokumentation folgende Vorteile:
- Solltest Du eine Zeit lang die Arbeit unterbrechen, kannst Du diese Dokumentation nutzen, um schnell wieder auf den aktuellen Stand zu kommen.
- Du kannst die Anforderungen nutzen, falls Du Unterstützung brauchst und die Umsetzung an jemand anderen übergeben möchtest.
- Es hilft sehr dabei, die richtigen Datenobjekte zu identifizieren.
- Oft scheitern auch professionelle Umsetzungen daran, dass es den Anforderern selber nicht klar war, welche Anforderungen es denn genau gibt (merke das Wort „genau“)
Wie formuliere ich meine Anforderungen?
Es gibt viele Arten, wie Anforderungen in Textform formuliert werden. Erfahrungsgemäß fangen viele in etwa so an:
“Die App muss mir zuerst ein Auswahlfeld mit Tagesmenüs zeigen.Es darf nur ein Menü ausgewählt werden.Wenn ich an diesem Tag kein Menü mag, kann ich aus einer Liste mit Einzelprodukten auswählen.”
Diese Formulierung ist weniger vorteilhaft, da es gleich mehrere Unklarheiten erzeugt. Hier die TOP 3:
- Es legt sich von vornherein fest auf eine bestimmte Umsetzung (“Auswahlfeld”), obwohl hier eigentlich auch eine Combobox, eine Mehrfachauswahl-Liste oder eine andere Darstellung möglich wäre.
- Es ist teilweise widersprüchlich – “Es darf nur ein Menü ausgewählt werden” deutet darauf hin, dass nur eine Menüauswahl möglich sei. Im nächsten Satz jedoch “Wenn ich an diesem Tag kein Menü mag…” wird eine Liste mit Einzelprodukten erwähnt. Daher die Folgefragen: Wo kommt diese Liste her? Wie und wann soll sie angezeigt werden?
- Es lässt Rollenbeschreibungen weg – “Ich”-Form-Anforderungen gehen meist von der einen Person aus. Es ist nicht klar, ob auch Teammitglieder damit gemeint sind, und wenn ja, ob sie auch die Auswahlmöglichkeiten haben.
Es gibt strukturierte Sätze, die man als Vorlage nutzen kann. Ich werde hier die gängige Formulierung der Anwendergeschichte (die sog. User Story) nutzen, da diese meiner Ansicht nach leichter zu merken und nachvollziehbar ist. Hier ist die Grundform:
“Als [Rolle] möchte ich [Funktion] haben, um [Ziel] zu erreichen”.
Dazu kommen Einschränkungen (auch Akzeptanzkriterien genannt), um die Hauptanforderung zu konkretisieren.
Anmerkung: Es gibt auch andere Bezeichnungen dafür, manche sagen nur Stories oder Tickets dazu.
Für unsere App formuliere ich daher folgende Stories:
- Als MitarbeiterIn in Team A möchte ich die verfügbaren Tagesmenüs vom Caterer sehen und auswählen können, um die Essensbestellung vorbereiten zu können.
Einschränkungen: Es soll nur ein Menü auswählbar sein.
Ich soll meine Bestellung speichern können.
Der Preis für jedes Menü ist deutlich sichtbar.
Ein Hinweis “Nur Barzahlung möglich” ist deutlich sichtbar.
- Als MitarbeiterIn in Team A möchte ich, falls mir die Tagesmenüs nicht zusagen, die Option haben, direkt aus einer Liste mit Einzelprodukten vom Caterer auszuwählen, um die Essensbestellung vorbereiten zu können.
Einschränkungen: Es sind beliebig viele Einzelprodukte auswählbar.
Der Preis für jedes Einzelprodukt ist deutlich sichtbar.
Ich soll meine Bestellung speichern können.
- Als MitarbeiterIn in Team A möchte ich meine Bestellung absenden können, um das Essen rechtzeitig geliefert zu bekommen.
Einschränkungen: Es sind beliebig viele Einzelprodukte auswählbar. - Als MitarbeiterIn in Team A möchte ich eine Bestellbestätigung sehen und nachträglich abrufen können, als Nachweis, falls es später zu Problemen bei der Essenslieferung kommt.
- Als für die Bestellung verantwortliche Person für Team A möchte ich eine Übersicht aller Bestellungen aus Team A sehen und die Bestellung gesammelt am Caterer schicken können.
Einschränkungen: Nur Menü-/bzw. Produktnamen, Einzelsummen pro Person und Gesamtsummen sollen angezeigt werden.
Natürlich bildet das nicht alle möglichen Fälle oder Prozesse ab. Manche Teams könnten es zum Beispiel vorziehen, keinen Verantwortlichen zu haben, sondern die Bestellungen automatisch um X Uhr abschicken. Es hilft manchmal, diesen Prozess auch mit abzubilden oder mit KollegInnen zu besprechen.
Anmerkung zum Umfang: In der Regel gilt: Je mehr Anforderungen von Anfang an vorhanden sind, desto besser können wir ein geeignetes Datenmodell und die Komponenten der Lösung bestimmen.
Profi- Tipp: Achtet auf die Wortwahl, nutzt wenn möglich die gleichen Worte, um die gleichen Objekte in verschiedenen Anforderungen zu beschreiben. Das erleichtert das Verständnis und minimiert den Aufwand.
Auf die einzelnen Anforderungen gehe ich in den folgenden Schritten ein.
Schritt 3: Umsetzung der Menü-Anforderung
Zunächst kannst Du die Datenobjekte herausfiltern. Markiere dazu einfach alle Nomen im Text, dann hast Du die Datenobjekte schon gefunden. In unserem Beispiel:
Als MitarbeiterIn in Team A möchte ich die verfügbaren Tagesmenüs vom Caterer sehen und auswählen können, um die Essensbestellung vorbereiten zu können.
Einschränkungen:
- Es soll nur ein Menü auswählbar sein.
- Ich soll meine Bestellung speichern können.
- Der Preis für jedes Menü ist deutlich sichtbar.
- Ein Hinweis “Nur Barzahlung möglich” ist deutlich sichtbar.
Nicht jeder Nomen wird zum Datenobjekt. Die Bestimmung, “MitarbeiterIn in Team A” lässt sich z.B dadurch erreichen, dass ich die App nur mit meinem Team teile (dieses ist in der Regel bereits als Gruppe im Unternehmensverzeichnis gepflegt).
Caterer können wir ebenfalls getrost auslassen, wenn es nur einen gibt (wird also implizit abgebildet).
Wir werden für jedes Datenobjekt eine eigene Excel-Datei anlegen. D.h. bitte folgende Dateien anlegen:
- Menu.xlsx – Link zur Vorlage auf meinem OneDrive
- Bestellung.xlsx – Link zur Vorlage Bestellungen auf meinem OneDrive
Wichtig: Diese Dateien müssen allen Teammitgliedern zur Verfügung stehen. Idealerweise befinden sie sich in OneDrive, auf einer SharePoint-Site, in Dropbox oder auf einer anderen geteilten Ablage. Netzlaufwerke sind auch möglich, diese brauchen aber erweiterte Rechte und Konfiguration, die hier den Rahmen sprengen würden.
VORBEREITUNG TIPP: Ich werde hier OneDrive for Business einsetzen, also gehe ich davon aus, dass Du ein Konto hast. Falls nicht, gehe zuerst zu “Zwischenschritt: OneDrive For Business ausprobieren“, um Infos zu bekommen, wie Du eins bekommst.
App-Erstellung
- Zuerst auf make.powerapps.com einloggen
- Wähle “Erstellen” aus der linken Navigationsleiste.
- Wähle “Leere App”
- Wähle “Leere Canvas-App”
- Wir wollen, dass Leute vom Handy heraus bestellen können, wählen im letzten Schritt also “Telefon”
- Geben wir der App einen Namen, hier “Demo-Essensbestellung”
Profi-Tipp: Man kann auch mit einer Vorlage beginnen. Es ist jedoch vorteilhaft, zuerst Schritt-für-Schritt vorzugehen, um die Hintergründe genau zu verstehen.
Apps lassen sich in “Screens” aufteilen. Diese eher als “Leinwände” zu bezeichnende Oberflächen bündeln Funktionen und tragen zur Übersichtlichkeit bei. Nach Erstellung gibt es ein einziges “Screen”, die “Screen1”.
- Um Screen1 umzubenennen, muss dieses Element links in der Strukturansicht ausgewählt werden.
- Klicke auf das “…”-Menü, um es zu öffnen.
- Wähle “Rename” aus.
- Gib “Bestellaufnahme” ein und drücke Enter. Der Screen wird umbenannt und erscheint dann in der Strukturansicht mit dem neuen Namen.
Bestellaufnahme gestalten
Nun benötigen wir ein Paar Elemente zur Ausgestaltung des Bestellaufnahme-Screens:
- Drücke auf + in der linken Leiste oder oben auf “Einfügen” (ich nutze lieber die option oben, weil das den Arbeitsfluss weniger unterbricht)
- Drücke auf “Layout” um den Abschnitt erweitern zu lassen. Wir werden die Oberfläche vertikal aufteilen, daher brauchen wir zuerst einen “Vertikaler Container”. Wähle das aus. Du kannst ebenfalls im Suchbox des Einfügen-Menüs “Vertikaler Container” eintippen.
- Dehne den Container auf die volle Größe des Screens aus.
- Benenne den Container wie beim Screen auf “ctn Bestellung Layout”
- Nun benötigen wir einen Titel. Dieses lässt sich als Beschriftungselement abbilden. Gehe dazu wie im Schritt 1 auf “Einfügen” und wähle diesmal “Beschriftung” aus.
- Benenne die Beschriftung wie im Schritt 2 beim Screen auf “lbl Titel” um.
- In der Leiste oben können wir zuerst die Schriftgröße anpassen – von 13 auf 54. Der Text wird kurz nicht mehr zu sehen sein, daher musst Du jetzt noch die Ausrichtung des Elements anpassen. Die Einstellung lässt sich im rechten Bereich, bei der Option “Im Container ausrichten”. Wähle hier “Gestreckt”. Direkt darunter kannst Du den Schalter “Flexible Höhe” tätigen. Sofort wird der Text die gesamte verfügbare Höhe einnehmen – aktuell den gesamten Container. Das ändert sich aber gleich. Ändere den Text (erste Zeile bei den Eigenschaften oder einfach das Steuerelement doppelklicken) in “Bestellung abgeben” um.
- Füge ein Element wie im Schritt 1 ein, nur vom Typ “Dropdown” diesmal. Nenne ihn “drp Menu Auswahl”.Die Schriftgröße setzt Du auf 24. Im übrigen soll es genau wie die Beschriftung konfiguriert sein, sodass es am Ende so aussieht:
- Hier kann man die Applikation schon mal zwischenspeichern. Dazu klicke auf das Diskettensymbol oben rechts.
Profi-Tipp: Dir ist sicherlich aufgefallen, dass ich die Elemente mit einem Präfix z.B. “btn” oder “lbl” im Namen versehe. Man kann dies auch weglassen, das hilft jedoch später sehr bei der Suche. Wenn man z.B. nach einem Button sucht, gibt man im Suchkasten zuerst “btn” ein und erhält nur die Button-Steuerelemente. Bei größeren Apps spart das Zeit. Du kannst aber gerne eigene Namenskonventionen anwenden
In diesem Screen wollen wir nun das Tagesmenü anbinden – die Menu.xlsx. Hierfür habe ich drei Menüvarianten in der Exceldatei auf meinem OneDrive for Business gespeichert.
Daten einbinden
Um die Daten in der App einzubinden, folge diese Schritte:
- Drücke auf “Daten” in der linken Leiste oder oben auf “Daten hinzufügen” (ich nutze lieber die option oben, weil das den Arbeitsfluss weniger unterbricht)
- Suche nach “Excel Online (Business)” und klicke darauf.
- Eine Verbindung wird erstellt mit Deinem Benutzernamen z.B. ana@muster.com und als einzige Option angezeigt. Klicke erneut darauf. Es öffnet sich rechts ein Panel “Location auswählen” – Hier erscheinen z.B. Deine Microsoft 365 Gruppen und OneDrive. Wähle hier “OneDrive for Business”.
- Wähle “Dokumente”
- Suche den Ordner aus, wo die Menu.xlsx-Datei gespeichert wurde, und klicke diesen an.
- Klicke schließlich auf die Menu.xlsx-Datei.
- Wähle die Tabelle aus, wo sich Deine Daten befinden.
- Klicke auf “Verbinden”.
- In diesem Fall habe ich eine eindeutige Nummer für jedes Menü, nämlich die ID-Spalte. Ich wähle hier deshalb “Eindeutige Spalte aus Excel-Tabelle verwenden”.
- Klicke erneut auf “Verbinden”.
- Die Datenquelle wurde nun hinzugefügt.
TIPP: Falls hier die Meldung “Die Datei enthält keine Tabellen…” kommt, stelle sicher, dass die Auswahl in Menu.xlsx tatsächlich als Tabelle formatiert wurde (Excel-Option “als Tabelle formatieren”. Ich habe der Tabelle auch einen sprechenden Namen gegeben (Menütabelle), sonst heißt es Tabelle1.
Auswahl einbinden
- Wähle das Steuerelement “drp Menu Auswahl” durch Linksklick darauf (entweder in der Hauptansicht oder in der Strukturansicht) aus.
- Suche im rechten Eigenschaften-Panel die Eigenschaft “Elemente” (eng. Items). Auf das Auswahlmenü klicken (initial steht dort “Keine”) und die Excel-Datenquelle auswählen (bei mir Menütabelle).
- Sofort ändert sich die Beschriftung in der Hauptansicht, bei mir wird “Überbackene Feta” angezeigt, weil dies in der ersten Zeile meiner Excel-Datei eingetragen ist.
- Um die Auswahl zu testen, klicke auf das “Play”-Button, das startet den Vorschaumodus:
. Dieser wird über die X-Schaltfläche oben rechts beendet.
- Im Vorschaumodus kann auf alle Elemente geklickt werden, wie bei einer normalen Ausführung. Beim Klick auf die Auswahlfläche für die Bestellung sollten nun alle Einträge aus der Excel-Liste angezeigt werden. So sieht es bei mir aus:
- Verlasse den Vorschau-Modus mit dem X-Button.
Speichere den aktuellen Stand der Anwendung über die Schaltfläche “Speichern” (oben rechts).
Teil 2 coming soon…
Wie fandest Du den Artikel? Ich freue mich auf Feedback freuen. Per Mail oder auf LinkedIn, ob es mir gelungen ist oder nicht. Gerne auch weitere Fragen, die ich in künftigen Beiträgen beantworten kann.