Demo quickstart

Android

• Installed Git
• Installed the Java Development Kit
• Installed Android Studio 4.1 or above
• An Android device (not a simulator)

Project setup

To set up your Flexible Classroom project:

1. Clone the repository locally:

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

2. Update to the supported version of Flexible Classroom:

   cd CloudClass-Android
   git checkout release/2.8.11

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 File > New > Import Project... menu option and select the folder named CloudClass-Android in the browse window.

   

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

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.

   

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

   

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.

iOS

• Installed CocoaPods version 1.10 or later.

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

Project setup

To set up your Flexible Classroom project:

1. Clone the repository:

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

2. Update to the supported version of Flexible Classroom:

   cd flexible-classroom-ios
   git checkout release/2.8.11

Implement a flexible classroom

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

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

   cd App

2. Install project dependencies using the following command:

   pod install

   You see the dependency package install.

   

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

   open AgoraEducation.xcworkspace

   You see the following:

   

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

   

Test your implementation

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.

   

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

   

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.

Web

• Installed Git

Project setup

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

To prepare your development environment:

1. Download Git.

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

     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:

     npm i -g corepack enable

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

   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:

   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

To set up your Flexible Classroom project:

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

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

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

   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:

   git checkout release/2.9.0

Implement 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:

   yarn install:packages

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

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

   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:

   # 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

   # 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

   # 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

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.

Electron

Set up the development environment

• Installed Git

Project setup

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

To prepare your development environment:

1. Download Git.

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

     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:

     npm i -g corepack enable

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

   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:

   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

To set up your Flexible Classroom project:

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

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

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

   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:

   git checkout release/2.9.0

   Agora recommends that you switch to the latest release branch.

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:

   yarn install:packages

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

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

   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:

     yarn dev:electron

   • Windows

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

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

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

        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:

        yarn dev:electron

Test your implementation

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.