Eine Plattform für Alarmierung, Rufbereitschaften und Status­seiten.

Ich komme ursprünglich aus Ungarn und bin nach Deutschland gezogen, um Internationales Management an der Universität Köln zu studieren. Dort habe ich meine Leidenschaft dafür entdeckt, Kreativität mit Strategie zu verbinden. Meine Erfahrungen als Werkstudentin und später als Praktikantin bei ilert waren aufregend und haben meine Herangehensweise an Marketing entscheidend geprägt.

Erste Schritte in der Marketing-Abteilung bei ilert

Ende 2023 begann ich als Werkstudentin bei ilert. Während meines Praktikums konnte ich verschiedene Bereiche wie Vertrieb und Partner Management kennenlernen, das Team unterstützen und mir wichtige Skills aneignen. Meine bevorzugten Aufgaben waren die Erstellung visuell ansprechenden Inhalte mit Tools wie Canva und Figma – von Social-Media-Posts bis zu internen Materialien. Doch schnell wurde mir klar: Kreativität alleine reicht nicht aus. Content muss die Zielgruppe ansprechen und messbare Ergebnisse liefern.

Herausforderungen im B2B-Marketing

Eine große Herausforderung war der Wechsel von B2C- zu B2B-Marketing. Vor ilert konnte ich Erfahrungen bei CEMS-Clubs sammeln, wo ich das Marketing für studentische Events und Alumni-Initiativen leitete. Dabei ging es vor allem um emotionale Inhalte für ein B2C-Publikum.

‍

Bei ilert war ein mehr Strategie-fokussierter Ansatz gefragt: Vertrauen aufbauen, Mehrwert bieten und auf spezifische Business-Bedürfnisse eingehen. Dieser Wechsel zeigte mir, wie wichtig datengetriebenes Marketing ist. Durch das Tracking von Engagement-Metriken konnte ich besser verstehen, was unsere Audience anspricht, und meine Strategien dementsprechend anpassen.

‍

Ebenso wichtig war die Zusammenarbeit im Team: Ideen gemeinsam entwickeln und Feedback umsetzen – das zeigte mir, dass Marketing ein Gemeinschaftsprojekt ist, es lebt von kreativer Vielfalt.

Vom Praktikum zur Vollzeitstelle

Mein Einstieg bei ilert begann mit unterstützenden Aufgaben. Ich arbeitete an Projekten wie der Entsperrung unseres Metrics Guides, schrieb Blogartikel und gestaltete Materialien, um das Engagement zu fördern. Auch bei E-Mail-Kampagnen wie unserem Newsletter war ich beteiligt und lernte den Umgang mit CRM-Systemen und Community-Interaktion.

‍

In meiner jetzigen Vollzeit-Position leite ich größere Projekte, wie zum Beispiel Awareness-Kampagnen. Dabei plane ich Strategien, schalte Ads, erstelle Content und koordiniere alles über mehrere Plattformen hinweg. So konnte ich mich von der Praktikantin zur Campaign Managerin entwickeln.

‍

Meine Tipps für angehende Marketer

‍

• Bleibe neugierig: Stelle viele Fragen, bitte um Feedback und sei offen für neue Ideen.
  ‍
• Experimentiere und lerne: Probiere Tools und Strategien aus, tracke deine Fortschritte und baue dir ein Portfolio auf.
  ‍
• Mache dich mit Tools vertraut: Tools wie Google Analytics, Canva und Figma sind unabdingbar.
  ‍
• Lerne, wie SEO und Social Media funktionieren: Lerne die Basics, wie man Content sichtbar macht.

‍

Interessiert? Besuche unsere Karriereseite für aktuelle Jobangebote!

‍

