Die Ursprungsidee für unser Projekt entsprang dem kreativen Geist von Grischa. Seine Inspiration entsprang dem Wunsch, ein Interface während des Autofahrens zu evaluieren – natürlich in einer simulierten Umgebung. Die zugrunde liegende Idee war, dass ein Interface, das auch unter den Ablenkungen und Herausforderungen des Autofahrens problemlos funktioniert und bedient werden kann, intuitiv und einfach genug gestaltet ist.

Ursprünglich planten wir, unsere Methode auf dem Gelände der Fachhochschule vorzustellen, um eine authentische Testumgebung zu schaffen. Jedoch stellten wir fest, dass dies nicht möglich war, da unsere Versicherung nicht bereit war, uns die nötige Deckung zu gewähren. Als Alternative beschlossen wir, einen anderen Stresstest nach dem gleichen Schema durchzuführen.

Leider stellten wir fest, dass einige dieser Tests nicht alleine oder vollständig reproduzierbar waren. Dies führte uns zu der Überlegung, wie wir eine zuverlässige Methode entwickeln könnten, um die Aufmerksamkeit in einer kontrollierten Umgebung zu beeinträchtigen.

Aus dieser Herausforderung entstand die Idee, eine Webanwendung zu entwickeln, die genau dies bewerkstelligen sollte: die Aufmerksamkeit der Benutzer gezielt zu beeinträchtigen und dabei alle relevanten Daten aufzuzeichnen. Diese Idee war der Ausgangspunkt für die Entwicklung unserer innovativen Stresstest-Webanwendung.

Unser Ansatz war es, eine benutzerfreundliche Plattform zu schaffen, die es den Benutzern ermöglicht, Stresstests für ihre Anwendungen durchzuführen, und gleichzeitig eine detaillierte Analyse der Ergebnisse zu ermöglichen. Dabei setzen wir auf moderne Technologien wie WebSockets für eine effiziente Echtzeitkommunikation und Svelte für ein reaktives und performantes Frontend.

Die Kernidee hinter unserer Webanwendung ist einfach: Benutzer können individuelle Stresstests erstellen, indem sie Parameter wie Testdauer, Ereignisse und weitere Einstellungen festlegen. Sobald der Test erstellt ist, generiert die Anwendung einen QR-Code, der gescannt werden kann, um den Test zu starten.

Nach dem Start des Tests werden alle verbundenen Geräte in einem vordefinierten Muster zum Blinken gebracht und geben gleichzeitig einen Alarm aus. Jeder Benutzer muss jeden Alarm quittieren, was eine effektive Überwachung und Reaktion auf die Testbedingungen ermöglicht.

Ein entscheidender Aspekt unserer Webanwendung ist die umfangreiche Aufzeichnung aller Testparameter und Ereignisse. Diese Daten werden sorgfältig gespeichert und können später für eine detaillierte Analyse und Bewertung der Anwendungsnutzung verwendet werden.

Darüber hinaus verfügt unsere Anwendung über ein umfassendes Benutzermanagement, das es Administratoren ermöglicht, Benutzerkonten zu verwalten und Zugriffsrechte zu steuern. Benutzer können ihre erstellten Tests speichern und später erneut laden, um sie erneut durchzuführen oder zu modifizieren.

Dank der Verwendung von WebSockets können wir eine nahtlose Echtzeitkommunikation zwischen den Benutzern und der Anwendung gewährleisten, was eine schnelle Reaktion auf Ereignisse während des Tests ermöglicht. Darüber hinaus ermöglicht die Verwendung von Svelte als Frontend-Technologie eine reaktionsschnelle Benutzeroberfläche mit einer beeindruckenden Leistung, selbst bei umfangreichen Stresstestszenarien.

Insgesamt sind wir davon überzeugt, dass unsere Webanwendung einen bedeutenden Beitrag zur Verbesserung der Qualität und Leistungsfähigkeit von Softwareanwendungen leisten wird, indem sie Benutzern eine effektive Möglichkeit bietet, deren Belastbarkeit unter realen Bedingungen zu testen und zu bewerten.

Neues Learning 1: Der Websocket

Die Entscheidung, WebSocket als Kommunikationsprotokoll für das SyncBlink-Projekt zu verwenden, war strategisch und basierte auf verschiedenen Überlegungen, die die Anforderungen und Ziele des Projekts berücksichtigten.

Zunächst einmal bietet WebSocket eine bidirektionale, dauerhafte Verbindung zwischen dem Server und den Clients. Im Vergleich zu herkömmlichen HTTP-Anfragen, die eine neue Verbindung für jede Anfrage öffnen und schließen, ermöglicht WebSocket eine kontinuierliche Kommunikation in Echtzeit. Dies ist besonders wichtig für Stresstestszenarien, in denen schnelle Reaktionszeiten und die Möglichkeit, Befehle sofort an die verbundenen Geräte zu senden, entscheidend sind.

Ein weiterer wichtiger Aspekt ist die Effizienz von WebSocket in Bezug auf die Netzwerkbelastung. Durch die Vermeidung des Overheads, der mit HTTP-Anfragen verbunden ist, und die Reduzierung der Latenzzeit bietet WebSocket eine optimierte Lösung für die Echtzeitkommunikation.

Darüber hinaus ermöglicht WebSocket die nahtlose Übertragung von Daten in einem standardisierten Format. Dies erleichtert die Entwicklung von Anwendungen, da Entwickler sich auf die Implementierung der Geschäftslogik konzentrieren können, ohne sich um die Details der Datenübertragung kümmern zu müssen.

Ein weiterer entscheidender Faktor für die Verwendung von WebSocket in unserem Projekt war die Notwendigkeit einer gemeinsamen Echtzeiterfahrung für alle Benutzer. WebSocket ermöglicht es, dass alle verbundenen Clients synchronisiert werden und gleichzeitig die gleichen Befehle erhalten, um die Geräte im Test zu steuern. Dies ist besonders wichtig für die Durchführung von koordinierten Stresstests, bei denen die Aktionen aller Benutzer simultan erfolgen müssen.

Insgesamt war WebSocket die ideale Wahl für das SyncBlink-Projekt aufgrund seiner Fähigkeit, eine zuverlässige, effiziente und synchronisierte Echtzeitkommunikation zu ermöglichen. Diese Entscheidung hat maßgeblich dazu beigetragen, eine leistungsstarke und benutzerfreundliche Plattform für Stresstests zu schaffen, die den Anforderungen unserer Benutzer gerecht wird.

Ein grober Aufbau des Websockets:

1. Verbindungsaufbau:
   • Clients (sowohl Hosts als auch Teilnehmer) stellen eine Verbindung zum WebSocket-Server her.
   • Hosts verbinden sich einfach mit “wss://syncblink-ws.bandy-app.com”, während Clients eine Gruppen-ID an die URL anhängen müssen (z.B., “wss://syncblink-ws.bandy-app.com/?groupId=<hostGroupId>”), um sich einer bestehenden Session anzuschließen.
2. Nachrichtenformat:
   • Sowohl der Server als auch die Clients kommunizieren durch Senden und Empfangen von Nachrichten in einem standardisierten Format: {type: "typeOfMessage", data: "objectWithData"}.
3. Typen von Nachrichten:
   • socket_opened: Bestätigt die erfolgreiche Verbindung.
   • new_client: Informiert den Host über einen neuen Teilnehmer und sendet eine Liste aller verbundenen Geräte.
   • closing_client: Informiert den Host, dass ein Teilnehmer die Verbindung getrennt hat, und sendet die Geräte-ID des sich trennenden Clients.
   • trigger: Sendet einen Befehl an ein spezifisches Gerät, um eine Aktion auszuführen (z.B., ein Licht zu blinken). Diese Nachricht enthält Gruppen-ID, Geräteinformationen und zusätzliche Eigenschaften für den Trigger.
   • stop: Beendet alle Client-Verbindungen innerhalb einer Gruppe, lässt aber den Host verbunden.
4. Sitzungsverwaltung:
   • Der Server verwaltet aktive Sessions und Geräte mittels einer internen Map-Struktur. Jeder Client (bzw. Gerät) wird einer Session zugeordnet, wobei jeder Session eine eindeutige Gruppen-ID zugewiesen ist.
   • Bei jeder Verbindung wird überprüft, ob es sich um einen neuen Client oder einen Host handelt. Neue Clients erhalten eine Geräte-ID und werden der entsprechenden Session zugeordnet. Hosts verwalten die Session und erhalten Updates über Client-Verbindungen und -Trennungen.
5. Ereignisbehandlung:
   • Sobald eine Verbindung steht, können Nachrichten für verschiedene Zwecke gesendet werden: Geräte triggern, Sessions stoppen, und über Zustandsänderungen informieren.
   • Der Server verarbeitet eingehende Nachrichten, führt die angeforderten Aktionen aus, und leitet entsprechende Befehle an die betreffenden Clients weiter.
6. Fehlerbehandlung:
   • Fehler während der WebSocket-Kommunikation (z.B., wenn der angeforderte Master oder Client nicht gefunden wird) führen zum Senden einer Fehlermeldung mit dem Typ “error” und einer Beschreibung des aufgetretenen Fehlers.
     
     

Neues Learning 2: Das G in Vue steht für Gut

Neues Learning 3: Svelte mit Tailwind & Skeleton/Flowbite machen Spaß

Ursprünglich hatten wir geplant, Vue.js für das Frontend zu verwenden. Vue.js ist bekannt für seine Einfachheit und Flexibilität, besonders für kleinere Anwendungen. Jedoch stellten wir fest, dass die Verwendung von TypeScript mit Vue.js zu Komplikationen führte, ähnlich wie Java und JavaScript nicht immer nahtlos zusammenarbeiten. Deshalb entschieden wir uns nach einigen Stunden und Tagen der Evaluation gegen Vue.js und wählten stattdessen Svelte. Die Entscheidung erwies sich als äußerst positiv, da Svelte eine leistungsstarke Alternative darstellt, die sich nahtlos in unser Projekt integrieren ließ und eine äußerst angenehme Entwicklererfahrung bietet.

Tailwind CSS und Skeleton für das Styling: Da wir wenig Zeit in die Gestaltung des Frontends investieren wollten, entschieden wir uns für Tailwind CSS, um schnell und effizient ansprechende Benutzeroberflächen zu erstellen. Tailwind CSS ermöglicht es uns, den Styling-Prozess zu beschleunigen, indem wir die Styles direkt in den HTML-Dateien definieren. Obwohl dies anfangs etwas ungewohnt war, stellten wir fest, dass dies eine effektive Möglichkeit ist, das Styling zu vereinfachen und gleichzeitig eine hohe Flexibilität zu bieten. Zusätzlich nutzten wir Skeleton als UI-Bibliothek, um das Aussehen unserer Anwendung weiter zu verbessern und sicherzustellen, dass sie sowohl funktional als auch ästhetisch ansprechend ist.

Kommunikation über WebSockets: Die Kommunikation im Frontend erfolgt über eine WebSocket-Verbindung zum Server. Diese bidirektionale, dauerhafte Verbindung ermöglicht eine effiziente Echtzeitkommunikation zwischen dem Frontend und dem Backend-Server. Durch die Verwendung von WebSockets können wir sicherstellen, dass alle Benutzer synchronisiert sind und dass Testergebnisse sofort aktualisiert und angezeigt werden können. Dies ist besonders wichtig für Stresstestszenarien, bei denen eine schnelle Reaktionszeit und präzise Steuerung erforderlich sind.

Strukturierte Architektur und reaktives Zustandsmanagement: Das Frontend ist strukturiert und organisiert, um eine klare Trennung von Verantwortlichkeiten zu gewährleisten und die Wartbarkeit zu erleichtern. Wir verwenden Svelte-Komponenten, um die Benutzeroberfläche zu definieren und WebSocket-Funktionen, um die Kommunikation mit dem Server zu verwalten. Reaktive Zustandsmanagement-Techniken, wie z.B. die Verwendung von Stores, ermöglichen es uns, den Zustand der Anwendung effektiv zu verwalten und die Benutzeroberfläche dynamisch zu aktualisieren, basierend auf den Änderungen, die über WebSockets empfangen werden.

Insgesamt bietet die Frontend-Architektur von SyncBlink eine robuste und flexible Grundlage für die Durchführung von Stresstests und die effiziente Verwaltung von Benutzerinteraktionen in Echtzeit. Durch die Verwendung von Svelte, Tailwind CSS und WebSockets konnten wir eine ansprechende und leistungsfähige Anwendung entwickeln, die den Anforderungen unserer Benutzer gerecht wird.

Ein grober Aufbau unseres Frontends

1. Verbindungsaufbau über WebSockets:
   • Der Websocket.ts im src/lib-Ordner ist verantwortlich für das Einrichten der WebSocket-Verbindung mit dem Server. Die connectWebSocket-Funktion erlaubt es dem Frontend, sich entweder als Host oder als Client zu einer Gruppe (Session) zu verbinden, indem optional eine Gruppen-ID an die WebSocket-URL angehängt wird.
2. Session-Management und Gerätetriggerung:
   • Innerhalb der WebSocket-Kommunikation gibt es Funktionen wie startSession, triggerDevice, und stopSession, die für das Senden spezifischer Nachrichtentypen zum Server verantwortlich sind. Diese Funktionen werden verwendet, um Tests zu starten, Geräte innerhalb einer Session zu triggern oder die Session zu beenden.
3. Komponenten für Benutzerinteraktion:
   • TestModal.svelte, BlinkModal.svelte, und ShareTestModal.svelte sind Svelte-Komponenten, die die Benutzerinteraktion mit der Anwendung darstellen. Sie nutzen die oben genannten WebSocket-Funktionen, um Benutzereingaben wie das Starten eines Tests oder das Triggern eines Geräts in Echtzeit zu verarbeiten.
4. Dynamische Testkonfiguration:
   • Der TestForm.svelte im src/routes/(main)-Ordner ermöglicht es dem Benutzer, Testparameter wie Testdauer, Ereignisanzahl und Geräteanzahl festzulegen. Nach der Konfiguration können diese Einstellungen genutzt werden, um die Testsession über WebSockets zu starten.
5. Reaktives Zustandsmanagement:
   • Die Stores in src/lib/stores, wie z.B. websocketData.ts und user.ts, verwalten den Zustand der Anwendung, einschließlich der verbundenen Geräte und Benutzerdaten. Diese Stores sind zentral für das Aktualisieren der UI basierend auf den Änderungen, die über WebSockets empfangen werden.
6. Feedback und Ergebnisanzeige:
   • Nach dem Abschluss von Tests können die Ergebnisse über die results/+page.svelte-Komponente visualisiert werden. Diese Komponente zeigt eine Zusammenfassung der Testergebnisse, ermöglicht das Herunterladen der Daten und bietet eine visuelle Darstellung der gesammelten Daten.

Zusammenfassend ermöglicht die Frontend-Architektur von SyncBlink eine reibungslose und effiziente Echtzeitkommunikation zwischen den Benutzern und dem Backend-Server für die Durchführung von Stresstests. Durch die Nutzung von WebSockets wird sichergestellt, dass alle Teilnehmer einer Session synchronisiert sind und dass die Testergebnisse in Echtzeit analysiert und dargestellt werden können.

Neues Learning 4: Warum Tailwind großartig ist?

HTML-Datei mit normalem CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind vs. Normal CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
    <h1 class="text-2xl font-bold text-blue-500">Hello, world!</h1>
    <p class="text-lg text-gray-700">This is a paragraph with some text.</p>
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">Click me</button>
</div>

</body>
</html>

