Development and deployment of 1-1 classroom based on container environment

Author: Shen Tupeng Hui

In recent years, containerization has been the consensus of the industry, which can not only reduce the cost of operation and maintenance, but also help to carry out rapid product iteration. At the same time, local container can also be used to build an environment almost the same as production, which is very convenient to develop demo or test and deploy small functions. Next, I will complete the development of a one-to-one classroom software with the idea of container in the whole process from product requirement analysis, design, business coding, integration testing to official launch. (For resource reasons, the container environment at development time is only Docker, not K8s).

Project introduction

Since the epidemic, the traditional one-to-one tutoring has been difficult to achieve, and the use of online video teaching has gradually become the mainstream. However, the existing platforms such as Tencent Conference, ZOOM and Xiaoyu Conference still focus on multi-person video conference, and there is still a lack of one-to-one tutoring and teaching. Therefore, we hope to develop a 1-to-1 classroom teaching software that can support real-time audio interaction between students and teachers, real-time text communication, whiteboard, classroom playback, homework assignment, correction, and screen sharing.

Demand analysis

Generally through the introduction of the project, you can roughly know what kind of product it is. For example: what is the form of the product, what is the user, what is the main function. So in the demand analysis stage, it is necessary to refine, categorize, trade-off. In general Internet companies, there is often a requirement review. Once there is a requirement, whether it can be realized or completed on time needs to be considered. But now we do our own demo, the simplest thing is to draw a mind map, divide the function into several modules, list the priority on the line. Next comes the requirements analysis for the project introduction. First of all, we define the product form, for teaching software, the most convenient is the Web end, as long as you open the browser, equipped with a computer with a camera to start learning, mobile phone is always a little smaller. Then, according to the introduction, one-to-one teaching means user management. In addition, the most important is the classroom function, the teacher can give lectures to students in class, record videos, share the desktop and other functions, but also need to communicate with students, assign homework, so also need to message notification and other functions.

So after the above analysis, we first do a mind map, focusing on functional classification. The following

After analysis and summary, it is found that there are four modules, which are classroom management, user management, whiteboard function, real-time audio and video. According to the demand analysis, we can start to carry out the next step of technology selection.

Technology selection

Now technology has a lot of, the light has dozens of programming language, each language has its own framework, communication protocol also has all kinds of RPC, so technology selection is from a wide range of technology to select the most suitable for his needs in the sea, it is important to note that the technology selection is never stable or advanced technology as the standard, but should find the most suitable. From this, we began to choose the technology. I usually start at the bottom, but I made a table for reference below.

With a general selection of technologies, the next step is to design the architecture.

Architecture design

Due to fewer functions, services are roughly divided into Redis cache, Mysql database, back-end service, front-end service, and gateway five services. The architecture picture is ugly as follows:

Sonnet has a better picture, which I put up:

In contrast, the sound network is more detailed, especially AgoraEdu cloud service provides a lot of functions, but when we develop our own, with our own server, it needs to do things ora little more. In the architecture diagram designed by myself, all THE SDK of Agora will be packaged into the front-end service, and modules such as user management will belong to the back-end service. Both are containerized services, which are accessed through HTTPS interface. Mysql and Redis provide database functionality. The gateway layer is an authentication, traffic limiting, and HTTPS encryption service. Now comes the real part. In actual practice, I will be a little lazy and omit CI/CD. I will package the image to the Docker server after the local programming test is completed. If the project is large, I still suggest that we use continuous deployment to do it.

Environment to prepare

Although from this start has been the actual combat part, but “sharpening the knife does not mistakenly cut wood workers”, we can first prepare the required environment.

Required development environment:

Operating system: MacOS or Windows 10

Programming environment: Golang

Software: Docker

Now that you have the basics, you can start some services.

The database

Docker run -d -p 3306:3306 –name mysql mysql:5.7

The cache

Docker run -d -p 6379:6379 –name redis redis:4.0

Check whether the environment is normal:

