Description
We will now complete the flashcards application. The main newfeature will be the login screen. Here is a demo, loginServer.zip, which allows users to login using Google, and then see a page(“hello.html”) which is not publicly available.
To make it work,
you’ll need to get Oauth2 credentials for the Google project youmade for your app (where you got your API key). Paste those inwhere indicted in the code, and try it out. What happens when yougo to “hello.html” when you are not logged in? When you go to”login.html” when you are?
You’ll need to integrate this functionality into your existingpipeline, and extend it in several ways.
Add a new table to your database, to hold user information.
It should include columns for first name, last name, andGoogle ID. You can use the Google ID as the unique primarykey identifying each row of the table, and also as the userIDfor each flashcard in the Flashcards table (feel free to do thissome other way, if you prefer).
In the login code, find the “gotProfile” function whichPassport calls once it successfully gets the Google profileinformation for a user. Here, check if the user is already inthe database table. If so, you can just put the Google ID intothe “dbRowID” variable for processing in the later stages.
Otherwise you need to insert the new user in the table first.
Next, find the “deserializeUser” function, which should get
the Google ID passed in (from “gotProfile”). There, look upany information a later pipeline stage might need about theuser from the database, and put it into the “userData” object.
This gets stored as “req.userData” in the request object
which all pipeline stages take as input. If you don’t want toget data out of the table at this point, just use the Google IDas the user data.
Alter your pipeline so that the create cards and review cardsviews are only visible to users after login.
After login, redirect to a url called “auth/accept”. From there,
check to see if the user has any flashcards. If so, redirect tothe review cards view. Otherwise redirect to the create cardsview.
To finish the app, you’ll need to implement the review cards view.
To make the card flip, you can start with this demo, flipcard.zip(put it in /public, start your server and navigate to the page to seeit go). It’s a React component. The demo card flips when the userhovers over the card. Instead, our card should flip when the userclicks on the card, or when he hits return in the text entry box(whether or not there is text in the box). The “back of the card”
should show the English text, if the user did not get it correctly. Ifhe did, it should show “Correct!”, as in the mock-ups.
Add an AJAX query so that your front-end Javascript can get thethe user’s first name, and add it to the footer as in the mock-ups.
The order of the flashcards shown is up to you. You need somealgorithm that takes the number of times a card has been seen,
and the number of times the user got it right, into account. I
recommend this strategy, which is an example of a more general
strategy for producing a non-uniform random distribution:
Define a score for each card, which indicates how much wewant it to be seen. For instance, it might be:
score = ( max(1,5-correct) + max(1,5-seen) +5*( (seen-correct)/seen) )
Notice all three terms are between 0 and 5, since seen >=correct, that the total score is at least two, and that a cardwill get a score of 15 when it has not been seen at all.
1.
Pick a random card belonging to the user, and compute it’sscore. Then, pick a random number between 0 and 15. If therandom number is less than or equal to the score show thecard. Otherwise, pick a new card and continue until you showa card.
2.
For this to work, of course, you need to increment “times seen”
and “times correct” in the database whenever the user reviews aflashcard. You are welcome to come up with other strategies!