Cross-Platform Mobile Application Development - Theseus
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Bachelor’s thesis
Information and Communication Technology
2022
Juuso Torikka
Cross-Platform Mobile
Application DevelopmentBachelor’s Thesis | Abstract Turku University of Applied Sciences Information and Communication Technology 2022 | 28 pages Juuso Torikka Cross-Platform Mobile Application Development The purpose of this thesis is to develop a prototype version of the new mobile application MyEWay with TUAS Health Tech Lab. for Eerikkilän Urheiluopisto. The objective is to build a prototype version, which can be used to gather user experience data to further develop the application into a release version. The application has to work on both Android and iOS operating systems, which is why it will be built using a cross-platform framework like React Native. The application must contain features like possibility for the user to insert their personal feelings of fatigue and wellbeing after practice, and on a daily basis. The application has to be able to display this data with simplistic and easily understandable charts and visualizations for both players and coaches. Objectives required in this stage of the development process were implemented successfully into the application mostly within time limits. The final result is a requirements filling mobile application designed for test use, which can be utilizied to collect required data to further develop the application. Keywords: React Native, Expo CLI, Android, iOS, Cross-Platform Development
Opinnäytetyö (AMK) | tiivistelmä Turun ammattikorkeakoulu Tieto- ja viestintätekniikka 2022 | 28 sivua Juuso Torikka Cross-Platform Mobile Application Development Tämän opinnäytetyön tarkoituksena on rakentaa mobiilisovelluksen prototyyppiversio uudesta MyEWay-sovelluksesta Eerikkilän Urheiluopistolle yhteistyössä TUAS Health Tech lab:in kanssa. Tavoitteena on rakentaa prototyyppiversio, jota voidaan käyttää käyttäjäkokemuksen parantamisessa sovelluksen jatkokehityksen aikana. Mobiilisovellus rakennetaan käytettäväksi sekä Android, että iOS käyttöjärjestelmillä, jolloin on järkevää valita alustariippumaton teknologia, kuten React Native, käytettäväksi kehitysteknologiaksi. Prototyyppiversion tulee sisältää käyttäjälle tapa syöttää sovellukseen henkilökohtaisia tuntemuksia rasituksesta ja hyvinvoinnista, sekä esittää nämä tiedot helposti luettavana ja tulkittavana esimerkiksi kaavioiden muodossa niin pelaajalle, kuin valmentajallekin. Tässä kehitysvaiheessa vaaditut ominaisuudet onnistuttiin sisällyttämään sovellukseen enimmäkseen aikataulujen puitteissa. Lopputuloksena on tuotettu vaatimukset täyttävä, testikäyttöön sopiva versio mobiilisovelluksesta, jonka avulla kyetään keräämään testaajilta käyttökokemusta kehittäviä tietoja, joiden avulla mahdollistetaan jatkokehitys. Asiasanat: React Native, Expo CLI, Android, iOS, Cross-Platform Development
Content
List of abbreviations (or) symbols 5
1 Introduction 6
2 Mobile applications and their development technologies 7
2.1 Different approaches to mobile application development 7
2.1.1 Native applications 7
2.1.2 Cross-platform applications 8
2.2 Xamarin 9
2.2.1 .NET 10
2.2.2 Xamarin.Forms 10
2.3 Ionic 10
2.4 Flutter 10
2.5 React 11
2.5.1 Node.js 11
2.5.2 State and props 11
2.5.3 JSX 12
2.5.4 React Native 12
3 Technical implementation 16
3.1 Technical requiremets 16
3.2 Analysis 16
3.3 Technical implementation 18
4 Conclusion 24
References 26List of abbreviations (or) symbols API Application Programming Interface BaaS Backend as a Service IDE Integrated Development Environment JS JavaScript JSX JavaScript XML npm Node Package Manager OS Operating System SDK Software Development Kit UI User Interface .NET Software Farmework developed by Microsoft
6 1 Introduction The purpose of this thesis is to develop a cross-platform mobile application for Eerikkilän Urheiluopisto in collaboration with TUAS Health Tech Lab. This thesis partly covers theory of the technologies used as well as thought and development process of the application. The objective is to develop a prototype version of the new MyEWay application, which then can be used to collect user experience data from test users and allow the application to be further developed into a release version. Mobile applications have become almost a necessity for businesses and new or updated mobile applications are released constantly. With two leading mobile operating systems, Android and iOS, it is nearly always worth it to develop the application for both instead of just one. Mobile applications, or apps in short, can be developed either with Native or cross-platform technologies. This thesis covers the cross-platform method using React Native as the development framework, which has become one of the most popular technologies in mobile application development. Cross-platform frameworks have become extremely popular in app development. Excellent technical documentations and a large user base’s of these technologies make it easier for new developers to get into app development. Many studies and articles have been written about the advantages and disadvatages of these frameworks. In this thesis, some of both are covered, but mainly the focus is on the technical execution of the development process, since the development itself is the authors responsibility. One aspect of this thesis is to demonstrate key consepts of mobile app development using cross-platform framework and demonstrate basic features in technical execution an app developer can benefit from. These features include in example on-device data storage, modals, in-app navigation and basic data visualization. Also some alternatives for used features are also glanced at but not thoroughly examined. Turku University of Applied Sciences Thesis | Juuso Torikka
7 2 Mobile applications and their development technologies Mobile applications have come far since Nokia released the well known arcade game “Snake” for their 6110 mobile phone in 1997. Now there is an app for everything and if there isn’t, soon there will be. Mobile apps can be the main product of the company, a mobile version of their website with same functionalities or it can be something completely different. In all cases, the application brings value for and from their customers by being accessible with minimum effort and available for use almost anywhere. In this theoretical section of the thesis, the focus lies in modern cross-platform mobile development using React Native. 2.1 Different approaches to mobile application development Google’s Android and Apple’s iOS are the two most popular operating systems which hold more than 99% of the market share in mobile operating systems worldwide (statcounter [2022]). While Android is still the forerunner in the market share, iOS becomes more and more popular especially among youth who tend to be more active users of different apps. Mobile applications can either be developed natively for a single platform like Android or iOS, or the app can be cross-platform, which means that the app is developed once and it works on both operating systems. Even though cross- platform applications can be used on other platforms and in web, only mobile platforms are covered in this thesis. 2.1.1 Native applications Native mobile application development is the best choice for complex and well budgeted projects as well as for projects targeted for a specific platform. With native code, the app will always be tailored for the operating system and the Turku University of Applied Sciences Thesis | Juuso Torikka
8 performance can be excellent compared to cross-platform applications. Native development’s best features include custom UI components, better API usability and better access to device’s hardware. Drawbacks of native development include the time it takes to develop separate apps for different operating systems with different programming languages as well as the cost of it, since more developers are likely to be needed to develop and maintain the application’s code base. When building an application for single-platform use, it is often better to choose the Native approach. Native applications are made using platform specific programming languages and tools. Applications for Apple devices are made using Objective-C and Swift with Xcode, whereas Android applications are created using Java and Kotlin with Android Studio (mDevelopers [2021]). When developing natively using Xcode or Android Studio, they offer the user pre-built layouts and directories to get started easily regardless of the target operating system being a mobile phone, watch or even a smart television. 2.1.2 Cross-platform applications The benefits of a cross-platform framework compared to native development, are that only one codebase needs to be managed and the need for native code is limited. Most disadvantages of cross-platform frameworks are limitations in design and in ability to render 3D-effects. Developers can choose to build modern mobile applications from vast amount of different open source cross-platform frameworks. Most commonly used today are Flutter and React Native. The latter was developed by Meta Platforms, Inc., formerly known as Facebook, to develop applications for different Android and Apple’s operating systems. React Native is used for different worldwide apps including Facebook and Instagram. With similar capabilities, Flutter was developed by Google. These two were ranked the most used cross-platform development frameworks in 2021 (Statista [2021]). While React Native is written Turku University of Applied Sciences Thesis | Juuso Torikka
9 in JavaScript and JSX, a syntax extension to JavaScript, while Flutter uses Dart as its programming language. Cross-platform frameworks have become extremely popular with applications that are developed by small teams or a single person. This is because one code base handles both operating systems. Frameworks such as React Native are called native cross-platform frameworks. This means that the same code for all operating systems is translated into the device’s native code. Other well-known cross-platform development type is hybrid development, where the application’s code is rendered in a webview using the device’s browser engine. Native cross-platform development is a good combination of hybrid and native development, since it gives nearly all native development’s advantages in user interface design and visual effects as well as similar user experience on all platforms, and the advantage of sharing the code across multiple platforms like with hybrid development (Patel [2021]). 2.2 Xamarin Xamarin is Microsoft’s open source technology for creating native cross- platform applications. Xamarin uses .NET developer platform and C# to create these cross-platform applications with shared logic behind them. Xamarin extends the .NET platform by enabling access to native features on mobile devices. Because Xamarin can access all native APIs, regardless of the platform, application development can be done also for other Android and Apple devices, like Apple TV, Apple Watch and Android Wear. Xamarin applications being fully native, they can benefit from hardware acceleration and access device hardware capabilities including Bluetooth, NFC and fingerprint scanner (Xamarin [2022]). Turku University of Applied Sciences Thesis | Juuso Torikka
10 2.2.1 .NET .NET is Microsoft’s open source developer platform for creating different types of cross-platform applications. It can be used with multiple different programming languages, which of the most common one is C#. Xamarin is a mobile .NET platform, but .NET also has their own platforms for desktop and websites called .NET Core and .NET Framework. They can be used to create almost any kind of application from games to IoT applications (.NET [2022]). 2.2.2 Xamarin.Forms Xamarin.Forms is a open source feature of Xamarin. It’s a cross-platform framework for building mobile applications with .NET. Since Xamarin.Forms is a full UI framework instead of a UI library, it includes everything needed for building mobile apps from navigation to animation APIs. User interfaces can be built with Xamarin.Forms by using either declarative XAML or imperatively with C# (Xamarin.Forms [2022]). 2.3 Ionic Ionic is a hybrid cross-platform UI toolkit for building mobile apps using different web technologies like HTML, CSS and JavaScript with assistance from frameworks like Angular, React and Vue (Ionic [2021]). Since Ionic is hybrid framework, the performance of the application may be hindered if the app becomes too heavy. Ionic’s benefits come from the technology stack available, its fast development process and ability to create elegant user interfaces easily (Shah [2021]). 2.4 Flutter Developed and maintained by Google, Flutter is one of the most used cross- platform development technologies in the world (Statista [2021]). Flutter uses an Turku University of Applied Sciences Thesis | Juuso Torikka
11 object-oriented programming language Dart. Flutter is a native cross-platform techonology and it uses its own rendering engine instead of browser technology. Flutter offers variety of different widgets of Android and iOS styles and an easy way of creating your own widgets (Flutter [2022]). 2.5 React React is a JavaScript library made as well as maintained by Meta, and designed for building user interfaces. React’s main principle is that complex UIs can be built using smaller pieces called components. These components are updated and rendered efficiently using React’s render() method, which takes the input data and returns what needs to be displayed. React also follows the declarative programming paradigm, a style that rather describes what has to be done instead of how it is done, which makes the code more predictable and easier to debug. (React [2022]). 2.5.1 Node.js Node.js is a JavaScript runtime built on Google’s V8, an open source engine designed to allow developers to create JavaScript applications that run outside of a browser. Installation of Node.js also comes with a package manager npm. Npm is allows downloading JavaScript libraries and other standalone tools used in development. React needs Node.js to build the JavaScript code and npm to handle all dependencies (Node.js [2021]). 2.5.2 State and props State is used to make React Component Classes dynamic. This means that when data is changed, the component keeps track of it. State holds information that may change during component’s lifetime, which makes it observable. State is similar to other React object called props, which are immutable, unlike state. Props holds information to control object’s behaviour. Initial state has to be set Turku University of Applied Sciences Thesis | Juuso Torikka
12 always since it needs to be excisting throughout the lifecycle. When component’s state needs to be changed, setState() method is used, which updateds the states and calls render() method to update the view (Robards [2019]). 2.5.3 JSX JavaScript XML, or JSX is a syntax extension for JavaScript and recommended to be used to describe what the UI should look like. JSX is a way of writing HTML code in React. Using React doesn’t require using JSX, but it can be helpful when working on an UI with JavaScript code. JSX expressions become standard JavaScript function calls after compiling. That way they can also be used in if statements, for loops and as return values from functions among other things (React [2022]). 2.5.4 React Native React Native is a JavaScript framework based on React. While React is targeted for web application development, React Native is for mobile applications. React Native is one of the most used frameworks in mobile development (Statista [2021]). In this project React Native was chosen as the cross-platform framework. Reasons for this are previous experience with JavaScript and its increasing popularity amongst developers. Other things that affect the choice are its Hot Reload, where developer can see changes on simulator or test device without rebuilding the whole project, web implementation libraries if a web version of the app is needed in the future, and of course the overall popularity of JavaScript. The core of React Native’s architecture is the bridge which transforms the JavaScript code into native components and back. Android and iOS devices cannot understand JavaScript, so native components are rendered by invoking the native rendering APIs in their native programming languages. This means Turku University of Applied Sciences Thesis | Juuso Torikka
13 the UI components are real mobile components instead of webviews (Tsurbeliov [2021]). Figure 1. React Native architecture (Akveo [2021]). Unlike many other development frameworks, React Native does not use HTML components like or to create components, but has its own commands to create them (Tsurbeliov [2021]). Figure 2. Components comparison (Akveo [2021]) React Native project can be started either with React Native CLI, a built in feature of React Native, or Expo CLI, a toolchain built around React Native (React Native [2022]). Both of these allow developer to setup, manage and run Turku University of Applied Sciences Thesis | Juuso Torikka
14 the project with few very important differences. React Native CLI’s perhaps the strongest feature is the possibility of adding native modules written in Java (Android) or Objective-C (iOS), therefore giving more space for imagination when creating visuals or effects, or accessing device hardware. One of the common benefit of using React Native CLI is the ability to integrate software development kits using their native code. These benefits unfortunately come with limitations, more conserning the Windows users. React Native CLI generates separate projects for both Android and iOS and you need to have access to Apple computer to develop for iOS. While Android development on Windows is made all in all easy, iOS development and simulation need many workarounds, which are either difficult or against Apple’s End-User Licence Agreement (Apple [2021]). Expo in other hand creates only one build chain for both operating systems and is an easy way to get started with cross-platform development. The drawback with Expo is the inability to write native code, although Expo applications can later be ejected into React Native with separate projects for both Android and iOS. After ejecting the project, software development kits can be integrated into the application and native code can be used for both platforms. When choosing tools for cross-platform application development, I highly encourage using Apple’s ecosystem. This is simply because Apple has made it quite difficult to develop iOS applications on platforms other than macOS. React Native’s documentation recommends using Microsoft’s Visual Studio Code as IDE when developing. VS Code’s React Native Tools -extension creates a development environment for the project and allows debugging and running relevant commands from the Command Palette. VS Code was also used in this project as the IDE. Common way to handle backend with React Native apps is to use Backend as a Service, or BaaS in short. BaaS allows for easy cloud infrastructure and offers many useful features like APIs, file storage and push notifications. Perhaps the most well known BaaS is Google’s Firebase, which offers great scalability with NoSQL storage options. BaaS is an easy way to handle backend when starting Turku University of Applied Sciences Thesis | Juuso Torikka
15 a development, since most of the services are pay-as-you-go style, which means that the more users you have, cost rises. With new applications with low user bases the costs are usually from zero to minimal. In this project though, BaaS is not an option. Turku University of Applied Sciences Thesis | Juuso Torikka
16 3 Technical implementation This chapter goes through the process and decisions made during the development explaining why certain decisions were made. 3.1 Technical requiremets The required objective for my thesis work is to build a mobile application’s prototype version that can be used to gain user experience feedback from test users to further develop the mobile application into release version. The prototype version requires the possibility for the user to insert their personal fatigue leves, both daily and after practice, data visualizations to examine past inputs implemented in modern and easy-to-use user interface. The application must be built in a way that it can be further developed without too many difficulties or obstacles that could be prevented in prototype development. These difficulties and obstacles include choosing an appropriate development framework that has as few limitations, and as many benefits as possible, self commenting as well as style guide appropriate code and possibility to use the application on both iOS and Android platforms. 3.2 Analysis To accomplish these objectives, first thing to decide is the approach that is going to be used in the project. Modern mobile applications can be developed with variety of different development frameworks and programming languages. When choosing these, it is highly beneficial to consider if the application is a single- or cross-platform project. Since one of the requirements in this project is that the application can be used on both iOS and Android devices, cross- platform framework becomes the most efficient choice when only one person is executing the project. Turku University of Applied Sciences Thesis | Juuso Torikka
17 Deciding the framework which is going to be used, it must be taken into account how complex the logic of the application is and how visually impressive the application needs to be. One key aspect of the prototype is that the user interface needs to be simplistic with easy-to-use features. With these aspects in mind, nearly any cross-platform technology could be chosen if developer would not have a preference beforehand. One key aspect of choosing the technology used, is its programming language. The variety of those is immense among cross-platform frameworks. If the given schedule for the development process is long enough, any framework could be chosen. With my experience of different programming languages, I chose JavaScript as the language for purely time related reasons and for it being the most familiar. JavaScript leaves two frameworks to work with, React Native and Ionic. Without knowing the direction where the development process is going after prototype phase, it is more sensible to trust native cross-platform’s efficiency and features instead of hybrid’s. After choosing to go cross-platform with React Native, it must be decided if the application is going to be built on top of Expo CLI or React Native CLI. This decision must be made based on what tools the developer has available and the complexity of the app. Modern mobile applications need a way to store any user or app data. On smaller projects without excess resources on hand, it is easier to use something like Google’s Firebase as a backend, which makes everything easier, including storing user and app data as well as allowing user to login securely, without having to do everything from the start. In this projects prototype development, it was discussed that the app will use own servers, so Firebase or any other development platform would not be an option. In this case the possibilities are either creating own database to store data, or to use devices own storage possibilities. Because the first prototype is mainly needed for user feedback, and to make development process faster, the choice lands on using device’s own storage until further development. Turku University of Applied Sciences Thesis | Juuso Torikka
18 3.3 Technical implementation First thing to consider before starting to develop is the user interface. In this project the UI is designed by others, so only the implementation in code is left to be done. Development process itself begins with the decision about the approach. The app is meant to be multi-platform and used on iOS and Android devices, hence the best and easiest approach is the cross-platform approach. The case would of course be different if the development team was bigger and more experienced. Since I have used JavaScript and done few small tasks with React Native before, React Native is chosen as the cross-platform framework. Knowing beforehand, that the application will only be in prototype version after my release, it has to be taken into account who will continue the further development and the tools they are using. Like previously mentioned, React Native projects can be started by using either Expo, or React Native CLI. In the long run, it is a lot less difficult to make sure from the start, that the app can be developed on multiple operating systems than changing frameworks afterwards. With these conditions Expo CLI is the fastest, easiest and most efficient way to start development. Installing Expo CLI can be done by following the documentation on their website (Expo, no date). CLI stands for Command Line Interface, which means the installation and usage happens within devices terminal. To install and run Expo CLI and to develop React Native projects, a version of Node needs to be installed. After installing Node.js version 14 LTS or later, can Expo be installed via terminal. Developing mobile applications on Apple device allows developer to use Xcode simulators. By installing Apple’s Xcode, different Apple device simulators including nearly all iPhone, iPad and Watch models can be downloaded and used in real time while developing. Android device simulators can be used with Android Studio. With Expo CLI, simulators can be launched directly from terminal after starting a development server. Expo CLI also provides a QR- Turku University of Applied Sciences Thesis | Juuso Torikka
19 code, which can be scanned with physical mobile device with Expo Go-app installed to view app directly on your own device. Development process itself began by installing needed packages including Node and Expo CLI. Creating a new project with Expo only takes a moment and with simulator from Xcode, the application can be viewed within minutes. First thing was to write the pre-designed UI into code. The application has three different views with navigation bar at the bottom of the page where the desired screen is selected. React Native has many components which can come very useful when creating different visuals including navigation. React Native components can be installed using npm, which was used when Expo was installed, or with expo command in directory where project is located. When a new React Native project is created, the only JavaScript file is the main file called App.js. This file can be used to program the full application, but dividing the code into multiple files helps a lot with debugging and general reading. While the application can be programmed in a single main file, it is often more sensible to combine multiple different files in the directory. By consulting the pre-designed UI, it was clear that at least three different JavaScript files were needed which contain all code used in each screen. Screens, or views in other words are the home screen, statistics screen and profile screen. Creating the navigation also needs quite a bit of code, which means the navigation logic should also be in its own file. After researching the ways of navigation, came react-navigation the top prospect. React Navigation has many different ways of navigating in-app. The UI design of course needed tab-based navigation and React Navigation provides that with bottom-tabs library. New JavaScript file for navigation logic is created and needed libraries are imported. The three screens are also imported into the navigation file. The screens are used as components when defining the navigation tab. The file only contains a single function, which is exported and called in the App.js file. Now the navigation bar is visible in all screens and the library enables the icons to be in or out of focus when the corresponding screen is opened. Turku University of Applied Sciences Thesis | Juuso Torikka
20 The user interface dimensions are not hard coded in the source code. This is to make sure everything scales correctly in device of any size and resolution. React Native contains a component dimensions that can be used to calculate current device’s width and height. All parts besides small margins and font sizes of the UI are defined using these calculations. Figure 3. Device height definition. Figure 4. Device width definition. The color scheme .json file and base layout JavaScript file are also stored in separate folder, which is imported as a component in all other files. This is done to prevent re-coding the same thing multiple times in different locations. This also makes it easier to make changes to the whole app if necessary. Figure 5. Color scheme defined in separate file. Home screen contains the main prototype functions. Inserting fatigue levels after practice sessions and after waking up. Accessing these queries happen in separate modal, which opens with a press of a button located inside home screen. Modal is a component provided by React Native, which makes Turku University of Applied Sciences Thesis | Juuso Torikka
21 displaying content on top of an enclosing view possible. Modals can be modified with different opening and closing animations to make the app feel more fluid. Figure 6. Defining the modal component. Figure 7. Modal opening by setState. Values are inserted with sliders and saved with press of a button that also closes the modal and returns user back to home screen. With React Native changing data must be stored in states. Every variable, whose value can be changed by the user must be initialized in a state. After slider is set to any new value, setState is called and the state is changed to current value of the slider. State is a convenient way of temporarily storing changing data. If the data is fixed, props will be used instead. State is also used to set the modal either visible or invisible. In this case saving data in a state isn’t quite enough, since the data needs to be historically available as well as persistent and states reset to their initialized Turku University of Applied Sciences Thesis | Juuso Torikka
22 value after the app is closed and re-opened. After the sliders are set to correct values and the save button is pressed, the app inserts the data in on-device SQLite database. If the database doesn’t exist already, the database is initialized inside the home view and two tables are created. One for data inserted after practice sessions and the other for daily fatigue data. Slider data is inserted along with automatically incrementing identification value and current date time, which comes from separate function that formats the date in correct form. Figure 8. Defining a new database. Figure 9. SQLite table creation. The data from both tables is queried inside the statistics screen and visualized in many forms. To be able to use the data, it must be again stored in states representing the correct fields. Required data and the amount of it is set into multiple different states which are in this case either a single value as any data type or many values as an array. States are always re-initialized before the query to make sure they only contain required values. Turku University of Applied Sciences Thesis | Juuso Torikka
23 Figure 10. Data query from the defined table. Visualizing data with React Native is made possible by multiple different community libraries. These libraries like svg-charts have the capability to display basic statistics with simple graphs like bars and lines. This is quite enough to efficiently make the data easily readable and available for the user. Although these charts are relatively easy to produce and edit, it isn’t in my experience that easy to make them aesthetically enjoyable like with Swift for example. In this case, only bar and line charts are used, which are simplistic and easily readable without too much effort. These charts display different calculations from the data user has input during usage of the application. They show for example historical sleep data and calculations from other user inputs. Turku University of Applied Sciences Thesis | Juuso Torikka
24 4 Conclusion The objective for this thesis was to create a protype version of a cross-platform mobile application with TUAS Health Tech Lab, that is used to gather user experience data from test users. The application was to be cross-platform, simplistic and easy-to-use. To achieve thes objectives, I chose to use cross- platform development framework called React Native. With React Native, all these objectives are achievable and future features can be easily implemented into the existing prototype version. Prototype version was finished within the given timeframe while still applying all required features. While the content on of the application changed slightly during the development process, the finalized version included everything necessary and the contractor was happy with the results. More time could have been spent on the planning part of this project, but despite the time restrictions the choices made during that period were good and effective. If the timeframe for this project would have been longer, I would have invested more time in considering the frameworks. Since I had no previous experience with C#, I ruled Xamarin out almost instantly, but in hindsight it would have been extremely beneficial and interesting to try it out, or atleast compare the two frameworks against each other. The choice of using on-device storage in the prototype version was mandatory to get the prototype finished in time, but I wouldn’t use that feature in new projects for it not being very scalable option compared to cloud servers. In this case though it was an excellent decision and sped up the process of development massively. The data visualizations were in my opinion sufficient but I think there is room for improvement on the styling. React Native has vast amounts of community made libraries for visualizations and one of these could be a better choice. Turku University of Applied Sciences Thesis | Juuso Torikka
25 During the development process my skills imporved immensely over time. Beginning of the process tutorials were a must and nearly everything had to be checked before implementing into the application. Nearing the end it was clearly noticeable, that these tutorials were not as much needed as they previously were and the development itself went along quite a bit faster and more efficiently. With the prototype version everything is open with further development of the application. Chosen technologies support mobile platforms as well as web applications if one for it is needed at some point. If any feature in the future is not available with React Native Expo app, it can be ejected into Native application and these features become available. With the time that was available, I think the results were good and up to standards, but some features of the application could have been executed with more finesse. All in all I am happy with the results I could manage in the given time and believe the prototype version can be a valuable asset in further development. Turku University of Applied Sciences Thesis | Juuso Torikka
26
References
Akveo (2021) How does React Native Work? Available at:
https://www.akveo.com/blog/how-does-react-native-work
(Accesed: 23 April 2022)
Apple (2021) Software Licence Agreement For macOS Monterey Available at:
https://www.apple.com/legal/sla/docs/macOSMonterey.pdf
Under J. Other Use Restrictions
(Accessed: 14 April 2022)
Expo (no date) Expo CLI Available at:
https://docs.expo.dev/workflow/expo-cli/
(Accessed: 19 April 2022)
Flutter Documentation (2022) Available at:
https://flutter.dev/
(Accessed: 14 April 2022)
Ionic Documentation (2021) Available at:
https://ionicframework.com/docs
(Accessed: 30 April 2022)
mDevelopers (2021) What is Native Mobile App Development? Available at:
https://mdevelopers.com/blog/what-is-a-native-mobile-app-
development-
(Accessed: 20 April 2022)
Turku University of Applied Sciences Thesis | Juuso Torikka27
Node.js Documentation (2021) Available at:
https://nodejs.org/en/
(Accessed: 14 April 2022)
Patel, R (2021) Native Vs Hybrid Vs Cross-Platform App Development
Available at: https://aglowiditsolutions.com/blog/native-vs-hybrid-vs-
cross-platform/
(Accessed: 20 April 2022)
React Documentation (2022) Available at:
https://reactjs.org/
(Accessed: 14 April 2022)
React Native Documentation (2022) Available at:
https://reactnative.dev/
(Accessed: 14 April 2022)
Robards, T (2019) React: Understanding State & Lifecycle Available at:
https://itnext.io/react-understanding-state-lifecycle-d45df5d2cf3f
(Accessed: 28 April 2022)
Shah, K (2021) React Native vs Ionic: The Battle of Two Cross-Platform App
Development
Available at:
https://www.thirdrocktechkno.com/blog/react-native-vs-ionic-the-
battle-of-two-cross-platform-app-development/
(Accessed: 30 April 2022)
Statcounter (2022) Mobile Operating System Market Share Worldwide
Turku University of Applied Sciences Thesis | Juuso Torikka28
Available at: https://gs.statcounter.com/os-market-
share/mobile/worldwide
(Accessed: 14 April 2022)
Statista (2021) Cross-platform mobile frameworks used by software developers
worldwide from 2019 to 2021
Available at: statista.com/statistics/869224/worldwide-software-
developer-working-hours/
(Accessed: 23 April 2022)
Tsurbeliov, M (2021) How does React Native work? Available at:
https://www.akveo.com/blog/how-does-react-native-work
(Accessed: 23 April 2022)
Xamarin Documentation (2022) Available at:
https://docs.microsoft.com/fi-fi/xamarin/get-started/what-is-xamarin
(Accessed: 30 April 2022)
Xamarin.Forms (2022) Available At:
https://dotnet.microsoft.com/en-us/apps/xamarin/xamarin-forms
(Accessed: 30 April 2022)
.NET Documentation (2022) Available at:
https://docs.microsoft.com/fi-fi/dotnet/?WT.mc_id=dotnet-35129-
website
(Accessed: 30 April 2022)
Turku University of Applied Sciences Thesis | Juuso TorikkaYou can also read
