“Ein Content-Management-System (kurz CMS) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung, Organisation und Darstellung digitaler Inhalte (Content) zumeist zur Verwendung in Webseiten, aber auch in anderen Medienformen. […]”

Wikipedia

Historie

Die erste Entwicklungsstufe des Internets, war gekennzeichnet von einfachen, statischen Websites. 1997 führte Microsoft iFrames ein, mit denen Sie das HTML-Browserfenster in Segmente aufteilen konnten, wobei in jedem Frame ein anderes Dokument angezeigt wurde, das zum Anzeigen von Inhalten anderer Websites verwendet werden konnte und für die Präsentation von Anzeigen und Bannern beliebt war. Probleme mit Sicherheit, Navigation und SEO mit sich.

Der Wendepunkt kam 1997, als mit der Einführung des Document Object Model (DOM) dynamische Inhalte aufkamen. Das DOM ist quasi eine API (application programming interface) für HTML and XML. Mit dem DOM können Sie beispielsweise auf die Stile von HTML-Elementen zugreifen und diese bearbeiten, z. B. auf den gesamten Textkörper (Body) oder einen Abschnitt (Div) auf einer Seite.

Dynamisches HTML mit asynchronem JavaScript und XML, allgemein als Ajax bezeichnet, war ein revolutionärer Durchbruch, der es Entwicklern ermöglichte, Daten anzufordern und zu empfangen, um eine Webseite zu aktualisieren, ohne die Seite neu laden zu müssen.

Web 2.0 and the role of a CMS (2003)

Interaktive Elemente und dynamischer Inhalt entstanden. Der Wunsch war geboren, dass man diese Inhalte auch durch andere User & Rollen austauschbar wird. Zugehörgie Systeme wurden geboren indem Content-Creator ohne technische Expertise auch Inhalte austauschen konnten.

Die Geschichte des Content Managementsystems (CMS) hat im Laufe der Jahre viele Wendungen genommen. Traditionelle CMS, die eng mit dem Frontend verbunden waren, dominierten lange Zeit den Markt. In den letzten Jahren hat jedoch ein Paradigmenwechsel stattgefunden, der die Verbreitung von Headless CMS vorangetrieben hat. Die steigende Nachfrage nach flexibleren Content-Management-Lösungen hat dazu geführt, dass Headless CMS an Bedeutung gewonnen hat, indem es die starren Strukturen traditioneller Systeme aufbricht.

Was ist ein Headless CMS?

Ein Headless CMS ist ein Backend-Only Web Content-Management-System (CMS). Ein Es stellt Inhalte über eine API für die Anzeige auf jedem Gerät bereit, ohne ein integriertes Frontend oder einen Presentation Layer (Quelle: Wikipedia).

Es unterscheidet sich also grundlegend von traditionellen CMS durch die Entkopplung des Frontend-Layers. Während traditionelle CMS eine enge Verbindung zwischen Backend und Frontend haben, ermöglicht ein Headless CMS die unabhängige Verwaltung von Inhalten, die dann über APIs an verschiedene Frontend-Plattformen ausgeliefert werden können.

Sehr gut erklärt diese Struktur folgendes Video:

Traditionelle CMS

Traditionelle CMS sind nach wie vor am meisten verbreitet.

Die Populärsten werden im Folgenden vorgestellt:

WordPress

Mittlerweile versucht auch WordPress einen flexibleren Ansatz und es kann als Decoupled CMS verwendet werden, siehe Artikel T3N: Headless CMS – warum wir WordPress in Zukunft ganz anders nutzen werden. Dies beinhaltet jedoch folgende Vor- und Nachteile:

Trends

Aktuelle Trends deuten darauf hin, dass der Headless-Ansatz weiterhin an Popularität gewinnen wird. Die Notwendigkeit, Inhalte über verschiedene Plattformen und Geräte hinweg zu präsentieren, treibt die Entwicklung von Headless CMS voran. Auch die verstärkte Nutzung von APIs in der Webentwicklung spielt eine entscheidende Rolle.

Vor- und Nachteile

Die Wahl des richtigen CMS ist nach wie vor wichtig. Zu sagen ein Headless CMS ist immer besser wäre falsch. Der richtige Use-Case ist wichtig.

Headless CMS

Traditional CMS

Strapi & Storyblok

Die beliebtesten Headless CMS stellen u.a. Strapi und vor allem in Österreich Storyblok dar.

Strapi

Strapi ist ein Open-Source Headless-CMS, welches selber gehostet werden kann. Es zeichnet sich durch seine Benutzerfreundlichkeit und flexible API-Gestaltung aus. Entwickler können damit mühelos Inhalte erstellen und verwalten, während gleichzeitig die Möglichkeit besteht, die APIs in verschiedene Frontend-Technologien zu integrieren. Ein großer Vorteil ist der Preis, da man die selbst gehostete Variante gratis nutzen kann (Stand März 2024):

