Page MenuHomePhabricator

Develop a web dashboard to help inventory zarcillo database
Closed, DeclinedPublic

Description

Profile Information

Name: Palak Thapar
IRC nickname: palak199
Location: India
Typical working hours: 1700hrs- 2300hrs IST

Web Profile

Wordpress: https://codingtrickster.wordpress.com/

Synopsis

Short summary describing your project and how it will benefit Wikimedia projects
The current tool- tendril is only used to read from the mariadb instances. All the create, update and delete operations have to be performed on the database using SQL.

Therefore, there is a need for a web dashboard which can help perform all the CRUD(Create, Read, Update and Delete) operations from the zarcillo database.
Additionally, to ease the process of querying from external services there is a need of developing APIs
The web dashboard would be developed with the following technologies:

  1. Django framework
  1. Mariadb
  1. React

There could be two options:

  1. To separate out the Frontend (React) and Backend (Django)
  2. To use a hybrid approach

After reading various articles, blogs and use cases, I think the hybrid approach would best suit this project’s requirements for the following reasons:

Server Side Rendering: The Django’s templating would be used to render the Javascript code compiled using Webpack.

Client Side Routing: The React router would be used to handle the routing, thereby reducing the load on the server.

Easy to maintain: In comparison to completely decoupled approach which would require highly javascript and python developers to maintain frontend and backend respectively, following the hybrid approach would let even the beginners maintain and contribute in future.

We can use either API endpoints to query data or pass data directly to the template. I would prefer following the former approach for the following reasons:

Faster Rendering: The initial page would be rendered fast without any data (or optionally with a small subset to start), and then use API like axios to fetch the data after the page loads—or on some user action. This would boost the performance and usability of the dashboard.

Reusability: The scope of the project not only includes creating a dashboard but also APIs to query data from external sources. Django's Rest Framework can handle both the tasks seamlessly.

The following image shows the basic app architecture

1_lAMsvtB6afHwTQYCNM1xvw-removebg (1) (1).png (1×2 px, 614 KB)

The immediate use cases of this project would be:

  1. Hassle free and quick overview of the database
  1. Less error prone and easier edits to database

Possible Mentor(s)
Jaime Crespo and Manuel Arostegui

Have you contacted your mentors already?
Yes, I have been in contact with the mentors and have updated them about my project ideas

Deliverables

Describe the timeline of your work with deadlines and milestones, broken down week by week. Make sure to include time you are planning to allocate for investigation, coding, deploying, testing and documentation
I plan to follow the agile software development lifecycle methodology throughout. Based on that I’ ll be taking one operation in one sprint, get its feedback, improve upon it before moving to next.

