Werkzaamheden TapTapes (voorheen MusiCards) 2022

In 2022 is MusiCards van naam veranderd naar TapTapes.

Net als vorige jaren heb ik in 2022 gewerkt voor TapTapes. Een belangrijk onderdeel van de werkzaamheden dit jaar was het migreren naar een nieuwe API en backend. Hoewel ik zelf nauwelijks aan de backend heb gewerkt, moesten de wijzigingen van de API’s correct worden meegenomen in de frontend van het systeem.

Nieuwe backend

De afgelopen jaren heeft TapTapes gewerkt met services van AWS, waaronder een NoSQL database van DynamoDB. Binnen de database werd de data opgeslagen met een json file per pagina. Door de vernieuwde mappen structuur van kaarten geïntroduceerd in 2021 werd deze manier van opslag echter steeds complexer en moeilijk te onderhouden. We besloten te gaan migreren naar een nieuwe backend, en daar stapsgewijs functionaliteiten naartoe te verplaatsen.

Voor de database hebben we gekozen om over te stappen naar een Relational Database. In deze database zijn de kaarten (nu features genoemd) losgekoppeld van de pagina, en hebben ze een eigen database tabel. Een pagina heeft vervolgens één base feature, die daaronder een aantal child features heeft. Folders werken op eenzelfde manier, waardoor diepe folder structuren een stuk overzichtelijker zijn geworden.

Ook de API om de database te bereiken werd veranderd. In plaats van de database direct aan te roepen ging dit nu via Hasura, een online dienst die een koppeling aanbied tussen een database en een GraphQL API. Deze api-vorm gebruikt een enkele endpoint (url) waarnaar een query (een vraag of opdracht) wordt gestuurd. Het grote voordeel van GraphQL is dat de client zelf kan bepalen welke data het nodig heeft, wat vervolgens wordt gebundeld in een enkele aanvraag. Hierdoor kan de server efficiënter werken en hoeft er minder data over verschillende requests verstuurd te worden. Ingewikkelde en uitgebreide zoekopdrachten zoals ”geef mij een pagina met alle features en media” kan in een enkele query verstuurd worden.

Om GraphQL te kunnen gebruiken moest in de frontend de opslag worden omgezet naar een relational database. Dit hebben we gedaan met VuexORM. Deze library voor Vuex zorgt er voor dat de data volgens een Object Relational Mapping kan worden opgeslagen en opgezocht. Data wordt hiermee strikter gedefinieerd, wat uiteindelijk positief is voor de kwaliteit van de code.

Tegen deze tijd zijn vrijwel alle services van MusiCards verplaatst naar andere systemen. Ook het autorisatie systeem, die de koppeling maakt tussen de fysieke MusiCard en de webapp, werd opnieuw ontwikkeld. Omdat er binnen dit systeem een hoop processen en checks worden uitgevoerd is er gekozen om de authenticatie API in een eigen Ruby on Rails applicatie te ontwikkelen binnen een Docker Container.

Het verplaatsen naar een Docker Container bleek een interessante stap. De container bundelt verschillende services die samen de applicatie vormen. We besloten dan ook de rest van de services nogmaals te migreren naar de nu alles omvattende docker container. De GraphQL API werd opgenomen in de autorisatie API, die nu de volledige backend vormt. Als laatste is de media storage verplaats van Amazon S3 naar een MinIO container in de docker.

De services van TapTapes draaien nu volledig in een docker container, en zijn hiermee in eigen beheer.

TapTapes als Content Management Systeem

Door de migratie naar een nieuwe API werd het mogelijk om meer controle te hebben over de media binnen het systeem. Voorheen moest media handmatig worden geüpload naar de S3 bucket, en het URL opgeslagen in de json van de pagina. Binnen de nieuwe API kan media vanuit de app worden geüpload en direct gekoppeld worden aan de pagina. Hiermee is het vullen van een pagina veel makkelijker.

Ook werd het mogelijk om media te transcoderen. Hierbij wordt de content in een hoge resolutie geüpload, en vervolgens op de server omgezet naar meerdere (lagere) kwaliteiten. Afhankelijk van de verbinding en schermgrootte van het apparaat kan vervolgens een passende resolutie worden gebruikt, wat op lange termijn een hoop netwerkverkeer en bandbreedte kan schelen. Het transcoderen van media werkt momenteel bij afbeeldingen, audio en video’s.

Door de toevoeging van beheerder accounts begint de app steeds meer een Content Management Systeem te worden. Beheerders van tapes kunnen hiermee op hun eigen apparaat content maken en uploaden naar de app. Features kunnen binnen de app worden toegevoegd, en ook de kleuren en het thema kan door de beheerder van de tape worden aangepast. Voor het vullen van de tape is geen programmeer en database kennis meer nodig, en kan door de klant zelf worden uitgeprobeerd.

Uitbreiden media player

Op aanvraag van verschillende klanten van TapTapes is de media player verder uitgebreid. Zo moest de player de nieuwe API van de media transcoder ondersteunen en automatisch kunnen schakelen tussen de juiste kwaliteiten. Ook is er verder geïtereerd op de user interface van de player om beter aan te sluiten aan de wensen van de gebruikers.

Er zijn nieuwe interfaces ontwikkeld voor het afspelen van de verschillende audio typen. Luisterboeken en livestreams hebben andere controls nodig dan een normaal album. Luisterboeken zijn vaak opgesplitst in hoofdstukken, waar doorheen wordt gescrold in seconden. Radio en livestreams hebben echter helemaal geen voor- of achteruit knop, en kunnen alleen gepauzeerd worden. Door onderschijt te maken tussen deze verschillende audio typen is de user interface een stuk duidelijker geworden.

Roadmap

Ik blijf de komende tijd werken voor TapTapes, maar in verband met mijn master studie zal dit minder regelmatig zijn. Op de planning staat een grote refactor van de frontend, die door het vele veranderen van API’s aan opruimen toe is. Daarnaast is de frontend op het moment geschreven met de versie 1 van de Quasar library, terwijl versie 2 al enige tijd beschikbaar is. Een refactor naar de nieuwe versie zal een flinke hoeveelheid werk zijn, maar is nodig voor de stabiliteit en toekomstbestendigheid van het systeem.