styles.css:

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.container h1 {
    font-size: 24px;
    font-weight: bold;
    color: #1e40af;
}

.container p {
    font-size: 16px;
    color: #4b5563;
}

.container button {
    padding: 10px 20px;
    background-color: #4299e1;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.container button:hover {
    background-color: #3182ce;
}

Mit Tailwind:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind vs. Normal CSS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold text-blue-500">Hello, world!</h1>
    <p class="text-lg text-gray-700">This is a paragraph with some text.</p>
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700">Click me</button>
</div>

</body>
</html>

In diesem Beispiel sehen Sie, dass Tailwind CSS Klassen verwendet, um das Styling direkt im HTML-Code anzugeben, während herkömmliches CSS in einer separaten Datei definiert ist. Der Einsatz von Tailwind CSS ermöglicht es, das Styling direkt in den Elementen zu definieren, was die Entwicklung beschleunigen kann, während herkömmliches CSS eine separate Stylesheet-Datei erfordert.

Skeleton: Ein UI-Framework für Svelte +Tailwind

Skeleton ist ein leichtgewichtiges und minimalistisches UI-Framework, das speziell für die Verwendung mit Svelte entwickelt wurde. Es bietet vorgefertigte Komponenten und Layouts, die es einfach machen, ansprechende Benutzeroberflächen für Svelte-Anwendungen zu erstellen, ohne dabei aufgebläht oder überladen zu wirken.

Merkmale von Skeleton:

1. Leichtgewichtig und minimalistisch: Skeleton ist bewusst schlank und minimalistisch gehalten, um eine einfache Integration in Svelte-Projekte zu ermöglichen, ohne unnötigen Overhead oder unnötige Komplexität.
2. Einfache Verwendung: Skeleton bietet eine Reihe von vorgefertigten Komponenten und Layouts, die einfach in Svelte-Anwendungen eingebunden werden können. Dies erleichtert die Entwicklung von Benutzeroberflächen, indem es Entwicklern ermöglicht, sich auf die Funktionalität ihrer Anwendungen zu konzentrieren, anstatt Zeit mit dem Erstellen von UI-Komponenten zu verbringen.
3. Responsives Design: Die Komponenten und Layouts von Skeleton sind responsiv und passen sich automatisch an verschiedene Bildschirmgrößen und Geräte an. Dies gewährleistet eine konsistente Benutzererfahrung auf allen Geräten und Bildschirmgrößen.
4. Modular und anpassbar: Skeleton ist modular aufgebaut, was es Entwicklern ermöglicht, nur die Komponenten und Funktionen zu verwenden, die sie benötigen. Darüber hinaus ist Skeleton vollständig anpassbar und kann leicht an die spezifischen Anforderungen und Designrichtlinien eines Projekts angepasst werden.
5. Aktive Community und Unterstützung: Skeleton wird von einer aktiven Community von Entwicklern unterstützt, die regelmäßig Updates und Verbesserungen bereitstellen. Darüber hinaus gibt es eine Vielzahl von Ressourcen und Dokumentationen, die Entwicklern helfen, das Beste aus dem Framework herauszuholen.

Insgesamt bietet Skeleton eine einfache und effektive Möglichkeit, ansprechende Benutzeroberflächen für Svelte-Anwendungen zu erstellen, ohne dabei auf Komplexität oder übermäßigen Code zurückgreifen zu müssen. Mit seiner schlanken und minimalistischen Herangehensweise ist Skeleton eine hervorragende Wahl für Entwickler, die eine einfache und benutzerfreundliche UI-Lösung für ihre Svelte-Projekte suchen.

Neues Learning 5: Pocketbase für das Datenmanagement

Um die Benutzerkonten, Testdaten und andere relevante Informationen effizient zu verwalten, haben wir uns für Pocketbase als unsere Datenbanklösung entschieden. Pocketbase bietet eine benutzerfreundliche und skalierbare Plattform für das Speichern und Abrufen von Daten in Echtzeit.

Pocketbase faden wir dabei immer cool, denn wer das süße Maskottchen mal ins herz geschlossen hat, der will es natürlich auch mit Daten füttern !

Warum Pocketbase?

1. Einfachheit und Benutzerfreundlichkeit: Pocketbase bietet eine einfache und intuitive Schnittstelle für das Datenmanagement. Durch die Verwendung von Pocketbase konnten wir schnell und effizient Datenbankoperationen durchführen, ohne uns um komplexe Konfigurationen oder Administration kümmern zu müssen.
2. Echtzeitdatenbank mit WebSockets: Eine der herausragenden Funktionen von Pocketbase ist die Unterstützung von Echtzeitdatenbanken mit WebSockets. Dies ermöglicht es uns, Daten in Echtzeit zwischen dem Frontend und dem Backend auszutauschen, was besonders wichtig ist für die Synchronisation von Benutzerinteraktionen und Testergebnissen in unserer Anwendung.
   Leider haben wir das erst später erfahren. So haben wir unser Websocket nicht mit Pocketbase erstellt… Tja
3. Skalierbarkeit und Zuverlässigkeit: Pocketbase bietet eine hoch skalierbare und zuverlässige Infrastruktur für das Datenmanagement. Wir können unsere Anwendung problemlos erweitern, wenn die Anforderungen wachsen, und gleichzeitig sicherstellen, dass unsere Daten sicher und geschützt sind.
4. Dokumentenorientierte Datenbankstruktur: Pocketbase basiert auf einer dokumentenorientierten Datenbankstruktur, die flexibel und anpassungsfähig ist. Dies ermöglicht es uns, Daten in einer strukturierten und übersichtlichen Weise zu organisieren, ohne uns um komplexe relationale Datenbankmodelle kümmern zu müssen.
5. Entwicklerfreundlichkeit: Pocketbase bietet eine Reihe von Entwicklerwerkzeugen und -funktionen, die die Entwicklung und Wartung unserer Anwendung erleichtern. Durch die Verwendung von Pocketbase konnten wir unsere Entwicklungszeit verkürzen und gleichzeitig sicherstellen, dass unsere Anwendung robust und leistungsstark ist.

Neugierig ?
Besuche Blinky.bandy-app.com

The post Blinky – die App die stressen soll appeared first on Mobile USTP MKL.

Die Motivation hinter dem tiefergehenden Blick in die Infrastrukturtransformation von Instagram wurzelt in einer langjährigen Faszination für die Skalierbarkeit globaler Systeme. Diese Begeisterung wurde besonders angefacht, als ich begann, mich mit FastAPI, einer modernen, schnellen (high-performance) Backend-Webentwicklung mit Python zu beschäftigen. FastAPI, zusammen mit Django und Flask, bildet das Trio der führenden Backend-Frameworks in der Python-Entwicklungswelt. Jedes dieser Frameworks bringt seine eigenen Stärken und Einschränkungen mit sich, was die Entscheidung für eine Technologie sowohl zu einer Frage der Anforderungen als auch der persönlichen Vorlieben macht.

Die Entdeckung, dass Instagram, eine Plattform mit Milliarden von Nutzern, auf Django – einem Python-Framework – aufbaut, war eine Offenbarung. Es räumte mit dem Vorurteil auf, dass Python und seine Frameworks nur für kleinere Projekte oder Hobbyprogrammierer geeignet sind. Stattdessen stand ich vor einem lebendigen Beispiel dafür, wie Python-basierte Backend-Systeme skaliert und optimiert werden können, um den Anforderungen einer der größten Social-Media-Plattformen der Welt gerecht zu werden.

Diese Erkenntnis motivierte mich, tiefer in das Thema einzutauchen und die verschiedenen Quellen zu erkunden, die die Evolution der technischen Infrastruktur von Instagram beleuchten. Von der Optimierung der Datenverarbeitung über innovative Video-Codierungsmethoden bis hin zur effizienten Nutzung von Serverressourcen. Jeder Aspekt dieser Transformation bietet wertvolle Lektionen und Inspiration für Entwickler und Technologieenthusiasten.

Durch die Zusammenfassung dieser Erkenntnisse in einem Bericht wollte ich nicht nur mein Verständnis für die Herausforderungen und Lösungen im Kontext globaler Skalierung vertiefen, sondern auch andere ermutigen, die Potenziale von Python und seinen Frameworks in der Entwicklung großer und leistungsfähiger Systeme zu erkennen. Die Geschichte von Instagrams technischer Evolution unterstreicht die Bedeutung kontinuierlicher Innovation und Anpassung, um den wachsenden Anforderungen einer dynamischen Nutzerbasis gerecht zu werden. Sie dient als Beweis dafür, dass mit der richtigen Strategie und den passenden Technologien auch scheinbar unüberwindbare technische Herausforderungen gemeistert werden können.

Überblick:

Die Skalierung und Optimierung der Webserver waren kritische Aspekte in der Entwicklung von Instagram, um mit dem rasanten Wachstum der Plattform Schritt zu halten. Die steigende Anzahl monatlich aktiver Benutzer und der exponentielle Anstieg der Anfragen pro Sekunde stellten eine Herausforderung dar, die nicht nur durch die Erweiterung der Serverinfrastruktur, sondern auch durch eine effiziente Gestaltung und Konfiguration der Webserver bewältigt werden musste. Instagram setzte auf zustandslose Webserver, die eine Schlüsselkomponente in modernen, hochverfügbaren Webanwendungen darstellen. Zustandslose Server speichern keine Informationen über den Benutzerzustand von einer Anfrage zur nächsten, was sie ideal für die Skalierung und Verteilung über mehrere Server und Rechenzentren macht. Dieser Ansatz ermöglichte es Instagram, eine hohe Verfügbarkeit und Zuverlässigkeit zu gewährleisten, indem Benutzeranfragen effizient zwischen den Servern verteilt wurden, ohne dass die Notwendigkeit bestand, den Benutzerzustand von einem Server zum anderen zu synchronisieren. Zur Bewältigung der Last wurden die Anfragen intelligent zwischen synchronen und asynchronen Verarbeitungswegen aufgeteilt. Synchron bearbeitete Anfragen wurden direkt von den Webservern abgewickelt, um schnelle Antworten auf Benutzerinteraktionen zu ermöglichen. Asynchrone Jobs hingegen, wie das Verarbeiten von hochgeladenen Bildern oder das Versenden von Benachrichtigungen, wurden in eine Warteschlange eingereiht und von spezialisierten Async-Servern verarbeitet. Dieses Modell der Aufgabentrennung ermöglichte es Instagram, Ressourcen effizient zuzuweisen und sicherzustellen, dass zeitaufwändige Aufgaben die sofortige Benutzererfahrung nicht beeinträchtigen. Für eine optimale Lastverteilung und zur Minimierung der Latenz für Endbenutzer weltweit setzte Instagram auf Load Balancer und geografisch verteilte Rechenzentren. Die Load Balancer spielten eine entscheidende Rolle bei der Verteilung der eingehenden Anfragen auf die verfügbaren Webserver, basierend auf Faktoren wie Serverlast und geografischer Nähe zum Benutzer. Durch die geografische Verteilung der Serverinfrastruktur konnten Anfragen lokal abgehandelt werden, was die Antwortzeiten verbesserte und die Belastung der zentralen Datenbanken reduzierte. In der Erweiterung und Optimierung ihrer Webserver-Architektur nutzte Instagram Open-Source-Technologien und bewährte Verfahren. Server wie Nginx oder Apache HTTP Server, bekannt für ihre Effizienz und Flexibilität, könnten in ähnlichen Szenarien eingesetzt werden. Für die asynchrone Verarbeitung bieten Technologien wie Celery (für Python-basierte Anwendungen) oder RabbitMQ als Message Broker robuste Lösungen zur Verwaltung von Hintergrundjobs und zur Entkopplung von komplexen Verarbeitungsaufgaben. Abschließend lässt sich sagen, dass die Strategie von Instagram, in zustandslose Webserver und die intelligente Verteilung von Aufgaben zu investieren, ein beispielhafter Ansatz für die Skalierung moderner Webanwendungen ist. Diese Architektur bietet nicht nur eine solide Grundlage für das Wachstum und die Expansion, sondern gewährleistet auch eine hohe Benutzerzufriedenheit durch schnelle und zuverlässige Dienste. Entwickler, die vor ähnlichen Herausforderungen stehen, können von diesen Erfahrungen lernen und Open-Source-Alternativen in Betracht ziehen, um ihre eigenen Webanwendungen effizient und skalierbar zu gestalten.

Die Nutzung von modernen Datenformaten:

Die kontinuierliche Optimierung der Datenverarbeitung und -speicherung bei Instagram ist ein Kernaspekt der Infrastrukturentwicklung, um die Effizienz zu maximieren und das Nutzererlebnis zu verbessern. Ein herausragendes Beispiel dieser Bemühungen ist die innovative Methode zur Verarbeitung neuer Videos, die Instagrams Ingenieure entwickelt haben. Diese Methode reduziert die Kosten für die Erstellung grundlegender Video-Codierungen um 94 Prozent. Durch diese Optimierung kann die Videoinfrastruktur von Meta weiterhin skalieren, ohne zusätzliche Maschinen hinzufügen zu müssen. Dadurch werden Ressourcen frei, die es mehr Menschen ermöglichen, fortgeschrittene Codierungen zu nutzen, die ein klareres Video bieten, das flüssiger abgespielt wird. Dies ist besonders vorteilhaft für Personen in Ländern mit langsameren Internetverbindungen.

Angesichts einer stetig wachsenden Nutzerbasis von mehr als 2 Milliarden monatlich aktiven Benutzern war es für Instagram entscheidend, die bestmögliche Leistung aus seiner Serverflotte herauszuholen. Prognosen Anfang 2021 zeigten, dass innerhalb von 12 Monaten nicht genügend Kapazitäten vorhanden sein würden, um Video-Uploads für alle zu ermöglichen. Doch durch ständige Effizienzsteigerungen fand Instagram eine Möglichkeit, dieser zunehmenden Nachfrage zu begegnen und seine Infrastruktur zu skalieren, indem mehr aus den vorhandenen Maschinen herausgeholt wurde.

Instagram erzeugt mehrere codierte Versionen hochgeladener Videos, jede mit unterschiedlichen Eigenschaften. Durch die Wiederverwendung einer Art von Videocodierung zur Hilfe bei der Generierung einer anderen Art konnten die Rechenressourcen, die für weniger angesehene Videocodierungen aufgewendet wurden, um 94 Prozent reduziert werden. Mit mehr verfügbaren Ressourcen können mehr fortgeschrittene Codierungen produziert werden, was es mehr Menschen ermöglicht, Videos in klarerer Qualität mit flüssigerer Wiedergabe zu erleben.

Das Problem bestand darin, dass über 80 Prozent der Ressourcen für die Verarbeitung von Codierungen mit minimaler Funktionalität aufgewendet wurden. Wäre diese Tendenz fortgesetzt worden, hätten diese Codierungen innerhalb eines Jahres alle Ressourcen monopolisiert, was dazu geführt hätte, dass Videos länger zum Veröffentlichen gebraucht hätten oder gar nicht erst veröffentlicht werden konnten. Fortgeschrittene Codierungen machten nur 15 Prozent der gesamten Wiedergabezeit aus, und die gesamte Rechenleistung für Versionen mit minimaler Funktionalität aufzuwenden, hätte bald verhindert, dass fortgeschrittene Videocodierungen bereitgestellt werden könnten.

Durch die Entfernung redundanter Arbeitslasten und die Neupaketierung von Videoframes in eine ABR-fähige Dateistruktur konnte Instagram signifikant Rechenressourcen freisetzen. Dieser Ansatz ermöglichte eine erhöhte Produktion fortgeschrittener Codierungen, obwohl er auf Kosten der Kompressionseffizienz der grundlegenden ABR-Codierungen ging. Die Theorie war, dass die Generierung einer größeren Anzahl fortgeschrittener Codierungen insgesamt positiv für die Nutzer von Instagram sein würde.

