Introduction

The UI for the Arctic Sea settings project had 2 goals. The first goal was to create a REST API on top of the Faroe API, which can eventually be used for performing CRUD operations. The second one was to create a Web frontend using JavaScript or any framework of JavaScript (e.g., Angular/React) to perform CRUD operations on the JSON settings file. I completed the first goal during the project’s first phase and the next half of the project during my final phase.

Completed Objectives

Link to the REST API Github Code

https://github.com/sujit-jaunjal/arctic-sea/tree/master/faroe

Link to the UI frontend for REST API Code

https://github.com/sujit-jaunjal/FaroeREST-UI

REST API

The first half of the project’s objective was to create a REST API that would perform the GET operation over the Service Settings data. I have designed a REST API that is able to fetch the data from a .JSON format according to our requirements. For example, if we request the file by sending parameters containing a specific group, then only the settings related to that group would be retrieved and shown dynamically.
The API modeling is as below:
-GET : /definitions/groups -> links to all group’s endpoints.
-GET : /definitions/groups/{groupTitle} -> links to settings for the specified group.
-GET : /settings -> links to all the setting values.
-POST :/definitions/ -> add the setting definitions.
-PUT :/settings/ -> update the setting values.
-DELETE :/settings/{setting} -> delete the setting values for the specified setting.

GET Operation

POST Operation

PUT Operation

DELETE Operation

Hence, I have created a REST API over the top of FAROE API and have performed CRUD operation over the settings successfully.

UI Frontend

The frontend was created using the React JS framework. I used the CORSMAPPING library from Java to develop communication between my Java and React applications. The CROSSORIGIN annotation was helpful to give the React application access to my Java application APIS. I also learned many useful functionalities of React JS during my frontend work. See the following demonstration of my UI.

UI with all Settings according to groups Tab

UI frontend for ADD Setting Definition functionality

Final Remarks

Building the functionalities for the FAROE project made a huge impact on my knowledge about Java, Spring Boot, ReactJS. I never thought that my focus would ever shift from Web development to Java development. The whole journey has been a rollercoaster ride right from project commencement up to the finish. Thanks to my mentors -Benjamin and Carsten for their inputs over my project. Special thanks to Christian Autermann, without him I guess this project wouldn’t have been completed. Although he was not a mentor for this project and I only had a week’s interaction, his share of guidance was huge to make my end goals meet.

Thanks to the organization and my mentors for selecting me as a GSOC contributor, I would be glad to contribute next year as well. I would also like to be a mentor for any project if there’s a place for me 🙂