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