Page MenuHomePhabricator

GSoC 2019 proposal: Make notification counts update without page reload
Closed, ResolvedPublic

Description

Profile Information

Name: Shivansh Bindal
IRC nickname on Freenode: shivanshbindal9
Github: https://github.com/shivanshbindal9
E-mail: shivanshbindal603@gmail.com
Phone Number: +91-8295729539 / +91-8168611280
Location: India
Timezone: India(UTC+5:30)
Typical working hours: 10 AM - 2 AM (UTC+5.30)
Video Chat: https://appear.in/shivanshbindal9

Synopsis

This project involves updating the notification count on the set of icons in the header via a polling mechanism. A notification text to display relevant information about the new notifications that will be visible for a short duration of time based on user preference. Also, a visual cue indicating that count has updated will be provided.

MENTORS : Kosta Harlan @kostajh, Roan Kattouw @Catrope

I have been an active member of the community since December and have been contributing to other sister projects of the WikiMedia foundation. After the announcement of the GSoC project ideas, I was deeply interested in the aforementioned project and I am also working on microtasks relevant to the project. I also have been in regular contact with mentor Kosta Harlan through E-mail as well as on phabricator.

Deliverables

This project will involve making a polling mechanism i.e. a mechanism to call notification API periodically to check if there are any new notifications. Update the counter i.e. the notification count on the notification icons in the header. Show notification text for short duration and a visual cue if count of notification changes.

PHASE 1 (Deliverable before Phase 1 evaluation)

  • Make changes in Echo extension for making API call using polling.
  • Update notification count without page reload.
  • Document the work done.

PHASE 2 (Deliverable before Phase 2 evaluation)

  • Visual cue that notification count has updated.
  • Document the tasks completed.

PHASE 3 (Deliverable before Phase 3 evaluation)

  • Design of notifications to be displayed for a short duration of time.
  • Display the notifications.
  • Submitting the final report of the tasks completed.

Timeline

PeriodTask
6th May to 26th MayCommunity bonding period Understand the codebase of the Echo extension and core of MediaWiki. The workflow of how the notifications are sent.
27th May to 2nd JuneWrite js in Echo extension for making API calls periodically(polling).
3rd June to 9th JuneOptimize the polling mechanism based on discussion with the mentors. Fix any possible bugs
10th June to 16th JuneChange the notification count on the icons by comparing the notification count (unread)
17th June to 23rd JuneDocument the work done on the wiki. Start working on displaying visual cue that the notifications have updated.
24th June to 28th JunePhase I evaluation Submit a report of the tasks completed.
29th June to 7th JulyFinalize visual display to notify the user that count has updated on basis of feedback from the mentors.
8th July to 14th JulyComplete the visual cue that notifies count update. Fix bugs, if any.
15th July to 21st JulyDocument the work done on the wiki. Start working on user preference to display the notification text.
22nd July to 26th JulyPhase II evaluation Submit a report of work done.
27th July to 4th AugustWork on the design of notifications i.e. what to include in notifications text and the schema.
5th August to 11th AugustDisplay the notification using mw.notify() library. Fix bugs, if any.
12th August to 19th AugustDocument the work done on wiki. Complete any remaining work
20th August to 26th AugustSubmit final report of the tasks completed to mentor.
27th August to 2nd SeptemberMentor submit final evaluation of the candidate

Participation

I will be available anytime through Email, Zulip or if required, a well-planned video session. I have been and will be in constant contact with Kosta Harlan and Roan Kattouw through E-mail as well as phabricator. I have been an active user of Github since my freshman year. I will continue contributing via Gerrit and Github to our project. Apart from working on the project, I would be glad to help other contributors and users solve their issues and help the maintainers in reviewing Patches.

About Me

Current Education(in progress):

  • University: Indian Institute of Technology, Roorkee, India
  • Field of study: Computer Science and Engineering
  • Current Year of the study: Second Year

How did you hear about this program?
Our college has an active community of open source developers. Every year, many of our institute’s students get selected for Open Source Programs such as GSoC and Outreachy. I heard about this program from a senior of mine who himself completed his GSoC with OWASP.

Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
I will be having my semester examinations from 24 April to 4 May so I will be slightly inactive between 10 April and 4 May to prepare for my exams, which is way before the coding period.
During my summer break (5 May to 11 July) I can easily give 50+ hours per week to the project as I have no other commitments. I will be able to do about 35-40 hours a week when my college resumes (3-4 on weekdays and 10+ on weekends). But I intend to complete a major part of the project before my classes begin and thus I will easily able to cope up with the remaining work and deadlines.

We advise all candidates eligible for Google Summer of Code and Outreachy to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?
I am only applying for Google Summer of Code with Wikimedia organization.

What does making this project happen mean to you?
I was only recently introduced to the open source world and so far, I have found the developer community extremely supportive and helpful. There are a lot of open source projects that we make use of every day that makes our lives easier and help us learn new things. Wikipedia is the world's biggest digital encyclopedia and when I came to know that the project is open source, I was highly motivated to contribute to it.
Now, I have gotten a chance to contribute to the world’s biggest digital encyclopedia. I am grateful for this opportunity and assure you about my commitment and determination towards this project. Through this project, I will be getting a chance to apply my knowledge practically and also learn a lot of new things. Moreover, this project will not only give me the opportunity to work with the best developers around the world, but I'll also be able to give back something to the community and make learning easier for them.

Past Experience