Nachdem wir die erste Version des ilert-Dashboards mit einem statischen Layout veröffentlicht hatten, war uns schnell klar, dass wir noch einen Schritt weitergehen wollten: die Nutzer sollten Widgets frei anpassen und anordnen können. Wir wollten ein wirklich interaktives Nutzererlebnis schaffen. Daher suchten wir nach einer Programmbibliothek, die Drag-and-Drop sowie Resizing unterstützt und sich gleichzeitig nahtlos in unser bestehendes Tech-Stack integriert.

‍

In diesem Beitrag erkläre ich Schritt für Schritt unseren Auswahlprozess, die wesentlichen Funktionen, die wir priorisiert hatten, und warum wir uns letztendlich für React-Grid-Layout als die beste Lösung für unsere Anforderungen entschieden haben.

Diese Kernfunktionen benötigten wir für das ilert-Dashboard 

Bevor wir uns mit spezifischen Libraries beschäftigten, definierten wir die wichtigsten Anforderungen für die Entwicklung eines benutzerfreundlichen und flexiblen Dashboards. Dies waren unsere Prioritäten:

‍

• Unterstützung von React und TypeScript: Um eine nahtlose Integration mit unserem Tech-Stack zu gewährleisten, brauchten wir eine Bibliothek, die sowohl React als auch TypeScript unterstützt. Dies sollte für eine starke Typsicherheit und effiziente Entwicklung sorgen.
• Grid-Layout mit Drag-and-Drop: Dies war für ein dynamisches und individuell anpassbares Dashboard-Feature unerlässlich. Nutzer sollten Widgets problemlos verschieben, neu anordnen und in ihrer Größe ändern können.
• Responsive Design: Da unser Dashboard auf einer Vielzahl von Geräten und Bildschirmgrößen verwendet wird, musste es vollständig responsiv sein und sich an unterschiedliche Layouts anpassen.

Aktive Weiterentwicklung und Updates: Da die Bibliothek für kritische Funktionen verwendet wird, waren eine starke, unterstützende Community und regelmäßige Updates entscheidend, um langfristige Zuverlässigkeit und Sicherheit zu gewährleisten.

Bewertung von Grid- und Drag-and-Drop-Bibliotheken für das ilert-Dashboard

Wir haben mehrere bekannte Bibliotheken geprüft, um die beste Option zu finden. Jede hatte ihre eigenen Stärken und Schwächen, daher bewerteten wir sie nach Integrationsfähigkeit, Funktionalität und Anpassungsmöglichkeiten. Hier ist eine Zusammenfassung der wichtigsten Optionen, die wir in Betracht gezogen haben:

1. React-Grid-Layout

Vorteile:

• Speziell für React entwickelt, wodurch die Integration einfach ist.
• Umfassende, sofort verwendbare Unterstützung für Drag-and-Drop sowie Resizing.
• Responsives Design, das sich an verschiedene Bildschirmgrößen anpasst.
• Starke Community, regelmäßige Updates und TypeScript-Kompatibilität.

‍

Nachteile:

• Begrenzte Flexibilität für unkonventionelle Layouts, die über Standard-Grids hinausgehen.
• Potenzielle Performance-Probleme bei sehr komplexen oder datenintensiven Dashboards.

2. dnd-kit

Vorteile:

• Schlank und modular, ideal für maßgeschneiderte Drag-and-Drop-Anwendungen.
• Hohe Zugänglichkeit, inklusive Unterstützung ausschließlicher Tastaturnavigation.
• Starke Performance bei individuellen Interaktionen.

‍

Nachteile:

• Keine integrierte Grid-Layout-Funktionalität, erfordert manuelle Einrichtung.
• Keine Unterstützung für die Größenänderung von Widgets, was die Implementierung erschwert.

3. Packery

Vorteile:

• Ideal für Masonry-Layouts.
• Unterstützt das Verschieben von Objekten durch Drag-and-Drop.

‍

Nachteile:

• Letztes größeres Update war 2018, daher veraltet.
• Eingeschränkte Kompatibilität mit React und TypeScript, was die Integration erschwert.

4. Gridster.js

Vorteile:

• Grundlegende Drag-and-Drop- und Resizing-Funktionen sind vorhanden.

‍

Nachteile:

• Veraltet und mit minimaler Unterstützung von React, wenig Updates.
• Bekannte Bugs und begrenzte Community-Unterstützung, was die Wartung erschwert.

‍

Nach sorgfältiger Bewertung entschied sich unser Team für React-Grid-Layout als die umfassendste und effizienteste Lösung. Die integrierte Drag-and-Drop-Funktionalität, die nahtlose React-Integration, die aktive Weiterentwicklung und die effiziente Grid-Unterstützung halfen uns, Zeit zu sparen und die Komplexität zu reduzieren. Die Performance und Stabilität erfüllten unsere Anforderungen an interaktive, datenintensive Dashboards mit minimalem Optimierungsaufwand.

Die Implementierung des React-Grid-Layout in das ilert-Dashboard

Um die Effektivität von React-Grid-Layout zu demonstrieren, hier ein kurzer Überblick, wie wir seine Kernfunktionen in unser Dashboard integriert haben:

‍

• Drag-and-Drop-Konfiguration: Mit der API von React-Grid-Layout konnten wir Widgets so konfigurieren, dass sie über Grid-Zellen hinweg verschoben werden können. Dies bietet unseren Nutzern eine flüssige und responsive Benutzererfahrung.
• Widget-Resizing: Die Implementierung der Resizing-Funktion von React-Grid-Layout war unkompliziert. Sie ermöglicht es unseren Nutzern, Widgets zu vergrößern oder zu verkleinern. Dies war entscheidend für die Flexibilität unserer Dashboards.
• Responsive Anpassung: Durch die integrierten Responsive-Optionen der Bibliothek wird das Dashboard-Layout automatisch an verschiedene Geräte angepasst und bietet eine einheitliche Nutzererfahrung auf Desktops und mobilen Geräten.

‍

Dank dieser Funktionen konnten wir eine flexible und intuitive Nutzung unserer Dashboards bieten, was die Benutzerfreundlichkeit von ilert erheblich verbessert.

‍

In diesem Video können Sie sehen, wie die interaktiven Dashboards von ilert funktionieren:

Eine kurze Gegenüberstellung: React-Grid-Layout vs. Alternativen für den ilert Use Case

Ich bin als Werkstudent für Frontend-Entwicklung zu ilert gekommen. Vorher habe ich hauptsächlich iOS-Apps programmiert. Obwohl ich bereits einige Erfahrung mit Webtechnologien hatte, war der Einstieg in die Frontend-Entwicklung ein großer Schritt. Bei der Entwicklung von iOS- und Web-Apps fallen zwar die gleichen Aufgaben an, wie zum Beispiel die Entwicklung der Benutzeroberfläche (UI) und das Programmieren der App-Logik. Die eigentlichen Entwicklungsumgebungen sind jedoch völlig unterschiedlich. In diesem Artikel findest du einen Vergleich von Setup, Benutzeroberfläche, Debugging-Prozess, Dokumentation und anderen Aspekten.

‍

Da ich bereits mit Webtechnologien (HTML, CSS, JavaScript) vertraut war, wurde ich in zwei Frontend-Projekte eingebunden, die TypeScript, React und MobX verwenden. Meine Aufgabe war die Migration eines der Projekte – das Frontend der Benutzeroberfläche für Berichte in ilert – in das größere, das ilert Management-UI. Der erste Schritt bestand darin, die Apps zu programmieren und laufenzulassen.

Setup

Für ein typisches iOS-App-Projekt muss Xcode und wahrscheinlich ein Paketmanager wie CocoaPods oder Carthage installiert werden. Dann kann man ein Xcode-Projekt oder einen Workspace öffnen und die Abhängigkeiten mithilfe des ausgewählten Paketmanagers installieren. Wenn Swift Packages verwendet werden, installiert Xcode die Abhängigkeiten automatisch. 

‍

