The goal

Our goal was to create a prototype that plays media that isn’t just linear. We wanted a way to inject logic, like quizzes, info overlays, and decision points, directly into the media timeline. It doesn’t matter if it’s a certain position on a text or a specific time in a video.

To make this work across different platforms, we first had to define a standardized data structure. This led to the development of the WIMP format.

Another important part of this project is a media player that is highly mobile optimized and easy to understand, so that even a five year old can experience a WIMP interactive medium.

The project is split into two distinct layers: the data standard and the playback engine.

Architecture

1. The Format

Before building the player, we needed a predictable way to describe the media content. For this, we had to design a format that incooperates everything a WIMP user needs and will need in the future. This forward thinking and upgradeability of our format was one of the main challenges that we faced during this Wild Week. We ended up with an open-format JSON schema that defines a graph of “media nodes.” Each node can contain:

• Timed Events: Quizzes, info texts, external links and more that can be triggered at specific timestamps.
• Choice Events: Branching points that tell the player which media node to load next.

By publishing this as an NPM package, we integrated a validator directly into the workflow, ensuring that any content loaded by the player is structurally sound and free of dead ends.

Here’s an example format:

{
    "version_number": "0.0.1",
    "format_type": "wimp",
    "meta_data": {
        "id": "7f6b6d2d-8fb7-4bd4-9f2a-5a1e2d7c6b42",
        "created_at": "2026-04-23T00:00:00+02:00",
        "updated_at": "2026-04-23T00:00:00+02:00",
        "author": "Melanie Maier",
        "title": "What If Dinosaurs Still Lived Today?",
        "start_media_id": "dinosaur_intro_text",
        "description": "An interactive documentary exploring the hypothetical scenario of dinosaurs still existing in the modern world.",
        "tags": [
            "dinosaurs",
            "interactive documentary",
            "hypothetical scenario",
            "modern world"
        ]
    },
    "media": [{
            "id": "dinosaur_intro_text",
            "title": "Introduction",
            "type": "text",
            "resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaurs_intro.html",
            "timeline_events": [{
                "type": "choice",
                "title": "Do you want hear about dinosaurs?",
                "position": {
                    "type": "seconds",
                    "value": 0
                },
                "event_context": {
                    "choices": [{
                        "label": "Start the journey",
                        "next_media": "dinosaur_audio1"
                    }]
                }
            }]
        },
        {
            "id": "dinosaur_audio1",
            "title": "Audio 1",
            "type": "audio",
            "resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaur_1.mp3",
            "timeline_events": [{
                    "type": "quiz",
                    "title": "What would be the most likely immediate response from modern states once the existence of large living dinosaurs was confirmed?",
                    "position": {
                        "type": "seconds",
                        "value": 5
                    },
                    "event_context": {
                        "answers": [{
                                "label": "Opening all affected regions to tourism",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "Establishing exclusion zones and interdisciplinary crisis task forces",
                                "is_correct": true,
                                "feedback": ""
                            },
                            {
                                "label": "Immediately classifying all species as domesticated animals",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "Suspending all ongoing scientific research",
                                "is_correct": false,
                                "feedback": ""
                            }
                        ]
                    }
                },
                {
                    "type": "quiz",
                    "title": "Why would the discovery of living dinosaurs be more than just a zoological sensation?",
                    "position": {
                        "type": "seconds",
                        "value": 30
                    },
                    "event_context": {
                        "answers": [{
                                "label": "Because it would automatically replace all existing animal species",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "Because modern cities are already designed for giant reptiles ",
                                "is_correct": false,
                                "feedback": ""
                            }, {
                                "label": "Because it would challenge long-held assumptions about ecology, history, and risk planning",
                                "is_correct": true,
                                "feedback": "Still too high. Fast fashion is often discarded quickly."
                            },
                            {
                                "label": "Because dinosaurs could only survive in artificial reserves ",
                                "is_correct": false,
                                "feedback": ""
                            }
                        ]
                    }
                },
                {
                    "type": "choice",
                    "title": "Do you want to hear more about this scenario?",
                    "position": {
                        "type": "seconds",
                        "value": 60
                    },
                    "event_context": {
                        "choices": [{
                            "label": "Yes please",
                            "next_media": "dinosaur_audio2"
                        }]
                    }
                }
            ],
            "description": "Quick cuts of clothing store racks, online shopping scrolls, and factory workers sewing.",
            "media_length": 76
        },
        {
            "id": "dinosaur_audio2",
            "title": "Dinosaur 2",
            "type": "audio",
            "resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaur_2.wav",
            "timeline_events": [{
                    "type": "quiz",
                    "title": "Which dinosaur group would likely be the hardest to control in a modern civilization?",
                    "position": {
                        "type": "seconds",
                        "value": 5
                    },
                    "event_context": {
                        "answers": [{
                                "label": "Small to medium-sized, intelligent, highly adaptable predators",
                                "is_correct": true,
                                "feedback": ""
                            },
                            {
                                "label": "Very large, slow-moving herbivores",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "Flightless species living only in remote areas",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "Species with strongly territorial but fixed-range behavior",
                                "is_correct": false,
                                "feedback": ""
                            }
                        ]
                    }
                },
                {
                    "type": "quiz",
                    "title": "Which societal conflict would be most likely if humans and dinosaurs had to coexist permanently?",
                    "position": {
                        "type": "seconds",
                        "value": 35
                    },
                    "event_context": {
                        "answers": [{
                                "label": "Whether dinosaurs should be included in school curricula ",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "The complete abolition of modern infrastructure",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "A global abandonment of agriculture",
                                "is_correct": false,
                                "feedback": ""
                            },
                            {
                                "label": "A conflict between species protection, public safety, and economic use of land",
                                "is_correct": true,
                                "feedback": ""
                            }
                        ]
                    }
                },
                {
                    "type": "choice",
                    "title": "Do you want to read more?",
                    "position": {
                        "type": "seconds",
                        "value": 55
                    },
                    "event_context": {
                        "choices": [{
                            "label": "Yes please",
                            "next_media": "dinosaur_end_text"
                        }]
                    }
                }
            ],
            "description": "Dinosaur audio",
            "media_length": 59
        },
        {
            "id": "dinosaur_end_text",
            "title": "End",
            "type": "text",
            "resource_link": "https://wimplayer.media.ustp.at/media.php?name=dinosaurs_end.html",
            "timeline_events": []
        }
    ]
}

