Moja global: FLINT JSON User Interface

Hey all, My name is Abhishek Garain, GSoC’20 student @project-mojaglobal. As a part of the team, I will be working on the project “Develop FLINT JSON User Interface” in the upcoming coding period.
I will be using this topic for my weekly blog post updates regarding my project.
Super excited to work with the team :smiley:

4 Likes

Week 1 of GSoC’20

Prologue

So, It was the month of February in the year 2019, when I thought that my Android Development skills are good enough to write great piece of codes and ship softwares to end users. Now, open source was a buzzing word in that point of time. I searched about it a bit, came to know about Google Summer of Code from my seniors(thanks to them), searched a lot of organisations and their project ideas, came over Mozilla’s idea to implement a downloader library for Firefox Lite, submitted my proposal, and guess what, I got rejected :pensive::pensive:

Keeping away the bad memories to one side, along with Android, I learnt a lot of skills like Web Development using ReactJS, Developing Desktop Apps with Electron and automating stuffs with Python. It was the month of December, started searching previous year projects to contribute(yeah, I started early this year), but didn’t get proper projects matching my skillset. I was already clueless about finding a proper organisation and almost left my idea of applying to GSoC’20.

So, It was the time of February, when the list of organisations were published by Google. Started searching for projects in alphabetical order, my search paused when I came over moja global’s idea to develop an all new GUI JSON Interface. Now, I had worked a lot with JSON in past, either for configuring Firebase Databases or maintaining Local Storage, but I had no idea how to create an editor solely for JSON files. So, I gathered up all my courage and sent a mail to @Guy sir expressing my wish to work on the project and he replied me within hours with proper resources to start on with example version of FLINT and introduced me to @mfellows sir to get proper guidance regarding the project. So, I started developing the prototype, and when it was in good shape, I started writing my proposal and submitted it successfully. Thanks to @Guy sir and @mfellows sir for guiding me throughout my proposal writing phase.

Now, it was the day of result declaration and I was eagerly waiting for the results, and on 11:24PM, the mail popped out.

So the Community Bonding Phase began…

To familiarize the students with the organisations and the mentors, @Guy sir organised a video conferencing, and it was really an interesting one. Knowing about how FLINT works and how it helps to reduce emission in the environment, and the best part of the meet was, we realized that the tools built by us were going to be used by lot of persons around the world, to mitigate emissions in various sectors.

Deliverables

The first sprint assigned to us, was deciding a platform to post our weekly and monthly deliverables, reports and track progress of the project. It was a great discussion with @abhineet97 , @partharora1010 and @sulay15399 about deciding the platform. The sprint ended successfully by reporting the outcomes of the discussion to @Guy sir.

Looking forward to complete the next sprint of confirming work plans and deliverables within a few days.

The daily logs of my work can be found here.

This article can also be found at my personal blog.

5 Likes

This is the result of the stand-up for this week.

Last week was successful. Abhishek has taken the lead on the discussion between the students on where and how to post their work. We will post weekly blogs here and on a specially created repo on our GitHub. We will also use GitHub to post our workplan and progress for each item. We will have weekly deliverables (issues) that will be resolved.

This week, the focus will be on getting a workplan in place by the end of the week. This will require close communication between the student and the mentor. We are still figuring out how it will work precisely.

The challenge this week will clearly be to get the communication to work. There is some reluctance on the side of the students to get the attention of the mentors. They should be not hesitate to get attention for their queries. If necessary they can use other channels of communication or ask other mentors or admins to assist.

But overall we are off on a great start. Looking forward to the workplans!

2 Likes

Week 2 of GSoC’20

Preparing for takeoff - Part I : Work Plans, Schedule of Deliverables wireframes and UI Mocks

So, the week2 of Google Summer of Code’20 has come to an end, and I have successfully completed my second sprint of confirming the schedule of deliverables in weekly and monthly basis. The project plan will help me to bind my paths for the entire coding period and complete milestones in a planned manner.

Apart from that, I have also worked on creating proper work plans by making flow charts and process diagrams.

There was also a need to prepare proper wireframes according to the work plans to improve the user experience, which was built on top of the flow processes.

Additions to the Ideas list

In this process, @mfellows sir suggested a great idea of implementing a feature to make packages of commonly used JSON files, so as users can start on with a project with just a few clicks away.

