A simplified banking system webapp written with the help of the Flask Python framework.
The program allows the managing of a simplified banking system, defining accounts and their transactions, and offers basic banking services as:
- Account creation
- Account closure
- Deposit and withdrawal of money
- Moving money from one account to another
Exposing functionalities through REST endpoints and an HTML interface.
The request body can be in JSON format or URL-encoded format, as the program supports and is able to manage both. The body of the response for a REST endpoint, if present, must always be in JSON format.
The project was successfully tested on Windows 10 Home 64-bit 21H1 build 19043.
- Chosen languages for the implementation
- API (REST endpoints)
- Frontend GUI (HTML)
- Testing
- Some details and resources
- Useful tools
For the webapp the following languages were used:
- Python with Flask framework (and Requests HTTP library): used for defining the REST api and managing the backend codes with queries to the database, and also for testing the app
- HTML5 + CSS3 + JavaScript with Jquery framework: used for the frontend part of the app, and so its GUI and AJAX requests to the REST endpoints
- SQLite3: for the local SQL database stored on the secondary memory
So, to run the app, you will need to install Python on your system (3.10 or later is needed, as the pattern matching match-case was used, the project was specifically coded and run on Python 3.10.5). Everything else you need is a modern browser of your choice.
After installing Python, you will need to install the Flask framework and Requests library through pip, launching these commands:
$ pip install flask
$ pip install requests
$ pip install colorama -- (this is just needed for the colored output during testing, but it should be preinstalled)To run the webapp on your computer, you need to perform these steps:
- Download the project folder
- From your terminal, move to the project folder path
- Run the
python init_db.pycommand to initialize the SQL database (some entries are automatically added to the db in this step as they're needed for testing) - Run the
set FLASK_APP=appcommand - Run the
set FLASK_ENV=developmentcommand - At last, run the
flask runcommand to start the local server.
You can now access the app at the localhost webaddress on the 5000 port, and so through http://localhost:5000/ or http://127.0.0.1:5000/.
Remember that this sends you to the main GUI page, but you can also check the API endpoints through your browser.
Alternatively, on windows you can run the run_server.bat batch file in the project folder to start the server. Keep in mind that this batch file contains the python commands as well, and therefore it'll reinitialize the SQLite3 database everytime you launch it.
The server implements the following endpoints with their HTTP methods:
returns the list of all accounts in the system.
create a new account with the following fields:
name
surnameand the new id of the account created is returned in the response body.
The id of an account is one 20-character string representing a sequence of bytes, generated randomly if necessary, encoded in hexadecimal (for example, an accountId could be 1087b347f1a59277eb98).
delete the account with the id specified by the URL id parameter.
returns the name and surname of the owner as well as the balance with a list of the identifiers of all transactions carried out by accountId, in chronological order ascending (from the oldest to the most recent).
Also, it introduces a response header with X-Sistema-Bancario key. The header value must express the name and surname of the owner in the format name;surname.
make a deposit of money with an amount specified by the amount key in the body of the request. If amount is negative, a withdrawal is made. In case of negative amount, the server generates an error if the account balance is insufficient, informing the client of the failure. If successful, in the body of the response the new account balance is returned and a deposit/withdrawal ID in UUID v4 format.
change (overwrite) name and surname of the account owner. In the body therefore the following keys must be present:
name
surnamechange (overwrite) name or surname of the account owner. In the body must therefore be present only one of the following keys:
name
surnameReturns the owner's first and last name in a keyed response header X-Banking-System. The header value is in name;surname format.
There is no response body.
make a movement of money with a positive amount from an account to a other. amount is specified in the request body. The server generates an error if the balance of the starting account is not sufficient, informing the client of the failure. If successful, the new account balances are returned in the body of the response involved in the transaction, separated by accountId and a transaction identifier in UUID v4 format. The body of the request therefore has the following fields:
from
to
amountcancels a transaction with the id specified by the id key in the request body that is. It creates a new transaction with a new UUID v4 that reverses the transfer of money between the accounts affected by the transaction with identification id of the amount that the transaction involved, but only if the balance of the previous account beneficiary allows this operation. Otherwise it generates an appropriate error.
The HTML resources offered by the server must be offered by the enpoints indicated with the following functionality.
Both pages have input control logic before sending a request to the backend. For example, if a user enters an account that does not consist of 20 hexadecimal digits, the page gives an error without attempting to send a request to the backend. That said, the backend always re-checks the input before processing the request. If the input is incorrect, it returns an appropriate error that the page is able to report to the user.
This input control logic was implemented with Client-side form validation.
The pages are able to display errors with an appropriate message to the users when they occurs thanks to the implementation of the error function of the jquery $.ajax method.
this HTML page shows the user a prompt with a text field in which to enter an account identifier and, at the press of a button, the page is populated with information regarding the owner of the account and the history of transactions with any associated recipient of the move money (not present if it was a withdrawal/deposit) and the amount involved, without reloading that is, without a new GET request to the endpoint /.
Requests for whatever nature to other endpoints are obviously granted to retrieve the information of the account to be shown on the page.
The transactions shown by the page are ordered by date.
All information as described are displayed in an HTML table.
In case of insertion of a new account number and subsequent pressing of the button, the page repopulates with information regarding the new account no longer showing any data from the old one.
this HTML page shows the user a prompt with three text fields in which to enter sender account, receiver account and an amount to transfer, and, pressing a button, the relevant transaction must be registered in the system. Page also provides feedback to the user regarding the outcome of the operation.
It is possible to run a test of the webapp functionalities.
In order to do this, open another terminal in your project folder and run the command
python test.pyNote: keep in mind that the testing is based on the database entries that are generated when the database is initialized. If you run the test multiple times, it's certain that you'll encounter some error in the testing process due to insufficient amount for withdrawals after the first testing or other problems. To make sure the tests pass, remember to reinitialize the database as described above before running the testing script.
Below here you can see an example of a successful testing session.
In Flask, headers and status codes can be returned along with the response as a tuple in one of the following forms
(response, status),
(response, headers),
(response, status, headers).The status value will override the status code and headers can be a list or dictionary of additional header values.
Way of getting the data received in a Flask request.
Python uuid module was used to generate UUID v4 transactions IDs.
Python secrets module was used to generate 20-character hex accounts IDs.
To check if account IDs were hexadecimal, integer conversion check was used as is more efficient in most cases.
Webapp favicon was created with Text to Favicon Generator.
Settings:
color: #FFF
background-color: #00B3A6
text: B
background: rounded
font-family: leckerly-one
font-variant: regular 400 normal
font-size: 110CSS loading div made with Pure CSS Loaders (even if you'll probably barely see it).
Material design was used (probably not in the best way) as a guideline/inspiration for the webapp palette. This was the exact palette followed.
Validation Errors can be customized using CSS.
For a detailed description of HTTP Codes, you can check RCF.
400 HTTP code was used for well formed but invalid IDs instead of 422 due to reasons that can be found here.
SQLite CURRENT_TIMESTAMP is UTC (or GMT).
The transaction amounts are saved as strings in the database due to inconsistency SQLite3 problems and suitably converted into float on the backend side, otherwise there would have been unwanted approximations and DECIMAL (10, 2) could not be used to truncate results.
Note: some approximations are still happening, and i have no idea why.
A list of tools that may be useful when developing and testing a similar webapp.
This can be used to check the current state of the SQLite 3 database graphically on Windows. https://sqlitebrowser.org/
This can be used to make HTTP requests to the API for further testing as an alternative to the more known Postman. It's open-source, made in Electron and doesn't need an account. https://install.advancedrestclient.com/install