Organize like a pro!Hannes Schurig (790790) Karin Lampesberger (792124)Dustin Wulf (798876) Rebecca Ritter (792118)

Proganizer.de – Projekte organisieren

Gliederung• Projektvorstellung• Zielsetzung• Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick

Projektvorstellung

• Online-Applikation

• Organisation von Projekten

• Vereinigung Dropbox, Trello und Facebook

So einfach wie möglich!

Gliederung Projektvorstellung• Zielsetzung• Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick

Bis auf Kommentare, keinerlei Art der direkten

Kommunikation

Stand der Dinge zu Beginn

Login und Registrierung

ToDo‘s anlegenToDo-Kategorien

anlegen

Filemanager Dateien Up-/-download

ToDo‘s Benutzern zuordnen

Eigenschaften von Dateien anzeigen

Profilbild ändern

Projekte anlegen

Nutzer einladen

!

Zielsetzung (Exposé)

MUSS-Kriterien KANN-Kriterien ABGRENZUNGS-Kriterien

Chat Sidebar, private Nachrichten Benutzerrollen

Synchronität Kontakte Suchfunktion

E-Mail-Benachrichtigungen Detailliertes Benutzerprofil Baumstruktur Filemanager

Designüberarbeitung Video-Chat Gamecharakter (Spielelemente, Erfahrungslevel etc.)

Kalender

ToDo-Sortierung

Multiup-/-download FilemanagerNutzen von Proganizer um

Proganizer zu erweitern!

Stand der Dinge zum Ende

Login und Registrierung

ToDo‘s anlegenToDo-Kategorien

anlegen

Filemanager Dateien Up-/-download

ToDo‘s Benutzern zuordnen

Eigenschaften von Dateien anzeigen

Profilbild ändern

Projekte anlegen

Nutzer einladen

Chat

Sidebar mit privaten Nachrichten, Kontakten und Activity Log

Synchronität

Mailbenachrichtigungen

Detailliertes Benutzerprofil

DesignKontaktformular

Gliederung Projektvorstellung Zielsetzung• Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick

Zeitplanung

ToDo-Bereich, Mailbenachrichtigungen, Sidebar

09.04

DesignEinarbeitung Socket.ioBugfixes

07.05

ChatChat-Raum-HandlingKontaktformularSidebarBenutzerprofil

18.06

SynchronitätBugfixesVerfeinerungen

23.07

Zeitplanung

Gliederung Projektvorstellung Zielsetzung Zeitplanung • Umsetzung• Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte

• Ausblick

Umsetzung - Verantwortlichkeiten

Hannes

Karin

Dustin

Rebecca

MailbenachrichtigungenProfileinstellung

KontakteChatPrivate NachrichtenSynchronität

ToDo-ManagementSeitendesign

Kontaktformular

SidebarÜber UnsInteressen

Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten• Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte

• Ausblick

Umsetzung

Design

Umsetzung – Startseite

• Kopfbereich (Logo + Registrierung)• Schnellübersicht• Auflistung der Funktionen von Proganizer

Umsetzung – Kontaktformular

• Bei Fragen oder Anmerkungen• E-Mail wird an alle geschickt!

Umsetzung

ToDo-Neuerungen

Umsetzung – Usability

• Button zum direkten Erstellen von ToDo’s zu bestimmter Kategorie

Umsetzung – Usability

• Alle Eigenschaften

bearbeitbar in einem Popup

Umsetzung – Usability

• To-Do-Kategorien ein- & ausklappbar

Umsetzung – Usability

• Menüpunkte “Meine Todos” – “Alle Todos”

Umsetzung – Usability

• Bearbeiter einer ToDo (Frei, Alle, bestimmte Bearbeiter)• Höchstens so viele Bearbeiter möglich, wie

Projektmitglieder

Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen• Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte

• Ausblick

Umsetzung

ProBar

Umsetzung – ProBar• erster Anlauf um Kommunikation mit anderen Nutzern zu betreiben

• verfügbar auf allen Seiten (Projektoverview | ToDo | Filemanager)

• rechter Seitenrand um Standard-Usability zu unterstützen und nichts überdecken

Umsetzung – ProBar• Variante 1: Nur Kontakte (Übersichtsseite)

