Building a JavaScript Based Configuration UI for OpenWisp

Gaston Che
Aug 23, 2017 · 6 min read

Over the course of the last three months, I have been a part of the GSOC 2017(Google Summer of Code 2017). This program features students working over the summer, from June to September, on various open source projects.

For the GSOC 2017 program I have been working with an open source community called OpenWisp. OpenWISP is set of software projects that can be used to deploy and manage low cost wireless networks (public wifi, backbone wireless, wireless mesh). The OpenWISP software suite includes five main applications, derived from tools used to offer public wifi service in Italy and other European countries. You can read more about the OpenWisp community here.

Over these 3 months I have been working on “Building a JavaScript Based Configurations UI for OpenWisp” as the title of this post implies. The Openwisp project used netjson, a json-schema standard, control network configurations. This requires a means for a user to edit these configurations graphically as well have the possibility in editing configurations in an advanced as a user with much experience. Thus this required the availability of a Visual editor for editing and validating netjson easily. The aim of this project is to make available a fully independent netjson editor library which can be integrated into any netjson project. This library will make available both the basic and the advanced editing modes as well as validation of user configurations against the netjson schema provided at any point in time. Since this post is aimed at talking about the work I have done this summer at OpenWisp, any more details required on the idea behind my project can be found here. In this post I will concentrate on the work i have done, giving details about the status of the work.

My GSOC contribution has been centered around building a netjsonconfig-editor library which will be reusable in any OpenWisp2 project as well as any many other projects. For this work I made use of various technologies for the various sections of the work. Again as the title implies the library is built in JavaScript. The library development was done in three main phases, featuring the development, testing, documentations and optimization of the three main sections of the library.

Important Links

The Basic Editor

The basic editor is first section of the UI. This section is a basic user interface containing form elements generated by the library from the netjson-schema provided to it. This is meant to receive and validate user input from basic user(not necessarily with technical skills). This currently works as described in the project proposal linked above. It auto generates form elements, validates user inputs and displays user friendly error messages to make usage a lot easier. Most work done on this part was carried out during the second section of GSOC 17. Below are some important commits made for implementation, tests and documentation of this feature.

The Advanced Editor

Given that the netjsonconfig-editor is to be used to edit network configurations data, it will be used by technical people to edit technical data, as such having just a form to edit the data will be limiting the technical users. As such I provided an advanced editor to be used to edit the raw netjson data as json. This advanced editor acts like a fully functional json text editor with syntax and semantics error reporting as well as data validation against the json-schema provided.

Snapshot of the advanced editor UI

The work done for the implementation, testing and documentation of this editor was mostly done before the first evaluation of GSOC 17. Some important commits that brought this feature of the editor come to life are given below

The Main Module

The netjsonconfig-editor, mentioned above has the basic editor and the advanced json-editor, i therefore need a module to connect these two parts. That’s where the main module comes to play. This module handles all the interactions between the advanced and basic editor modules. It is also the contact point to the the library functionality to the developer who may intend to use the library. It provides an API for functionalities for the developer to be able to make full use of the editor. The full specs of this API are defined in the project documentation.

Tech Stack

For the development of this library i worked mainly with JavaScript. using HTML and CSS fort he UI design and display. However the various modules of the library make use of various technologies. The summary of the most important technologies used and how they fall into the project can seen below

Bringing this library to completion as it is now would have been a lot more difficult without certain libraries. SO i gotta give credit to the main libraries i used to brig the project to completion

Dependencies and dev-dependencies

Status of the Project

The project as at the day of this writing is complete as per the project proposal, so I have fully implemented my project before the end of GSOC 17. However there are certain improvements which i intend to implement after this GSOC period on the library to improve both UI/UX and developer ease of use.

Repositories

During the course of this project i have had to contribute mainly to two repositories in order to get the library to this level.

Firstly I have had to make many additions to the Liform-React library in order to be able implement features in needed for the library. pull requests made to this repository (both open and closed) can be found here

I have had to create, configure and complete the second repository from scratch. The repository can be found here. This is the repository for this library itself.

Conclusion

Contribution to OpenWisp this summer has been an amazing experience. I have gotten to learn a lot working with advanced developers.

A lot of thanks and appreciations go to my mentor Federico Capoano (@nemesisdesign)for the full guidance and direction all through this period. He has been a great source of inspiration through out this period.

Working in an open source community with a project as challenging as this has given me the opportunity to experience a working culture with deadlines and deliverables to meetup with. Overall it has been an amazing experience. And I have gotten to learn a lot.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade