1_026_homeoffice_Digital_Co_Working

Digital Co-working

Beschreibung:

Webapp zum strukturierten, gemeinsamen Arbeiten und Lernen von Zuhause

Herausforderung:

Wenig Struktur für das Arbeiten & Lernen von Zuhause
Viele Personen betroffen, die wenig Erfahrung mit dem Homeoffice haben
Geringe Motivation bei Schülern und Studenten zum Lernen alleine, durch Soziale Isolation

Konzept

Durch die Einführung einer Routine in den Tagesablauf werden die Tage im Homeoffice strukturierter. In Teams von maximal 5 Personen kann man sich zusammentun um den Tag gemeinsam zu bestreiten. Diese Teams können zum einen arbeitsbezogen sein und zum anderen für das gemeinsamen Lernen und Erarbeiten von Projekten für Schüler und Studenten erstellt werden. Auch Arbeitsgruppen für bestimmte Hobbies sind denkbar.

Ein fundamentaler Bestandteil sind die Motivational Standups am morgen, sowie die Reacps am Ende eines Tages. Dies sind gemeinsame Zusammenkünfte in den Teams wo jedes Mitglied seine Aufgaben und Lösungswege für den bevorstehenden Tag erläutert, sowie zum Ende, seine erbrachten Leistungen darlegt und bewertet. Durch diesen sozialen Aspekt wird der Austausch, Ideenfindung und Lösung von Aufgaben gefördert sowie die Motivation und die Produktivität durch den "sozialen Druck" gesteigert.

Ein weiterer wichtiger Baustein sind die vorgegebenen Pausenzeiten. Beim Arbeiten und Lernen von zu Hause ist das einhalten von Pausen oft schwierig. Hier bieten Routine-Vorlagen mit verschiedenen Techniken (bspw. Pomodoro) die optimale Lösung um regelmäßige Pausen einzuhalten und das effektive Arbeiten zu stärken. Regelmäßige Pausen führen oft zu neuen Ideen oder Lösungsansätzen.

Funktionen

Login und Registrieren
Eine Startseite mit einer Übersicht über meine Teams/Lerngruppen und alle Routinen die einem Team zugeordnet sind. Routinen sind Datumsunabhängig und müssen in selbständiger Absprache mit den Teammitgliedern geöffnet werden.
Es können neue Teams erstellt und bestehende Teams angepasst oder gelöscht werden. ein Team besitzt immer einen Namen und eine kurze Beschreibung sowie die Teilnehmer. Die Teilnehmeranzahl beschränkt sich auf 3-5 Personen. Mitglieder können über die E-Mail Adresse hinzugefügt werden.
Eine Routine besitzt eine gewisse Anzahl an Unterpunkten/Terminen (Motivational Standup, Teamarbeit, Recap, Pausen). Diese werden anhand der aktuellen Uhrzeit ausgewählt und geöffnet.
Einzelne Unterpunkte besitzen Informationen , Verhaltensregeln und Links zu Tools zur interaktiven Zusammenarbeit (Hangout, Google Drive, Slack, Timer für Pausen,Wie erhole ich mich richtig?).
Neue Routinen können für das jeweilige Team angelegt werden. Dabei kann aus Vorlagen gewählt werden oder benutzerdefiniert eine Routine mit den jeweiligen unterpunkten erstellt werden.

Disclaimer: Nicht alle Funktionen konnten im vollen Umfang umgesetzt werden!

Task-Timetable

Freitag:

Erstes Design in PowerPoint fertigstellen
Business Logic erstellen
Datenbankstruktur

Samstag:

GitHub/GitLab aufsetzen
Datenbank aufsetzen (lokal)
Node-Server aufsetzen (lokal)
Designkonzept erstellen
Prototyp/Clickable designen
SQL Queries schreiben
Node Script schreiben
React informieren
Windows-Server aufsetzen (war in Azure nicht möglich)
HTML & CSS Code erstellen und anpassen

Sonntag:

Prototyp Design finalisieren
React und Node coden
AWS Instanz aufsetzen
Datenbank, Middleware & Webserver auf AWS migrieren
Dokumentation vervollständigen
Pitch-Video erstellen

Technische Umsetzung

Backend: MySQL-Datenbank mit lokaler Xampp Instanz
Middleware: Node-Server für Datenbankabfragen mit REST-API über http-request GET & POST
Frontend: HTML Website mit CSS sowie React App zur Web Interaktion und asynchroner Kommunikation zum Backend durch Node Integration
Design: Erstellung in Sketch und export der HTML und CSS Dateien durch Anima PlugIn

Probleme

Erstellung einer VM in Azure war aufgrund des hohen Traffics am Samstag nicht möglich
Einarbeitung in React war schwieriger als gedacht
Kein sauberer exports des Designs aus Sketch zu einem HTML und CSS file
geringe Frontend Erfahrung

Was wir gelernt haben

Schwierige Aufgaben an Experten geben -> Hilfe akzeptieren ;-)
Wenn man fragt erhält man oft die Hilfe die man benötigt (Slack)
Regelmäßige Abstimmungen sind von hoher Wichtigkeit; Ständiger Kontakt
Wenn man die richtigen Leute hat, geht es schnell (und kann den Prototyp veröffentlichen)
Was ist React.JS? Was ist Node.JS?
Full-Stack Entwicklung