• Überprüfung ob Mitglied sich im Projekt befindet oder nicht

• nur Kontakte sichtbar, welche über Profil hinzugefügt wurden

• um private Nachrichten zu schreiben

Umsetzung – ProBar• Variante 2: Chat, Kontakte, Activity Log (in Projekten)

• Gruppenchat zur Kommunikation im Team

• zusätzlich Möglichkeit auch weiterhin privat zu kommunizieren

• Activity Log um aktuelle Änderungen nachzuverfolgen

Umsetzung – ProBar• Emoticons• Verwendung Node Modul: npm install emoticons

Zugriff auf Modul

HTML-Text der Nachricht wird ersetzt

Umsetzung – ProBar• Responsive Design

• wichtig weil: komplette Funktionalität des Chats gescheitert wäre

• Anpassung an Chrome, Firefox und smaller Displays mit media-Queries

Für Displays mit Mindestbreite von ca 250px

Umsetzung – ProBar• Responsive Design Höhen berechnen:

Beispiel: Sidebar komplettFensterhöhe – Menühöhe

On resize-Funktion neu berechnen!

Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen• Chat – Synchronität• Profil – Mails – Kontakte• Ausblick

Umsetzung

Chat

Umsetzung – Chat

• Technologie: Socket.io JavaScript Framework zur bidirektionalen, event-gesteuerten Kommunikation in Echtzeit zwischen Server und Client

Client

Client Server

Server

Umsetzung – Chat

• Gruppenchat Innerhalb eines Projekts Projekt-ID als Chat-Raum Anmeldung der Clients Senden der „History“ Zufällige Nutzer-Farben

Umsetzung – Chat

• Privater Chat Auch außerhalb eines Projekts Nutzernamen als Chat-Raum Anmeldung der Clients Senden der „History“ Zufällige Nutzer-Farben

Umsetzung

Synchronität

Umsetzung – Synchronität

• Auch hier: Socket.io Realisiert mittels einer einzigen Funktion „broadcast“ Einbauen dieser Funktion an den Notwendigen stellen Bereitstellung benötigter Informationen

Durchlaufen der Liste von betroffenen Projektmitgliedern Vergleich mit Clients, die gerade die sich ändernde Seite sehen können Benachrichtigen aller betroffenen Clients

Umsetzung – SynchronitätServer

Client

Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität• Profil – Mails – Kontakte• Ausblick

Umsetzung

Profil

Umsetzung – Profil• Interessen bearbeiten und löschen

Umsetzung – Profil

• Erweiterung der Profilinformationen um persönliche Angaben

Umsetzung – Profil

• Einfaches Hinzufügen neuer Infos/Einstellungen

Umsetzung – Profil

• Dynamisches, verallgemeinertes Speichern/Laden

Umsetzung – Profil

• Dynamisches, verallgemeinertes Speichern/Laden

Umsetzung – Profil

• Dynamisches, verallgemeinertes Speichern/Laden

Umsetzung – Profil

• Kontaktliste mit Kontakten für den schnelleren Zugriff

Umsetzung – Profil

• Persönliche Informationen anderer Nutzer

Umsetzung – Profil

• Nutzerbezogene Einstellungen zur Personalisierung der Seite

Umsetzung – E-Mails

• E-Mails im Corporate Design zu verschiedenen Zwecken

Umsetzung – E-Mails

• E-Mails im Corporate Design zu verschiedenen Zwecken

Umsetzung – E-Mails

• regelmäßige E-Mails mit cronjobs

Umsetzung – Code

• ohne Kommentare:app.js: 461 Zeilen routes: 4897 Zeilen Jade: 2482 Zeilen jQuery: 4876 Zeilen CSS: 2178 Zeilen Gesamt: 14894 Zeilen

Gliederung Projektvorstellung Zielsetzung Zeitplanung Umsetzung Verantwortlichkeiten Design – Kontaktformular – ToDo-Neuerungen Sidebar – Über Uns – Interessen Chat – Synchronität Profil – Mails – Kontakte• Ausblick

Ausblick

„Proganizer ist eines der erfolgreichsten StartUps der letzten Jahre!“ (Business Punk 3/2016)

The End

Vielen Dank für Eure Aufmerksamkeit!