Page MenuHomePhabricator

GSoC-2022 / Outreachy-24 - Project Proposal : Edit Request Wizard
Open, Needs TriagePublic

Assigned To
Authored By
abhigya_pandey
Apr 4 2022, 8:58 PM
Referenced Files
F35058167: successful.png
Apr 19 2022, 1:01 PM
F35058147: home.png
Apr 19 2022, 1:01 PM
F35058153: invalidSource.png
Apr 19 2022, 1:01 PM
F35058151: selectSource.png
Apr 19 2022, 1:01 PM
F35058145: Group 1 (1).png
Apr 19 2022, 1:01 PM
F35058149: invalidQuote1.png
Apr 19 2022, 1:01 PM
F35058160: quoteFromSource.png
Apr 19 2022, 1:01 PM

Description

Profile Information

  • Name: Abhigya Pandey
  • Email : abhigya.19602@knit.ac.in
  • IRC Nick: abhigya
  • Gerrit: Abhigya Pandey
  • GitHub : Mortal303
  • MediaWiki Username: Abhigya Pandey
  • Zulip : Abhigya Pandey
  • LinkedIn : Abhigya Pandey
  • Location: Sultanpur, Uttar Pradesh, India
  • Timezone: IST -India(UTC + 5:30)
  • Working hours : I will be working from 9 AM to 8 PM on weekdays and 11 AM to 4 PM on weekends. All the timings are in Indian Standard Time(IST).

Synopsis

Short summary describing your project and how it will benefit Wikimedia projects
Wikipedia is the most successful online free encyclopedia that offers every individual deep down into a giant sea of knowledge. It is the consistent hard work of more than millions of editors and trillions of edits which continues to fascinate every e-learner’s attention. For new users to edit pages with some degree of protections (e.g. semi-protected, protected,extended-confirmed protection, etc.) have to submit an edit request indicating the valid changes with a cited reliable source. The present process may be tedious with the vast number of instructions and barriers. The goal of this project is to create a step-by-step form to guide beginners from all backgrounds submit a Wikipedia Edit Request in a more user-friendly way maintaining Wikipedia's verification policies and other validations.
Major goals
● Work on Wikipedia user script to show a form for submitting a Wikipedia edit request included with
high-quality guidance and error messages, suitable for use by beginners.
● Build a back end server for calling user scripts, checking websites for validation and other purposes.
Stretch goals
● Making of an interface to show these edit requests to experienced editors as they read the article
● Making of an interface for the general public to express feedback on these edit requests (as a "safety valve")
● Creation of moderate interfaces.
● Designing interfaces to supervise the process (for example, to see URLs that have recently been disallowed by an automated process)

Implementation Details

The aim of this project is to create a step-by-step form to guide beginners submit a Wikipedia Edit Request in a more user-friendly way maintaining Wikipedia's verification policies and other validations.
NOTE: This is a predicted draft of the future Edit Request Wizard. Potential changes need to be done according to mentor guidance.
● Looks and feel of Edit Request Wizard (Link to Edit Request Wizard)

home.png (1×1 px, 102 KB)

● Flowchart
Group 1 (1).png (1×1 px, 41 KB)

● Technologies used
Whole source code is created using Handlebars, CSS and JavaScript in frontend, NodeJS in backend and deployed at Heroku cloud platform.
● Entering A Quote
If the editor enters a null string or string which is not present in source, the editor will receive an error saying "Not a Valid Quote" on submitting the form.
invalidQuote1.png (1×1 px, 109 KB)

Function to validate Quote is in ./public/js/app/index.js file.

index.js

//function to validate quote
async function validateTextarea() {
return !(/^\s*$/.test($('#quote').val()));
}

● Selecting A Source
Once a valid Quote is entered, the editor will be asked to select a source type from which the quote belongs. Then some input fields will appear according to the editor's selected source type. It is mandatory to provide links to sources by the
editor.

selectSource.png (1×1 px, 106 KB)

