Skip to content

3. Build the Render Function Part 2

Playback Speed:
Transcript

In this two-part video, you will write the “Render” function for your A-B testing website.

If you don’t know which part of the code you are responsible for, check with your group members.

Your code will tell your program which poster to show and where to display it in a web browser window.

To do this, you will: Create a template variable to hold the HTML page.

Add a test poster URL and test poster name to the template.

Create a version of the template using the variables.

Then, replace the test values with information from the config part of the code.

First, select the render file.

Beneath the render function, between the two curly braces, create a variable called “template.”

Type: v-a-r, space, template, space, equals sign.

Variables allow you to label and store information that can be used throughout your program.

The template variable will hold the HTML page. The HTML page tells the computer how to display the poster in a web browser. Click the "page html file" to see this code.

"Page html" describes the heading -- “Does this poster make you want to see the movie?” -- the yes and no buttons, and the size of the image on the webpage.

Return to render.

Define the variable so that it gets information from the "page html" file.

After the equals sign, type: space, HtmlService, dot, createTemplateFromFile, open parenthesis.

In place of “file name,” type 'page dot html' in single quotation marks.

Then, type a semicolon after the parentheses.

This completes the first statement in the render code.

The template variable now holds the contents of "page dot html."

Test the code you’ve written so far.

On a new line, type: Logger dot log Select “object data.”

Then, highlight data and type: template dot.

Another autocorrect menu appears. Choose “getRawContent.”

Add a semicolon after the last parentheses to complete the statement.

Then, save your function. Click “Run,” select “render” and accept the permissions.

Now, check the log. Right now, the code gets the raw content from the variable.

In the log, you should see the contents of "page dot html" with the time and date you ran the code.

Great job!

The log contains the html page.

Next, add a test poster URL and a test poster name to the template.

This will allow you to test the website even if your partner has not finished the config code.

Type next: “template dot poster, underscore, u-r-l, space, equals, space, double quotation mark, poster, dot URL, double quotation mark.”

Add a semicolon at the end of the statement.

Now do the same for the poster name.

Type: template dot poster, underscore, name, space, equals, space, double quotation mark, poster dot name, double quotation mark.”

These hardcoded objects define a poster’s URL and a poster name.

Later, you will replace this with a poster variable that will get the poster images your group designed.

Your program also needs the URL of the completed webpage that will host your template.

To create this page, type: template dot page, underscore, URL, equals ScriptApp, dot getservice, dot get url - exactly as you see it on the screen.

Use the autofill menus to help you fill in the code precisely.

Test the version you have now.

Instruct the computer to create a version of the template with these variables.

To do this, type: Logger dot log, open parenthesis, template dot evaluate, open parenthesis, closed parentheses, dot getContent, open parenthesis - then two closed parentheses and a semicolon exactly as you see it on the screen, using the autofill menus to help.

Remove the “Logger dot log, template, get raw content ” line to ensure that you’re seeing the updated template in the log.

Then, save and run your function.

If your code is working correctly, the HTML page information will appear in the log like it did before.

But the poster name and poster URL will be replaced with what you put in quotation marks.

Great!

Now it’s your turn: Create a template variable to hold the HTML page Add a test poster URL and test poster name to the template Then, move on to part two of this video to complete the render function.

Next
Instructions
  1. Replace the test values with information from the config file.
  2. Test your program using the render test function in render.gs
  3. When everyone in your group has finished, move on to the next video where you will publish your website.