Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
Següent revisió | Revisió prèvia | ||
playground:prova [2022/12/13 18:42] enric_mieza_sanchez creat |
playground:prova [2023/06/30 16:56] (actual) isaac_gonzalo_rivero |
||
---|---|---|---|
Línia 1: | Línia 1: | ||
- | ====== Python Web amb Flask ====== | + | proves vàries |
- | + | ||
- | Python és un llenguatge amb una gran implantació en l' | + | |
- | + | ||
- | Aquest article resumeix una petita introducció ràpida a com utilitzar el [[https:// | + | |
- | + | ||
- | Python disposa de molts frameworks i microframeworks per web. Alguns dels més coneguts: | + | |
- | - **Flask** : essencial, però amb tot el necessari i ben mantingut | + | |
- | - **Django** : //the framework for perfectionists with deadlines// , permet el desenvolupament molt ràpid, amb eines com el ORM i un admin panel molt potent. | + | |
- | - **CherryPy** : microframework | + | |
- | - **Bottle** : microframework | + | |
- | + | ||
- | Referències: | + | |
- | * Per desenvolupar en Python necessitarem [[Python venv]] | + | |
- | * L' | + | |
- | + | ||
- | {{tag> #Daw #DawMpDual #DawMp07Uf1 # | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Videotutorials ===== | + | |
- | Aquest article també el tens en [[https:// | + | |
- | + | ||
- | {{youtube> | + | |
- | + | ||
- | {{youtube> | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Instal·lació ===== | + | |
- | Necessitem Python 3, que ja sol venir instal·lat. Si no fos així, pots instal·lar-ho amb: | + | |
- | + | ||
- | $ sudo apt install python3 | + | |
- | + | ||
- | Necessitem crear un [[python_venv|entorn virtual de Python]]. La manera més senzilla és: | + | |
- | + | ||
- | $ python -m venv env | + | |
- | + | ||
- | I podem activar el nostre entorn amb: | + | |
- | + | ||
- | $ source env/ | + | |
- | + | ||
- | Per saber més sobre els entorns virtuals de Python visiteu l' | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Creant el primer projecte ===== | + | |
- | Iniciarem el nostre projecte web creant una simple carpeta: | + | |
- | + | ||
- | $ mkdir pyweb1 | + | |
- | $ cd pyweb1 | + | |
- | + | ||
- | Dins el nostre projecte crearem un virtualenv on posarem les nostres llibreries: | + | |
- | + | ||
- | $ python -m venv env | + | |
- | $ source env/ | + | |
- | (env) $ pip3 install flask | + | |
- | + | ||
- | Ara ja podem mirar [[https:// | + | |
- | + | ||
- | (env) $ gedit web.py & | + | |
- | + | ||
- | I ara podrem arrencar la aplicació //Hello World// amb: | + | |
- | + | ||
- | (env) $ flask --app web run | + | |
- | + | ||
- | Podeu visitar la web //Hello World// apuntant el vostre navegador a '' | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Avançant amb Flask ===== | + | |
- | + | ||
- | ==== Routing ==== | + | |
- | Si arribeu a la secció [[https:// | + | |
- | + | ||
- | Com podeu veure a l' | + | |
- | + | ||
- | <file python web.py> | + | |
- | #... codi previ... | + | |
- | + | ||
- | @app.route('/ | + | |
- | def hello(): | + | |
- | return 'Hello again!' | + | |
- | + | ||
- | #...mes codi... | + | |
- | </ | + | |
- | + | ||
- | ==== Mètodes [GET, | + | |
- | A més, cal tenir en compte que cada URL a la que accedim, ho podem fer amb diferents mètodes. A la pràctica ho tractem com si fossin URLs independents. L' | + | |
- | + | ||
- | * GET: és el mètode per defecte, i sol mostrar un formulari estàtic | + | |
- | * POST: un cop omplert el formulari, processem les dades | + | |
- | + | ||
- | Per accedir a les dades que se'ns envia via POST, hem d' | + | |
- | + | ||
- | <file python web.py> | + | |
- | # si no especifiquem res al decorator, és el mètode GET | + | |
- | @app.route('/ | + | |
- | def formulari_get(): | + | |
- | # mostrem el formulari | + | |
- | return """ | + | |
- | <form method=' | + | |
- | Introdueix el teu nom: | + | |
- | <input name=' | + | |
- | < | + | |
- | <input type=' | + | |
- | </ | + | |
- | """ | + | |
- | + | ||
- | # important importar la request per accedir a les dades adjuntes | + | |
- | from flask import request | + | |
- | + | ||
- | @app.route('/ | + | |
- | def formulari_post(): | + | |
- | # processem les dades del formulari | + | |
- | nom = request.form[" | + | |
- | return " | + | |
- | </ | + | |
- | + | ||
- | ==== Exercici ==== | + | |
- | <WRAP todo> | + | |
- | * Crea un formulari que demani usuari i contrasenya. El formulari s' | + | |
- | * Crea una pàgina (per POST) que respongui al formulari d' | + | |
- | * Assegura' | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Variables globals (shhht! q no ho senti ningú!) ===== | + | |
- | En un entorn web no és recomanable utilitzar variables globals. O més aviat, no podem utilitzar-les com solem fer-ho en aplicacions d' | + | |
- | + | ||
- | De fet, sí que es poden fer servir, però no es pot confiar en què en la següent execució la variable global es mantingui. El servidor web, depenent de la seva càrrega, pot destruir el procés d' | + | |
- | + | ||
- | A més, també hi ha una qüestió de concurrència: | + | |
- | + | ||
- | Conclusió: si volem **persistència** en un entorn web, estem obligats a utilitzar fitxers o bases de dades. | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Utilitzant plantilles (templates) ===== | + | |
- | + | ||
- | Necessitem un mecanisme més sofisticat per crear contingut HTML i que no sigui fent un return d'un string. **Una de les bones pràctiques més transversals a la majoria de // | + | |
- | + | ||
- | Per això, separarem les pàgines HTML en les plantilles o // | + | |
- | * L' | + | |
- | * La [[https:// | + | |
- | + | ||
- | + | ||
- | {{youtube> | + | |
- | + | ||
- | ==== Exemple : carro de compra ==== | + | |
- | Com a exemple d'ús de les plantilles agafarem un carro de la compra d'un e-commerce. No serà del tot funcional, ja que ens falta el mecanisme de les sessions per poder gestionar la concurrència al servidor, i distingir entre els diferents clients. | + | |
- | + | ||
- | Farem 2 rutes: | + | |
- | * /compra GET : ens mostrarà el formulari. | + | |
- | * /compra POST : processarem les dades enviades al formulari. | + | |
- | + | ||
- | Crea una aplicació mínima com la de l' | + | |
- | + | ||
- | <sxh python> | + | |
- | @app.route('/ | + | |
- | def compra_get(): | + | |
- | return render_template(' | + | |
- | + | ||
- | @app.route('/ | + | |
- | def compra_post(): | + | |
- | return render_template(' | + | |
- | </ | + | |
- | + | ||
- | Com podeu veure, ara ja no creem el HTML dins el codi de l' | + | |
- | + | ||
- | <file html compra_form.html> | + | |
- | <form method=" | + | |
- | <select name=" | + | |
- | < | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | <input type=" | + | |
- | < | + | |
- | <input type=" | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | <file html compra_post.html> | + | |
- | < | + | |
- | </ | + | |
- | + | ||
- | ==== Renderitzar dades a una plantilla amb {{ ... }} ==== | + | |
- | Per millorar l' | + | |
- | + | ||
- | <sxh python> | + | |
- | from flask import request | + | |
- | + | ||
- | @app.route('/ | + | |
- | def compra_post(): | + | |
- | prod = request.form[' | + | |
- | quant = request.form[' | + | |
- | return render_template(' | + | |
- | producte=prod, | + | |
- | </ | + | |
- | + | ||
- | <file html compra_post.html> | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | + | ||
- | Ara pots provar l' | + | |
- | + | ||
- | + | ||
- | ==== Utilitzar codi dins de les plantilles amb {% ... %} ==== | + | |
- | + | ||
- | Pot semblar una contradicció que hi hagi codi dins d'una plantilla, però en realitat és necessari per renderitzar amb facilitat. No és codi de processament, | + | |
- | + | ||
- | Per seguir, convé fer-li un cop d'ull a la [[http:// | + | |
- | + | ||
- | Pel nostre exemple de la botiga, farem una simulació de que disposem d'una llista de productes (en una variable global '' | + | |
- | + | ||
- | <sxh python> | + | |
- | productes = [' | + | |
- | + | ||
- | @app.route('/ | + | |
- | def compra_get(): | + | |
- | return render_template(' | + | |
- | </ | + | |
- | + | ||
- | I renderitzarem la llista de productes en les diferents '' | + | |
- | + | ||
- | <file html compra_form.html> | + | |
- | <form method=" | + | |
- | <select name=" | + | |
- | {% for prod in prods %} | + | |
- | < | + | |
- | {% endfor %} | + | |
- | </ | + | |
- | <input type=" | + | |
- | < | + | |
- | <input type=" | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | Comprova que, en efecte funciona la plantilla, canviant la llista de productes i fent-la més llarga. | + | |
- | + | ||
- | + | ||
- | ==== Plantilles like a PRO ==== | + | |
- | Les plantilles Jinja2 ofereixen moltes possibilitats tal i com s' | + | |
- | + | ||
- | * [[https:// | + | |
- | * [[https:// | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Per a saber-ne més ===== | + | |
- | Hem fet un repàs de les funcions bàsiques del // | + | |
- | + | ||
- | * Persistència en base de dades | + | |
- | * Sessions | + | |
- | + | ||
- | + | ||
- | També hi ha aquest cursos que poden ser interessants: | + | |
- | * [[https:// | + | |
- | * [[https:// | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | + | ||
- | ===== Exercici : login ===== | + | |
- | <WRAP todo> | + | |
- | Pàgina de login de l' | + | |
- | + | ||
- | * Crea un formulari que demani usuari i contrasenya. El formulari s' | + | |
- | * Crea una pàgina (per POST) que respongui al formulari d' | + | |
- | * Assegura' | + | |
- | * **Comprova manualment el punt anterior. Abans de fer els tests automàtics cal fer-los manuals PER A TOTS ELS CASOS** (tant si funciona OK, com si dona error). | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Testing ===== | + | |
- | + | ||
- | Aquest article continua a [[Python Web Test]]. | + | |
- | + | ||
- | \\ | + | |
+ | ^ Heading 1 ^ Heading 2 ^ Heading 3 ^ | ||
+ | | Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 | | ||
+ | | Row 2 Col 1 | some colspan (note the double pipe) || | ||
+ | | Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 | |