Full Stack -mobiilisovelluksen luonti React Native -tekniikalla : CASE: Kupo

Abstract

Opinnäytetyö toteutettiin Valakia Interactive Osakeyhtiölle. Valakia Interactive on Seinäjoella sijaitseva startup-yritys, jonka palveluihin kuuluvat mainonta, lisätty todellisuus, 3D-sovellukset, graafinen suunnittelu ja vuorovaikutteinen media. Tässä opinnäytetyössä tutustuttiin moderneihin web- ja mobiilikehitystekniikoihin. Työn tavoitteena oli toteuttaa mobiilisovellus, joka toimii vuorovaikutuksessa kosketusnäytöllisen infotaulun kanssa. Opinnäytetyö koostuu teoriaosuudesta sekä käytännön osuudesta. Teoriaosuudessa käsiteltiin front end -tekniikoita, joilla luotiin käyttöliittymät mobiilisovellukseen ja verkkosivulle. Lisäksi syvennyttiin back end -tekniikoihin, joilla palvelinpuoli toteutettiin. Työn käytännön osuudessa esitellään Kupo-mobiilisovelluksen ulkoasua ja toiminnallisuuksia. Siinä kuvataan myös palvelinpuolen toimintaa yhdessä mobiilisovelluksen ja verkkosivun kanssa. Lopputuloksena syntyi Kupo-mobiilisovellus. Mobiilisovelluksella voi aloittaa pelin kosketusnäytölliseltä infotaululta. Peli alkaa, kun mobiilisovellus on lukenut QR-koodin infotaululta. Mobiilisovellus käyttää Node.js-palvelimen REST-ohjelmointirajapintaa tietojen hakemiseen ja muuttamiseen tietokannasta. Lisäksi luotiin React-verkkosivu, joka toimii samalla palvelimella. Verkkosivua käytetään käyttäjätilin luomisen viimeistelyyn ja salasanan vaihtamiseen.

The commissioner of this thesis was Valakia Interactive Limited. Valakia Interactive is a startup company located in Seinäjoki. The company's services include advertising, augmented reality, 3D-applications, graphic design and interactive media. This thesis explored modern web and mobile development technologies. The aim was to implement a mobile application that interacts with an information display. The thesis consists of a theoretical and a practical part. The theoretical part deals with the front end technologies, which were used to create user interfaces for the mobile application and the website. The theoretical part also includes a back end section that consists of server-side technologies. The practical part presents the layout and functionality of the Kupo -mobile application. It also describes the server-side operations together with the mobile application and the website. The result of this thesis was the Kupo -mobile application. The mobile application uses a QR code reader to start a game on an information display. The mobile application uses Node.js-server’s REST Application Programming Interface to retrieve information from the database and to modify it. The React-website is hosted on the same server. The website is used for finishing user account creation and to change a user’s password.