U Project (U Multitouch Whiteboard) is an amazing project related with Satellite technology funded by EU to research and develop innovative ways to teach science in Primary and Secondary Schools using interactive technologies.
The Project was divided into two phases. In the first stage, we focused on the drawing tools. Using our app you are able to draw, sketch, create shapes, open web pages within the app, import images, videos and objects 3d. In order to ensure the continuity of our work, we can save and load it at a later date.
In the second phase, we developed communication between our application (running on a whiteboard) and mobile application (running on student's tablets). Each student should have a tablet with a pre-installed app. After selecting the lesson by the teacher, it is automatically loaded on all connected tablets. Moving to the next slide of a presentation 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 on all other devices in the class.
Click on the toolbar below to watch movies from our application!
Application developed by us is not the only one of the Client. He had made an Android app indicated for tablets. Our job was to connect both applications (whiteboard and Android). In the result, when a teacher moves to the next slide on his/her device, it changes automatically on student's tablets. Just think, what capabilities this feature gives for schools!
XMPP & Kurento WebRTC
Our client had already used XMPP protocol and Kurento WebRTC server – that’s the reason why we could not even think about making use of other solutions. We had to implement communication between these servers. Communication with XMPP is done using Node.js XMPP client; it was possible because we utilized NW.js which exposes node.js environment.
HTML5 & CSS3
It's now a standard utilized for structuring and presenting content in our application. Features of HTML5 let us use the newest semantic elements for better application structure. Thanks to its native APIs we were able to create the modern application.
Application state management, which gave us a possibility to solve one of our client’s requirements – saving and restoring previous work. Redux hold the whole state of the application and then restore it. It is a fully predictable state container that is based on immutability.
Websocket is a communication protocol that is based on TCP connection. It helps a browser and a server to communicate. The biggest difference between WebSockets and other web protocols is that it supports real-time data transfer from and to a server. We utilized it to build a feature which allows a teacher to draw inside the lesson’s widget.
By using NW.js, we were allowed to apply Node.js modules from a browser and also use Web technologies in our app. We could also use all node.js modules directly from DOM