In unserem Projekt haben wir, innerhalb unseres Semesters an der Hochschule für Gestaltung Schwäbisch Gmünd, ein automatisiertes Hydroponisches Bewässerungssystem mit App entwickelt. Mit diesem System kann man Pflanzen schneller großziehen und die richtigen Nährstoffe für die Pflanzen dosieren.
Der Stack besteht aus:
der mit Vue.js umgesetzten App,
einem Backend 2, dass die Daten aus der Datenbank für die App bereitstellt,
einem Backend 1, dass die Daten aus dem Hydroponischen System in die Datenbank einspeist
und aus den Nodes die Sensordaten sammeln und die Hardware kontrollieren.
Unser Prjektteam besteht aus:
Noah Mantel
Ligia Dietze
Maximilian Becht
Marius Schairer
Die App wird über das zweite Backend mit Daten aus der Datenbank versorgt. Über den Setup Prozess kann man seine Gärten, Module und Pflanzen konfigurieren und anschließend in Home und Kalender überwachen.
In der App.vue wird eine Navigationsleiste eingebunden, mit der man zwischen den Settings, dem Kalender und dem Home wechseln kann
Aktuell ist der 'Home'-Teil der App umgesetzt und wird bereits mit tatsächlichen Daten versorgt.
Dort wird entweder der PlantHome.vue oder der PlantGarden.vue-Screen gerendert.
In der PlantHome wird eine Economy-Card gerendert, auf der ein paar Daten über die Ökologischen Erparnisse des Nutzers gezeigt werden. Aktuell noch hardgecodet, aber sobald unser System ein wenig länger läuft kann zur Ermittlung dieser Daten basierend auf Erfahrungswerten eine Formel aufgestellt werden
Darunter werden in einer Carousel-Component die GardenCards gerendert, so kann man im Homescreen zwischen allen Gärten hin- und herswipen.
In der Headbar der GardenCard wird der Titel des Gartens angezeigt, darunter die Füllstände des Düngermoduls mit der Level.vue - Component und anschließend, das tatsächliche System repräsentierend angeordnet, die Module mithilfe der Module.vue. Die ausgefüllten Module kann man antippen, welche einen auf die Detailseite PlantGarden weiterführen.
Auf der PlantGarden - Seite wird eine Carousel-Component dargestellt, in welcher man zwischen allen Modulen des vorher angetippten Gartens hin- und herswipen kann, das zunächst angezeigte Modul ist jedoch das zuvor ausgewählte. Mit einem Homebutton in der linken oberen Ecke, der in der Homebutton.vue definiert wird, kann man zurück zur PlantHome.vue wechseln.
Darunter wird die ModuleCard.vue gerendert. Der Header zeigt den Namen der Pflanze an, welche in diesem Modul angepflanzt ist und in der ModuleCard selbst werden links die Wachstumsphasen der Pflanze angezeigt welche in der templateData-Kollektion der Datenbank gespeichert sind. Rechts daneben befindet ist die PieChart.vue eingebunden, welche abhängig von den aus dem Backend 2 mitgesendeten Parametern phases, percentGrown und harverstIn anzeigt wie viel Zeit noch verbleibt bis die Pflanze geerntet werden kann und wie viele der Wachstumsphasen schon durchlaufen sind.
Darunter, ebenfalls in der Carousel-Component, zeigt die StatisticCard.vue Vuetify-Sparkline-Components an welche mit den SensorDaten aus der Datenbank versorgt werden.
Unter jeder Carousel wird die Delimiter.vue gerendert, welche indiziert wie viele Carousel-Einträge es gibt und welcher aktuell angezeigt wird.
npm install
npm run serve
npm run build
npm run lint
Siehe Konfiguartionsreferenz.