After the wireframes were approved, I felt motivated to make some UI mocks using Adobe XD, which will help me to design the UI, once the coding period starts.

Upcoming plans

The upcoming week, I am planning to work more on UI mocks and getting them finalized, so as to have a proper headstart to my coding period.

2 Likes

Abhishek,
Great work. Excellent progress.
I really like your commitment to your project. It is a pleasure to see your continuous stream of products. Top job. Thx.

2 Likes

Week 3 of GSoC’20

Preparing for takeoff - Part II : Integrating ReactJS with ElectronJS

Its been almost three weeks since my inception into the GSoC’20 program and I can truly say that this was the most interesting week since Week1(obviously many more to come :grinning::grinning:). The reason why I say this is, I learned a new and interesting stuff about integrating ReactJS with ElectronJS using Webpack. So lets dig into the the technicalities.

Electron + React + Webpack = Tada :fire:

So, previously I used to develop Electron apps with VanillaJS or plain CSS and JavaScript. But with the advent of this project needing a great UI/UX for users, I decided to use ReactJS as a frontend library here in this project. The reason of using ReactJS is its robust material-ui library and great compatibility with ElectronJS.

So, in the pre GSoC period, I started learning ReactJS and built an Expense Calculator App.

Now, I started converting this app into an Electron App, and Webpack steps in here. Basically Webpack is a module bundler which bundles HTML, CSS, JS, JSX files to a single HTML, CSS, JS bundle which is ready to be shipped or deployed.
Electron + React + Webpack

