Diferència entre revisions de la pàgina «Desenvolupament d'aplicacions web amb frameworks»
(tags #FpInfor) |
|||
(Hi ha 15 revisions intermèdies del mateix usuari que no es mostren) | |||
Línia 1: | Línia 1: | ||
+ | <nowiki>#FpInfor #Daw #DawMpDual #DawMp7 #DawMp07Uf2 #DawMp07Uf2 | ||
+ | </nowiki> | ||
== Què és un framework? == | == Què és un framework? == | ||
Línia 15: | Línia 17: | ||
* '''Un conjunt de bones pràctiques''' ...molt important!! | * '''Un conjunt de bones pràctiques''' ...molt important!! | ||
− | + | Una de les bones pràctiques més importants en el disseny de software és el '''separar el codi funcional (la manipulació de les dades) del que serà la presentació a l'usuari'''. Al principi pot semblar que ens obliga a utilitzar més arxius, però quan el projecte es complica ens ofereix multitud d'avantatges: el codi és més ordenat, és més fàcil trobar el què busques per depurar, arreglar bugs i fer modificacions, etc. | |
+ | |||
+ | De fet, la utilització del CSS ja és una separació de la estructura (HTML, blocs, divs i demés) del disseny (propietats d'aquests blocs com colors, posició, vores, arrodoniments, etc.). | ||
− | + | Pels nostres projectes serà vital la separació de la presentació de la pàgina del codi que processa les dades, tal i com veurem en el següent paradigma multicapa. | |
− | |||
<br> | <br> | ||
== Model multicapa == | == Model multicapa == | ||
+ | [[Imatge:Three-tier-application.svg|thumb|dreta]] | ||
+ | |||
L'[https://en.wikipedia.org/wiki/Multitier_architecture arquitectura multicapa o multi-tier] pot tenir diverses capes (també s'anomena N-layer) però acostuma a presentar-se el model de 3 nivells: | L'[https://en.wikipedia.org/wiki/Multitier_architecture arquitectura multicapa o multi-tier] pot tenir diverses capes (també s'anomena N-layer) però acostuma a presentar-se el model de 3 nivells: | ||
* '''Nivell de Dades''': s'ocupa de la persistència, incloent bases de dades i emmagatzematge d'arxius. També inclou les APIs d'accés a les dades que utilitzarà la capa de lògica de negoci. | * '''Nivell de Dades''': s'ocupa de la persistència, incloent bases de dades i emmagatzematge d'arxius. També inclou les APIs d'accés a les dades que utilitzarà la capa de lògica de negoci. | ||
Línia 43: | Línia 48: | ||
* [http://flask.pocoo.org/ Flask] | * [http://flask.pocoo.org/ Flask] | ||
* [http://bottlepy.org Bottle] | * [http://bottlepy.org Bottle] | ||
+ | |||
+ | Sistemes de ''templates'' (plantilles): | ||
+ | * [http://jinja.pocoo.org/docs/dev/templates/ Jinja2] : s'ha fet imitant les Django templates. | ||
Frameworks PHP: | Frameworks PHP: | ||
* [https://www.codeigniter.com/ Code Igniter] | * [https://www.codeigniter.com/ Code Igniter] | ||
* [https://symfony.com/ Symfony] | * [https://symfony.com/ Symfony] | ||
− | * [https://laravel.com/ Laravel] | + | * [https://laravel.com/ Laravel]. En aquesta wiki també el treballem a [[Laravel]]. |
* [http://www.yiiframework.com/ Yii] | * [http://www.yiiframework.com/ Yii] | ||
<br> | <br> | ||
− | == | + | == Exercicis amb microframeworks == |
+ | |||
+ | === Introducció === | ||
Per introduir-nos definitivament en el fabulós món dels ''frameworks'' us proposo aquest exercici: | Per introduir-nos definitivament en el fabulós món dels ''frameworks'' us proposo aquest exercici: | ||
− | |||
# Instal·la't el [[virtualenv]] per facilitar el teu entorn de desenvolupament. | # Instal·la't el [[virtualenv]] per facilitar el teu entorn de desenvolupament. | ||
+ | # Tria un microframework (recomano Flask ja que el model de templates -jinja2- està copiat de Django). | ||
+ | #* Proposem el [http://flask.pocoo.org/ Flask] | ||
# Fes la prova de "Hello World!" per començar a introduir-te. | # Fes la prova de "Hello World!" per començar a introduir-te. | ||
− | # Posa el servidor web de desenvolupament en mode DEBUG per facilitar l'auto-reload del projecte quan modifiquis els arxius. | + | # Mira't la [http://flask.pocoo.org/docs/0.11/quickstart/#quickstart secció Quickstart] de la documentació de Flask. Hi ha 2 seccions que ens interessen: |
− | # Afegeix un ''template'' per renderitzar una pàgina HTML. | + | #* Posa el servidor web de desenvolupament en mode DEBUG per facilitar l'auto-reload del projecte quan modifiquis els arxius. |
+ | #* Afegeix un ''template'' per renderitzar una pàgina HTML (secció "Rendering Templates"). | ||
# Prova de crear un ''template'' que impliqui l'ús de ''loops'', com per exemple una taula o un calendari. | # Prova de crear un ''template'' que impliqui l'ús de ''loops'', com per exemple una taula o un calendari. | ||
+ | #: Utilitza la [http://jinja.pocoo.org/docs/dev/templates/ documentació dels ''templates'' de Jinja2] | ||
# Prova de passar variables al ''template'', per exemple, títol de la pàgina o el mes de l'any que vols renderitzar. | # Prova de passar variables al ''template'', per exemple, títol de la pàgina o el mes de l'any que vols renderitzar. | ||
# ... posa-li imaginació!!! | # ... posa-li imaginació!!! | ||
+ | # ...i sobretot: pensa't quina part de la teva lògica ha d'anar al ''template'', i quina part ha d'anar a l'arxiu .py | ||
+ | |||
+ | |||
+ | === Exemple amb formularis: email validation === | ||
+ | Llegeix-te aquest article: [[Email check amb Flask]] | ||
+ | |||
+ | === Utilitzant formularis: endevina el número === | ||
+ | Realitzarem el joc de "endevina el número". Al servidor ens pensarem un nombre de l'1 al 100, el posarem en una variable global, i l'usuari haurà d'endevinar-lo. Quan ens introdueixi el número li direm si el que hem pensat és menor o major que el què ens ha dit, i ho anirem repetint fins que l'endevini. | ||
+ | |||
+ | # Utilitza els ''templates'' per crear una plantilla amb un formulari per enviar un número per POST | ||
+ | # Investiga a la [http://flask.pocoo.org/docs/0.11/quickstart/ doc Quickstart] com permetre que es puguin rebre dades POST a una ruta determinada. | ||
+ | # Fes una aproximació amb un número fix a descobrir, posa'l en una variable global. | ||
+ | # Fes 3 plantilles i ajusta el codi del main.py perquè es mostri la plantilla adient: | ||
+ | #* Una explicant com funciona el joc. La mostrarem quan no s'hagi enviat cap número. També ha de tenir el formulari per començar la partida. | ||
+ | #* Una amb el formulari per endevinar el número. També ens ha de dir el resultat de la comparació del nombre anterior enviat. | ||
+ | #* Una 3a amb felicitacions quan s'hagi descobert el nombre amagat. | ||
+ | # Respon a l'usuari si el número és major o menor que el que tenim "pensat". | ||
+ | # Quan encertem el número, a part de mostrar el missatge de felicitació, has de reiniciar el número a un nombre aleatori nou. |
Revisió de 16:18, 25 gen 2019
#FpInfor #Daw #DawMpDual #DawMp7 #DawMp07Uf2 #DawMp07Uf2
Contingut
Què és un framework?[modifica]
Per començar, us reprodueixo el què explica la web de Pyramid, un conegut framework per Python, que compara la idea de llibreria i framework:
Frameworks vs. Libraries
A framework differs from a library in one very important way: library code is always called by code that you write, while a framework always calls code that you write. Using a set of libraries to create an application is usually easier than using a framework initially, because you can choose to cede control to library code you have not authored very selectively. But when you use a framework, you are required to cede a greater portion of control to code you have not authored: code that resides in the framework itself. You needn’t use a framework at all to create a web application using Python. A rich set of libraries already exists for the platform. In practice, however, using a framework to create an application is often more practical than rolling your own via a set of libraries if the framework provides a set of facilities that fits your application requirements.
Podriem dir, en resum, que un framework és:
- Un seguit de llibreries
- Uns mecanismes de control (en el cas del web, seria el servidor web)
- Un conjunt de bones pràctiques ...molt important!!
Una de les bones pràctiques més importants en el disseny de software és el separar el codi funcional (la manipulació de les dades) del que serà la presentació a l'usuari. Al principi pot semblar que ens obliga a utilitzar més arxius, però quan el projecte es complica ens ofereix multitud d'avantatges: el codi és més ordenat, és més fàcil trobar el què busques per depurar, arreglar bugs i fer modificacions, etc.
De fet, la utilització del CSS ja és una separació de la estructura (HTML, blocs, divs i demés) del disseny (propietats d'aquests blocs com colors, posició, vores, arrodoniments, etc.).
Pels nostres projectes serà vital la separació de la presentació de la pàgina del codi que processa les dades, tal i com veurem en el següent paradigma multicapa.
Model multicapa[modifica]
L'arquitectura multicapa o multi-tier pot tenir diverses capes (també s'anomena N-layer) però acostuma a presentar-se el model de 3 nivells:
- Nivell de Dades: s'ocupa de la persistència, incloent bases de dades i emmagatzematge d'arxius. També inclou les APIs d'accés a les dades que utilitzarà la capa de lògica de negoci.
- Nivell de Lògica: en general ens referim a la Business Logic
- Nivell de Presentació: renderització concreta del contingut a l'usuari.
Frameworks i microframeworks[modifica]
Han sorgit molts microframeworks per desenvolupament superràpid, tot i que per a grans projectes potser els pot faltar algunes features que podem voler.
Frameworks Python:
- Django: és el que treballarem aquest curs
- Pyramid:
- Pyramid (oficial)
- Python: Pyramid framework (a cacauet.org)
Microframeworks Python:
Sistemes de templates (plantilles):
- Jinja2 : s'ha fet imitant les Django templates.
Frameworks PHP:
- Code Igniter
- Symfony
- Laravel. En aquesta wiki també el treballem a Laravel.
- Yii
Exercicis amb microframeworks[modifica]
Introducció[modifica]
Per introduir-nos definitivament en el fabulós món dels frameworks us proposo aquest exercici:
- Instal·la't el virtualenv per facilitar el teu entorn de desenvolupament.
- Tria un microframework (recomano Flask ja que el model de templates -jinja2- està copiat de Django).
- Proposem el Flask
- Fes la prova de "Hello World!" per començar a introduir-te.
- Mira't la secció Quickstart de la documentació de Flask. Hi ha 2 seccions que ens interessen:
- Posa el servidor web de desenvolupament en mode DEBUG per facilitar l'auto-reload del projecte quan modifiquis els arxius.
- Afegeix un template per renderitzar una pàgina HTML (secció "Rendering Templates").
- Prova de crear un template que impliqui l'ús de loops, com per exemple una taula o un calendari.
- Utilitza la documentació dels templates de Jinja2
- Prova de passar variables al template, per exemple, títol de la pàgina o el mes de l'any que vols renderitzar.
- ... posa-li imaginació!!!
- ...i sobretot: pensa't quina part de la teva lògica ha d'anar al template, i quina part ha d'anar a l'arxiu .py
Exemple amb formularis: email validation[modifica]
Llegeix-te aquest article: Email check amb Flask
Utilitzant formularis: endevina el número[modifica]
Realitzarem el joc de "endevina el número". Al servidor ens pensarem un nombre de l'1 al 100, el posarem en una variable global, i l'usuari haurà d'endevinar-lo. Quan ens introdueixi el número li direm si el que hem pensat és menor o major que el què ens ha dit, i ho anirem repetint fins que l'endevini.
- Utilitza els templates per crear una plantilla amb un formulari per enviar un número per POST
- Investiga a la doc Quickstart com permetre que es puguin rebre dades POST a una ruta determinada.
- Fes una aproximació amb un número fix a descobrir, posa'l en una variable global.
- Fes 3 plantilles i ajusta el codi del main.py perquè es mostri la plantilla adient:
- Una explicant com funciona el joc. La mostrarem quan no s'hagi enviat cap número. També ha de tenir el formulari per començar la partida.
- Una amb el formulari per endevinar el número. També ens ha de dir el resultat de la comparació del nombre anterior enviat.
- Una 3a amb felicitacions quan s'hagi descobert el nombre amagat.
- Respon a l'usuari si el número és major o menor que el que tenim "pensat".
- Quan encertem el número, a part de mostrar el missatge de felicitació, has de reiniciar el número a un nombre aleatori nou.