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.

Was ist FLAME?
FLAME ist eine auf Flutter zugeschnittene Open-Source-Spiele-Engine, die Entwicklern ein umfassendes Set an Werkzeugen und Hilfsmitteln zur Verfügung stellt, um fesselnde und immersive Spielerlebnisse zu schaffen. FLAME baut auf der robusten Rendering-Engine von Flutter auf und vereinfacht die Spieleentwicklung, indem es gebrauchsfertige Komponenten, Animationen, Physik und vieles mehr bereitstellt.

Hauptmerkmale von FLAME:

1. Plattformübergreifende Kompatibilität:
   FLAME ermöglicht es Entwicklern, Spiele zu entwickeln, die nahtlos auf mehreren Plattformen laufen, einschließlich Android, iOS, Web und Desktop, dank der inhärenten plattformübergreifenden Unterstützung von Flutter.
2. Performance-Optimierung:
   Durch die Nutzung der effizienten Rendering-Engine von Flutter optimiert FLAME die Spielleistung und sorgt für flüssige Animationen, eine reaktionsschnelle Steuerung und minimale Latenzzeiten, selbst auf Geräten mit unterschiedlicher Hardwareausstattung.
3. Umfangreiche Animationsunterstützung:
   FLAME vereinfacht die Integration komplexer Animationen und visueller Effekte in Spiele und ermöglicht es Entwicklern, mit Leichtigkeit dynamische und visuell ansprechende Spielerlebnisse zu schaffen.
4. Integration von Physik-Engines:
   Mit der eingebauten Unterstützung für Physik-Engines wie Box2D und Flame-Flare erleichtert FLAME die Implementierung realistischer Physiksimulationen und ermöglicht es Entwicklern, interaktive Umgebungen und lebensechte Gameplay-Elemente zu erstellen.
5. Gemeinschaft und Ökosystem:
   FLAME profitiert von einer aktiven und unterstützenden Gemeinschaft von Entwicklern, die Plugins, Erweiterungen und Ressourcen beisteuern, um die Fähigkeiten der Engine zu verbessern. Dieses florierende Ökosystem fördert die Zusammenarbeit und Innovation bei der Entwicklung von Flutter-Spielen.

Warum FLAME?

1. Schnelles Prototyping:
   Die intuitiven APIs und vorgefertigten Komponenten von FLAME beschleunigen den Spielentwicklungsprozess und ermöglichen es Entwicklern, Ideen schnell zu prototypisieren und Spielmechaniken zu verbessern.
2. Nahtlose Integration:
   Als Flutter-native Spiele-Engine lässt sich FLAME nahtlos in bestehende Flutter-Projekte integrieren, so dass Entwickler vertraute Tools und Workflows für die Spieleentwicklung nutzen können.
3. Leistung und Optimierung:
   Durch die Nutzung der Leistungsoptimierungen und Rendering-Fähigkeiten von Flutter ermöglicht FLAME Entwicklern die Erstellung von Spielen mit hoher Wiedergabetreue, die eine außergewöhnliche Leistung auf einer Vielzahl von Geräten bieten.

The post FLAME – EINE AUF FLUTTER BASIERENDE SPIEL-ENGINE appeared first on Mobile USTP MKL.

Was ist Datenreplikation?
Bei der Datenreplikation werden doppelte Kopien von Daten an mehreren Orten erstellt und verwaltet. Diese Kopien werden regelmäßig synchronisiert, um die Konsistenz zwischen allen Replikaten zu gewährleisten. Das Hauptziel der Datenreplikation ist die Verbesserung der Datenverfügbarkeit, der Fehlertoleranz und der Disaster-Recovery-Funktionen.

Wie funktioniert die Datenreplikation?
Die Datenreplikation umfasst in der Regel die folgenden Schritte:

• Erste Synchronisierung: Zunächst werden alle Daten von einem Quellstandort (oft als primärer oder Master-Knoten bezeichnet) auf einen oder mehrere Zielstandorte (Replikate) kopiert.
• Kontinuierliche Synchronisierung: Alle an den Daten in der Quelle vorgenommenen Änderungen werden nahezu in Echtzeit an die Replikate weitergegeben. Dadurch wird sichergestellt, dass alle Kopien konsistent bleiben.
• Konfliktlösung: In Fällen, in denen widersprüchliche Aktualisierungen gleichzeitig an verschiedenen Orten stattfinden, werden Mechanismen eingesetzt, um Konflikte aufzulösen und die Datenintegrität zu wahren.

