Von internen Aufgaben über die Wartung bestehender Webseiten bis hin zum Ausbau einer Kundenwebseite – Pflichtpraktikum im Bereich Webentwicklung

Marco Wanka, Student der Informatik ,hat sein Pflichtpraktikum im Bereich Webentwicklung erfolgreich bei uns absolviert. Was er in seinen 6 Monaten als Teil unseres Teams erlebte und sein abschließendes Feedback findet ihr in seinem umfangreichen Einblick in sein Pflichtpraktikum.

Pflichtpraktikum Webentwicklung: Aktuelle Projekte

Hauptsächlich beschäftigte ich mich in meiner Zeit als Praktikant mit der Betreuung eines Kunden, sowie der Weiterentwicklung dessen Webseite. Hier bekam ich die Möglichkeit die Umsetzung von neuen Features, von der Besprechung mit dem Kunden über die Programmierung bis hin zur Vorstellung für den Kunden zu erleben und so einen guten Einblick in den reellen Kontakt bzw. Arbeitsablauf mit Kunden zu bekommen. Neben dieser Tätigkeit kümmerte ich mich noch um die Wartung der Webseiten der Wordpress-Kunden, sowie der Bearbeitung diverser interner Technischen Aufgaben.

Vorgehensweise bei der Weiterentwicklung einer Kundenwebseite

Zu Beginn werden die gewünschten Features des Kunden besprochen und für das nächste Package zusammengefasst. Hierbei wird ebenfalls die benötigte Dauer zur Umsetzung der einzelnen Features in Mannstunden (normale 8 Std.) eingeschätzt, um das Kundenbudget mit den benötigten Features in Relation zu setzen und wenn nötig, Features in das nächste Package zu verschieben, um die Einhaltung des Budgets des Kunden zu gewährleisten. Der nächste Schritt ist der Start der Umsetzung der ersten neuen Features. Während der Umsetzung der neuen Features ist es wichtig, regelmäßige Meetings mit dem Kunden abzuhalten, um diesem den aktuellen Stand zu präsentieren sodass dieser Anpassungsvorschläge oder mögliche Kritik äußern kann. Ebenfalls dienen diese Meetings der Einhaltung des Zeitplans. Warum ist das nötig? Während dieses Meeting können möglicherweise erst bei der Entwicklung aufgetretene Probleme bzw. Herausforderung, die die Bearbeitungsdauer verzögern, besprochen werden. In diesen Meetings wird ebenfalls ein Überblick über die aktuelle Einhaltung des Zeitplans gegeben sowie ggf. noch einmal eine überarbeitete Priorisierung getroffen werden, falls ein Feature aufgrund bereits erreichter Mannstunden in das nächste Package verschoben werden muss. Ebenso können diese Meetings genutzt werden, einem Kunden bei der Umsetzung der nächsten Features beratend zur Seite zu stehen.

Umsetzung neuer Features

Bei der Umsetzung neuer Features ist es wichtig, Clean Code zu garantieren. Hierbei sollten folgende Punkte unbedingt beachtet werden:

