Integrate Flexible Classroom into Your App

This page introduces how to integrate Flexible Classroom into your own Web or Electron 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

There are three methods of integrating Flexible Classroom into your own Web or Electron project:

• Integrate Flexible Classroom through CDN.
• Integrate Flexible Classroom through npm.
• Integrate Flexible Classroom by downloading the source code on GitHub.

You can choose from these integration methods, depending on whether you need to change the classroom UI.

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

1. To install the SDK, run the following command:

   npm install agora-classroom-sdk

2. To import the AgoraEduSDK module, add the following code in the Javascript code in your project.

   import {AgoraEduSDK} from 'agora-classroom-sdk'

Through CDN

1. Add the following code to the HTML file in your project.

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

2. Add the following code to the .js file in your project.

   window.AgoraEduSDK.config({
       appId: "<your_app_id>",
       region: "NA",
   });
   
   window.AgoraEduSDK.launch(dom, {
       ...launchOption,
       listener: (evt: AgoraEduClassroomEvent, type) => {},
   });

   Parameter description:

   • config: The SDK global configuration. For the supported parameters, see ConfigParams.
   • dom: The rendering node of the browser.
   • launchOption: The launching options. For the supported parameters, see LaunchOption.

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:

1. 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

2. After navigating to the project directory, switch to the latest release branch.

   git checkout release/apaas/x.y.z

1. 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.

2. 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:

      • To run the web project, use yarn dev.
      • To run the Electron project, use yarn dev:electron.

   3. After finishing the development, pack the SDK or app with the following commands:

      • To pack the Classroom SDK, use yarn pack:classroom:sdk.

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

      • To pack the macOS client, use yarn pack:electron:mac.

      • To pack the Windows client, use yarn pack:electron:win.