Für die beiden Webprojekte musste ich zwei verschiedene Versionen von Node.js installieren. npm wurde als Paketmanager verwendet. Außerdem wurden Browser benötigt, um mit der Anwendung zu interagieren. Das nvm-Skript wurde verwendet, um verschiedene Versionen von Node.js zu verwalten. 

‍

Zum Zeitpunkt der Einrichtung verwendete das ältere Projekt für die Berichte-Benutzeroberfläche Node.js 14, das nicht mehr gepflegt wurde. Es gab keine vorkompilierten Binärdateien für diese Version zum Herunterladen. nvm versuchte, aus dem Quellcode auf macOS Sonoma aufzubauen, was jedoch fehlschlug. Daher lud ich das Einfaches Installationspaket von v14.21.3 herunter, installierte es systemweit und verwendete nvm nur für das neue Projekt. Als Editor habe ich Visual Studio Code mit Prettier - Code Formatter und Vim Extensions verwendet.

‍

Vorschau

Nachdem alles installiert ist, was man für die Erstellung braucht, ist es an der Zeit, die Anwendung live auszuführen. In Xcode kann man eine App vollständig programmieren und laufenlassen, ohne über das Command Line Interface (CLI) zu gehen. Im vorliegenden Fall verwenden beide Projekte React Script zum Erstellen und Ausführen der App.

‍

UIKit und SwiftUI sind integrierte UI-Frameworks für iOS-Apps. Mit UIKit kann man das UI in Storyboards erstellen, in SwiftUI ausschließlich mit Code – und die Live-Vorschau daneben sehen, alles in Xcode.

Die Vorschau bei einer React-Web-App ist völlig anders. Der Inhalt der App wird lokal von einem HTTP-Server bereitgestellt, von dem der Browser die Benutzeroberfläche der App laden kann. Im Entwicklungsmodus unterhält die App eine Websocket-Verbindung zum Server, um Updates abzurufen. Dadurch aktualisiert sich die Benutzeroberfläche automatisch, wenn sich der Code ändert. Normalerweise werden nur die geänderten relevanten HTML-Elemente und Skripte aktualisiert. Andernfalls wird die Webseite vollständig neu geladen.

Debugging

Die Standard-Build-Konfiguration in Xcode ist auf Debugging eingestellt. Der Frontend-Entwickler kann mit dem Debuggen starten, indem er Breakpoints hinzufügt und die App ausführt. Der normale Input bzw. Output in der App kann im Debug Area von Xcode getestet werden.

Um eine React-App zu debuggen, verwenden Frontend-Programmierer die Entwickler-Tools des Browsers oder fügen Visual Studio Code Debug-Konfigurationen mit .vscode/launch.json hinzu. Beide Projekte, an denen ich gearbeitet habe, hatten eine Debug-Konfiguration für Chrome. Beim Starten wird der Browser geöffnet, und das Debugging kann innerhalb von Visual Studio Code durchgeführt werden. Da beide Projekte TypeScript verwenden, musste ich auch Source Maps aktivieren.

Das Debuggen der Benutzeroberfläche in iOS-Apps ist einfacher, da die Elemente keine Formatierung von ihrem übergeordneten Element übernehmen. ilert React-Apps verwenden Material UI als grundlegendes Komponenten-Framework. Beim Debuggen der Formatierung einer Komponente musste ich das zugehörige CSS und den Code der Komponente untersuchen, falls vorhanden, da wir CSS in JavaScript für Komponenten geschrieben hatten.

‍

Wenn man UIKit in einer iOS-App verwendet, muss man sie in einem Simulator oder auf einem iPhone oder iPad erstellen und installieren, um die App auszuführen. Mit SwiftUI kann man auch eine Vorschau der App in Xcode erstellen. Es kann jedoch jeder Browser verwendet werden, um eine React-App auszuführen und mit ihr zu interagieren.

Dokumentation

