Calculadora amb Python, Flask, JavaScript, HTML

Arbre del projecte

Insta-la Python a Windows

Python no apareix a l’arbre del projecte perquè es pressuposa que ja està instal·lat prèviament al sistema operatiu. L’arbre del projecte només mostra els fitxers i directoris específics del teu projecte. Aquí tens l’arbre del projecte sense Python:

Ara hem d’instal·lar Flask al directori env (entorn virtual)

python -m venv env (crea un entorn virtual)
.\env\Scripts\activate (Activa l'entorn vritual)
pip install flask (instal·la Flask dintre del entorn-> dependencies aillades)
ARBRE1: Es llança l'escript obrint calculadora.html amb el navegador 

C:\Users\urqte\Desktop\calculadora
├── app.py
├── calculadora_html.py
├── env
├── estructura.txt
├── 
└── templates
    └── calculadora.html

index.html= calculadora.html, es canvia el nom per a que funcioni a l'arbre 2
Funciona indistintament també a:

ARBRE2: Es llança l'escript amb el navegador a l'adreça: https://beseit.net/calculadora/
S: es una unitat de xarxa de Synology que coinsideix amb el www del Synology,


S:\beseit\calculadora>
├── app.py
├── calculadora_html.py
├── calculadora.ico
├── env
├── estructura.txt
├── index.htm
└── templates
    └── 

Explicació del projecte

  1. app.py: Aquest fitxer conté el codi per al servidor Flask que gestiona les sol·licituds del formulari HTML i retorna el resultat de la calculadora.
from flask import Flask, render_template, request  # Importa les classes i funcions necessàries de Flask

app = Flask(__name__)  # Crea una instància de l'aplicació Flask

def suma(a, b):  # Defineix una funció per sumar dos números
    return a + b

def resta(a, b):  # Defineix una funció per restar dos números
    return a - b

def multiplica(a, b):  # Defineix una funció per multiplicar dos números
    return a * b

def divideix(a, b):  # Defineix una funció per dividir dos números
    if b != 0:  # Comprova que el divisor no sigui zero
        return a / b
    else:  # Si el divisor és zero, retorna un missatge d'error
        return "No es pot dividir per zero"

@app.route('/')  # Defineix la ruta per a la pàgina principal
def index():  # Defineix la funció que es crida quan es visita la pàgina principal
    return render_template('calculadora.html')  # Renderitza el fitxer HTML 'calculadora.html'

@app.route('/resultat', methods=['POST'])  # Defineix la ruta per a la pàgina de resultats, només accepta sol·licituds POST
def resultat():  # Defineix la funció que es crida quan es visita la pàgina de resultats
    operacio = request.form['operacio']  # Obté l'operació seleccionada del formulari
    num1 = float(request.form['num1'])  # Obté el primer número del formulari i el converteix a float
    num2 = float(request.form['num2'])  # Obté el segon número del formulari i el converteix a float

    if operacio == '1':  # Si l'operació és '1', suma els dos números
        resultat = suma(num1, num2)
    elif operacio == '2':  # Si l'operació és '2', resta els dos números
        resultat = resta(num1, num2)
    elif operacio == '3':  # Si l'operació és '3', multiplica els dos números
        resultat = multiplica(num1, num2)
    elif operacio == '4':  # Si l'operació és '4', divideix els dos números
        resultat = divideix(num1, num2)
    else:  # Si l'operació no és vàlida, retorna un missatge d'error
        resultat = "Elecció invàlida"

    return render_template('resultat.html', resultat=resultat)  # Renderitza el fitxer HTML 'resultat.html' amb el resultat

if __name__ == '__main__':  # Si aquest fitxer es crida directament, executa l'aplicació Flask
    app.run(debug=True)  # Executa l'aplicació en mode de depuració
  1. calculadora.py: Aquest fitxer conté la lògica de la calculadora, com ara les funcions per sumar, restar, multiplicar i dividir.
  2. calculadora_html.py: Aquest fitxer genera el fitxer HTML que s’obre amb el navegador. Potser conté codi per crear la interfície d’usuari de la calculadora.
  3. env/: Aquest directori conté l’entorn virtual de Python, que inclou totes les dependències necessàries per executar el projecte.
  4. estructura.txt: Aquest fitxer probablement conté informació sobre l’estructura del projecte o instruccions per a l’ús del projecte.
  5. templates/: Aquest directori conté els fitxers HTML. En aquest cas, conté el fitxer calculadora.html, que és la interfície d’usuari de la calculadora. Un cop finalitzat el projecte aquest directori es pot suprimir.

Funcionament del projecte

  1. Formulari HTML: El fitxer calculadora.html conté un formulari que permet als usuaris introduir números i seleccionar una operació. Quan l’usuari envia el formulari, les dades es passen al servidor Flask.
  2. Servidor Flask: El fitxer app.py conté el codi per al servidor Flask. Aquest servidor gestiona les sol·licituds del formulari HTML i crida les funcions de la calculadora per calcular el resultat.
  3. Lògica de la calculadora: El fitxer calculadora.py conté les funcions per sumar, restar, multiplicar i dividir. Aquestes funcions es criden des del servidor Flask per calcular el resultat.
  4. Resultat: El servidor Flask retorna el resultat de la calculadora al navegador web, on es mostra a l’usuari.