Proganizer.de – Projekte organisieren Einleitung (1-3): Karin Organize like a pro! Hannes Schurig (790790) Karin Lampesberger (792124) Dustin Wulf (798876) Rebecca Ritter (792118)

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

Projektvorstellung So einfach wie möglich! 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 4

Stand der Dinge zu Beginn Profilbild ändern ! Bis auf Kommentare, keinerlei Art der direkten Kommunikation Login und Registrierung ToDo-Kategorien anlegen ToDo‘s anlegen Eigenschaften von Dateien anzeigen ToDo‘s Benutzern zuordnen Rebecca: 5 - 7 Filemanager Dateien Up-/-download Projekte anlegen Nutzer einladen

Nutzen von Proganizer um Proganizer zu erweitern 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 Filemanager Nutzen von Proganizer um Proganizer zu erweitern !

Stand der Dinge zum Ende Chat Profilbild ändern Sidebar mit privaten Nachrichten, Kontakten und Activity Log Login und Registrierung Mailbenachrichtigungen ToDo-Kategorien anlegen ToDo‘s anlegen Eigenschaften von Dateien anzeigen ToDo‘s Benutzern zuordnen Filemanager Dateien Up-/-download Projekte anlegen Kontaktformular Design Synchronität Nutzer einladen Detailliertes Benutzerprofil

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

Zeitplanung 09.04 07.05 ToDo-Bereich, Mailbenachrichtigungen, Sidebar Design Einarbeitung Socket.io Bugfixes 07.05 Chat Chat-Raum-Handling Kontaktformular Sidebar Benutzerprofil 18.06 Synchronität Bugfixes Verfeinerungen ToDo-Bereich, Mailbenachrichtigungen, Sidebar 23.07 Hannes : 9 + 10

Zeitplanung Einteilung in 3 Etappen okay?

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

Umsetzung - Verantwortlichkeiten Hannes Dustin Mailbenachrichtigungen Profileinstellung Kontakte Chat Private Nachrichten Synchronität Karin Rebecca Dustin: Folie 12!! ToDo-Management Seitendesign Kontaktformular Sidebar Über Uns Interessen 12

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

Umsetzung Design 14

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 17

Umsetzung – Usability Button zum direkten Erstellen von ToDo’s zu bestimmter Kategorie 18

Umsetzung – Usability Alle Eigenschaften bearbeitbar in einem Popup 19

Umsetzung – Usability To-Do-Kategorien ein- & ausklappbar 20

Umsetzung – Usability Menüpunkte “Meine Todos” – “Alle Todos” 21

Umsetzung – Usability Bearbeiter einer ToDo (Frei, Alle, bestimmte Bearbeiter) Höchstens so viele Bearbeiter möglich, wie Projektmitglieder 22

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

Umsetzung ProBar 24

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 komplett Fensterhö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 31

Umsetzung Chat 32

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

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

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

Umsetzung Synchronität 36

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ät Server Client

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

Umsetzung Profil 40

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 app.js: 461 Zeilen routes: 4897 Zeilen 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 54

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

Vielen Dank für Eure Aufmerksamkeit! The End Vielen Dank für Eure Aufmerksamkeit!