How we did it: U project - an educational HTML5 application connected with whiteboards

The scope of work involved a development of app designed for a multitouch screen (a big whiteboard), used in schools. In the beginning, the board had only the option of drawing. However, the project quickly turned into a tool that can succeed in supporting educational processes in schools around the world. Of course, we didn't forget about drawing option :) The application gives the teacher the possibility to draw, sketch, import media like images and videos, and interact with them using multitouch gestures.

In this article, I will describe the project and features of U project application.

Specification is the key: objectives and users' needs

Let's start from the beginning. At first, we discussed the specification and future functionalities of the app with the Client via Skype.

U project is focused on User, hence the name "U". Its main goal is to support new teaching methodologies for enhanced learning experiences and filling gaps of existing e-learning platforms. To make it happen, the Client has set itself the task of creating a software-hardware-networking platform that facilitates content distribution and user interaction.

The target audience and end users of the U project system are teachers and students. So, the application is found in traditional learning environments like primary and secondary schools, as well as in Universities. But any environment where there is a strong demand for highly interactive tools may also be envisioned.

U project and its app have a few use-case scenarios:

• Classroom with teacher presents in the classroom,
• Classroom with teacher driving the lesson from a remote location,
• Students in digital divide with teacher driving the lesson from the school,
• Classroom A, Classroom B, Classroom C, and so on... of different schools sharing a lesson driven by teacher connected from another classroom.

The trial version of the application is foreseen in schools and academic environments in Luxembourg, Italy, and the United Kingdom. After the pilot phase, it will be commercially available on a global basis, with main focuses on Europe and North America.

By the specification and objectives set by the Client, we analyzed already existing similar apps. Examples of such applications can be found on i3learnhub.com or sketch.io. Our Client could not use any of ready-made solutions because the app would be connected with other systems via satellite.

The first phase of the development: the prototype of the application

The project was divided into two parts and lasted exactly six months (with a little break between phases). The first step focused on the app. Our work centered on the prototype, implementation and further development of all features included in specification such as:

• Pencil tools: pencil, pen, arrow, line, proportions;
• Shapes: square, rectangle, regular polygon, triangle, circle, ellipse, pie, properties;
• Multimedia import: image, video, audio, 3D model;
• Select tool;
• Webpages (the ability to open websites);
• Erase/delete;
• Saving and export.

Next to that, we created a config file letting us easily modify and adjust parameters of available functionalities. For example, we can decide if opening a website should be done in a canvas window inside the application or it should force a browser to open it with entered URL.

We started with building the prototype that was iterated during each next one week sprint. The app and website development processes are very different. In the first case, look and feel of the app were less important, and we took care of it at the very end of the process. During the entire development process, we received feedback from the Client, who tested it on a large multi-touch whiteboard.

Wolfram Alpha gives new possibilities

In general, Wolfram Alpha is a knowledge engine, and it has rapidly become the world's definitive source for instant expert knowledge and computation. Wolfram Alpha uses its vast collection of algorithms and data to compute answers and generate reports.
Wolfram Alpha is also the set of Flash widgets that we used in U project app. Wolfram Alpha has a number of different categories such as mathematics, physic, chemistry, life science, music and much more. All of them, you can find here. The implementation of widgets libraries service is a tremendous opportunity in beefing up lessons.

The prelude to the second phase: remote online lessons

The application is not enough. In the second phase of the project, we were faced with the even more challenging task. The app we developed should also serve as an e-learning platform. A student who for various reasons can't go to school can use it to partake remotely in the lesson. So we created a panel where the teacher can log in and choose one of the courses. Each student should have a tablet with pre-installed application. After selecting the lesson by the teacher, it is automatically loaded on all connected tablets. Each scrolling of a slide, with the help of Web Sockets, is synchronized with all devices. This means that we can see the same slide as the teacher has chosen.

Sharing screens between devices is another feature that we implemented. Now we can decide if we want to share the screen from our app to tablets or from tablets to the whiteboard.