Warum ist Datenreplikation wichtig?

1. Erhöhte Verfügbarkeit:
   Die Datenreplikation stellt sicher, dass die Benutzer auch dann noch auf die Daten zugreifen können, wenn eine Kopie der Daten aufgrund von Hardwareausfällen, Netzwerkproblemen oder anderen Störungen nicht mehr verfügbar ist. Dadurch werden Ausfallzeiten minimiert und ein kontinuierlicher Betrieb gewährleistet.
2. Wiederherstellung im Katastrophenfall:
   Im Falle eines katastrophalen Ausfalls oder einer Naturkatastrophe, die einen Standort betrifft, können replizierte Daten, die an anderen geografisch verteilten Standorten gespeichert sind, für die Notfallwiederherstellung verwendet werden, was eine rasche Wiederherstellung der Dienste ermöglicht.
3. Lastverteilung:
   Replizierte Daten können strategisch auf mehrere Server oder Rechenzentren verteilt werden, um die Last auszugleichen und die Leistung zu verbessern, insbesondere in Umgebungen mit vielen Lese-/Schreibvorgängen.
4. Geografische Redundanz:
   Durch die Replikation von Daten über geografisch unterschiedliche Standorte hinweg können Unternehmen Risiken im Zusammenhang mit lokalen Katastrophen, geopolitischen Problemen oder Netzwerkausfällen mindern.

Arten der Datenreplikation:

1. Synchrone Replikation:
   Bei der synchronen Replikation werden Datenänderungen an alle Replikate übertragen, bevor der Abschluss einer Transaktion bestätigt wird. Die synchrone Replikation gewährleistet zwar Konsistenz, kann aber aufgrund des Wartens auf Bestätigungen von allen Replikaten zu Latenzzeiten führen.
2. Asynchrone Replikation:
   Die asynchrone Replikation bietet mehr Flexibilität, da keine sofortige Synchronisierung erforderlich ist. Änderungen werden an die Replikate weitergegeben, nachdem der primäre Datenspeicher die Transaktion bestätigt hat. Sie bietet zwar eine geringere Latenzzeit, birgt aber ein geringes Risiko von Datenverlusten, wenn das Primärsystem ausfällt, bevor die Änderungen repliziert werden.

The post Datenreplikation: Allgemeine Einführung appeared first on Mobile USTP MKL.

Introduction

In the world of app development, staying ahead can be a challenge. Firebase, Google’s comprehensive app development platform, steps in to simplify the process. In this article, we’ll explore Firebase and its practical features that make it a popular choice for universities and developers.

Understanding Firebase

Firebase is your all-in-one companion for mobile and web app development, offering a suite of tools and services. Launched by Google in 2011, Firebase has grown into a robust ecosystem that streamlines app development. Let’s take a practical look at some of Firebase’s key features:

1. Realtime Database: Firebase’s Realtime Database ensures data synchronization in real-time across multiple devices. This feature is particularly useful for applications requiring instant data updates, such as collaborative tools.
2. Authentication: Firebase simplifies user authentication, supporting secure sign-in methods like email/password, social media logins, and anonymous authentication. Ensuring user data security has never been easier.
3. Web Hosting: Firebase Hosting offers a straightforward solution for web app deployment, providing speed and security. Its content delivery network (CDN) ensures fast loading times globally.
4. Cloud Functions: Firebase Cloud Functions automates tasks, handles notifications, and integrates with third-party services. It’s a handy tool for adding functionality to your app without the need for complex server setups.
5. Cloud Firestore: Cloud Firestore is a flexible NoSQL database, ideal for managing complex data structures and queries in your app.
6. Cloud Storage: Firebase Cloud Storage simplifies file storage and management for media files like images and videos.
7. Analytics: Firebase Analytics provides valuable insights into user behavior and app performance through user-friendly dashboards.
8. Cloud Messaging: Firebase Cloud Messaging (FCM) facilitates push notifications for iOS, Android, and web users, re-engaging your audience effectively.
9. Machine Learning: Firebase ML Kit simplifies machine learning integration, allowing developers to add features like image recognition and language translation to their apps with ease.
10. Authentication: Firebase offers robust and secure authentication methods, accommodating various user preferences.