1. Lesbarkeit: Der Code sollte so einfach und verständlich wie möglich geschrieben sein, um spätere Erweiterungen sowie Anpassungen des Codes für die Entwickler zu erleichtern. Hier ist eine verständliche Benennung der Variablen unverzichtbar, um die spätere Arbeit an dem Code zu erleichtern.
2. Einheitlicher Code Style: Um einen einheitlichen Code Style zu gewährleisten, ist es sinnvoll, einen Code-Formatter -wie Prettier- zu nutzen. Der Vorteil hierbei ist, dass diesem exakte Vorgaben gegeben werden können. So kann beispielsweise die Vorgabe sein, wann ein Absatz gemacht werden soll oder wie lang eine Zeile sein darf und vieles mehr. Ebenfalls wird hierdurch die Möglichkeit geschaffen, die Formatierung des Codes bei jedem Entwickler, der am Projekt beteiligt ist, zu vereinheitlichen, was zu einem stimmigen bzw. sauberen Code führt.
3. Einheitliches Naming: Wie schon erwähnt, ist während des Programmierens strikt darauf zu achten, dass das Naming eine einheitliche Linie verfolgt, um die Verständlichkeit für spätere Entwickler zu gewährleisten.
4. Fehlersicherheit: Es liegt auf der Hand, dass ein einfach geschriebener Code auch leichter und besser zu verstehen ist. Dennoch ist es unerlässlich, diesen Code so gut es geht anwendersicher zu machen, um Probleme, deren Eintrittswahrscheinlichkeit möglicherweise sehr gering eingeschätzt werden, gar nicht erst zu auftretenden Fehlern werden zu lassen.
5. Vorausschauendes Programmieren: Hand in Hand mit fehlersicherem Coden geht auch das vorausschauende Coden im Hinblick auf bereits besprochene neue Features. Aber auch mit Blick auf noch zukünftig zu erwartende Features ist es ratsam, den Code möglichst universell zu schreiben, um Code-Zeilen zu sparen, aber auch um die Lesbarkeit zu erhöhen.
6. Responsives Webdesign: Egal in welchem Bereich der Webentwicklung das Programmieren stattfindet, im Zeitalter der Smartphones ist es extrem wichtig, auf das Responsive Webdesign zu achten, um so Nutzern sowohl auf dem PC aber auch auf Smartphones und Tablets die beste Usererfahrung zu ermöglichen.

Die Umsetzung der neuen Features erfolgte bei meinem Praktikumsprojekt unter der Nutzung von DOM, Bootsrap, D3.js sowie PostgreSQL, welche ich nun kurz erläutern werde:

Nutzung von DOM

Webseiten können auch ohne ein großes Framework entwickelt werden via Vanilla JavaScript. Hierbei kann auf das DOM, welches eine Programmierschnittstelle ist, zurückgegriffen werden, die JavaScript ermöglicht, auf das HTML-Dokument zuzugreifen, es zu verändern und mit ihm zu interagieren. Die Funktionsweise ist recht einfach. Das HTML-Dokument wird als Baumstruktur dargestellt, wobei das oberste Element der Dokumentenknoten ist, gefolgt von jedem weiterem HTML-Tag, dargestellt als Elementknoten. So ist es möglich, via Eventlistener oder auch innerhalb einer Funktion ein Element zu modifizieren.

Nutzung des Open-Source-Frameworks Bootstrap

Wenn es darum geht, eine Webseite responsiv zu gestalten, aber auch um eine optisch ansprechende Webseite zu erstellen, kann auf das Open-Source-Framework Bootstrap zurückgegriffen werden. Bootstrap bietet unter anderem eine breite Palette vorgefertigter UI- Komponenten, wie Buttons, Navigationsleisten, Badges, Progressbars und vieles mehr an.

Neben diesen Features ist besonders das flexible Grid-System interessant, welches es ermöglicht, das Layout der Webseite in Spalten und Zeilen zu organisieren, wodurch sich die Inhalte einfacher anordnen lassen, aber auch in Kombination von anderen Features von Bootstrap sich das responsive Webdesign leichter umsetzen lässt. Ein großer Vorteil von Bootstrap ist die Anpassbarkeit durch eigene Styles, aber auch die Kombination verschiedenster Elemente, wodurch die Möglichkeit geschaffen wird, individuelle Gestaltungen zu erreichen ohne viel CSS-Code von Hand zu schreiben. So ist es machbar, padding, text align, overflow und vieles mehr einfach durch das Hinzufügen einer entsprechenden CSS-Klasse zu unserem HTML-Objekt zu realisieren und sich somit viel doppelten Code zu sparen.

Nutzung von D3.js