The possibilities are vast! Sometimes students just can't go to school and participate in lessons and by the same reason, they miss presentations. This is why we implemented the next functionality - sharing camera view (e.g., from the tablet) to the U project application. In this way, we can remotely partake in the lesson without any hindrance. To make that possible we’ve integrated with Client's Kurento WebRTC server which was used to communicate between tablet application. We implemented communication channel using WebRTC to be able to communicate also between whiteboard and tablet application.

U project - system concept

U project is composed of four functional elements:

1. The U brain - the system logic stored in cloud environments. It includes digital content, users profiles (which stores all the information about the users) and the template repository (all the mechanics).
   To make it short, the U brain defines and manages how content fills the templates and how these are presented on the frontends.
2. The Android App - a tablet application that can be downloaded for free from the Google Play Store.
3. The rich frontends - the interactive software-hardware tools created to improve the experience in the classroom by interactive multi-touch whiteboard and table.
4. The U transport layer which includes:
   - Satellite connectivity dedicated to the interconnection of enhanced classrooms and remote users living in digital divide areas,
   - 3G/4G, ADSL and Satellite connectivity for personal use,
   - WiFi connectivity dedicated to the local interconnection into the enhanced classroom between tablets and the rich front ends.

The role of the U transport layer is huge. Modern teaching methodologies more and more rely on multimedia contents. Especially during technology evolution. But we need to remember that content is useless if it can't be delivered to the users.

This is why U project focuses on multimedia content as well as the need for its dissemination and distribution on a one-to-many or many-to-many base: multicasting becomes a mandatory choice.

The perfect solution was the usage of satellites that allows distributing content on a virtually unlimited scale.

Dev stack: what we used while working on U project

It is a wide range of technologies we used during the app development process. Only the choice of drawing library was a little problematic in the beginning. Finally, we decided to use Fabric.js.

The list of the full stack:

• HTML5,
• CSS3,
• ES6 Javascript Syntax,
• React (UI),
• Redux (application state management),
• Fabric.js (drawing library),
• Webpack (used to automate building / modularization of the app),
• NW.js (learn more about node.js),
• XMPP server including MUC (Multi User Chat) extension,
• Kurento WebRTC server.

We have decided to use React with Redux for that project because we wanted to see how it will work with that kind of project. Besides, Redux gave us the possibility to hold the whole state of the application and then restore it, which was one of the Client's requirements (to be able to save and restore previous work). As module bundler we used Webpack, which is working great with React applications.

The Client wanted to run the application as a standalone Windows application. So the choice was pretty straightforward. We considered Electron and NW.js but decided to use NW.js because we have more experience in it, gained during working on previous projects.

We also needed real-time communication between server and clients. There were some solutions already used by the client such as XMPP and Kurento WebRTC server. There we had no choice; we just had to implement communication between these servers. Communication with XMPP is done using Node.js XMPP client; it was possible because we use NW.js which exposes node.js environment.

The cooperation with the Client: carrying out the project

During the app development, we rely on Agile methodology and its best rules and practices that focus on collaboration of people involved and provide a better procedure to allow revisions and evolution of web application requirements.

Agile is based on a very high level of customer involvement throughout the project, so together with the Client, we set down clear rules of cooperation. We made sure that all stakeholders know about the stage of the development and its idea. Anytime we were ready for responding to change over following plan and focusing on the most important point of the app.

How did we work?

1. We set sprint length for one week. You might think it’s too short time to show something. However, one of our goals was to share with the Client quite often the results we’ve got, so we could get feedback and make improvements.
2. We communicated via two applications: Skype and Slack that made project management much easier. We set up together with the Client a backlog with all tasks including of theirs priority.
3. We sent daily reports include information about what we did and on what we will be working next. We also informed the Client about problems and delays.
4. We scheduled weekly Skype calls with the Client when we summed up the previous iteration, got feedback and presented a proposal of a todo for the next week.
5. During our weekly Skype calls, we also had a retrospective meeting. The team members discussed the process that they are following and give any suggestions for ideas and improvement.
6. All tasks were added and updated with Redmine.

Summary

Working on such project as U project was very challenging. Our cooperation with the Client is not yet completed. We are planning further updates that will enhance and facilitate the use of the application. Can't wait!

‍