Diplom- und Abschlussarbeiten (2017/18)
Konzeption und Implementierung eines webbasierten Personalzeiterfassungssystems
Projektleiter
Valentin Feuerstein
Valentin Feuerstein ist Projektleiter der Diplomarbeit. Dies beinhaltet die Zuständigkeit für die Verteilung der Aufgaben, kontaktieren der Auftraggeber, fixieren von Terminen, sowie sich einen Gesamtüberblick über die Diplomarbeit zu sichern. Neben diesen Tätigkeiten übernahm er ebenfalls das Projektmanagement und griff Jonas Rüscher bei der Frontend-Entwicklung unter die Arme. Die Dokumentation wurde von ihm strukturiert und stets überwacht.
Mitarbeiter
Emre Kaya
Emre Sevki Kaya ist der Backend-Entwickler der Diplomarbeit. Er kümmerte sich um den Entwurf der Datenbank sowie um den Webserver im Hintergrund, der das Frontend mit der Datenbank verknüpft. Auch auf der Frontendseite stand er mit seinem breiten Wissen stets zur Verfügung.
Jonas Rüscher
Jonas Rüscher ist für das Frontend zuständig. Er entwickelte die ersten Entwürfe mithilfe des Programms Photoshop, welche dann später mit dem gesamten Projektteam besprochen und entsprechend angepasst wurden. Der geeignete Entwurf wurde schlussendlich von ihm umgesetzt. Der Projektleiter Valentin Feuerstein half ihm bei der Umsetzung der Formulare, welche für die Eingabe dienen. Bei komplexeren Aufgaben half ihm Emre Sevki Kaya.
Zielsetzung
Hauptziele ➢ Entwurf des Datenbankmodells nach den Anforderungen ➢ Implementierung der Oberfläche zur Verwaltung von Mitarbeiter/innen ○ Hinzufügen von Mandanten ○ Hinzufügen von Abteilungen ○ Hinzufügen von Kostenstellen ○ Hinzufügen von Zeitstrukturen ○ Hinzufügen eines Mitarbeiters Nebenziele ➢ Verantwortungsbereich ➢ Kalender ➢ Zutritt ➢ Vertrag Nichtziele ➢ Die komplette Fertigstellung der Software ➢ Zeitarten ➢ Buchungen ➢ Abwesenheiten ➢ Korrekturen ➢ Berechnungen ➢ Rechteverwaltung ➢ Ein „gültig-ab“ Feature für einzelne Felder
Problemstellung
Hauptziel war die Erstellung einer Personalverwaltungssoftware in Form einer WebApplikation, die es dem Personalteam des besagten Partnerunternehmens ermöglicht, neue Mitarbeiterinnen und Mitarbeiter anzulegen und zu verwalten.
Ergebnisse
Das Endergebnis der Diplomarbeit “S.I.E. Personalverwaltung” ist eine WebApplikation, die zur Verwaltung von Personaldaten genutzt werden kann, sowie eine schriftliche Dokumentation des Entstehungsprozesses.
Die Web-Applikation besteht aus dem Frontend (Benutzeroberfläche), welches die graphische Oberfläche für den Benutzer bildet, und dem Backend, welches aus der Datenbank und dem dazugehörigen Webserver besteht.
Prototype
Auf gegebenem Bild ist das Login Fenster unserer Diplomarbeit zu sehen. Hierbei ist eigentlich nicht mehr von einem Prototypen, sondern von einer fertigen Webapplikation zu sprechen.
Ein Mitarbeiter kann sich Anmelden und kann, falls er die Rechte dazu hat, neue Mitarbeiter anlegen, alte verwalten und bearbeiten, sowie all ihre Stammdaten anlegen, bzw bearbeiten.
Login Page
Technologien
Jest
Zusätzlich für React hat Facebook auch ein Testing Framework entwickelt um die Applikationen, die geschrieben wurden auch zu testen. Mithilfe einer ausführlichen Dokumentation und einer einfachen Installation, kann das Testen mit diesem Framework schnell und effizient umgesetzt werden.
React
Mit der populären JavaScript – Bibliothek ReactJS können interaktive Webseiten einfacher erstellt werden. Durch Zerlegen in unterschiedliche Komponenten ergibt sich ein besserer Überblick und eine bessere Struktur. Durch das Einsetzen von States können nach Veränderungen diese ihren Wert ändern. Die Komponenten ändern sich nach jedem Laden/Rendern. Eine Komponente besitzt immer eine Render - Funktion, in der meist HTML zurückgegeben wird, dieses Format wird auch als JSX bezeichnet. Bekannte Webseiten wie z. B. Facebook und Instagram verwenden diese Bibliothek, da Sie auch die Entwickler davon sind.
Bootstrap
Bootstrap ist die bekannteste Frontend Bibliothek, wenn es um das Thema Responsive Design geht. Mithilfe dieser Bibliothek können z. B. größere Formulare, wie sie bei unserem Projekt verwendet werden, effizienter und einfacher dargestellt werden, ohne sich lange um die CSS Regeln Sorgen zu machen. Durch das Verwenden von Rows und Columns können diese einfacher unterteilt werden.
HTML
Die neueste Version der Markup Sprache wurde im Jahre 2008 veröffentlicht und löste somit ihren Vorgänger ab. Im Laufe der Jahre führte Firefox diese Version ein und später auch die Website YouTube. Es wurden neue Labels wie „audio“, „video“ oder „canvas“ hinzugefügt, somit benötigte man keine speziellen Plugins mehr.
CSS
Mit CSS (Cascade Style Sheet) wird der Website Farbe und Schönheit verliehen. Mit hunderten von Properties kann je nachdem die Breite, Höhe, Farbe oder Position der HTML Tags verändert werden. Oft wird über Klassen mit einem Punkt auf die HTML Tags zugegriffen.
JavaScript
JavaScript, wie der Name schon sagt, ist eine Skriptsprache. Sie wird meistens im Browser eingesetzt, um eine Webseite dynamisch zu machen bzw. sie passt sich dem Benutzer an.
FontAwesome
Um Symbole besser darzustellen haben wir Fontawesome verwendet, durch Herunterladen hat man auf eine Bibliothek mit hunderten von Icons (926) einen schnellen Zugriff. Mit der Eigenschaft, dass alle Icons Vektor–Grafiken sind, sind sie ohne Qualitätsverlust skalierbar. Auf die Icons kann natürlich mit CSS Eigenschaften zugegriffen werden. Es wurde die Version 5.0.6 verwendet.
NPM
Der Paketmanager NPM (Node Packet Manager) für die JavaScript – Bibliothek Node.js war ein sehr hilfreiches Tool. Darüber wurden sämtliche Plugins installiert, die zu aufwändig waren, sie selbst zu erstellen
Photoshop
Die ersten Entwürfe wurden mit dem hilfreichen Tool Photoshop erstellt. Die bequeme Bedienung dieses Programms ersparte mühsame Schritte. Mit der Verwendung von verschiedenen Ebenen konnten die ersten Designs mit guter Qualität und hoher Genauigkeit vom Blatt übernommen und als PNG-Grafik exportiert werden.
Google Drive
Google Drive wurde verwendet um eine Art Backup zu machen. Jedes Teammitglied hatte einen schnellen Zugriff auf alle Pläne, Dateien und Dokumente.
WhatsApp wurde für die Kommunikation unter den Teammitgliedern verwendet. Falls Änderungen durchgeführt wurden, wurden Sie sofort besprochen. Mithilfe von WhatsApp war es möglich alle Teammitglieder auf dem Laufenden zu halten.
Bitbucket
Mit Hilfe von Bitbucket wurde der Code unter den Teammitgliedern geteilt („geshared“). Dadurch hatte jeder des Teams immer die aktuelle Version und konnte seine Änderungen wieder hochladen.
GIT
Mit Git wurden alle Dateien für die Umsetzung des Projektes auf Bitbucket hochgeladen. Alle HTML, CSS und JavaScript Files wurden bei Änderungen „hochgepusht“.
Trello
Trello diente als Hilfe für das Projektmanagement. Jeder hatte einen sofortigen Überblick auf seinen derzeitigen Stand. Mit Trello können verschiedene Listen erstellt werden, und jede Liste kann bestimmte Karten haben. Jedes Teammitglied hatte drei verschiedene Listen, mit den Namen „ToDo“, „WIP“ und „Done“. Es gab noch eine Backlog, wo alle Aufgaben, welche für den derzeitigen Sprint zu bewältigen sind, abgelegt sind.
XMind
XMind ist zur Erstellung von sogenannten Mindmaps da. Mindmaps sind hierarchische Übersichten über ein Thema, welches in Stichworten wiedergegeben wird.