The post A Closer Look at Firebase: Powering Modern App Development appeared first on Mobile USTP MKL.

Im 1. Semester haben wir uns auf die Entwicklung der Android-App konzentriert.

Team | Rollen

• Manuel Hecht
  • Mediathek API (Backend)
  • Home Screen mit Sendungsübersicht
  • Sendungssuche
  • Testen
• Mohamed Abd-El-Rehim
  • Userverwaltung | Login & Registrierung
  • Firebase Verwaltung
  • Testen

• Florian Bauer
  • UI-Design der App
  • Videoplayer-Integration
  • Testen

Projektorganisation

Wir verwenden für unsere Projekt GitLab auf dem FH-internen Server.

GitLab | Flimmerkiste (Link)

Entwicklung

Für die Umsetzung von unserem Semesterprojekt haben wir uns für Flutter, das Entwicklungs-Kit von Google entschieden.

Flutter

Flutter ist ein Open-Source-Framework für die Entwicklung mobiler Anwendungen, mit dem Entwickler hochwertige, plattformübergreifende mobile Anwendungen mit einer einzigen Codebasis erstellen können. Das Hauptmerkmal von Flutter ist die Fähigkeit, schöne, reaktionsfähige und schnelle Anwendungen zu erstellen, die einfach zu warten sind.

Wir wollen unsere Anwendung für möglichst viele Plattformen in Zukunft anbieten, diese sollen von Semester zu Semester ergänzt werden.

Das Erlernen einer Cross-Platform-Entwicklungsumgebung war ein wichtiger Entscheidungsgrund für alle Projektmitglieder. Bis vor Projektbeginn hatte kein Mitglied Berührungspunkte mit so einer All-in-One Umgebung.

Der klare Nachteil war die längere Einschulungsphase bei allen Teammitglieder, ein Flutter-Workshop wäre hier hilfreich gewesen. Zum Beispiel konnten gewisse Verhaltensweisen von Flutter nicht nachvollzogen (z.B. States) werden.

Design

Fokussierung des Designs erfolgte fürs 1. Semester auf die Android Variante.

Figma-Designentwurf V1

Backend

Datenbank | Google Firebase

Für unsere Benutzerverwaltung verwenden wir Google Firebase als Datenbank. Derzeit werden folgende Tabelle/Daten gespeichert:

• Benutzer:innen
  • Mail, Name

• Favoriten = Sendungen
  • Kanal, Sendungstitel

MediathekView API

Als Datenquelle verwenden wir die API von MediathekView. Diese darf aus rechtlichen Gründen leider nicht auf unserer Seite in einem eigenen Backend abgespeichert werden Aus diesem Grund holen wir uns nur temporär per API-Abfage die jeweiligen benötigten Daten.

MediathekView durchsucht die Online-Mediatheken verschiedener öffentlich-rechtlicher Sender und listet diese gefundenen Sendungen auf. Es werden die Videobeiträge aus den Mediatheken direkt verwendet, das heißt das Hosting findet bei den jeweiligen Sendern statt.

MediathekView kann aus diesem Grund nur Sendungen anzeigen, die in den Mediatheken der Sender selbst noch als Videos angeboten werden.

Die Sendungen vom ORF sind aus rechtlichen Gründen nur aus den letzten sieben Tagen verwendbar.

Mediathek View Web (Link)

Derzeit werden die Mediatheken der folgenden Sender unterstützt:

