Allright – an app for learning English with a tutor for children

Develop an app for teaching children with the possibility of interactive interaction between the child and the teacher. The app should be able to maintain video communication, broadcast on the screen of the teacher's mobile phone, and have a chat. An important feature is the teacher's ability to broadcast an online presentation, where the child could fill it in real-time could be not only through text but also by listening, coloring pictures, and watching videos - all this should be synchronized with the teacher’s room. That is, if a teacher stops or rewinds video/audio, the same should happen to the client.

A stable two-way socket connection was required to meet the requirements for interactivity and content synchronization. Given the need for video communication, a great solution was to use the service TokBox Opentok. Since the client is not a startup, but already has a well-established business, it was necessary to take into account current technology solutions and products that have already been used. We are talking about successful rooms for students and teachers.

Therefore, the proposed solution includes not only the functionality of applications but also backward compatibility with the rooms. The solution included several components:

• - a component that allows you to draw on the canvas
• - a component that allows you to display presentations and synchronize them between student and teacher.

In the first case, the component provided not only drawing but also the ability to delete already drawn figures and edit them. It was an implementation of a small graphics editor, with the ability to insert text, rotate it, change color or insert images. In the second case, it was the implementation of a custom web browser that displayed the same page for both teacher and student. The advanced functionality was to use scripts to influence the HTML page that is displayed, as well as to receive callbacks with events, which later transmitted these events to the teacher's rooms. To implement the chat, we used our UI library ChatKit.

The development began with the construction of the architecture and the definition of the technology stack:

• - Clean architecture
• - MVVM
• - Architecture Components
• - Dependency Injection (Dagger2)
• - Rx
• - Firebase та Play Services
• - Web Sockets (OpenTok)
• - Retrofit та Gson

The next step after building the architecture and implementing business logic was to configure the socket connection and its binding to the app lifecycle. A ready-made solution in the form of a JavaScript library was used to implement the mechanism of synchronization of drawing events and events from presentations in rooms. A library coded, decoded, and painted all the objects herself, so it was necessary to develop a mechanism for event parsing and reverse coding.

All parts of the app were designed in the form of UI components that built the student's virtual office. This account fully corresponded to the user's account in the web version and was also fully under the control of the teacher role. The most difficult part of this stage of development was the difficulty in interpreting the coordinates received in events from channel sockets and their reverse coding. It was necessary to take into account the fact that the size of the screens could vary depending on the phone model. That is, the coordinate grid of one phone did not correspond to the coordinate grid of another phone, and it did not exactly correspond to the coordinate grid in the teacher's web office. This part was the most resource-intensive, also due to the adaptation of the layout and coordinate grid for tablets.