After having shown the web application from a user-interface level, and explained the gist of how the program works, I am keen to share about how I managed to program everything.
This is my experience only, about how I do it, it might not be actually the "preferred" way by everyone.
The beginnings
I would describe this as the "Setup" Stage, where the front-end and back-end is worked on separately before they are like combined together.
For the front-end, the body "template" needs to be created. A body template is like the "theme" of the web-page. It doesn't change much. All subsequent web pages are going to use this template so it is actually very important.
To say the truth, I redid this template 3 times before I can settle on the last one! It took so long, because I didn't have much HTML and CSS skills last time, so it was very painful to create and re-create them afterwards. Since this template is the base of all the web pages, it needs to be as dynamic as possible, meaning I would have to make it responsive to different screen sizes. The navigation bar needs to be well thought of, and the design layout needs to be nice, like the fonts.
It was only till the 3 attempt, that I have gained enough skills so that it looks at least decent. Well, practice makes perfect.
For the back-end, I have to create a web-server and I had decided to use Flask. Flask is a popular micro web framework for python. The main reason I chose Flask is that it is simple and easy to use. Setting up flask is actually very easy. A few lines of code and it is ready to use. Of course, it wasn't that simple. What makes Flask versatile is its extensible libraries. There are many libraries that work hand in hand with Flask. Extension modules that were used are SQLAlchemy, WTForms, Flask Login and Bcrypt. What makes the back-end challenging is the width of the learning content of all these modules. Hence, the setup of the back-end was actually quite slow and difficult as well because I was new to them as well as Flask in general.
To give credit where credit is due - I really have thank this guy on YouTube:
His name / channel is Corey Schafer and he conducts Python Tutorials on YT.
His Python Flask tutorial is really, really amazing.
Link to his Flask Tutorial:
https://www.youtube.com/playlist?list=PL-osiE80TeTs4UjLw5MM6OjgkjFeUxCYH
Probably without his help, I would not have been able to have done so much.
I have learnt how to:
Create a Database using SQLAlchemy,
Create Forms using WTForms,
Authenticate User Session using Flask Login,
Create URL Routes,
Create & Generate HTML Templates (Jinja)
and many others using Flask...
The Grind
After getting a hang of Flask and it's extension modules, progress was relatively fast.
After some time, I realised that I had a pattern in developing the application.
First, I would create a sample front-end web page. I will draft out the HTML and style it using CSS. I gave it dummy data to test it out. I ensure that it is responsive. And when I am happy with the design, I am done. Otherwise, I will keep redoing it till I looks up to standard.
Then, I would convert it into a HTML Jinja Template, because most (if not all) of my web pages aren't static. If you don't know what Jinja is, it is like a python "programming language" for HTML, where you mix python and html together (just that with special syntaxes to insert python code).
Lastly, I would write the function to call for the new url. Basically, the instructions to execute when the url is being accessed / called.
For example, the server would have to parse the HTML Jinja Template and return the HTML page to whomever client that access the url. Another example is that, the server would have to validate information provided by the client and update it to the database when it receive some information (like form data) from the client.
During this time, I also learnt how about the various HTTP request methods. 'GET' request are for the client (User in this case) to get the information of the url web page. 'POST' request are for the client to post information to the server (which then the server may or may not reply).
This request methods have various part to play during the lifetime of a web page.
However, for some of the web pages, this wasn't the end. There was one last additional step. Client side Javascript. Due to the real-time nature of such a web application, the web page has to be able to refresh itself, to look for new updates to the food order. Obviously it wasn't possible for the user to refresh the web page manually once every 5 seconds to keep track of their food order. Hence, there was a need to use Javascript and Ajax to ask the server for new data automatically and update the web page dynamically.
Of course, I have forgotten! The last last step is actually to test and debug the web page and ensure that it worked perfectly without any problems.
And... this cycle keeps repeat till I finish the web application!
It's grind isn't it?
If you are interested in looking at the source code for this project, I have it linked to my github account here: https://github.com/Tooawesome15/p1-assignment
Comments