“Japanese Boot Camp” APP: React Development

If you have come here, you might have already read my previous post about Japanese Boot Camp APP design, and you already know which are the features expected in the project.
So, without further delay, let’s start with the code!

At first, I created all the structure of the application with “npx” (i.e. a “package runner tool that comes with npm 5.2+from React documentation), which allows you to forget about manually building the app connections and gives you a set of prearranged code that perfectly works already together.

Features included

Header and Footer Components

Since the structure was already served, I focused immediately on creating the basic header and footer to have an immediate visual feedback about my app. After I saw I was doing that properly, I populated those with the following elements.

#1 – Logo

As already explained in my previous post about my app technologies, React makes wide use of the export/import system. Therefore, the logo was extremely easy to display:

  • I create the folder “imgs” inside the source “src” one
  • Then imported it inside the index.js document under the name “logo”
  • Finally, I used {logo} as “src” property of my <img/> tag
#2 – Link to Tofugu tutorial and link to Anilist API documentation

Nothing to be said about links, as they work exactly as expected in basic HTML5.
I placed those inside the render() part of my componet, wrapped inside a common <a> tag.

Game Core (App Component)

#1 – Get random Anime info

Here it starts a little of complexity.
As I knew from AniList API documentation, to obtain the information I wanted, I needed to specify the ID number of the anime I wanted to obtain information about. But, since my app revolves around getting random image I had to force this process a bit.

Generate random ID
So I decided to change the “variables” property necessary to fetch the data, from a static one to a randomly generated one.
(The choice to random between 1 and 10000 came after few attempt trying to obtain data hard-coding several ID numbers)

In order to display immediately an image (so that the user can start playing), I had to make sure the system would start requesting data as soon as the component App (i.e. the core of the game) is generated.
With “ComponentDidMount()”, the function “nextTitle()”, which is the one controlling the query, is triggered immediately after the component is ready.

Get info: { ID, Title (Romaji, Native), Image (ExtraLarge), and isAdult }
Then, everything was settled to proceed with the normal call to the database.

#2 – Handle request with wrong ID

Anyway, this way of coding conducts to an error. Can you guess what?
Forcing the system to fecth data over an ID generated randomly, there is no way to be sure the number obtained coincides with an actual ID on the database. That brings to an 404 error when the system can’t find an appropriate response.

404 Error Handling
One way to deal with this kind of error is just “let it be”, ensuring the system doesn’t get in an infinite loop of void requests.
So then, instead of going with a traditional JS promise which use the syntax “then.” to deal with the response, I changed the structure with a “try…catch” statement. In fact, as written in MDN Documentation:

The try...catch statement marks a block of statements to try, and specifies a response, should an exception be thrown.

As you can see, I simply told the system to generate new requests for a maximum of 15 attempts. Then, it’s up to the user to force a second rush of queries.
Maybe not a very clean way to proceed -there might be better solutions -, but the user experience is overall not so damaged by this process (as you can see later on in this post).

Don’t wanna lie guys, I was helped with this, as I couldn’t figure out myself how to deal with this type of error.
At first, I was actually trying to find a solution which implied catching only 404 type of errors, but that seems to be quite impossible.

#3 – Ensuring the data are suitable to be shown (isAdult: false || fullEng: none)

As extra coverage, I decided to tell the system to skip the current anime if the native title requested has empty value, or the content is for adult only, or the title is fully English in the japanese native version also (we want to avoid this because it wouln’t be of any help to the user on his/her language development) .

#4 – Skip to the next title

Nothing easier than this, since the code which handles the database requests was already created. Now, what’s left to do is to make the user triggers the database request function manually through a CTA button.

#4 – Typing down and checking the answer

Get value from <input />
First of all, we must ensure the system is able to read the title the user types down on the input area, so:

  • I defined an empty inputValue element on the state of the component
  • I told the system to populate its value with the string the user has typed down
  • Finally, setting a newState in order to fix the value of the input to inputValue

Compare answer with native title + visual feedbacks
It is time to compare the answer of the user with the native title I get from the database.
In order to do that, I import the value of the input (we were talking about before) inside the function, as well as the native title, then with a “if…else” statement I ask the system to compare the two values.
If they are the same, the display will show as feedback a change of color on the border of the image (limegreen) plus a message of praise, otherwise the same will happen advising the user he/her is wrong and the border will change with tomato color.

#5 – “Help” button shows Romaji title

As already told before, this section of code was create in order to help the user with guessing the japanese native title.

Get Romaji title
First, I get the romaji title from the database.

  • State an empy titleRomaji element
  • Populate it with the value I get from the database request
  • Reset the state with the new value
  • Import titleRomaji in the render() section

Toggle display visual
As soon as I have the romajiTitle, I let the user choose if visualize it in the help section or not (easily translated in a toggle button function).

Current App Appearance

Curious to see how all this code is translated in visual on the screen?

Recorded with APowerSoft online tool

You can also play with the app clicking on this link, which will redirect you on Heroku, where the app is hosted!

Features to be further explored

Choose between Anime, OVA and Manga

In order to upgrade the features of this app, I tried to implement a second scheme of query requests, decided by the users themselves.
The idea was to implement a form with 3 <input type=”checkbox” /> so that it would have been possible to play with manga and OVA too.

However I found myself facing a series of troubles (still to be solved):

  1. Bind the checkbox selected with the right query
  2. How to make the system understand it can request with all the three queries at once, without a real priority (because the user wants to play with every topic he desires). Maybe I should change with <input type=”radio”/>? Don’t know yet.

Game difficulty level

I haven’t really investigate this feature, however, browsing online I found myself on two really interesting pages full of handy regex.

Then, I am pretty much sure it is possible to filter the query to the database asking the system to fetch only titles which follow specific directives from the regex or just skip to the next title until it corrispondes to what the user requested.

And that’s all from my Japanese Boot Camp APP.
I hope you enjoyed this journey together, and if for any reason you liked the idea of the app and want to talk more about it, leave a post below in the comment section; I will try my best to reply ASAP 🙂

2 thoughts on ““Japanese Boot Camp” APP: React Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.