Note-web-app

A small python project aimed to learn basics of web developement using flask and sqlalchemy to store secure and consistent data.

The app we will be designing is a simple web where you can login, sign-up write or delete notes and logout.

This project is not focused con how usefull our web app is or how good does it look, but rather on learning a consistent structure to obtain fundamentals in web development. We will focus on define simple and secure routes for our app, understanding how do they work and storing consistent and secure data from our users.

Requirements

You will need to install these dependencies in order to get the project working:

flask, flask_login and flask_sqlalchemy

Creating a minimal flask-app

With flask, we can create a very simple web server with just a few lines of code, in addition to that, we can create the so called routes, which are the "places" where we can get using the url from our page. Once we define a route, we must define a function which tells us what does the page do once a user gets in that route.

In this project, general routes will be defined in views.py and authentication routes will be stored in auth.py. Both files will be defined as Blueprints, to let the app know where to search for routes.

To define a route, we use our variable app and add the URL route needed in order to execute the function written below that route definition. Here's an example in code:

Once we have our routes defined we have to import them into que init.py file and register those blueprints in our variable app

Defining basic login and sign-up routes

Using the basic knowledge from flask we already have, we can define some routes to login, sign-up and logout, right now these routes won´t do any of the work they are supossed to do, but we are just defining our structure and defining concepts. Now it is really importante to take into account that whenever a user interacts with our page, he will be able to use 2 HTTP methods: GET(in order to see the web) or POST(in order to upload some data intro our backend), that is really importante and we must take that into account, defining that in the function of the route we are describing, here´s an example:

To get the information of which method is the user using, we are using an import from flask(request) which can give us that information easily.

HTML templates

We are going to use 2 main functions from flask:

• render_template(): Self-explanatory

• redirect(): This function redirects us to another already defined route we want

Data checking

Our app has a few restrictions when regarding what the user can have as a username, password or email, we are using the previously explaind variable request from flask in order to get the data from the user, and then doing some checks ourselves in python:

Flask SQLAlchemy setup

In order to make our database setup, we must edit init.py and defining a database object with its name, then defining a DATABASE_URI in our app: This is like the route where our app is going to search for the database.

The URI´s definition will take place inside the create_app function, just below defining our secret_key.

Data Models

We reach into our models.py in order to make the structure of how the data from the user will be stored, in other words, we will create classes that will refer to SQL tables later.

Database creation

We modify our init.py to create an instance of the database, we have to check if it exists or not in order to create it or reach into it.

Creation of new users (security fundamentals)

We will modify our auth.py, we reach into the route where we sign-up an user and then make an user instance an then storing it into the database, using a commit after the transaction.

It is really important to not store our user password directly, it will be a crime against our user´s privacy and security, instead we are using a library Werkzeug in order to save into our database the hash of the user´s password, then when we are required to check if the user´s password is correct when logging in, we simply check if the hash stored is equal to the actual hash of the try.

Route access limitation

When making our app, we don´t want the non-authenticated users to acces the home page, or the already-authenticated users to access the sign-up or login page, in order to achieve that we are going to use flask-login module to add decorators (requirements to acces those routes) to routes and functions. We are also using functions from that library in order to login the user.

We are algo using login manager in order to maintain which user is actually registered.

Checking if a user has logged in

We are adding a parameter into our home function in views.py, and also into those routes which renderize HTML templates:

Creating add-note feature

Creating delete-note feature

We are using a little javascript program in order to create the request to delete a note, once we do that, we create the corresponding route with its function, in this case we return a empty jsonify because it is required in flask to return something.