2. The Frontend: Nuxt & Logic

The player itself is built with Nuxt. We chose Nuxt because its reactive framework is ideal for syncing a video’s progress with dynamic UI overlays.

For this we split our team into 2 departments:

• The UI/UX of the main page and components
• The player with the state machine

Main Page & Components UI/UX

For prototyping and designing our pages and components, we decided on using Figma with Nuxt’s components to help us out. Here are some examples of our pages and components:

State Machine

To manage the complexity of interactive playback, we implemented a state machine. The state machine coordinates:

• Syncing Logic: Monitoring the video’s currentTime to trigger overlays from the WIMP format.
• Interaction States: When a pause: true event occurs, the machine pauses the background media, putting the quiz or choice interface in the foreground.
• Dynamic Media Handling: When a user makes a choice, the machine resolves the next_media ID and updates the Nuxt state to swap the media and move forward in the decission tree.

The post Wild Week – Wyld Interactive Media Player appeared first on Mobile USTP MKL.

Project Overview

To start off I invented a fictional product to which our lectures topic, Print to Mobile(Web) and the use of QR Codes can be applied to. I worked to gain added value for the product, as the title suggest my approach was by extending the physical product with a digital audio book. The project aims to provide an immersive experience through the scanning process and accommodate readers who may prefer to listen to books over reading or just want to listen while being occupied by something else.

A moment after the QR code is scanned the user is met with a book that opens its cover (the same as the physical book cover) and reviles an audio player where the user can listen to the audio book. Test it your self HERE.

Implementation

I decided to create a static web application as the title suggests. This was in order to simplify the project by having no server side. For the creation of the app I used a famous front end framework called Nuxt.js that is based on Vue.js for template files. Following the chronological order of how the user would encounter interact with the app. The opening of the book cover is created using Tailwindcss and some additional custom css code where the built in tools of tailwind were not enough. When the book is opened the user encounters the audio player which is created using the Web Audio API that is available in the browser by default. Finally I used the extremely user friendly deployment service of Netlify to publish my application to the web within minutes.

Summary

The product of this project is a prototype that shows how there can be added value to an existing products by incorporating the Print2Mobile concept. Future iterations of the project could also make use of augmented reality to further enhance the book by showing the plane models “pop-out” of the book through the users cameras into their surroundings and allow them to have a closer look.

I personally had fun seeing what’s the most creative way I can integrate the Print2Mobile concept in my project.

Find the application at: https://curious-mousse-8bd688.netlify.app/?auto=1

Disclaimer: This is a personal project created for educational and illustrative purposes. It is not affiliated with any existing organizations or products.

The post Print2Mobile | Audio Book – Static Web APP appeared first on Mobile USTP MKL.

Hard to believe: Back in 2009, a proud 77% of apps in the App Store were paid. Today, that number is just 4.9%. Because of this, it is increasingly difficult for developers to find indirect or even invisible ways to finance server costs and their own work. Nevertheless, giants like Snapchat, WhatsApp, Instagram, or Facebook manage to be part of a multi-billion dollar economic empire, even though their download button says “Free”. How does that add up?

In this blog post, we will take a look at the three biggest monetization strategies, their technical hurdles, and why the classic “pay once” model is almost extinct.

In-App Advertising

In-app advertising remains the most well-known and successful method of app monetization. These are ads that users see while using the app. According to Netimperative, this leads to up to a 12% increase in users’ purchase intent. The most common formats are:

• Banner Ads: Small ads, usually at the top or bottom edge of the screen.
• Video Ads: Short clips played before or during use.
• Interstitial Ads: Full-screen ads that often appear during natural pauses (e.g., after completing a level).
• Native Ads: Ads that blend seamlessly into the visual design of the app.

These formats are typically found in social media apps, news apps, and very frequently in gaming apps.

In-App Purchases

In addition to in-app advertising, developers can generate revenue through in-app purchases. This method is especially popular in the gaming sector. The business model behind it is that players can acquire skins, items, or objects. This type of monetization is also often exploited through the “Pay-to-Win” pattern. In this scenario, purchases are offered that give players an unfair advantage over others. Games are often specifically designed to offer helpful (but paid) items at particularly tricky spots. For example, to skip a level or gain more power.