• ARD (Das Erste)
• Arte (deutsch, englisch, französisch, spanisch, italienisch und polnisch)
• alpha
• BR (Bayerischer Rundfunk)
• HR (Hessischer Rundfunk)
• MDR (Mitteldeutscher Rundfunk)
• NDR (Norddeutscher Rundfunk)
• RBB (Rundfunk Berlin-Brandenburg)
• rbtv (radiobremen)
• SR (Saarländischer Rundfunk)
• SWR (Südwestrundfunk)
• WDR (Westdeutscher Rundfunk)
• ZDF (Zweites Deutsches Fernsehen)
• ZDFinfo
• ZDFneo
• zdf-tivi
• Gemeinschaftsprogramme von ARD und ZDF
• 3Sat
• Funk
• Kika (Kinderkanal von ARD und ZDF)
• Phoenix
• DW TV (Deutsche Welle)
• ORF (Österreichischer Rundfunk)
• SRF (Schweizer Rundfunk) inkl. Podcasts

Eine Abfrage an die MediathekViewWeb API liefert folgende Infos:

• Kanalname (channel)
• Sendungsname (topic)
• Sendungstitle (title)
• Sendungsbeschreibung (description)
• Zeitstempel (timestamp,filmlisteTimestamp)
• Sendungsdauer (duration)
• Dateigröße (size)
• Sendungslink auf die Website des jeweiligen Senders (url_website)
• Untertitel zur Sendung (url_subtitle)
• Videolink in mittlerer Qualität (url_video)
• Videolink in niedrigster Qualität (url_video_low)
• Videolink in hoher Qualität (url_video_high)
• MediathekView-ID (id)

Ein Beispiel aus der ARD-Mediathek:

MediathekViewWeb API Samplecode (Link)

Für unsere jetzige Implementierung verwenden wir zwei verschiedene Queries:

• Query für den Home Screen
  • Abfrage nach allen Videos eines Senders (channel).
  • Es werden die aktuellsten 10 Sendungen (DESC) des Kanals als Ergebnis geliefert.

• Query für die Suche nach einer Sendung
  • Abfrage erfolgt nach dem Sendungstitle (title).
  • Es werden die aktuellsten 10 Sendungen (DESC) mit einer Übereinstimmung des Suchwortes als Ergebnis geliefert.

Folgende Felder erhalten wir als Antwort (JSON), die wir für das Frontend weiterverarbeiten.

• Feld “topic”:
• Feld “title”:
• Feld “channel”:
• Feld “url_video”:
• feld “filmlisteTimestamp”:
• feld “duration”
• feld “description”

Funktionen

Home Screen

Die aktuellsten zehn Sendungen ausgewählter Kanäle werden als scrollbare Listenzeile angezeigt.

Suche nach Sendungstitel

Es werden die zehn neuesten Ergebnisse gezeigt.

Bei einem Ergebnisumfang größer zehn, können die Ergebnisse erweitert werden.

Benutzerprofil

Die Flimmerkiste enthält eine Benutzerprofil-Funktion. Mit dieser Funktion kann man sein persönliches Konto in der App erstellen und verwalten. Mit einem Benutzerprofil kann man Lieblingssendungen speichern. Das Profil kann folgende Daten anpassen:

• Profilfoto
• Mailadresse
• Name
• Passwort

Und es können Sendungen favorisiert werden.

Video-Player

Der Hauptbestandteil von Flimmerkiste ist das Video-Player, welcher die jeweiligen Sendungsvideos des Kanals abspielt. Um auf die Anforderungen des Players einzugehen, wird zuerst eine Übersicht der Spezifikationen der abzuspielenden Videos aufgelistet.

Alle Videos aus den Mediatheken werden in zwei Varianten (MP4 & HLS-Stream) angeboten.

Encodierung der Videos:

• Container: MPEG-4
• Video: AVC (H264)
• Audio: AAC LC (Stereo)

MP4

Niedrige Qualität

Mittlere Qualität

Höchste Qualität

HLS-Stream

Videos von ORF und SRF werden nicht als *.mp4 angeboten, sondern nur als HLS-Stream zur Verfügung gestellt. Eine Manifest-Datei (*.m3u8) definiert in welcher Qualität das Video abgespielt wird.

ORF:

Niedrige Qualität

#EXT-X-STREAM-INF:BANDWIDTH=1089858,CODECS="avc1.100.30,mp4a.40.2",RESOLUTION=640x360

Mittlere Qualität

#EXT-X-STREAM-INF:BANDWIDTH=2123246,CODECS="avc1.100.31,mp4a.40.2",RESOLUTION=960x540

Höchste Qualität

#EXT-X-STREAM-INF:BANDWIDTH=3417151,CODECS="avc1.100.31,mp4a.40.2",RESOLUTION=1280x720

SRF:

Die Manifest-Datei (*.m3u8) verweist auf die einzelnen Videosegmente (.ts) in der jeweiligen Qualitätsstufe (Low, Mid, High).

#EXTINF:4.840,

segment-1-f4-v1-a1.ts

#EXTINF:6.000,

segment-2-f4-v1-a1.ts

Der Player muss folgenden Anforderungen in erster Phase erfüllen:

• Abspielen von Videos, die als *.mp4 und *.m3u8 gehostet sind.
• Besitzt Basis-Steuerungselemente: Zeitleiste, Lautstärkeregelung, Play-/Pausefunktion und Vollbildmodus
• Unterstützung für Android & iOS, idealerweise auch Web
• Anpassbare Playerelemente für zukünftige Features wie z.B. die Einstellung der Videoqualität per Steuerungselement, Untertiteleinblendung

Die Flutter-Community hat bereits einige nützliche Player-Plugins für Flutter entwickelt. Diese wären:

video_player

• https://pub.dev/packages/video_player
• Dieser Player ist der stabilste (Version 2.5.2) von allen getesteten Plugins.
• Alle notwendigen Plattformen werden unterstützt.
• Nur Basisfunktionen verfügbar, kaum angepasste Funktionen verfügbar.
• Nur *.mp4 gehostete Videos abspielbar.

chewie

• https://pub.dev/packages/video_player
• Ein Video-Player mit erweiterten Steuerungselementen.
• Alle notwendigen Plattformen werden unterstützt.
• Erweiterbare Steuerungselemente verfügbar.
• HLS-Videostream und MP4-Videos abspielbar.
• Das Plugin basiert auf video_player.
  

better_player

• https://pub.dev/packages/better_player
• Instabiler Player-Plugin mit den umfangreichsten Funktionen.
• Unterstützung von Android & iOS
• Alle Videoformate abspielbar.
• Umfangreiches Set an Steuerungselementen.
• Das Plugin basiert auf chewie.

chewie wurde als Video-Player für die erste Phase gewählt. Es konnten alle Use-Cases an Mediatheken-Videos damit problemlos abgespielt werden.

Plattform-Verhalten:

• Android: Reibungslose Verwendung
• iOS: Konnte derzeit nicht getestet werden
• Web: Problem mit Vollbildmodus, beim Verlassen wird Video wieder von Beginn abgespielt

Learnings

• Sammlung erster Erfahrungen mit Cross-Plattform-Entwicklung (Flutter)
• Allgemeiner Einstieg in Programmiersprache Dart 
• State-Management in Flutter, zu Beginn einige Schwierigkeiten mit Verständnis
• Vertiefung des Google Firebase Wissen (Auth & Storage)
• Videoplayer-Handling auf den verschiedenen Plattformen

Roadmap

• Stabile Web-Version
• iOS-Version
• Videoqualität per Player einstellbar
• Einbindungsmöglichkeiten von Untertiteln
• Navigation Bar zu einer verbesserten Navigation
• Code Abstraktionen
• Angepasste Bilder für Sendungen
• Auswahl der Sender für Home-Screen
• Empfehlungen für Sendungen aufgrund von Favoriten
• Erstellen von Playlisten (Watch-Listen)
• Verbesserte Suche mit Filtermöglichkeiten

Fazit

Die Flimmerkiste ist eine hervorragende Lösung für alle, die in einer App das Videoangebot aller deutschsprachigen öffentlich-rechtlichen TV-Sender sehen wollen. Die Funktionen der App, einschließlich der Wiedergabe eines Videos, eines Benutzerprofils und einer Liste von Kanälen in Kategorien, bietet ein umfassendes und personalisiertes Medienerlebnis. Mit der weiteren Entwicklung der App wird sie zu einem noch wertvolleren Werkzeug für Medienkonsumenten werden.

The post Flimmerkiste | Semesterprojekt appeared first on Mobile USTP MKL.

Widgets