Nach dem Start dieser Optimierung verzeichnete Instagram erhebliche Einsparungen bei den Rechenkosten und eine höhere Wiedergabezeit fortgeschrittener Codierungen. Die neue Codierungsstrategie reduzierte die Kosten für die Erstellung grundlegender ABR-Codierungen um 94 Prozent. Mit den freigewordenen Ressourcen konnte die Gesamtwiedergabezeit fortgeschrittener Codierungen um 33 Prozent erhöht werden. Dies bedeutet, dass heute mehr Menschen auf Instagram Videos erleben können, die klarer und flüssiger abgespielt werden. Dies ist besonders wichtig, um Personen in Ländern mit langsameren Internetverbindungen ein großartiges Erlebnis zu bieten.

Diese technische Innovation unterstreicht das Engagement von Instagram, kontinuierlich seine Produktangebote zu verbessern und einen signifikanten Einfluss zu haben, insbesondere angesichts seiner Skalierung – einschließlich 2 Milliarden monatlich aktiver Nutzer auf der Plattform und mehr als 140 Milliarden Reels-Wiedergaben auf Instagram und Facebook jeden Tag. Instagrams kontinuierliche Bemühungen um Ingenieursinnovationen sind entscheidend, um der wachsenden Nutzerbasis gerecht zu werden und den Anforderungen unserer Serverflotte zu begegnen.

Quelle: https://instagram-engineering.com/under-the-hood-instagram-in-2015-8e8aff5ab7c2

Webserver:

Die effiziente Verarbeitung und Speicherung des gewaltigen Datenvolumens, das von den Millionen Instagram-Nutzern generiert wird, stellte eine erhebliche Herausforderung dar. Um dieser Herausforderung zu begegnen, setzte Instagram auf eine Kombination aus modernen Technologien und bewährten Datenmanagementstrategien. Die Wahl fiel auf PostgreSQL und Cassandra als primäre Datenbanksysteme, die für ihre Robustheit, Skalierbarkeit und Leistung bekannt sind. Diese Systeme ermöglichten es Instagram, mit der ständig wachsenden Datenmenge Schritt zu halten und eine effiziente Datenabfrage und -speicherung zu gewährleisten. PostgreSQL, ein fortschrittliches Open-Source-objekt-relationales Datenbanksystem, wurde vor allem wegen seiner Zuverlässigkeit und der starken Unterstützung für komplexe Abfragen und Transaktionen ausgewählt. Seine Fähigkeit, mit großen Datensätzen umzugehen und eine hohe Leistung bei gleichzeitiger Wahrung der Datenintegrität zu bieten, machte es zu einer idealen Wahl für die Speicherung von Benutzerdaten, Beiträgen und Beziehungen. Cassandra hingegen, ein hoch skalierbares NoSQL-Datenbanksystem, wurde für die Verwaltung von Daten verwendet, die eine schnelle Schreib- und Lesegeschwindigkeit erfordern, wie z.B. Likes und Kommentare. Durch seine verteilte Natur konnte Cassandra problemlos über mehrere Rechenzentren hinweg skaliert werden, was eine nahtlose globale Expansion unterstützte und die Grundlage für eine hohe Verfügbarkeit und Ausfallsicherheit bildete. Um die globale Konsistenz der Daten über alle Nutzer hinweg sicherzustellen, implementierte Instagram ausgeklügelte Replikationsmechanismen. Diese Mechanismen waren entscheidend, um konsistente und aktuelle Daten über verschiedene geografische Standorte hinweg zu gewährleisten. Die Replikation zwischen den Datenzentren ermöglichte es, Daten nahe am Benutzer zu halten, was die Latenzzeit verringerte und die allgemeine Benutzererfahrung verbesserte. Für die Anwendungsentwicklung und Datenverarbeitung nutzte Instagram ebenfalls eine Reihe von Open-Source-Technologien. Beispielsweise unterstützten Message-Queueing-Systeme wie RabbitMQ und Apache Kafka die asynchrone Datenverarbeitung, die für die Bewältigung der enormen Mengen an Benutzerinteraktionen erforderlich war. Diese Systeme ermöglichten eine effiziente Verarbeitung von Ereignissen und Datenströmen, indem sie eine Entkopplung der Dienste erlaubten, was zu einer verbesserten Skalierbarkeit und Wartbarkeit der Anwendungsarchitektur führte. Insgesamt bildeten die Kombination aus PostgreSQL und Cassandra für die Datenspeicherung, ergänzt durch leistungsfähige Replikationsmechanismen und unterstützt durch eine robuste Architektur für die Datenverarbeitung, das Rückgrat der Fähigkeit von Instagram, mit dem rasanten Wachstum umzugehen. Diese Technologiestapel, zusammen mit dem Einsatz von Open-Source-Tools für spezifische Aufgaben, demonstrieren einen effektiven Ansatz für die Verwaltung großer Datenmengen in einem globalen, hochverfügbaren und skalierbaren Webdienst.

Ein tiefgreifender Einblick in die Transformation:

Die umfassende Transformation von Instagram zielte darauf ab, die Skalierbarkeit und Performance der Plattform zu optimieren, insbesondere in den Bereichen Datenbankmanagement, Cache-Konsistenz und Minimierung der Netzwerklatenz. Um die Backend-Systeme effizienter zu gestalten und die Zuverlässigkeit zu erhöhen, implementierte Instagram innovative Technologien und Strategien, die eine signifikante Verbesserung der Systemperformance zur Folge hatten. Eine Schlüsselstrategie war die Nutzung von Memcache-Leasing, eine Technik, die die Effizienz des Caching-Mechanismus verbessert. Durch dieses Verfahren wurde ein Mechanismus eingeführt, der temporäre Exklusivrechte für das Aktualisieren oder Abrufen von Cache-Daten vergibt, um die Konsistenz zu gewährleisten und Cache-Stürme zu vermeiden. Dies war besonders wichtig, um die Belastung der Datenbanken zu reduzieren und gleichzeitig schnelle Zugriffszeiten auf häufig angefragte Daten zu ermöglichen. Memcache-Leasing half dabei, die Cache-Effizienz zu maximieren und gleichzeitig die Wahrscheinlichkeit von Dateninkonsistenzen zu minimieren. Ein weiterer wichtiger Schritt zur Optimierung der Backend-Systeme war die Denormalisierung von Zählern in den Datenbanken. Durch die Denormalisierung – also das Speichern redundanter Daten in der Datenbank, um komplexe Abfragen zu vermeiden – konnte Instagram die Anzahl der notwendigen Datenbankzugriffe reduzieren. Dieser Ansatz war insbesondere bei der Verwaltung von hochfrequentierten Daten, wie beispielsweise der Anzahl von Likes oder Kommentaren eines Posts, effektiv. Die Denormalisierung ermöglichte es, diese Werte schnell zu aktualisieren und abzufragen, ohne aufwendige Berechnungen oder Joins durchführen zu müssen, was die Performance erheblich verbesserte. Die Kombination dieser Optimierungen führte zu einer deutlichen Reduzierung der Latenzzeiten. Ursprünglich bei etwa 10 ms, konnte Instagram die Antwortzeiten auf beeindruckende 60 ms verbessern. Dieser Leistungsgewinn trug wesentlich zu einer schnelleren und reibungsloseren Benutzererfahrung bei. Schnellere Ladezeiten und eine flüssigere Interaktion mit der Plattform erhöhen die Benutzerzufriedenheit und -bindung, was für den Erfolg von Instagram in einem hochkompetitiven Marktumfeld entscheidend ist. Diese technischen Verbesserungen bei Instagram unterstreichen die Bedeutung einer kontinuierlichen Optimierung und Anpassung der Backend-Systeme, um mit dem Wachstum der Nutzerbasis und den steigenden Anforderungen Schritt zu halten. Durch den Einsatz von Technologien wie Memcache-Leasing und die strategische Denormalisierung von Daten konnte Instagram nicht nur die Systemperformance verbessern, sondern auch die Skalierbarkeit und Zuverlässigkeit der Plattform sicherstellen. Diese Maßnahmen sind beispielhaft für die Anwendung moderner Technologien und Architekturprinzipien in der Entwicklung skalierbarer und performanter Webanwendungen.

Zusammenfassung und eigene Meinung

Die Architektur, die Instagram entwickelt hat, um mit seinem massiven Wachstum Schritt zu halten, ist wirklich bemerkenswert. Es ist faszinierend zu sehen, wie sie sich Herausforderungen wie der steigenden Anzahl von Benutzern und der ständig zunehmenden Anfragen pro Sekunde gestellt haben. Durch den Einsatz von zustandslosen Webservern, intelligenten Lastverteilungssystemen und leistungsfähigen Datenbanklösungen haben sie eine Infrastruktur geschaffen, die nicht nur hochverfügbar und skalierbar ist, sondern auch eine schnelle und zuverlässige Benutzererfahrung gewährleistet.

Persönlich beeindruckt mich die Herangehensweise von Instagram an die Technologie. Sie haben nicht nur auf bewährte Methoden gesetzt, sondern auch Open-Source-Technologien genutzt und kontinuierlich nach Optimierungsmöglichkeiten gesucht. Diese Kombination aus Innovation und Pragmatismus ist inspirierend und zeigt, wie man mit kreativen Lösungen große technische Herausforderungen bewältigen kann.

Als Entwickler finde ich es besonders spannend, von den Erfahrungen und Entscheidungen zu lernen, die Instagram gemacht hat. Ihre Architektur ist ein wertvolles Fallbeispiel dafür, wie man skalierbare und leistungsfähige Webanwendungen entwickelt. Es ermutigt mich, neue Ansätze zu erkunden und Open-Source-Tools in meine eigenen Projekte zu integrieren.

Insgesamt ist die Architektur von Instagram nicht nur beeindruckend, sondern auch inspirierend. Sie zeigt, wie Technologie dazu beitragen kann, innovative Lösungen für komplexe Probleme zu schaffen und gleichzeitig eine erstklassige Benutzererfahrung zu gewährleisten.

Alle Optimierungen lassen sich auf 4 Punkte reduzieren:

1. Caching-Strategien: Instagram setzte auf effiziente Caching-Mechanismen, um häufig abgerufene Daten zu speichern und den Zugriff auf diese Daten zu beschleunigen. Durch die Verwendung von Caching-Technologien wie Redis oder Memcached konnte die Plattform die Antwortzeiten für Benutzeranfragen weiter optimieren und die Last auf die Datenbanken reduzieren.
2. Datenpartitionierung: Um die Last auf Datenbanken zu verteilen und die Skalierbarkeit weiter zu verbessern, führte Instagram eine sorgfältige Datenpartitionierung durch. Indem Daten in logische Partitionen aufgeteilt wurden, konnten die Datenbanken effizienter verwaltet und gleichzeitig die Abfrageleistung optimiert werden.
3. Monitoring und Fehlererkennung: Instagram implementierte robuste Monitoring- und Fehlererkennungssysteme, um die Leistung der Webserver und Datenbanken kontinuierlich zu überwachen. Durch die frühzeitige Erkennung von Leistungsproblemen und Fehlern konnten schnell Maßnahmen ergriffen werden, um die Stabilität und Zuverlässigkeit des Systems sicherzustellen.
4. Automatisierung von Wartungsarbeiten: Um den Betrieb der Infrastruktur effizienter zu gestalten, automatisierte Instagram routinemäßige Wartungsarbeiten und administrative Aufgaben. Dies umfasste die Automatisierung von Backups, Software-Updates und Skalierungsvorgängen, um eine reibungslose und unterbrechungsfreie Verfügbarkeit der Dienste zu gewährleisten.

Durch die Implementierung dieser Optimierungen konnte Instagram nicht nur die Leistung und Skalierbarkeit seiner Plattform verbessern, sondern auch sicherstellen, dass sie den steigenden Anforderungen und Erwartungen der Benutzer gerecht wird. Diese fortlaufenden Bemühungen um technische Exzellenz und Innovation trugen maßgeblich zum langfristigen Erfolg von Instagram bei und festigten seine Position als führende Social-Media-Plattform weltweit.

Quellen:

https://engineering.fb.com/2022/11/04/video-engineering/instagram-video-processing-encoding-reduction/
https://engineering.fb.com/2022/09/06/data-center-engineering/viewing-the-world-as-a-computer-global-capacity-management/
https://instagram-engineering.com/instagration-pt-2-scaling-our-infrastructure-to-multiple-data-centers-5745cbad7834
https://issuu.com/jhon_miller28/docs/this_is_how_instagram_is_delighting_2_billion1_1_

The post Wie Instagram von 20.000 auf 2.000.000 Nutzer skalierte appeared first on Mobile USTP MKL.

Die Reise beginnt mit der Vorbereitung und Annotierung der Datensätze in Label Studio, gefolgt vom Training des YOLOv5-Modells zur Nummernschilderkennung. Schließlich wird eine schnelle API mit FastAPI erstellt, um die Erkennungsfunktion bereitzustellen. Durch die Kombination dieser leistungsstarken Tools war es möglich, ein effizientes und funktionsreiches System zur Nummernschilderkennung zu erstellen. Die folgenden Abschnitte bieten eine detaillierte Übersicht über jeden Schritt des Prozesses, um auch Ihnen den Einstieg in die Welt der automatisierten Nummernschilderkennung zu erleichtern.

Warum Labelstud.io ein Traum zum Anmontieren ist

Flexibilität und Anpassbarkeit:

Label Studio kommt mit einer breiten Palette von Annotierungswerkzeugen, die es erlauben, diverse Datentypen wie Text, Bilder und sogar Audiodaten zu annotieren. Seine flexible Natur macht es zu einer einmaligen Lösung, die sich leicht an die spezifischen Anforderungen eines Projekts anpassen lässt.

Benutzerfreundliche Oberfläche:

Die intuitive Benutzeroberfläche von Label Studio vereinfacht den Annotierungsprozess erheblich. Die leicht verständliche Oberfläche ermöglicht es auch denjenigen mit weniger technischem Wissen, effektiv zu arbeiten und qualitativ hochwertige Datenannotationen zu erstellen.

Kollaborative Funktionen:

In einem Umfeld, wo Teamarbeit essentiell ist, erlaubt Label Studio mehreren Annotatoren, zusammenzuarbeiten und ihre Arbeit in einer zentralen Umgebung zu synchronisieren. Dies fördert eine effiziente Teamarbeit und beschleunigt den Annotierungsprozess.

Exportschnittstellen:

Nach der Annotation der Daten bietet Label Studio vielfältige Exportoptionen, die eine einfache Integration mit anderen Systemen und die Weiterverwendung der annotierten Daten in verschiedenen Machine Learning Frameworks ermöglichen.

Open-Source:

Als Open-Source-Projekt ermöglicht Label Studio eine Community-getriebene Entwicklung, die es stetig verbessert und an die sich schnell entwickelnde Welt der Datenwissenschaft anpasst. Die Offenheit des Projekts fördert auch die Transparenz und Vertrauenswürdigkeit, zwei Eigenschaften, die in der heutigen datengetriebenen Welt von unschätzbarem Wert sind.

Durch die Kombination all dieser Vorteile stellt Label Studio eine robuste und zuverlässige Lösung für die Datenannotation und -verwaltung dar, die die Entwicklung von Machine Learning Modellen erheblich erleichtert und beschleunigt.

Datenvorbereitung mit Label Studio

