Sovelluskehitys React Nativella

Abstract

Insinöörityössä tutustuttiin mobiilisovelluskehityksen toteutustapoihin, hybridisovellusten ohjelmistokehyksiin sekä React Native -ohjelmistokehykseen. Työn tavoitteena oli oppia React Nativen käyttöä ja kehittää sovellus, jolla on täysin yhteinen koodikanta Android- ja iOS-alustoille.

React Native on ohjelmistokehys, jonka avulla voi kehittää hybridisovelluksia Android-, iOS- ja Windows Phone-alustoille. Sen toiminta pohjautuu alustakohtaisten natiivikomponenttien käsittelyyn, mikä poikkeaa perinteisistä hybridisovelluksista. Perinteiset hybridisovellukset toteutetaan web-tekniikoilla, ja ne hyödyntävät kohdealustan WebView-säiliötä. React Nativen avulla kehitetyt sovellukset ovat alustariippumattomia natiivisovelluksia.

Työn teoriaosuudessa syvennyttiin React Nativen toimintaperiaatteisiin ja pyrittiin havainnollistamaan muun muassa renderöinnin toimintaa. Käytännön osuudessa kuvataan sovelluskehitystä React Nativella oman sovelluksen ja koodiesimerkkien avulla.

Lopputuloksena syntyi tavoitteiden mukainen Stats Collector -mobiilisovellus. Sovelluksen avulla voi kerätä tilastoja jalkapallo-ottelusta. Sovellusta on tarkoitus kehittää lisää ja julkaista se Googlen ja Applen sovelluskaupoissa.

This thesis focuses on software development with React Native. Different methods of mobile application development and hybrid frameworks are also covered. The goal of the thesis was to learn to develop applications with the React Native framework and to develop a hybrid application with a common codebase for Android and iOS.

React Native is a framework for developing Android, iOS and Windows Phone applications. It uses native components directly which differs from traditional hybrid frameworks. Traditional hybrid applications are developed using web-technologies and they use WebView containers to display the content. Applications made with React Native are platform independent native apps.

The theory section concentrates on the operational principles of React Native. The section tries to illustrate for example how the rendering works in React Native. The software development with React Native is also described, including code samples and screenshots from Stats Collector application.

The Stats Collector application was the result of the project and it met all the objectives. The application is for collecting match statistics from a football match. The application is supposed to be released in Google’s and Apple’s app stores after some further development.