如何通过App Script将Google Classroom数据展示到自建网站？求教程及示例

一、先把Google Apps Script改成可被网站调用的接口 #

你现有代码是在脚本编辑器内运行的，要让网站能获取数据，需将其部署为Web App，并调整返回格式为网站易解析的JSON：

1. 修改代码，新增doGet函数作为Web App入口：

   function doGet(e) {
     // 获取所有活跃课程
     const courseArgs = { teacherId: 'me', courseStates: 'ACTIVE' };
     const courseResponse = Classroom.Courses.list(courseArgs);
     const courses = courseResponse.courses || [];
     
     // 为每个课程绑定学生数据
     const courseData = courses.map(course => {
       const [names, emails] = namesAndEmails(course.id);
       return {
         courseId: course.id,
         courseName: course.name,
         students: names.map((name, index) => ({
           name: name,
           email: emails[index]
         }))
       };
     });
     
     // 返回JSON格式响应
     return ContentService.createTextOutput(JSON.stringify(courseData))
       .setMimeType(ContentService.MimeType.JSON);
   }
   
   function namesAndEmails(courseId){
     var studentNames = [];
     var 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 [studentNames, studentEmails];
   }
   

2. 部署Web App：
   • 打开Google Apps Script编辑器，点击右上角「部署」→「新部署」
   • 类型选「Web应用」，执行权限选「我自己」，访问权限选「任何人，甚至匿名」（测试阶段用匿名更方便，后续可根据需求调整）
   • 部署完成后会得到一个专属URL，这就是你的数据接口地址

二、搭建网站初始界面（纯HTML+JS示例） #

无需复杂框架，先从静态页面起步，用原生JS调用接口展示数据：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>课堂学生数据展示</title>
  <style>
    .course-card {
      border: 1px solid #ddd;
      padding: 15px;
      margin: 10px 0;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .student-list {
      list-style: none;
      padding-left: 0;
    }
    .student-item {
      padding: 6px 0;
      border-bottom: 1px solid #eee;
    }
  </style>
</head>
<body>
  <h1>Google Classroom 学生数据</h1>
  <div id="course-container"></div>

  <script>
    // 替换成你的Web App部署URL
    const API_URL = "https://script.google.com/macros/s/你的WebAppID/exec";

    // 加载并渲染数据
    async function loadClassroomData() {
      try {
        const response = await fetch(API_URL);
        const courseData = await response.json();
        
        const container = document.getElementById('course-container');
        // 处理空数据情况
        if (courseData.length === 0) {
          container.innerHTML = '<p>暂无活跃课程数据</p>';
          return;
        }
        
        courseData.forEach(course => {
          const courseCard = document.createElement('div');
          courseCard.className = 'course-card';
          courseCard.innerHTML = `
            <h2>${course.courseName}</h2>
            <h3>学生列表</h3>
            <ul class="student-list">
              ${course.students.map(student => `
                <li class="student-item">${student.name} - ${student.email}</li>
              `).join('')}
            </ul>
          `;
          container.appendChild(courseCard);
        });
      } catch (error) {
        console.error('加载失败:', error);
        document.getElementById('course-container').innerHTML = '<p>数据加载出错，请检查接口配置</p>';
      }
    }

    // 页面加载时自动执行
    window.onload = loadClassroomData;
  </script>
</body>
</html>

将代码保存为index.html，替换API_URL为你的Web App地址，直接用浏览器打开即可看到效果。

三、学习方向参考 #

1. Google Apps Script官方文档：重点学习「Web Apps部署」「Classroom API权限配置」部分，了解接口的权限控制与更新机制
2. 原生HTML/CSS/JS基础：掌握页面结构搭建、样式美化、异步请求（fetch API）的核心用法，这是搭建网站的基础
3. 静态网站部署：如果要把网站放到公网，可学习GitHub Pages、Vercel等平台的静态文件部署流程，操作简单无成本

四、关键注意事项 #

• 缓存问题：Web App默认会缓存数据，若需实时获取最新内容，可在请求URL后添加随机参数（如?t=${Date.now()}），或部署时勾选「每次运行使用最新代码」
• 权限控制：若不希望数据公开，可将Web App访问权限改为「仅限特定用户」，此时网站访问者需登录对应Google账号才能获取数据
• 异常处理：示例代码仅做基础错误提示，实际可添加加载动画、空数据提示等优化用户体验

内容的提问来源于stack exchange，提问作者putriii