Modul: Smart Home Praktikum

4-köpfiges Team

Bei diesem Projekt habe ich die Aufgaben des UI-Designs (zusammen mit einem Teamkollegen), Frontend-Entwicklung und Projektleitung übernommen.

3. Semester
Computer Science and Media
Master of Science

Hochschule der Medien


Projektauftrag

Beim Smart Home Praktikum soll eine praktische Erfahrung zum benutzerzentrierten Design von Smart-Home-Anwendungen gewonnen werden. Dabei wird ein persona-getriebener Design-Ansatz verfolgt, der auf persönliche (anpassungsfähige) Benutzeroberflächen abzielt, die auf die individuellen Bedürfnisse und Vorlieben des Benutzers zugeschnitten sind. Entwicklung von Konzepten und Implementierungen mit Zwischenpräsentationen und Diskussionen im Plenum.

Folgende Inhalte sind zentral:

  • User-Centered Design
  • Personas und Szenarien
  • Konzeption eines personalisierten Benutzererlebnisses
  • Implementierung auf Basis existierender IoT-Plattformen
  • Reflektieren des Konzepts und der Implementierung durch Überprüfung auf Benutzerfreundlichkeit und Barrierefreiheit

Kurzbeschreibung des Projekts

LeafAlone ist ein platzsparendes vollautomatisches Bewässerungssystem für Pflanzen. Der Wassertank befindet sich direkt unter der Pflanze, sodass durch sickerndes Wasser wieder sicher in den Tank zurückgeleitet wird. Mit Hilfe von drei Sensoren werden die Luftfeuchtigkeit, Erdfeuchtigkeit und Temperatur gemessen. Anhand der Werte wird die Pflanze ideal bewässert. Ein Ultraschall-Sensor sorgt dafür, dass der Wasserstand im Tank kontinuierlich überprüft wird. Die Verwaltung der Pflanzen kann leicht über die dazugehörige App gehandhabt werden. Die Anwendung ist leicht zu bedienen und passt sich an die Bedürfnisse der Benutzer an.

BEDIENungsanleitung lesen

Umfang des Minimum Viable Products

  • Responsive Web-App für das System
  • Personalisierung der Web-App (OpenAPE)
  • Der Nutzer kann in der App mehrere Pflanzen in der Anwendung verwalten
  • Nutzer kann Pflanzenart und Topfgröße in der Web-App angeben
  • Dem Nutzer wird Information zum perfekten Standort der Pflanze angezeigt
  • Luftfeuchtigkeit und Temperatur wird gemessen und in Web-App angezeigt
  • Anzeige der aktuellen Feuchtigkeit der Pflanzenerde durch Symbole 😀😞
  • Nutzer kann die Parameter des automatischen Gießvorgangs beeinflussen
    • bspw. Wassermenge, Schwellwert der Feuchtigkeit
  • Automatische Gießvorgänge
  • Nutzer kann über die Web-App die Pflanzen manuell gießen
  • Anzeige des Wasserstands im Tank
  • Verhindern eines Überlaufs durch Zurückführen in Wasserreservoir
  • Bilder der Pflanzen austauschen können
  • Automatische Bewässerung pausieren
  • Auswertung der Sensordaten über einen Zeitraum darstellen

Frontend

Beim Frontend handelt es sich um eine responsive Web-Anwendung, die mithilfe des Mobile-First-Ansatzes entwickelt wurde. Für die Umsetzung wurde Vue.js verwendet, ein clientseitiges JavaScript-Framework. Zusätzlich wurde die Vue UI Bibliothek Vuetify verwendet. Diese bietet viele Hilfsklassen und Eigenschaften, die das Entwickeln von Anwendungen für verschiedene Endgeräte bedeutend erleichtert.

Um die API des Backends mittels HTTP Aufrufe ansprechen zu können, wurde die JavaScript Bibliothek Axios verwendet. Für die Visualisierung der Sensor-Statistiken wurde die kostenlose JavaScript Bibliothek Chart.js genutzt sowie das Annotation Plugin. Die vom Nutzer eingestellten Individualisierungen werden bei OpenAPE gespeichert. Dies wurde durch Kommunikation mit der REST-API von OpenAPE realisiert. Die Webanwendung läuft auf einem NGINX Websever.

Wichtige Erfahrungen/Prägungen

Ich hatte davor noch nie an einem Projekt mitgearbeitet, dass eine so umfangreiche Hardwarekomponente beinhaltet hat und sich in das alltägliche Leben in einem Smart-Home eingliedern sollte. Besonders interessant war der starke Fokus auf die nutzerzentrierte Gestaltung, vor allem auf die Möglichkeiten der Personalisierung. Hierfür wurden besonders die erstellten Personas häufig mit einbezogen und immer wieder reflektiert, ob ihre Bedürfnisse und Wünsche von der Anwendung abgedeckt werden können. Zudem wurde der Ansatz des Minium Viable Product genutzt, um im vorgegeben Zeitraum ein erstes lauffähiges Produkt erstellen zu können. Für die kollaborative Designarbeit wurde der Mobile First Ansatz verfolgt und das Prototyping-Tool Figma verwendet. Mithilfe der Wireframes konnten schnell verschiedene Interaktionsmöglichkeiten ausgelotet und ausgewählt werden.

Demovideo

Bildergalerie