Storyblok

Storyblok hebt sich durch seine einfache Handhabung und die Integration von Design-Elementen hervor. Entstanden als Startup in Linz, ist dieses CMS besonders am österreichischen Markt mittlerweile sehr verbreitet und dringt mittlerweile auch auf den internationalen Markt vor, siehe Artikel 8,5-Millionen-Dollar-Investment für Linzer Start-up Storyblok (2021).

Ein großer Vorteil im Vergleich zu Strapi ist der Visual Editor für Content Creator:

Nachteil ist definitiv der Preis. Bei mehreren Usern wird das Ganze sehr schnell teuer (Stand März 2024):

Fazit

Die Entwicklung von traditionellen CMS zu Headless CMS spiegelt den Wandel wider, den die Anforderungen an digitale Inhalte mit sich bringen. Während traditionelle CMS weiterhin ihre Daseinsberechtigung haben, gewinnt der flexible Ansatz von Headless CMS zunehmend an Bedeutung. Unternehmen sollten die individuellen Bedürfnisse und die technologische Ausrichtung bei der Auswahl eines Content-Management-Systems sorgfältig abwägen, um den optimalen Weg für ihre digitale Präsenz zu finden.

Headless CMS sollte man nutzen wenn…

• … multiplen Plattformen
• … kreativen & reaktiven Front-Ends
• … agiler Entwicklung
• … Abhängigkeit von Content-Teams durch Tech-Teams
• … Bedarf an zukunftsorientierten, flexiblen Lösungen

Auf ein traditionelles CMS sollte man hingegen setzen wenn…

• … begrenzte Entwicklerressourcen vorhanden sind
• … einfacher Webseite & nur eine Plattform
• … spezifische integrierte CMS-Funktionen notwendig sind (Blog, …)

The post Headless CMS – Ein Überblick und aktuelle Trends appeared first on Mobile USTP MKL.

Im Zuge der Masterklasse Mobile des Studiengangs Interactive Technologies, haben wir beschlossen zusammen ein AR Multiplayer Game zu entwickeln. Ausschlaggebend dafür war die Vorgabe, dass ein gemeinsames kreatives Projekt mit allen Teammitgliedern erstellt werden soll. Da sich ein Spiel sehr gut in einzelne Bereiche aufteilen lässt und der Umfang angemessen schien, haben wir uns für dieses gemeinsame Projekt entschieden.

Die Idee

Nach dem Beschluss ein Multiplayer AR Game in Unity realisieren zu wollen, haben wir mit dem Brainstorming begonnen. Schnell haben wir uns für den Tech Stack mit der Game Engine Unity, dem Framework AR Foundation und dem Multiplayer Server Photon entschieden, dazu später mehr. Folgende Spielideen kamen auf:

• ARtillery Game: Jeder Spieler besitzt eine kanone und muss den richtigen winkel finden, um die anderen zu zerstören, vielleicht unter Beeinflussung von echten Wind (sensoren/mikro?) Beispiel: https://rb.gy/g377b
• AR Zombie Apocalypse, einer ist Zombie und kann andere infizieren. Ziel: Zombies müssen in einem Zeitraum alle anderen infizieren (hide & seek)
• AR Treasure Hunt / Geocaching, Zusammenarbeiten um Rätsel zu lösen und schatz zu finden, oder einer versteckt, anderer sucht usw, z.B.: https://t.ly/yt6eA
• Rube Goldberg Machine, z.B.: https://t.ly/0AiCV
• Rennspiel: zufällig generierte strecken in realen Umgebungen, im Stil von Micro Machines (https://bit.ly/3MsMmnl)

Schlussendlich hat der Mehrheit die Idee mit den kleinen Autos, ähnlich zu Micro Machines sehr gefallen und Idee wurde weiter zu einer Art Rocket League in AR mit Modellautos geformt.

Das Konzept

In diesem Multiplayer-Spiel treten 2 vs 2 Spielern gegeneinander an, um mit kleinen Autos den Ball ins gegnerische Tor zu schießen. Das Spielfeld und die anderen Objekten werden in der Realität platziert. Am Spielfeld gibt es zudem eine Bombe von der man sich fernhalten sollte.

Es soll einfach möglich sein, dass jeder mit einem Smartphone, irgendwo in der echten Umgebung ein Spiel erstellen kann und andere Spieler einlädt. Das Spielprinzip sollte leicht zugänglich sein und dennoch durch die Mixed Reality beeindrucken.

Innovative Technologie: Mit Augmented Reality auf Smartphones nutzt das Spiel eine moderne Technologie, um eine realistische Spielumgebung zu schaffen. Spieler können das Spielfeld in ihrer realen Umgebung platzieren, wobei das Spiel sehr vom Chaosfaktor lebt.

Multiplayer-Erlebnis: Das Projekt ermöglicht ein intensives Multiplayer-Spiel mit Teams von 2 gegen 2. Dies fördert die soziale Interaktion und den Wettbewerb unter den Spielern, was besonders in der heutigen Gaming-Kultur beliebt ist.

Spannendes Gameplay: Das Konzept des Spiels, bei dem Spieler mit Autos einen Ball ins Tor schießen, ist einfach zu verstehen und gleichzeitig herausfordernd, was das Spiel für eine breite Zielgruppe zugänglich macht.

Lernpotenzial: Die Entwicklung eines AR-Multiplayer-Spiels erfordert komplexe Fähigkeiten in Bereichen wie 3D-Modellierung, Netzwerkkommunikation und AR-Technologien. Dieses Projekt bot eine hervorragende Möglichkeit für uns Studenten, wertvolle Erfahrungen und Fähigkeiten zu sammeln.

Insgesamt kombiniert Car Kickers AR auf geschickte Weise Technologie, Wettbewerb und Spaß, was es zu einem simplen und chaosorientierten Projekt für unsere Masterklasse machte.

Gruppendynamik

Erst vergangenes Semester konnten wir erste Erfahrungen zur gemeinsamen Zusammenarbeit in der großen Runde sammeln. Im Zuge einer Extreme Programming Week haben wir eine Progressive Web App entwickelt, mit der man Schnitzeljagden realisieren kann. Das Projekt war herausfordernd und sehr lehrreich, mehr dazu könnt ihr im Blogartikel PinGo – oder die einwöchige Entstehung eines Location-Based-Service nachlesen.

Die Personen kannten sich untereinander schon gut und Aufgaben wurden passend je nach Wunsch verteilt. Da jedoch regelmäßige Meetings fehlten und durch den Workload des laufenden Semesters wurden Aufgaben teils aus den Augen verloren. Schnell wurde klar, dass einige mehr Zeit investierten als andere, was jedoch bei solchen Projektarbeiten ein vorhersehbares Phänomen ist.

Projektmanagement

Das Projektmanagement hat Christoph übernommen, da er die Idee einbrachte. Es wurde gemeinsam beschlossen, auf die All-In-One Software Notion zu setzen, welche für Notizen, Aufgaben, Projekte und Zusammenarbeit dient. Darin wurde das gesamte Projektmanagement abgewickelt.

Das Team wurde in unterschiedliche Aufgabenbereiche eingeteilt:

Development & Physics: Mindestens ein oder zwei Teammitglieder sollten sich auf AR-Tracking und die grundlegende Spiellogik konzentrieren. Sie würden sich mit AR Foundation beschäftigen und sicherstellen, dass das Spielfeld richtig in die reale Welt projiziert wird.

Game Design: Diese Abteilung ist für die Konzeption und Gestaltung des Spiels verantwortlich. Game Designer erstellen das Spielszenario, entwerfen die Spielmechanik, Level und Charaktere, und definieren die Spielregeln.

Multiplayer: Ein oder zeit Teammitglieder sollten sich auf den Multiplayer-Aspekt spezialisieren. Das beinhaltet das Arbeiten mit Photon oder einem ähnlichen Netzwerkdienst, um die Synchronisation zwischen Spielern herzustellen.

Mindestens ein Mitglied sollte sich auch um Backend-Systeme kümmern, die für das Speichern von Spielerdaten, Fortschritten und Ranglisten notwendig sind.

User Interface & Sound Design: Ein Mitglied sollte sich auf die Benutzeroberfläche (UI) und die User Experience (UX) konzentrieren, um sicherzustellen, dass das Spiel intuitiv und ansprechend ist.

AR Development: Im Fokus steht hier die Integration der Augmented Reality Funktionalität über das Framework AR Foundation und das Beheben von möglich Problemen des eigentlich Spiels.

Nach der Teameinteilung wurden sämtliche Tasks erstellt, aufgeteilt und priorisiert:

Anfangs wurde noch mit Sprint gearbeitet:

Dies wurde jedoch schnell aus den Augen verloren, da es aufgrund anderer Prioritäten während des Semester unrealistisch war, in regelmäßigen Abständen an dem Spiel zu arbeiten.

Die Umsetzung

Das Softwareprojekt wurde in der Game-Engine Unity umgesetzt. Die AR Aspekte werden mit dem Framework AR Foundation integriert. Das ganze Projekt lässt sich sowohl für Apple als auch Android Geräte bereitstellen.

Unser Tech Stack

Szenen

Die Oberflächen teilen teilt sich auf in:

• Hauptmenü – Scene_Main_Menu
• Quickmatch – Scene_Lobby
• Auto Auswahl – Scene_Player_Selection
• Lobby – Scene_Lobby
• Gameplay – Scene_Gameplay

Player

Das Prefab für den Spieler beinhaltet neben dem eigentlichen 3D-Modell auch das Skript Car Controller, mit dem die Steuerung realisiert wurde, sowie Sound und Animationen:

Scripts

Natürlich sind auch sehr viele Scripts entstanden, grob unterteilt wurde hier das Verhalten folgender Aspekte programmiert:

• AR: Marker-Based und Markerless Verhalten
• Networking und Spawn Management
• Player Movement und Verhalten
• UI und Menü

Genutzte Tutorials

Folgende Tutorials haben maßgeblich zur Entwicklung beigetragen:

• AR Tutorial #1 (Udemy)
• AR Tutorial #2 (Youtube)
• AR Foundation Examples
• Build forAndroid Phone
• Build for Apple Phone
• Medium-Artikel
• Udemy Kurs #1
• Udemy Kurs #2

Projektevernissage

Auf der Projektevernissage erhielten wir durchweg positives Feedback zu unserem AR-Spiel “Car Kickers AR”. Die Besucher:innen fanden den Einsatz von Augmented Reality und den Multiplayer-Aspekt besonders spannend. Dank einer kurzen Erklärung durch unser Team konnten alle schnell ins Spiel einsteigen. Allerdings war die Steuerung der Fahrzeuge mit dem virtuellen Lenkrad aufgrund hoher Sensibilität problematisch, was die Spielerfahrung beeinträchtigte. Ein weiterer Kritikpunkt war, dass die Fahrzeuge gelegentlich am Rand steckenblieben, was das Spielvergnügen einschränkte. Trotzdem wurde die Möglichkeit, vor Ort direkt mit anderen Besucher:innen am virtuellen Spielfeld zu interagieren, als sehr positiv bewertet. Viele zeigten Interesse an der Möglichkeit zum Download des Spiels aus einem App Store, was für die Attraktivität unseres Spiels spricht.

Auf einem Flipchat wurde ganz analog das Feedback der Besucher:innen gesammelt. Unsere Fragen waren folgende:

Wählt euer Lieblingsfahrzeug?

In der Projektevernissage präsentierten wir eine Vielfalt von Designs für auswählbare Fahrzeuge. Besucher:innen wurden aufgefordert, ihre bevorzugten Designs zu wählen, die letztendlich im Spiel integriert werden. Vier Fahrzeuge mit einem eher verspielten Design, darunter Zug- und Schiffautos, kristallisierten sich als besonders beliebt heraus. Dieses Feedback beeinflusst maßgeblich die endgültige Auswahl und Gestaltung der Fahrzeuge im Spiel.

Wie findest du die Steuerung?

Unsere eigenen Tests und das Feedback der Besucher:innen zeigten Probleme mit unserer Steuerung. Eine gezeichnete Stimmungsumfrage mit drei Gesichtszuständen – fröhlich, neutral und traurig – ergab im Durchschnitt eher neutrale oder traurige Gesichter. Empfohlen wurde, die Steuerung zu ändern, beispielsweise von einem Lenkrad auf einen Joystick umzusteigen.

Welches Feature würdet ihr euch noch wünschen?

• Jedes Fahrzeug hat eine einzigartige Fähigkeit.
• Einen Map Marker.
• Stats, also ein bestimmter Aspekt eines fiktiven Charakters (Auto) darstellt,
• die z.B. durch Zahlen repräsentiert werden.
• Zuschauer:innen können während einem Spiel Hindernisse reinwerfen.
• Eine Rampe oder Fallen wie eine Banane als Hindernis.
• Eine Optionsmöglichkeit, wo man die Geschwindkeit der Fahrzeuge auswählen kann.
• Pilze die man sammeln kann um mit einem Fahrzeug schneller fahren zu können.
• Der Ball bounced am Rand wieder zurück, damit dieser nicht vom Feld fällt.
• Das Fahrzeug soll am Rand nicht stehen können.

Ein Demo-Video einer Testrunde bei der Projektevernissage (16.01.2024)

Herausforderungen & Learnings

Augmented Reality: Die Integration von AR gestaltet sich dank bereits etablierter Frameworks für Unity sehr leicht und ist auch in kostenlosen Video Tutorials schnell erlernbar. Das Platzieren eines Spielfeld per Marker funktionierte in einem ersten Prototypen problemlos. An der FH wurde dies jedoch schnell zum Problem aufgrund der spiegelnden Untergründe, weshalb die Spielfeld Platzierung von Malek auf ein Marker-based Modell mit QR Code umgebaut wurde.

Multiplayer Game: Die Integration von Photon lässt sich schnell anhand zahlreicher Tutorials realisieren. Da das manuelle Joinen in Lobbies etwas komplexer ist, haben wir uns vorerst für ein Quickmatch entschieden. Dabei wird automatisch ein Match gehostet, wenn noch keines existiert. Sollte bereits eines bestehen, wird automatisch gejoined und über den SpawnManager der Spieler im entsprechenden Team platziert.

Physik: Durch AR-Realisierung verhält sich die Skalierung und Physikberechnung von 3D Objekten sehr merkwürdig. Dies hatten wir nicht am Schirm und bedurfte viel Anpassungen und absurden Werten bei Geschwindigkeit und Masse.

Mögliche zukünftige Features

Links

• Repository für Car Kickers AR

The post Car Kickers AR appeared first on Mobile USTP MKL.

Im Zuge einer LVA der Masterklasse Mobile des Studiengangs Interactive Technologies, musste gemeinsam im Team eine spezifische App, innerhalb eines fixen Zeitraums, entwickelt werden. Innerhalb einer Woche galt es einen standortbasierten Dienst zu programmieren, mit dem ein User eine Kollektion von Standorten erstellen und teilen kann. Es galt also eine mobile Web-Applikation mit Front- und Backend zu erstellen, welche neben den Standortdaten auch ein komplettes Usermanagement mit Authentifizierung und Autorisierung beinhalten musste.

Am Ende der 5 Tage gab es die Auflösung, dass die Aufgabenstellung bewusst vage gehalten und in dem Zeitraum eigentlich gar nicht bewältigbar war. Das Ziel dieser Übung war vielmehr, im Team mit dem Druck umgehen zu können und die Aufgaben so gut es geht zu erledigen, auch wenn am Ende dabei ein unfertiges Produkt entsteht. In dieser intensiven Zeit musste das Team perfekt harmonieren, damit der Fokus auf den einzelnen Arbeitspaketen liegen konnte. 

Die Gruppendynamik

Eine Extreme Programming (XP) Week ist eine intensive Phase in der Softwareentwicklung, bei der Teammitglieder eng zusammenarbeiten, um hochwertige Software in kurzer Zeit zu erstellen. Die Gruppendynamik spielt während einer solchen Woche eine entscheidende Rolle und kann den Erfolg des Projekts maßgeblich beeinflussen. Hier sind einige wichtige Aspekte der Gruppendynamik während einer Extreme Programming Week:

Kommunikation

In einem XP-Team ist eine offene und effektive Kommunikation von größter Bedeutung. Teammitglieder sollten regelmäßig miteinander sprechen, Ideen austauschen und Probleme besprechen. Die Gruppendynamik wird gestärkt, wenn alle Mitglieder das Gefühl haben, dass ihre Meinungen und Vorschläge gehört und respektiert werden.

Zusammenarbeit

XP fördert die Zusammenarbeit zwischen den Mitgliedern des Teams. Während der XP Week arbeiten Entwickler, Tester und andere Fachleute eng zusammen, um Code zu schreiben, zu testen und zu verbessern. Die Gruppendynamik wird gestärkt, wenn alle Teammitglieder ihre Fähigkeiten und Erfahrungen einbringen und sich gegenseitig unterstützen.

Vertrauen

Vertrauen ist ein zentraler Aspekt der Gruppendynamik in einem XP-Team. Teammitglieder müssen sich darauf verlassen können, dass ihre Kollegen ihre Aufgaben sorgfältig erledigen und sich an Vereinbarungen halten. Das Aufbauen und Aufrechterhalten von Vertrauen ist während einer XP Week von entscheidender Bedeutung.

Flexibilität

In einer XP Week kann es zu unerwarteten Änderungen und Herausforderungen kommen. Teammitglieder müssen flexibel sein und bereit sein, sich anzupassen. Die Gruppendynamik wird gestärkt, wenn das Team gemeinsam Lösungen für Probleme findet und sich nicht von Rückschlägen entmutigen lässt.

Fokussierung

Während einer XP Week ist es wichtig, dass alle Teammitglieder das gemeinsame Ziel im Blick behalten – die Erstellung hochwertiger Software. Die Gruppendynamik wird gestärkt, wenn das Team motiviert und engagiert ist, das Ziel zu erreichen.

Feedback

Feedback ist ein wichtiger Bestandteil von XP. Teammitglieder geben sich kontinuierlich Feedback, um ihre Arbeit zu verbessern. Die Gruppendynamik wird gestärkt, wenn Feedback konstruktiv und respektvoll gegeben wird.

Insgesamt kann eine positive Gruppendynamik während einer Extreme Programming Week den Erfolg des Projekts erheblich beeinflussen. Ein gut eingespieltes Team, das effektiv kommuniziert, zusammenarbeitet und Vertrauen aufbaut, ist besser in der Lage, die Herausforderungen einer XP Week zu bewältigen und hochwertige Software zu liefern.

Der Ablauf

Nachdem die Aufgabenstellung erstmals erschlagend wirkte, haben wir unmittelbar notwendige Aufgabenbereiche definiert. Neben einem Frontend und Backend Bereich, wurde das Team auch in Web Design und DevOps aufgeteilt. 

Im Frontend Team lag der Fokus u.a. am Umsetzen des User-Interfaces sowie dem Erfassen der Daten, welche anschließend im Backend über die bereitgestellte API persistiert wurden. 

Im Design wurde neben dem Styling der UI-Komponenten auch ein Logo sowie Print-Medien entworfen. Währenddessen wurde im Dev-Ops Bereich, eine Pipeline für die kontinuierliche Integration (Continuous Integration; GitLab) und kontinuierliche Bereitstellung (Continuous Delivery; GitLab Runner), unter Nutzung eines virtuellen Docker-Containers, geschaffen.

Wie sich bereits erkennen lässt, mussten sehr komplexe Aufgaben in sehr kurzer Zeit erledigt werden. Dies veranlasste einige hochmotivierte Teammitglieder sogar dazu, mal eine Nacht durchzuarbeiten. 

Die größten Herausforderungen und Differenzen gab es jedoch anfangs in Bezug auf die Wahl eines geeigneten Technologie-Stacks. Gerade in der Tech-Branche existiert meist ein sehr subjektiver Blick auf die bevorzugte Technologie oder Sprache, was oft zu irrationalen Glaubenskriegen führt, wie es beispielsweise auch sehr oft zwischen Apple und Microsoft Produkten zu beobachten ist. Die einzige richtige Wahl in solchen Diskussionen ist dann meist auf die eigene Vorliebe und Erfahrung zurückzuführen. Dazu kommt eine gerade in der Web-Entwicklung, sich stetig verändernde Auswahl an populären Frameworks und Sprachen. So musste man sich etwa entscheiden bezüglich der Server-Sprache (PHP, Javascript, Python), der Versionsverwaltung (GitHub vs GitLab), der Bereitstellung (eigener Server, Netlify, Vercel, Firebase) und einem Datenbankmodell (NO-SQL vs SQL). Besonders schwer erwies sich jedoch die Wahl des Frontend Frameworks, da hier viele unterschiedliche Erfahrungen, Meinungen und Backgrounds zusammengestoßen sind. Während schnell klar war, dass man ein Javascript Framework verwendet, welches speziell für die Entwicklung von hybriden mobilen Apps konzipiert wurde (Ionic vs Flatter), fiel die Wahl des untergeordneten JS-Frameworks (Angular, React, Vue), aufgrund eigener Präferenzen, schwieriger.

Das 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 beim Styling im Frontend mitgewirkt. Manuel Hecht, welcher bereits einiges an 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.

Die Zusammenarbeit lief großteils positiv und jeder hat eigenverantwortlich seine Tasks übernommen. Somit konnte am Ende der Woche zwar eine etwas unfertige, aber dennoch lauffähige und für den Zeitrahmen durchaus beachtliche App präsentiert werden. Natürlich gab es einige Bugs, jedoch wurden viele der geforderten Anforderungen erfüllt.

Bei den Team-Mitgliedern, die bisher hauptsächlich mit Angular arbeiteten, musste jedoch, aus der eigenen Frustration über eine unfertige Version, das gewählte Framework Vue als Sündenbock herhalten. Gründe waren vermutlich der unvollständigen Dokumentation, der vergleichsweise kleinen Community für Vue + Ionic und der, im Vergleich zu Angular, fehlenden nötigen Erfahrung im Team geschuldet. 

Nachdem das Projekt später vor allem durch unsere Angular-Affinen Kollegen weiterentwickelt werden sollte, wurde das Grundgerüst deshalb auch durch Angular ausgetauscht. Mehr zu diesem Thema und zu einem anderen Blickwinkel ist hier zu finden.

Die Präsentation & der Ausblick

Nachdem die App durch ein komplettes Tutorial und eine Guided-Tour erweitert und durch unsere fleißigen Kollegen Malek und Lukas noch weiter optimiert wurde, haben wir uns kurzfristig dazu entschlossen, an der Projektvernissage teilzunehmen. Tatsächlich haben wir dazu auch eigene T-Shirts von Florian drucken lassen und es herrschte reges Interesse an unserem Stand (dies könnte jedoch auch an den mitgebrachten Erdbeeren von Andreas Babic gelegen haben).

Die App wird noch immer weiterentwickelt. So folgt u.a. noch Mehrsprachigkeit & eine Chat-Funktion (siehe eigenen Blogeintrag). Zudem wurde das Projekt auf GitHub verlagert um auch eine mögliche und flexiblere Zusammenarbeit nach dem Studium gewährleisten zu können.

Das Fazit

Im Nachhinein betrachtet gab es einige Differenzen aufgrund der Wahl des Frontends. Die Ursachen lagen einerseits an der persönlichen Vorliebe und an der noch unausgereiften Integration der beiden Frameworks Ionic + Vue. Hier gab es im Team am wenigsten Expertise. Beides hat bei einigen Kollegen zu Frust und einiger Wut geführt, was die Stimmung meist etwas verschlechtert hat. Sinnvoller wäre es vermutlich gewesen, entweder ganz auf Ionic zu verzichten und stattdessen das strukturierte Nuxt zu verwenden, oder auf die etablierte Variante Ionic + Angular zurückzugreifen, da es dafür im Team am meisten Erfahrung und Zustimmung gab. Die unbegründete Wut gegenüber Vue ist jedoch meiner Meinung nach eher der eigenen Vorliebe geschuldet, als wirklich zugrunde liegender objektiver Kritik. Sowohl der Kritik an der Struktur und Flexibilität kann Widersprochen werden, da es hier eher um den eigenen Programmierstil und den einzuhaltenden Programmierparadigmen geht. Zusammengefasst hängt das geeignete JS-Framework stark von den eigenen Vorlieben und dem angestrebten Projekt ab.

Allgemein war die Zusammenarbeit jedoch überdurchschnittlich gut und jeder fand sich sofort in seinem Aufgabenbereich zurecht. Die Kommunikation war stets professionell und respektvoll. Es war eine einzigartige Erfahrung und hat viel Spaß gemacht! In diesem Sinne, happy coding!

Mitwirkend: Florian Bauer

The post PinGo – oder die einwöchige Entstehung eines Location-Based-Service appeared first on Mobile USTP MKL.

Die Welt der Softwareentwicklung und IT-Infrastruktur hat sich in den letzten Jahren rasant weiterentwickelt. Eine der spannendsten Technologien, die diese Veränderung vor allem im Bereich Development Operations (Dev-Ops) vorangetrieben hat, ist Docker. Dabei handelt es sich um eine Plattform, die die Art und Weise, wie wir Anwendungen entwickeln, bereitstellen und betreiben, grundlegend verändert hat. In diesem Artikel gibts es einen kurzen Einblick in Docker und der Zugrunde liegenden Containervirtualisierung.

Was ist Docker?

Docker ist eine Containervirtualisierungsplattform, die es Entwicklern ermöglicht, Anwendungen und deren Abhängigkeiten in sogenannten Containern zu verpacken. Ein Container ist ein modularer Technologie Stack, der alles enthält, was eine Anwendung benötigt, um ordnungsgemäß zu funktionieren. Neben der eigentlichen Linux-Laufzeitumgebung, enthält er u.a. sämtliche Bibliotheken und der nötigen Konfiguration für die individuelle Anwendung. Docker-Container sind plattformunabhängig und können auf jedem System ausgeführt werden, das Docker unterstützt, unabhängig von der zugrunde liegenden Infrastruktur.

Warum Docker?

Docker bietet eine Reihe von Vorteilen, die die Softwareentwicklung und Bereitstellung erheblich erleichtern:

1. Portabilität: Docker-Container sind konsistent und überall ausführbar, sei es auf der lokalen Entwicklungsumgebung, Testumgebungen oder in der Cloud.
2. Isolation: Jeder Container ist isoliert, was bedeutet, dass Anwendungen und deren Abhängigkeiten in einer geschützten Umgebung ausgeführt werden.
3. Skalierbarkeit: Docker erleichtert das Skalieren von Anwendungen, indem neue Container schnell erstellt und gestartet werden können, um den steigenden Anforderungen gerecht zu werden.
4. Effizienz: Container sind ressourceneffizient und starten in Sekundenschnelle, was die Entwicklungs- und Bereitstellungsprozesse beschleunigt.
5. DevOps-Integration: Docker passt gut zu DevOps-Praktiken und ermöglicht die Automatisierung von Tests, Integration und Bereitstellung (Continuous Integration und Delivery)

„A container is an abstraction at the application layer that packages code and dependencies together. Instead of virtualizing the entire physical machine, containers virtualize the host operating system only.“

Docker Inc.

Wie funktioniert Docker?

Docker basiert auf der sogenannten Docker-Engine, um Container zu erstellen, zu verwalten und auszuführen. Die Docker-Engine umfasst den Docker-Daemon, der auf dem Host-System läuft, sowie die Docker-CLI, mit der Entwickler und Administratoren mit den Containern interagieren können.

Ein Docker-Image basiert auf einem Linux-Image und ist die Grundlage für die Erstellung von Containern. Ein Image ist eine schreibgeschützte Vorlage, die alle Anwendungsdateien und -abhängigkeiten enthält. Container werden aus diesen Images erstellt und können gestartet, gestoppt, verschoben und gelöscht werden.

Vor- und Nachteile

Docker und virtuelle Maschinen (VMs) sind zwei unterschiedliche Ansätze zur Bereitstellung von Anwendungen und Ressourcenisolierung in einer virtualisierten Umgebung. Jede Technologie hat ihre eigenen Vor- und Nachteile, die je nach den spezifischen Anforderungen und Zielen einer Anwendung oder eines Projekts variieren können. Hier sind einige der wichtigsten Vor- und Nachteile von Docker im Vergleich zu VMs:

Die Containervirtualisierung bietet folgende Vorteile:

• Effizienz & Ressourcen: Docker-Container teilen sich den Kernel des Host-Betriebssystems und sind daher in der Regel ressourcenschonender als VMs. Sie starten schneller und verbrauchen weniger Speicherplatz.
• Schnellere Bereitstellung: Docker-Container können in Sekunden gestartet werden, während VMs in der Regel mehr Zeit benötigen, um gestartet zu werden.
• Portabilität: Docker-Container sind in der Regel sehr fexibel und modular und können leicht zwischen verschiedenen Umgebungen verschoben werden, solange diese Docker-Engine unterstützen. Dies vereinfacht die Entwicklung und Bereitstellung von Anwendungen.
• Isolation: Docker bietet eine gewisse Isolation zwischen Containern, was dazu beiträgt, Konflikte zwischen Anwendungen zu vermeiden. Allerdings ist die Isolation nicht so stark wie bei VMs.
• Ökosystem & Community: Docker hat ein reichhaltiges Ökosystem von vorgefertigten Images und Tools, die die Entwicklung und Bereitstellung von Anwendungen beschleunigen. Zudem ist die Community mittlerweile sehr groß und unterstützt gerne.

Jedoch hat Docker auch folgende Nachteile gegenüber VM’s

• Sicherheit: Docker-Container teilen sich den Kernel des Host-Betriebssystems, was bedeutet, dass sie nicht so stark isoliert sind wie VMs. Dies kann zu Sicherheitsproblemen führen, wenn Container unsicher konfiguriert sind.
• Variation von Betriebssystemen: Docker ist in der Regel auf Anwendungen beschränkt, die das gleiche Betriebssystem (Linux) verwenden. VMs können verschiedene Betriebssysteme innerhalb desselben Hosts ausführen.
• Komplexere Anpassung: Das Anpassen von Docker-Containern kann komplexer sein als das Anpassen von VMs, insbesondere wenn spezielle Kernel-Module oder Hardware-Zugriff erforderlich sind.

Anwendungsfälle für Docker

Docker findet in einer Vielzahl von Anwendungsfällen Verwendung:

1. Microservices-Architekturen: Docker erleichtert die Implementierung von Microservices, indem jede Komponente in einem eigenen Container isoliert wird.
2. Continuous Integration/Continuous Deployment (CI/CD): Docker ermöglicht die Erstellung von CI/CD-Pipelines, um Anwendungen effizienter und zuverlässiger bereitzustellen.
3. Testumgebungen: Entwickler können problemlos unterschiedliche Testumgebungen erstellen und replizieren.
4. Skalierbare Webanwendungen: Docker ermöglicht das einfache Hinzufügen oder Entfernen von Anwendungskomponenten je nach Bedarf.

Ökosystem

Docker besitzt mittlerweile ein ausgiebiges Ökosystem welches hier im Groben beschrieben wird:

• Docker Desktop (one-click installer)
  • Docker Engine: Benutzerschnittstelle (Client-Server Anwendung & CLI)
  • Docker Compose (für muli-container Applikationen als YAML file)
  • Docker Buildx (Images erstellen)
    …
• Docker Hub: Bibliothek und Verzeichnisvon Images

• Docker Swarm, Kubernetes:multiple Host support

Fazit

Docker hat die Art und Weise, wie wir Software entwickeln und bereitstellen, grundlegend verändert. Die Fähigkeit, Anwendungen in Containern zu verpacken, bietet Portabilität, Skalierbarkeit und Isolation, die in der heutigen schnelllebigen Welt der Softwareentwicklung von entscheidender Bedeutung sind.

Quellen

• Docker: https://www.docker.com/
• Docker Erklärung 1 & Linux Container: https://www.redhat.com/de/topics/containers/what-is-docker
• Docker Erklärung 2 & Aufbau: https://k21academy.com/docker-kubernetes/docker-tutorial/
• Monolith vs Microservices: https://k21academy.com/docker-kubernetes/monolithic-vs-microservices/
• VM vs Docker Performance 1: https://stackoverflow.com/questions/21889053/what-is-the-runtime-performance-cost-of-a-docker-container
• VM vs Docker Performance 2: https://www.aquasec.com/cloud-native-academy/docker-container/docker-containers-vs-virtual-machines/#:~:text=Docker%20containers%20are%20process%2Disolated,fewer%20resources%20than%20a%20VM.
• Vor- und Nachteile: https://www.computerwoche.de/a/die-wichtigsten-vor-und-nachteile-von-docker-containern,3546671

The post Docker – Einführung in die Welt der Container appeared first on Mobile USTP MKL.