Um Daten besser und transparenter darzustellen, ist es in vielen Fällen hilfreich auf Diagramme zu setzen. Diese sind, sofern sie grafisch gut dargestellt sind, einprägsamer als die Auflistung nackter Zahlen und bieten eine bessere und leichtere Verständlichkeit sowie die Möglichkeit von Interpretationen. Bei der Umsetzung von Graphen auf Webseiten gibt es viele Anwendungsmöglichkeiten. Eine davon ist die Library von D3.js. Diese JavaScript-Bibliothek dient zur Erstellung dynamischer, interaktiver Datenvisualisierungen in Webbrowsern. Sie ermöglicht Entwicklern datengetriebene und interaktive Grafiken, Diagramme und Datenvisualisierungen zu erstellen, indem sie Daten mit dem Document Object Model (DOM) von HTML verbindet. Ein großer Vorteil von D3.js ist dessen Flexibilität, Anpassbarkeit und die Möglichkeit, komplexe Visualisierungen zu realisieren.

PostgreSQL

Die Speicherung der auf der Webseite angezeigten sowie verwalteten Daten erfolgt über eine Datenbank. Neben Datenbankmanagementsystemen wie MySQL, Maria DB gibt es aber auch PostgreSQL. Eine solche Datenbank kann lokal auf dem eigenen Rechner aufgesetzt werden oder wie im Fall meines Praktikumsprojektes  auf einem hausinternen NAS-System. Ein großer Vorteil des Aufsetzens der Datenbank auf einem NAS-System besteht darin, dass nicht jeder Mitarbeiter eine eigene lokale Datenbank aufsetzen muss, keine Kosten durch einen externen Host anfallen, sowie dass neue Spalten, aber auch andere Änderungen an der Datenbank nur einmal vorgenommen werden müssen. Für die Einrichtung einer solchen Datenbank muss zuerst zuvor erwähnte NAS-System eingerichtet werden. Ist dieser Schritt getan, wird nun mithilfe eines Tools ein PostgreSQL Container angelegt. Eine Schwierigkeit bzw. eine Hürde stellt das Einspielen eines SQL- Dumps dar, da dieser zuerst auf das NAS-Dateisystem geladen werden muss. Im Anschluss daran ist nun der SQL-Dump in einen vorher freigegeben Ordner des Containers zu laden. Im letzten Schritt ist es erforderlich, sich via Shell mit dem Container zu verbinden und den SQL- Dump einzuspielen. Ein weiterer sehr zu empfehlender Schritt ist die Vergabe einer festen IP für den Container, sodass bei einem Neustart des Systems nicht jedes Mal eine Anpassung der IP in der Konfigurationsdatei des Webservers vorgenommen werden muss. Sind diese Schritte durchgeführt, ist die Einrichtung der Datenbank abgeschlossen und eine Verbindung kann zur Datenbank hergestellt werden, um z.B. Einträge abzuändern, neu anzulegen oder zu löschen

Projektmanagement innerhalb der Online Rebellion

Interne Kommunikationsstruktur und Tools

Für die interne Kommunikation waren im Allgemeinen 3 Kommunikations-Channel im Einsatz:

1. Podio (CRM)
2. Slack
3. E-Mail

Die Auswahl auf welches der 3. Kommunikations-Channel zurückgegriffen wird, steht in Relation zur Dringlichkeit einer Antwort. So lautet die Priorisierung wie folgt:

1. Podio = reguläre Antwortzeit
2. Slack = dringend
3. E-Mail = Informationen, die nicht unmittelbare Reaktion erfordern

Podio

