Acoustic network Agora education aPaaS Smart classroom upgrade: UI and business logic are separated, interface and function customization are more flexible

The Agora Education aPaaS product Smart Classroom has been upgraded to v1.1.0 version. The Agora Smart Classroom can help educational institutions and developers launch their own-brand, full-featured online interactive teaching platform in as fast as 15 minutes, saving 90% of development time. Smart Class was released on January 20. As of March 31, the number of registered users exceeded 1,000, the number of supported classrooms exceeded 500,000 per month, and the cumulative number of students covered globally exceeded 4 million.

In the new version of Smart Class, we isolate the UI code and business logic in response to the previous problem of "UI is not easy to modify", and provide UI Kit, so that developers can more easily modify and add UI controls. It not only ensures low-code development, but also provides a higher degree of customization flexibility.

At the same time, in order to allow everyone to replace and add some functional modules of the smart classroom, and even add functional modules for their own business needs, we also added a custom plug-in function, namely ExtApp. You can add some of the classroom functions that you have realized, such as countdown, answering, etc., into the smart classroom like building blocks.

Next, let's talk in detail about the new functions and optimizations of the Agora Smart Classroom v1.1.0.

Class UI customization is more flexible

In the new version of the UI, we have made two upgrades. First, we redesigned three sets of UIs for 1:1 interactive teaching, online interactive small class, and interactive live broadcast of large class scenes. Developers can use it directly and deploy it online. At the same time, we also separate the UI code from the core business logic and provide a UI Kit, so that developers can modify the interface more in line with their own brand tone on this basis.

When modifying the UI based on the UI Kit, developers do not need to understand the core business logic of Smart Class, and simply modify the UI components based on the UI Kit provided by us to adjust the color of the interface, the size of the menu bar, the location of icons and buttons, etc. The UI of the functional module. The ui-components directory under agora-classroom-sdk contains the combination rules of all UI components. You can also add other UI components here, or adjust the overall layout.

As shown in the figure below, it is the default UI of Smart Classroom.

After custom modification, the classroom interface can present a completely different style. As shown below.

Use ExtApp to flexibly expand classroom functions

In this update, we have further opened up the underlying code of Smart Class and provided ExtApp custom plug-ins. You can understand ExtApp as a supplementary plug-in for Smart Class, which can help developers embed their own functional modules in the form of plug-ins in Smart Class according to actual needs. Each ExtApp has its own independent life cycle and data management.

For example, in the classroom, the teacher hopes that students can solve problems within the specified time, then you need to add a countdown function to the classroom. This "countdown" can be used as a plug-in and embedded in the Agora Classroom SDK.

There are three specific implementation steps: First, you need to inherit the AgoraBaseExtApp class and implement a custom plug-in in your App. The AgoraExtAppBase class contains methods such as initializing the plug-in and updating properties. For details, please refer to the documentation.

In the second step, after implementing the plug-in, you can register the plug-in. You need to call the AgoraEduSDK.registerExtApps method to register the plug-in to the Agora Classroom SDK. Take the countdown plug-in we just mentioned as an example, the following sample code demonstrates how to register a countdown plug-in CountDownExtApp:

// appIdentifier: 插件 ID，将用于标识插件，不同平台的相同插件必须使用同一 ID。
// extAppClass: 容器 App Class Type, 由 SDK 创建该类的实例。
// frame: 插件容器的大小，代表距离底层视图的间距。底层视图由 Classroom SDK 生成（不包含安全区域）。
// language: 容器语言，Classroom SDK 会透传该变量到具体插件容器中，这样容器可以自己设置多语言。
let countDown = AgoraExtAppConfiguration(appIdentifier: "io.agora.countdown",
                                         extAppClass: CountDownExtApp.self,
                                         frame: UIEdgeInsets(top: 10,
                                                            left: 50,
                                                          bottom: 10,
                                                           right: 50),
                                                        language: "zh")