Eine der Kernkomponenten von Flutter ist das Widgetsystem. In Flutter ist alles ein Widget – von grundlegenden UI-Elementen wie Schaltflächen und Textfeldern bis hin zu komplexeren Komponenten wie Animationen und 3D-Grafiken. Dies macht es einfach, eine konsistente Benutzeroberfläche zu erstellen, die in hohem Maße anpassbar und flexibel ist.

Das Widgetsystem von Flutter ist außerdem sehr leistungsfähig. Die Widgets werden mit der Skia-Grafik-Engine erstellt, die selbst auf älteren Geräten flüssige Animationen und Übergänge ermöglicht. Dadurch fühlen sich Flutter-Apps schnell und reaktionsschnell an, selbst wenn es um komplexe Benutzeroberflächen geht.

Hot Reload

Eines der am meisten diskutierten Features von Flutter ist die Hot Reload”-Funktion. Hot Reload” ermöglicht es Entwicklern, Änderungen an ihrem Code in Echtzeit zu sehen, ohne die gesamte Anwendung neu kompilieren zu müssen. Dies kann bei der Arbeit an UI-Komponenten unglaublich nützlich sein, da die Entwickler Änderungen sofort sehen und ihre Entwürfe schnell überarbeiten können.

Hot Reload macht es auch einfacher, Fehler zu finden und Probleme schnell zu beheben. Anstatt darauf zu warten, dass die Anwendung nach jeder Codeänderung neu kompiliert wird, können Entwickler die Auswirkungen ihrer Änderungen sofort sehen und bei Bedarf Anpassungen vornehmen.

Plattformübergreifende Entwicklung

Ein weiterer großer Vorteil von Flutter ist die Möglichkeit, plattformübergreifende Anwendungen zu erstellen. Mit Flutter können Entwickler den Code einmal schreiben und ihn sowohl auf Android- als auch auf iOS-Geräten einsetzen. Dies kann viel Zeit und Mühe sparen, da die Entwickler nicht für jede Plattform eine eigene Codebasis schreiben müssen.

Flutter ermöglicht auch eine einfache Integration mit anderen Plattformen und Technologien. So können Flutter-Apps beispielsweise mit Firebase für Cloud-basierte Funktionen oder mit Bibliotheken von Drittanbietern für zusätzliche Funktionen integriert werden.

Community-Unterstützung

Flutter hat eine große und aktive Gemeinschaft von Entwicklern, die ständig neue Plugins, Tools und Ressourcen erstellen, um die Entwicklung zu vereinfachen. Das bedeutet, dass sowohl für Entwickler, die gerade erst mit Flutter anfangen, als auch für erfahrenere Entwickler, die ihr Wissen erweitern möchten, zahlreiche Ressourcen zur Verfügung stehen.
Es gibt auch viele Bibliotheken und Tools von Drittanbietern für Flutter, die bei Aufgaben wie Datenvisualisierung, Datenbankintegration und mehr helfen können. Dies bedeutet, dass Entwickler hochgradig angepasste Anwendungen mit einer breiten Palette von Funktionen und Merkmalen erstellen können.

Fazit

Zusammenfassend lässt sich sagen, dass Flutter ein leistungsfähiges und flexibles Framework für die Entwicklung mobiler Apps ist, das eine breite Palette von Funktionen und Vorteilen bietet. Sein einzigartiger Ansatz für die UI-Entwicklung, die Hot-Reload-Funktionalität, die plattformübergreifenden Fähigkeiten und die aktive Community machen es zu einer ausgezeichneten Wahl für Entwickler, die moderne, effiziente mobile Apps erstellen möchten.

Ob Sie nun ein erfahrener Entwickler sind oder gerade erst anfangen, Flutter ist auf jeden Fall eine Überlegung wert für Ihr nächstes mobiles App-Projekt. Mit seinem leistungsstarken Widgetsystem, der performanten Grafik-Engine und der umfangreichen Bibliothek an Ressourcen macht es Flutter einfach, schöne und leistungsstarke Apps zu erstellen, die sowohl auf Android- als auch auf iOS-Geräten laufen können.

The post <strong>Flutter für Mobile App Development</strong> appeared first on Mobile USTP MKL.

