Week6: 3/5 - 3/11

Goal of the week:

• Embed JavaScript so that if you click a button on one page, it will show the result page
• Display the interactive result with database

Mar 9: Meeting with Professor

We have two parts to focus on for the website:

• Click a button --> submit a form about users
• Get the form data and modify/add contents to the website.

Since I have been working on the first one too long, I need to move on to the second one and try to manually add data and retrieve, then display it on the google site using Apps Script.

Mar 10: Created a Google Spreadsheet Excel file for database

• First, I decided to extract data from spreadsheet instead of mongoDB for simplicity
• Each module has different categories
  • Subject: CS, NonCS, Language (you have to type exactly as it is)
  • Type: Intro, Icebreaker, Activity, Break, Discussion, WrapUp, Review, Pitches
  • MinDuration: 0 if it's not mandatory
  • MaxDuration: maximum amount of time it can last
  • preferDuration: for medium-sized class
  • Description: description of modules
  • Materials: things professors need to prepare in advance of each lecture
  • Objective: the goal of this module
  • Importance: will further be implemented for better improvement

• I connected the Spreadsheet to the google site and was able to extract data in a certain row and column. I'm able to call this function in code.gs file and debug in the View-> log console print line.

I can include JavaScript in the HTML and set up client side even handlers and functions by adding functions in the Script HTML file. This is just a client side JavaScript handler responding to the button click. Then what about responding to the button click on the server side (code.gs) ? Because I didn't have this, the server side which includes Spreadsheet could not interact with the client side because all the functions were embedded with the JavaScript HTML file.We need to run the specified function on the server by calling:

google.script.run.function();

We can pass parameters to the function but they have to be primitive types. This is asynchronous function that returns without blocking and this means we need some sort of callback to deal with the result or failure. Therefore, we can also add to the run command a withSuccessHandler and/or withFailureHandler. These are called when the server side function has completed and they receive either the return result or an error code.

• So now, I am able to call a function in the server-side gs code whenever the checkbox is clicked, but could not still figure out how to directly detect that checkbox to know which checkbox is clicked or not.
• I still need to figure a way how to display the data I have in the gs.file to the HTML page.

Resources: http://www.i-programmer.info/programming/other-languages/4600-getting-started-with-google-app-script.html?start=1

Mar 11: Extract data from Excel and display to the page.

• Created a HTML and CSS webpage that will contain descriptions of modules.
• I was able to display the extracted data to the new page once I click the button using a SuccessHandler and Callback function. Since I'm not familiar with JavaScript, I had a hard time how to run JavaScript functions synchronously, but I figured out how to resolve by writing a Callback function.
• Now, I need to figure out how to open a new page from the previous page and display the corresponding data.
• I might have to use HTTP GET or POST request or jQuery to generate this new page from the previous page.

• Helpful resources:

https://stackoverflow.com/questions/11487045/how-to-use-google-script-run-as-if-it-was-a-function

https://ctrlq.org/code/19954-html-service-google-scripts