WeekDateTasks plannedDeliverables
18 May- 6 June<br>(community bonding period)CONCEPT AND INCEPTION PHASE<br>Get to know about the typical workflow of Wikimedia<br>Present the planned mockups and architecture of the web app and get feedback on it<br>Finalise upon the features and set their priority accordingly<br>Develop a deep understanding about zarcillo dbMockup of the webapp<br>Final db design based on existing zarcillo db with improvements (if any)<br>Blogs about the app and my experience
Week 17- 13 JuneSETUP THE PROJECT<br>Make the necessary folders and installation of necessary packagesBasic skeleton of webapp
Week 214- 20 JuneDATABASE MODELS<br>Connect to database<br>Make models with primary keys, foreign keys and indexes<br>Models and tables
Week 321- 24 JuneITERATION PHASE<br>Write blog about week1 and 2<br>Get feedback on database models, and make improvements accordinglyImprovised Database models<br>Blog
25- 27 JuneAPIs <br>Use the Django REST Framework to develop APIs for CRUD operations <br>Test them using POSTMAN<br>Documentation<br>Write elaborate documentation using POSTMAN about the use of APIs <br>Write documentation about database models using markdownFully tested and functional APIs<br>Documentation
Week 428- 4 JulyDEVELOP THE BASIC REACT FRONTEND<br>In this week, I plan to start working on the dashboard’s UI with following components:<br> Header<br> Footer<br> Tables ( to display data fetched from API)<br>READ OPERATION<br>Fetch the data from API and populate the table in the dashboard with itBasic UI of the Web app<br>Data Read functionality
Week 55- 7 JulyITERATION PHASE <br>Write blog about Week 3 and 4<br>Get feedback on UI and make improvements accordinglyBlog<br>Improved UI
8- 11 JulyWRITE OPERATION<br>Develop a modal based form<br>Display success/failure message<br>Data WRITE operation to the database from the dashboard
Week 612- 16 JulyEVALUATION
12- 18 JulyEDIT AND DELETE OPERATION<br>Develop the Edit and Delete feature<br>For the edit operation a modal with form will open up pre populated with existing values<br>Alert the user before deletingEdit and Delete feature on dashboard
Week 719- 22 JulyITERATION PHASE<br>Finish the pending tasks(if any)<br>Get feedback and improviseMinimum viable product
23 - 25 JulyBLOG<br>Write blog for week 5 and 6<br>DOCUMENTATION<br>Document the CRUD operations of web appBlog<br>documentation
Week 826 July- 1 AugustUNIT TESTS<br>Write unit tests for the web app<br>BUG FIXING <br>Find and resolve bugs in the front end and back end<br>BlogUnit tests<br>Blog<br>Updated and improved version of web app
Week 92 - 8 AugustEXTENDED TASKS<br>Develop features like pagination, add tables from dashboard, filters and search option in navbar etcAdditional features on the webapp
<br>Week 109 - 11 AugustITERATION PHASE<br>Seek feedback on APIs <br>Make corresponding improvementsImproved APIs
12 - 16 AugustTESTING PHASE<br>Rigorous testing of the webapp and APIS<br>Write final report<br>Write blogs and documentationFinal report<br>Updated Documentation<br>Web app<br>APIs
Final week16 - 23 AugustFINAL SUBMISSIONweb app<br>APIs
23 - 30 AugustMENTORS SUBMIT FINAL STUDENT SUBMISSIONS-
31 AugustRESULTS ANNOUNCED-

Participation

Describe how you plan to communicate progress and ask for help, where you plan to publish your source code, etc

  • Will be available on Zulip or IRC or google hangouts during working hours
  • Will be available on email outside working hours
  • Will be writing biweekly blogs on medium documenting the process, my experience and progress made.
  • Will be publishing my code on Github
  • Every week I’ll be updating the mentors on following:
What I plan to do this week
What I did in the previous week
What is blocking my work

About Me

Tell us about a few:
Your education (completed or in progress)
I am currently in the Pre final year of my under graduation degree in Computer Science and Engineering.

How did you hear about this program?
Around two years ago, I came to know about OSS. My college seniors took part in GSoC and this motivated me to
participate and contribute to it.

Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
The classes will commence in the first week of August, by then I would have completed major portion of my project, the leftover part can easily be completed even with the college classes.
Devoting a summer to GSoC has been my dream from past year, hence this summer I haven’t planned any vacation. Due to the ongoing situation of Covid, my college conducts classes in online mode with reduced number of hours. The exams shall most probably end in the first week of June. So I can easily devote 25-30 hours per week working on the project.

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 am planning to apply to both the programs under wikimedia itself. The projects match my tech skills and interest me to the most. My initial application for outreachy has gt appoved. However, I am focussing on GSoC project more, as the time commitment for outreachy is longer and I might not be able to deliver what I promise in outreachy's project. This year GSoC's duration has reduced and be easily managed along with my college.

What does making this project happen mean to you?

*Imagine a world in which every single person on the planet is given free access to the sum of all human knowledge".*
This objective of wikimedia resonates with the motto of my life - knowledge is wasted if it is not used, shared and applied.
Therefore I wish to use and apply my technical knowledge to help contribute to a community with so influencing vision. I'll try my level best contributing to this project and making sure it happens. Making this project happen would help me make my share for the better good of the community.

