===Profile
Full Name: Drishya Ramesh
Email: drishyarameshpk@gmail.com
University: Amrita Vishwa Vidyapeetham
IRC Username: drishya8
Gerrit Profile: [[ https://gerrit.wikimedia.org/r/#/q/drishya | drishya ]]
MediaWiki Username: [[ https://phabricator.wikimedia.org/p/DrishyaR/ | DrishyaR ]]
Blog: https://magicalme8.wordpress.com
Time zone: UTC +5:30 (IST - India)
Location: Kerala, India
Typical Working Hours: 5:00pm to 11:00pm (workdays) and 10:00am to 8:00pm (weekends)
===Synopsis:
The Cargo Extension in MediaWiki provides a platform for users to store and query the data which is contained within template calls, as and when required. The ViewData Special Page in the Cargo Extension serves the purpose of being a user interface for a user to run queries related to Cargo Extension. This project aims at improving the Special:ViewData Page interface by implementing features like autocompletion, validation and adding format-based inputs, creating a much more user-friendly interface.
===Deliverables:
1. Redesign and rename the current UI of Special:ViewData to Special:CargoQuery.
2. Support for dropdown and autocompletion in Cargo query fields.
3. Testing of the new UI through unit testing and E2E testing.
4. Iterate the UI/UX further through conducting a usability study across the Wikimedia Community.
5. Document the new features.
===Features and Implementation:
=====1. Enable support for Autocompletion and dropdown for the Cargo query fields
Add support for autocompletion based inputs by implementing select forms for the input fields in Special:ViewData page. This will allow a user to query data with the available options listed (dropdowns) and thus, provide a user-friendly interface. This feature will be implemented using the select2.js library.
```
<select class="table" name="tables">
<option value="T1">Table1</option>
...
<option value="T5">Table5</option>
</select>
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.table').select2();
});
```
//**Sample code snippet:** This is an example of the implementation of autocompletion feature//
=====2. Enable dynamic updation of Special:DataView Page
The Special:DataView Page should dynamically update itself in accordance with the values entered by the user. For example, the “Fields” option in the Special Page should automatically update itself, according to the table selected by the user in the “Table” option, such that it shows only the fields of the selected table. This can be done using Ajax as depicted in the following flowchart :
{F28598434}
An API will be implemented on the extension to parse the request and generate appropriate responses.
=====3. Implement Data Validation
Data Validation is required to ensure that user-entered values are of the right format and type. Currently, the fields in Special:ViewData page accepts any type and format of input from users and does not check for its validity. It should also be implemented dynamically such that the user gets an immediate alert or pop-up messages in case of incorrect entry (before submitting the query). This can be implemented by using step-by-step validation techniques in validators. For example, the only type of input for the field “Limit” in the Special Page is natural numbers and thus the user-entered value can be tested against a set of conditions for the type.
So there are multiple levels of validation:
1. HTML form validation (simple type validation on HTML form elements).
2. Frontend validation - validation on the fly before the data gets POSTed to the backend.
3. Backend validation - sanitation and further validation of the data before the actual query is run on the server infrastructure (database).
{F28598437}
//**Fig 1.** Data Validation//
=====4. Redesign the UI to include additional features and implement renaming of the Page
Currently, the Special:ViewData Page contains the bare minimum input fields with corresponding labels. The user-friendliness can be improved. This could be achieved by adding help texts for input fields and labels giving information about the type, format of text which should be entered. Further, tooltips and checkboxes can also be implemented on icons. This will further help in reducing incorrect data entries as well as providing a better user experience. Moreover, the page can also have a help icon redirecting to information on Cargo extension. These changes can be implemented by making the necessary changes to the displayInputForm function under the CargoViewData class.
The page should also be renamed from Special:ViewData to Special:CargoQuery
I plan to do the following:
1. Add help texts for input fields and labels giving information about the type, format of text which should be entered.
2. Implement tooltips and checkboxes on icons.
3. Add a help icon redirecting to information on Cargo extension.
{F28598439}
//**Fig 2.** Redesigned UI//
===Timeline:
| **TimeLine** |** MileStones** |
| May 6th - May 27th | **Community Bonding period:** Install all the requirements and get familiarised with the codebase by solving issues and bugs related to the Cargo extension. Remain active on IRC and Gerrit, contact and communicate regularly with mentors and the Wikimedia community. |
| May 28th - June 6th | **Add support for Autocompletion feature:** Develop the necessary code to implement the autocompletion feature such that the input fields in the Special Page automatically completes the query. |
| June 7th - June 13th | **Implement Dropdown menus:** Develop the necessary code to add the dropdown feature to the input fields in the Special:ViewData Page such that it compliments the auto-completion feature. |
| June 14th - June 23rd | **Execute Dynamic Updation of the Page: **Develop the necessary code which uses Ajax to dynamically update the page so that the fields can change its attributes in accordance with the values entered by the user. |
| June 24th - June 28th | **PHASE I EVALUATION** |
| June 29th - July 3rd | **Provide refinements to Phase 1 implementations:** Check for the expandability of the Phase 1 implementations. Ensure its working for larger set of data patterns without failures. |
| July 4th - July 14th | **Implement Data Validation:** Write a code for checking different sets of data; to ensure whether it has a valid format and type. |
| July 15th - July 21st | **Redesign the UI:** Start developing the code for improvising changes within the interface: to add more user-friendly features like icons and tooltips. |
| July 22nd - July 26th | **PHASE II EVALUATION** |
| July 27th - July 31st | **Improvise Phase 2 Implementations : **Check for the expandability of Phase 2 implementations and add features and fix bugs such that it satisfies all conditions. |
| Aug 1st - Aug 15th | **Continue Redesigning the UI of Special:ViewData:** Add other features like help text for the input fields and also perform renaming of the page to Special:CargoQuery. |
| Aug 16th - Aug 22th | **Buffer Time: **Test rigorously for bugs and issues using unit testing (in xUnit) and/or E2E testing in the interface and fix them. Provide extensive documentation for all the implementation and make sure it is done thoroughly for the code. |
| Aug 23rd - Aug 25th |** Final Report and Project Summary Submission** |
| Aug 26th - Sept 2nd | **PHASE III / FINAL EVALUATIONS** |
===About Me:
I am a freshman Computer Science Engineering student from Amrita Vishwa Vidyapeetham, Kerala, India. I am part of an Open Source community in my University - FOSS@Amrita and was introduced to MediaWiki via the club through a Wikimedia Contribution Drive conducted in August 2018 [1]. I have been contributing to MediaWiki since the last few months and have got a few patch sets merged into the code base. I love contributing to Open Source projects and enjoy working on web development .
[1] https://www.mediawiki.org/wiki/Wikimedia_Contribution_Drive_amFOSS
Contributions to MediaWiki:
- Microtask: T217517.
Other Successful Contributions :
- Bug T216914
- Bug T187037
- Bug T201491
=====Skills:
Web Development : PHP, JS, HTML/CSS, MySQL
Operating Systems: Linux, Windows
Version Control System: Git, Gerrit
===GSoC Information
=====Any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
I will be attending my end-semester exams for approx. 2 weeks, from 6th May to 21st May, which will be during the community bonding period. Hence, I will not be able to remain active during this period. However, I do not have any other commitments for the remaining duration of the program and will be able to work for 40+ hours per week.
=====Applying to any other organisation this year?
No, I’m planning to apply for GSoC’19 through Wikimedia only.
=====Applying for both Outreachy and GSoC this year?
No, I’m planning to apply for GSoC’19 only.
=====What does making this project happen mean to you?
As a novice to Open Source, I’m thrilled to be part of the Wikimedia Foundation this year. I am excited to work on this project as it would be a great opportunity to contribute to the movement and work on programs used by numerous people on a daily basis. I feel it would be an amazing learning experience as well as one which is utilitarian.