I have been a software enthusiast since my freshman year and since then I have worked on some projects which were truly a great learning experience for me. In my pursuit of acquiring web development skills, I started contributing to the open source community so that I can give my part back to the organizations whose products have been an asset to me.
Also, at my university I am an active member of Information Management Group(IMG), which is solely responsible for maintaining the IIT Roorkee's intranet portal channeli and IIT Roorkee's official website, and has worked on several projects from scratch, so I am well verse with the software development cycle i.e. from designing to coding to production to maintenance.
Coding Skills:

  • Programming Languages and Frameworks:
    • Fluent in HTML, CSS, Javascript, PHP, Python, C/C++.
    • Sound knowledge of OOPs, MVC architecture.
    • Proficient with Django(Python Framework), Django REST framework, Django Channels, Websockets, Yii2(PHP Framework)
    • Experienced with front-end frameworks such as React and Redux.
    • Having moderate experience with MySQL and SQLite
  • Development Environment:
    • Ubuntu 18.04 LTS (preferable) or Windows 10
    • Fully customized Visual Studio IDE.
    • Vim(Fully customized) and Nano for small edits.
    • Strong concepts of Git, can catch up with Mercurial and SVN if required.
  • Other Interests:
    • Shell Scripting
    • Competitive Coding

Till now I have earned a good sense of understanding about the codebase and will continue to contribute to the project. I also have few patches merged.

Also, I have made some pull requests to WikiMedia project MediaWiki Action API. Additionally, I have a decent knowledge of making templates and gadgets and using them.

  • #65 (merged): expand autogenerator.js file to output Javascript files (completes Microtask 2).
  • #80 (merged): make file names generic in modules.json file (solves issue #70).
  • #99 (merged): add javascript files for remaining modules in modules.json file.
  • #114 (to be reviewed): reorganize readme.
  • #70 (issue) : filename attribute not generic in modules.json .

Along with working on this project I also contributed to other projects of WikiMedia Foundation enlisted in New_Developers guide of WikiMedia. The project to which I mainly contributed is WikiEduDashboard

  • #2314 (merged): modify javascript tests, add CSS file for single-select type and add react-select in course type selector.
  • #2321 (merged): improve the layout of the search bar in mobile phone screen (solves issue #2255).
  • #2331 (merged): add ruby spec for the added react-select component in home wiki project selector.
  • #2380 (merged): implement i18n in yes no selector, modify CSS and functionality of Select component in yes no selector.
  • #2410 (merged): solves on tab press issue in two components.
  • #2413 (merged): add react-select in home wiki language selector.
  • #2429 (merged): improve the styling of block type select alongside adding Select component.
  • #2430 (merged): add react-select in course level selector.
  • #2453 (merged): show due date only when the type is assignment (solves issue #2452).
  • #2452 (issue): due date visible once set irrespective of block type.

OTHER PROJECTS:

  • Static Site Generator: Static Site Generator is a web-based app to facilitate the professors of our college to make single page conference website, portfolio by simple drag-drop and component selection. It uses Yii2(PHP framework) for the backend, React and Redux for the frontend, MySQL as database.
  • Water Breach Reporting APP: This app implemented a system to report the water structure breaches to the government. It is a mobile app with backend in Django REST Framework. Blockchain, implemented in python, is also used to make transactions immutable. The source code can be found here. This project was worked on as a part of Smart India Hackathon.
  • Stream: Stream is a web app to stream music on a PC, while one can control the song using other PCs connected in a network. It is a React-Django application with webpack used as the module bundler for JavaScript code. For real-time communication between the stream and other users, WebSocket connections were deployed using Django channels.

IMPLEMENTATION DETAILS

To update the notification count on the icons without page reload we'll need to make API calls. Using the polling mechanism an API request will be made that checks notifications of a user. To provide real time experience the request can be made after around 60 sec.
After this API request, we will check if there are any new notification by comparing the number of unread notifications. If there is any new notification then the count on notification icon will be changed by changing the HTML.
Also, in case of any new notification, a new API request is needed to be made that will be used to display notification text for short duration. This can be done by making a new API that shows only the relevant information of only the new notifications using mw.notify() library.
For providing the visual cue to users regarding new notifications a faintly coloured background around the icons can be used.

Event Timeline

@Shivanshbindal9, this looks good! Some suggestions:

  1. @Catrope and I think it makes more sense to do the phase 3 item (visual cue that notification count increased) before phase 2 (show notification text), so perhaps switch the order around.
  2. We would prefer to have the code submitted to the Echo extension rather than a Gadget
  3. We want the notification count to update without the user having ever to click on the notification icons, so we'll need a non-lazy loading script for that.

When you're done updating please move to the submitted column on Google-Summer-of-Code (2019) and be sure to upload your proposal to the GSoC website. thanks!

Thanks a lot, sir for your review and sorry if I sounded a bit impatient but today is the last day to for submitting the proposal. I have made the changes that you suggested.
As for point 3, I didn't intend to say that we need lazy loading script. Actually, I was referring to the current workflow. I have removed that section so that there is no ambiguity.
If still there are any changes that you suggest I'll be happy to incorporate them.

Thanks a lot, sir for your review and sorry if I sounded a bit impatient but today is the last day to for submitting the proposal. I have made the changes that you suggested.

no problem, thanks for getting it submitted!

As for point 3, I didn't intend to say that we need lazy loading script. Actually, I was referring to the current workflow. I have removed that section so that there is no ambiguity.

Sounds good, thanks!

Congratulations on completing the project! If there isn't anything remaining in your proposal to address, feel free to close this task. Before you do so, make sure your project is listed here https://www.mediawiki.org/wiki/Google_Summer_of_Code/Past_projects#2019 and has the following information: Student name, Mentors, Relevant links and Outcomes (in not more than two lines).