With the environment in place, development is the next step.

Code development

In the process of coding, we can first write back-end services, and then interface provided, and then write front-end, so alternate programming, quickly complete a Demo.

First we create two empty folders, one for the back-end service and one for the front-end service. Then open the front-end service and create a new Html.

For convenience, we introduce Agora’s SDK in the way of CDN.

< script SRC = "https://cdn.agora.io/sdk/release/AgoraRTCSDK-3.2.1.js" > < / script >

Agora provides a call procedure to implement audio and video calls. It is highly recommended to read:

From the top down, using teachers and students as an example, the business logic could look like this:

The teacher creates a local Client with agorartc.createclient and client.init, and then joins the channel with client.join. This can be interpreted as creating a class. The audio and video data is then sent through a process of creating a local stream, playing a local stream, and publishing a local stream.

The student side then subscribes to the remote stream, accepts the audio data, and plays it back.

If you want to leave the class, leave the channel through client.leave.

Isn’t Agora’s SDK powerful enough to do this for us?

Obtain the SDK permission

We will register our project on agora. IO and then show some sample code, as shown below:

We choose the Web side, according to the request invocation path, we need to initialize a client side object, and then fill in the project APP ID and Token. In the one-to-one video scenario, mode is set to RTC.

You can see we need to pass in an APPID and a Token and channel. These are provided by our back end.

The specific logic is that the user stays in the classroom management interface after logging in. Then create a class, input the channel number, and click “Create”. The background will return the APPID and Token, and save the class number into the database.

Agora nicely lists almost all of the apis involved, as follows:

The deployment of test

Once the code is written, you can package it as an image, deploy it to the server, configure a reverse proxy, and share access with friends. Next, you can package the front end and the back end separately.

For the front end, we don’t have a framework, so we can just use an Nginx image and replace the index with our project’s index.html.

For the backend, Go can be easily compiled into an executable file by running the following command: CGO_ENABLED=0 GOOS= Linux GOARCH=amd64 Go build main. Go. We just need to copy the compiled executable From an empty image.

The back-end Dockerfile:

It is very simple, just copy the compiled executable file main to a directory inside the container with the copy command, and then run./main when the container is ready.

Experience sharing

Agora’s developer center documentation is comprehensive, with examples of key best practices to avoid pitfalls. Agora also offers many beginner demos and open source projects, and a vibrant community.

It can almost be said that as long as you know the basic programming knowledge, whether it is a junior programmer or a senior programmer, or whether it is back-end development or front-end development, you can get started quickly. If you have problems, you can also find them in the documentation of the developer Center, which is the biggest value of the developer Center.

In addition, through the Agora demo experience, the whole audio and video effect is unexpected. Many people may think that audio and video calls, wechat also has ah, QQ also has ah, even as long as a chat social software may have video calls; Not to mention that many of them use the technology of acoustic network, even those developed by wechat themselves, they will find that wechat videos are fuzzy in the same network environment, and the delay will be slightly higher. At the same time, if you are in a closed room, the echo phenomenon is very serious. Soundnet did a good job of that.

In addition, soundnet also has the most complete SDK coverage ever seen,

As you can see from this screenshot, it covers almost all platforms. And you can see the details of that as well and that’s where a lot of effort has been put into it.

The most surprising thing is that users who sign up for a live audio and video app get a very long video call, which is enough to make a small live audio and video app. Thank you.

supplement

The example in this article is similar to the one-to-one requirements on the official website, which is much simpler because of the Agora cloud service, which provides an out-of-the-box API that allows front-end students to reduce their exposure to the back-end — in other words, it is possible to develop a qualified application quickly without back-end knowledge.

The purpose of this paper is also to have a reference for the full stack developers, how to quickly develop an audio and video Demo with modular and containerized ideas from requirement analysis to technology selection and even product deployment.

The Demo online experience address is agora.xabc.site

IO /cn/Video/1_…

Author’s website: xabc.site