Der erste und wesentliche Schritt in jedem Machine Learning Projekt ist die Vorbereitung der Daten. Ich habe Label Studio verwendet, um 1534 Fotos zu annotieren, die als Grundlage für das Training des Modells dienen. Die Fotos wurden aus einer Dashcam generiert, und ich habe einzelne Frames extrahiert, um eine ausreichende Anzahl von Bildern für das Training zu erhalten.

Modelltraining mit YOLOv5

Nach der Annotierung der Bilder war der nächste Schritt, ein Modell zu trainieren, das die Nummernschilder erkennen kann. Ich habe mich für YOLOv5 entschieden, eine bewährte und effiziente Lösung für Objekterkennungsaufgaben. Nach dem Training des Modells mit den annotierten Bildern war ich in der Lage, eine akzeptable Genauigkeit in der Nummernschilderkennung zu erreichen.

Um Yolo zu trainieren brauchen wir nu mehr einen Befehl:

./darknet detector train <path_to_data_file> <path_to_cfg_file> <path_to_pretrained_weights> -dont_show -map

API-Erstellung mit FastAPI

Mit einem trainierten Modell in der Hand war der nächste logische Schritt, eine API zu erstellen, über die andere Systeme auf die Nummernschilderkennungsfunktionalität zugreifen können. Ich habe FastAPI verwendet, um eine kleine, aber effiziente API zu erstellen, die die Anforderungen leicht handhaben kann. FastAPI ist bekannt für seine Performance und einfache Handhabung, was es zu einer ausgezeichneten Wahl für dieses Projekt macht.

Zusammenfassung

Durch die Kombination von Label Studio für die Datenvorbereitung, YOLOv5 für das Modelltraining und FastAPI für die Bereitstellung der Erkennungsfunktionalität konnte ich ein robustes und effizientes System für die automatisierte Nummernschilderkennung erstellen. Die Schritte, die in diesem Beitrag skizziert wurden, bieten einen soliden Ausgangspunkt für jeden, der daran interessiert ist, ein ähnliches Projekt zu verfolgen. Die Welt der automatisierten Systeme ist spannend, und ich freue mich darauf, in zukünftigen Projekten weiter zu erforschen, was möglich ist.

Ihr wollt es selbst probieren ? Dann teste es auf https://bandy.at/plates/

The post Erstellung eines automatisierten Nummernschild-Erkennungssystems appeared first on Mobile USTP MKL.

Das digitale Zeitalter hat eine Welle von Innovationen und technologischen Durchbrüchen mit sich gebracht. Eine solche Neuerung, die während der Extreme Programming Week das Licht der Welt erblickte, war unsere App “Pingo”. Diese geobasierte Plattform hat das Ziel, den Nutzern ihre Umgebung auf spielerische und informative Weise näher zu bringen. Durch die Verwendung eines Location-based Systems (LBS) eröffnet Pingo den Benutzern eine interaktive Karte, auf der sie verschiedene “Geostops” erkunden können – von verborgenen Naturjuwelen über kulturelle Highlights bis hin zu historischen Sehenswürdigkeiten.

Das Hauptaugenmerk von Pingo liegt darauf, die Neugier und das Entdeckungspotential in jedem von uns zu wecken. Ob man nun ein Einheimischer ist, der die versteckten Ecken seiner Heimatstadt entdecken möchte, oder ein Reisender auf der Suche nach dem nächsten Abenteuer – Pingo ist als interaktiver Reisebegleiter konzipiert. Mit seiner Fähigkeit, Benutzern detaillierte Informationen, Fotos und Bewertungen zu jedem Geostop zu bieten, geht es bei Pingo nicht nur darum, Orte zu finden, sondern auch darum, die Geschichten und Erfahrungen hinter diesen Orten zu teilen und zu erleben.

Allerdings war unsere Reise mit Pingo nicht ohne Hindernisse. Während der Entwicklung stellten wir fest, dass die Entscheidung, Ionic mit Vue zu kombinieren, vielleicht nicht die optimale Wahl war – insbesondere, da unser Team größtenteils Erfahrung mit Angular hatte. Diese Kombination brachte spezifische Herausforderungen mit sich, von Problemen mit der reaktiven Datenbindung in Vue bis hin zu Schwierigkeiten bei der Integration bestimmter Bibliotheken, die besser mit Angular kompatibel waren. Es war eine Lernkurve, die uns wertvolle Einblicke in die Feinheiten und Unterschiede zwischen den beiden Frameworks gab.

In den folgenden Abschnitten werden wir tiefer in unsere Erlebnisse mit der Entwicklung von Pingo eintauchen, die Herausforderungen beleuchten, die uns begegnet sind, und warum es wichtig ist, die richtige Technologiebasis für ein Projekt zu wählen, das so ambitioniert und innovativ ist wie Pingo.

Einführung in NestJS und unsere Backend-Architektur

In der heutigen technologiegetriebenen Welt sind robuste und skalierbare Backends unerlässlich für den Erfolg einer App wie Pingo. Unsere Wahl fiel auf NestJS, ein progressives Node.js-Framework, das effizientes, zuverlässiges und skalierbares Serverseitiges-Entwickeln ermöglicht. Es basiert auf Express und kombiniert Elemente von OOP (Objektorientierte Programmierung), FP (Funktionale Programmierung) und FRP (Funktionsreaktive Programmierung).

Während Malek, unser Senior Backend-Entwickler, den Hauptteil der NestJS-Entwicklung übernommen hat, brachte Mohamed seine Expertise mit Spring Boot ein – ein Java-basiertes Framework, das er liebt. Ich, obwohl in vielen Technologien belesen, jedoch nirgends ein wirklicher Experte, half, die verschiedenen Teile zusammenzubringen und sorgte dafür, dass das Backend nahtlos mit unserer Frontend-Architektur interagierte.

Lassen Sie uns nun einen Blick auf unsere API-Endpunkte werfen:

Pingo

• GET /pingo: Ruft alle existierenden Pingo-Objekte ab.
• PUT /pingo: Aktualisiert einen Pingo.
• POST /pingo: Erstellt einen neuen Pingo.
• GET /pingo/{lat}/{lng}/{radius}: Findet Pingo in einem bestimmten Radius.
• GET /pingo/byId/{id}: Ruft einen Pingo über seine ID ab.
• GET /pingo/byUser/{id}: Listet alle Pingo eines Nutzers auf, basierend auf der Benutzer-ID.
• DELETE /pingo/{id}: Löscht einen Pingo.
• GET /pingo/getByHashId/{hashId}: Ruft Pingo über Hash-ID ab.

Auth

Diese Endpunkte behandeln Authentifizierung und Autorisierung:

• POST /auth/login: Meldet einen Benutzer an.
• POST /auth/register: Registriert einen neuen Benutzer.
• Weitere Endpunkte für die Validierung, das Signieren und das Auffrischen von Authentifizierungsdaten.

Stations & Hash

Dieser Bereich handhabt die verschiedenen Stationen, die in Pingo verwendet werden, sowie die Hash-Funktionalitäten für die Erstellung und Verwaltung von Verknüpfungen zwischen den Stationen, Benutzern und Rollen.

Users

• POST /users/save: Speichert einen neuen Benutzer.
• GET /users/search: Findet einen Benutzer basierend auf einem Suchbegriff.
• Weitere Endpunkte für das Abrufen, Aktualisieren und Löschen von Benutzerdaten.

Roles

Endpunkte, die sich auf Benutzerrollen beziehen und es ermöglichen, Rollen zu speichern, abzurufen und zu verwalten.

QRCode

• GET /qrcode/{data}: Generiert einen QR-Code basierend auf den bereitgestellten Daten.

Diese API-Endpunkte bieten eine solide Grundlage für alle Funktionen, die Pingo den Benutzern bietet. Von der Erstellung und Verwaltung von Benutzerkonten über das Abrufen von Pingo-Orten bis hin zur Generierung von QR-Codes – unser Backend mit NestJS gewährleistet, dass alles reibungslos funktioniert und die Benutzer ein nahtloses Erlebnis haben.

Fazit zu unserem Backend-Projekt

Unsere Reise mit dem Backend für Pingo war zweifelsohne beeindruckend und lehrreich. Dank der fachlichen Expertise von Malek und Mohamed und meiner Unterstützung als verbindendes Element, haben wir große Fortschritte erzielt und ein solides und zuverlässiges Backend aufgebaut. NestJS erwies sich als eine exzellente Wahl für unsere Bedürfnisse und erlaubte uns, eine robuste und leistungsstarke Infrastruktur zu schaffen.

Dennoch haben wir einen entscheidenden Fehler gemacht: Wir waren nicht agil. Agilität im Softwareentwicklungsprozess ermöglicht es Teams, sich schnell an Änderungen anzupassen, iterative Verbesserungen vorzunehmen und kontinuierlich Wert zu liefern. Indem wir uns zu stark auf die Backend-Entwicklung konzentrierten und nicht den agilen Ansatz verfolgten, haben wir wertvolle Ressourcen – in Form von zwei erstklassigen Entwicklern und mir – gebunden, die möglicherweise effektiver in anderen Bereichen, insbesondere im Frontend, eingesetzt worden wären.

Das Backend mag zwar solide und funktionsfähig sein, aber die übermäßige Konzentration darauf hat letztlich das Gesamtergebnis des Projekts beeinträchtigt. Wären wir agiler gewesen, hätten wir uns auf das Wesentliche konzentriert, ein MVP (Minimum Viable Product) entwickelt und zusätzliche Ressourcen in das Frontend investiert. Das hätte sicherlich zu einem ausgewogeneren und letztlich erfolgreicheren Endprodukt geführt.

Das Fazit daraus ist klar: Es ist nicht nur wichtig, was man tut, sondern auch wie man es tut. In Zukunft werden wir sicherlich den Wert von Agilität stärker berücksichtigen und sicherstellen, dass wir unsere Ressourcen optimal nutzen, um den größtmöglichen Wert für unsere Projekte zu schaffen.

Fazit zum Frontend-Projekt

Da es im Studium vor allem um einen Lerneffekt geht, haben sich einige bewusst für unbekanntes Terrain entschieden, um Neues zu erlernen. Florian Bauer hat sich großteils um Styling, Design und später auch die Printmedien gekümmert und teilweise im Frontend mitgewirkt. Manuel Hecht, welcher bereits Erfahrung mit Python, Augmented Reality und einigen JS-Frameworks sammeln konnte, hat sich dem Frontend-Team verschrieben. Christoph Murauer, welcher bereits viel Erfahrung in der Backend Entwicklung und Dev-Ops Themen besitzt, wählte bewusst den Frontend Bereich um sich darin weiterzuentwickeln. 

Innerhalb der Masterklasse Mobile, lag unser Fokus auf der Entwicklung einer hybriden mobilen App, welche mehrere Plattformen wie iOS, Android und das Web unterstützt. Somit fiel die Wahl auf das, im Vergleich mit Flatter, universellere Ionic Framework, mit welchem wir bereits die meisten Erfahrungen sammeln konnten. 

Das Fundament für dieses UI-Framework bilden wiederum die prominenten Komponenten-basierten JS-Frameworks Angular, React und VueJS. Die Integration mit Angular war von Beginn an vorhanden, wodurch bereits Kinderkrankheiten ausgebügelt werden konnten. Dies hat auch zu einer großen Community von Ionic + Angular beigetragen, wodurch auf eine reichhaltige Hilfestellung zurückgegriffen werden konnte.
Die Integration von Vue hingegen ist relativ neu, wodurch noch einige Ungereimtheiten existieren. 

Im Frontend-Team wollte man trotzdem diesen Schritt wagen, da man bereits positive Erfahrung mit Vue und Nuxt hatte und zuvor im Studium bereits eine Applikation in der Kombination Ionic + Angular + NestJS erstellen musste. Um die Möglichkeiten einer anderen Technologie zu entdecken, entschied man sich somit für Vue + Ionic und hatte zusammen mit dem Backend eine funktionierende erste Version geschaffen.

Aus Zeitmangel konnte am Ende der Woche nur eine unfertige Version des Projekts vorgelegt werden und es musste vor allem das gewählte JS-Framework als Sündenbock herhalten. Gründe waren vermutlich der unvollständigen Dokumentation, der kleinen Community und der, im Vergleich zu Angular, fehlenden nötigen Erfahrung im Team geschuldet. 

Nachdem das Projekt später vor allem durch unsere Angular-Experten weiterentwickelt werden sollte, wurde das Grundgerüst durch Angular ausgetauscht, dazu später mehr. Folgende Punkte wurden von ihnen als Gründe benannt:

Das Frontend einer Anwendung spielt eine entscheidende Rolle in der Nutzererfahrung. Es ist das Fenster, durch welches die Benutzer mit der Anwendung interagieren und ihre Funktionen erleben. Bei der Entwicklung von Pingo entschieden wir uns für eine Kombination aus Ionic und Vue. Obwohl beide Technologien für sich genommen leistungsstark und beliebt sind, stellten wir im Laufe der Entwicklung fest, dass diese Kombination uns vor unerwartete Herausforderungen stellte.

Unsere bisherige Erfahrung mit Ionic in Kombination mit Angular war durchweg positiv. Angular bietet eine klare Struktur, starke Typisierung mit TypeScript und umfangreiche Tools, die den Entwicklungsprozess beschleunigen. Die Verwendung von Vue mit Ionic, einem bisher unbekannten Terrain für uns, erforderte eine Lernkurve und Anpassung.

Einige der Schwierigkeiten, die wir mit Vue in Verbindung mit Ionic erlebt haben, umfassen:

• Mangelnde Strukturierung: Vue’s flexibler Ansatz kann für manche Projekte von Vorteil sein. Aber im Vergleich zu Angular, das einen strengeren und strukturierteren Ansatz verfolgt, fühlte sich Vue manchmal zu offen und unbeständig an. Dies führte oft zu Inkonsistenzen in unserem Code.
• Integration mit TypeScript: Obwohl Vue mit TypeScript verwendet werden kann, ist die Integration nicht so nahtlos wie bei Angular. Dies führte zu Komplikationen und erhöhtem Debugging-Aufwand.
• Dokumentation und Community-Unterstützung: Während sowohl Vue als auch Ionic gut dokumentiert sind, ist die spezifische Dokumentation und Unterstützung für ihre Kombination nicht so reichlich vorhanden wie für die Kombination von Ionic und Angular. Das bedeutete, dass wir oft alleine gelassen wurden, um bestimmte Probleme zu lösen.
• Wiederverwendbarkeit von Komponenten: Vue ermutigt zur Verwendung von Single-File-Komponenten, was zu Problemen bei der Wiederverwendbarkeit und beim Teilen von Logik über mehrere Komponenten hinweg führte.

Diese Herausforderungen kosteten uns wertvolle Zeit und Ressourcen, die effektiver genutzt worden wären, wenn wir uns für eine Technologie entschieden hätten, mit der wir bereits vertraut waren. Es ist zwar wichtig, neue Technologien zu erforschen und zu lernen, aber für kritische Projekte, insbesondere unter Zeitdruck, ist es oft klüger, bei bewährten Technologien zu bleiben.

Insgesamt hat unsere Entscheidung, Vue mit Ionic zu kombinieren, trotz seiner Vorzüge den Projektfortschritt gebremst. In zukünftigen Projekten werden wir sicherlich gründlicher abwägen, ob der Einsatz neuer Technologien tatsächlich einen Mehrwert bietet oder ob sie möglicherweise mehr Probleme verursachen als sie lösen.

Unser Abenteuer mit Leaflet und OpenStreetMaps

