Agora Flat: The first experience of open source for online classrooms

Developers are actually very longing for open source many times, and there are many big names in the open source field. We can't talk about how experienced it is, and we are doing it while exploring. Colleagues, I also hope to take this opportunity to share some of the experiences we have explored with you.

01 What is Flat

Flat is a practical and sincere open source classroom . Practicality is reflected in the fact that the product is built based on various mature cloud services and has the ability to be directly used in actual business. It is not a toy. Sincerity is embodied in that we do not tie up specific cloud services, including ourselves. Developers can replace some components, either using Agora's real-time audio and video services, or WebRTC.

Picture: Flat Large Class

Because Flat is for developers, we must first talk about which layer we are doing open source and which SDKs are used in which layer, so as to avoid people from misunderstanding that "this is another kernel that is all packaged." Open source"? This will definitely not be the original intention of our project.

Figure: Flat open source structure diagram

green part of 161cc31ae49062 represents that the code is completely open source , including Web, Mac, Windows, Android, iOS, Pad, and iPad. All terminals are open source. Some middleware packaged based on the whiteboard SDK are also open source. For example, Window manager is used to manage window courseware, such as maximizing and minimizing courseware; Netless app is used to expand classroom plug-ins, such as code editors and mathematical formulas; Sync player It is used to align multiple videos to play. In fact, to make a complete application, there are a lot of things to do besides the underlying SDK, which is actually quite strenuous.

blue part of 161cc31ae4907f is the user-optional third-party service , which can be self-developed or any service provider. Flat uses the service of Soundnet by default.

orange part of 161cc31ae4909b is the service provided by the whiteboard itself, , because many details of Flat are designed around our whiteboard, so it will be difficult to substitute objectively.

02 Why do flat

What we do is an online interactive whiteboard, serving a lot of customers who are doing education. At the beginning, we thought of doing an online classroom with our own SDK. We also experienced what customers experienced. helps us deeply understand how to do this scene. Difficulties and pain points .

Secondly, we also use Flat in our daily work, such as morning meetings and internal sharing, so that we can experience our own projects in different scenes, times and spaces, and experience the feeling of using the product firsthand. In order to know more clearly where the product is easy to use and where it is not easy to use? In order to better optimize our SDK.

We are more satisfied with it and we can open it up for others to use. As a teaching tool to improve the efficiency of knowledge transfer, it can also be regarded as a small contribution to the community.

03 What technical challenges have we encountered

In the process of project development, we will of course also encounter some design, technical, and product challenges, and put the problems we encountered and the details of how to solve them on GitHub. Interested developers can Go to view the detailed source code and documentation: https://github.com/netless-io/flat .

Here can briefly list a few of the more typical challenges we have encountered:

The first is plug-in system , the project address: https://github.com/netless-io/window-manager .

The most common problem encountered by developers in the education field is to keep the visible area consistent in the case of multiple terminals. For example, the consistency between the teacher's PC terminal and the student terminal (such as a mobile phone). We believe that maintaining multi-end consistency is not that simple. At least three issues must be addressed:

1. The draggable area of the window frame is the same;

2. The content displayed inside the window is consistent;

3. The window Title Bar has a constant height.

We solve this problem with a solution that can dynamically fill and adjust the inner and outer frames. If you want to know the specific content, you can check the specific implementation through the link above.

Figure: Window plug-in

The second is the realization , project address: https://github.com/netless-io/sync-player .

The advantages of combined playback are high-definition, low-cost, and interactive. Multiple media resources and whiteboards are played synchronously, and the synchronization model is simplified through a recursive scheme. The behaviors of various browsers for playing videos are inconsistent. Even if a library like video.js is used, the events and timings generated during playback are also different. Here we use different transfer methods to smooth out the differences (video.js smooths out the difference). The interface is the interface, and the behavior of the combined player is the behavior) The state of the two players is synchronized through the state machine, and the states of the two players are unified as one player.

Figure: Combined playback

The third is the separation of UI and logic, Flat’s Storybook address: https://netless-io.github.io/flat .

Products and designs need to be modified and tried repeatedly to get inspiration, and technology needs to be determined in order to produce stable output. How to balance these contradictions. It is best to do:

1. The front-end and back-end are developed in parallel without waiting for each other;

2. Designers and products can modify the UI without burden.

By strictly mapping the PRD of the product to Storybook, the product and design can also be easily modularized to adjust the UI and deal with boundary conditions, so that it does not affect the product and the design repeatedly adjusts the UI, and R&D can receive relatively stable demand.

Image: Flat Storybook

During the development of Flat, many technologies from the community were used. At the same time, we also provided some "feedback" to the community: for example, assisting Firefox, Electron, Electron-devtools-installer, Axios, Mobx, Lens, Vscode, Vite, Scratch repair Some bugs; assist Electron-builder, Helm-kubectl, AvaJavaScriptTestRunnerRunConfigurationGenerator to support some new features. We advocate the spirit of open source, and believe that only technical people with the spirit of open source can truly do a good job in open source projects, so that open source can truly develop continuously and lastingly.

Therefore, everyone should not have any burden when mentioning PR to us, because even if we help us fix a spelling error, we will recognize and be very happy. Such a PR is also very meaningful.

04 Follow-up project planning

It is very fast to start an open source project, but it is not easy to persist in polishing and maintaining a project for a long time. Many good projects in the early stage have "died" on the way. In order to avoid the situation of "opening holes is easy to defend and difficult to defend", Flat needs to give the community an expectation so that everyone can use it better in the future. We have listed the things we plan to do next on GitHub, and you can check at any time https://github.com/netless-io/flat/projects .

The subsequent planning is roughly divided into three aspects:

first full client to support . At present, Flat can be used normally on the Web, Mac, Windows, and Android. Next, we will give priority to filling in the capabilities of iOS, Pad, and iPad.

second is the rich plug-in ecology . When it comes to ecology, our thinking is like this. First of all, we will rush in first and implement all the practical plug-ins we can think of around the education scene, instead of waiting for the developer to help us with the code.

Plug-ins are roughly divided into two categories, general-purpose plug-ins for teaching, such as timers, clickers, random selection, check-in, etc. These small plug-ins can greatly enrich the fun and interactivity of the classroom.

Advanced plug-ins include many types, programming teaching, such as Scrach, code editor; math teaching, such as Geogebra; children's literacy, such as the interactive Cocos H5 courseware; some plug-ins have been integrated into Flat, you can experience .

In the future, tools that will be used in quality education scenarios such as fine arts and music will be integrated. And some efficiency tools, such as flowcharts, mind maps, online brainstorming and collaboration with friends, these efficiency tools are actually very important.

Figure: Flat multi-window plug-in

The plugins we wrote above will also be all open source. open source code of 161cc31ae494a5 means that this product has vitality, it can not be restricted by us, and community developers can implement themselves if they have any ideas. For example, if you want to make a multiplayer online interactive game, you can make an online chess plug-in based on Flat, and you can even draw and guess online with friends.

Then I would like to add one point, that is, we have used external open source projects, or developers have helped us develop plug-ins. If the authors are willing to charge, we also hope to help these authors realize their contributions.

third is the launch of continuous integration and operation and maintenance tools . If users want convenient development and construction, rapid iteration, or selective configuration, they need powerful CI/CD tools to support. This will also be a direction for our future efforts, and now we are still focused on doing the first two points well. We will list this first and we will definitely do it later.

05 Flat how is it doing now

At present, the Flat open source classroom has released multiple versions. The supported functions include multi-person online whiteboard interaction, audio and video interaction, chat interaction, course recording and playback, multimedia courseware cloud disk, screen sharing, etc. Individual users can log in directly through WeChat, GitHub , After logging in successfully, you can easily join, create, and reserve a room.

At present, we are still continuously optimizing the product experience, and we hope that Flat can become the first choice of teaching tools for individual teachers in online classes. At the same time, community developers can also refer to our source code to quickly build their own online classrooms.

Some time ago, many users participated in the discussion about Flat in the community, some gave us suggestions, and some expressed support for us. With the support of community developers, Flat rushed to the third place on the GitHub Trending overall list. At present, Flat's attention on GitHub is close to 3,000. comes from the positive feedback from the community, which makes us believe more that what we do is valuable . We will continue to optimize the Flat product experience to make it smoother for everyone to use.

Finally, let's put the address of the Flat open source project, and everyone is welcome to experience: https://github.com/netless-io/flat .

If you have product feedback and suggestions, you can [e-mail] , and your exchanges and ideas will eventually be converted into open source code.