After learning the intricacies of Webpack, I jumped upon converting my old React App to a brand new Electron App. After a lot of coffee and debugging, I finally had an Electron App in front of me.(Now, many would say that its not a tedious job, but to host the React App in background and load the React App’s URL into mainWindow of Electron, or Electron-React-BoilerPlate is an option, but they don’t support native NodeJS modules like 'fs’:worried::worried: A sad thing).

Packaging Apps

I was ready with the development version and needed to ship it successfully. On serching a bit, I got hold of Electron Forge’s Package manager which helps to bundle the app and install it in any computer.
A packaged version of the app can be found here.(packaged for Debian based OS only)

Plenary Meeting

We had a meeting with our mentors and other fellow students regarding suggestions for improving communications and code contributions. It was a great exchange of ideas among the team.

This article can also be found at my personal blog.

2 Likes

Abhishek,
Thank you for the great blog but much more, thank you for the great work.
Has this experience clarified the invocation of Python and batch commands you were hoping to test.
Are you still on schedule with researching more about user-comfort by the end of this week.
Great work. I think you have already taken off. Well done.
Guy

1 Like

@Guy Sir, I am currently going through the UI libraries of React, which will help users to have a great experience using our editor. As I have planned the python and batch commands execution part for phase3(month of August), I have lined up a whole wireframe and I will share it very soon.
Thanks :smiley:

2 Likes

Week 4 of GSoC’20

GSoC’20 : Preparing for takeoff - Part III : All set to fly the next week

So, we have ultimately reached the final week of Community Bonding period and I can say with full confidence that each and every goal of Community Bonding i.e. making a good relationship with the mentors and fellow GSoC students, understanding the community and contribution guidelines of the organisation has been achieved successfully :raised_hands:.

The week, I planned to start my first week of coding period(Yeah, before a week of official coding period as we were intimated by our college that we may have exams in mid June) but my college decided to wind up all the exams by 31st of May :disappointed:. I was a bit disappointed, as I was mentally prepared to start my coding this week, but on the positive note, my mentors agreed to postpone the coding period by one week, thus giving me a window to prepare for exams.

Revisiting the core concepts

A quote by Laurell K. Hamilton goes by the way,

Confidence is a fine trait, Over-confidence isn’t.

Being a follower of this quote, I decided to start a short course on ReactJS, to revise my concepts of State, Props, React-Router, Redux etc. and made an example Burger-Builder App integrated with Electron.

example burger builder app
So, in a concluding note, I can say that I am well prepared to start my coding period, with all the wireframes and work flows to assist with the development of the awesome FLINT JSON User Interface.

1 Like

Abhishek,
Your blogs are really a joy to read. As I mentioned before, I am impressed how you combine so many activities on top of your exams. I agree that you met all expectations of the Community Bonding Period. Well done and your enthusiasm as made us all look forward to the coding months coming up.

1 Like

Week 5 of GSoC’20

GSoC’20 : Week-1 of Coding Period | Takeoff Successful

It had been an awesome community bonding period in the past one month, and finally, the coding period kicked off successfully.

Sprints Completed

Starting on with the coding period, I initialised the code repository, by creating an Electron App, integrating it with React with the help of Webpack to create a basic Hello World project. Once it was done, the next thing was to identify the contributors of the project by triggering the all-contributors bot.

Now, it was 2nd of June, and I started chalking out a plan to create the landing page of the app, keeping in mind the community branding guidelines, the UI etc, referring to the wireframes which I built on Week 2 of community bonding period. Once the plan was appealing, I started to code the landing page, and after a day and three cups of coffee :coffee:, I was ready with a basic landing page.

Once getting it reviewed by @mfellows sir and @guy sir, I started to improve the layout and content of the page, and created a revised layout of the same.

Sprints Left

The only feature which needs to be implemented for the week is to integrate a raw JSON editor to help users to build a JSON file from scratch. I will be using NPM’s json-editor package for the same.

Conclusion

On a concluding note, I would like to say that the GSoC’20 experience has become even more exhilarating for me, learning new concepts and implementing them, day in and day out.

This article can also be found at my perosnal blog.

1 Like

Abhishek,
I am happy to read that GSoC is turning out to be more exhilarating than you expected. Well, I can safely say that your work is turning out to be more exhilarating every week too. I love your enthusiasm and attention to detail. You are putting lots of effort in your blogs and reporting. You communicate clearly and regularly. In short, it is a real pleasure to work with you.

1 Like

Week 6 of GSoC’20

GSoC’20 : Week-2 of Coding Period | Landing Page, Predefined Packages and Tab like Editor

PR1: Implemented Landing Page and Scratch JSON Editor

The week’s mostly went on with finishing the Scratch JSON Editor which will be used by the users to write a JSON file purely from scratch. I also gave a final touch up to the landing page.

Current Week

This week’s work comprises of determining how to keep a note on the predefined packages and making it easier for the users to get a starter project comprising of a complete set of JSON files into their desired directory. The work also comprises of implementing file operations such as copying the template JSON files to a user-defined directory.

The other work which needs to be completed in this week, is to implement a tab-like editor(similar to VSCode or Sublime Text) where user may be able to switch over between there desired JSON files with great ease.

On a concluding note, I can say with full optimism that I am flying way ahead of my self-built schedule of deliverables, which implies, I will get more time to fine-tune the project and deliver a software which will provide great experience to end-users of FLINT.

This article can also be found at my personal blog.

Hi Abhishek,
You are way ahead of schedule and we still have 2 weeks to go. Well done. Very impressive. When you started I thought your schedule was ambitious, then you added a few new ideas in the process and now you have done all that and still have some time left. Please keep going. You are making an impressive contribution to moja global. Thank you!

1 Like

Week 7 of GSoC’20

GSoC’20 : Week-3 of Coding Period | CFG File Editor, File Operations and UI Upgradation

PR2: Addition of File Operations, SnackBar, Error Handling for CreateProject feature

This Pull Request was made in intention to implement the File Operations associated to the CreateProject module, so that users can easily choose a predefined package and start on with their project in no time. The other eatures which were implemented were checking for errors and putting SnackBar and Dialog boxes in appropriate ways.


Current Week

This week, I had two features to be delivered, namely the CFG File Editor and basic version of tabbed JSON Editor.

CFG File Editor

The notable uses of this feature is to create a config file which points to numerous JSON files which is used by FLINT to accept arguments in its model. I have tried to build it in an interactive way, using transfer lists, where the appropriate JSON files are chosen. After the files are chosen, user has two options, either create only the CFG files, or CFG file alongwith a copy of chosen JSON templates.


The other feature which needs to be implemented in this week, is a basic layout of tabbed JSON Editor.

Plenary Meet

Our organisation conducted a meeting with the mentors and fellow GSoC’20 students where we discussed about our progress and problemd faced while acheiving the deliverables.

This blog can also be found at my personal blog.

1 Like

Abhishek,
As indicated last week, you are nicely on track now that we are getting closer to the end of the first coding period. The UI has advanced considerably and looks really neat. We are very pleased with your progress, so keep it up.

1 Like

Week 8 of GSoC’20

GSoC’20 : Week-4 of Coding Period | Open Files, Open Project feature and Initial Tab layout

PR3: Addition of CreateCFG module, UI for OpenFile module and Dialog Boxes

The Pull request’s sole purpose is to implement a CFG file editor and an UI for Open Files feature. The CFG File Editor has been explained in previous blog. Talking about the Open Files feature, it will be used by the users to open JSON files in bulk in a single click.


The UI shows selected files, containing cancel(X) buttons to remove JSON files from queue. A tooltip is added to the chips to show the file directory, thus helping users to recognise non-unique file-names.

Apart from this feature, error-handling and dialog boxes are added.

PR4: Integrate PR Templates from Import-Me repo

This PR was made to integrate PR templates and Issue templates so as to make PR’s look good and organised. All thanks to @Sneha for making the templates.

The other feature which was included in this PR was the “Open Project” feature, in which, the users can easily open a previouly made project easily, just by choosing a folder containing the JSON files. Thanks to @mfellows sir for explaining the feature in a lucid manner.

JSON Editor

This week, I have also made a little progress on the tabbed editor by making an initial layout of it. The notable features which have been implemented are, dragging of the tabs, closing the tabs and opening a new tab.

Initial layout for Tabbed Editor

Summing Up

This week has been a roller coaster for me :sweat_smile:, since the first evaluations are knocking the door, and I am trying to publish the packaged version of the app before the end of month. :crossed_fingers::crossed_fingers:

This article can also be found at my personal blog.

1 Like

Week 9 of GSoC’20

GSoC’20 : Week-5 of Coding Period | Initial layout of Tabbed Editor

PR5: Initial Tab Layout of the JSON Editor

The week, I was working on creating a basic layout of a tabbed editor similar to VSCode and Atom. The modern day text editors provide features like opening new tabs, swapping tabs and closing tabs. After researching a lot about user experience and using NPM APIs for tabbed layouts like react-tabtab, react-draggable-tab, chrome-tabs etc, the react-draggable-tabs API qualified to be the best and easiest API to achieve the feature.

Workflow

The workflow may be explained as, once a set of files are chosen by the user from the dashboard in Open File and Open Project feature, the files are loaded in tabs in the editor. The user will be given an option to choose a mode of the editor in which the JSON file will be opened. Here, if the JSON file doesn’t have a template, it will be opened in ScratchJSON Editor mode irrespective of their choice.

Illustration



Tabbed mode in working

Footnote

Currently the Open Project and Open FIle is not connected with Tabbed Editor due to faster debugging, it will be connected in upcoming PR

Its been one month long since the inception of coding period. With the first phase getting over and evaluations mostly winding up, its a thrilling situation lately. :sweat_smile::sweat_smile:
This article can also be found at my personal blog.

1 Like

Hi Abhishek,
You passed the first coding period! Yeah! Well done!!
I like the react-draggable-tabs including the funny photo on the explanatory example.
You are clearly well on schedule and your JSON UI is coming together nicely. Good stuff.

1 Like

Week 10 of GSoC’20

GSoC’20 : Week-6 of Coding Period | Passed First Evaluation | Upgradations to the Tabbed Editor

Introduction


Firstly, I would like to thank all my mentors, specially @guy sir and @mfellows sir for believing in me and encouraging my work throughout the first phase of GSoC’20. It’s a joyous week for me, passing the first evaluation with great ease and getting my first ever stipend for contribution to the Open Source Ecosystem. :partying_face:
Party Mode ON

This week’s work

This week, I was working on refactoring the previously written code, so as it can easily accomodate the upcoming work on the editor. One major upgradation was, converting all ReactJS’s prop drilling methods to Context API. It may seem to be very trivial practice of using prop drilling at first place, but the fact is, ReactJS is more or less, a new framework for me, and I am learning new things each day, which is the best and motivating part for me in the whole program.

The other feature which was implemented, was connecting the tabbed editor to the OpenFile and OpenProject features.

This week was more of backend and integration work rather than frontend work, so I can’t showcase any UI improvements at this moment, but lots of UI designs are going to be featured in the next week. :sweat_smile:

moja global’s Blog

It’s great to know that moja global is featuring our work in their newsletter and how one or the other way, our work is going to help other developers and FLINT’s users in curbing the environmental pollution.

This article can also be found at my personal blog:

2 Likes