「일단공부(Il-Dan-Gong-Bu)」 App Development Journal(RN, React Native)

2019-05-23

I've use RN(React Native) to develop the App called 「일단공부(Il-Dan-Gong-Bu)」. in here, I've written the development journal about this app.

Outline

this is my third application by RN(React Native). the links below are the app development journal about my previous applications. if you want to know more details, please check it out.

this application is for only Koreans who want to learn Japanese words, so I think you guys don’t need this. I just hope this development journal is interesting to you.

what is 「일단공부(Il-Dan-Gong-Bu)」?

Koreans can study JLPT Japanese words by level on 「일단공부(Il-Dan-Gong-Bu)」, alos this app has a review feature to memorize the words.

you can download the app via the links below.

Why did I make it?

I am Korean who lives in Japan. normally, I study Japanese words on the subway with the word book. I think you heard about Japanese subway. if you don’t, just see this link(https://www.kawaiikakkoiisugoi.com/2011/06/14/tokyo-subway-packers-push-people-around/). not everyday, not every subways, but it’s very hard to study on the train. and the book has Japanese words and Korean meanings, so I try not to see the meanings but my eyes catch it…

so I want to simple app that makes me study Japanese on the train!

JLPT Japanese words app, 「일단공부(Il-Dan-Gong-Bu)」

App Planning

I just set MVP(Minimum Viable Product) like below.

  1. show JLPT Japanese words by Level
  2. show the amount to study one day(15 words)
  3. show Japanese word list without the meanings.
  4. if users click the show meaning button, the meaning is shown up.
  5. if click the meaning, the app reads the word.
  6. the app has the test feature to review the words
  7. if users have wrong words in the test, the app shows the wrong word list.
  8. the review feature by level and all words.
  9. in the review feature, the words that are often wrong are shown up often.

it looks the app has many features. I tried to make the simple app, but I want to use it by myself, so I added various of the features. actually, I wanted to add more…but at a first, MVP, MVP!

Design

my design sense is zero…I made many patterns and colors to find fittable with my app…still, the design is difficult for me.

JLPT Japanese words app 「일단공부(Il-Dan-Gong-Bu)」 design

I used sketchapp for the design. and I choose the best simple design in my patterns and removed some screen.

JLPT Japanese words app 「일단공부(Il-Dan-Gong-Bu)」 final design

I respect the designers!

App Development

of course, I’ve used RN(React Native) for the app development. 「일단공부(Il-Dan-Gong-Bu)」 is based on RN(React Native) and typescript.

also, I’ve used NativeBase for basic UI and styled-components for styling.

I choose react-navigation for 「일단공부(Il-Dan-Gong-Bu)」 navigation system.

I’ve use react-native-tts to implement TTS(Text To Speech) for developing voice feature which is one of MVP(Minimum Viable Product) feautes.

I used sqlite DB for the words and deployed the app with it. if you want to know how to use sqlite in RN(React Native), see the link below.

finally, I use Google Firebase to analyze the app and use Google Admob for the advertisement. I use react-native-firebase for these features.

Lastly

this app is so simple. the design took a long time in this project. also, react-native-sqlite-storage has a performance issue on Android. my app loads the data from local, but looks like loading from the server. I’m not sure my code is the best way for the performance…I’ll tune the sql statement again. if it has still the problem, I’ll check the source code of the library.

this app is for Koreans…so, just download it to check how you can use RN(React Native).

Buy me a coffeeBuy me a coffee
Posts