Search code examples
javascriptgoogle-apps-scriptgoogle-sheetsgoogle-classroom

Display google classroom data on the website using the app script

I have an app script code by fetching data from google classroom. The data is connected to a spreadsheet and displayed on the spreadsheet. I want the Google Classroom data that I have to be displayed on the website that I will create. But I'm confused about how to start, how should I make the initial appearance of the website and so on? is there any source for me to study?

function importAllStudent(){
  const optionalArguments = {
    teacherId : 'me',
    courseStates : 'ACTIVE'
  };

  const response = Classroom.Courses.list(optionalArguments);
  //console.log(response)
  const courses = response.courses
  for(let i = 0; i < courses.length; i++){
    let courseName = courses[i].name
    let courseId = courses[i].id;
    console.log('Class Name: '+courseName, 'Class ID: '+courseId)
  }
}

function namesAndEmails(courseId){
  var studentNames = [];
  var studentEmails = [];
  var together = [studentNames, studentEmails]
  var response = Classroom.Courses.Students.list(courseId)
  var students = response.students
  for(var i=0; i < students.length; i++){
    studentNames.push(students[i].profile.name.fullName)
    studentEmails.push(students[i].profile.emailAddress)
  }
  return together;
}

I hope to provide sample code, learning resources, tutorials or something else

Solution

  • I believe your goal is as follows.

    • You want to create Web Apps by Google Apps Script.
    • You want to include the values from Spreadsheet in the HTML of Web Apps.
    • You want to know a simple sample script for creating this.

    In this case, how about the following sample script?

    Usage:

    1. Prepare a Google Spreadsheet.

    Please prepare a sample Google spreadsheet. And, please open a script editor of the Spreadsheet.

    2. Prepare sample script.

    As a sample script, please copy and paste the following script to the script editor and save the script.

    HTML:

    Please add an HTML file to the Google Apps Script project as the filename of index.html and copy and paste the following HTML.

    <!DOCTYPE html>
<html>
  <body>
    <?!= table ?>
  </body>
</html>

    Google Apps Script:

    Please copy and paste the following HTML to Code.gs and save the script.

    In this sample, the values from Sheet1!A1:C5 of Spreadsheet are shown in the HTML.

    function doGet() {
  const range = "Sheet1!A1:C5"; // Please set the range you want to use as A1Notation.

  const values = SpreadsheetApp.getActiveSpreadsheet().getRange(range).getDisplayValues();
  const table = "<table>" + values.map(r => "<tr>" + r.map(c => `<td>${c}</td>`).join("") + "</tr>").join("") + "</table>";
  const html = HtmlService.createTemplateFromFile("index");
  html.table = table;
  return html.evaluate();
}

    3. Deploy Web Apps.

    The detailed information can be seen in the official document.

    Please set this using the new IDE of the script editor.

    1. On the script editor, at the top right of the script editor, please click "click Deploy" -> "New deployment".
    2. Please click "Select type" -> "Web App".
    3. Please input the information about the Web App in the fields under "Deployment configuration".
    4. Please select "Me" for "Execute as".
    5. Please select "Anyone" for "Who has access".
    6. Please click "Deploy" button.
    7. When "The Web App requires you to authorize access to your data." is shown, please click "Authorize access" button. And, please authorize the scopes.
    8. Copy the URL of the Web App. It's like https://script.google.com/macros/s/###/exec. This URL is used for your HTML.

    4. Testing.

    In order to test your deployed Web Apps, please access your Web Apps URL of https://script.google.com/macros/s/###/exec using your browser. By this, you can see the table in the HTML.

    Note:

    • From I hope to provide sample code, learning resources, tutorials or something else, this is a simple sample script for understanding Web Apps using the sample values from Spreadsheet. So, please modify this for your actual situation.

    • When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.

    • You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".

    References: