Cartopia
Beschrijving
Dit project is gemaakt voor het opleidingsonderdeel Augmented Reality and Mobile App Development. In dit opleidingsonderdeel hebben we geleerd om mobiele applicaties te maken met Flutter en uiteindelijk hebben we geleerd hoe we Wikitude moesten gebruiken voor de augmented reality.
Doel
Het doel van dit project is het maken van een augmented reality app dat minstens gebruik maakt van één van de vier smaken van augmented reality en een API. Samen met de andere student is er besloten dat we iets rond auto's gingen maken. Als er een kaartje gescand word, zal dit een digitaal kaartje ontgrendelen in de app en tijdens de scan krijg je een 3D-model te zien van de auto die je net gescand hebt.
Mijn toevoegingen
Klaarmaken van de modellen
De app gebruikt 12 auto modellen. Natuurlijk hebben we deze niet allemaal zelf gemaakt, maar hebben we op het internet gezocht naar gratis modellen die gebruikt mochten worden. Daarbij komt vaak wel kijken dat het bestandstype niet overeenkomt met het type dat gebruikt word in de applicatie. Daarom moest er manueel voor elk model naar het juiste bestandstype geëxporteerd worden. Daarna moeten we de modellen nog eens door een encoder van Wikitude zelf laten gaan zodat het framework de modellen kan lezen. Nog een probleempje is dat niet elk model meteen de juiste grote heeft, correct gedraaid staat en op de juiste locatie van de X en Y as staat. De configuratie van Wikitude staat in JavaScript.
JSON-server
Omdat de focus op de app en de AR ligt hebben we als database een simpele JSON-server met een localtunnel gebruikt. Ik heb de data in de API gestoken en opgezet. De database & localtunnel kunnen met 1 commando opgestart worden via een CLI. De local tunnel zorgt ervoor dat we verbinding kunnen maken over het internet zonder teveel moeite.
Code
Natuurlijk heb ik zelf ook een klein deeltje van de app mee geschreven. Bevoordeeld de pagina waar alle verzamelde kaartjes worden getoond. Er is voorzien dat als er een kaartje toegevoegd word dat deze niet handmatig bij in de lijst gezet moet worden. De code kijkt naar het aantal kaarten dat voorzien is in de database. Als een kaartje gescand is kun je deze bekijken en wordt dat kaartje ontgrendeld. Niks speciaal dus maar mijn hoofdtaak was dus het voorzien van de AR in de applicatie.
Resultaat