Die Dokumentation für das gesamte iOS SDK ist in Xcode automatisch enthalten. Daher kann man als Entwickler bequem arbeiten, auch wenn man komplett offline ist. Um die Dokumentation von Webtechnologien zu finden, muss man jedoch online gehen. Es gibt verschiedene Quellen für die Dokumentation, zum Beispiel für HTML, CSS, React, MobX und Material UI.

Arbeiten mit Code

Bevor ich begann, direkt mit den Projekten zu arbeiten, lernte ich die Grundlagen von React und MobX. Dann untersuchte ich verwandte Teile des Codes, um zu verstehen, wie sie zusammenarbeiten, und lernte gleichzeitig die TypeScript-Funktionen kennen. Da die Aufgabe darin bestand, den alten Code in die neue React-App zu migrieren, bestand der größte Teil der Arbeit darin, alte Material UI- und MobX-Versionen auf neuere zu migrieren. Für React musste ich Class Components zu Functions umschreiben. Für MobX musste ich Decorators entfernen und zu makeAutoObservable wechseln. Glücklicherweise gibt es ein praktisches Tool namens mobx-undecorate genau für diesen Zweck.

‍

Während der Migration schaute ich mir Dokumentationen und Beispiele an, um etwas Neues zu lernen, insbesondere für die Migration von JSS zu MUI-Components und für die Migration von MobX Version 5 zu 6.

‍

Als ehemaliger iOS-App-Entwickler, der Swift, eine statisch typisierte Sprache, verwendet hatte, finde ich, dass das Programmieren in TypeScript für Web-Apps sehr hilfreich ist. In Visual Studio Code werden die Fehler aufgrund von nicht übereinstimmenden Typen gekennzeichnet, was das Schreiben von Code einfacher und sicherer macht.

So kannst auch du loslegen

Die Entwicklung von iOS-Apps ist wesentlich leichter zu erlernen, da Apple es einem leicht macht, „Hello, World!“ mit minimalem Aufwand anzuzeigen – abgesehen von der Installation von Xcode, die je nach Internetverbindung einige Minuten bis Stunden dauern kann. Es gibt eine Swift Playgrounds App für iPad und Mac, die Spiele anbietet, mit denen Junior Developer Swift lernen und dabei Spaß haben können. Insgesamt ist die Lernerfahrung beim Entwickeln von iOS-Apps besser.

‍

Um eine React-App zum Laufen zu bringen, sollte ein Programmierer zumindest mit der Installation von Software auf seinem Computer und der Verwendung des CLI vertraut sein. Als absoluter Neuling sollte man zuerst die Grundlagen von HTML und CSS lernen und dann mit JavaScript weitermachen. Es gibt viele gute Bücher, zum Beispiel „Beginning JavaScript, 4th Edition“ von Paul Wilton und Jeremy McPeak und Tutorials dazu. Sobald du dich mit diesen Technologien vertraut gemacht hast, fange an, fortgeschrittene Code-Editoren wie Visual Studio Code zu nutzen, um deine Produktivität zu steigern. Du solltest auch versuchen, dich mit einigen JavaScript-Bibliotheken wie React und Ember.js oder Svelte vertraut zu machen.

‍

Für mich war es eine gute Entscheidung, mehr Zeit in das Erlernen von Webentwicklung zu investieren und gleichzeitig an großartigen Projekten zu arbeiten. Jetzt kann ich mir aussuchen, ob ich eine native iOS-App oder eine hybride App mit Webtechnologien entwickeln möchte.

Komm ins ilert-Team

Nay Min Ko ist seit kurzem als Werkstudentin im ilert-Team. Willst du ebenfalls in unser Team kommen? Dann schau gerne auf unserer Karriereseite vorbei. Vor Kurzem haben wir auch einen Artikel unseres Junior Frontend-Entwicklers Jan veröffentlicht: Er berichtet darin, wie er sein erstes Produkt-Feature - ein Dashboard - entwickelt hat.