If the provided link does not exist or is broken then the editor will receive an error message saying "Not a Valid Source" on submitting the form.
invalidSource.png (1×1 px, 115 KB)

The API call which validates the URL of a source is in ./public/js/app/index.js and ./api/resources/domain/domain.controller.js.

index.js

//function to validate quote
async function validateTextarea() {
return !(/^\s*$/.test($('#quote').val()));
}
//main function for all validations
async function validateAndRequest() {
clear();
var data = {
url: $(".url").val(),
quote: $("#quote").val()
}
if (await validateTextarea()) {
//api call to validate source
api.source.validateUrl(
data,
function (res) {
//success
if (res.code == 200) {
//api call to validate if quote is from source
} else {
showErr({
message: "Not a Valid Source"
});
}
},
function (error) {
//failure
console.log(error);
showErr(error);
}
)
} else {
showErr({
message: "Not a Valid Quote"
});
}
}

domain.controller.js

/**
* Api Domain Controller Handler
*/
const fetch = require('node-fetch');
const cheerio = require("cheerio");
//Function to validate if a source exist or not
var validateUrl = async function (req, res, next) {
try {
fetch(req.body.url)
.then((response) => {
return res.status(200).json({
code: response.status
})
})
.catch((error) => {
return res.status(200).json({
code: 404
})
});
} catch (error) {
console.log("error");
return res.status(409).json({
message: "Something Went Wrong"
})
}
}

● Validating The Quote
Once a valid Quote and Source is entered the quote will be checked if the quote belongs to that particular source or not. If the provided quote does not exist in the given source then the editor will receive an error message saying "Quote Is Not From Source" on submitting the form.

quoteFromSource.png (1×1 px, 112 KB)

The API call which validates the URL of a source is written in ./public/js/app/index.js and ./api/resources/domain/domain.controller.js and validation is done using cheerio web scraper.

index.js

//main function for all validations
async function validateAndRequest() {
clear();
var data = {
url: $(".url").val(),
quote: $("#quote").val()
}
if (await validateTextarea()) {
//api call to validate source
api.source.validateUrl(
data,
function (res) {
//success
if (res.code == 200) {
//api call to validate if quote is from source
api.source.validateSource(
data,
function (res) {
//success
} },
function (err) {
//failure
showErr(err);
}
)
} else {
showErr({
message: "Not a Valid Source"
});
}
},
function (error) {
//failure
console.log(error);
showErr(error);
}
)
} else {
showErr({
message: "Not a Valid Quote"
});
}
}

domain.controller.js

//Function to validate if given quote is from given source or not
var validateSource = async function (req, res, next) {
var quote = req.body.quote;
var url = req.body.url;
const rawData = await getRawData(url);
const $ = cheerio.load(rawData);
var allText = $('html').text();
allText = allText.replace(/(\r\n|\n|\r)/gm, "");
allText = allText.replace(/\s/g,'');
quote = quote.replace(/(\r\n|\n|\r)/gm, "");
quote = quote.replace(/\s/g,'');
if (allText.includes(quote)) {
return res.status(200).json({
success: true,
})
} else {
return res.status(409).json({
success: false,
message: "Quote Is Not From Source"
})
}
}
module.exports.validateUrl = validateUrl;
module.exports.submitEditRequest = submitEditRequest;
module.exports.validateSource = validateSource;

● Finally if all the validations passed edit request will be submitted successfully.

successful.png (1×1 px, 117 KB)

Deliverables

● Designed Mock-up for the form of ‘Edit Request Wizard’ using Paint/Figma.
● Implemented validation check on the reliable source area.
● Enabled the feature of displaying feedback for obviously invalid quotes.
● URL validation process in the web form and developing its backend.
● Designed the user script of the form for submitting a Wikimedia edit request along with the frontend and backend behind its high quality guidance and error messages.
● Responsive web page design.
● Stretch goals (If time allows)-

  1. Implementing an interface to show these edit requests to experienced editors as they read the article and interface for the general public to express feedback on these edit requests.
  2. Making of an interface for the general public to express feedback on these edit requests (as a "safety valve")
  3. Creation of moderate interfaces.
  4. Designing interfaces to supervise the process (for example, to see URLs that have recently been disallowed by an automated process)

Additional
● The frontend technologies to be used are Wikimedia Object-Oriented User Interface (OOUI), HTML5, CSS3, JavaScript and the backend technologies to be used are Python/JavaScript.
● I plan to start a blog where I will write about my work on the project biweekly.
● I will continue to maintain the Edit Request Wizard after the GSoC/Outreachy program.

Timeline

Week NoTimelineMilestones
Community bonding period before the start of actual coding.May 21 - May 29Get to know the Community more, bond with mentors, admins and developers and familiarize with codebase which help me to become absolutely clear about my future goals and final implementations.
1May 30 - Jun 4Discussing rules and policies on reliable resources in detail with mentors. Elicitation, finalizing UI designs (using paint / figma), creation of repository and setting up the code base.
Weekend 1Jun 5
Jun 6Feedback 1
2Jun 6 - Jun 11Developing the frontend of the Edit Request Wizard (using HTML, CSS and JavaScript) with all necessary functionality.
Weekend 2Jun 12Submission of blog prompt: "Introduce yourself".
3Jun 13 - Jun 18Adding URL validation part and developing API for the same (using JavaScript / Python ).
Weekend 3Jun 19
4Jun 20 - Jun 25Fixing loose ends and testing the API extensively for the codebase.
Weekend 4Jun 26Submission of blog prompt: "Everybody struggles".
5Jun 27 - Jul 2Implementing the form to input the quote from source and discussing the UI for it (using JavaScript / Python ).
Weekend 5Jul 3
Jul 4Feedback 2
6Jul 4 - Jul 9Adding the quote validation API to the main code and fixing some bugs.
Weekend 6Jul 10Submission of blog prompt: "Think about your audience".
7Jul 11 - Jul 16Finalizing the frontend of the form for submitting a Wikimedia edit request along with its high quality guidance and error messages (using HTML, CSS, JavaScript / Python).
Weekend 7Jul 17
8Jul 18 - 23 JulAdding the quality guidance and error messages generating API’s to the main code.
Weekend 8Jul 24Submission of mid-point project progress blog post.
9Jul 25 - Jul 30Optimization and designing frontend for different screen sizes i.e making better responsive design.
Weekend 9Jul 31
10Aug 1- Aug 6Testing the entire project, bug fixing, writing documentation along with updating appropriate guides.
Weekend 10Aug 7Submission of blog prompt: "Career opportunities".
11Aug 8 - Aug 13Code cleanup for submission, complete the project , freeze the code and seek out the mentors for any further improvements or enhancements.
Weekend 11Aug 14Work on Resume.
12Aug 15 - Aug 20Work on stretch goals (If time allows)-Designing Mock-up (using paint / figma) and working on frontend for interface to show these edit requests to experienced editors.
Weekend 12Aug 21
Aug 22Feedback 3 and Submission of Final project progress blog post.
Last weekAug 22 - Aug 25Last week's buffer for Unpredictable delays.
Aug 26Outreachy Internship ends.

Participation

● I will be available within 9:00 AM to ~11:00 PM IST (UTC + 5:30) for communicating through my Email: abhigya.19602@knit.ac.in .
● I’ll be creating a repository on GitHub with a master and a development branch. The code will be pushed to the development branch periodically and merged with the master branch after reviewing and testing.
● I’ll be active on the libera.chat IRC channel and will be asking any general queries regarding the Edit Request Wizard there.
● I can be contacted at any time via Wikimedia's Zulip server.
● Biweekly reports on the working of the project will be published by me (platform will be decided after discussing with mentors).
● The bugs, subtasks and community review will be managed on Phabricator.

About Me

  • Education:

I’m a pre-final year student pursuing a Bachelor’s Degree in Information Technology at Kamla Nehru Institute of Technology, Sultanpur (U.P), INDIA. I've been a member of my college’s coding and development club from the 1st year of my college. I completed my schooling at BBS Intercollege, Allahabad. There I have studied Computer Science from 9th standard to Intermediate (4 years) in school life. I have been practicing coding concepts like data structures and algorithms for the past 2 years and hold institute rank 13 out of 1145 candidates (GeeksForGeeks profile- Abhigya).

  • Where did you hear about GSoC?

I heard about GSoC from YouTube. Then I researched more about it at GSOC official website.

  • What other commitments do you have during the course of this program?

I have my semester exams completed till 10 June. After that I don't have any other commitments during the internship period. So, my only priority this summer would be to work on this project and give my best as possible.

  • 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)?

Yes, I decided to apply for both the programs in the same organization (Wikimedia Foundation) and under the same mentors @Enterprisey, @Firefly, @SD0001 in the project ‘Edit Request Wizard’.

  • What will working on this project mean to you?

This project means a lot to me because editors play a major role in maintaining the legacy of supreme Wikipedia. The project guides new editors to do their first edit which means it indirectly helps more than millions of e-learners like me who finds Wikipedia as one of the trusted and free source to grow overall knowledge and achieve their dream. Wikimedia is the first organization in open source in which I’m contributing and I’m highly impressed with the work culture, events and its community and want to contribute more.

Past Experience

  • Wikimedia

I have been a part of the Wikimedia community since 6 January 2022. I participated in Wikimedia’s event ‘The Data Reuse Days’ series of online gatherings that took place from March 14th to 24th, 2022. I am contributing to the Edit Request Wizard from February 2022 and I have also worked on some major and minor edits along with the microtasks of Edit Request Wizard.

I have been studying Computer Science for over seven years (since my 9th standard) and I had interned in GreatLoop.Pvt.Ltd. for 4 months (from 15 December 2021 to 15 March 2022) which is a service based startup. During my
internship I made a Service based website for the company ‘Ferrum’. There I extensively work with HTML, CSS, JavaScript, NodeJS and Mysql.
I have made few projects which include above technologies: -

  1. Brain Quiz

Goal of this Project is to provide quality questions of subjects related to development in one place to students to evaluate their development knowledge. This project is created using HTML, CSS, Javascript and MYSQL databases.
During working on this project, I have learned a lot like how to design a project, execute discussions on it, etc. I have also learnt to write clean code so that it can be readable by other developers.

  1. Traveling page (It’s a responsive page with little animation)

I have made this page to have strong knowledge in CSS. It is a simple responsive web page based on tourist themes.

  1. Paint App

I have worked on this website during my training-based internship. Users can create paint boxes each time of different colors and delete them by double clicking on them. his project is created using HTML, CSS, Javascript, Bootstrap and Node.JS.

Event Timeline

Hi! I am Srishti, one of the org admins - it's great to see your interest in applying to GSoC with Wikimedia! You can safely ignore this message if you have already followed our participants' guide. As you develop your proposal, we want to ensure that you follow the application process steps: https://www.mediawiki.org/wiki/Google_Summer_of_Code/Participants#Application_process_steps, primarily communicate with project mentors, integrate their feedback in your proposal, adhere to the guidelines around proposal submission, contribute to microtasks, etc. Let us know if there are any questions!

And, if you are applying to Outreachy too, remember to follow the guidelines here https://www.mediawiki.org/wiki/Outreachy/Participants.

Thanks, I will make sure to follow all the guidelines.

As the GSoC deadline is soon approaching in less than 24 hours (April 19, 2022, 18:00 UTC), please ensure that the information in your proposal on Phabricator is complete and you have already submitted it on the Google's program website in the recommended format. When you have done so, please move your proposal here on the Phabricator workboard https://phabricator.wikimedia.org/project/board/5716/ from "Proposals in Progress" to the "Proposals Submitted' column by simply dragging it. Let us know if you have any questions.