Bei der Gestaltung des Herzstücks unserer Pingo-App, dem interaktiven Kartenfeature, standen wir vor der Entscheidung, welche Technologie wir nutzen sollten. Hier kam Leaflet ins Spiel, eine führende Open-Source-JavaScript-Bibliothek für mobile-freundliche interaktive Karten. In Kombination mit OpenStreetMaps (OSM), einer freien Weltkarte, auf der jeder Daten beitragen oder bearbeiten kann, hatten wir die Grundlage für unsere geobasierte Plattform.

Dank unseres “Navigators und Kartenspezialisten” Lukas Jungwirth konnten wir unsere Plattform effizient um Leaflet herum aufbauen. Lukas’ Expertise ermöglichte es uns, die vollen Möglichkeiten von Leaflet und OSM auszuschöpfen, und er integrierte beeindruckende Animationen und Funktionen, die unsere Karte lebendig werden ließen. Obwohl die Implementierung dieser ausgeklügelten Funktionen viel Zeit in Anspruch nahm, waren die Ergebnisse überzeugend und trugen wesentlich zum Charme unserer App bei.

Die Wahl von Leaflet und OSM statt Google Maps war eine bewusste Entscheidung. Google Maps mag zwar das populärste Kartentool sein, aber es bringt auch seine eigenen Einschränkungen und Kosten mit sich. Eine Abhängigkeit von Google Maps hätte uns möglicherweise mit Lizenzkosten, API-Beschränkungen und weniger Flexibilität bei der Anpassung belastet. OpenStreetMaps hingegen bietet Freiheit in Bezug auf Anpassung und Datenverwendung. Es ermöglicht auch eine stärkere Community-Beteiligung, was zu einer immer aktuelleren und detaillierteren Kartendatenbank führt.

Trotz unserer anfänglichen Herausforderungen, insbesondere während der Extreme Programming Week, konnten wir letztendlich triumphieren. Nach dem Scheitern mit unserer ersten Implementierung in Vue, entschieden wir uns für eine Neugestaltung mit Angular. Hier war es Malek, der die Initiative ergriff. Dank seiner unermüdlichen Arbeit und dem Fehlen anderer Hobbys war der initiale Anstoß von ihm rasch umgesetzt. Durch diesen Neustart mit Angular und unsere bereits gewonnenen Erfahrungen mit Leaflet und OSM gelang es uns, Pingo zu einer funktionsreichen und benutzerfreundlichen Plattform zu machen.

Angular vs. Vue: Ein Rückblick auf unser Pingo-Projekt

Angular:

Vorteile:

• Strukturierte Architektur: Angular bietet eine klare und konsistente Struktur, die es einfacher macht, große Anwendungen zu skalieren und zu warten. Für unser Projekt, das eine Vielzahl von Features und interaktiven Elementen umfasste, war dies ein unschätzbarer Vorteil.
• TypeScript-Integration: Angular wurde mit TypeScript im Hinterkopf entwickelt, was zu einer nahtlosen Integration führt. Dies war besonders nützlich, da starke Typisierung und klare Schnittstellen Fehler verhinderten und die Codequalität verbesserten.
• Reichhaltige Dokumentation und Community-Unterstützung: Durch unsere bisherige Erfahrung mit Angular konnten wir uns auf eine umfangreiche Dokumentation und eine aktive Community verlassen, was die Problembehandlung und Implementierung neuer Funktionen erleichterte.

Nachteile:

• Steilere Lernkurve: Für Neueinsteiger kann Angular anfangs überwältigend sein, was jedoch durch unsere Vorkenntnisse gemildert wurde.

Vue:

Vorteile:

• Flexibilität: Vue ist dafür bekannt, flexibel und anpassbar zu sein, was uns erlaubte, verschiedene Aspekte der Anwendung nach Bedarf zu gestalten.
• Einfacher Einstieg: Für diejenigen, die neu in der Frontend-Entwicklung sind, bietet Vue eine weniger einschüchternde Einstiegshürde als einige andere Frameworks.
• Reaktives Datenbindungs-System: Vue’s reaktives Datenbindungssystem ist intuitiv und effizient, was die Implementierung reaktiver UI-Komponenten vereinfacht.

Nachteile:

• Mangelnde Strukturierung bei größeren Projekten: Im Vergleich zu Angular fehlte es Vue an einer strengen Architektur, was bei komplexeren Projekten wie Pingo zu Problemen führen konnte.
• Suboptimale TypeScript-Integration: Obwohl Vue mit TypeScript verwendet werden kann, fühlte sich die Integration oft gehackt an und war nicht so intuitiv wie bei Angular.
• Weniger Standardisierung: Wegen Vue’s Flexibilität gab es weniger “Best Practices”, was manchmal zu inkonsistentem Code führte.

Fazit:

Während Vue sicherlich seine Stärken hat und für viele Projekte eine ausgezeichnete Wahl sein kann, stellte sich heraus, dass für das Pingo-Projekt, das eine tiefe Integration verschiedener Technologien und Funktionen erforderte, Angular besser geeignet war. Die strukturierte Architektur, die starke TypeScript-Integration und die Unterstützung, die Angular bietet, stellten sicher, dass wir effizient arbeiten und eine skalierbare, wartbare Anwendung produzieren konnten. Es war eine lehrreiche Erfahrung, die uns half, den Wert der Auswahl des richtigen Werkzeugs für den Job zu schätzen.

Persönliche Reflexion und Einschätzungen

Die Projektwoche, wie wir sie erlebt haben, hat nicht nur den Kern der Softwareentwicklung in den Mittelpunkt gestellt, sondern auch den Umgang mit den menschlichen Aspekten der Teamarbeit.

Zunächst einmal war es faszinierend zu beobachten, wie jeder im Team – einschließlich mir selbst – seine eigenen Vorurteile, Vorlieben und Abneigungen in Bezug auf Technologien und Methoden mitbrachte. Was für den einen das perfekte Tool für eine Aufgabe ist, könnte für einen anderen als unpassend oder sogar als hinderlich empfunden werden. Dies wurde insbesondere in der Diskussion um den Technologie-Stack sichtbar.

Ich persönlich schätze das Vue Framework und sehe seine Flexibilität und Struktur als eine “spezielle” Stärke, nicht jedoch für große Projekte. Die Entscheidung, Vue mit Ionic zu kombinieren, war meiner Meinung nach ein mutiger Schritt, um Neuland zu betreten und aus der Komfortzone herauszutreten. Aber wie so oft im Leben und insbesondere in der Technologiebranche, kann das Betreten unbekannten Terrains sowohl belohnend als auch herausfordernd sein.

Die Reaktionen im Team auf diese Entscheidung waren gemischt. Einige begrüßten die Neuerung und fanden es wie ich selber, recht witzig, während andere eine gewisse Widerstandsfähigkeit zeigten. Ich verstehe den Wunsch, bei Bewährtem zu bleiben, besonders unter dem Druck einer Projektwoche. Aber ich bin auch der Ansicht, dass die Möglichkeit, Neues zu lernen und sich weiterzuentwickeln, es wert ist, Risiken einzugehen.

Trotz der Herausforderungen und gelegentlichen Spannungen im Team bin ich stolz auf das, was wir erreicht haben. Wir haben als Team gearbeitet, uns gegenseitig unterstützt und uns den Herausforderungen gestellt. Und obwohl nicht alles perfekt war, war die Endpräsentation ein Beweis für unser Engagement und unsere harte Arbeit.

Abschließend glaube ich, dass diese Projektwoche eine der wertvollsten Erfahrungen meiner Studienzeit war. Sie lehrte mich nicht nur technische Fähigkeiten, sondern auch die Kunst des Kompromisses, der Kommunikation und der Teamarbeit.

Mitwirkende:
Malek Morad
Lukas Jungwirth

The post Rückblick: Unsere Reise mit Pingo und die Herausforderungen von Ionic & Vue appeared first on Mobile USTP MKL.

Die Plattform ist nicht in Konkurrenz zu anderen Plattformen wie Google Maps oder TripAdvisor, sondern ist maßgeschneidert für die Zielgruppe von Heurigenbesuchern, Fans regionaler Küche und jugendlicher Entdecker. Unsere Plattform bietet die Möglichkeit, mit wenigen Klicks und Interaktionen den besten Heurigen in der Nähe zu finden und umfassende Informationen zu erhalten, um eine fundierte Entscheidung zu treffen.

In unseren weiteren Release-Phasen planen wir, Filtermöglichkeiten nach Speisen sowie Bewertungen einzubauen. Auf diese Weise können Nutzer noch gezielter nach den für sie relevanten Heurigen suchen und Bewertungen anderer Nutzer einsehen, um eine informierte Entscheidung zu treffen. Wir sind davon überzeugt, dass unsere Plattform einen wertvollen Beitrag leisten kann, um das Heurigen-Erlebnis in Niederösterreich, Wien und der Steiermark zu verbessern.

Das Technische Gerüst:

Die Plattform basiert auf modernen Technologien, die ein schnelles, zuverlässiges und benutzerfreundliches Erlebnis gewährleisten sollen. Im Folgenden haben wir eine Übersicht über die wichtigsten Technologien erstellt, die wir verwenden:

Backend-Entwicklung mit Node.js und TypeScript:

Wir verwenden das Node.js-Framework Nest.js, um unsere Backend-Logik zu implementieren. TypeScript ist eine Erweiterung von JavaScript, die die Entwicklung von skalierbaren Anwendungen erleichtert und Elemente von OOP (Object Oriented Programming), FP (Functional Programming) und FRP (Functional Reactive Programming) kombiniert.

Frontend-Entwicklung mit Ionic und Angular: Das Frontend unserer Plattform basiert auf dem Ionic-Framework, das auf Angular aufbaut. Ionic bietet eine Vielzahl von vorgefertigten UI-Komponenten, mit denen wir schnell und effizient benutzerfreundliche Schnittstellen erstellen können.

Datenbank mit MySQL: 

Wir verwenden eine MySQL-Datenbank, um die Informationen zu den Heurigen und deren Standorten zu speichern. MySQL ist eine bewährte und zuverlässige Open-Source-Datenbank, die uns die nötige Skalierbarkeit bietet.

Projektverwaltung mit GitHub: Wir verwenden GitHub zur Verwaltung unseres Codes und unserer Projektarbeit. Mit GitHub können wir die Zusammenarbeit in unserem Team erleichtern und sicherstellen, dass der Code immer auf dem neuesten Stand ist.

Design mit Ionic Framework: Wir verwenden das Ionic Framework auch für das Design unserer Plattform. Ionic bietet eine Vielzahl von vorgefertigten Designelementen, mit denen wir schnell und einfach ein ansprechendes Design umsetzen können.

Hosting mit einem Linux-Server und Plesk: Unsere Plattform wird auf einem Linux-Server gehostet. Wir nutzen Plesk, um den Server zu verwalten und unsere Dienste zu konfigurieren.

Wir sind davon überzeugt, dass die Kombination dieser modernen Technologien uns die nötige Flexibilität und Skalierbarkeit bietet, um eine leistungsstarke und benutzerfreundliche Heurigen-Suchmaschine zu entwickeln, die auf die Bedürfnisse unserer Nutzer zugeschnitten ist.

Server und Infrastruktur:

In der heutigen Zeit ist die Anwendung von Virtualisierungstechnologien in der IT-Welt nicht mehr wegzudenken. 
Eine kurze Erklärung: Docker ist eine solche Virtualisierungstechnologie, die es ermöglicht, Anwendungen in Containern auszuführen und diese Container unabhängig von der darunterliegenden Infrastruktur zu skalieren und zu verwalten. Docker ist ein Open-Source-Tool, das es Entwicklern ermöglicht, Anwendungen schnell und einfach in Containern zu isolieren, zu verteilen und auszuführen.

Mit Portainer hat man die Möglichkeit, Docker-Container noch einfacher zu verwalten. Portainer ist eine webbasierte Benutzeroberfläche für die Verwaltung von Docker-Containern, die es einem ermöglicht, Container zu erstellen, zu konfigurieren und zu überwachen. Mit Portainer kann man auch die Container skalieren, Versionen verwalten und Fehlerbehebungen durchführen.

Neben Docker und Portainer haben wir uns auch für Plesk entschieden, um unsere Hosting-Services zu verwalten. Plesk ist eine benutzerfreundliche Plattform, die einem ermöglicht, Websites, E-Mail-Konten und andere Dienste auf einem Server zu verwalten. Es ist besonders nützlich für die Verwaltung von Hosting-Services, da es eine einfach zu bedienende Oberfläche bereitstellt und eine Vielzahl von Erweiterungen und Tools bietet, um den Dienst sicher und zuverlässig bereitzustellen.

Wir haben uns für Plesk entschieden, da es uns eine einfache Möglichkeit bietet, unsere Dienste zu verwalten, ohne dass wir über umfangreiche Linux-Kenntnisse verfügen müssen. (kommt leider erst im 3. Semester). Darüber hinaus bietet Plesk eine Vielzahl von Erweiterungen und Tools, die es uns ermöglichen, unsere Dienste sicher und zuverlässig bereitzustellen. Natürlich gibt es auch andere Hosting-Optionen, die ebenfalls eine gute Wahl sein können, aber wir wollen den Dienst auch anderswertig verwenden. Es ist jedoch wichtig, die Vorteile und Einschränkungen von verschiedenen Optionen zu evaluieren, um sicherzustellen, dass man die beste Wahl für die eigenen Anforderungen trifft.

Insgesamt bieten Docker, Portainer und Plesk eine gute Kombination von Werkzeugen, die es uns ermöglichen, unsere App, sicher, effizient und einfach zu verwalten.

Vom Server zum Service:

Anfangs haben wir uns entschieden, unsere Ionic-App und das NestJS-Backend in Docker-Containern zu hosten, um eine einfache Skalierung und Verwaltung zu gewährleisten. Ebenso ist der Umzug auf einen anderen Server wesentlich einfacher. Um dies zu erreichen, haben wir uns für Portainer entschieden (Auch weil der Rat vom Lehrbeauftragten kam), eine webbasierte Benutzeroberfläche für die Verwaltung von Docker-Containern.

Zuerst haben wir Docker-Images für unsere Ionic-App und das NestJS-Backend erstellt. Hierfür haben wir Dockerfiles erstellt, in denen wir alle notwendigen Abhängigkeiten installiert und unsere Anwendungen konfiguriert haben.

Anschließend haben wir die Docker-Container mit den erstellten Images in Portainer gestartet. Hierfür haben wir eine neue App in Portainer erstellt und das entsprechende Image angegeben. Um die Netzwerkverbindung zwischen den Containern herzustellen, haben wir ein eigenes Netzwerk in Portainer erstellt und die Container diesem Netzwerk zugewiesen.

Nachdem wir sichergestellt hatten, dass die Anwendungen in den Containern liefen und auf Anfragen reagierten, haben wir sie veröffentlicht. Hierfür haben wir in Portainer eine Port-Weiterleitung erstellt, die Anfragen an den Container weiterleitete.

Dank Docker und Portainer haben wir unsere Anwendungen einfach skalieren und verwalten können. Wir konnten verschiedene Versionen unserer Anwendungen in verschiedenen Containern ausführen und problemlos zwischen ihnen wechseln. Die webbasierte Benutzeroberfläche von Portainer hat uns auch ermöglicht, Container zu überwachen und zu verwalten, was die Verwaltung unserer Anwendungen erheblich erleichtert hat.

Das Backend mit NestJs:

