Developing itpec preparation test application with react native

DEVELOPING ITPEC PREPARATION TEST APPLICATION

WITH REACT NATIVE

SVTH: Hoàng Trung Hiếu, Phạm Quốc Huy,

Nguyễn Duy Khánh, Đỗ Đức Dũng

GVHD: TS Nguyễn Xuâ n Thắng

Tó m tắt - Khi thị trường di động ngày càng mở rộng, nhu cầu về cá c ứng dụng di động cũng

ngày càng tăng. Các ứng dụng di động này khô ng chỉ cần hoạt động mà cò n phải hỗ trợ nhiều nền

tảng chủ yếu là Android và IOS. Trong bài bá o này, nhó m phá t triển sẽ thảo luận về React Native -

một framework để phá t triển cá c ứng dụng di động cùng với lý do sử dụng framework và minh chứng

kết quả của việc triển khai React Native trong việc phá t triển ứng dụng ITPEC Preparation Test.

Abstract - As the mobile market is expanding, the demand for mobile applications is also

increasing. These mobile applications do not only need to be working, but also have to support

multiple platforms mainly Android and IOS. In this paper, the development team will discuss React

Native - a framework for developing mobile applications along with the reasons to use the framework

and demonstrate the result of implementing React Native in developing ITPEC Preparation Test

application.

Keyword: React Native, cross platform, JavaScript

1. INTRODUCTION

Several years ago, as the mobile market is still small, mobile applications are mostly

developed based on their native platform: Android using Android Studio while IOS using

Xcode. While today, the demand for mobile applications is skyrocketing as more and more

people own a smartphone but developing mobile applications on both Android and IOS with

their native IDE are too costly due to requiring two developing teams on each platform. This

is where cross platform development comes in; there are a good number of frameworks

available for cross platform development and one of the most popular is React Native. The

main content of this paper will explain React Native framework along with the demonstration

of the framework in the Information Technology Professional Examination Council (ITPEC)

preparation test application project. The topic was chosen because the demand for ITPEC

certification is greatly increasing while there are not any mobile applications that help

preparing for the test on either market.

2. MAIN CONTENT

2.1. Definition of React Native

React Native is a JavaScript framework used for developing a real, native mobile

application for iOS and Android. It uses only JavaScript to build a mobile application. It is

275

like React, which uses native components rather than using web components as building

blocks. React Native running on a mobile device, and it does not load over the browser. React

Native apps are the real native app, the JavaScript code stays as JavaScript, and they run in

some extra thread by the compiled app. The user interface and everything are compiled to

native code.

Facebook developed React Native in 2013 for their internal project Hackathon. Later

on, it was released publically in January 2015 as React.js, and in March 2015, Facebook

announced that React Native is open and available on GitHub.

React Native was initially developed for the iOS application. However, recently it also

supports the Android operating system.

For the traditions of the work of a developer, we must first build an app that says

“Hello, world!”:

Figure 1: Simple Hello World application with React Native

2.2. Reason for using React Native

To answer the question of why using React native we must see what the world before

React native has been a thing. Before React Native, if you wanted to build a native app in iOS

and Android, you would have to build each one separately with zero code reuse between both

of them. Which mean:

- If it takes you three months to build an iOS app, it will take you three months to build

an Android app

- This also meant that you needed specific resources for iOS and different resources for

Android

React Native allows a single developer to build real, native-rendering experiences for

276

both platforms without having to understand any Objective-C/ Swift (iOS native

programming language) or Java/ Kotlin (Android native programming language).

The focus of React Native is on developer efficiency across all the platforms you care

about—learn once, write anywhere.

And you’ll start to notice, the biggest reason to choose React Native because it doesn’t

introduce new tool you have to re-learn

2.3. React Native in action: ITPEC preparation test application project summary

ITPEC Preparation Test Application is a mobile application that helps users to prepare

by taking the mockup test based on the previous year exam provided by the ITPEC. After

logging in and taking the mockup test, users can see their result.

Our ITPEC preparation test application was developed using React Native framework

with Expo as our framework support to run on Android and IOS phones by using Expo Go

app.

To access the application, first we have to start the server by open the project folder in

the terminal (for Linux) or Git Bash (for Windows):

Figure 2: Run expo server by Ubuntu terminal

Then to run on the device, we can open the Expo Go application (required to install) on

the phone then scan the QR code provided in the terminal:

277

Figure 3: Scan QR code to run application with Expo Go

Another way to open the application is to connect the Android phone to the PC then type

“a” in the terminal to open the application on Expo Go on the Android phone.

Figure 4: Connect Android device to run the application with Expo Go

When using the application, user is required to sign up for an account. After signing up

and signing in, user can take a mockup test within a test time. After submitting the test or the

278

time run out, the application will calculate the result then show it to the user. The user after

seeing the result can retake another test or check the correct answer of the test.

2.4 ITPEC Preparation Test Application - work results

After a long time of working with this project, the project team has released the first

major version of ITPEC Preparation Test Application. This release contains a welcome page

for all users with the functionality to log in as an user or to sign up for an account. After

logged in, the user can take a demo test with questions from the question bank and a timer.

When the user ends the test or the timer runs out, this application will calculate the result

based on the user's answer. The user can also see the correct answer after finishing the test.

Figure 5: Welcome page of the application.

In this view, users can login as a member or sign up for an account.

279

Figure 6: Register and Login form for the application.

Figure 7: Homepage of the application.

In this view, users can choose to do the test or log out.

280

Figure 8: Question view , Result page and Correct answer view

2.5 Evaluation

Advantages:

The application is developed by using React Native, it can run as android, ios or web

application.

We have implemented all the core functionalities: Login, registration, take a demo test,

calculate final result, show correct answers. We have also used Google Firebase

Authentication to secure user’s accounts.

Limitations:

Lack of React Native experience which takes a lot of time to build the application.

We have only implemented a simple application with poorly user interface design.

The question bank is still saved as a JSON file in the project folder not in any database.

Future work:

Improve application UI.

281

Add more features to the system, such as topic recommendation for learning based on

the user’s test results, or creating a room with friends to study and compete.

Store questions bank in an online real time database.

3. Conclusion

Over the years, mobile devices have shown outstanding development and users have the

opportunity to approach modern applications, web applications with many powerful features

for functions and graphical UI. Therefore, developers can create mobile applications for many

different purposes without limitations or obstacles due to technology. In this paper, we have

delivered a brief discussion about React Native and a simple demo application about ITPEC

Preparation Test Application.

282