Proganizer.de – Projekte organisieren

Präsentation zum Thema: "Proganizer.de – Projekte organisieren"—  Präsentation transkript:

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

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

3 Projektvorstellung So einfach wie möglich! Online-Applikation
Organisation von Projekten Vereinigung Dropbox, Trello und Facebook So einfach wie möglich!

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

5 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

6 Nutzen von Proganizer um Proganizer zu erweitern
Zielsetzung (Exposé) MUSS-Kriterien KANN-Kriterien ABGRENZUNGS-Kriterien Chat Sidebar, private Nachrichten Benutzerrollen Synchronität Kontakte Suchfunktion -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 !

7 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

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

9 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 :

10 Zeitplanung Einteilung in 3 Etappen okay?

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

12 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

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

14 Umsetzung Design 14

15 Umsetzung – Startseite
Kopfbereich (Logo + Registrierung) Schnellübersicht Auflistung der Funktionen von Proganizer

16 Umsetzung – Kontaktformular
Bei Fragen oder Anmerkungen wird an alle geschickt!

17 Umsetzung ToDo-Neuerungen 17

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

19 Umsetzung – Usability Alle Eigenschaften bearbeitbar in einem Popup 19

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

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

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

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

24 Umsetzung ProBar 24

25 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

26 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

27 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

28 Umsetzung – ProBar Emoticons
Verwendung Node Modul: npm install emoticons Zugriff auf Modul HTML-Text der Nachricht wird ersetzt

29 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

30 Umsetzung – ProBar Responsive Design Höhen berechnen:
Beispiel: Sidebar komplett Fensterhöhe – Menühöhe On resize-Funktion neu berechnen!

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

32 Umsetzung Chat 32

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

34 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

35 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

36 Umsetzung Synchronität 36

37 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

38 Umsetzung – Synchronität
Server Client

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

40 Umsetzung Profil 40

41 Umsetzung – Profil Interessen bearbeiten und löschen

42 Umsetzung – Profil Erweiterung der Profilinformationen um persönliche Angaben

43 Umsetzung – Profil Einfaches Hinzufügen neuer Infos/Einstellungen

44 Umsetzung – Profil Dynamisches, verallgemeinertes Speichern/Laden

45 Umsetzung – Profil Dynamisches, verallgemeinertes Speichern/Laden

46 Umsetzung – Profil Dynamisches, verallgemeinertes Speichern/Laden

47 Umsetzung – Profil Kontaktliste mit Kontakten für den schnelleren Zugriff

48 Umsetzung – Profil Persönliche Informationen anderer Nutzer

49 Umsetzung – Profil Nutzerbezogene Einstellungen zur Personalisierung der Seite

50 Umsetzung – s s im Corporate Design zu verschiedenen Zwecken

51 Umsetzung – s s im Corporate Design zu verschiedenen Zwecken

52 Umsetzung – s regelmäßige s mit cronjobs

53 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: Zeilen

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

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

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