Past Experience

  • Describe any relevant projects that you've worked on previously and what knowledge you gained from working on them.

Previously I have worked on following personal projects-

PlanetCaretakers- A web app that helps people contribute to sustainable development

Technologies used- Django, SQLite, Bootstrap, ChartJs and IoT. This project was built during NASA spaceapps Challenge and received Global Nomination.

http://planetcaretakers.pythonanywhere.com/

Key takeaways-

  • work with strict time boundaries and team work.
  • To host Django based project

CustomerTracker- A web app that helps shopkeeper to remotely track sales of various products and also keep track of visitor count

Technologies used- Django, openCV, SQLite

Github repo: https://github.com/she-coders/Hackathon-1.0/tree/main/she-coders/django-dashboard-corona-dark

Radio Station- A webapp to manage activities of Radio station like the events conducted, upcoming events, podcasts etc

Technologies used- Django, MySQL

Github repo:https://github.com/palak199/FM-website

Key takeaways-

  • To design a database and implement it for real usage.

Ristorante- SPA to manage the booking and show the menu of any restaurant.

Technologies used- React

https://github.com/palak199/Ristorante

Key takeaways

  • The use FLUX architecture to develop SPA
  • Describe any open source projects you have contributed to as a user and contributor (include links).

Django based web app https://github.com/garg3133/JagratiWebApp/

Laravel React based College web site https://github.com/TNP-GNDEC/TNP-WEBSITE

Django based web app https://github.com/Real-DeviLs/Jeevay-Panjab

Contributions to Creative commons https://github.com/palak199?tab=overview&from=2020-12-01&to=2020-12-31&org=creativecommons

  • You must have written a feature or bugfix for a Wikimedia project during the application phase (see the section about microtasks in the application process steps), please link to it here. We give strong preference to candidates who have done so.

Microtasks related to this project:

https://phabricator.wikimedia.org/T253959 (not merged yet)

https://phabricator.wikimedia.org/T268258 (not merged yet)

Besides this, I contributed to other issues of WMF as well:
https://phabricator.wikimedia.org/T279363 (merged)

https://phabricator.wikimedia.org/T277407 (merged)

https://phabricator.wikimedia.org/T279325 (not merged yet)

https://phabricator.wikimedia.org/T279326 (not merged yet)

These contributions have helped me gain an insight into how the git/gerrit workflow is like and how communication takes place on phabricator.

Event Timeline

Thank you, I will find some time to read it and try to provide useful feedback. As a tip- don't spend much time on "styling" in phabricator- as long as it is readable it is ok. This is just supposed to be a draft until you submit the definitive one to Google.

Thank you again.

Hi @jcrespo and @Marostegui,
Thankyou so much for providing the feedback even before asking :) Do let me about the changes and improvements.

Hi @jcrespo, I have left
Add any other relevant information such as UI mockups, references to related projects, a link to your proof of concept code, etc
this as WIP.
Please suggest if I should prepare some mockups for the web app? or add something else to this question.

I will be giving a few ideas on several comments. As a reminder, this is just feedback, your the person that will be finally deciding on your own proposal.

  • Please change the "title" of the proposal (the name of the ticket here) to something more specific. I believe, for example, that the cli part of the original title does not apply here. Feel free to rename it to something more specific to what you are working on. If it has the same as the original, generic name I won't be able to make it apart from other proposals. :-)
  • Mentors are based on Europe timezones FYI (in case that helps scheduling meeting times). Outside of meeting times, you will be able to work at your own desired schedule. We at Wikimedia also have flexible hours. We won't expect you to be available at all times, and definitely not outside of working hours. I think we could setup weekly "stand ups", some time bands were to ask questions on IRC in real time, and the rest of the time, work asyncrounously via Zulip/Gerrit/email/whatever, etc.
  • I like that you defined a reasonable amount of time for analysis/setup/etc. as this normally takes more time than expected. Our development environment is a bit peculiar so it will take a bit to get used to.
  • I also liked that you thought about the middle milestone to have something to "ship" by then. I also liked that you let advanced stuff by the end (api) so we can drop it from scope if we want to spending refine other more important features.
  • I also liked time scheduled for testing