Podio ist eine sich an einem Kanban- System orientierende „Project Management and Collaboration“-Software. Auf dieser Plattform findet die Kommunikation mit dem Kunden statt sowie das Projektmanagement. Hierfür besitzt jeder Mitarbeiter einen eigenen Zugang, mit welchem er sich auf der Weboberfläche einloggen kann und so mithilfe des integrierten Kanban Boards direkt auf einen Blick sehen kann, welche Aufgaben für den jeweiligen Tag anstehen, sowie was ggf. in Zukunft eingeplant werden muss. Podio wird innerhalb der Online Rebellion als primäres Kommunikationsmittel unter den Mitarbeitern sowie für den täglichen Kontakt mit Kunden genutzt. Podio ist hier unterteilt in verschiedene Workspaces, wobei es Kunden-Workspaces für die externen Task, sowie das Projektmanagement Workspace für die dazugehörigen, sowie weitere interne Tasks gibt. Ein solcher Task besitzt ein gewisses Schema, welches einer Unternehmensregel unterliegt. Durch diese Regel ist klar definiert, dass Priorität, Inhalt, Umfang und Deadline eines Tasks klar definiert sein müssen. Ist dies nicht der Fall, dürfen diese sofort dem Auftraggebenden zurück zugewiesen werden. Dies führt aber auch zu einem hohen Maß an Eigenverantwortung, so war es wichtig meine Aufgaben auch zu hinterfragen und nach eigenem Ermessen abzuschätzen und gegebenenfalls Deadline, Umfang oder Inhalt anzuzweifeln. Dies stellt zudem sicher, dass kein Aufwand bzw. Ressourcen in Aufgaben gesteckt werden, die nicht klar sind und somit keine Zeit verschwendet wird, welche möglicherweise für die Einhaltung von Deadlines von anderen Tasks benötigt wird.

Email

Bei Anliegen, welche nicht in direktem Zusammenhang mit einem internen Podio-Task gebracht werden können, wird auf die Kommunikation über E-Mail zurückgegriffen. Innerhalb der Agentur besitzt jeder Mitarbeiter ein eigenes Email Postfach mit Unternehmensdomain, welches auf dem eigenen Arbeitsrechner in einem Outlook-Client eingerichtet ist.

Interne Agenturaufgaben

Neben den Aufgaben, welche Kunden betreffen, fallen auch diverse interne Task an, die regelmäßig abzuarbeiten sind. Im Folgenden werden einige der interessantesten Tasks aufgeführt.

Erstellen von Internen "Wiki" Einträgen

Um den Arbeitsprozess für alle zu erleichtern, aber auch zu verbessern, setzt die Online Rebellion auf ein internes Wiki. Dieses Wiki wird fast täglich von allen Mitarbeitern erweitert sowie angepasst, um dort dokumentierte Abläufe auf dem aktuellen Stand zu halten. Wird neues Vorgehen erabeitet, für z.B. oben genanntes Hinzufügen von Lesezeichen in der Admin Konsole, wird dieses Vorgehen ausführlich ggf. auch mit Bildern und externen Links dokumentiert, sodass bei Übernahme des Tasks oder die Durchführung eines ähnlichen Task durch einen anderen Mitarbeiter, dieser weiß was zu tun ist und sich nicht selbst das Vorgehen erarbeiten muss. Neben der Dokumentation von Vorgängen zu Kundentasks wird hier aber auch die Bedienung von alltäglichen Gegenständen oder Neuanschaffungen dokumentiert. Ein Beispiel hierfür wäre z.B. die Bedienung des Staubsaug-roboters.

Evaluierung von verschiedener Softwares

Zum generellen Agenturalltag gehört auch die Evaluation von bestehender sowie neuer Software. Um sicherzustellen, dass weiterhin die Software mit dem besten Preis/Leistungsverhältnis, aber auch ggf. auf Software mit neuen Funktionen umgestiegen wird oder eine ganz neue Software ins Portfolio aufgenommen wird, ist es nötig, regelmäßig Evaluierungen verschiedener Anbieter durchzuführen. Bei einer solchen Evaluierung werden zuerst verschiedene Anbieter recherchiert und für diese alle Informationen wie Preise und Features zusammengetragen. Nachdem alle Informationen eingeholt wurden, werden diese in einem Google Sheet zusammengefasst -welches auf dem jeweiligen internen Task verlinkt wird, um einen Vergleich der verschiedenen Softwares zu ermöglichen. Im letzten Schritt wird nun ein persönlicher Favorit festgelegt und dieser im wöchentlichen Dev JF (dem Meeting der Entwickler) vorgestellt, um eine Entscheidung zu treffen oder ggf. noch Anmerkungen der anderen Entwickler mit einzubringen.