Wie bereits erwähnt haben wir uns dazu entschieden das Backend mit NestJs in Kombination mit Typescript umzusetzen. NestJs ist ein komplettes, open-source Development-Kit zum Entwickeln von serverseitigen Applikationen. Für das Kommunizieren mit der Datenbank wurde TypeORM herangezogen und in der Applikation implementiert. TypeORM ist ein Tool für ORM (Object–relational mapping), mit dem objektrelationale Abbildungen zur Umwandlung von Daten zwischen objekt-orientierten Programmiersprachen und einer relationalen Datenbank verwirklicht werden können. Aufgrund der positiven Erfahrung in Lehrveranstaltungen und der Ähnlichkeit zu bekannten ORMs wie Hibernate haben wir uns für TypeORM entschieden.

Da NestJs eine CLI (Command Line Interface) anbietet, wurde diese als ersten Schritt mit dem Node Package Manager (NPM) installiert und anschließend ein neues Projekt generiert.

Dazu haben wir der offiziellen Dokumentation folgende Befehle entnommen:

Folgende, weitere Dependencies (Pakete) sind installiert worden:

• Cross-env (für das Plattformübergreifende Verwenden von Umgebungsvariablen)
• Bcrypt (zum hashen/vergleichen/speichern von Passwörtern)
• Mysql (für die Mysql-Verbindung)

Nach dem Installieren der notwendigen Dependencies und der Erstellung der grundlegenden Struktur sieht das Projekt folgendermaßen aus:

Die sogenannten Endpoints spiegeln die clientseitige Erreichbarkeit der serverseitigen, nach außen freigegebenen Funktionalitäten wider. Diese API (= Schnittstelle) bietet zum gegebenen Zeitpunkt die Möglichkeit Heurigen anhand einer Query (= Suchwort/Suchwörter), einer eindeutigen ID oder einer GPS-Koordinaten zu suchen. Abgesehen davon besteht noch die Möglichkeit Heurigen zu erstellen und anhand der ID auch wieder zu löschen.

Die clientseitigen DTOs (Data Transfer Object) und serverseitigen Entities stellen die objektrelationale Abbildung zur Umwandlung von Daten dar, während mit den Repositories auf die Datenbank zugegriffen werden kann. Dabei bilden die Services die Businesslogik der Applikation, in denen beispielsweise auch die Umwandlungen stattfinden. Für das Auslagern der Umwandlungslogik wurden jeweils zu den Entities und DTOs sogenannte „Mapper“ erstellt, die unter dem Ordner „utils“ zu finden sind.

Für das Differenzieren zwischen der Development- und Production Umgebung sind folgende Dateien angelegt worden:

1. dev.env
2. prod.env

Grundsätzlich sind in diesen .env Dateien zu diesem Zeitpunkt folgende Variablen notiert:

Je nachdem, welche Umgebung gestartet oder gebaut wird (dev / prod), werden die dev.env oder prod.env Variablen geladen. Die Verwendung von den jeweiligen Variablen und die Konfiguration der Datenbank bzw. TypeORM findet folgendermaßen statt:

Plesk:

Als wir uns dazu entschieden haben, unsere Heurigen-Suchmaschine zu entwickeln, war schnell klar, dass wir auch eine geeignete Hosting-Lösung benötigen. Nach einigen Recherchen haben wir uns schließlich dazu entschieden, einen vServer zu mieten und darauf Plesk zu installieren.

Plesk ist eine leistungsstarke Server-Management-Plattform, die es uns ermöglicht, unsere Webanwendungen, Datenbanken und E-Mail-Konten einfach und effizient zu verwalten. Hierbei bietet Plesk eine breite Palette an Funktionen, wie beispielsweise die automatische Einrichtung von SSL-Zertifikaten, Backups und Firewall-Konfiguration.

Um Plesk auf unserem vServer zu installieren, haben wir zunächst die entsprechende Lizenz erworben und die Installation auf unserem Server durchgeführt. Dabei haben wir uns für die Plesk Webhost Edition entschieden, da sie alle Funktionen bietet, die wir benötigen, um unsere Webanwendungen zu hosten und zu verwalten.

version: '3'

services:
  nestjs-backend:
    image: your-nestjs-backend-image
    ports:
      - "3000:3000"
    environment:
      - DB_HOST=mysql
      - DB_USER=your-db-user
      - DB_PASSWORD=your-db-password
      - DB_NAME=your-db-name
    depends_on:
      - mysql
    networks:
      - backend-network

  mysql:
    image: mysql:latest
    environment:
      - MYSQL_ROOT_PASSWORD=your-mysql-root-password
      - MYSQL_USER=your-db-user
      - MYSQL_PASSWORD=your-db-password
      - MYSQL_DATABASE=your-db-name
    volumes:
      - your-mysql-data-directory:/var/lib/mysql
    networks:
      - backend-network

networks:
  backend-network:


volumes:
  your-mysql-data-directory:

docker run -d -p 3000:3000 –name my-nest-app my-nest-app-image

Nach der Installation konnten wir uns direkt über den Browser in das Plesk Control Panel einloggen. Dort haben wir dann zunächst unsere Domain registriert und die entsprechenden DNS-Einträge vorgenommen, damit unsere Heurigen-Suchmaschine über die Domain erreichbar ist.

Anschließend haben wir dann die benötigten Webanwendungen, Datenbanken und E-Mail-Konten eingerichtet. Hierbei war die Benutzeroberfläche von Plesk sehr intuitiv und einfach zu bedienen, sodass wir uns schnell zurechtgefunden haben. ( ist auch das mindeste, wenn wir monatlich für die Lizenz zahlen) 

Darüber hinaus bietet Plesk auch eine Integration von Docker, was es uns ermöglicht, unsere Webanwendungen in Docker-Containern zu betreiben. Dies bietet den Vorteil, dass wir unsere Anwendungen unabhängig von der zugrunde liegenden Serverkonfiguration betreiben können und somit auch die Flexibilität haben, unsere Anwendungen auf anderen Servern zu betreiben, falls dies notwendig sein sollte.

Insgesamt sind wir mit unserer Entscheidung, Plesk auf unserem angemieteten vServer zu nutzen, sehr zufrieden und gleichzeitig überrascht, wie strukturiert man mit so einer Infrastruktur arbeiten kann. Die Plattform bietet eine leistungsstarke und einfach zu bedienende Lösung für das Hosting unserer Webanwendungen, Datenbanken und E-Mail-Konten. Darüber hinaus bietet die Integration von Docker auch die Möglichkeit, unsere Anwendungen flexibel und unabhängig von der zugrunde liegenden Serverkonfiguration zu betreiben.

Github und automatische Builds :

Da auch einige nicht versierte Personen mitlesen, gehe ich wir mal etwas auf Github ein.
GitHub ist eine beliebte Plattform für die Versionsverwaltung von Code und ermöglicht es Entwicklern, an Projekten zusammenzuarbeiten und Änderungen an Code zu verfolgen. Plesk bietet die Möglichkeit, Git-Repositories in das Hosting-System zu integrieren und Webhooks zu verwenden, um automatische Bereitstellungen auszulösen. Wird eine Änderung vorgenommen, so ruft Github eine URL auf, die ein Skript triggert. Dieses holt sich die Änderung und erstellt ein neues Build der Applikation.

Um eine automatische Bereitstellung zu konfigurieren, sind wir wie folgt vorgegangen:

1. Ein Git-Repository auf GitHub erstellen oder ein bestehendes Repository verwenden.
2. Eine neue Domain in Plesk hinzufügen und das zugehörige Verzeichnis erstellen.
3. Das Git-Repository in Plesk einrichten und Webhooks hinzufügen.
4. Eine Pipeline-Konfiguration in Plesk erstellen, um das Build-Skript auszuführen.
5. Eine Post-Receive-Hook-URL in GitHub einrichten, um das Webhook auszulösen

Schritt 1: Git-Repository auf GitHub erstellen

Ein neues Git-Repository kann auf der GitHub-Website erstellt werden, indem auf den “New Repository”-Button geklickt wird. Man gibt dem Repository einen Namen und wählt, ob es öffentlich oder privat sein soll.

Schritt 2: Domain hinzufügen und Verzeichnis erstellen

In Plesk muss zunächst eine neue Domain hinzugefügt werden. Man klickt dazu auf “Websites & Domains” und dann auf “Add Domain”. Dann wählt man nur mehr einen Domainnamen ein und wählt das Verzeichnis aus, in dem Ihre Anwendung gespeichert wird.

Schritt 3: Git-Repository in Plesk einrichten und Webhooks hinzufügen

In Plesk kann das Git-Repository über das Menü “Git” eingerichtet werden. Dazu fügt man die Git-URL und Authentifizierungsdaten hinzu, um auf das Repository zuzugreifen. Anschließend können Webhooks hinzugefügt werden, indem man auf das “+”-Symbol neben dem Repository klicken und die Webhook-URL auswählen.

Schritt 4: Pipeline-Konfiguration in Plesk erstellen

Eine Pipeline-Konfiguration muss in Plesk erstellt werden, um das Build-Skript auszuführen. Dies kann über das Menü “Websites & Domains” und dann “Hosting Settings” erfolgen. Danach nur mehr auf “Run a script” drücken und das Skript einfügen, das ausgeführt werden soll.

Schritt 5: Post-Receive-Hook-URL in GitHub einrichten

Eine Post-Receive-Hook-URL muss in GitHub eingerichtet werden, um das Webhook auszulösen. Dazu klicken wir auf die Repository-Einstellungen und dann auf “Webhooks”. Fügen die URL hinzu, die in Plesk erstellt wurde, und wählt aus, welche Ereignisse das Webhook auslösen sollen.

Wenn alle Schritte abgeschlossen sind, wird die Anwendung automatisch bereitgestellt, wenn Änderungen an Ihrem Git-Repository vorgenommen werden.

Taskmanagment Github Projects:

Github Projects ist eine Funktion von Github, die es Nutzern ermöglicht, ihre Projekte zu organisieren und zu verwalten. Es ist ein flexibles und leicht zu bedienendes Tool, das bei der Zusammenarbeit an Projekten von Vorteil ist. Mit Github Projects kann man die Aufgaben und Backlogs visuell darstellen, was einem einen Überblick über den Fortschritt des Projekts gibt.

Die Einrichtung von Github Projects ist einfach. Man erstellt ein neues Projekt, indem man auf die Schaltfläche “Neues Projekt” auf der Github-Projektseite klicken. Wir können dann die Spalten definieren, die Sie für Ihr Projekt benötigen, z.B. “To Do”, “In Arbeit” und “Fertig”.

Ein Vorteil von Github Projects ist, dass es in Github integriert ist. Das bedeutet, dass man die Projekt-Management-Aufgaben direkt auf Github erledigen kann. Man muss nicht auf eine andere Plattform wechseln, um Ihre Projektdaten zu verwalten.

Ein weiterer Vorteil ist die Möglichkeit der Zusammenarbeit. Mit Github Projects können mehrere Personen an einem Projekt arbeiten und den Fortschritt des Projekts gemeinsam verfolgen. Es gibt eine Vielzahl von Funktionen, die es den Teammitgliedern ermöglichen, Aufgaben zuzuweisen, Kommentare zu hinterlassen und den Status von Aufgaben zu ändern.

Zusammenfassend bietet Github Projects eine großartige Option für Teams, die an einem gemeinsamen Projekt arbeiten und ihre Arbeit effektiv verwalten und koordinieren müssen.

Versionsverwaltung GitHUb

GitHub ist eine der bekanntesten Plattformen für Softwareentwickler und bietet eine Vielzahl von Tools, um die Zusammenarbeit und den Austausch von Code zu erleichtern. Es ist auch ein beliebtes Tool zur Verwaltung von Softwareprojekten und Backlogs.

Bei unserem Projekt haben wir uns dafür entschieden, GitHub Projects zu nutzen, um unsere Backlogs zu organisieren und das Projektmanagement zu vereinfachen. GitHub Projects ist ein Kanban-Board-Tool, das es Entwicklerteams ermöglicht, Aufgaben und Projektmanagement-Aufgaben zu erstellen, zu verwalten und zu verfolgen. Es ist direkt in GitHub integriert, so dass man es einfach nutzen kann, ohne eine separate Plattform nutzen zu müssen.

Um GitHub Projects nutzen zu können, müssen wir zunächst sicherstellen, dass unser Repository auf GitHub gehostet wird. Sobald das Repository vorhanden ist, können wir ein neues Projekt erstellen und die Karten in die Spalten “To Do”, “In Progress” und “Done” aufteilen. Anschließend können wir Karten erstellen und Aufgaben zuweisen. Diese Karten können dann per Drag-and-Drop verschoben werden, um den Fortschritt der Aufgaben zu verfolgen.

Die Vorteile von GitHub Projects liegen auf der Hand: Es ist einfach zu bedienen, es ist direkt in GitHub integriert, so dass man nicht auf eine separate Plattform zugreifen muss, und es ist für Teams jeder Größe geeignet. Auch die Möglichkeit, Issues direkt mit Karten in GitHub Projects zu verknüpfen, ist eine großartige Funktion, die den Workflow beschleunigt.

Insgesamt hat uns GitHub Projects geholfen, unser Projektmanagement zu verbessern und unsere Backlogs zu organisieren. Wir empfehlen es jedem Entwicklerteam, das eine einfache und benutzerfreundliche Lösung für die Organisation von Aufgaben sucht.

Frontend-Entwicklung

Die Wahl für unser Toolkit in Hinblick auf die Frontend Entwicklung fiel nach einiger Überlegung auf das Ionic Framework in Kombination mit dem JavaScript Framework Angular. Der zentrale Vorteil, welcher sich für uns dadurch ergeben hat ist, dass wir später die Möglichkeit haben unsere Plattform auch als Mobile Applikationen anzubieten. Auch wenn wir unseren Service zunächst nur als Webplattform ausführen werden, kann mit diesem Setup leicht alle nativen Plattformen bedient werden, ohne später die Struktur oder Codebase ändern zu müssen. Zudem verfügt das Framework über einige vorgefertigte Komponenten, welche uns die Arbeit erleichtern. 

Die Wahl des JavaScript Frameworks ergab sich aus mehreren Gründen. Zunächst war der Vorteil, dass wir schon in der Lehrveranstaltung mit Angular gearbeitet haben und so bereits gewisse Vorkenntnisse vorhanden waren. Zudem hat uns die generelle Struktur um einiges mehr überzeugt, als es bei Vue der Fall war und nachdem keiner aus unserem Team Erfahrungen mit React hatte und die Lernkurve vergleichsweise steil zu sein scheint, schied auch diese Option aus. 

Bevor wir mit der eigentlichen Entwicklung des Frontends beginnen konnten, war uns eine detaillierte Planung wichtig. Vor allem, da wir das Projekt über mehrere Semester angelegt haben, wurde zunächst einige Zeit in die Gestaltung des User Interfaces gesteckt. Damit wollten wir vermeiden den Aufbau der Seite im Laufe der Entwicklung laufend überdenken zu müssen. Den Startpunkt legte hierbei die Gestaltung von Wireframes, um einmal grob festzulegen, welche Inhalte wir auf unserer Seite haben wollen. Dabei haben wir uns auch mit den Grundfunktionen unserer Plattform beschäftigt, welche für spätere Nutzer entscheidend sein werden. Nachdem wir uns auf die wichtigsten Elemente und eine grobe Positionierung auf der Seite geeinigt hatten, folgte die Umsetzung von High Fidelity Mockups mit Adobe XD. Im Zuge dessen haben wir uns auch mit den grundlegenden Design Aspekten, sowie dem Corporate Design unserer späteren Seite beschäftigt. Dabei wurden wichtige Elemente wie Farben und Schriftarten definiert. 

Die Entwicklung unseres Projekts: Ein vertiefender Einblick ins zweite Semester

Als wir uns dem zweiten Semester näherten, wussten wir, dass sich der Fokus von der Backend-Entwicklung, die im ersten Semester unsere Hauptaufgabe war, zum Frontend verschieben würde. Was wir jedoch nicht erwartet hatten, war die Intensität und Komplexität der Herausforderungen, denen wir uns stellen würden.

Die Synergie unseres Teams

Unser Team ist eine Mischung aus talentierten Individuen mit einer gemeinsamen Vision. Diese Vision trieb uns an, nicht nur als Einzelpersonen, sondern als eine Einheit zu funktionieren. Während ich persönlich tief im Frontend versunken war, gab es Momente, in denen das Backend Aufmerksamkeit erforderte. Diese Balance zwischen den beiden Komponenten war nur durch die unermüdliche Zusammenarbeit und die Synergie unseres Teams möglich. Unsere täglichen Meetings und ständige Kommunikation halfen uns, auf dem richtigen Weg zu bleiben.

Design- und UI-Herausforderungen

Eines der größten Rätsel dieses Semesters war das User Interface (UI). Wir wollten nicht nur ein funktionelles, sondern auch ein intuitives und ästhetisch ansprechendes Design. Dies führte zu vielen Diskussionen, Prototypen und Tests. Unsere Entscheidung, das Error-Handling im Frontend zu erweitern, war entscheidend, um die User Experience zu verbessern. Diese Änderungen gewährleisteten, dass Benutzer nicht durch unerwartete Fehler oder Probleme frustriert wurden.

Die Evolution der Leaflet Map

Unsere Arbeit mit der Leaflet Map war besonders aufschlussreich. Die Entscheidung, sie in eine eigene Komponente auszulagern, war nicht trivial. Sie erforderte viele Stunden der Planung und Umsetzung, um sicherzustellen, dass sie nahtlos in unsere Anwendung integriert wurde. Die Herausforderung, welche Daten zu laden und wie sie dem Benutzer präsentiert werden sollten, verlangte einen feinen Balanceakt zwischen Performance und Benutzerfreundlichkeit.

Technische Tiefe: Unsere Autovervollständigungs- und Suchmaschinenentwicklung

In der modernen digitalen Welt ist die Nutzererfahrung eines der entscheidenden Merkmale einer erfolgreichen Anwendung. Ein wesentlicher Bestandteil dieser Erfahrung, besonders in datengetriebenen Anwendungen, ist die Fähigkeit, effizient und intuitiv nach Informationen zu suchen. Um dieses Erlebnis für unsere Nutzer zu optimieren, haben wir eine innovative Autovervollständigungs- und Suchfunktion entwickelt.

Das Herzstück: Der Suchbaum

Im Kern unserer Autovervollständigungslogik steht ein in PHP implementierter Suchbaum. Dieser Baum, auch bekannt als Trie (abgeleitet von Retrieval), ist eine baumartige Datenstruktur, die speziell für das dynamische Speichern und Abrufen von Zeichenketten verwendet wird. Jeden Tag aktualisiert sich unser Suchbaum automatisch durch einen Auszug aus unserer Datenbank. Dies garantiert, dass die Daten, die für die Autovervollständigung verwendet werden, stets aktuell und relevant sind.

Gliederung der Daten: Heurigen, Straßennamen und mehr

Ein wesentliches Merkmal unserer Implementierung ist die differenzierte Behandlung verschiedener Datensätze. Heurigen, Straßennamen und andere relevante Datensätze werden separat gespeichert und verarbeitet. Diese Segmentierung ermöglicht es uns, trotz der Kompaktheit des Suchbaums, eine klare Verbindung zwischen den zurückgegebenen Vorschlägen und ihren entsprechenden Kategorien zu behalten. So können wir beispielsweise sicherstellen, dass ein bestimmter Straßenname korrekt mit seiner zugehörigen Kategorie verknüpft ist und nicht versehentlich als Heuriger interpretiert wird.

Durch diese detaillierte Analyse und Trennung der Daten konnten wir auch interessante Einsichten gewinnen, wie zum Beispiel die Tatsache, dass es in unserer Datenbank 2072 einzigartige Wörter in Straßennamen gibt. Solche Informationen können nicht nur für interne Analysen wertvoll sein, sondern auch dazu beitragen, die Datenbank effizienter zu gestalten und den Nutzern ein noch schnelleres Sucherlebnis zu bieten.

Die Entwicklung dieser Autovervollständigungs- und Suchfunktion war kein einfacher Prozess, aber sie hat unsere Anwendung zweifellos auf die nächste Stufe gehoben. Durch unsere technisch fundierte Herangehensweise und die kontinuierliche Optimierung können wir unseren Nutzern ein reibungsloses und intuitives Sucherlebnis bieten, das ihre Interaktion mit unserer Plattform weiter verbessert.

Unsere eigenen Komponenten

Das Ionic Framework bietet viele nützliche Tools, aber wir erkannten schnell, dass wir spezifische Anforderungen hatten, die maßgeschneiderte Lösungen erforderten. Das Ergebnis war unser eigenes Split-Layout, das speziell entwickelt wurde, um den spezifischen Anforderungen unserer Anwendung gerecht zu werden.

Blick nach vorne

Während wir zurückblicken und unsere Erfolge feiern, sind wir uns auch bewusst, dass die Reise noch lange nicht zu Ende ist. Mit jedem neuen Semester kommen neue Herausforderungen und Möglichkeiten. Aber mit der Entschlossenheit und dem Engagement unseres Teams sind wir zuversichtlich, dass wir auch zukünftige Hürden überwinden und weiterhin Produkte von höchster Qualität liefern werden.

The post Heurig – Der Start einer Heurigen-Suchmaschine appeared first on Mobile USTP MKL.

                                                                                                                                                                  I.     Einleitung

Obwohl es mittlerweile Möglichkeiten gibt, auf verfügbare APIs zurückzugreifen und dadurch einen Kompromiss zu schaffen und nicht unterstützte Sprachen zu bedienen, liegt der Fokus in diesem Bericht auf der Performance von Bibliotheken für PHP.

                                                                                                                                                           II.   Vorteile von PHP

A.   Eine leicht zu erlernende Sprache

B.   Syntax

C.   Kosten

D.  Benutzerfreundlichkeit

E.   Datenbank-Unterstützung

F.   Geschwindigkeit 

                                                                                                                                 III.  PHP Erweiterungen für ML-Anwendungen

A.   RUBIXML

B.   PHP-OpenCV

C.   PHPML

D.  Google Cloud Machine Learning

                                                                                                                                             IV.  Beispiel Anhand von RubixML

Platzhirsch Python

                                                                                                                                                                     VII.  Fazit

References

• Krishnan, N. (n.d.). Enterprise AI and Machine Learning for Managers. Retrieved November 4, 2022, from https://www.kaggle.com/datasets/kaggle/kaggle-survey-2018
• Kaggle. (2018). 2018 Kaggle Machine Learning & Data Science Survey. Retrieved November 6, 2022, from https://www.kaggle.com/datasets/kaggle/kaggle-survey-2018
• W3Techs. (n.d.). Usage of server-side programming languages for websites. Retrieved November 9, 2022, from http://w3techs.com/technologies/overview/programming_language/all
•  Samra, J. (n.d.). Comparing Performance of Plain PHP and Four of Its Popular Frameworks. (Thesis Project). Linnaeus University, Sweden.
• Bennett, S. (2019, March 20). Why machine learning is primarily written in Python. IBM Developer. Retrieved November 8, 2022, from https://developer.ibm.com/blogs/why-machine-learning-is-primarily-written-in-python/
• [Kühn, A. (2015). PHP in scientific computing [Master’s thesis, Fakultät für Informatik, Karlsruher Institut für Technologie]. https://www.diva-portal.org/smash/get/diva2:846121/FULLTEXT01.pdf
•  DalPino, A. and Rubix ML. (n.d.). A high-level machine learning and deep learning library for the PHP language. Retrieved November 6, 2022, from https://rubixml.com/
• Tensor: Scientific Computing for PHP. (n.d.). GitHub. Retrieved November 6, 2022, from https://github.com/RubixML/Tensor
• OpenCV. (n.d.). About. Retrieved November 6, 2022, from https://phpopencv.org/
• Kondas, A. (n.d.). PHP-ML – Machine Learning library for PHP. Retrieved from https://php-ml.org/
• Google Cloud. (n.d.). AI and machine learning products. Retrieved November 6, 2022, from https://cloud.google.com/products/ai/
• Rubix ML. (n.d.). Basic Introduction for Rubix ML. Retrieved November 6, 2022, from https://docs.rubixml.com/2.0/basic-introduction.html
• Babic, A. (n.d.). Example-PHP-for-machine-learning-RubixML [Code example]. Retrieved November 6, 2022, from https://github.com/Andybabic/Example-PHP-for-machine-learning-RubixML-
• Rossi, R. A., & Ahmed, N. K. (2015). The Network Data Repository with Interactive Graph Analytics and Visualization. In AAAI. Retrieved November 21, 2022, from https://nrvis.com/data/mldata/pima-indians-diabetes.csv
• Brownlee, J. (2019). Top 10 Programming Languages for Machine Learning. Machine Learning Mastery.  Retrieved November 31, 2022, from https://www.booksfree.org/wp-content/uploads/2022/05/Machine-Learning-Mastery-With-Python-by-Jason-Brownlee-pdf-free-download-booksfree.org_.pdf

The post Sota: Wie PHP zur Verwendung für Aufgaben im Bereich „Maschinellen Lernen“ genutz werden kann appeared first on Mobile USTP MKL.

Was ein Raspberry Pico ? Was unterschiedet ihn zum Raspberry Pi ?

Der Raspberry Pi ist ein kleiner, leistungsfähiger Einplatinencomputer, der für verschiedene Anwendungen wie z.B. das Erstellen von Servern, das Steuern von Haushaltsgeräten oder das Erstellen von Medienzentren verwendet werden kann. Der Raspberry Pi verfügt über mehrere Anschlüsse für Peripheriegeräte wie Tastaturen, Mäuse und Monitore, und es gibt verschiedene Modelle mit unterschiedlichen Leistungsmerkmalen und Preisen.

Der Raspberry Pi Pico ist ein neueres Produkt, das auf dem RP2040-Mikrocontrollerchip von Raspberry Pi basiert. Es ist im Vergleich zum Raspberry Pi deutlich kleiner und kostengünstiger und eignet sich besonders gut für einfache, ressourcensparende Anwendungen wie z.B. das Steuern von Geräten oder das Sammeln von Daten. Der Raspberry Pi Pico hat weniger Anschlussmöglichkeiten als der Raspberry Pi und ist weniger leistungsfähig, aber dafür auch einfacher zu programmieren und zu verwenden.

Der Unterschied zum Arduino

Der Arduino ist ebenfalls ein Mikrocontroller, der für einfache, ressourcensparende Anwendungen wie das Steuern von Geräten oder das Sammeln von Daten geeignet ist. Im Vergleich zum Raspberry Pi Pico ist der Arduino jedoch eine etabliertere Plattform mit einer größeren Nutzerbasis und einer breiteren Auswahl an Hardware- und Software-Erweiterungen. Der Arduino ist auch etwas leistungsfähiger als der Raspberry Pi Pico und hat eine größere Auswahl an Anschlussmöglichkeiten. Allerdings ist er auch teurer und komplizierter zu programmieren.

Warum der RP2040-Mikrocontrollerchip besonders ist?

Der RP2040-Mikrocontrollerchip, der im Raspberry Pi Pico verwendet wird, hat einige Vorteile gegenüber dem Arduino. Zunächst einmal ist der RP2040 leistungsfähiger als der Arduino, insbesondere in Bezug auf die Rechenleistung und die Taktfrequenz. Der RP2040 verfügt auch über mehr Arbeitsspeicher als der Arduino, was ihn für anspruchsvollere Aufgaben geeignet macht.

Ein weiterer Vorteil des RP2040 ist die Unterstützung für das Python-Programmiermodell. Viele Entwickler bevorzugen Python wegen seiner einfachen Syntax und seiner Beliebtheit in der Informatikindustrie. Der RP2040 bietet die Möglichkeit, Python-Code direkt auf dem Mikrocontroller auszuführen, was für Entwickler, die Python verwenden, eine attraktive Option darstellen könnte.

Zusätzlich zu diesen Vorteilen bietet der Raspberry Pi Pico eine breite Palette von Anschlussmöglichkeiten, darunter USB, UART, I2C und SPI, die es ermöglichen, verschiedene Peripheriegeräte anzuschließen und zu steuern. Der Arduino bietet zwar auch eine Reihe von Anschlussmöglichkeiten, aber der Raspberry Pi Pico hat hier einen leichten Vorsprung.

Insgesamt bietet der Raspberry Pi Pico eine leistungsfähigere und flexiblere Plattform als der Arduino, die insbesondere für Entwickler attraktiv sein könnte, die Python verwenden und anspruchsvollere Anwendungen erstellen möchten.

Arduino-C++:

int ledPin = 13;

void setup() {
  pinMode(ledPin, OUTPUT);
}

void loop() {
  digitalWrite(ledPin, HIGH);
  delay(1000);
  digitalWrite(ledPin, LOW);
  delay(1000);
}

MicroPython:

from machine import Pin
import time

led = Pin(13, Pin.OUT)

while True:
  led.value(1)
  time.sleep(1)
  led.value(0)
  time.sleep(1)

Wie man sieht, sind die beiden Codebeispiele ziemlich ähnlich, aber es gibt einige Unterschiede in der Syntax und in den verwendeten Bibliotheken. Der Arduino-Code verwendet C++ und die Arduino-Bibliotheken, während der MicroPython-Code Python und die MicroPython-Bibliotheken verwendet. MicroPython ist in der Regel etwas einfacher zu lesen und zu verstehen als Arduino-C++, da es eine einfache, intuitive Syntax hat und weniger Zeichen benötigt.

Wandplotter Logik mit einem Pico:

Um den einfache Nutzbarkeit von einem Pico auf zu zeigen, schauen wir uns mein Lieblingsprojekt an. Der Wandplotter ist ein klasse Beispiel, um eine neue Plattform zu testen.

Als ersten sehen wir uns die Daten zum Drucken an. Hierfür verwenden wir Vektor Daten in Form von svg Dateien an. Wenn wir eine SVG Datei als TXT öffnen, bietet sich folgendes Bild:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	    viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm" style="enable-background:new 0 0 1500 1500;" xml:space="preserve">
<g>
	<path d="M454.4,408.4h98v19.7h-74.5v60.5h68.8v19.4h-68.8v82.3h-23.5V408.4z"/>
	<path d="M609.4,408.4v107.7c0,40.8,18.1,58,42.4,58c27,0,44.3-17.8,44.3-58V408.4h23.8v106.1c0,55.9-29.4,78.8-68.8,78.8
		c-37.3,0-65.3-21.3-65.3-77.7V408.4H609.4z"/>
	<path d="M887.7,584.5c-8.6,4.3-25.9,8.6-48,8.6c-51.3,0-89.9-32.4-89.9-92.1c0-57,38.6-95.6,95-95.6c22.7,0,37,4.9,43.2,8.1
......

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format zur Beschreibung zweidimensionaler Grafiken. Die Formatierung von SVG-Grafiken erfolgt über XML-Tags und Attribute, die die Formen, Farben und Transformationen der Grafik beschreiben.

Ein grundlegendes SVG-Dokument besteht aus einem Wurzelelement, das <svg> genannt wird, und enthält eine Liste von Formen und Bildern, die als Kinder des <svg>-Elements definiert sind. Jede Form oder jedes Bild wird als ein einzelnes Element beschrieben, das ein bestimmtes Tag hat. Hier sind einige häufig verwendete Formen-Tags:

• <rect> – definiert ein Rechteck
• <circle> – definiert einen Kreis
• <ellipse> – definiert eine Ellipse
• <line> – definiert eine Linie
• <polyline> – definiert eine mehrseitige Linie
• <polygon> – definiert ein Polygon

Jede Form hat Attribute, die ihre Größe, Position und Farbe beschreiben. Hier sind einige häufig verwendete Attribute:

• x und y – legen die Position der Form auf der x- und y-Achse fest
• width und height – legen die Größe der Form fest
• fill – legt die Füllfarbe der Form fest
• stroke – legt die Farbe des Rahmens (Strokes) der Form fest
• stroke-width – legt die Breite des Rahmens fest

Neben den Grundformen unterstützt SVG auch komplexere Formen, wie z. B. Pfade, und bietet eine Vielzahl von Optionen für die Textformatierung. Pfade werden mit dem <path>-Element definiert, das eine breite Palette von Pfadbefehlen zur Erstellung komplexer Formen unterstützt. Text wird mit dem <text>-Element formatiert, mit dem Sie die Schriftart, die Größe und andere Formatierungsoptionen für den Text festlegen können.

Insgesamt ist die Formatierung von SVG-Grafiken recht flexibel und leistungsfähig und ermöglicht es Ihnen, eine breite Palette von Grafiken zu erstellen, von einfachen Formen bis hin zu komplexen Illustrationen.

SVG TO G-Code

G-Code ist eine Art von Maschinensprache, die hauptsächlich in der CNC-Fertigung und in der 3D-Druckbranche verwendet wird. Es wird verwendet, um Maschinen anzuweisen, bestimmte Bewegungen und Funktionen auszuführen, um ein Werkstück herzustellen oder zu bearbeiten.

Jede Zeile im G-Code-Programm enthält einen einzelnen Befehl, der von der Maschine interpretiert wird. Ein Befehl besteht aus einem oder mehreren G-Code-Befehlen und eventuell einer Liste von Parametern, die die Bedingungen des Befehls beschreiben.

Ein Beispiel eines einfachen G-Code-Befehls ist “G1 F500 X100 Y100”, was bedeutet, dass die Maschine mit einer Geschwindigkeit von 500 Millimeter pro Minute auf die Koordinaten X100 und Y100 bewegt werden soll.

Insgesamt ist G-Code ein mächtiges Werkzeug, um CNC-Maschinen und 3D-Drucker präzise und reproduzierbare Ergebnisse zu liefern.

G-Gode und Vektor Grafiken sind verschiedene Formate, haben aber eine nutzbare Gemeinsamkeit. Sie können hierarchisch gelesen werden und können in ein Koordinatensystem projiziert werden. Eine Umwandlung ist hierbei auch mit einfachen Mitteln zu verwirklichen. 

Wir nutzen in diesem Fall eine Python Bibliothek namens svg_to_gcode. Diesen können wir leider wegen einem fehlenden XML-Parser Bibliothek  nicht auf dem Pico laufen lassen, aber da wir den für den Pico einen Desktop benötigen, so lassen wir diesen einfach dort laufen. Unser G-Gode befindet sich nun im Ordner ‘path/to/output.gcode’ und diesen können wir später in das Verzeichnis vom Pico laden.

from svg_to_gcode.svg_parser import parse_svg

# Parse the SVG file
path_data = parse_svg('path/to/input.svg')

# Check and adjust the coordinates to be positive
for path in path_data:
    for command in path:
        for i, coord in enumerate(command):
            if i % 2 == 0 and coord < 0:
                command[i] = -1 * coord

# Generate the Gcode
gcode = svg_to_gcode.gcode_from_svg(path_data)

# Save the Gcode
with open('path/to/output.gcode', 'w') as f:
    f.write(gcode)

Vom G-Code in die reale Welt:

Alle Vorbereitungsschritte sind nun erledigt und wir können mit der Programmierung vom Pico beginnen. Da es keine speziellen Anforderungen beim Bespielen vom Microcontroller gibt, werde ich hierfür auf die offizielle Dokumentation verweisen:https://www.raspberrypi.com/documentation/microcontrollers/raspberry-pi-pico.html

Wir werden nun eine main.py erstellen und den Code Teil für Teil implementieren:

Als erstes laden wir die benötigten Bibliotheken:

from time import sleep 
import math
from machine import Pin, PWM 

Diese benötigen wir für einen Delay, mathematische Funktionen und das ansteuern von Pins und einem Servo Motor.

Als nächsten Schritt machen wir uns das Leben einfacher und generieren eine Klasse Stepper für die einzelnen Steppermotoren. Hierfür ist die Funktionsweise und der Unterschied von herkömmlichen Elektromotoren wichtig.

Stepper-Motoren sind speziell für präzise Positionierung entwickelt worden. Sie arbeiten indem sie in kleinen Schritten (Steps) rotieren und dabei eine präzise Position beibehalten. Jeder Schritt ist dabei gleich groß und kann genau gesteuert werden. Dies macht Stepper-Motoren ideal für Anwendungen, in denen eine genaue Positionskontrolle erforderlich ist, wie beispielsweise in CNC-Maschinen, 3D-Druckern und Robotern.

DC-Motoren (Gleichstrommotoren) hingegen sind einfachere Motoren, die einen gleichmäßigen Drehmomentausgang liefern. Sie sind nicht so präzise wie Stepper-Motoren, aber dafür einfacher zu verwenden und zu kontrollieren. DC-Motoren eignen sich besser für Anwendungen, bei denen keine präzise Positionierung erforderlich ist, wie beispielsweise in Lüftern, Pumpen und Antrieb für Fahrzeuge.

Durch mehrere Spulen kann ein Steppermotor realisiert werden. Dies benötigt dafür auch mehrere Leitungen zu dem Motor. In unserem Fall sind es 4 Phasen. Wenn wir nun wie in der Abbildung 3, zeitversetzt die jeweiligen Phasen nacheinander unter Spannung setzten, erzeigen wir eine Drehbewegung. Die Anzahl dieser Iteration ist dabei ein Stepp* der Anzahl der Phasen.

Kommen wir nun zu unserem Code und setzten wir das gelernte in eine Klasse um.

class Stepper:
    
    sequence_forw = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]]
    sequence_rev = [[0,0,0,1],[0,0,1,0],[0,1,0,0],[1,0,0,0]]
    sleeptime= 0.001

