Interface de visualisation mobile du projet e-Tree

Teachers: Didier DONSEZ et Anne DELABALLE

Students: Ergi SALA, Tom SOVERY, Mathieu DUMAX-VORZET

Context

The E-Tree project is launched by Idex and is an interdisciplinary project. The idea is that the students coming from the ComUE (Communauté d’Universités et Établissements) institutes construct a photo-voltaic tree. It will have different functionalities like the possibility to charge a PC or a mobile phone, a weather station, an air quality measurement station etc. The end goal is that all the students of the ComUE have access to the data collected by the tree through web and mobile interface where they can login using their Agalan account.

Our Task

Our group was in charge of developing the interface and a mobile application, which allows UGA students to visualize, in real time, the E-Tree’s data. This data could come from different sources :

• The meteorological station, which provides temperature, humidity, pressure and pollution measures.
• The battery, which sends its current energy level.
• The outlets, which indicate if they are used or not. There are 2 power outlets and 2 USB-C outlets.

Several steps need to be realised for our application to function. The data emitted by the E-Tree needs to be collected, interpreted and then inserted, in a reliable way, into a database. After that, the designed interface displays everything to our users. Another point is that the E-Tree will be planted at the end of 2019, so we need to run on simulations in order to test our software architecture.

In order to accomplish this task we had to familiarize with new technologies on one hand, and attend different meetings in order to talk with the other participants and understand how everything is conceived.

You can find our final work on the following address : [1]

Technologies used

Lorawan

A digital wireless data communication technology developed by Cycleo of Grenoble.

NodeRed

A programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using the wide range of nodes in the palette that can be deployed to its runtime in a single-click.

PostgreSQL

An open source object-relational database management system with an emphasis on extensibility and standards compliance.

Swagger

An open-source software framework backed by a large ecosystem of tools that helps developers design, build, document, and consume RESTful Web services.

NodeJS

An open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. In our case it serves as a server generated by Swagger.

NGX-admin

Template based on Angular 7+, Bootstrap 4, Nebular and Typescript.

Useful links

[2] [3] [4] [5] [6] [7]

Meetings attended

We had to be present in workshops organised by the project chief, Anne Delaballe. Generally they were more focused on the conceptual properties of the tree, it still being on the conception phase. As a result they were not very beneficial to us. However, we had discussed with the teams in charge of the meteorological station and the electrical aspect (battery and outlets). There are issues due to deadline difference but we had able to reach agreements about transmission protocol.

The application

LoRaWan and CampusIOT

The CampusIOT’s platform allows users to declare applications and devices on the CampusIOT’s Lorawan network. An application is a cluster of devices, emitting with the LoRa technology. Each application has a unique ID and each device has a unique ID in its application. We have declared 2 applications for this project. The first one is the E-Tree-simulation, with all the sensors. The purpose is to have a clear structure and allow us to begin some tests without already have the transmission protocols. The second one is the E-Tree, with 2 devices : the weather station and the battery. The weather station emits, every 900 seconds, all the measures actually collected. The battery emits information linked to its charge and the free outlets.

NodeRed

NodeRed is a programming tool for wiring together hardware devices, APIs and online services, in using numerous nodes with various utility. In our project, its purpose is to receive and stock data in the database but also to simulate the sensors‘ informations. Due to a lack of time, we only simulate the weather station and not the battery’s packets.

DataBase

The PostgreSQL database contains two tables, as described on the relation diagram below.

BackEnd

Each service is described in swagger.yaml, has a controller class with its definition and the functional code can be found on the service folder. To test the backend only, one can execute an npm start in the current folder and try out every service on http://localhost:8080/docs/ Most of them are weather and air quality services, because we had enough contact with the team responsible for this part.

FrontEnd

Its type is a single page application. Every tab charges a new template on the page. The page is made of modules integrated in ngx-admin, which call the backend, via the swagger generated services, in order to get and display the information available in the database.

Next Steps

Battery state and Charging ports

Unfortunately, we could not get in contact with the team that was responsible for the tree’s charging capacity, free charging ports etc. As a result we have not added this aspect on the database and the backend. However we have created a basic interface in the frontend for this purpose.

Multiple Tree Management

In the database we have added the table “Arbre” in case multiple trees are installed on the Grenoble Campus or elsewhere. Each tree will have an id, and its geographical coordinates.

Agalan Login

As described on the initial context, the functionality for students to login with their agalan account needs to be added.

Distribution

Finally, everything needs to be deployed. The database should be remotely accessible, the web interface hosted in a domain, and the mobile application distributed on the Android Playstore and Ios Appstore. Also, if we maintain available a computer version of this project, it could be useful to use a Docker container.

Conclusion

In this project we were able to truly understand the process of creating a web application. From conception to receiving and fulfilling client expectations, making visual and coding choices and a lot more. We feel now more prepared for situations that we will eventually face in a professional environment.

Other

The tree must be finished by December 2019 and be inaugurated at the same time as the Integrated University.