Mostra la font per a Desenvolupament d'aplicacions web amb frameworks

<nowiki>#FpInfor #Daw #DawMpDual #DawMp7 #DawMp07Uf2 #DawMp07Uf2
</nowiki>

== Què és un framework? ==
Per començar, us reprodueixo el què explica la [http://docs.pylonsproject.org/projects/pyramid/en/latest/narr/introduction.html web de Pyramid], un conegut ''framework'' per Python, que compara la idea de llibreria i ''framework'':

<div style="background-color:#dddddd;max-width:600px;padding:1em 2em;">
'''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.
</div>


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.

<br>

== 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:
* '''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 [https://en.wikipedia.org/wiki/Business_logic Business Logic]
* '''Nivell de Presentació''': renderització concreta del contingut a l'usuari.

<br>

== Frameworks i microframeworks ==
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:
** [http://docs.pylonsproject.org/projects/pyramid/en/latest/ Pyramid (oficial)]
** [[Python: Pyramid framework]] (a cacauet.org)

Microframeworks Python:
* [http://www.cherrypy.org/ CherryPy]
* [http://flask.pocoo.org/ Flask]
* [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:
* [https://www.codeigniter.com/ Code Igniter]
* [https://symfony.com/ Symfony]
* [https://laravel.com/ Laravel]. En aquesta wiki també el treballem a [[Laravel]].
* [http://www.yiiframework.com/ Yii]

<br>

== Exercicis amb microframeworks ==

=== Introducció ===
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 [http://flask.pocoo.org/ Flask]
# Fes la prova de "Hello World!" per començar a introduir-te.
# 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:
#* 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 [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.
# ... 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.