---
title: 0. Curs SOC UF2. Model de programació web i base de dades
tags: SOC, UF2
---

# 0. Curs SOC UF2. Model de programació web i base de dades

<div>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licencia de Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />Este obra está bajo una <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 4.0 Internacional</a>.
</div>


## Introducció a les aplicacions web.
Segons la [Viquipèdia](https://ca.wikipedia.org/wiki/Aplicaci%C3%B3_web), una aplicació web:
> és una aplicació a la que s'accedeix utilitzant com a client un navegador web usant el protocol TCP/IP, ja sigui a través d'internet o d'una intranet.

### Avantatges de les aplicacions web.
* Segons la definició anterior, no cal instal·lar res a banda del navegador per a fer servir una aplicació web.
* Si no tenim res instal·lat al nostre PC, com a usuaris tampoc necessitem actualitzar l'app. Sempre accedirem a la versió més actual que tingui el servidor.
* Normalment les dades es desen al servidor i és aquest l'encarregat de filtrar-les i manipular-les, en conseqüència, podem treballar amb una màquina menys potent perquè part de la feina ens la fa el servidor.
* Sempre accedim a les dades actualitzades, encara que les haguem modificat des d'un altre dispositiu.
* Donat que els navegadors web segueixen un estàndar les apliacions web són sempre multiplataforma.

### Desavantatges de les aplicacions web.
* Necessitem connexió a Internet per a fer-les servir.
<div style="width: 20%;">


</div>

* Les dades es desen fora del nostre dispositiu, en alguns casos pot comportar problemes de privacitat.

## Arquitectura d'una aplicació web.


Com acabem de veure més amunt, una aplicació web necessita de 2 màquines diferents per a poder executar-se; per una banda necessita un servidor web i per una altra necessita un client que moltes vegades és un navegador web.

Degut a la propia naturalesa de les aplicacions web és molt fàcil separar la part de presentació de la part de processat de la app.

Existeixen varies aproximacions al disseny d'aplicacions web, però en aquest curs en centrarem a dissenyar la visualització de les dades en pàgines estàtiques implementades amb __HTML5__ i __CSS3__ que mitjançant scripts en Javascript realitzaran les consultes de les dades o les peticions d'accions al servidor. Una pàgina estàtica és aquella que està escrita de forma permanent en un fitxer i s'envia al client sense modificar mentre que una pàgina dinámica és aquella que es genera automàticament just desprès de rebre la petició mitjançant un programa escrit a tal efecte.

El servidor i el client necessiten posar-s'hi d'acord en la forma de comunicar-se: com demanar les dades, quines funcionalitats oferim, quins paràmetres he de subministrar en cada crida, ...

En aquest curs mostrarem una forma molt habitual de comunicació de dades entre client i servidor: la API [REST](https://es.wikipedia.org/wiki/Transferencia_de_Estado_Representacional)ful.

Resum de les parts típiques d'una aplicació web:
* Programari de servidor web: Aplicació que permet accedir als clients a les diferents pàgines estàtiques o APIs que tenim al nostre servidor.
* API RESTful: Interfície de comunicacions que aprofitant el protocol HTTP/HTTPS rep peticions dels clients i envia dades que normalment codificarem en documents JSON.
* Pàgines web: Fitxers de text que contenen codi HTML, CSS i JavaScript i són enviats sense canvis al client mitjançant el servidor web.
* Codi HTML: conté l'esquelet o estructura de la nostra pàgina web.
* Codi CSS: Modificadors visuals que s'apliquen al codi HTML i canvien la forma de presentació.
* Codi JavaScript: Codi font interpretable pel navegador que permet executar programes als navegadors dels clients.

### El servidor web.

De moment només direm que el servidor web és una aplicació capaç de comunicar-se amb els navegadors web i subministrar pàgines web.
Els servidors web es comuniquen mitjançant els protocols HTTP(port 80 TCP) i HTTPS(port 443 TCP). Tot i que aquests són els ports per defecte, es poden configurar per a utlitzar qualsevol port TCP.
Els servidors web més emprats actualment a Internet són l'Apache i l'NginX.

### Els clients web.

De clients web n'hi ha de molts tipus:
* __Navegadors web__: són clients webs capaços d'interpretar el codi font de les pàgines web i mostrar una representació gràfica de les mateixes. Tots coneixem més d'un tipus de navegador web, alguns exemples poden ser:
* Firefox.
* Google Chrome.
* Opera.
* Brave.
* Safari.
* __Aplicacions__ mòbils i aplicacions d'escriptori: És una pràctica molt comuna crear apliacions d'escriptori i aplicacions mòbils que obtinguin les dades que necessiten comunicant-s'hi amb un servidor web. De fet, la majoria d'aplicacions mòbils funcionen comunicant-s'hi amb un servidor web mitjançant una API, ja sigui RESTful o GraphQL. 

* __Comandes del sistema operatiu__: Els desenvolupadors web per a provar les funcionalitats dels servidors web utilitzen comandes del SO que són capaces d'obtenir i mostrar la informació que ofereixen els servidors web. No mostren la informació de manera gràfica, mostren directament el fluxe de bytes que envia el servidor. A Linux podem fer servir:
* curl. A continuació es mostra un exemple d'ús de la comanda curl.
> $curl https://jsonplaceholder.typicode.com/users/1
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[e-mail]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}

* get
* __Navegadors en mode text__: Existeixen alguns navegadors webs pensats per a ser utilitzats en entorns que no disposen de servidors de finestres gràfiques, com ara els servidors d'internet. Com exemples de navegadors web en mode text, tenim:
* Lynx
* Browsh

### Les _respostes web_ (response)
Les dades que habitualment envien els servidors web són habitualment de dos tipus diferents. Per una banda, el més habitual, estan les pàgines web, que no són altra cosa que text extructurat en format HTML i per altra els documents JSON que contenen dades en 'brut' que seran consumides per alguna aplicació.

### _Juguem_ amb una API pública.
En aquesta secció farem unes quantes proves amb la API pública [ntfy](https://ntfy.sh/).
És una API molt senzilla, però funcional i que a més té clients per a Android i IOS.
#### Funcionament de la API
##### 1.- Enviament de missatges:
Podem enviar missatges enviant una petició POST al servidor passant-li el topic a la URL de la següent manera:

$ curl -X POST -d "El meu missatge" ntfy.sh/el_meu_topic

##### 2.- Recepció de missatges:
Per a rebre missatges podem fer una consulta GET al topic seleccionat:

$ curl -X GET ntfy.sh/el_meu_topic