Building a JavaScript Based Configuration UI for OpenWisp

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

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

Tech Stack

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

Repositories

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

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.