Public Lab Research note


GSoC Proposal : Notification System and UX Improvements

by gautami_gg | April 09, 2019 16:23 09 Apr 16:23 | #19012 | #19012

About Me:

Name: Gautami Gupta

Affiliation: Integrated Masters in Computer science at International Institute of Information Technology, Bangalore

Location: Bangalore, India

Github: https://github.com/gautamig54

Email: Gautami.Gupta@iiitb.org

Project:

Public Labs Notification System and UX Improvements

Detailed Problem Statement:

Notification System

Notification system mainly consists of two parts, In-app Navbar Notifications and Web Push Notifications. I plan to undertake each as follows:

  • In-app Navbar Notifications: Currently, notifications regarding likes/comments on a post for a user are sent out through emails and there is no notification drop-down on the navbar. I will be implementing a notification feature for each user on the navbar.
  • Real-Time Notifications and Web Push Notifications : I will build a system on publiclab/plots2 for triggering Web Push Notifications for desktop when new comments/likes or posts are created using Notifications API provided by Mozilla or W3C and Real Time Notification System by ActionCable.

Other enhancements I would implement:

As mentioned by the mentors, the above project can be included with other contributions for the GSOC summer duration. Therefore I would like to suggest certain improvements in User Experience.

  • Back-end improvements
    • Reducing response time of the web pages
    • Faster CI (Continuous Integration) Pipeline by reducing time for test suite in Travis CI.
  • Accessibility
  • Internationalization
  • Keyboard Shortcuts

Implementation:

In-app Navbar Notifications:

Notifications provide an overview of the user related activities on the website. It helps in increasing user engagement and personalization of the website for each user.

Notifications for the below events/actions will be shown to the user:

  • People who liked or commented on the user's post
  • Wikis/notes published related to the tags/people a user follows.
  • People who started following a user
  • Since Public Lab is a platform for posting environmental related issues, implementing a feature to track environmental issues nearby a user and notify those users about it would be very useful.

There are various gems to build an in-app navbar notification system like :

I will prefer using activity_notifications gem with ActiveRecord ORM as default configuration to implement the In-app Notification System as it works smoothly with Rails 4.2+ versions and hence compatible with Rails version 5.0, as it has a wide scope of customizing notification system.

Real Time Notifications and Web Push Notifications:

Web Push notifications are important because it helps users engage more with the website even when they are not online or not using the web application. After we implement a system of getting notifications in the prior task, we can more forward with the client-server system for web push notifications.

I plan to implement the Web Push Notification System using the APIs provided by Mozilla or W3C.

I will be implementing real-time notification system using ActionCable. ActionCable is a built-in library in rails with both server-side and client-side components to push data through web-sockets. It works in the form of Publications and Subscriptions for communicating between server and client. When a particular action occurs and publishes a message then another system (user end) subscribed to the message will receive it as a notification and display it as a Real-time Notification on the desktop.

While pushing a Web-Push notification to the desktop, the user (Chrome or Firefox), rails application server and the Web Push server will interact with each other.

  • To start with implementations of Real-Time Notification System, we first have to decide upon the subscription adapter in config/cable.yml to store the sockets' details. There are three adapters available for end-users.
    • Async Adapter : The async adapter is intended for development/testing and should not be used in production.

  • Redis Adapter : The Redis adapter requires users to provide a URL pointing to the Redis server. Additionally, a channel_prefix may be provided to avoid channel name collisions when using the same Redis server for multiple applications.

  • Postgres Adapter : The PostgreSQL adapter uses Active Record's connection pool, and thus the application's config/database.yml configuration, for its connection.

  • Next, we create a channel which defines our web socket by running

$rails g channel notifications which creates a .rb file and a JavaScript coffee file. The former handles our server-side logic while the later is our client-side JavaScript.

  • Next, we ask for the user's permission if he/she wants to receive notifications.

  • Now on the client-side, if the user accepts web push notifications, the user will receive a notification containing an event (like, comments, post etc) and then we'll prepend that event to the events in the activity log.

  • Since Public Lab is a production application and there is real-time updation of events, it is important to create jobs to handle the broadcasting of notifications. We do this by $ rails g job NotificationsBroadcast

The broadcast is being invoked by 'NotificationsChannelandaandabroadcast_to` method.

  • Lastly, I will perform the above job (NotificationsBroadcast) after an event has been successfully saved to our database.

Testing :

To test ActionCable, the default spec rails server will not work. Therefore, I will use action-cable-testing gem to facilitate testing actioncable connections in rspec.

UX Improvements:

- Back-end improvements :

  • Reducing the response time of the website :

The website has a lot of queries due to which it takes a lot of time to load any page. I will change the raw SQL queries to ActiveRecord rails queries which will reduce latency and optimize the queries.

Also, I noticed that a lot of queries have been repeated which further reduces the response time of a webpage. We can define instance variables or helper functions and use them instead of writing complicated queries.

I have given solutions to optimize two of the SQL queries which improves the response time of dashboard and used Solr and Sunspot to improve the search feature. I will also optimize queries for tags page, questions/answers page, events page, notes/wiki pages etc.

For example, I simplified a query for extracting hidden_nids and coauthor_nids in app/controllers/home_controller.rb .

The queries took 10ms to load with no data. Initially the queries were :

I have defined a function has_tag (name) in app/models/node.rb.

And replaced the above two queries with :

This reduced the response time of these queries to 4.9ms, which is almost half of the current response time.

Again, the same complicated query for extracting hidden_nids was repeated in app/controllers/application_controller.rb . The same solution could be applied here as well.

Next, I noticed that the search feature of the website takes a lot of time to return search results. The reason behind this is, every time we search for a word/post/users, it is looked up in the entire database without any optimization. (app/service/search_service.rb)

I would like to suggest "Search with Solr and Sunspot gem" to optimize the search feature. Solr is an OpenSource Search platform based on Apache Lucene and Sunspot is a ruby integration for solr and has excellent support for Rails. Following are the steps involved:

  • Install "sunspot_rails" gem and generate configuration file.
  • Searchable method for keyword search

The text here means that we're creating a field that's fulltext-searchable. It'll be broken apart into individual keywords, and then those keywords will be matched against the words in keyword search queries.

  • Run rake sunspot:reindex to get the existing data into solr.
  • Next, adding new action to the controller which will handle search queries.

  • Install "sunspot_solr" gem to run Solr server in development.
  • Start the Solr server by : bundle exec rake sunspot:solr:start
  • Faster CI Pipeline:

Problem:

Slow Travis ci pipeline:

Currently, running all the test suite takes around 15 mins, this is happening mainly because all the gems are getting installed for every PR.

Solution:

Travis CI configuration for public labs pipeline already uses Docker containers which help in coming up with the solution which is based on Docker APIs. Docker Volume, a feature provided by the Docker community which helps in persistent data of containers. Using Docker volumes we will store the gems inside persistent ruby gems container. So now, we don't have to install gems again and again. Then we can hook containers to ruby gems container using a docker-compose file. In the case of new gems being added in the Gemfile, we will do bundle install on the ruby gems container and that will install only the new added gem.

- Front-end improvements :

  • Accessibility :

As Public Lab is focusing on crowd-sourcing data, in my opinion, the website should be accessible to all kinds of users. Therefore, there must be special features on the website for specially abled people. It would not only make the website usable for the specially abled, but also create a sense of positivity among all other users. The World Wide Web Consortium (W3C)'s Web Accessibility Initiative (WAI) is trying to improve the accessibility of the World Wide Web (WWW or Web) for people with specific needs. These are the main areas to look at, regarding the accessibility features:

  • Web Content Accessibility (WCC)
  • Authoring Tools Accessibility (ATC)
  • User Agent Accessibility (UAA)

Proposed Features:

  • Provision of giving an "alt" attribute to the image uploads (WCC)

This would help the visually impaired users using screen readers to understand an on-page image. Moreover, if an image fails to load for some reason, this text will be displayed in place of the image.

  • Provision of giving captions to the uploaded videos (WCC)

Captions are a text form of audio information in video and animations. This feature will prove beneficial to the partially or completely hearing-impaired users. It will also make the videos understandable in places with loud noises, or where the sound has to turned off.

  • A special ToolBar for the partially visually-impaired users (UAA)

It includes the following features:

  • Background Color Option: There will be an option of changing the background color of the web pages to suit the needs of color blind people.
  • Text Formatting: Customizing the font style and line spacing of the web page.

Special Toolbar


  • Internationalization:

    Internationalization means designing and developing in a way that removes barriers to localization or international deployment. This accessibility feature will enable the website to be accepted worldwide, in various language, cultural and other requirements of users across the globe.

    Proposed Features:

    • Multi-lingual support for the website using i18n API. This provides an option to translate the webpage in any language as chosen by the user, thus making the website readable to all the users across the world.
    • Date and Time formatting. This would make the events and other calendar notifications come up in the local time-zone and date format, making it easy for the users to interpret and commit to the timelines.
  • Keyboard Shortcuts:

    Keyboard shortcuts help the users perform tasks quickly. This gives a convenient substitute to the users to perform these tasks. I plan to create the following shortcuts using JavaScript:

    • Submit a post/wiki/question/answer
    • Link to Profile page
    • Link to Dashboard
    • Search the website
    • Print current wiki onto your system

Timeline/Milestones:

Community Bonding Period : May 7 - May 26

  • Understand Existing Code base.
  • Discuss with the mentor about the best way to go about the implementation.

image description

image description

image description

Contributions to Public Lab:

Experience:

Technology stack :

Ruby on Rails, Bootstrap, React js, Python, Javascript, HTML, CSS, Java, C, C++, Shell scripting, Ocaml, Prolog, Mysql, Postgresql, Git

Operating Systems :

macOS, Windows, Ubuntu

Courses :

Software Development, Programming Languages, Operating Systems, Machine Learning, Networking, Visual Recognition, Automatic Speech Recognition, DBMS, Design and Analysis of Algorithms, Data structures

Projects :

A bridge between common people and lawyers. This website provides information about a case,e.g. what sections are enforced, what judgments have been passed etc. One can also hire lawyers here

  • Abstract text summarizing (Neural Network and Deep Learning).

A research project which focuses on abstractive summarization of a transcript using ANN(Artificial Neural network), RNN(Recurrent Neural Network) and LSTM(Long Short Term Memory networks)

Predicting the crime in the city according to the time and location using multi class softprob with XGBoost.

  • Blog (Ruby on Rails)

Implementing functionalities like user authentication, search bar, filtering etc.

GUI and OOPs implementation. Booking a cab depending on the minimum distance of the cab from the pickup point. Pickup and the destination points are set by clicking on the screen.

A multiplayer battleship game with GUI (pygame).

Teamwork:

"None of us is as smart as all of us." --Ken Blanchard

I have worked in teams of sizes varying from two to twenty. In my college, I have got to be a team member as well as a team manager of the events/projects. I have worked in many academic projects of courses like Programming Languages, Machine Learning, Software engineering etc. which usually have 3-4 members.

I have taken part in many hackathons like FlipKart grid, SIH, AngelHack etc where we had to work in collaboration.

I was the designing head of the TEDxIIITBangalore where I managed a team of 20 people working on different tasks.

I am also a part of Alumni Committee, Internet Committee and the head of Dance Club of my college, IIIT Bangalore.

Passion:

I have always been a technophile and an avid learner. I delved into programming at the age of 15. I have developed a lot of interest in open source community. It all began from designing creative web pages, and now I have explored various tools for full stack development. I worked on a range of domains varying from Deep Learning to Web Development. I have always wanted to make a change in the society and I understood that in this era of automation and the extent to which people are dependent on the technical boons, pursuing this field can be my way of making a change. And hence, the idea behind Public Lab is to to mark a change and improve the environmental conditions attracted me to contribute to the project.

Public Lab provides me an opportunity to interact with experienced mentors from different parts of the globe. I always wanted to contribute to live projects and Outreachy provides a platform to be a part of innovative and creative projects.

Audience:

Public Lab being an environmental research organization, the main audience of it would be environmentalists. Other than that, Public Lab also facilitates environmental justice issues by monitoring the environment and advising communities facing any such issue. This invites users from all sectors, be it from a MNC or from a small community. Thus, to facilitate the user experience, one must look from the perspective of all users. My plans for the implementing the notification system and UX improvements take into account all the users of Public Lab. I plan to make the UX efficient so that users find it easy to use and have an overall great experience using the website.

Commitment:

I'm confident that with this plan and with the right guidance from the mentors on how to proceed and how they want to implement the above features, I can improve Public Lab and make significant contributions in both Backend and Frontend. I will be fully devoted to the organization as I do not have any other commitments to work on in the timeframe of GSoC programme. I shall be devoting 40-45 hours per week.

Public Lab provides a very open and encouraging work culture. Through Public Lab, not only will I gain knowledge but also it will be a delightful experience and a matter of honour to be a part of such a renowned organization while working on such a noble cause.


4 Comments

And what is web Push Server? And how Action Cable will be used along with it. I am just curious is this any other way to solve this problem? I guess you mixed the push notification and the use of action cable for notification because as far as I know you can't make push notification using Action Cable and for push notification, we need push server as you explained in the above diagram. And also since action cable makes a socket connection when the website is loaded but the push notification works even when the website is opened. What do you think?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


I planned to implement realtime notifications using ActionCable and Web Push Notifications using notification API as provided by mozilla or W3C. I think I wasn't able to make a clear distinction between the two. I'll update my proposal. Thank you @namangupta!!

Reply to this comment...


@warren @bansal_sidharth2996 @gauravano Kindly review my GSoC proposal.

Reply to this comment...


We are really sorry that we could not review your proposal here. But congratulations on your selection. It will be great if you can add planning issue/project / milestone and direct us there for further conversation on Github. Thanks

Reply to this comment...


Login to comment.