Developing a thai words learning with pictures application with react native

DEVELOPING A THAI WORDS LEARNING WITH PICTURES

APPLICATION WITH REACT NATIVE

SVTH: Nguyễn Thành Cô ng, Nguyễn Thành Cô ng ,

Đào Anh Thành, Trịnh Quang Huy

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

Tó m tắt - Vào năm 2021, các ứng dụng xuất bản trên cả nền tảng iOS và Android đã có kinh

nghiệm trong ngành ứng dụng di động. Người dùng giờ đây sẽ chạy phần mềm ổn định và mạnh mẽ

hơn nhờ sự ra đời của cá c ngô n ngữ phá t triển đa nền tảng như Javascript và Dart. Hiện tại, hai

khung phá t triển ứng dụng di động đa nền tảng phổ biến nhất hiện có là React Native và Flutter lần

lượt được Facebook và Google giới thiệu và thường xuyên được so sá nh với nhau dựa trên nhiều yếu

tố. Trong bài bá o này, nhó m phá t triển sẽ thảo luận về React Native như là khung phát triển cho Ứng

dụng Học từ ngữ bằng hì nh ảnh của Thá i Lan và giải thích cách nó được á p dụng trong quá trì nh thực

hiện lập trì nh.

Abstract - In 2021, publication apps on both iOS and Android platforms have been experienced

in the mobile app industry. Users will now run even more stable and powerful software thanks to the

introduction of cross-platform development languages like Javascript and Dart. At the moment, the two

most popular cross-platform mobile app development frameworks available are React Native and

Flutter introduced by Facebook and Google respectively and frequently compared to one another

based on a variety of factors. In this paper, the development team will discuss React Native as the

development framework for the Thai Words Learning With Pictures Application and explain how it is

applied during the programming execution.

Keyword: React Native, ReactJS, Javascript, Mobile application, Thai word learning, Pictures

1. Introduction

The choice of this topic is to catch up with the new trend of mobile application

development - cross-platform apps (or code one - run everywhere). Using this technique

might not be the best solution for optimizing performance, since it is not developed based on

device compatibility but for reducing developing cost. At the beginning, the four of us have

no background knowledge in developing mobile applications. Therefore, during the time of

this subject, we learn from scratch and build this application at the same time. There are five

popular frameworks for developing cross-platform applications but we chose React Native

framework for this assignment, and will discuss in depth why. The following parts of this

paper will (1) give an overview of using React Native in developing mobile applications, (2)

analyze the requirements for the Thai Words Learning With Pictures Application, (3)

demonstrate the implementation of the application, and (4) evaluate the result of the

development process as well as recommend potential improvements.

292

2. Main content

2.1. React Native

2.1.1. What is React Native

In today's digital-first environment, having a smartphone app is important for many

companies. So, Facebook created React Native in 2015, and it has rapidly taken the mobile

development world by storm.

React Native is a JavaScript framework for creating actual, natively rendered mobile

apps for IOS and Android. It's built on React, Facebook's JavaScript library for creating user

interfaces, but it's developed for mobile devices rather than the browser. To put it another

way, web developers can now create smartphone apps that look and sound completely

"native," all by using the familiar JavaScript library. Furthermore, since much of the code you

write can be shared across platforms, React Native makes it simple to build for both Android

and iOS at the same time.

You can get started creating mobile apps with React Native's several sets of essential,

ready-to-use components. The following are some of the common Core Components:

Figure 1: React Native’s Core Components

Moreover, React Native helps users manually build components and APIs to aid in the

development of Android or iOS apps depending on their specific requirements.

2.1.2. Why use React Native for Mobile App Development

Cross-platform development is now a viable alternative to native development. Today,

React Native application development is a popular choice. The ability to reduce expense and

time by using reused code is the key reason for using React Native technologies. React Native

compiles to native Java and Swift code, removing the need for developers to write specific

293

code on each platform (iOS or Android), since it can be used on both. Increased code reuse

performance, in turn, leads to super-fast production outcomes and cost savings.

Secondly, developing mobile applications by React Native has a hot and live reloading

functionality at its core. This allows developers to work with code changes in real time and

perform fixes while the app is loading, the live feature automatically reloads the whole app

after making a change, while hot reloading only reloads a particular area of change. So it

makes it easy to develop and test applications.

Furthermore, React Native components map 1:1 with native development components.

Developers can design interfaces faster, increase the agility of the application, and create an

authentic, native feel from the native app. The React Native is also compatible with native

software and can consistently coordinate with existing code, which is additionally perfect for

including fast expansions to existing native applications.

Fourth is Third-party Plugin Support, Because React Native is still in development, so

the components may be missing for some specific business needs. To fix this, React Native

offers two types of third-party plugins: JavaScript-based and native module. For example, if

an application needs to integrate Google Maps into, React Native provides the ability to link

any plugin to native or third-party modules.

Finally, React Native has the largest community out of all cross-platform. Therefore, it

is very easy for the developers to support each other. Developers can get help from experts in

the community or can find relevant libraries to develop and refine the application.

2.2. Requirements Analysis

Figure 2. Thai Words Learning With Pictures Application Requirements

294

Based on the requirements given above, the main screens are defined as follows: Login

screen, Register screen, Topic list screen, Word learning screen.

2.2.1 Login Screen

This screen should contain 2 Text Inputs for username and password respectively. The

password Text Input should have secureTextEntry={true} prop to ensure that the password is

invisible. Initially, account authentication is just hardcoded, which means an account will be

checked against a predefined json object with 2 attributes: username and password. On filling

the 2 Text Input fields, a user should be able to click a button (TouchableOpacity component

is recommended) that triggers the authentication and be redirected to the Topic list Screen if

his/her credentials are authorized or be alerted if they are not.

2.2.2 Register Screen

This screen should contain 3 Text Inputs for username, new password and password

confirmation. On filling the 3 Text Input fields, a user should be able to click a button

(TouchableOpacity component is recommended) that triggers the authentication and be

redirected to the Login Screen if his/her credentials are authorized or be alerted if they are

not.

2.2.3 Topic list Screen

This screen includes a list of number icons which represent all the topics. When the user

taps an icon, the application will redirect to the corresponding Word learning screen for that

topic.

2.2.4 Word learning Screen

The Word learning screen appears and shows a picture corresponding to the selected

topic. The picture has many objects. When users tap on an object, a pop up will appear to

display word in Thai, meaning in Vietnamese, object image and playable pronunciation in

Thai.

2.3. Implementation

2.3.1 Version Control

In this project, our team decided to use Git and GitHub which have become popular

standards in the software development process. Git allows the user to track changes to files

over time so that the user can go back and look at specific versions later. Github is an online

software development assistance and version control service that allows users to share with

others on user’s Git repositories by hosting them online. People that have been shared Git

repositories can easily view code, push their changes to Github, and also pull changes to their

computer.

295

Figure 3: Github repository

2.3.2 Implementation

In our project, the implementation is divided into two different phases: Frontend

implementation and backend implementation. At the beginning of each stage, the team

conducts an online meeting, assigning members or performing the work themselves,

completes implementations and then pushes code into the Github repository. To finish the

project, our team splits the task into screens, with each team member assigned to separate

screens. More specifically, when we add dependencies, four directories are initialized: expo,

expo-shared, vscode and node_modules. Before the project is launched, directories in the

main directory of the project, including package.json and the app.json, etc, will be pre-set. A

significant file to note is that the App.js file is regarded as a file containing common

functionalities on all screens.

Figure 4: Overview of project code structure

296

Additionally, the assets directory is used to store the images used in the project. Our

group decided to use the png format for the images.

Figure 5: List of images inside the assets folder

And then, we use the folder app to store all client screens in this project. The main

screens used are: Login, Register and Dictionary.

Figure 6: List of Screen inside screen folder

Finally, screen components are produced and exported. The below are the primary

screen interfaces in mobile applications.

297

Figure 1&2. Login Screen and Register Screen

Figure 3. Topic list Screen

298

2.3.1 Advantages

Compared to native applications, cross platform has many advantages. The one that is

significant most is cost-effectiveness. Basically, the entire cross-platform application

development is actually based on the concept of “writing once, running everywhere”. Hence,

reusable codes, along with agile app development via tools, can easily lessen the overall cost

of app development. Hence, to improve the enterprise on different platforms as well as tools

in quite a cost-effective way, certainly, there isn’t any other alternative to these cross-platform

applications. As there’s only one app that is developed that runs over all of the platforms, it is

quite easier to maintain and even deploy code or easily make the changes. Also, updates can

easily and promptly be synced over all of the platforms as well as devices, hence saving both

times along with money. Also, in case a bug is discovered in the common codebase,

essentially it can easily be fixed once. Hence, it allows developers to save a lot of time as well

as money.

We develop this application within 3 weeks, that includes time we need to study since 4

of us have no background in developing mobile applications. Once again, easy to

develop/implement, save time and consistent behavior between multiple devices

2.3.2 Limitations

Many difficulties have hindered the process of completing this application. The lack of

understanding of the new programming language - React Native - with using Expo as an

open-source platform is the main cause. It takes a long time for the team members to get used

to them like normal programming languages, it's quite new. The second obstacle is the

database. The database is not provided in advance, we have made effort to search and collect

the database for the application, especially to collect related images and sounds.

2.3.3 Further improvements

Some outstanding features are being researched and developed in the future.

Accordingly, the application will have more tests, from basic to advanced, to help users easily

test their own knowledge. In addition, the international standard tests are also included in a

separate section, and there will be a certificate for users who achieve high scores in that test.

Word data is also regularly updated and refreshed, based on reputable sources.

3. Conclusion

With the community every growing and more developers being intrigued by the idea of

a truly cross-platform language, React Native can flourish and prove itself to be a worthy

consideration for native mobile application development. Whilst coding with React Native, it

feels comfortable enough for a web developer to be able to manage the challenges that they

may face. Overall, React Native has proven that it should be considered as a development tool

299

for applications that wish to be done efficiently, within a shorter time frame, when targeting

multiple mobile platforms. The user interfaces that React Native can create, are identical to

those that are available with native development, but the interface may be customized in a

way to suit the requirement of the application. With developers at Facebook and the React

Native community continually adding to the framework’s development, React Native, seems

to have a profitable future and should be a framework that developers consider using for their

applications.

REFERENCES

https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch01.html

https://reactnative.dev/docs/intro-react-native-components

300