AR fällt unter die Kategorie “Gemischte Realität” auf dem Kontinuum der Virtualität, das von der realen Welt auf der einen Seite bis zu vollständig immersiven virtuellen Umgebungen auf der anderen Seite reicht. Mixed Reality ist eine Art von virtueller Realität, bei der digitale Informationen über die reale Welt gelegt werden, wodurch eine erweiterte Version der Realität entsteht. Mixed Reality kann dazu verwendet werden, die reale Welt durch digitale Informationen und Grafiken zu ergänzen und so eine ansprechende und interaktive Lernerfahrung zu schaffen.

Herausforderungen von AR im Bildungswesen

• Kosten: Eine der größten Herausforderungen von AR im Bildungsbereich sind die Kosten. Die Hard- und Software, die für die Implementierung von AR im Klassenzimmer erforderlich ist, kann sehr teuer sein, was es für viele Schulen und Bildungseinrichtungen schwierig macht, sie sich zu leisten.
• Technische Komplexität: Die Implementierung von AR kann eine technisch komplexe Technologie sein, die eine Herausforderung für Pädagogen darstellen kann, die nicht über das technische Fachwissen verfügen, um sie effektiv einzusetzen.
• Infrastruktur: AR erfordert eine robuste und zuverlässige Infrastruktur, einschließlich einer Hochgeschwindigkeits-Internetverbindung und fortschrittlicher Computerressourcen. Nicht alle Schulen verfügen über die nötige Infrastruktur, um den Einsatz von AR im Klassenzimmer zu unterstützen.

Vorteile von AR im Unterricht

Fesselnd und interaktiv: Die AR-Technologie kann das Lernen ansprechender und interaktiver gestalten und es den Schülern ermöglichen, komplexe Konzepte auf eine Weise zu erkunden, die sowohl Spaß macht als auch lehrreich ist.

Immersive Lernerfahrungen: AR kann immersive Lernerfahrungen schaffen, die es den Schülern ermöglichen, mit digitalen Informationen in der realen Welt zu interagieren, und ihnen so helfen, komplexe Konzepte besser zu verstehen.

Personalisiertes Lernen: Mit AR können personalisierte Lernerfahrungen geschaffen werden, die auf die individuellen Bedürfnisse und Lernstile der Schüler eingehen.

Realitätsnahe Anwendungen: AR kann Schülern helfen zu verstehen, wie die Konzepte, die sie im Klassenzimmer lernen, in der realen Welt angewandt werden, was ihre Lernmotivation und ihr Gesamtverständnis des Themas steigern können.

AR kann in einer Vielzahl von Fächern eingesetzt werden, darunter:

Wissenschaft: AR kann verwendet werden, um interaktive Simulationen wissenschaftlicher Experimente zu erstellen, die es den Schülern ermöglichen, wissenschaftliche Konzepte in einem virtuellen Labor zu erforschen.

Geschichte: AR kann verwendet werden, um virtuelle Rundgänge durch historische Stätten zu erstellen, die es den Schülern ermöglichen, historische Ereignisse und Orte auf eine immersivere Weise zu erkunden.

Kunst: AR kann verwendet werden, um digitale Informationen über Kunstwerke zu legen, die den Schülern zusätzliche Informationen und Kontext über das Kunstwerk liefern.

Geografie: AR kann verwendet werden, um interaktive Karten zu erstellen, die es den Schülern ermöglichen, geografische Merkmale auf ansprechendere Weise zu erkunden.

Fazit

Obwohl AR eine Reihe von Herausforderungen mit sich bringt, sind die potenziellen Vorteile dieser Technologie im Bildungsbereich beträchtlich. AR ist in der Lage, das Lernen ansprechender und interaktiver zu gestalten, immersive Lernerfahrungen zu schaffen und den Schülern zu helfen, reale Anwendungen der im Unterricht erlernten Konzepte zu verstehen. Bei sorgfältiger Planung und Umsetzung kann AR ein leistungsstarkes Instrument zur Verbesserung der Lernerfahrung in einer Vielzahl von Fächern sein.

The post AR in der Ausbildung (SOTA) appeared first on Mobile USTP MKL.