# Demo quickstart (/en/realtime-media/flexible-classroom/quickstart)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Compelling content like animated presentations with embedded media helps actively engage students for longer in online classrooms. Agora Flexible Classroom helps you personalize distance learning using interactive video, shared whiteboards and other collaboration tools. With Flexible Classroom, you can quickly deploy effective online tutoring software that is customized with the features and branding your organization needs.

This page shows you how to quickly set up and launch a Flexible Classroom.

## Understand the tech [#understand-the-tech]

This section explains the workflow you implement to join a Flexible Classroom.

![Flexible Classroom join workflow](https://web-cdn.agora.io/docs-files/1623309158910)

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 for a Signaling token.
2. Your app server generates a Signaling token using the Agora [App ID](./build/manage-agora-account.mdx), [App Certificate](./build/manage-agora-account.mdx), and a user ID. For details, see [Generate a Signaling token](./build/set-up-your-account-and-authentication/authentication-workflow.mdx).
3. Your app client calls an API with the following parameters to join a Flexible Classroom:
   * *The user ID*: A unique string identifying a user, generated by your security system. This ID must be the same as the user ID you use for generating the Signaling token.
   * *The room ID*: A string for identifying a classroom. When the first user joins a Flexible Classroom, Agora automatically creates a classroom with the room ID.
   * *The Signaling token*: A credential for verifying the identity of the user when they join a Flexible Classroom.

## Prerequisites [#prerequisites]

In order to follow this procedure you must have:

* An Agora [account](./build/manage-agora-account.mdx) and [project](./build/manage-agora-account.mdx).
* A computer with Internet access. Ensure that no firewall is blocking your network communication.
* [Enabled Flexible Classroom](./build/set-up-your-account-and-authentication/enable-flexible-classroom) in Agora Console.

<_PlatformTabsGroup groupMode="structured" canonicalPlatform="web" platforms="[&#x22;android&#x22;,&#x22;ios&#x22;,&#x22;web&#x22;,&#x22;electron&#x22;]" showTabs="true">
  <_PlatformPanel platform="android">
    <_PlatformProcessedMarker groupMode="structured" canonicalPlatform="web" platform="android" />

    ## Android [#android]

    * Installed [Git](https://git-scm.com/downloads)
    * Installed the [Java Development Kit](https://www.oracle.com/java/technologies/javase-downloads.html)
    * Installed Android Studio 4.1 or above
    * An Android device (not a simulator)

    ## Project setup [#project-setup]

    To set up your Flexible Classroom project:

    1. Clone the repository locally:

       ```bash
       git clone https://github.com/AgoraIO-Community/CloudClass-Android.git
       ```

    2. Update to the supported version of Flexible Classroom:

       ```bash
       cd CloudClass-Android
       git checkout release/2.8.11
       ```

    ## Implement a flexible classroom [#implement-a-flexible-classroom]

    Follow these steps to configure and launch your Flexible Classroom from the downloaded source code:

    1. **Import the CloudClass-Android project in Android Studio**

       In Android Studio, navigate to the &#x2A;*File > New > Import Project...** menu option and select the folder named `CloudClass-Android` in the browse window.

       ![Import the CloudClass Android project in Android Studio](https://web-cdn.agora.io/docs-files/1648635239823)

    2. **Sync the Android project**

       Android Studio automatically performs a gradle sync to downloads the dependencies.

    3. **Update the parameters**

       Copy your *App ID* and *App Certificate* from Agora Console and replace the values of *agora\_app\_id* and *agora\_app\_cert* in `CloudClass-Android\app\src\main\res\values\string_config.xml`.

    ## Test your implementation [#test-your-implementation]

    1. Connect a physical Android device to your development device.

    2. In Android Studio, click **Run app**. A moment later, the project is installed on your device.

    3. In the login screen, enter the **Room**, your **Name**, the class **Type**, your **Role** and your current **Region**, then click **Enter**.

       ![Flexible Classroom login screen](https://assets-docs.agora.io/images/flexible-classroom/login-screen.png)

       You are logged in to Flexible Classroom and presented with the following UI:

       ![Flexible Classroom UI after joining as teacher](https://web-cdn.agora.io/docs-files/1648635720196)

    4. Install Flexible Classroom on a second Android device. Login with the same credentials but set  **Role** to `Student`.

    5. The teacher and student can now interact and communicate using Flexible Classroom.

    <_PlatformProcessedMarker close="true" />
  </_PlatformPanel>

  <_PlatformPanel platform="ios">
    <_PlatformProcessedMarker groupMode="structured" canonicalPlatform="web" platform="ios" />

    ## iOS [#ios]

    * Installed [CocoaPods](https://guides.cocoapods.org/using/getting-started.html#getting-started) version 1.10 or later.

    * If you use Swift, make sure you have version `5.0` or later.

    ## Project setup [#project-setup-1]

    To set up your Flexible Classroom project:

    1. Clone the repository:

       ```bash
       git clone https://github.com/AgoraIO-Community/flexible-classroom-ios.git
       ```

    2. Update to the supported version of Flexible Classroom:

       ```bash
       cd flexible-classroom-ios
       git checkout release/2.8.11
       ```

    ## Implement a flexible classroom [#implement-a-flexible-classroom-1]

    To configure and launch your Flexible Classroom from the downloaded source code:

    1. Navigate to the `CloudClass-iOS/App` directory:

       ```bash
       cd App
       ```

    2. Install project dependencies using the following command:

       ```bash
       pod install
       ```

       You see the dependency package install.

       ![CocoaPods dependency installation output](https://assets-docs.agora.io/images/flexible-classroom/pod-install-demo.png)

    3. To open the project in Xcode, use the following command:

       ```bash
       open AgoraEducation.xcworkspace
       ```

       You see the following:

       ![AgoraEducation workspace open in Xcode](https://web-cdn.agora.io/docs-files/1648725725804)

    4. In Signing & Capabilities under the project **TARGETS**, check **Automatically manage signing**, and configure your Apple developer account and Bundle Identifier.

       ![Xcode Signing and Capabilities settings](https://web-cdn.agora.io/docs-files/1648725848162)

    ## Test your implementation [#test-your-implementation-1]

    1. Connect a physical iOS device to your development device.

    2. In Xcode, click **Run**. A moment later, the project is installed on your device.

    3. On the login screen, type in a room name and user name. Select a class type, set the user role to `Teacher` and then press **Enter**.

       ![Flexible Classroom iOS login screen](https://web-cdn.agora.io/docs-files/1648726024179)

       You are logged in to Flexible Classroom and presented with the following UI:

       ![Flexible Classroom UI after joining as teacher](https://web-cdn.agora.io/docs-files/1648635720196)

    4. Install Flexible Classroom on a second iOS device. Login with the same credentials but this time set the user role to `Student`.

    5. The `Teacher` and `Student` can now interact and communicate using Flexible Classroom features.

    <_PlatformProcessedMarker close="true" />
  </_PlatformPanel>

  <_PlatformPanel platform="web">
    <_PlatformProcessedMarker groupMode="structured" canonicalPlatform="web" platform="web" />

    ## Web [#web]

    * Installed [Git](https://git-scm.com/downloads)

    ## Project setup [#project-setup-2]

    To set up and run your Flexible Classroom project, you need the following tools:

    * `Node.js` JavaScript runtime environment for building and running the web project.
    * `yarn`: A package manager.
    * `nvm`: (Optional) Version management command-line tool for `Node.js`.

    ### Install the development tools [#install-the-development-tools]

    To prepare your development environment:

    1. [Download](https://git-scm.com/downloads) Git.

    2. [Download](https://nodejs.org/en) and install Node.js. It is recommended to use Node.js 16. Node.js 18 and above versions are not supported yet.

    3. Install Yarn:

       * If you have `Node.js` `16.10` or later, you can directly enable `yarn` with the following command:

         ```bash
         corepack enable
         ```

       * If you have a version of `Node.js` earlier than 16.10, you need to install `corepack` first and then enable `yarn` with the following command:

         ```bash
         npm i -g corepack enable
         ```

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

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

    5. (Optional) When Electron installation fails, you can install it by setting the Electron mirror address:

       ```bash
       export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
       export ELECTRON_CUSTOM_DIR=v12.0.0
       export ELECTRON_CUSTOMDIR=v12.0.0
       ```

    ### Download the source code [#download-the-source-code]

    To set up your Flexible Classroom project:

    1. Clone the repository locally by running the following command:

       ```bash
       git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git
       ```

    2. After the download is complete, navigate to the folder:

       ```bash
       cd flexible-classroom-desktop
       ```

    3. Best practice is to switch to the latest release.

       To switch to the branch for version `2.9.0`, run the command:

       ```bash
       git checkout release/2.9.0
       ```

    ## Implement a Flexible Classroom [#implement-a-flexible-classroom-2]

    Follow these steps to launch a Flexible Classroom:

    1. Open a terminal window and navigate to the `Flexible-Classroom-Desktop` folder. Run the following command to install the project dependencies:

       ```bash
       yarn install:packages
       ```

       If the installation dependency times out, switch to an available mirror source:

       ```bash
       # Switch to a mirror
       yarn config set registry https://registry.npmmirror.com/
       # Install dependencies
       yarn install:packages
       ```

    2. Copy the App ID and App Certificate from Agora Console and update the corresponding parameters in the `.env` file:

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

       To facilitate your testing, the `Flexible-Classroom-Desktop` project contains a Signaling Token generator, which can generate a temporary Signaling Token with the App ID and App Certificate you provide. When your project goes live, you must deploy a Signaling Token generator on your server to ensure security.

    3. Run the following command to launch the web client in different development modes:

       ```bash
       # Start Flexible Classroom Demo debugging
       yarn dev
       # Start AgoraEduSDK debugging
       yarn dev:classroom
       # Start Proctor SDK debugging
       yarn dev:proctor
       # Start FcrUIScene debugging
       yarn dev:scene
       ```

       If you use Node.js 17, you may encounter the `ERR_OSSL_EVP_UNSUPPORTED` error. This is because Node.js 17 has switched to OpenSSL 3.0 and conflicts with the encryption algorithm or key being used in some dependencies in the project. You can try the following two solutions:

       * Add `NODE_OPTION` parameters `--openssl-legacy-provider`

       ```bash
       # Find the Node.js configuration file packages/agora-demo-app/package.json
       # To modify the startup command under the script field, add the NODE_OPTION parameter, for example:
       # Original command
       "dev": "cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=6144 FCR_ENTRY=demo webpack serve --config ./webpack.dev.js"
       # Change to
       "dev": "cross-env NODE_ENV=development NODE_OPTIONS=\"--max_old_space_size=6144 --openssl-legacy-provider\" FCR_ENTRY=demo webpack serve --config ./webpack.dev.js"
       # Then start the project
       yarn dev
       ```

       * Use nvm to downgrade the Node.js version to 16

       ```bash
       # Use nvm to manage Node.js versions
       # Install nvm
       yarn global add nvm
       # Install Node.js version 16 using nvm
       nvm install 16
       # Use Node.js version 16
       nvm use 16
       # Start Flexible Classroom
       yarn dev
       ```

    ## Test your implementation [#test-your-implementation-2]

    1. Open the browser and navigate to `http://localhost:3000`. You see the login page of Flexible Classroom.

    2. To join a classroom, type in a room name and user name. Select a class type, set the user role to `Teacher` and then press **Enter**.

       You are logged in to Flexible Classroom.

    3. Install Flexible Classroom on a second device. Login with the same credentials but this time set the user role to `Student`.

    4. The `Teacher` and `Student` can now interact and communicate using Flexible Classroom features.

    <_PlatformProcessedMarker close="true" />
  </_PlatformPanel>

  <_PlatformPanel platform="electron">
    <_PlatformProcessedMarker groupMode="structured" canonicalPlatform="web" platform="electron" />

    ## Electron [#electron]

    ## Set up the development environment [#set-up-the-development-environment]

    * Installed [Git](https://git-scm.com/downloads)

    ## Project setup [#project-setup-3]

    To set up and run your Flexible Classroom project, you need the following tools:

    * `Node.js` JavaScript runtime environment for building and running the web project.
    * `yarn`: A package manager.
    * `nvm`: (Optional) Version management command-line tool for `Node.js`.

    ### Install the development tools [#install-the-development-tools-1]

    To prepare your development environment:

    1. [Download](https://git-scm.com/downloads) Git.

    2. [Download](https://nodejs.org/en) and install Node.js. It is recommended to use Node.js 16. Node.js 18 and above versions are not supported yet.

    3. Install Yarn:

       * If you have `Node.js` `16.10` or later, you can directly enable `yarn` with the following command:

         ```bash
         corepack enable
         ```

       * If you have a version of `Node.js` earlier than 16.10, you need to install `corepack` first and then enable `yarn` with the following command:

         ```bash
         npm i -g corepack enable
         ```

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

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

    5. (Optional) When Electron installation fails, you can install by setting the Electron mirror address:

       ```bash
       export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
       export ELECTRON_CUSTOM_DIR=v12.0.0
       export ELECTRON_CUSTOMDIR=v12.0.0
       ```

    ### Download the source code [#download-the-source-code-1]

    To set up your Flexible Classroom project:

    1. Clone the repository locally by running the following command:

       ```bash
       git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git
       ```

    2. After the download is complete, navigate to the folder:

       ```bash
       cd flexible-classroom-desktop
       ```

    3. Best practice is to switch to the latest release.

       To switch to the branch for version `2.9.0`, run the command:

       ```bash
       git checkout release/2.9.0
       ```

       Agora recommends that you switch to the latest release branch.

    ## Launch a Flexible Classroom [#launch-a-flexible-classroom]

    Follow these steps to launch a Flexible Classroom:

    1. Open a terminal window and navigate to the `Flexible-Classroom-Desktop` folder. Run the following command to install the project dependencies:

       ```bash
       yarn install:packages
       ```

       If the installation dependency times out, switch to an available mirror source:

       ```bash
       # Switch to a mirror
       yarn config set registry https://registry.npmmirror.com/
       # Install dependencies
       yarn install:packages
       ```

    2. Copy the App ID and App Certificate from Agora Console and update the corresponding parameters in `packages/agora-classroom-sdk/.env`:

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

       To facilitate your testing, the `flexible-classroom-desktop` project contains a Signaling Token generator, which can generate a temporary Signaling Token with the App ID and App Certificate you provide. When your project goes live, you must deploy a Signaling Token generator on your server to ensure security.

    3. Refer to the following steps to run Flexible Classroom on macOS or Windows:

       * **macOS**

         To build the project, run the following command in the root directory of the `Flexible-Classroom-Desktop` project:

         ```bash
         yarn dev:electron
         ```

       * **Windows**

         1. Replace `"agora_electron"` in `package.json` file in the `packages/agora-demo-app` directory with the following code:

            ```javascripton
            "agora_electron": {
              "electron_version": "12.0.0",
              "prebuilt": true,
              "platform": "win32",
              "arch": "ia32"
            },
            ```

         2. To install Electron 12.0.0, run the following command:

            ```bash
            npm install electron@12.0.0 --arch=ia32 --save-dev
            ```

         3. To build the project, run the following command in the root directory of the `Flexible-Classroom-Desktop` project:

            ```bash
            yarn dev:electron
            ```

    ## Test your implementation [#test-your-implementation-3]

    1. Run the project on your Windows or macOS device.

    2. To join a classroom, type in a room name and user name. Select a class type, set the user role to `Teacher` and then press **Enter**.

       You are logged in to Flexible Classroom.

    3. Install Flexible Classroom on a second device. Login with the same credentials but this time set the user role to `Student`.

    4. The `Teacher` and `Student` can now interact and communicate using Flexible Classroom features.

    <_PlatformProcessedMarker close="true" />
  </_PlatformPanel>
</_PlatformTabsGroup>

## References [#references]

To ensure communication security in a test or production environment, use a token server to generate tokens. See [Secure authentication with tokens](./build/set-up-your-account-and-authentication/authentication-workflow.mdx).