BlaBoo App Development Journal(RN, React Native)

2019-05-23

I've use RN(React Native) to develop the App called BlaBoo. in here, I've written the development journal about this app.

Outline

I’ve studied RN(React Native) so far, but I’ve never developed the app from start to finish. so I’ve decided to work on this project by using RN(React Native) to develop the app fastly from start to finish.

What is BlaBoo?

BlaBoo is a word study app for baby/children that combines the word blah blah with the word boo.

  • BlaBoo introduction page: BlaBoo

below is BlaBoo’s download links.

baby/children see the illustrations and if they touch them, the app reads the word with sound.

BlaBoo for baby/children word study app - development journal

Why did I make it?

actually, there are many word study applications for baby/children. the main focus of this app is the following.

  1. to develop the word study app which baby/children can learn foreign languages.
  2. to develop and distribute the app with RN(React Native) I studied so far.

living in a foreign country, I looked for many apps to teach my child foreign language and mother tongue, but there were few apps that provide multiple languages in one app. I found the problem and I have a skill to solve it so I decided to make it.

App Planning

however I didn’t have enough time to make the app by myself.so first, I’ve been benchmarking various apps, and define MVP(Minimum Viable Product) of the app. BlaBoo MVP(Minimum Viable Product) is following.

  1. various categories: define categories and choose the words in the category to be displayed.(ex> cars, fruit, vegetable)
  2. display the word by the illustration: display the word by the illustration to interest baby/children.
  3. support the voice of the word if it is touched: if baby/children touch the illustration, the app reads the word with the voice to make baby/children learn the word alone naturally.
  4. support multiple languages: support multiple languages so baby/children can learn one word in several languages.

this is how I define MVP(Minimum Viable Product) and I’ve sketched the app to design user’s movement in the app.

BlaBoo for baby/children word study app - sketch

I’ve downloaded the sketch template in below site.

since I made an app as a hobby alone, the planning is not that big. goal, target, business…put them in and just thought simple features and rough sketch. even so I have tried to make my own hypothesis and list what to do, but I am not sure if I should call it a planning.

BlaBoo for baby/children word study app - planning

App Design

I’ve designed the app based on above planning. I’m not a designer so my design is not so pretty. however I can decide basic color and concept of the app.

I’ve used sketchapp for the app design and donwload the illustraions from freepik.

BlaBoo for baby/children word study app - design

App Development

of course, I’ve used RN(React Native) for the app development. one developer can make iOS/Android app same time, and learning curve is not high like learning Swift or Kotlin because of javascript. BlaBoo is based on RN(React Native) and typescript.

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

RN(React Native) doesn’t have the navigation system. BlaBoo uses react-navigation for the 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.

also I’ve use the locale information from the user device information to set the app and react-native-tts default language. I use react-native-device-info to get the user device information.

and if the illustration is touched, the illustration is moved simply. I use react-native-animatable to insert simple animation to the illustration.

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

I’ve written the journal like above, after all, it seems like there was not much to do except bring and implement open source. thanks to make beautiful and useful open source. to develop the app was not difficult because I used awesome open source and reusable component. just, gathering the illustrations and words took a longer time than developing.

BlaBoo for baby/children word study app - resource code

App Registration

so BlaBoo MVP(Minimum Viable Product) is completed. I thought I would register and download the app soon after development, but the process of registering the app took a long time.

I already know Apple App Review is taking a long time, so I registered iOS first, and I registered Android after iOS is registered. Apple App Review took almost 2 months and Android took 2 days.

Apple App Review took a long time because of reject the app by many reasons. my app was rejected on Android because my app is for children but I didn’t select Designed for Families program option

BlaBoo for baby/children word study app - Google App review reject

to register apps, we need to enroll Apple Developer Program and Android Developer(Google Play Developer).

also, I needed various informations. it took a long time to make these informations.

and Apple strict App Review. my app was rejected 5 times. I felt not to register. at that time, I really wanted to stop to register. and final rejection reason was my app doesn’t have user interact, so Apple App store doesn’t need my app.

OMG. at first, I appealed to Apple like “my app has more categories than this app. my app has more words and multiple language feature than that app.” but they didn’t approve it easily. rather, if I think other apps are in violation of the app store, report them…but how do I report them those developers have made with many efforts…so I added an weird feature unlike origin plan.

BlaBoo for baby/children word study app - review feature

I’ve added review feature which baby/children can review words studied in categories by card type. the feature is to display 20 cards randomly, and swift left or right to review.

this feature is not at first plan and it is made for approving App Review fastly by designing 1 day and developing 1 day, so it looks like weird in the app. still I think BlaBoo is two apps in one app. however BlaBoo was approved safely App Review after adding this feature.

at first, I felt anger about Apple App Review, but this review made me thought that iOS apps have great UI/UX. after Apple App Review, I thought I’d make the next app more user friendly. thanks Apple App Reviewers.

Finish App Development Journal

there were many things, but I could release the first app safely. maybe, this app looks like not to have enough features, but this app’s purpose is not to gather many users for getting money, just I want to use for my child and for developing an app with RN(React Native).

looking back, it took more time to design and to gather the illustrations than development. development took almost 1 week… I saw RN(React Native) development performance.(thanks developers who make many open sources.)

Apple strict App Review. changed App concept quickly, but this experience changed my mind that I could make more user friendly apps. thanks for App reviewers again.

The hypothesis that I can develop the app with free resources at BlaBoo is proven. develop apps using free resources!

Lastly

well, TTS(Text To Speech) voice is not friendly. and there is wrong pronunciation. for example, TTS can’t pronounce spaghetti in Korean, so I changed it to pasta. if you want to donate voices, please send email or pull request.

I use free illustrations so that doesn’t looks like same style. if you want to donate illustrations, please send email or pull.

I made BlaBoo support Japanese, English, Korean basically and app download is occured in China and Italy so I added Chinese and Italian. however, I don’t know Chinese and Italian so I used google translator. if you catch wrong Chinese or Italian, please feedback me. also if you want to donate other languages, please send email or pull.

Download

Buy me a coffeeBuy me a coffee
Posts