Integrate Flexible Classroom into Your App

Last updated 2022/09/23 10:30:16

This page introduces how to integrate Flexible Classroom into your own Web project.

Understand the tech

The source code of Flexible Classroom contains the following packages:

agora-classroom-sdk: The Agora Classroom SDK, which contains the following modules:
- /src/infra/stores: The UI stores implement the business logic for the UI components.
- /src/ui-kit/capabilities:
  - containers: This folder contains all the business components. A business component is implemented by combining the UI components with the UI stores.
  - /scenarios: This folder contains the code for arranging the layout of business components in different scenarios.
agora-chat-widget: The chat widget implemented by the Easemob IM SDK.
agora-plugin-gallery: This package contains the code for plugins in Flexible Classroom, including the screen sharing plugin, Pop-up Quiz, Poll, and Countdown Timer.
agora-scenario-ui-kit: This package contains all the UI function components.
agora-widget-gallery: This package contains the chat widget implemented by the Easemob IM SDK and the chat widget implemented by the Agora RTM SDK

Integration methods

You can use multiple methods to integrate Flexible Classroom into your Web project. Depending on whether you need to customize the classroom UI, you can choose different integration methods:

If you are satisfied with the default UI of Flexible Classroom and do not want to change any of it, integrate the whole Flexible Classroom through npm or CDN.
If you want to customize the classroom UI based on the default UI of Flexible Classroom, you need to integrate Flexible Classroom by downloading the source code on GitHub.

Use the default UI of Flexible Classroom

If you are satisfied with the default UI of Flexible Classroom and do not want to change any of it, integrate the whole Flexible Classroom through npm or CDN.

Through npm

To install the SDK, run the following command:
```
npm install agora-classroom-sdk
```
To import the AgoraEduSDK module, add the following code in the Javascript code in your project.
```
import {AgoraEduSDK} from 'agora-classroom-sdk'
```
To launch a classroom, call AgoraEduSDK.config and AgoraEduSDK.launch in the JavaScript code of the project.

Through CDN

Add the following code to the HTML file in your project:

<script src="https://download.agora.io/edu-apaas/release/edu_sdk@2.6.2.bundle.js"></script>

To launch a classroom, call AgoraEduSDK.config and AgoraEduSDK.launch in the JavaScript code of the project.

Sample code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://download.agora.io/edu-apaas/release/edu_sdk@2.6.2.bundle.js"></script>
</head>

<body>
    <style>
        #root {
            width: 100%;
            height: 100%;
        }
    </style>
    <div id="root"></div>
    <script type="text/javascript">
        AgoraEduSDK.config({
            appId: 'Your App ID',
            region: 'NA'
        });
        AgoraEduSDK.launch(document.querySelector('#root'), {
            userUuid: 'user id',
            userName: 'user name',
            roomUuid: 'room id',
            roleType: 1,
            roomType: 0,
            roomName: 'room name',
            pretest: true,
            rtmToken: 'rtm token', // In a test environment, you can use a temporary RTM token; in a production or security environment, Agora strongly recommends that you use a server-generated RTM token.
            language: 'en',
            duration: 60 * 30,
            recordUrl: 'https://solutions-apaas.agora.io/apaas/record/dev/2.3.3/record_page.html',
            courseWareList: [],
            listener: (evt, args) => {
            },
        }).then(() => {
            console.log('start launch');
        }).catch((e) => {
            console.error('fail to launch', e);
        });
    </script>
</body>

</html>

The sample code requires passing in rtmToken. You can refer to Generate an RTM token to learn what is RTM token, how to get a temporary RTM token for testing purpose, and how to generate an RTM token from the server.

Customize the classroom UI

If you want to customize the classroom UI based on the default UI of Flexible Classroom, you need to integrate Flexible Classroom by downloading the source code on GitHub. Refer to the following steps:

Make sure you have set up the development environment.

To clone the CloudClass-Desktop repository and check out the latest release branch, run the following commands:
```
git clone https://github.com/AgoraIO-Community/CloudClass-Desktop.git
```
To switch the branch, run the following command. Remember to replace {VERSION} with a specified version number:
```
git checkout release/{VERSION}
```
For example, if you want to switch to the branch of v2.6.2, just run the following command:
```
git checkout release/2.6.2
```
Agora recommends switching the branch of the latest release. The following image shows how to see the latest release branch in the GitHub repository:
After pulling the code to your local device, you are free to edit the code according to your needs. You can refer to the Customize the Classroom UI guide.
After finishing the development, follow these steps to debug:
1. To install dependencies, run the following command:
```
yarn install
```
```
yarn bootstrap
```
2. To run the project in development mode, use the following commands:
```
yarn dev
```
After finishing the development, pack the SDK JS file with the following command:
```
yarn pack:classroom:sdk
```

Find the output in packages/agora-classroom-sdk/lib/edu_sdk.bundle.js.

Is this page helpful?

Yes