Description
In this assignment, we’ll get started on our flashcard app. We’ll dothree main things: getting translations from the Google TranslateAPI, setting up a database to store the flashcards, and starting auser interface with React.
Using the API
Let’s get started with the API. First, you’ll need to set up a project
on the Google Cloud Platform and get an API key for GoogleTranslate. Here are some instructions. Next, let’s try a sample request and response.
On the server, fromthe command line, try running this sample code: testAPI.js (Howdo you run a Javascript program on the server? You know this.)
You’ll have to add your API key to make it work. You should see it
display a phrase and its translation into Korean. To warm up,
change it to use the language of your choice (if that is not
Korean).
Read up on the node response module so youunderstand what is going on here.
Now you’re ready to teach your app to answer translation queries.
When it gets a URL in this format:
http://server162.site:port
/translate?english=example phrase
it should return the translation in JSON, something like:
{ “English”: “example phrase”, “Korean”: “예시문구” }
How to accomplish this? When it gets the query, it makes a queryof its own to the Google Translate API. And when the responsecomes back from the API, your server can send the response backto its browser.
Finally, for testing purposes, copy your palindrome Web page andmake it translate the input, instead of making a palindrome. Toset up for the next part, add a “Save” button.
Setting up the database
To set up the database, we have to write a node program that runson the server, but which are not part of the actual Web server
code. We’ll use the sqlite3 module, which you have to install. Ourdatabase will have one table, with a row for every flashcard. Hereis a starter program createDB.js, that sets up a flashcard databasewith one table. The table contains only one column, an ID number.
Change it so that it includes
1. unique ID number (int),
2. English text (string),
3. translated text (string),
4. number of times shown (int),
5. number of times answered correctly (int)
The lecture on 5/10 will cover this. You should see the database
file FlashCard.db appear in your server directory.
Next, let’s load some cards into the database. Teach your server torespond to AJAX queries of the form:
http://server162.site:port/store?english=examplephrase&korean=예시 문구
by storing a flash card into the database. Times shown and timesanswered correctly should both be zero. Return a HTTP responsewith an empty body, to let the browswer know everything went
well.
Finally, have the browser send the store request when the user
hits the “Save” button. You should now be able to make and savecards. To test your program, you can use this function, whichprints out the whole database (or look at it using sqlite3 from thecommand line).
Front end with React
Now, let’s get working on the UI. Here are are Jamie’s completedesigns, and here are her slides. We will use React for the whole UI for this project. Here is myguide to a minimal React setup that should work with our server.
The React documentation is very good, particularly the guide tothe main concepts. You could start with this quick intro.
You are welcome to produce your production .js file or files usingsome other development process, and the TAs might be able tohelp you with that. However, we expect your project to runentirely on your server, not some other server that you installed.
Your HTML file should look almost exactly like the example fromlecture, with the body containing a single div and possibly script
tags. The entire DOM should be constructed using React.
Your .cssfiles will be exactly the same as if we were not using React.
I recommend you begin with the card creation page, and get it
working with the AJAX requests and server code developed in theearlier steps. This is sufficient for this assigment, but if you want
to move on to the flashcard review page as well, feel free.
Here is the behavior we are expecting.
Entering English text andhitting return on the card creation page should update thetranslation. Pressing save should save the card to the database.
Pressing start review should move to the flashcard review view;
this should not be a new HTML page, just a re-drawing of thecurrent page with different state.
