Launch a Classroom

This document introduces how to get the source code of Agora Flexible Classroom (Web) from GitHub and run the project, so as to quickly launch a flexible classroom and experience the features.

Understand the tech

The following figure shows the workflow to join a flexible classroom.

When an app client requests to join a flexible classroom, the app client and your app server interact with the Agora server in the following steps:

1. Your app client sends a request to your app server to apply for an RTM token.
2. Your app server generates an RTM token using the Agora App ID, App Certificate, and a user ID. For details, see Generate an RTM Token.
3. Your app client calls an API to join a flexible classroom with the following parameters:
   • The user ID: The unique identifier of a user. A string generated by your security system. Must be the same as the user ID that you use for generating an RTM token.
   • The room ID: A string for identifying a classroom. When your app user joins a flexible classroom, Agora automatically creates a classroom with the room ID.
   • The RTM token: A credential for verifying the identity of the user when your app user joins a flexible classroom.

Prerequisites

• Enable the Flexible Classroom service in Agora console.
• Get the Agora App ID and App Certificate in Agora console.
• Agora recommends installing the latest stable version of desktop Chrome.

Set up the development environment

Running the web client of Flexible Classroom depends on Git (for downloading the source code), Node.js (for building and running the Web project), Yarn (a package management tool), Lerna (a package management tool), and nvm (Node.js version management command-line tool).

To prepare your development environment, refer to the following steps:

1. To download Git, click this link.

2. To download Node.js, click this link. Agora recommends using Node.js 14 or later.

3. Install Yarn:

   • If you have installed Node.js 16.10 or later, you can directly enable Yarn with the following command:

      corepack enable

   • If you have installed a Node.js version earlier than 16.10, you need to install Corepack first and then enable Yarn with the following command:

      npm i -g corepack enable

4. To install Lerna, run the following command:

   yarn add global lerna

5. (Optional) To install nvm, run the following command:

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Get the source code

The source code of Flexible Classroom (Web) is in the CloudClass-Desktop repository. To download the source code to your local device, refer to the following steps:

1. To clone the repository, run the following command:

   git clone https://github.com/AgoraIO-Community/CloudClass-Desktop.git

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

   

Launch a flexible classroom

Follow these steps to launch a flexible classroom:

1. Run the following command to install dependencies:

   yarn

2. Run the following command to install dependencies:

   yarn bootstrap

3. Move the .env.example file in the project's root directory to packages/agora-classroom-sdk and rename it as .env:

   mv .env.example packages/agora-classroom-sdk/.env

4. Fill in your App ID and App Certificate in .env:

   REACT_APP_AGORA_APP_ID={your appid}
   REACT_APP_AGORA_APP_CERTIFICATE={your app certificate}

   To facilitate your testing, the CloudClass-Desktop project contains an RTM Token generator, which can generate a temporary RTM Token with the App ID and App Certificate you pass in. When your project goes live, to ensure security, you must deploy the RTM Token generator on your server.

5. Run the following command to launch the web client in development mode:

   yarn dev

6. Open the browser and visit http://localhost:3000. You can see the login page of Flexible Classroom. To join a classroom, pass in a room name and user name, select a room type, and click Enter.

Next steps

Satisfied with the features of Flexible Classroom and want to explore more? Next, you can integrate Flexible Classroom into your own project.