Using Get Classwork API In Google Classroom Integration With ASP.NET Core 3.0 Web Application

Introduction

 

In my last article we saw how to add scope in the Google classroom API integrated with ASP.NET Core 3.0 web applications. In this article you will learn how to fetch the Google classroom classwork details based on the selected class using the Classwork API in an ASP.NET Core web application.

 

This is a continuation of my last article.

 

Using Classwork API

 

Step 1

 

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

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',
                  });
              });
          }

Step 2

 

In my last article saw how to fetch the google classroom list using the google classroom API, now based on the selected google classroom in the grid we are going to fetch the list of Google Classroom Classwork using the Classwork API.

<button type="button" id="btnGetClasswork" class="k-button">Get Classwork</button>
  <div id="classWorkGrid"></div>

$("#btnGetClasswork").click(function () {
                 var grid = $("#grid").data("kendoGrid");
                var selectedItem = grid.dataItem(grid.select());
                $("#classWorkGrid").kendoGrid({
                    dataSource: {
                        type: "json",
                        transport: {
                            read: "/GoogleClassRoom/GetClassWork?courseId="+ selectedItem.id
                        },
                        pageSize: 20
                    },
                    selectable: "true",

                    toolbar: ["search"],
                    columns: [{
                        field: "title",
                        title: "Name"
                    },]
                });

            })

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

 

GoogleClassroomController.cs 

public List<CourseWork>  GetClassWork(string courseId)
        {
            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 classWorkList = new List<CourseWork>();
            do
            {
                var request = googleClassService.Courses.CourseWork.List(courseId);
                request.PageSize = 100;
                request.PageToken = pageToken;
                var response = request.Execute();
                if (response.CourseWork != null)
                {
                    classWorkList.AddRange(response.CourseWork);
                }
                pageToken = response.NextPageToken;
            } while (pageToken != null);
            return classWorkList;
        }

From the above code you can notice the course id is provided as a parameter for the action GetClassWork. Based the couseId the CourseWork in ClassroomService will return the list of CourseWork available in 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 allow to grant the permission.

 

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

 

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

 

 

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

 

 

MathsWeeklyTest is the classwork which is available in the class C.

 

Log in to Google classroom using the same account 

 

 

The classwork MathsWeeklyTest is 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 classwork list by adding a new classroom.coursework.students scope.

Click here for the source code.