<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>User Experience Archives - Mobile USTP MKL</title>
	<atom:link href="https://mobile.fhstp.ac.at/category/ux/feed/" rel="self" type="application/rss+xml" />
	<link>https://mobile.fhstp.ac.at/category/ux/</link>
	<description>Die &#34;Mobile Forschungsgruppe&#34; der USTP, sie  sammelt hier alles zu den Themen Design, UX und Entwicklung mobiler Applikationen</description>
	<lastBuildDate>Mon, 15 Jun 2026 09:42:54 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://mobile.fhstp.ac.at/wp-content/uploads/2025/03/icon-120x120.webp</url>
	<title>User Experience Archives - Mobile USTP MKL</title>
	<link>https://mobile.fhstp.ac.at/category/ux/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>PROJECT &#124; Building a New Website for RKZ Metall Design GmbH</title>
		<link>https://mobile.fhstp.ac.at/allgemein/building-a-new-website-for-rkz-metall-design-gmbh/</link>
		
		<dc:creator><![CDATA[Kevin Kraushofer]]></dc:creator>
		<pubDate>Wed, 10 Jun 2026 18:59:02 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Projekte]]></category>
		<category><![CDATA[Studium]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[hochwasserschutz]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[rkz metall design gmbh]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15871</guid>

					<description><![CDATA[<p>For this project, I had the opportunity to create a completely new website for RKZ Metall Design GmbH. RKZ is an Austrian company based in Lower Austria that specializes in professional flood protection solutions for windows and doors, as well as custom-made solutions for special situations. This project was especially interesting for me because my <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/building-a-new-website-for-rkz-metall-design-gmbh/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/building-a-new-website-for-rkz-metall-design-gmbh/">PROJECT | Building a New Website for RKZ Metall Design GmbH</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>For this project, I had the opportunity to create a completely new website for RKZ Metall Design GmbH. RKZ is an Austrian company based in Lower Austria that specializes in professional flood protection solutions for windows and doors, as well as custom-made solutions for special situations.</p>



<p>This project was especially interesting for me because my father works at the company, which gave me a closer connection to both the business and its challenges.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Why This Project?</h2>



<p>You might be wondering why I suddenly included this project among my master&#8217;s projects.</p>



<p>The answer is quite simple. The company had received very few customer inquiries in recent months. During trade fairs and exhibitions, potential customers often mentioned that they could not find the company online. After taking a closer look, it became clear why.</p>



<p>The existing website had several issues. It suffered from poor performance, weak SEO, and limited accessibility. Important legal pages such as the imprint and privacy policy were also incomplete and contained errors. Overall, the website did not represent the quality of the company and its products.</p>



<p>Because of this, I offered my support and took on the challenge of creating a new website from scratch.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Project Scope</h2>



<p>One of the biggest problems with the old website was that it had been developed entirely in React. While this worked from a technical perspective, it made content management almost impossible for non-technical employees.</p>



<p>The company wanted a website that they could update themselves. They wanted to be able to change texts, upload images, and maintain content without needing programming knowledge every time.</p>



<p>This became one of the main goals of the project.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Core Features</h2>



<p>Before starting the design and development process, I spoke with the client to understand what they needed from their new website.</p>



<p>Of course, the products had to be presented clearly. Beyond that, they wanted customer reviews, information about partners, a contact form, and an overall more modern appearance.</p>



<p>My personal focus was on creating a website that performs well in areas that are essential today: responsive design, SEO, and accessibility. A website should not only look good, it should also be easy to find and easy to use on all devices.</p>



<p>Since the company had almost no digital presence beyond its website, I also created a Google Business Profile and set up Google Analytics to help them understand and improve their online visibility in the future.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Design, Tools, and Technologies</h2>



<p>The design process started in Figma. The client requested a visual style inspired by water and waves to reflect the company&#8217;s connection to flood protection.</p>



<p>At the same time, I wanted to keep the design clean and professional. The target audience is mostly businesses and homeowners looking for reliable protection solutions, so the website needed to maintain a strong industrial and trustworthy feel.</p>



<p>To make content management easier for the company, I decided to build the website with WordPress instead of creating another fully custom solution. This allows employees to manage content themselves without needing technical knowledge.</p>



<p>To customize the website and provide all required functionality, I researched, installed, and configured several WordPress plugins that support performance, SEO, security, forms, and content management.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">What I Learned</h2>



<p>This was the first time I created an entire website completely from scratch.</p>



<p>I was involved in every step of the process, from researching hosting options and planning the structure to designing the interface, setting up WordPress, configuring plugins, creating the Google Business Profile, and integrating Google Analytics.</p>



<p>On top of that, I made sure the website worked well on different screen sizes and followed SEO and accessibility best practices.</p>



<p>The project was definitely time-consuming, but it taught me a lot. I gained a much better understanding of how many different areas come together when building a professional website. It was not only about design or development, but also about planning, communication, marketing, and long-term maintainability.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Conclusion and Future Steps</h2>



<p>At the moment, the project is not completely finished yet. I am currently waiting for feedback from the company, and some final content such as photos and text material is still missing.</p>



<p>Once these assets are available, I will make the final adjustments, complete the remaining content, and submit the website for indexing so it can be found through search engines.</p>



<p>After that, the company will finally have a modern web presence that better reflects its expertise and helps potential customers find its services online.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Check It Out Soon</h2>



<p>The new website will soon be available at:</p>



<p><a href="https://www.rkz-design.gmbh">https://www.rkz-design.gmbh</a></p>



<p>Feel free to take a look once it goes live.</p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/building-a-new-website-for-rkz-metall-design-gmbh/">PROJECT | Building a New Website for RKZ Metall Design GmbH</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>PROJECT &#124; Redesigning Swiva: Building a Clear and Consistent Design System</title>
		<link>https://mobile.fhstp.ac.at/forschung/forschung-projekte/redesigning-swiva-building-a-clear-and-consistent-design-system/</link>
		
		<dc:creator><![CDATA[Kevin Kraushofer]]></dc:creator>
		<pubDate>Wed, 10 Jun 2026 18:20:56 +0000</pubDate>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Projekte]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[swiva]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15862</guid>

					<description><![CDATA[<p>In this project, I worked on redesigning Swiva and creating a style guide to make our design process more consistent and structured. Swiva is an app that focuses on reducing decision fatigue in everyday life. The idea is simple: users collect things they would like to do, organize them into lists, and when they don’t <a class="read-more" href="https://mobile.fhstp.ac.at/forschung/forschung-projekte/redesigning-swiva-building-a-clear-and-consistent-design-system/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/forschung/forschung-projekte/redesigning-swiva-building-a-clear-and-consistent-design-system/">PROJECT | Redesigning Swiva: Building a Clear and Consistent Design System</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>In this project, I worked on redesigning Swiva and creating a style guide to make our design process more consistent and structured. Swiva is an app that focuses on reducing decision fatigue in everyday life. The idea is simple: users collect things they would like to do, organize them into lists, and when they don’t know what to do next, they can just swipe through these activities on the home screen and pick something in a quick and effortless way.</p>



<p>In short: <em>scroll less, experience more.</em></p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading"><strong>The Problem and Project Process</strong></h2>



<p>When we started this project, we only had a early prototype and not really a clear or strong brand identity. Since we only had one project semester, we also didn’t have the time to go deep into branding and design from the beginning. As a result, things felt a bit inconsistent and not fully thought through yet.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">So I set myself the goal to change exactly that.</h2>



<p>I started by creating a proper style guide and reworking both the logo and the overall brand identity. After that, I worked in an iterative design process. That basically means I constantly moved between creating ideas, building mockups, improving them, and then discussing everything with my team. Feedback played a important role here.</p>



<p>On top of that, I also designed the preview visuals for the App Store and Google Play Store, making sure the first impression of Swiva feels clean and engaging.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading"><strong>Tools and Technologies</strong></h2>



<p>For the design work, I used a mix of different tools. Figma was the main tool for designing all the app screens and building the overall structure of the product. For image editing and vector work, I used Adobe Creative Cloud.</p>



<p>To speed up the workflow and find the right visual elements, I also used platforms like Magnific and Envato Elements for icons, illustrations, and other design assets.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading"><strong>What I Learned</strong></h2>



<p>Besides the design part, there was also a lot of organizing and planning involved in this project. My team and I used Swiva as part of our course <em>Tun/Forschen/Gründen</em>, but also for different competitions and our project exhibition.</p>



<p>Because of that, I naturally improved my time management and learned how important it is to stay structured when working on a longer project with multiple goals at the same time.</p>



<p>From a design perspective, working with a style guide really changed how I approach design. Instead of just designing based on feeling, I now have a clear system that helps me stay consistent. It also made it much easier to improve the quality of the design over time, since everything follows the same direction.</p>



<p>Overall, I would say my design skills improved a lot during this process, especially in terms of consistency and visual thinking.</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading"><strong>Conclusion and Future Steps</strong></h2>



<p>Next up, we will take part in the Interactive Digital Media Student Contest in Romania. After that, we’ll present Swiva at our project exhibition, and in the winter semester we will pitch it for the pre-incubator program.</p>



<p>At the same time, we are currently working on a full brand book. The goal is to clearly define our design principles and values, so we always keep a consistent direction as the project continues to grow.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p><strong>Try Swiva</strong></p>



<p>If you’re curious, you can check out Swiva here:<br><a href="https://swiva.app/download">https://swiva.app/</a> </p>



<p>Or download it soon on the App Store or Google Play Store.<br><a href="https://swiva.app/downloads">https://swiva.app/download</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/forschung/forschung-projekte/redesigning-swiva-building-a-clear-and-consistent-design-system/">PROJECT | Redesigning Swiva: Building a Clear and Consistent Design System</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Smart Import Feature for my app &#8220;Swiva&#8221;</title>
		<link>https://mobile.fhstp.ac.at/studium/studium-projekte/smart-import-feature-for-my-app-swiva/</link>
		
		<dc:creator><![CDATA[Daniel Studera]]></dc:creator>
		<pubDate>Wed, 10 Jun 2026 11:48:56 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Projekte]]></category>
		<category><![CDATA[Studium]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[mobile]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15857</guid>

					<description><![CDATA[<p>For this project, I worked on an AI feature for Swiva, my React Native app for saving activities, places and ideas. The basic idea of Swiva is simple: users collect things they want to try, organize them in lists and later swipe through them when they do not know what to do. One feature we <a class="read-more" href="https://mobile.fhstp.ac.at/studium/studium-projekte/smart-import-feature-for-my-app-swiva/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/studium-projekte/smart-import-feature-for-my-app-swiva/">Smart Import Feature for my app &#8220;Swiva&#8221;</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>For this project, I worked on an AI feature for Swiva, my React Native app for saving activities, places and ideas. The basic idea of Swiva is simple: users collect things they want to try, organize them in lists and later swipe through them when they do not know what to do.</p>



<p>One feature we had planned for a longer time was sharing links directly into the app. For example, a user sees a recipe on Instagram, a restaurant on Google Maps or an activity on TikTok and shares the link to Swiva. The app should then create a useful activity from that link, with a title and a short description.</p>



<p>At first, I thought the main challenge would be the AI part. But during the project I realized that a much bigger part was actually getting good information from the shared links.</p>



<h2 class="wp-block-heading">The real problem: getting the content</h2>



<p>Before the AI can generate a good activity, the app needs useful input. For that, I used two general strategies and one special case.</p>



<p>The first strategy is Open Graph metadata. This is the information many websites use for link previews, for example when a link is shared in WhatsApp. It often contains a title, description and image, which can already be enough to understand the basic content of a post or website.</p>



<p>The second strategy is oEmbed. This is used by platforms like TikTok to provide information for embedded content. In some cases, this gives better structured data than normal page metadata.</p>



<p>Google Maps was more difficult. The official APIs are based on place IDs and structured requests, not just random shared Maps links. Also, Google has strict rules around scraping. Because of that, I did not scrape the page directly. Instead, I tried to resolve the link and extract the place name from the final URL when possible.</p>



<p>I also decided to send these metadata requests from the app instead of my backend. If the app scales, I do not want my server to send too many requests to platforms like Instagram or TikTok and risk rate limits or IP bans. Sending them from the app distributes this better and keeps the backend simpler.</p>



<h2 class="wp-block-heading">On-device AI and fallback</h2>



<p>For iOS, I used the Callstack React Native AI package with Apple’s on-device AI capabilities. This worked well and was quite easy to use, because the API is based on the Vercel AI SDK.</p>



<p>My original plan was to also use Google ML Kit GenAI for Android. But the support I wanted in the React Native AI package was not available yet, and I did not want to build a custom Expo module just for this. Since I had already proven the on-device concept with Apple, I used a cloud fallback for Android and unsupported devices.</p>



<p>The fallback sends a request to my backend, which uses a Gemini Flash-Lite model to generate the activity. At first I used Gemini 2.5 Flash-Lite, where the results were comparable to Apple’s on-device model. Later I tested Gemini 3.1 Flash-Lite, and I was much happier with the generated titles and descriptions.</p>



<h2 class="wp-block-heading">What I learned</h2>



<p>My original goal was to compare on-device AI and cloud AI and see if the quality could be similar. I did not fully reach that goal, because the newer cloud model gave better results for my use case.</p>



<p>Still, the project was a useful experiment. I learned how to use Apple on-device AI in a React Native app, how to build a fallback strategy and how important link metadata is for this feature.</p>



<p>For Swiva, I currently think that one cloud strategy is probably the easiest solution to maintain. Gemini Flash-Lite is cheap enough for this use case, the results are more consistent across devices, and the architecture is simpler than maintaining separate strategies for iOS, Android and fallback.</p>



<p>On-device AI is still very interesting, especially for privacy, offline usage and reducing server costs. But in this case, the simplest and most stable solution might be the best one</p>



<p></p>



<p>Check out the feature by downloading Swiva here: <a href="https://swiva.app/download">https://swiva.app/download</a></p>



<h2 class="wp-block-heading">Sources</h2>



<ul class="wp-block-list">
<li>Callstack React Native AI: <a href="https://github.com/callstackincubator/ai">https://github.com/callstackincubator/ai</a></li>



<li>Google ML Kit GenAI APIs: <a href="https://developers.google.com/ml-kit/genai">https://developers.google.com/ml-kit/genai</a></li>



<li>Open Graph Protocol: <a href="https://ogp.me/">https://ogp.me/</a></li>



<li>TikTok oEmbed / Embed Documentation: <a href="https://developers.tiktok.com/doc/embed-videos/">https://developers.tiktok.com/doc/embed-videos/</a></li>



<li>Google Maps Place Details API: <a href="https://developers.google.com/maps/documentation/places/web-service/place-details">https://developers.google.com/maps/documentation/places/web-service/place-details</a></li>



<li>Gemini API Pricing: <a href="https://ai.google.dev/gemini-api/docs/pricing">https://ai.google.dev/gemini-api/docs/pricing</a></li>
</ul>



<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/studium-projekte/smart-import-feature-for-my-app-swiva/">Smart Import Feature for my app &#8220;Swiva&#8221;</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Projekt &#124; Timelapse Android App</title>
		<link>https://mobile.fhstp.ac.at/studium/studium-projekte/projekt-timelapse-android-app/</link>
		
		<dc:creator><![CDATA[David Grünberger]]></dc:creator>
		<pubDate>Thu, 26 Feb 2026 10:19:46 +0000</pubDate>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Dokumentation]]></category>
		<category><![CDATA[Native Development]]></category>
		<category><![CDATA[Projekte]]></category>
		<category><![CDATA[Studium]]></category>
		<category><![CDATA[Trends]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[design systems]]></category>
		<category><![CDATA[Jetpack Compose]]></category>
		<category><![CDATA[Material Design]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[Semesterprojekt]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15691</guid>

					<description><![CDATA[<p>Im Rahmen des Semesterprojekts im 3. Semester der Masterklasse Mobile habe ich die Android-App &#8220;Timelapse&#8221; entwickelt. Die Idee dahinter: Aus vielen einzelnen Momentaufnahmen wird automatisch ein visueller Zeitstrahl – als Video, das langfristige Veränderungen sichtbar macht. Egal ob Bartwachstum, Fitness-Progress oder das Wachstum einer Zimmerpflanze: Timelapse hilft dabei, diese Reise festzuhalten. Ziel des Projekts war ein alltagstauglicher MVP, der den kompletten Ablauf abdeckt: vom Erstellen <a class="read-more" href="https://mobile.fhstp.ac.at/studium/studium-projekte/projekt-timelapse-android-app/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/studium-projekte/projekt-timelapse-android-app/">Projekt | Timelapse Android App</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Im Rahmen des Semesterprojekts im 3. Semester der Masterklasse Mobile habe ich die Android-App &#8220;Timelapse&#8221; entwickelt. Die Idee dahinter: Aus vielen einzelnen Momentaufnahmen wird automatisch ein visueller Zeitstrahl – als Video, das langfristige Veränderungen sichtbar macht. Egal ob Bartwachstum, Fitness-Progress oder das Wachstum einer Zimmerpflanze: Timelapse hilft dabei, diese Reise festzuhalten. Ziel des Projekts war ein alltagstauglicher MVP, der den kompletten Ablauf abdeckt: vom Erstellen eines Projekts über tägliche Erinnerungen und eine übersichtliche Tage-Ansicht bis hin zur fertigen Video-Montage, die sich teilen oder archivieren lässt.</p>



<h2 class="wp-block-heading">Worum es in der&nbsp;App geht</h2>



<p>Im Kern funktioniert Timelapse wie ein&nbsp;visuelles&nbsp;Tagebuch:</p>



<ul class="wp-block-list">
<li>Nutzer:innen legen Projekte an (z. B. „Daily Selfie“ oder „Zimmerpflanze“).</li>



<li>Die App erinnert regelmäßig daran, neue Fotos aufzunehmen.</li>



<li>Alle Bilder werden zeitlich geordnet, mit Datum und optionalen Kommentaren gespeichert.</li>



<li>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.</li>



<li>Aus dieser Sammlung erzeugt Timelapse auf Knopfdruck ein Zeitraffervideo, das die Geschichte des Projekts in wenigen Sekunden erzählt.</li>
</ul>



<h2 class="wp-block-heading">Zentrale&nbsp;Funktionen&nbsp;in&nbsp;Kürze</h2>



<ul class="wp-block-list">
<li><strong>Projektorganisation:</strong> Mehrere parallele Timelapse-Projekte mit Titel, Beschreibung und individuellen Einstellungen.</li>



<li><strong>Visuelle Timeline:</strong> Eine kombinierte Wochen- und Listenansicht zeigt, welche Tage schon dokumentiert sind und welche Lücken es noch gibt.</li>



<li><strong>Erinnerungen:</strong> Konfigurierbare Benachrichtigungen, damit die tägliche Aufnahme zur Routine wird und die Timeline nicht abreißt.</li>



<li>F<strong>avoriten &amp; Notizen:</strong> Einzelne Tage können hervorgehoben und mit kurzen Kommentaren versehen werden – etwa um Meilensteine oder besondere Momente zu markieren.</li>



<li><strong>Automatische Video-Montage:</strong> 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.</li>
</ul>



<figure class="wp-block-gallery has-nested-images columns-4 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="1080" height="2400" data-id="15763" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122653_Timelapse.jpg" alt="" class="wp-image-15763" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122653_Timelapse.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122653_Timelapse-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122653_Timelapse-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" /></figure>



<figure class="wp-block-image size-full"><img decoding="async" width="1080" height="2400" data-id="15765" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122559_Timelapse.jpg" alt="" class="wp-image-15765" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122559_Timelapse.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122559_Timelapse-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122559_Timelapse-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" /></figure>



<figure class="wp-block-image size-full"><img decoding="async" width="1080" height="2400" data-id="15764" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122619_Timelapse.jpg" alt="" class="wp-image-15764" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122619_Timelapse.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122619_Timelapse-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122619_Timelapse-922x2048.jpg 922w" sizes="(max-width: 1080px) 100vw, 1080px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1080" height="2400" data-id="15766" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122700_Timelapse.jpg" alt="" class="wp-image-15766" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122700_Timelapse.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122700_Timelapse-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/Screenshot_20260226_122700_Timelapse-922x2048.jpg 922w" sizes="auto, (max-width: 1080px) 100vw, 1080px" /></figure>
<figcaption class="blocks-gallery-caption wp-element-caption"><strong>Abb. 1: App Screenshots</strong></figcaption></figure>



<h2 class="wp-block-heading">Technologie-Stack</h2>



<p>Die&nbsp;App ist&nbsp;als&nbsp;native&nbsp;Android-Anwendung mit Jetpack Compose&nbsp;umgesetzt und&nbsp;nutzt&nbsp;moderne&nbsp;Android-APIs sowie eine&nbsp;klare&nbsp;Schichtung&nbsp;zwischen&nbsp;UI, Logik&nbsp;und Medienverarbeitung.</p>



<ul class="wp-block-list">
<li><strong>UI: Jetpack Compose + Material 3</strong>
<ul class="wp-block-list">
<li>Alle Screens (Projektliste, Details, Dialoge, Konfiguration) sind vollständig in Compose realisiert.</li>



<li>Material-3-Komponenten wie LargeFlexibleTopAppBar, Listen, Cards und Dialoge sorgen für ein konsistentes Look &amp; Feel.</li>



<li>Ein zentrales TimelapseTheme verwaltet App-Theme (Light/Dark), Seed-Farbe und den Palette-Stil.</li>
</ul>
</li>



<li><strong>Material 3 Expressive &amp; Material You</strong>
<ul class="wp-block-list">
<li>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.</li>



<li>Über einen integrierten Color Picker wählen Nutzer:innen eine eigene Akzentfarbe.</li>



<li>Aus dieser Seed-Farbe wird mit Material You ein komplettes Farbschema generiert, das sich konsistent über die gesamte App zieht.</li>



<li>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.</li>
</ul>
</li>



<li><strong>Video-Montage &amp; Bildverarbeitung</strong>
<ul class="wp-block-list">
<li>Die Montage-Logik läuft in einem eigenen Modul:</li>



<li>Bilder werden anhand ihrer EXIF-Daten korrekt ausgerichtet.</li>



<li>Ein Canvas setzt die Frames zusammen, ergänzt Texte (Datum, Kommentare, Wasserzeichen) und kümmert sich um Hintergrundfarbe und Zensurflächen.</li>



<li>Ein Muxer erzeugt daraus ein MP4-Video, gesteuert über Kotlin Flows, die den Fortschritt an die UI melden.</li>



<li>So entsteht aus einer losen Sammlung von Bildern ein stimmiges Timelapse-Video, ohne dass externe Tools nötig sind.</li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading">Material&nbsp;3 Expressive&nbsp;&amp; Material You im&nbsp;Einsatz</h2>



<p>Ein großer&nbsp;Fokus&nbsp;des&nbsp;Projekts lag&nbsp;auf einer&nbsp;modernen, adaptiven&nbsp;UI, die sich&nbsp;nach&nbsp;den&nbsp;Nutzer:innen richtet:</p>



<ul class="wp-block-list">
<li><strong>Dynamische Farbwelten</strong>
<ul class="wp-block-list">
<li>Durch den Seed-Color-Ansatz wirkt die App nicht wie ein statisch durchgestyltes Produkt, sondern wie ein Rahmen, der sich der jeweiligen Geschichte anpasst.</li>



<li>Projekte mit emotionalem Kontext (z. B. Schwangerschaft, Beziehungen, erste Wohnung) profitieren von den kräftigen, expressiven Paletten, die Material 3 bereitstellt.</li>
</ul>
</li>



<li><strong>Einheitliche, weiche Formsprache</strong>
<ul class="wp-block-list">
<li>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.</li>



<li>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.</li>
</ul>
</li>



<li><strong>Konsistentes Theming</strong>
<ul class="wp-block-list">
<li>Alle Bausteine – von Erfassungsdialogs über Erinnerungs-Settings bis hin zu Fortschrittsanzeigen bei Scans und Montage – hängen am gleichen Theme.</li>



<li>Änderungen an Theme, Palette oder Seed-Farbe greifen sofort durch, ohne dass einzelne Screens speziell angepasst werden müssen.</li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading">Herausforderungen&nbsp;&amp; Learnings</h2>



<ul class="wp-block-list">
<li><strong>Balance zwischen Einfachheit und Kontrolle</strong>
<ul class="wp-block-list">
<li>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.</li>



<li>Ein wichtiger Lernpunkt war, die Komplexität hinter klaren Dialogen und wenigen, gut erklärten Optionen zu verstecken.</li>
</ul>
</li>



<li><strong>Stabile, angenehme Timelapse-Videos</strong>
<ul class="wp-block-list">
<li>Kleine Fehler bei Skalierung oder Matrix-Transformation führen schnell zu Sprüngen oder abgeschnittenen Bereichen – hier war viel Feintuning nötig.</li>
</ul>
</li>



<li><strong>Durchgängiges Theming mit Material 3 / Material You</strong>
<ul class="wp-block-list">
<li>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.</li>



<li>Die wichtigste Erkenntnis: Ein zentrales Theme-Objekt vereinfacht langfristig alle Entscheidungen rund um Farben, Typografie und Component-Styling.</li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading">Fazit</h2>



<p>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.</p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/studium-projekte/projekt-timelapse-android-app/">Projekt | Timelapse Android App</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Projekt &#124; bHere &#8211; not on your phone</title>
		<link>https://mobile.fhstp.ac.at/studium/studium-projekte/blog-bhere-not-on-your-phone/</link>
		
		<dc:creator><![CDATA[David Grünberger]]></dc:creator>
		<pubDate>Mon, 23 Feb 2026 23:13:34 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Dokumentation]]></category>
		<category><![CDATA[Native Development]]></category>
		<category><![CDATA[Projekte]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Studium]]></category>
		<category><![CDATA[Tests]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[Bluetooth Low Energy]]></category>
		<category><![CDATA[digital-wellbeing]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[mesh]]></category>
		<category><![CDATA[Next.js]]></category>
		<category><![CDATA[Semesterprojekt]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15451</guid>

					<description><![CDATA[<p>Im 3. Semester des Master-Studiengangs Interactive Technologies (Masterklasse Mobile) stand das große Semestergruppenprojekt an. Als ganze Masterklasse (insgesamt 8 Personen) entwickelten wir über das ganze Semester hinweg bHere, eine soziale App, die Gruppen durch spielerische Mechaniken und Konsequenzen motiviert, beim gemeinsamen Ausgehen das Handy wegzulegen. Aufgabenstellung Die einzige Vorgabe war, dass das Projekt eine technische <a class="read-more" href="https://mobile.fhstp.ac.at/studium/studium-projekte/blog-bhere-not-on-your-phone/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/studium-projekte/blog-bhere-not-on-your-phone/">Projekt | bHere &#8211; not on your phone</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Im 3. Semester des Master-Studiengangs Interactive Technologies (Masterklasse Mobile) stand das große Semestergruppenprojekt an. Als ganze Masterklasse (insgesamt 8 Personen) entwickelten wir über das ganze Semester hinweg bHere, eine soziale App, die Gruppen durch spielerische Mechaniken und Konsequenzen motiviert, beim gemeinsamen Ausgehen das Handy wegzulegen.</p>



<h2 class="wp-block-heading">Aufgabenstellung</h2>



<p>Die einzige Vorgabe war, dass das Projekt eine technische Herausforderung beinhalten muss. Nachdem wir drei Ideen gesammelt hatten, entschieden wir uns dazu, eine App zu entwickeln, die Menschen motiviert, die Zeit wieder mehr mit ihren Liebsten zu genießen, ohne auf das Handy zu schauen. Die technische Herausforderung lag hierbei vor allem in der Verbindung zwischen den Geräten durch Bluetooth, aber auch in der Erstellung einer nativen, production-ready App.</p>



<h3 class="wp-block-heading">MVP</h3>



<p>Anfangs wurde von uns selbst ein MVP mit den grundlegendsten Funktionen definiert. Dazu zählte, sich als User einloggen bzw. registrieren und Sessions starten zu können, in der das Handy nicht verwendet werden sollte. Weiters ist es wichtig, die Verbindung zwischen den Geräten (egal ob NFC, BLE etc.) herzustellen und aufrechtzuerhalten. Die App sollte erkennen, wenn jemand das Handy verwendet, und das den anderen Geräten mitteilen. Wir hatten die Idee, dass die User*innen mehrere Modi spielen können, wobei nur der “Bill Splitter” zum MVP zählt. Dabei sollte man einen Rechnungsbetrag eingeben können und die App zeigt an, wer wie viel schlussendlich zahlen muss, basierend darauf, wie oft jeweils das Handy verwendet wurde. Die App sollte grundsätzlich nativ auf beiden Plattformen (iOS und Android) entwickelt werden und am Ende production-ready sein. Zudem hatten wir uns vorgenommen, eine CI/CD-Pipeline fürs Backend aufzusetzen und eine Website mit rechtlichen Informationen und Links zur App zu entwickeln. Die Website spielt vor allem für die Releases in den Stores eine Rolle.</p>



<h3 class="wp-block-heading">Nice To Have</h3>



<p>Als “Nice To Have” hatten wir uns primär die Erweiterung um 2 zusätzliche Modi vorgenommen: Beim Modus “Pot Lock” legen die Spieler*innen anfänglich fest, welcher Betrag pro Person in einen virtuellen Topf gegeben werden soll, und ab welcher Handynutzungsgrenze (“Threshold”) man seinen Einsatz verliert. Am Schluss teilen sich die Personen, die den Threshold nicht überschritten haben, den Topf. Beim Modus “Group Jar” legt die Gruppe einen Preis pro Handynutzung fest und am Ende der Session sagt die App, wer wie viel insgesamt in die Gruppenkasse zahlen muss.</p>



<p>Weitere Nice-To-Haves waren die Möglichkeit, dass Spieler*innen auch mittendrin einer Session beitreten können (falls jemand sich z. B. verspätet), dass sie sich nach einem Disconnect wieder reconnecten können und dass sie auch früher die Session verlassen können (falls jemand z. B. schon früher nach Hause gehen muss). Abgesehen davon wollten wir, dass die App auch komplett offline funktioniert, damit man sie auch in einer Keller-Bar mit schlechtem Empfang nutzen kann. Zusätzlich wollten wir die App zumindest in einem Store veröffentlichen.</p>



<p>Weiters hatten wir viele coole Ideen, die App durch Features wie Mini Games, einer KI-Funktion zum Rechnung-Scannen (für den Modus “Bill Splitter”), einer History, einem Streak, einer Realtime Abstimmung (für Notfallsituationen, in denen die Handynutzung toleriert wird), einem SSO-Login und einer direkten Zahlung in der App bzw. einer Importfunktion in eine App wie Splitwise oder Tricount zu erweitern, allerdings blieb dafür leider keine Zeit mehr &#8211; zumindest in diesem Semester. <img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f609.png" alt="😉" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>



<h2 class="wp-block-heading">Verwendete Technologien</h2>



<h3 class="wp-block-heading">App</h3>



<p>Die Apps wurden jeweils nativ, in Swift für iOS und Kotlin für Android geschrieben, um Erfahrung im Bereich der nativen App-Entwicklung zu sammeln.</p>



<h3 class="wp-block-heading">Website</h3>



<p>Die Website wurde mit Next.js, einem React-basierten Framework entwickelt. Für das Styling wurde Tailwind CSS verwendet und für eine typsichere Entwicklung haben wir uns für TypeScript entschieden. Wir verwenden eine klassisch komponentenbasierte Architektur mit wiederverwendbaren Komponenten. Für die Containerisierung verwenden wir Docker.</p>



<h2 class="wp-block-heading">Projektablauf</h2>



<p>Die Arbeit am Semesterprojekt wurde in Sprints aufgeteilt (die an Masterklassen-Einheiten orientiert waren, wobei wir intern auch hin und wieder Meetings dazwischen hatten, wenn der Abstand zwischen den Masterklassen Einheiten zu lange war).</p>



<p>Als Projektmanagement-Tool und zum Verwalten des Backlogs wurde die Software &#8220;Linear&#8221; verwendet: vor jedem Sprint definierten wir, wer an welchen Tickets arbeitet und teilten diese im Team auf.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="3819" height="1440" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere6.jpg" alt="" class="wp-image-15471" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere6.jpg 3819w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere6-1536x579.jpg 1536w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere6-2048x772.jpg 2048w" sizes="auto, (max-width: 3819px) 100vw, 3819px" /><figcaption class="wp-element-caption"><strong>Abb. 1: Beispielsprint in unserem Linear-Setup</strong></figcaption></figure>



<h2 class="wp-block-heading">Das Endprodukt</h2>



<p>Wir haben die MVP Funktionalitäten und Nice-To-Haves wie beschrieben umgesetzt, mit den folgenden kleinen Anpassungen: Unsere App funktioniert komplett offline mit Bluetooth LE und die Session ID wird über das Scannen eines QR-Codes unter den Spieler*innen ausgetauscht. Das Backend hatten wir zwar anfänglich aufgesetzt, es wird momentan allerdings nicht benötigt. Zusätzlich zu den 3 Modi gibt es nun auch einen vierten Modus, das “Basic Leaderboard”, mit welchem sich User*innen ihre eigenen Regeln festlegen können. Weiters implementierten wir einen Solomodus, sodass die App nicht nur in der Gruppe, sondern auch alleine (z. B. beim Lernen) verwendet werden kann. Außerdem setzten wir eine coole CI/CD Pipeline für unsere Website auf und veröffentlichten unsere App in nicht nur einem, sondern in beiden Stores (Apple App Store, Google Play Store).</p>



<p class="has-medium-font-size"><a href="https://apps.apple.com/de/app/bhere-not-on-your-phone/id6757390918" target="_blank" rel="noreferrer noopener">Link zum iOS App Store-Eintrag</a></p>



<p class="has-medium-font-size"><a href="https://play.google.com/store/apps/details?id=app.bhere" target="_blank" rel="noreferrer noopener">Link zum Android App Store-Eintrag</a></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1885" height="1336" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere1.jpg" alt="" class="wp-image-15457" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere1.jpg 1885w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere1-1536x1089.jpg 1536w" sizes="auto, (max-width: 1885px) 100vw, 1885px" /><figcaption class="wp-element-caption"><strong>Abb. 2: Produkt-Teaser aus dem App Store</strong></figcaption></figure>



<p>Beim ersten Öffnen der App wird man durch ein Onboarding geleitet, in welchem die App kurz vorgestellt wird. Hierbei muss man auch einen Namen angeben, welcher innerhalb der App für einen selbst verwendet werden soll. Schließlich landet man am Homescreen (Abb. 3, links). Über das Profil-Icon rechts oben hat man die Möglichkeit, den festgelegten Namen zu ändern. Über den Button “Start New Session” startet man eine neue Gruppensession und kommt zum New Session Screen (Abb. 3, Mitte) &#8211; diesen Button muss allerdings nur eine Person in der Gruppe klicken. Alle anderen klicken auf “Join Session”, welcher die Kamera öffnet, um den generierten QR-Code zu scannen, welcher einen dann auch zum New Session Screen weiterleitet. Der Button “Go Solo” führt zum Solomodus, welcher weiter unten genauer beschrieben wird.</p>



<p>Am New Session Screen werden die aktuellen Teilnehmer*innen und der ausgewählte Modus angezeigt. Der “Host” der Session (die Person, die auf “Start New Session” geklickt hat) hat zudem die Möglichkeit, den Modus auszuwählen (Abb. 3, rechts) und notwendige Einstellungen vorzunehmen (z. B. den Preis pro Nutzung für den Group Jar Modus zu setzen).</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1891" height="1144" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere2.jpg" alt="" class="wp-image-15459" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere2.jpg 1891w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere2-1536x929.jpg 1536w" sizes="auto, (max-width: 1891px) 100vw, 1891px" /><figcaption class="wp-element-caption"><strong>Abb. 3: iOS App Screenshots</strong></figcaption></figure>



<p>Wie angekündigt, gibt es auch einen Solomodus. Mit dem Klick auf “Go Solo” am Home Screen kommt man zum New Focus Session Screen (Abb. 4, links), welcher wie ein Group Jar Modus funktioniert &#8211; man muss also den Preis pro Nutzung festlegen. Während der Session (Focus Session Screen, Abb. 4, rechts) sieht man die gesamte Nutzungsanzahl und wie viel Geld man sich in das eigene Sparschwein zahlen müssen wird.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1887" height="1144" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere3.jpg" alt="" class="wp-image-15460" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere3.jpg 1887w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere3-1536x931.jpg 1536w" sizes="auto, (max-width: 1887px) 100vw, 1887px" /><figcaption class="wp-element-caption"><strong>Abb. 4: iOS App Screenshots</strong></figcaption></figure>



<p>Ein weiteres spannendes Feature ist das Starten des Solomodus durch das Ablegen des Handys auf eine bestimmte Stelle. Wir stellen uns den Ablauf für User*innen folgendermaßen vor:</p>



<ol class="wp-block-list">
<li>User*in setzt sich an den Schreibtisch.</li>



<li>User*in legt das Handy auf eine Ablagefläche.</li>



<li>bHere App öffnet sich und Solomodus wird automatisch gestartet.</li>
</ol>



<figure class="wp-block-video"><video controls src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/NFC-Solomodus.mp4"></video><figcaption class="wp-element-caption"><strong>Video. 1: Starten des Solomodus per NFC-Tag</strong></figcaption></figure>



<p>Technisch funktioniert es mit einem NFC-Tag, der einen Deeplink enthält. Für die Projektevernissage 2026 haben wir 100 Tags (NTAG215) bestellt, beschrieben und hergeschenkt. Das Feature haben wir aktuell nur für Android implementiert.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="3382" height="1378" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere4.jpg" alt="" class="wp-image-15467" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere4.jpg 3382w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere4-1536x626.jpg 1536w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere4-2048x834.jpg 2048w" sizes="auto, (max-width: 3382px) 100vw, 3382px" /><figcaption class="wp-element-caption"><strong>Abb. 5: Android App Screenshots (Dark Mode Support)</strong></figcaption></figure>



<p>Die App ist auf beiden Plattformen sowohl in Light Mode, als auch in Dark Mode, verfügbar. </p>



<h2 class="wp-block-heading">Feedback und Verbesserungsmöglichkeiten</h2>



<p>Durch die Teilnahme an der Projektvernissage konnten wir wertvolles User-Feedback für potentielle zukünftige Erweiterungen und Verbesserungen der App sammeln: der wohl größte Pain Point der aktuellen Lösung ist die Latenz des implementierten BLE-Mesh. Vor allem bei Sessions mit einer hohen Teilnehmeranzahl kann es aktuell bis zu mehreren Minuten dauern, bis alle Daten zwischen allen Geräten ausgetauscht wurden. Sollte das Projekt noch weiterentwickelt werden, wäre das wohl eines der ersten Tickets, das umgesetzt werden müsste.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1768" height="1222" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere5.jpg" alt="" class="wp-image-15469" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere5.jpg 1768w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/bhere5-1536x1062.jpg 1536w" sizes="auto, (max-width: 1768px) 100vw, 1768px" /><figcaption class="wp-element-caption"><strong>Abb. 6: Einer unserer beiden Stände auf der Projektvernissage</strong></figcaption></figure>



<h2 class="wp-block-heading">Fazit aller Teilnehmer*innen</h2>



<p>Im folgenden Abschnitt möchten wir noch unser Fazit und unsere Erfahrungen teilen, die wir im Zuge dieses Semestergruppenprojekts sammeln konnten.</p>



<h3 class="wp-block-heading">David</h3>



<p>Die Arbeit an bHere war für mich eine intensive und lehrreiche Erfahrung. Technisch gesehen war die Implementierung der Bluetooth-Low-Energy-Kommunikation sicherlich die größte Hürde. Es hat einige Iterationen und Research gebraucht, weshalb ich umso stolzer bin, dass wir schlussendlich ein funktionierendes BLE-Mesh auf die Beine stellen konnten.</p>



<p>Eine wichtige Lektion war für mich die Herausforderung der parallelen Entwicklung auf zwei Plattformen. Es zeigte sich schnell: Wenn Details nicht vorab klar definiert sind, kann es passieren, dass sie auf iOS und Android unterschiedlich umgesetzt werden. Das führte dazu, dass die letzten Wochen und Tage vor der Abgabe besonders intensiv waren, da wir viele dieser kleinen Unstimmigkeiten noch angleichen mussten. Auch den Prozess der Veröffentlichung hatte ich unterschätzt – insbesondere die Vorbereitung des Store-Eintrags und die zwingende 14-tägige Testphase im Google Play Store benötigen mehr Vorlaufzeit, als man zu Beginn vermuten würde.</p>



<h3 class="wp-block-heading">Andreas</h3>



<p>Anders als bei der einwöchigen WildWeek, die wir im Laufe des 2. Semesters hatten, wurden wir in diesem Semester in einem technisch herausfordernden Semesterprojekt auf die Probe gestellt. Dies forderte ein hohes Maß an Eigenverantwortung und gute Teamkommunikation. Insbesondere, weil wir die App bhere auf zwei Plattformen (Android und iOS) gleichzeitig aufgebaut haben. Die Tatsache, dass wir uns nicht wie in der WildWeek auf direkten Wege schnell austauschen konnten, machte das Projekt umso lehrreicher, weil es auch nebenbei die heutige Home Office Arbeitsweise gut widerspiegelt hat.<br><br>Persönlich habe ich mich speziell im Bereich der Android App Entwicklung einbringen können. Dort war ich mit einigen Kollegen an der Gestaltung der UI unserer Screens dran. Neben dem Entwicklungs-Part habe ich auch an der Gestaltung unseres App-Logos beigetragen und fürs Marketing die Bierdeckeln designed, welche wir dann als Merch an die Interessent:innen verteilt haben. Ich fand die Tasks sehr abwechslungsreich und konnte mich erstmals tiefgründig mit der Programmiersprache Kotlin auseinandersetzen. Erste wirkliche Programmiererfahrung von Apps hatte ich damals noch mit Java.<br><br>Rückblickend betrachtet bin ich froh gewesen, mit unserem Team eine solch innovative App auf die Beine gestellt zu haben. Die Umsetzung hat gezeigt, dass wir mit vielen guten Ideen und einigem Kreativitätsvermögen, auch technisch herausfordernde Anforderungen meistern können. Nichtsdestotrotz ist zu erwähnen, dass der Weg dorthin nicht immer einfach war. Durch die Parallelentwicklung (Android/iOS) mussten wir ständig so up-to-date sein, dass auf beiden Systemen ein ziemlich einheitliches Design und verhalten aufgebaut werden konnte. Außerdem waren zahlreiche Testläufe nötig, bis wir eine stabile, plattformübergreifende Lösung gefunden hatten, um zwischen allen Endgeräten ein BLE-Mesh aufzubauen, über das die Kommunikation schließlich zuverlässig stattfinden konnte.</p>



<h3 class="wp-block-heading">Felix</h3>



<p>Dieses Gruppen-Semesterprojekt war für mich eine sehr spannende Herausforderung, weil wir in einem großen Team eine komplette App für iOS und Android entwickelt haben und diese dann auch veröffentlicht haben. Im Vergleich zu der Wild Programming Week war es finde ich viel anstrengender, weil wir einfach über einen langen Zeitraum uns immer koordinieren mussten. Aber im Großen und Ganzen hat alles gut funktioniert.</p>



<p>Zum Start haben wir zuerst ein Backend entwickelt für User Anmeldung, was dann aber nicht verwendet wurde, weil wir die App offline verwenden wollten, das war anfangs frustrierend, weil dabei Zeit draufgegangen ist, aber natürlich verständlich. Dann habe ich auch ziemlich am Anfang eine Website entwickelt, die, wie ich finde, sehr gut geworden ist. Ansonsten habe ich im Android Team und beim Merch für die Projekte Vernissage geholfen. Das fand ich am spannendsten, da ich Kotlin besser kennenlernen konnte.</p>



<p>Das gesamte Projekt hat mir sehr gut gefallen, vor allem weil es ein sehr reales und arbeitsnahes Projekt war. Wir waren ein gutes Team und haben gute Meetings abgehalten. Es hat alles gut funktioniert, wenn auch nicht ohne Schwierigkeiten.</p>



<h3 class="wp-block-heading">Caroline</h3>



<p>Im Vergleich zur Extreme Programming Week im 2. Semester hatten wir diesmal mehr Zeit fürs Einarbeiten und Ausprobieren, wobei die Entwicklung einer nativen App auf zwei unterschiedlichen Plattformen dafür neue Herausforderungen mit sich brachte. Ich habe hauptsächlich gemeinsam mit Katharina an der iOS-Version gearbeitet, was im Pair-Programming sehr gut funktioniert hat. Besonders hilfreich war dabei, dass sie bereits mehr Erfahrung mit Swift hatte, wodurch ich mich trotz anfänglicher Unsicherheiten schnell einarbeiten konnte.</p>



<p>Eine der größten Herausforderungen war die Umsetzung der Bluetooth-Low-Energy-Kommunikation. Da es auf iOS im Wesentlichen nur Core Bluetooth gibt, mussten wir viele Teile selbst erarbeiten. Zunächst mussten wir die Grundlagen von BLE verstehen und verschiedene Ansätze ausprobieren, bis wir zu einer funktionierenden Lösung kamen, die über mehrere Geräte hinweg funktioniert. Besonders hilfreich war Davids erste Umsetzung eines Meshs auf Android, auch wenn die Übertragung der Logik auf iOS aufgrund plattformspezifischer Unterschiede nicht einfach war.</p>



<p>Zusätzlich haben wir die iOS-Version der App im App Store veröffentlicht, was für mich eine neue und spannende Erfahrung war. Dabei habe ich einen Einblick in den Release-Prozess sowie die dafür notwendigen Schritte und Anforderungen von Apple bekommen.</p>



<p>Insgesamt hat mir das Projekt nochmal gezeigt, wie wichtig klare Absprachen im Team sowie ein möglichst fertiges und einheitliches Design zu Beginn eines Projekts sind. Fehlende oder unklare Definitionen führen später nämlich zu Mehraufwand und Inkonsistenzen zwischen den Plattformen. Rückblickend war das Projekt jedoch sehr lehrreich und hat mir sowohl technisch als auch im Bereich Teamarbeit wertvolle Erfahrungen gebracht.</p>



<h3 class="wp-block-heading">Sebastian</h3>



<p>Auch wenn wir im zweiten Semester die Wild Programming Week hatten, in welcher wir eine App innerhalb einer Woche entwickeln mussten, war dieses Semesterprojekt doch noch einmal ein ganz neues Erlebnis. Eine App über ein ganzes Semester zu entwickeln hat das Ganze leichter wie auch schwerer gestaltet.&nbsp;</p>



<p>Durch den Zeitrahmen hatten wir um einiges mehr Zeit zu entwickeln, nicht wie in der Wild Week. Aber auch durch diesen größeren Zeitrahmen wurde es schwerer, da es zum einen natürlich den Projektumfang erhöht hat. Gleichzeitig war es auch um einiges schwerer, den nötigen Arbeitsaufwand einzuschätzen, wodurch man zum Beispiel zu Beginn die Arbeitspakete zu klein für einen Sprint geschätzt hat.&nbsp;</p>



<p>Ich war vor allem mit UI Umsetzungen auf Android, zusammen mit der Implementierung der Nutzungserkennung zuständig. Bei der UI Umsetzung der die größte Herausforderung die Abstimmung zwischen Android und iOS. Zwar sind beide Plattformen von der gleichen Basis ausgegangen, auf beiden gab es aber kleiner Änderungen, welche dafür gesorgt haben, dass das Design nicht komplett einstimmig waren und hat extra Arbeit gegen Ende benötigt zum Anpassen.</p>



<p>Im Ganzen war es aber wieder ein gutes Erlebnis, mit einem tollen Team. Das ganze kam mit wichtigen Erfahrungen, wie Programmiersprachen Erlernung, App Store Einrichtungen und auch das erneute zeigen, wie wichtig gute Kommunikation und Abstimmung ist, um extra Arbeit zu vermeiden. Ich wäre jederzeit bereit, noch ein Projekt mit diesem Team zu machen.</p>



<h3 class="wp-block-heading">Jan</h3>



<p>Es war sehr nett, mit allen Studienkollegen der Masterklasse ein Projekt umzusetzen. Spannend war, wie sich jeder mit seinen Stärken eingebracht hat. Gerne hätte ich noch mehr an diesem Projekt gearbeitet und dafür auf andere Lehrveranstaltungen verzichtet.</p>



<p>Das Projekt hat sich im Laufe der Zeit in eine spannende Richtung entwickelt. Features, die wir anfangs eingeplant hatten, haben sich bei genauerer Betrachtung als nicht wichtig oder sogar als störend erwiesen und wurden daher gestrichen. Ich bin beispielsweise sehr froh über die Entscheidung, dass die App zu 100% offline funktioniert und es kein Backend gibt. Das ermöglicht den flexiblen Einsatz der App, zum Beispiel in Kellerlokalen ohne Mobilfunk, und hat den Vorteil, dass User ohne lästige Account-Erstellung direkt loslegen können. Für uns als Team bedeutet der Wegfall eines Backends, dass wir die Applikation kostengünstiger und mit weniger Aufwand betreiben können.</p>



<p>Wir können stolz darauf sein, dass wir eine neuartige und wirklich nützliche Applikation geschaffen haben, die ausreichend stabil läuft. Natürlich sehen wir noch einige offene Themen, die wir gerne angehen würden. Schade, dass wir vorerst kaum Zeit mehr für bHere haben werden, da wir uns nun auf unsere Masterarbeiten konzentrieren müssen.</p>



<h3 class="wp-block-heading">Katharina</h3>



<p>Das Projekt &#8220;bHere&#8221; war für mich eine besonders wertvolle Erfahrung. In meiner Rolle als Projektleiterin übernahm ich die Moderation der Sprint-Meetings, repräsentierte die Gruppe gegenüber unseren Stakeholdern (unseren Masterklassenleitern) und behielt den Gesamtüberblick über Fortschritt und offene Punkte.</p>



<p>Zusätzlich war ich gemeinsam mit Caro für die iOS-Entwicklung verantwortlich. Wir haben intensiv im Pair Programming gearbeitet und unsere Zusammenarbeit war dabei sehr produktiv. Besonders spannend war die Integration der BLE-Funktionalität – dank Davids Vorarbeit konnten wir diese auch erfolgreich in die iOS-App einbinden. Die BLE-Kommunikation auch plattformübergreifend zwischen iOS und Android zum Laufen zu bringen, stellte allerdings eine technische Herausforderung dar, da sich insbesondere das Debugging der Verbindung als nicht so trivial erwies.</p>



<p>Zeitlich war das Semester ebenfalls herausfordernder als gedacht. Im Vergleich zur &#8220;Wild Week&#8221; erforderte dieses Semestergruppenprojekt ein noch höheres Maß an Eigenorganisation und Abstimmung. Gerade gegen Ende kamen viele Aufgaben parallel zusammen, wodurch Priorisierung und Struktur besonders wichtig wurden. Für zukünftige Projekte nehme ich außerdem mit, wie wichtig ein frühzeitig klar definiertes und abgestimmtes Design ist, um plattformübergreifend noch effizienter arbeiten zu können.</p>



<p>Ein besonderes Highlight war für mich die erstmalige App-Einreichung im App Store. Der umfangreiche Einreichungsprozess hat uns auf der Zielgeraden noch einmal intensiv gefordert, ich konnte daraus aber auch sehr viel lernen.</p>



<p>Insgesamt habe ich sehr viel Arbeit und Engagement in dieses Projekt investiert – sowohl in die technische Umsetzung der iOS-App, als auch in die Organisation und Qualitätssicherung des ganzen Projekts. Umso stolzer bin ich auf das entstandene Produkt und auf das, was wir als Team erreicht haben.&nbsp;</p>



<h3 class="wp-block-heading has-medium-font-size">Matthias</h3>



<p>Das Projekt hat mir einen spannenden Einblick gegeben, wie komplex die Entwicklung einer mobilen App werden kann, wenn sie plattformübergreifend funktionieren und gleichzeitig komplett offline nutzbar sein soll. Besonders spannend fand ich es, gemeinsam im Team einen Lösungsansatz für unser Bluetooth-Mesh-System zu suchen. Vor allem, weil es für unseren Anwendungsfall keine bestehende Lösung gab. Ich habe dabei auch versucht, ein eigenes Konzept zu entwickeln. Dieses war zwar noch nicht vollständig ausgereift und hätte mehr Zeit benötigt, hat mir aber geholfen, die technischen Herausforderungen besser zu verstehen und viel von den Lösungsansätzen der anderen im Team zu lernen.</p>



<p>Intensiver beschäftigt habe ich mich mit der Umsetzung der Nutzungserkennung unter iOS. Ziel war es, das Verhalten der App während der Nutzung besser nachvollziehen und entsprechende Daten erfassen zu können. Dabei musste darauf geachtet werden, dass möglichst ähnliche Informationen wie auf Android gesammelt werden, damit die Nutzung plattformübergreifend vergleichbar bleibt. Dadurch konnte ich mich stärker mit dem Verhalten von Apps unter iOS auseinandersetzen und besser verstehen, wie Apps im Hintergrund arbeiten und wie solche Informationen sinnvoll für die Weiterentwicklung eines Produkts genutzt werden können.</p>



<p>Außerdem hatte ich die Möglichkeit, den Prozess rund um die Veröffentlichung der App im Apple App Store aus nächster Nähe mitzuerleben. Es war spannend zu sehen, welche Schritte und Anforderungen notwendig sind, bis eine App tatsächlich eingereicht und veröffentlicht werden kann.</p>



<p>Mit am meisten Spaß haben mir die Diskussionen rund um die User Experience der App gemacht. In den Meetings habe ich gemerkt, dass mich dieser Bereich besonders interessiert und ich mich dort auch am besten einbringen kann. Die Kombination aus technischen Überlegungen und der Frage, wie sich eine App für Nutzer:innen möglichst intuitiv bedienen lässt, fand ich besonders spannend.</p>



<p>Während des Projekts bin ich mit vielen neuen Themen in Berührung gekommen und konnte dabei viel lernen, sowohl technisch als auch in der Zusammenarbeit im Team. Gleichzeitig war die Arbeit durch die vielen gemeinsamen Lösungsansätze sehr motivierend, wodurch das Lernen fast nebenbei passiert ist.</p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/studium-projekte/blog-bhere-not-on-your-phone/">Projekt | bHere &#8211; not on your phone</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		<enclosure url="https://mobile.fhstp.ac.at/wp-content/uploads/2026/02/NFC-Solomodus.mp4" length="3462174" type="video/mp4" />

			</item>
		<item>
		<title>Projekt &#124; Powda Club-Dashboard</title>
		<link>https://mobile.fhstp.ac.at/development/projekt-powda-club-dashboard/</link>
		
		<dc:creator><![CDATA[David Grünberger]]></dc:creator>
		<pubDate>Thu, 16 Oct 2025 01:25:15 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Dokumentation]]></category>
		<category><![CDATA[Projekte]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Studium]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[clerk]]></category>
		<category><![CDATA[convex]]></category>
		<category><![CDATA[Next.js]]></category>
		<category><![CDATA[Semesterprojekt]]></category>
		<category><![CDATA[shadcn]]></category>
		<category><![CDATA[stripe]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[webhooks]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=14812</guid>

					<description><![CDATA[<p>Im Rahmen des Semesterprojekts im zweiten Semester der Masterklasse Mobile habe ich ein Club Dashboard entwickelt – eine Webanwendung, mit der Skiclubs ihre Ausfahrten verwalten und Teilnehmer:innen direkt online buchen und bezahlen lassen können.Ziel des Projekts war es, einen funktionsfähigen MVP (Minimum Viable Product) zu erstellen, der eine vollständige End-to-End-Integration für Zahlungen bietet – von <a class="read-more" href="https://mobile.fhstp.ac.at/development/projekt-powda-club-dashboard/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/development/projekt-powda-club-dashboard/">Projekt | Powda Club-Dashboard</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Im Rahmen des Semesterprojekts im zweiten Semester der Masterklasse Mobile habe ich ein <strong>Club Dashboard</strong> entwickelt – eine Webanwendung, mit der Skiclubs ihre <strong>Ausfahrten verwalten</strong> und <strong>Teilnehmer:innen direkt online buchen und bezahlen</strong> lassen können.<br>Ziel des Projekts war es, einen <strong>funktionsfähigen MVP (Minimum Viable Product)</strong> zu erstellen, der eine vollständige End-to-End-Integration für Zahlungen bietet – von der Erstellung der Events bis zur erfolgreichen Bezahlung über die Website.</p>



<p>In diesem Beitrag möchte ich den Aufbau der Anwendung, die verwendeten Technologien sowie einige Herausforderungen und Learnings während der Umsetzung vorstellen.</p>



<h2 class="wp-block-heading">Technologie-Stack</h2>



<p>Das Club Dashboard wurde als moderne Webanwendung mit Fokus auf Skalierbarkeit, Sicherheit und einfache Erweiterbarkeit entwickelt.<br>Hier ein Überblick über die zentralen Technologien:</p>



<h3 class="wp-block-heading">Framework: Next.js (App Router)</h3>



<p>Für das Frontend kam <strong>Next.js</strong> mit dem neuen <strong>App Router</strong> zum Einsatz. Diese Architektur erlaubt serverseitiges Rendering (SSR), API-Routen und eine saubere Trennung von Client- und Server-Komponenten. Dadurch konnte ich sowohl UI-Logik als auch Backend-Funktionalität innerhalb eines Frameworks umsetzen.</p>



<p><strong>Vorteile:</strong></p>



<ul class="wp-block-list">
<li>Serverseitiges Rendering für bessere Performance und SEO</li>



<li>Integrierte API-Routen für serverseitige Logik (z. B. Payment Handling)</li>



<li>Moderne Struktur durch den App Router</li>
</ul>



<h3 class="wp-block-heading">Data Layer: Convex</h3>



<p>Anstatt einer klassischen REST- oder GraphQL-API habe ich mich für <strong>Convex</strong> entschieden – eine innovative Backend-as-a-Service-Lösung, die reaktive Datenabfragen, serverseitige Funktionen und Auth-Integration out of the box bietet.</p>



<p><strong>Convex</strong> ermöglicht es, Daten- und Serverlogik in TypeScript zu schreiben und nahtlos mit dem Frontend zu verbinden. Dadurch entfällt ein Großteil der sonst notwendigen API- und Datenbankkonfiguration.</p>



<h3 class="wp-block-heading">Styling &amp; UI: TailwindCSS &amp; shadcn</h3>



<p>Für das Styling habe ich auf <strong>TailwindCSS</strong> gesetzt – ein Utility-First-CSS-Framework, das schnelles Prototyping und einheitliches Design ermöglicht.<br>Zusätzlich kam <strong>shadcn</strong> zum Einsatz, eine leichtgewichtige Component Library mit Fokus auf Barrierefreiheit, Dark Mode und Customizability.</p>



<p><strong>Vorteile dieser Kombination:</strong></p>



<ul class="wp-block-list">
<li>Konsistentes UI mit klarer Design-Sprache</li>



<li>Wiederverwendbare Komponenten</li>



<li>Effiziente Entwicklung durch Utility-Klassen</li>



<li>Code Ownership: Components werden einfach ins Projekt kopiert</li>
</ul>



<h3 class="wp-block-heading">Authentifizierung: Clerk</h3>



<p>Die Authentifizierung wird durch <strong>Clerk</strong> umgesetzt – denselben Anbieter, den ich bereits im ersten Semesterprojekt genutzt habe. Clerk bietet ein modernes User Management inklusive OAuth-Integration und JWT-Handling, was eine einfache Verbindung mit Convex und Next.js ermöglicht.</p>



<p>Durch Clerk konnte ich schnell eine sichere Login-, Logout- und Session-Logik aufsetzen, ohne selbst komplexe Authentifizierungssysteme implementieren zu müssen.</p>



<h3 class="wp-block-heading">Payment Provider: Stripe</h3>



<p>Ein zentrales Feature dieses Projekts war die <strong>Integration von Stripe</strong> als Payment Provider. Nutzer:innen können direkt über die Website eine Skiausfahrt buchen und bezahlen.<br>Dazu wurde das Stripe Checkout-System in die App eingebunden – inklusive <strong>Webhook-Handling</strong>, um Payment-Status-Änderungen serverseitig zu verarbeiten.</p>



<p><strong>Beispielhafte Flows:</strong></p>



<ul class="wp-block-list">
<li>User wählt eine Ausfahrt aus → Klick auf „Buchen“</li>



<li>Stripe Checkout öffnet sich → Zahlung erfolgt</li>



<li>Stripe sendet einen Webhook an das System → Buchung wird bestätigt und gespeichert</li>
</ul>



<p>Diese End-to-End-Integration war der Kern des Projekts und erforderte ein gutes Zusammenspiel zwischen <strong>Frontend, Convex Backend und Stripe Webhooks</strong>.</p>



<h2 class="wp-block-heading">Kommunikation &amp; Webhooks</h2>



<p>Ein spannender Teil des Projekts war die <strong>Kommunikation zwischen den verschiedenen Systemen</strong>.<br>Sowohl Stripe als auch Clerk arbeiten mit <strong>Webhooks</strong>, um Echtzeit-Informationen an das System zu senden (z. B. erfolgreiche Zahlungen oder neue Benutzer).<br>Die Webhooks werden über API-Routen in Next.js empfangen und anschließend in Convex weiterverarbeitet – beispielsweise um Buchungsdaten zu aktualisieren oder Rechnungen zu speichern.</p>



<h2 class="wp-block-heading">Herausforderungen &amp; Learnings</h2>



<p>Während der Entwicklung gab es mehrere interessante Herausforderungen:</p>



<ul class="wp-block-list">
<li><strong>Webhook-Handling:</strong> Das Zusammenspiel von Stripe, Clerk und Convex erfordert saubere Trennung von Sicherheits- und Logikschichten. Insbesondere das Validieren von Webhook-Signaturen war anfänglich fehleranfällig.</li>



<li><strong>Datenmodellierung in Convex:</strong> Da Convex ein eigenes Datenmodell nutzt, war es notwendig, sich in dessen Schema-System einzuarbeiten.</li>



<li><strong>SSR + Client-Komponenten:</strong> Der Wechsel zwischen Server- und Client-Komponenten im Next.js App Router war zunächst ungewohnt und erforderte ein gutes Verständnis des Rendering-Modells.</li>
</ul>



<p>Trotz dieser Hürden war die Entwicklung äußerst lehrreich – vor allem im Hinblick auf <strong>Payment-Flows, Security und API-Kommunikation</strong>.</p>



<h2 class="wp-block-heading">Fazit</h2>



<p>Das Club Dashboard war ein spannendes Projekt, das mir erstmals die Umsetzung einer <strong>vollständigen End-to-End-Integration mit Stripe</strong> ermöglicht hat.<br>Durch den Einsatz moderner Tools wie <strong>Next.js, Convex, Clerk und Stripe</strong> konnte ich einen funktionalen MVP umsetzen, der reale Buchungsprozesse abbildet.</p>



<p>Besonders interessant war zu sehen, wie gut sich die verschiedenen Services über <strong>Webhooks und API-Routen</strong> integrieren lassen – und wie wichtig saubere Datenflüsse und Sicherheit in einem Payment-System sind.</p>



<p>Im nächsten Schritt plane ich, das Dashboard um weitere Funktionalitäten zu erweitern, um einem produktionsreifen Produkt näher zu kommen, das sich veröffentlichen und vertreiben lässt.</p>



<h2 class="wp-block-heading">Screenshots</h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1996" height="1594" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/landing_page.jpg" alt="" class="wp-image-14844" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/landing_page.jpg 1996w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/landing_page-1536x1227.jpg 1536w" sizes="auto, (max-width: 1996px) 100vw, 1996px" /><figcaption class="wp-element-caption">Screenshot: Landing Page</figcaption></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1993" height="1591" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/ausfahrten.png" alt="" class="wp-image-14845" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/ausfahrten.png 1993w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/ausfahrten-1536x1226.png 1536w" sizes="auto, (max-width: 1993px) 100vw, 1993px" /><figcaption class="wp-element-caption">Screenshot: Ausfahrtenliste mit Buchungsoption</figcaption></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="2011" height="1600" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/dashboard.png" alt="" class="wp-image-14847" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/dashboard.png 2011w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/dashboard-1536x1222.png 1536w" sizes="auto, (max-width: 2011px) 100vw, 2011px" /><figcaption class="wp-element-caption">Screenshot: Ausfahrtenverwaltung am Dashboard</figcaption></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1990" height="1429" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/zahlungsinfos.png" alt="" class="wp-image-14848" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/zahlungsinfos.png 1990w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/zahlungsinfos-1536x1103.png 1536w" sizes="auto, (max-width: 1990px) 100vw, 1990px" /><figcaption class="wp-element-caption">Screenshot: Eingebettete Stripe Account Komponenten am Dashboard</figcaption></figure>



<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/development/projekt-powda-club-dashboard/">Projekt | Powda Club-Dashboard</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>TFG &#124; ergo4All Forschungsprojekt</title>
		<link>https://mobile.fhstp.ac.at/allgemein/tfg-ergo4all-forschungsprojekt/</link>
		
		<dc:creator><![CDATA[Andreas Kaiser]]></dc:creator>
		<pubDate>Sun, 31 Aug 2025 21:53:53 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Forschung]]></category>
		<category><![CDATA[Projekte]]></category>
		<category><![CDATA[Studium]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=14672</guid>

					<description><![CDATA[<p>Im Rahmen der Lehrveranstaltung Tun, Forschen &#38; Gründen (TFG) im 2. Mastersemester stand die Entscheidung an, entweder eine eigene Gründungsidee zu entwickeln, an einem Projekt aus einer anderen Masterklasse mitzuwirken oder ein Forschungsprojekt aus dem Institut für Creative\Media/Technologies zu unterstützen. Jeweils mit einem Arbeitsaufwand von rund 80 Stunden verbunden. Meine Wahl fiel auf das Forschungsprojekt <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/tfg-ergo4all-forschungsprojekt/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/tfg-ergo4all-forschungsprojekt/">TFG | ergo4All Forschungsprojekt</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Im Rahmen der Lehrveranstaltung <em>Tun, Forschen &amp; Gründen</em> (TFG) im 2. Mastersemester stand die Entscheidung an, entweder eine eigene Gründungsidee zu entwickeln, an einem Projekt aus einer anderen Masterklasse mitzuwirken oder ein Forschungsprojekt aus dem Institut für Creative\Media/Technologies zu unterstützen. Jeweils mit einem Arbeitsaufwand von rund 80 Stunden verbunden. Meine Wahl fiel auf das Forschungsprojekt ergo4All, das ich von April 2025 bis August 2025 tatkräftig unterstützte. Das Team setzt sich aus Leuten einer Forschungsprojektgruppe aus dem Institut für Managementwissenschaften der TU Wien und FH St. Pölten ArbeiterInnen zusammen.</p>



<p>Mit ergo4All soll eine digitale Lösung entwickelt werden, die ergonomisches Wissen und konkrete Anpassungsvorschläge allen Menschen zugänglich macht – unabhängig von Alter, körperlichen Voraussetzungen oder digitaler Kompetenz. Innerhalb der App steht dabei das Ziel im Vordergrund, individuelle Empfehlungen für gesundes Arbeiten und Alltagsbewegungen leicht verständlich und barrierearm bereitzustellen.<br>Je nach, welches Szenario (Heben/Tragen, etc.) man in der App wählt, bewertet die KI (gestützt auf maschinelles Sehen und den anerkannten RULA‑Score) Körperhaltungen aus einem kurzen in Echtzeit dokumentierten Video. Anschließend liefert sie dem/der NutzerIn leicht verständliche Hinweise zur Verbesserung der Haltung. Alle Daten werden lokal auf dem Gerät verarbeitet, daher findet keine Cloud‑Speicherung oder Tracking statt.</p>



<h2 class="wp-block-heading">Zielsetzung</h2>



<p>Am Anfang meiner Projektmitarbeit umfassten meine Aufgaben das Redesign bestehender App-Screens sowie die Erstellung neuer Screens mit entsprechender Navigation auf Basis des damals erstmalig überabeiteten Figma-Mockups. Dieses ist hier zu sehen:</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1540" height="451" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/08/image-1540x451.jpg" alt="" class="wp-image-14685"/></figure>



<p>Zusätzlich war ich beauftragt die Lokalisierung von Texten, Buttons und co. für Deutsch und Englisch über ein eigenes Lokalisierungsfile vorzunehmen. Im weiteren Verlauf wurde ich gebeten, mir auf einem eigenen GIT-Branch anzuschauen, wie die App für IOS gebuildet werden kann, um lauffähig zu sein. Zum Abschluss lag die Verantwortung für den Aufbau des Onboardings gemäß eines vorab abgestimmten Konzepts bei mir.</p>



<h2 class="wp-block-heading">Durchführung</h2>



<p>In ersten Schritten wurde ich von Dipl.-Ing. Ramon Brullo BSc technisch in die App eingeführt. Dabei wurde die klare Code-Struktur der App erklärt. Es handelt sich hierbei um eine Flutter-App, dessen Hauptsprache die Programmiersprache Dart ist </p>



<p></p>



<p>In den ersten Schritten wurde ich von Dipl.-Ing. Ramon Brullo, BSc technisch in die App eingeführt, wobei insbesondere die klare Code-Struktur einer Flutter-App (Programmiersprache Dart) erläutert wurde. Die Lokalisation erfolgt über ein JSON-File, die Codeverwaltung über GIT mit Sub-Branches und einer regelmäßigen Release-Pipeline. Die Commits orientieren sich am Standard der <a href="https://www.conventionalcommits.org/en/v1.0.0/">Conventional Commits</a>, die wiederum die Release-Pipeline anstößt.<br>Ich nahm bei den fast jeden Dienstag stattfindenden Meetings zwischen unserem Projektteam und TU-KollegInnen teil, in denen Status und Fortschritte abgestimmt wurden. Anfangs lag mein Schwerpunkt auf der App-Lokalisation und dem Verständnis des Codes, bevor ich am Frontend größere Änderungen vornahm und regelmäßig Commits einbrachte. Für design-relevante Themen war Vivian Seidl BSc zuständig, mit der ich mich eng abstimmte.</p>



<p>Ein größeres Vor-Ort-Meeting Mitte Juni diente dazu, die Planung bis in den Herbst hinein gemeinsam mit den TU-KollegInnen festzulegen. Zudem habe ich mir in Flutter angeschaut, wie man einen iOS-Build macht und am Onboarding beteiligt. Das Frontend des Onboarding übernahm ich ganz, während Ramon die Backend-Einbindung in den Appflow übernahm.</p>



<h2 class="wp-block-heading">Ergebnisse</h2>



<p>Nachdem das Redesign abgeschlossen und alle fehlenden Screens ergänzt wurden, gliedert sich das App-Layout nun folgendermaßen (der Onboarding-Prozess, welche erst vor kurzem in der Form dazu kam, wird unterhalb erläutert):</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1540" height="800" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/08/Untitled-1540x800.jpg" alt="" class="wp-image-14711" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/08/Untitled-1540x800.jpg 1540w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/08/Untitled-770x400.jpg 770w" sizes="auto, (max-width: 1540px) 100vw, 1540px" /></figure>



<p>Die App startet beim erstmaligen Öffnen mit einem Welcome-Screen samt Sprachwahl, bevor der/die NutzerIn nach einem Onboarding ins Hauptmenü gelangt. Von dort aus lassen sich direkt allgemeine Tipps zur Ergonomie-Themen oder konkrete Szenarien auswählen. Über den Tipps-Selection-Screen geht es in detaillierte Anleitungen zur Körperhaltung. Wählt man ein Szenario, bekommt man eine kurze Szenariobeschreibung und folgt der Aufnahmefunktion, mit der die eigene Haltung erfasst wird. Anschließend werden im Ergebnis-Screen eine Übersicht und Detailbewertungen angezeigt, inklusive spezifischer Analysen einzelner Körperbereiche. Durch das Redesign sind sind alle Texte lokalisiert und das Screen-Layout Großteils einheitlich.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1540" height="746" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/08/TFG_ergo4All_Onboarding_Prozess_Copyright_Andreas_Kaiser-1540x746.jpg" alt="" class="wp-image-14707"/><figcaption class="wp-element-caption">Onboarding-Prozess bestehend aus fünf Hauptscreens</figcaption></figure>



<p>Nachdem der/die UserIn die Sprache vorselektiert hat, startet in der gewählten Sprache beim erstmaligen Betreten in die App ein durchstrukturiertes Onboarding. Zuerst wird auf die Privatsphäre hingewiesen und erklärt was mit den gesammelten App-Daten passiert. vordem die App kurz und prägnant vorgestellt wird. </p>



<p>Nachdem die Sprache ausgewählt wurde, startet beim ersten App-Betreten ein klar strukturierter Onboarding-Prozess in der gewählten Sprache.</p>



<ol class="wp-block-list">
<li><strong>Privatsphäre</strong> – Zunächst wird erklärt, dass die App komplett offline funktioniert, keine Cloud und kein Tracking verwendet und alle Daten lokal am Gerät bleiben.</li>



<li><strong>App-Übersicht</strong> – Danach folgt eine kurze Einführung, die den Zweck der App verständlich darstellt.</li>



<li><strong>AGBs</strong> – Anschließend werden die Nutzungsbedingungen präsentiert, mit einem klaren Hinweis darauf, dass die Ergebnisse nur Informationscharakter haben und keine fachliche Beratung ersetzen.</li>



<li><strong>Was ist Ergonomie?</strong> – Dieser Screen erläutert die Grundidee der Ergonomie und vermittelt, dass nicht das momentane Empfinden, sondern langfristige Gesundheit im Mittelpunkt steht.</li>



<li><strong>Dein Nickname</strong> – Zum Schluss können NutzerInnen optional einen Spitznamen vergeben, um Ergebnisse leichter wiederzufinden.</li>
</ol>



<p>Alle Texte der Onboarding-Screens wurden sorgfältig von einem Kollegen der TU Wien entwickelt, um Inhalte sprachlich präzise, leicht verständlich und zugleich den wissenschaftlichen Standard entsprechend.</p>



<h2 class="wp-block-heading"><strong>Fazit und Ausblick</strong></h2>



<p>Bezugnehmend auf meine Vorkenntnisse im hybriden App-Development mit Flutter stellte sich dieses Projekt als sehr gewinnbringend für mich dar. Ich konnte mein Flutter-Wissen nicht nur auffrischen, sondern auch um neue technische Aspekte erweitern. Darüber hinaus erhielt ich durch meinen Teamkollegen Dipl.-Ing. Ramon Brullo, BSc wertvolle Einblicke in unterschiedliche App-Testansätze, deren Einsatzwahl und deren konkrete Umsetzung in Flutter.</p>



<p>Besonders hervorzuheben ist, dass mir Ramon auch das Konzept der Conventional Commits zeigte, das für mich völlig neu war. Ich konnte den Ansatz schnell nachvollziehen und habe diesen im Projekt selbstständig angewendet. Dadurch habe ich nicht nur die Struktur meiner Commits verbessert, sondern auch den Mehrwert von standardisierten Commit-Messages für Teamarbeit und Release-Prozesse erkannt. Ebenso waren die regelmäßigen Meetings und die enge Abstimmung im Team ein Mehrwert für mich. Sei es eine persönliche Weiterentwicklung im Hinblick auf Teamarbeit oder Projektorganisation.<br><br>Im Großen und Ganzen nehme ich aus dem Projekt 80 lehrreiche Stunden mit, in denen ich mein technisches Know-how im Bereich Flutter-Entwicklung erweitern, meine Arbeitsweise im Team verbessern und wertvolle praktische Erfahrungen in der koordinierten App-Entwicklung sammeln konnte.</p>



<p>Da es sich noch um ein derzeit laufendes Forschungsprojekt handelt, entspricht die aktuelle App-Version noch nicht der geplanten Veröffentlichung. Im Herbst werden noch einige zusätzliche Usability-Testings in Unternehmen durchgeführt, deren Ergebnisse in die finale Weiterentwicklung einfließen. Eine Veröffentlichung der App in die App-Stores ist noch im heurigen Herbst geplant.<br><br>Mehr zu dem Forschungsprojekt lesen? &#8211; https://research.fhstp.ac.at/projekte/ergo4all-ergonomie-fuer-alle</p>



<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/tfg-ergo4all-forschungsprojekt/">TFG | ergo4All Forschungsprojekt</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
