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

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

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

    
  
## 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).