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.

    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:

    References: