Grade Sync API in Google Classroom Integration with ASP.NET Core 3.0 Web Application

Introduction

In my last article, we saw how to fetch Google Classwork details in the Google Classroom API integration with ASP.NET Core 3.0 web applications. In this article, you will learn how to fetch the grades of the student based on the selected class and classwork using the Google Classwork Classwork API in an ASP.NET Core web application.

This is a continuation of my last article.

Using Google classroom StudentSubmission API

Step 1

Go to Views->googleClassRoom->Index.cshtml and add the below scope: https://www.googleapis.com/auth/classroom.coursework.students, and https://www.googleapis.com/auth/classroom.coursework.me in Google auth call. This scope is used to add a permission to view and manage the Google classroom classwork student grade information for the selected classwork.

function start() {
gapi.load('auth2', function () {
auth2 = gapi.auth2.init({
client_id: "1070617910386-e614kn8nptnf7kpec2fmksoaa3t610gd.apps.googleusercontent.com",
scope: 'https://www.Googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/classroom.coursework.students https://www.Googleapis.com/auth/classroom.coursework.me',
});
});
}

Step 2

In my last article, we saw how to fetch the Google Classroom and classwork list using the Google classroom API. Now, based on the selected Google classroom and classwork in the grid, we are going to fetch the list of students with the grade that belongs to the selected Classwork using the Classwork API.

<button type="button" id="btnGetClassworkGrade" class="k-button">Get ClassworkGrade</button>

$("#btnGetClassworkGrade").click(function () {
debugger;
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
var grid = $("#classWorkGrid").data("kendoGrid");
var selectedClassWorkItem = grid.dataItem(grid.select());
$("#classWorkGradeGrid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/GoogleClassRoom/GetClassWorkGrades?courseId=" + selectedItem.id + '&' + "courseWorkId=" + selectedClassWorkItem.id
},
pageSize: 20
},
selectable: "true",
toolbar: ["search"],
columns: [{
field: "userId",
title: "User ID"
},
{
field: "assignedGrade",
title:"Grade"
}]
});
})

The above button click event is used to do the GetClassWorkGrades ajax call. It will trigger the Google Classroom ClassworkGrade API action, which is defined in GoogleClassroomController. Based on the response, the data will be rendered in the Grid.

GoogleClassroomController.cs

public List<StudentSubmission> GetClassWorkGrades(string courseId, string courseWorkId)
{
var Token = GetAuthenticator();
var token = new TokenResponse()
{
AccessToken = Token,
ExpiresInSeconds = 3600,
IssuedUtc = DateTime.UtcNow
};
var authflow = new GoogleAuthorizationCodeFlow(new GoogleAuthorizationCodeFlow.Initializer
{
ClientSecrets = new ClientSecrets
{
ClientId = ClientId,
ClientSecret = ClientSecret
}
});
var credential = new UserCredential(authflow, "0", token);
var serviceInitializer = new BaseClientService.Initializer()
{
ApplicationName = GoogleApplicationName,
HttpClientInitializer = credential
};
var googleClassService = new ClassroomService(serviceInitializer);
string pageToken = null;
var classWorkGradeList = new List<StudentSubmission>();
do
{
var request = GoogleClassService.Courses.CourseWork.StudentSubmissions.List(courseId, courseWorkId);
request.PageSize = 100;
request.PageToken = pageToken;
var response = request.Execute();
if (response.StudentSubmissions != null)
{
classWorkGradeList.AddRange(response.StudentSubmissions);
}
pageToken = response.NextPageToken;
} while (pageToken != null);
return classWorkGradeList;
}

In the above code, you can see that the course ID and classwordId is provided as a parameter for the action GetClassWorkGrade. Based on the couseId and classworkId the list of students with grades available in ClassroomService will return the list of Student Submissions. In other words, the student list with grades is available to the class.

Step 3

Run the application, navigate to /GoogleClassRoom/Index in browser.

Since we added a new scope, click on the sign-in button and complete the authentication process:

Click on the Get Course button. This will fetch the Google classroom course details using Get course API. The list of courses will be loaded in the grid.

Select a course from the list of courses in the grid. In my case, I selected Class C and clicked on the Get Classwork button. It will open the classwork grid, as shown in the below figure.

Select the coursework in the grid. In my case, I selected mathwork and clicked on the Get ClassworkGrade button. It will open the List of students available in the class with the grades of their respective classwork.

The student's grade in Google classroom

Reference

https://developers.Google.com/classroom/quickstart/dotnet

Summary

We have gone through:

Integrating the Google Classroom classwork API with our ASP.NET Core web application.
How to manage the Google classroom service to fetch the student classwork grade list by adding a new scope.

Click here for the source code.