// 插件图标，用于在 UIKit 层设置，默认会在白板工具栏的工具箱弹窗里显示。
countDown.image = image
countDown.selectedImage = selectedImage
let apps = [countDown]
AgoraEduSDK.registerExtApps(apps)

After completing the second step, this countdown will become a plug-in of the Agora Classroom SDK.

The last step is to start the plug-in.

By default, successfully registered plug-ins will be displayed in the toolbox pop-up window of the smart classroom whiteboard toolbar. If you want to customize an entry for the plug-in, you can modify the corresponding file of the UI Kit module we mentioned above, add an entry for the plug-in in the three major scenes of Smart Class, and then click or display the plug-in When you call the following method.

// 在 willLaunchExtApp 方法中传入插件 ID。
extAppContext?.willLaunchExtApp(appIdentifier)

At present, we have provided an example of a countdown function plug-in in the sample code. You can search for "Smart Classroom" in the document center of Soundnet to obtain detailed documents.

New page recording, what you see is what you get

In the online education scene, course recording is an absolute just-needed function. Soundnet launched the page recording service in February of this year, which can record all audio and video, whiteboards, courseware, and chat messages at the same time without incurring additional bandwidth and performance overhead. The recording process does not affect any host/viewer’s RTC interactive experience. And after the recording is over, MP4 files can be generated in real time, compatible with mainstream players.

Smart Classroom v1.1.0 adds support for page recording, which can mix and record the page content and audio of the specified URL as an MP4 audio and video file, and realize the simultaneous recording of audio and video content, whiteboard content, and courseware content. Developers can configure and initiate page recording through the Smart Class Cloud Service RESTful API. For details, please refer to the document center of SoundNet and search for "Smart Class Cloud Service RESTful API".

New courseware management

In order to improve the effect of classroom learning, a new courseware module was added to Smart Classroom v1.1.0. Teachers can upload files in PPT, DOC, PDF and other formats through the smart classroom client. Smart Class Client will turn on file conversion by default for files with the suffixes "ppt", "pptx", "doc", "docx", and "pdf" for display on the whiteboard in the classroom. Developers can also configure and upload files to the cloud disk through the Smart Class Cloud Service RESTful API, and obtain the cloud disk file change events in the classroom. For details, please refer to the Shengwang Document Center and Smart Class Cloud Service RESTful API.

In v1.1.0 Smart Classroom, files uploaded to the cloud disk are stored in Agora's Alibaba Cloud OSS account by default. If developers want to store files in their OSS account, they need to update the whiteboard JSON configuration object in the aPaaS configuration of the Agora console. For details, see the section Configuring Smart Class on the Agora Console in the Prerequisites of Smart Class.

v1.1.0 also supports pre-loading of courseware. The courseWareList and personalCourseWareList fields are added to the launch method of the Agora Classroom SDK to preload the courseware assigned by the educational institution and uploaded by the teacher. After the successful call, the client will cache the courseware in the cloud disk to the local. For details, please refer to the Acoustic Network Documentation Center, Agora Classroom SDK API.

In addition, Agora Education aPaaS Smart Classroom v1.1.0 also adds new functions such as user list, class rewards, roll call, class status, etc. For details, please click "Read the original text" .

Relying on the software-defined real-time network SD-RTN™ developed by Agora, Smart Classroom is based on the deep learning algorithm to identify network abnormalities in real time and accurately, and realizes a "zero perception" failover mechanism for users, which can escort high business availability. At the same time, we have also optimized our dedicated network for countries where foreign teachers are located in Southeast Asia, the Middle East, North America and other small and medium-sized cities in China, with an end-to-end high-quality transmission rate higher than 99%. In the subsequent product iterations, we will also add more functions to the Smart Classroom and provide better development flexibility. If you have any functional requirements for the smart classroom, please visit rtcdeveloper.com and post a message to communicate with us.