Generally, we distinguish between two categories:

• Consumables: In-game currency (coins/gems), health points, power-ups, or building materials. These can be bought over and over again.
• Non-Consumables: Unlocking hidden levels, new characters, or cosmetic goods like “skins” and outfits. These are purchased only once.

Freemium

With the freemium model (a portmanteau of “free” and “premium”), the basic version of the app is completely free. However, if you want to use additional features, exclusive content, or an ad-free environment, you hit a so-called paywall. The goal is simple: users should get to know and love the app, so they are then willing to invest in the best user experience. The most prominent example of this is Spotify. You can easily use the service for free, but you have to take out a monthly subscription for features like offline listening, unrestricted song selection, and the removal of ads.

Technical Implementation: How Does the Money Get Into the App?

Integrating these monetization models into an app requires some technical groundwork. Fortunately, developers no longer write these systems entirely from scratch; instead, they rely on proven interfaces. For ad integration, so-called SDKs (Software Development Kits) from large ad networks like Google AdMob or Unity Ads are embedded directly into the code. These communicate with the servers in the background and fetch perfectly tailored ads in real-time.

When it comes to in-app purchases and subscriptions, the payment processing doesn’t go through the developer’s private bank account, but always through the secure infrastructure of the respective operating system. Apple provides the StoreKit framework, and Android offers the Google Play Billing API. To ensure everything is secure and fraud is prevented during these transactions, server-side validation is essential. The app’s backend directly asks Apple or Google whether the user’s digital receipt is actually genuine before virtual items or premium features are unlocked in the app.

The Balance Between Profit and User Experience (UX)

The biggest challenge with all these models is the fine line between maximizing revenue and annoying users. A poor user experience (UX) caused by overly aggressive monetization inevitably leads to the app being uninstalled quickly. For example, pop-up full-screen ads or poorly optimized video ads not only consume valuable data volume but can also cause annoying delays and longer loading times due to their size.

If you add too many ad interruptions, paywalls in inappropriate places, or a strong pay-to-win feeling, the trust of the user base is usually completely lost. A smart way out of this dilemma is often so-called Rewarded Video Ads. Here, the user decides for themselves whether they want to watch a commercial and receives an in-app reward as a thank you. To find out exactly where their own target audience’s pain threshold lies, experienced development teams also rely on A/B testing. This helps determine how many ads will be tolerated without people bouncing.

Conclusion: “Free” Always Has a Price

At the end of the day, it becomes clear: no app is truly completely free. Even if we don’t pay a cent when downloading from the App Store, we indirectly co-finance the development and server costs. Be it through our attention to advertising, the purchase of virtual coins, or signing up for a premium subscription. The free-to-play and freemium models have prevailed because they lower the barrier to entry for us users to zero.

For development studios, however, it remains a constant balancing act. Only those who have a firm grip on the complex technology in the background and find a fair balance between monetization and a great user experience will survive on users’ smartphones in the long run. Ultimately, the apps that win are the ones that offer real value without making us feel like walking wallets.

Sources:

Picture is generated with Gemini (Nanobanana)

https://startup-creator.com/blog/app-monetarisierung

https://www.publift.com/de/blog/app-monetization

https://www.adpushup.com/de/blog/game-monetization-model

https://www.devteam.space/blog/how-to-add-ads-to-your-app

https://nirajpaul2.medium.com/storekit-2-0-part-1-dcacd1a1e861

https://developer.android.com/google/play/billing?hl=de

The post Freemium, Subscriptions, and Ads: A Technical and Economic Look at App Revenues appeared first on Mobile USTP MKL.

Neuerungen seit dem letzten Semester

• Filteroptionen in der Rezeptliste

Der größte strukturelle Umbau fand in der Rezeptliste statt. Bisher wurden die Rezepte einfach als rohe Liste angezeigt, ohne Möglichkeit zur Filterung. Jetzt gibt es eine eigene Suchleiste mit Autocomplete-Vorschlägen der gefilterten Drinks, eine alphabetische Sortierung mit Drink-Nummer pro Karte, sowie einen Toggle-Filter für Signature Drinks.

• Kommentar-Sektion bei den Recipes

Das Herzstück des Projektes war die Erweiterung, dass jedes Rezept nun eine vollwertige Community-Section hat. User:innen können Kommentare mit Sternebewertung hinterlassen, auf Kommentare anderer antworten und eigene Kommentare wieder löschen. Die Bewertungen fließen in eine Durchschnittsbewertung ein, die prominent im Header der Rezeptkarte angezeigt wird. Die gesamte Kommunikation läuft in Echtzeit über WebSockets.

• Benötigte Zutaten einer Einkaufsliste hinzufügen

Bisher wurden alle nicht angegebenen Zutaten bei der Hauptsuche automatisch gesammelt und global in meinem Code zwischengespeichert. Das wurde grundlegend über ein Einkaufslisten-Feature überarbeitet: Pro Rezept kann der/die Nutzer:in nun selbst entscheiden, ob er/sie die fehlenden Zutaten zur Einkaufsliste hinzufügen möchte. Fehlende Zutaten werden in der Zutatenliste farblich in Orange hervorgehoben. Ein einzelner Button pro Rezept überträgt dann gezielt nur die fehlenden Zutaten in die Einkaufsliste. Die Einkaufsliste selbst unterstützt den Export als PDF über den nativen Android PrintManager sowie im CSV-Format.

Neben diesen Änderungen konnten viele Bugs behoben werden. Speziell einige Bugs, die die Funktionalität rund um die Erstellung von “Signature Drinks” (anlegen/löschen) als auch den Umgang mit gekennzeichneten Favoriten-Rezepten, eingeschränkt haben, existieren nicht mehr.

Technischer Part

Der Großteil an Technologien ist gleich geblieben. Im Frontend setze ich weiterhin auf NativeScript Angular bzw. Tailwind für das Design und im Backend SpringBoot. Das Backend habe ich dieses Semester erstmalig über den Online-Service Railway gehostet. Dazugekommen sind vor allem die WebSocket-Bibliothek @stomp/stompjs im Frontend sowie die entsprechende Spring WebSocket-Abhängigkeit im Backend.

Für die Kommentar-Funktion war von Anfang an klar, dass klassische HTTP-Requests nicht ausreichen , sonst wäre ein ständiges manuelles Aktualisieren notwendig gewesen, um neue Kommentare zu sehen. Die Wahl fiel auf WebSockets mit STOMP, einem einfachen Messaging-Protokoll das auf WebSocket aufsetzt und ein Publish-Subscribe-Modell ermöglicht. Im Spring Boot Backend wird dabei ein Message-Broker konfiguriert der eingehende Nachrichten an alle Subscriber des jeweiligen Rezept-Topics weiterleitet. Jedes Rezept hat seinen eigenen Kanal, zum Beispiel /topic/recipe/42/comments. Nur Nutzer:innen die gerade dieses Rezept offen haben, empfangen die Kommentar, die zu diesem Rezept abgegeben wurden. Der Controller nimmt neue Kommentare entgegen, speichert sie und schickt sie sofort an alle aktiven Subscriber:

@MessageMapping("/comments/create")
public void createComment(CreateCommentRequestDto request, Principal principal) {
    User author = userRepository.findByUsername(principal.getName())...;
    CommentResponseDto saved = commentService.createComment(request, author);
    messagingTemplate.convertAndSend(
        "/topic/recipe/" + request.getRecipeId() + "/comments", 
        saved
    );
}

Im Frontend übernimmt ein dedizierter CommentWebSocketService die gesamte Verbindungslogik. Er verwendet die @stomp/stompjs Bibliothek, schickt den JWT-Token beim Verbindungsaufbau mit und subscribt auf den zum Rezept passenden Topic-Kanal:

this.stompClient = new Client({
    webSocketFactory: () => new WebSocket(`wss://...railway.app/ws`),
    connectHeaders: { Authorization: `Bearer ${this.authToken}` },
    reconnectDelay: 5000,
});

this.stompClient.onConnect = () => {
    this.stompClient.subscribe(
        `/topic/recipe/${this.recipeId}/comments`,
        (message) => {
            const comment = JSON.parse(message.body);
            onCommentReceived(comment);
        }
    );
};

Herausforderungen & Learning(s) daraus

Die größte Herausforderung des Semesters waren eindeutig die WebSockets. Theoretisch klingt es simpel (Verbindung öffnen und Nachrichten empfangen), jedoch in der Praxis gab es einige Hürden. Zuerst die Authentifizierung: anders als bei normalen HTTP-Requests musste der JWT-Token über die STOMP connectHeaders mitgeschickt und im Backend extra validiert werden. Dann das Problem mit inaktiven Verbindungen, denn ohne der sogenannten “Heartbeat-Konfiguration” auf beiden Seiten kamen Nachrichten irgendwann einfach nicht mehr an (Fehlermeldungen wurden nicht geworfen). Zu guter Letzt das Aufräumen der Verbindungen, denn ohne explizites disconnect() blieben im Hintergrund immer mehr aktive Verbindungen offen.

Was das Aufräumen so schwierig gemacht hat, war der Pager, mit dem man zwischen den Rezepten swipen kann. NativeScript’s Pager-Komponente erstellt alle Rezept-Items gleichzeitig beim Laden, bei 14 Rezepten also sofort 14 WebSocket-Verbindungen und 14 HTTP-Requests, obwohl der/die Nutzer:in nur ein einziges Rezept sieht. Noch dazu wird ngOnDestroy beim Wischen zwischen den Items nicht zuverlässig aufgerufen, weil der Pager seine Views intern recycelt statt sie wirklich zu zerstören. Dadurch hat die Cleanup-Logik nie gefeuert.

Die Lösung war letztlich ein Umdenken: statt auf ngOnDestroy zu vertrauen, steuert jetzt ein Flag, ob die Kommentar-Sektion überhaupt gerendert wird. Sobald der Nutzer wegwischt, verschwindet die Komponente via *ngIf aus dem DOM, damit das Cleanup zuverlässig durchläuft. Das wesentliche Learning dabei, war ein gut ausgebautes Debugging zu haben.

Fazit und zukünftige TODOs

In diesem Projektabschnitt konnte ich mich erstmalig herausfordernd damit befassen, wie WebSockets technisch umgesetzt werden. Das war gleichzeitig eines der interessantesten und aufwändigsten Themen des Semesters. Die vielen Debugging-Sessions haben mich aber auch am meisten weitergebracht. Rückblickend bin ich sehr zufrieden damit, was ich mir vorgenommen hatte auch tatsächlich vollständig umgesetzt zu haben. Gerade das Bugfixing war diesmal besonders aufwändig, hat aber mit großem Erfolg geendet und manche Features meiner App brauchbarer gemacht.

An diesen Dingen sollte nun weitergearbeitet werden: Performance-seitig gibt es noch Luft nach oben, sowohl beim initialen Laden als auch bei den Screen-Wechseln merkt man stellenweise noch Verzögerungen die es zu optimieren gilt. Auch das Design ist noch nicht wirklich durchgängig einheitlich, was ich in einem nächsten Schritt konsequenter angehen möchte. Dazu kommt, dass ich bisher kaum echtes User-Feedback eingeholt habe, das soll sich ändern. Auf technischer Seite fehlen noch automatisierte Tests, die zur noch besseren Stabilität der App beitragen sollen. Schlussendlich wäre das große Ziel die App veröffentlichen zu können.

Beitragsbild: dieses wurde mittels Einsatz von KI erzeugt

The post Projekt WS25 | MixMatch (Fortsetzung) appeared first on Mobile USTP MKL.

Obwohl ich bereits unzählige Stunden in IDEs wie VS Code verbracht habe, um Apps und mehr zu entwickeln, hatte ich mich bisher nie damit beschäftigt, wie sich die Entwicklungsumgebung selbst erweitern lässt.

Da ich die Idee hatte, in meiner Masterarbeit eine VS Code Extension zu entwickeln, wollte ich das Einzelprojekt im 3. Semester der Masterklasse Mobile nutzen, um erste praktische Erfahrungen mit der Entwicklung von VS Code Extensions zu sammeln, bevor ich mich an die separate Entwicklung des Masterarbeitsprojekts mache.

Das Ergebnis dieses explorativen Projekts ist “Cute Cat”: eine süße VS Code Extension, die unterschiedliche Möglichkeiten von VS Code Extensions kombiniert.

Features

Commands

Die Extension stellt mehrere Commands zur Verfügung, die direkt über die Command Palette in VS Code aufgerufen werden können:

• “Meow!” zeigt eine kurze Informationsnachricht.
• “Show me the cat“ öffnet ein Informations-Popup, in welchem auch mehrzeiliger Text verwendet werden kann.
• “Wake up cat“ aktiviert die WebView im Side Panel (falls sie nicht schon angezeigt wird) und zeigt eine überraschte Katze für ein paar Sekunden. Die WebView wird weiter unten im Detail beschrieben.
• “Wrap selection in try catch block“ erweitert den ausgewählten Code automatisch um einen try-catch-Block oder gibt eine Warnung aus, falls keine Auswahl getroffen wurde.

Themes

Neben funktionalen Features wurden auch eigene Designkomponenten umgesetzt:

• “Cute Cat Pastel Dark” Colour Theme
• “Cute Cat Pastel Icons” Icon Theme

Dabei lag der Fokus auf einer konsistenten visuellen Identität. Die Kombination aus sanften Pastelltönen und angepassten Icons verleiht der Extension einen klaren Wiedererkennungswert.

WebView Side Panel

Ein zentrales Element der Extension ist die WebView im Side Panel. Dort wird ein animiertes Katzen-GIF angezeigt, das dynamisch auf Kontextinformationen reagiert:

• Anpassung an die Tageszeit (z. B. „Good Morning“)
• Reaktion auf lange Coding-Sessions (z. B. schlägt die Katze dem*der User*in nach 4 Stunden vor, eine Kaffeepause einzulegen)
• Anzeige der aktuellen Session-Dauer
• Anzeige, wie lange die Extension insgesamt schon aktiv ist (“Did you know we have been friends for 19h 58min?“)

Zusätzlich kann innerhalb der WebView über ein Settings-Icon ein Modal geöffnet werden, in dem User*innen mit einem Klick die bereitgestellte Colour bzw. Icon Theme (de)aktivieren können.

Text Decorations

Ein weiteres Feature der Extension sind dynamische Text Decorations. In den geöffneten Texteditoren werden Schlüsselwörter wie “cat” und “cute” mit kleinen dekorativen Elementen versehen.

Projektaufbau

Vereinfacht dargestellt ist das Projekt wie folgt aufgebaut:

- media/
  - webViewScript.js
  - webViewStyles.css
  - [...Bilder]
- src/
  - extension.ts (Einstiegspunkt)
  - [...]
- themes/
  - color-theme.json
  - icon-theme.json
- [...]
- package.json (Manifest)

Wichtig sind hierbei die package.json Datei, in welcher die Commands, WebView und Themes deklariert werden, und die src/extension.ts Datei, welche den Einstiegspunkt der Extension darstellt:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // ...
}

export function deactivate() {}

Challenges und Learnings

API-Dokumentation