I will try to get the microtask going so, if possible, we can merge it before the limit date for proposals. Apologies for delays, we have lots of students and questions and one mentor less this week.

Hi @jcrespo, I have left
Add any other relevant information such as UI mockups, references to related projects, a link to your proof of concept code, etc
this as WIP.
Please suggest if I should prepare some mockups for the web app? or add something else to this question.

I know this is a purely a frontend project, but we (mentors) being on the backend (databases and backups), aand this not being intended for wide public usage (only internal usage), UI is not a huge concern. I wouldn't spend time on mockups at this stage. We may want to develop some crude ones, but at a later stage (design).

Palak199 renamed this task from Develop a web dashboard or a command line tool to help inventory and/or monitor database and backup objects to Develop a web dashboard to help inventory zarcillo database.Mar 31 2021, 1:57 PM
Palak199 updated the task description. (Show Details)

Thanks for filling this @Palak199 with such a good level of detail.
You might want to give DATABASE MODELS<br>- Connect to database<br>- Make models with primary keys, foreign keys and indexes a few more days, from experience, it will probably take a bit more than 2 days to design and be comfortable with the DB design. Especially if you'd be waiting for feedback about it.

hi @Marostegui,

Thanks for filling this @Palak199 with such a good level of detail.

I am glad you found it elaborate. Thankyou for reviewing

You might want to give DATABASE MODELS<br>- Connect to database<br>- Make models with primary keys, foreign keys and indexes a few more days, from experience, it will probably take a bit more than 2 days to design and be comfortable with the DB design. Especially if you'd be waiting for feedback about it.

What if I modify it this way:

28-30 juneITERATION PHASE
1-4 JulyREAD OPERATION
  • I'll be having 5-6 days for finalising the database after feedback from mentors
  • Then 3-4 days to develop the read operation

Moreover, I have planned to decide on the database schema details during the community bonding period too

Do you think this would work?

jcrespo triaged this task as Medium priority.Apr 9 2021, 12:52 PM

Hey @Palak199

Thanks for showing your interest to participate in Google Summer of Code with Wikimedia Foundation! Please make sure to upload a copy of your proposal on Google's program site as well in whatever format it's expected of you, include in it this public proposal of Phabricator before the deadline i.e April 13th. Good luck :)

Thankyou for the wishes! Would do that soon :)

Hi @jcrespo and @Marostegui, I made some changes in my timeline and tried to improve some other sections.
Would you please spare some time and review it so that I can make the final submission on GSoC website. :)

GSoC application deadline has passed. If you have submitted a proposal on the GSoC program website, please visit https://phabricator.wikimedia.org/project/view/5104/ and then drag your own proposal from the "Backlog" to the "Proposals Submitted" column on the Phabricator workboard. You can continue making changes to this ticket on Phabricator and have discussions with mentors and community members about the project. But, remember that the decision will not be based on the work you did after but during and before the application period. Note: If you have not contacted your mentor(s) before the deadline and have not contributed a code patch before the application deadline, you are unfortunately not eligible. Thank you!

@Palak199 ​We are sorry to say that we could not allocate a slot for you this time. Please do not consider the rejection to be an assessment of your proposal. We received over 100 quality applications, and we could only accept 10 students. We were not able to give all applicants a slot that would have deserved one, and these were some very tough decisions to make. Please know that you are still a valued member of our community and we by no means want to exclude you. Many students who we did not accept in 2020 have become Wikimedia maintainers, contractors and even GSoC students and mentors this year!

Your ideas and contributions to our projects are still welcome! As a next step, you could consider finishing up any pending pull requests or inform us that someone has to take them over. Here is the recommended place for you to get started as a newcomer: https://www.mediawiki.org/wiki/New_Developers.

If you would still be eligible for GSoC next year, we look forward to your participation