Die Klasse benötigt eine Sequenz für die Rotation. Diese Speichern wir in einem Array. Weil die Steuerung schneller schaltet, als die Massenträgheit des Motors überwunden werden kann, müssen wir jeden dieser Schritte mit einer Pause versetzten. 1-3 Millisekunde ist hierbei ein sehr guter Wert.

def __init__(self,pins, currentlength, umfang):
        self.pins=pins
        self.currentlength = currentlength
        self.umfang = umfang
        self.stepps= 2048
        self.singleStepLen= umfang/self.stepps

Wenn wir die Klasse initialisieren, wollen wir auch Werte übergeben. Wichtig ist hierbei die Position, Dimension und die Ausgänge vom Motor. Beim Plotter entspricht die Position nur dem Zusammenspiel der 2 Seile. Es reicht deshalb, dem Stepper zu sagen, wie lang die aktuelle Länge ist und wie groß die Veränderung pro (Teil-)Umdrehung ist. Ein Stepper Motor hat übrigens meistens rund 2048 Stepps für eine gesamte Umdrehung.

Die mathematische Lösung:

Eine vermutlich sehr komplizierte Aufgabe kann durch die mathematischen Fähigkeiten von Mittelschülern einfach gelöst werden. So auch das Problem der Steuerung. Wir haben unsere Grafiken schon in ein Koordinatensystem umgewandelt und haben nun einen Punkt erreicht, in dem wir Steppermotoren und Druckdaten sehr gut zusammenführen können.

Ich erspare mir die Erklärung der Abbildung und lasse diese auf euch wirken.
Wenn euch nun dein Licht auf geht, können wir fortfahren und alle wichtigen Funktionen von unserer Klasse erstellen.

def calcSteps(self,slen):
        stepps=slen/self.singleStepLen
        return math.floor(stepps) # wir runden unsere Ausgabe

def goto(self,newlen):
            job= self.calcSteps(newlen - self.currentlength )    
            self.currentlength=job # neue länge muss in der Klasse gespeichert erden
            return job
        
def doStep(self,steps,stepPer):
        for i in range(stepPer):
            if steps > 0:
                self.step_for(steps%4)
                steps= steps -1
            elif steps < 0:
                self.step_bac(steps%4)
                steps= steps +1
            else:
                break
        return steps
                   
    
            
def step_for(self,sIndex):
            step= self.sequence_forw[sIndex]
            for i in range(len(self.pins)):
                self.pins[i].value(step[i])
                sleep(self.sleeptime)
                
                
def step_bac(self,sIndex):
            step= self.sequence_rev[sIndex]
            for i in range(len(self.pins)):
                self.pins[i].value(step[i])
                sleep(self.sleeptime)
                

Wir haben nun alle wichtigen Funktionen. Wir können mit Stepper.goto(neueLänge) die Anzahl der Stepps berechnen, um von Länge A zu Länge B zu kommen. Der Rückgabewert ist je nach Veränderung der Länge, ein positiver oder negativer. Wenn wir diesen an Stepper.doStep(Stepps) schicken. wird die Sequenz ausgeführt.

Aktuell sollte der Code so aussehen:

from time import sleep
import math
from machine import Pin, PWM


class Stepper:
    
    sequence_forw = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]]
    sequence_rev = [[0,0,0,1],[0,0,1,0],[0,1,0,0],[1,0,0,0]]
    sleeptime= 0.001
    

    def __init__(self,pins, currentlength, umfang):
        self.pins=pins
        self.currentlength = currentlength
        self.umfang = umfang
        self.stepps= 2048
        self.singleStepLen= umfang/self.stepps

    def calcSteps(self,slen):
        import math
        stepps=slen/self.singleStepLen
        return math.floor(stepps)

    def goto(self,newlen):
            job= self.calcSteps(newlen - self.currentlength )    
            self.currentlength=job
            return job
        
    def doStep(self,steps,stepPer):
        for i in range(stepPer):
            if steps > 0:
                self.step_for(steps%4)
                steps= steps -1
            elif steps < 0:
                self.step_bac(steps%4)
                steps= steps +1
            else:
                break
        return steps

    
            
    def step_for(self,sIndex):
            step= self.sequence_forw[sIndex]
            for i in range(len(self.pins)):
                self.pins[i].value(step[i])
                sleep(self.sleeptime)
                
                
    def step_bac(self,sIndex):
            step= self.sequence_rev[sIndex]
            for i in range(len(self.pins)):
                self.pins[i].value(step[i])
                sleep(self.sleeptime)
                

Aus der Klasse raus in die Logik

Wie steigen aus der Klasse aus und legen unsere Pins fest, im selben Atemzug, können wir unseren Stepper initialisieren.

# GPIO für Steuersignal
servo_pin = 0

# Pins für den ersten Stepper definieren
pin1_1 = Pin(2, Pin.OUT)
pin1_2 = Pin(3, Pin.OUT)
pin1_3 = Pin(4, Pin.OUT)
pin1_4 = Pin(5, Pin.OUT)

# Pins für den zweiten Stepper definieren
pin2_1 = Pin(6, Pin.OUT)
pin2_2 = Pin(7, Pin.OUT)
pin2_3 = Pin(8, Pin.OUT)
pin2_4 = Pin(9, Pin.OUT)

# Stepper-Objekte erstellen
stepper1 = Stepper([pin1_1, pin1_2, pin1_3, pin1_4],0,10)
stepper2 = Stepper([pin2_1, pin2_2, pin2_3, pin2_4],0,10)

# Initialisierung PWM-Signal
servo = PWM(Pin(servo_pin))
servo.freq(50)

Öffnen unsere Lokale Version vom G-Code und laden es in eine Liste:

with open(filename, "r") as f:
    listData = f.readlines()

listData hat nun für jede Zeile ein Commando im Stiele von:

G90;
M5;
M5;
G1 F1000 X761.216815 Y81.931605;
M3 S255;
G1 F300 X764.251418 Y63.723614;
G1 X752.112820 Y88.000998;
G1 X764.251418 Y91.035600;
G1 X767.286209 Y63.723614;
G1 X782.459597 Y91.035600;
G1 X882.603734 Y91.035600;
G1 X752.112820 Y57.654221;

Wichtig ist Hiebei:

M5= Spindel Stop —> verwenden wir um den Servo ( Stift) anzuheben

M3= Spindel Start —> verwenden wir um den Servo ( Stift) zu senken

G1 = Bewege dich zu …

Wir müssen nun den Wert aus jeder Zeile Lesen. Beim Nero ist es einfach, beinhaltet die Zeile den Wert M5, dann mache … , wenn M3 dann …:

def servocontrol(job):
    if "M5" in job:
        for pos in range(3000,6000,20):
            setServoCycle(pos)
    if "M3" in job:
        for pos in range(6000,3000,-20):
            setServoCycle(pos)

    
def setServoCycle (position):
    servo.duty_u16(position)
    sleep(0.01)

Beim ablesen der Koordinaten wird es schwieriger, aber auch nicht unlösbar. Im selben Atemzug können wir unsere mathematisch hochkomplizierte Lösung anwenden:

def plotJob(commandline,xOff,yOff,xmax):
    newX = float(commandline("X")[1].split(" ")[0])+xOff
    newY = float(commandline("Y")[1].split(";")[0])+yOff

    len1= math.sqrt(newX**2+newY**2)
    len2= math.sqrt((xmax-newX)**2  +newY**2)
    return len1,len2

Wir müssen nur mehr jede einzelne Zeile durchgehen und schon haben wir unseren Plotter fertig.

 for i in listData:
        print(i)
        servocontrol(i)
        if "X" in i :
            job1,job2=plotJob(i,0,0,30)
            print(job1,job2)
            stepsfor1= stepper1.goto(job1)
            stepsfor2= stepper2.goto(job2)
            abs1= math.fabs(stepsfor1)
            abs2= math.fabs(stepsfor2)
            stepPer1=1
            stepPer2=1
            
            if abs1>abs2 and abs2>0 :
                stepPer1=abs1/abs2 
            elif abs1<abs2 and abs1>0 :
                stepPer2=abs2/abs1 

            while True:
                stepsfor1=stepper1.doStep(stepsfor1,stepPer1)
                stepsfor2=stepper2.doStep(stepsfor2,stepPer2)
                if stepsfor1 == 0 and stepsfor2 == 0:
                    break

Fazit:

Der gesamte Code hat nun in formatierter Version rund 140 Zeilen Code und macht nun die Kernaufgabe unseres Plotters. Ich persönlich bin sehr beeindruckt über die Einfachheit der Umsetzung. Natürlich ist die Umsetzung nun eine erste Version eines Studenten und sicherlich ausbaufähig. Dennoch machte es unglaublich viel Spaß.

Meine Arduinoversion hat rund 2.900 Zeilen und bietet sicherlich mehr Funktionen. Dennoch ist diese Version eine grandiose Chance, genau die selbe Begeisterung für dieses Projekt zu entwickeln, als ich.

Ich habe absichtlich den Code auf das wesentlich reduziert. Somit wirst du nach und nach auf kleinere Probleme stoßen. Aber keine Angst, jedes Problem ist mit einem einfachen Trick zu lösen.

The post Wand Plotter mit einem Raspberry Pico appeared first on Mobile USTP MKL.