VS Code bietet einen “Your First Extension” Guide und stellt viele Beispielprojekte zu unterschiedlichen Extension-Funktionalitäten für Entwickler*innen zur Verfügung. Trotzdem ist es manchmal nicht so leicht, das genaue Beispielprojekt, welches man sucht, zu finden. Ich würde zukünftigen Extension-Developer*innen empfehlen, direkt auf GitHub zu schauen (https://github.com/microsoft/vscode-extension-samples), anstatt nur in der VS Code Extension API zu suchen.

Falls man etwas Bestimmtes zur VS Code API nachschauen will, ist diese recht gut dokumentiert. Leider funktionieren einige Links auf der Website allerdings nicht, weshalb ich mich hauptsächlich mit der Suchfunktion (STRG+F) durch die API-Dokumentation arbeiten musste.

Von der Community gibt es eher weniger Tutorials und Online-Beiträge. Um die VS Code Extension zu entwickeln, kombinierte ich daher Informationen aus der API-Dokumentation, aus Beispielprojekten und Tutorials und erarbeitete mir die fehlenden Details eigenständig durch “Learning by Doing”.

Text Decoration Icons

Man würde denken, ein Bild als Text Decoration zu setzen, wäre trivial. Doch hat es mich einige Zeit gekostet, bis ich Folgendes realisiert habe: Wenn man ein SVG Icon verwenden will, darf dieses nicht selbst “width” und “height” angeben. Obwohl man der Text Decoration sowohl width, als auch height, mitgeben kann, werden diese Angaben ignoriert, wenn das SVG seine eigene Größe vorgibt.

Weiters werden die Icons nicht mitting in der Zeile positioniert (siehe das Bild der Text Decorations: die Icons sind etwas weiter oben positioniert als der Text). Man kann der Decoration zwar auch einen Margin mitgeben, allerdings würde z. B. ein Top-Margin (um den extra Platz unterhalb des Icons auszugleichen) nicht nur das Icon, sondern die ganze Zeile nach unten schieben.

Kommunikation zwischen Extension und WebView

Eine weitere Challenge war die Kommunikation zwischen der Extension und der WebView, um insbesondere bei den “Theme Toggles” beide Seiten am gleichen Stand zu halten (wenn das Theme (extern) aktiviert wurde, sollte auch der Toggle in der WebView automatisch aktiviert werden). Dank der VS Code API können aber Nachrichten recht einfach zwischen der Extension und der WebView ausgetauscht werden.

Debugging

Ich fand es sehr spannend, insbesondere die WebView zu debuggen. Über die Command Palette in VS Code lässt sich der Web Inspector öffnen (“Toggle Developer Tools”), mit welcher sowohl der Console-Output, als auch die HTML-Elemente der ganzen IDE inspiziert werden können. Innerhalb von den Sourcefiles (abgesehen von webViewScript.js) lassen sich allerdings auch Breakpoints setzen.

Obwohl der sogenannte “Extension Development Host” (das separate VS Code Fenster, in welchem die Extension während der Entwicklung läuft) viel zu bieten hat, konnte ich nicht die komplette Funktionalität meiner Extension darin testen. Das Icon Theme lässt sich innerhalb des Extension Hosts zum Beispiel nicht programmatisch für den Workspace setzen (innerhalb von .vscode/settings.json), weshalb ich die Extension mit dem “vsce package” Command zuerst builden und installieren musste, um den “Icon Theme Toggle” innerhalb der WebView zu testen.

Conclusion

Mit dem Projekt “Cute Cat” konnte ich einen intensiven Einblick in die Möglichkeiten und Herausforderungen von VS Code Extensions gewinnen. Besonders wertvoll war für mich dabei der explorative Charakter des Projekts: Ich konnte vieles ausprobieren und dadurch ein tiefes Verständnis für die Entwicklung von VS Code Extensions aufbauen.

Ich bin stolz auf das, was ich erreicht habe, und fühle mich nun bestens vorbereitet, das nächste Projekt anzugehen: die Entwicklung meiner eigenen VS Code Extension im Rahmen der Masterarbeit.

The post Projekt | VS Code Extension appeared first on Mobile USTP MKL.

Worum es in der App geht

Im Kern funktioniert Timelapse wie ein visuelles Tagebuch:

• Nutzer:innen legen Projekte an (z. B. „Daily Selfie“ oder „Zimmerpflanze“).
• Die App erinnert regelmäßig daran, neue Fotos aufzunehmen.
• Alle Bilder werden zeitlich geordnet, mit Datum und optionalen Kommentaren gespeichert.
• Auf einer kompakten Übersicht sieht man, wann man etwas aufgenommen hat, welche Tage besonders wichtig waren und wie sich das Projekt über Wochen und Monate entwickelt.
• Aus dieser Sammlung erzeugt Timelapse auf Knopfdruck ein Zeitraffervideo, das die Geschichte des Projekts in wenigen Sekunden erzählt.

Zentrale Funktionen in Kürze

• Projektorganisation: Mehrere parallele Timelapse-Projekte mit Titel, Beschreibung und individuellen Einstellungen.
• Visuelle Timeline: Eine kombinierte Wochen- und Listenansicht zeigt, welche Tage schon dokumentiert sind und welche Lücken es noch gibt.
• Erinnerungen: Konfigurierbare Benachrichtigungen, damit die tägliche Aufnahme zur Routine wird und die Timeline nicht abreißt.
• Favoriten & Notizen: Einzelne Tage können hervorgehoben und mit kurzen Kommentaren versehen werden – etwa um Meilensteine oder besondere Momente zu markieren.
• Automatische Video-Montage: Die App erstellt aus den Bildern ein Video, berücksichtigt Ausrichtung, Datum, optionales Wasserzeichen und Kommentare und bietet Konfigurationsmöglichkeiten für Qualität oder Textstil.

Technologie-Stack

Die App ist als native Android-Anwendung mit Jetpack Compose umgesetzt und nutzt moderne Android-APIs sowie eine klare Schichtung zwischen UI, Logik und Medienverarbeitung.

• UI: Jetpack Compose + Material 3
  • Alle Screens (Projektliste, Details, Dialoge, Konfiguration) sind vollständig in Compose realisiert.
  • Material-3-Komponenten wie LargeFlexibleTopAppBar, Listen, Cards und Dialoge sorgen für ein konsistentes Look & Feel.
  • Ein zentrales TimelapseTheme verwaltet App-Theme (Light/Dark), Seed-Farbe und den Palette-Stil.
• Material 3 Expressive & Material You
  • Die App nutzt Material 3 Expressive, um eine lebendige, charakterstarke Farb- und Typografie-Sprache umzusetzen – passend zu einer App, die persönliche Veränderungen dokumentiert.
  • Über einen integrierten Color Picker wählen Nutzer:innen eine eigene Akzentfarbe.
  • Aus dieser Seed-Farbe wird mit Material You ein komplettes Farbschema generiert, das sich konsistent über die gesamte App zieht.
  • Dadurch wirkt Timelapse auf jedem Gerät persönlich, bleibt aber immer klar strukturiert und gut lesbar – unabhängig davon, ob Light- oder Dark-Mode aktiv ist.
• Video-Montage & Bildverarbeitung
  • Die Montage-Logik läuft in einem eigenen Modul:
  • Bilder werden anhand ihrer EXIF-Daten korrekt ausgerichtet.
  • Ein Canvas setzt die Frames zusammen, ergänzt Texte (Datum, Kommentare, Wasserzeichen) und kümmert sich um Hintergrundfarbe und Zensurflächen.
  • Ein Muxer erzeugt daraus ein MP4-Video, gesteuert über Kotlin Flows, die den Fortschritt an die UI melden.
  • So entsteht aus einer losen Sammlung von Bildern ein stimmiges Timelapse-Video, ohne dass externe Tools nötig sind.

Material 3 Expressive & Material You im Einsatz

Ein großer Fokus des Projekts lag auf einer modernen, adaptiven UI, die sich nach den Nutzer:innen richtet:

• Dynamische Farbwelten
  • Durch den Seed-Color-Ansatz wirkt die App nicht wie ein statisch durchgestyltes Produkt, sondern wie ein Rahmen, der sich der jeweiligen Geschichte anpasst.
  • Projekte mit emotionalem Kontext (z. B. Schwangerschaft, Beziehungen, erste Wohnung) profitieren von den kräftigen, expressiven Paletten, die Material 3 bereitstellt.
• Einheitliche, weiche Formsprache
  • Großzügige Rundungen (z. B. extra große Card-Shapes in Dialogen), expressive Typografie und bewusst eingesetzte Icons unterstützen den Tagebuch-Charakter der App.
  • Die App verzichtet auf überladene UI-Elemente und setzt auf Ruhe, Klarheit und Fokus – wichtig, wenn man sich über Monate immer wieder mit derselben Oberfläche beschäftigt.
• Konsistentes Theming
  • Alle Bausteine – von Erfassungsdialogs über Erinnerungs-Settings bis hin zu Fortschrittsanzeigen bei Scans und Montage – hängen am gleichen Theme.
  • Änderungen an Theme, Palette oder Seed-Farbe greifen sofort durch, ohne dass einzelne Screens speziell angepasst werden müssen.

Herausforderungen & Learnings

• Balance zwischen Einfachheit und Kontrolle
  • Nutzer:innen sollen einerseits „einfach nur“ ein Timelapse-Video erstellen können, andererseits genug Einstellmöglichkeiten für Qualität, Text, Stabilisierung und Privatsphäre haben.
  • Ein wichtiger Lernpunkt war, die Komplexität hinter klaren Dialogen und wenigen, gut erklärten Optionen zu verstecken.
• Stabile, angenehme Timelapse-Videos
  • Kleine Fehler bei Skalierung oder Matrix-Transformation führen schnell zu Sprüngen oder abgeschnittenen Bereichen – hier war viel Feintuning nötig.
• Durchgängiges Theming mit Material 3 / Material You
  • Seed-Farben, dynamische Paletten und unterschiedliche Palettenstile (z. B. Expressive) lassen sich mächtig kombinieren – aber nur, wenn das Theming-Konzept von Anfang an klar definiert ist.
  • Die wichtigste Erkenntnis: Ein zentrales Theme-Objekt vereinfacht langfristig alle Entscheidungen rund um Farben, Typografie und Component-Styling.

Fazit

Timelapse war für mich ein Projekt, in dem sich User Experience, modernes Android-Design und Medienverarbeitung sehr gut ergänzt haben. Die App zeigt, wie sich mit Jetpack Compose, Material 3 Expressive und Material You eine Oberfläche bauen lässt, die technisch anspruchsvolle Abläufe (zB. Videomontage) hinter einem einfachen, persönlichen Nutzungserlebnis versteckt. Besonders spannend war zu sehen, wie stark sich die Wahrnehmung der App ändert, wenn man eine eigene Farbwelt definieren kann und diese sich konsequent durch alle Screens zieht. In zukünftigen Schritten möchte ich die App um Themen wie Musik, Export-Presets und umfangreichere Sharing-Optionen erweitern – immer mit dem Ziel, den Kern beizubehalten: Veränderung sichtbar machen, ohne dass sich der Aufwand danach anfühlt.

The post Projekt | Timelapse Android App appeared first on Mobile USTP MKL.

Features

Quiz erstellen

Beim Start der App kann man einen Order mit lokaler Musik aussuchen. Danach landet man am Hauptscreen. Mithilfe des FloatinACtionButtons kann man ein neues Quiz erstellen. Diesem kann man einen Namen geben und per ausgewählter Suchbegriffe die Liedtitel aussuchen und dem Quiz hinzufügen. Danach kann man das Quiz in der Liste sehen, mit Information wie dem Namen, der Anzahl der Lieder und welchen Rang man in welchem Modus hat.

Quiz starten

Wenn man auf ein Quiz drückt, dann kommt man auf den Start Screen des Quiz. Dort kann man den Modus auswählen, Random und Progression, zusammen mit der Schwierigkeit. Der Mode entscheidet, wie man die Lieder navigieren kann. Auf Random, kann man zwischen jedem Lied hin und her springen. Bei Progression, muss man das derzeitige Lied erraten bevor man weitergehen kann. Die Schwierigkeit gibt an, wie lange der Ausschnitt des Liedes ist, und mit höherer Schwierigkeit wird der Ausschnitt kürzer.

Quiz spielen

Beim Spielen hat man oben einmal den Player, mithilfe wessen man den Ausschnitt abspielen kann. Darunter hat man die Navigation, köpfe fürs vorwärts und rückwärts springen und im Random Gamemode auch Dot Indikators, auf welchem Lied man sich befindet und mithilfe dessen man auch navigieren kann. Wenn man fertig mit einem Lied ist, kommt man auf den result screen. Dort bekommt man eine Medaille, wenn man alle Lieder richtig hatte. Wenn man das Lied auf einer höheren Schwierigkeit schafft, dann bekommt man auch eine bessere Medaille. Zuletzt hat man auch eine Ansicht, was man bei welchem Lied geraten hat und ob es richtig war.

Technologien

Die App wurde als eine native Android-App mithilfe von Kotlin entwickelt. Als UI Tool Kit wurde Jetpack compose verwendet. Manche der anderen verwendetetn Libnries wären:

• Room: Eine Persistenz Library, welche über einen Abstraktionen-Layer wie Entity und DAO Klassen mit einer SQLite Datenbank interagiert und managen.
• Media3 ExoPlayer: Einer der Basis Mediaplayer auf Android und von Jetpack Compose. Erlaubt die Basisfunktionalitäten, wie abspielen, pausieren, etc.
  Weiter kleiner Libraries welcher verwendet wurde, sind zum Beispiel Koin für die Dependency injection oder Compose Navigation.

Herausforderungen

Die wahrscheinlich größte Herausforderung war die generelle Verwendung von Kotlin. Im zweiten Semester hatten wir zwar eine Einführung in Kotlin und auch für unser Semesterprojekt im dritten Semester haben wir Kotlin verwendeten. Aber eine ganze App alleine zu entwickeln war noch einmal etwas anderes und eine größere Herausforderung.

Eine andere Herausforderung war das Installieren der Libraries. Oft stand auf den Dokumentationsseiten nicht alle nötigen dependincies zum Installieren, oder sie waren über verschiedene Seiten aufgeteilt/stand etwas anderes. Auch standen sie oft noch in der alten Form auf den Seiten, wo die Versionen direkt im build gradle eingetragen wurde. Jetzt gibt es die neuere Version, die Version libs.versions.otml einzutragen und das dependency definieren im build.gradle.kts zu machen. Wenn man aber die generelle Struktur weiß, war dies ein geringeres Problem.

Ein anderes Problem war die Größe meiner Musik Bibliothek. Ich habe über 1000 lokale Lieder, welche die Optimierung des Durchsuchens wichtig gemacht hat. Nach etwas herumprobieren habe ich den MediaStore, welche automatisch einen Index aller Media Dateien am Handy besitzt, und der Zugriff und Abruf meiner Bibliothek in Sekunden vollziehen konnte

Learnings und Nächste Schritte

Ich habe einiges über die generelle Verwendung und Entwicklung mit Kotlin gelernt. Auch das von einer meiner Kollegen beigebrachte MVC Prinzips, anhand eines BaseViewModels mit Action, State und Effekt Klassen.

Es gibt einige Richtungen, wie dieses Projekt erweitert werden könnte, viele Ideen, welche von meinem Kollegen beim Herzeigen kamen. Zum Beispiel das Erstellen von Online quizzen, welche von anderen Personen gesehen werden könnten. Auch neue Spielmodi, wie das Hören von Song in reverse oder einen endlosen Modus kamen.

Images from me and banner image from: https://pixabay.com/vectors/vinyl-platinum-disk-music-dj-2241789/

The post Projekt | MusicGuesser appeared first on Mobile USTP MKL.