Wartung von Kundenwebseiten (WP-Seiten)

Neben der Entwicklung und Wartung von Shop-Seiten betreut die Online Rebellion auch die WordPress-Seiten ihrer Kunden.  Regelmäßige WordPress-Wartungen der Kunden-Webseiten sind essentiell, um die Sicherheit, Leistung und Funktionalität einer Webseite zu gewährleisten. Besonders wichtig sind hierbei regelmäßige Updates der WordPress-Version, der Themes sowie Plugins, um Sicherheitslücken zu schließen und so vor Hackerangriffen zu schützen. Darüber hinaus beugen Wartungsarbeiten Problemen vor, die durch veraltete Komponenten entstehen könnten und gewährleisten somit eine reibungslose Benutzererfahrung für Besucher der Webseite. Die Wartungen werden hier je nach abgeschlossenen Wartungsmodell durchgeführt. Die Wartungsmodelle sind unterteilt in Wartungen im Rhythmus: monatlich, quartalsweise sowie halbjährlich. Eine weitere Besonderheit besteht im Bereich der Durchführung der Wartung. So werden die meisten Wartungen auf der Liveseite durchgeführt, jedoch auch bei vereinzelten Seiten im Vorfeld die Wartung auf einer Staging Umgebung vor der eigentlichen Wartung durchgeführt und erst bei problemloser Durchführung ebenfalls auf der Liveumgebung vollzogen wird. Im Verlauf meines Praktikums bekam ich ebenfalls die Möglichkeit, solche regelmäßigen Wartungen durchzuführen. Dank eines bereits vorhandenen ausführlichen internen Wiki-Eintrages, sowie einer kurzen Einweisung in das Vorgehen, war es mir möglich mich schnell in die Thematik einzufinden. Dennoch musste ich ebenfalls schnell lernen, dass nicht jede Wordpress Wartung identisch ist und es gut sein kann, dass eine Wartung ohne irgendwelche Probleme durchläuft, während bei einer anderen Wartung gleich mehrere Probleme auf einmal auftreten. Dies stellt allerdings nicht zwangsläufig ein Problem dar, da man als Praktikant auf die unterstützenden Kollegen zählen kann, welche einem mit hilfreichen Tipps versorgen.

Was ich aus dem Praktikum mitnehme

Im Rückblick auf mein Praktikum bei der Online Rebellion kann ich sagen, dass dies eine lehrreiche, fordernde, aber zugleich sehr wertvolle und lohnende Erfahrung war. Durch die abwechslungsreichen Aufgaben konnte ich einen guten Einblick in den Tätigkeitsbereich einer Agentur bekommen und so zugleich einen Überblick über das breite Spektrum der verschiedenen IT-bezogenen Aufgaben und Herausforderungen innerhalb einer Agentur gewinnen. Ein großer Vorteil meines Praktikums lag darin, dass ich die Möglichkeit bekam, an reellen Aufgaben zu arbeiten sowie regelmäßigen Kontakt mit Kunden zu pflegen, um so einen Einblick in das echte Arbeitsleben in der IT-Branche zu bekommen. Durch die große Anzahl an verschiedenen Aufgaben, die ich übernehmen durfte, konnte ich mein Wissen weiter ausbauen und so neue Fähigkeiten für zukünftige Projekte gewinnen. Ich bin dankbar, dass ich in einem so freundlichen und zugleich lehrreichen Umfeld die Möglichkeit bekommen habe, Erfahrungen in den verschiedenen Arbeitsbereichen einer Agentur zu sammeln und für das Vertrauen, das mir entgegengebracht wurde. 

 

Du möchtest auch Teil der Online Rebellion werden? Dann schau dir hier die offenen Stellenanzeigen an!