A team of enthusiastic data scientists identified a need to develop a personalized Note Taking Application called Scribble. To build this, they have to utilize Python, HTML and Flask framework to create the application server. While at the development stage, the team ran into some challenges with the backend which prevented it from being fully functional. Recognizing my proficiency in backend development, I have been tasked with fixing the broken code to ensure the application works seamlessly.
The Scribble application is such that the home route or page contains a text field and a button. And users can add a note, and all the notes will be displayed as an unordered list below the text field on the same page.
- Python
- Flask
- HTML
The words 'GET' and 'POST' are used frequently in the course of this project. Here is what they mean:
GET refers to requests used to retrieve data from a system. In this case, the GET request is expected to respond to the user who inputted the URL by loading the note-taking page.
POST refers to requests used to submit data to be processed; in this case, the notes or scribbles are the data. Clicking on the add note button by the user initiates a POST request.
You can find the concise report of this project here.
The objectives for this project are twofold, namely:
-
To refactor the existing codebase and ensure the proper functioning of the note-taking application,
-
Document all identified bugs during the debugging process.
First, using Visual Studio code, I created a virtual environment called '.env_flask_scribble' on which to install the flask framework. Thereafter, I activated the environment for use.
The flask installation was successful.
When I ran the codebase a 405 error occured.
- Route method mismatch
The route in the Python code is setup to only handle POST requests. Also, based on the app's functionality, we need to first be able to access the page (i.e., get data from it), but the ‘GET’ method has not been defined here. This leads to the method error when the app is run.
On the other hand, the HTML code contains no corresponding method, which sets it to the default method of ‘GET’, resulting in the data not being sent to the server correctly.
The 'POST' method is included in the HTML code,
And the 'GET' method is included as well in the Python code. This resolves the 405 error.
- Data retrieval issues
Now that we have the Python code and the HTML files communicating properly, we have another issue: data retrieval.
Here, after entering a note, the user cannot see his or her notes as the application is expected to work, instead we see ‘None’.
The issue here is that the Python code cannot correctly retrieve the notes already submitted via the form. This is because the note variable is stored using request.args.get("note"), which matches a GET request. We ought to use request.form.get() for POST requests, as form data is usually accessed this way to match the POST request in the HTML code.
Previous code:
Corrected code:
- No action is specified
In this application, the form is intended to submit the data to the root URL (‘/’) when the user adds a new note. Since it wasn’t stated in the action attribute, the form data was not sent to the correct route (which is the homepage, so they could see previous notes they had made) for processing, and since it wasn't processed, we ended up with ‘None’ instead of the notes we entered.
All bugs are fixed ✅.
I added some features that extend the functionality of the Scribble app, namely:
-
Users can edit already-created notes.
-
The ‘Enter note’ field is wider to enable users to have an enhanced view of their notes as they type.
This project uses HTTP request methods to connect to data sources like APIs or web servers, enabling data retrieval, submission, and updating. These interactions are essential for data collection, preprocessing, and analysis workflows in data science.
By refactoring the flask route, I was able to resolve the mismatch in the route methods used, include the GET method to allow us access the page, specify the needed action in the html file, and handle the data retrieval issues. The app now functions as intended. The app's features were also extended for an improved user experience.