SMX2 - AW - UD1 - Introducció a les aplicacions web (complet).pdf

Aplicacions Web UD 1 - Introducció a les aplicacions web 2n CFGM Sistemes Microinformàtics i Xarxes Professor: Antoni Valencia (i revisió) Autor: Miquel Àngel Cabot Què ténen en comú aquestes empreses? “  Totes basen el seu èxit en aplicacions web avançades “ L’è...

Aplicacions Web UD 1 - Introducció a les aplicacions web 2n CFGM Sistemes Microinformàtics i Xarxes Professor: Antoni Valencia (i revisió) Autor: Miquel Àngel Cabot Què ténen en comú aquestes empreses? “  Totes basen el seu èxit en aplicacions web avançades “ L’èxit de les aplicacions web ◉ L'èxit d'Internet està lligat a l'èxit de la web ◉ Ara, és difícil diferenciar la web i Internet ○ Abans, hi havia molts serveis diferents (correu electrònic, xat, grups de discussió, fòrums de discussió, transferència d'arxius...) a través de diferents protocols (POP3, SMTP, NEWS, FTP,...) i diferents programes clients ○ Ara, tots aquests serveis estan disponibles a través del protocol HTTP, amb només un navegador web Què és una aplicació web? ◉ Aplicació: és un software que permet als usuaris desenvolupar una tasca o servei específic ◉ Aplicació web: és una aplicació creada per ser executada per un navegador web ○ Protocol HTTP ○ Llenguatge HTML, CSS, etc. Avantatges de les aplicacions web ◉ Són fàcils d’utilitzar ◉ Són visuals ◉ Necessitem un únic programa, un navegador web ◉ Estan suportades per tots els sistemes operatius ◉ Mínims requisists dels clients (RAM, HDD, CPU…) ◉ Fàcils de mantenir. Només es necessita actualitzar el servidor, no tots els clients ◉ No es necessiten instal·lar ◉ Dades centralitzades ◉ Accessibles des de diferents llocs Inconvenients de les aplicacions web ◉ Són menys potents ◉ Aprofiten pitjor els recursos hardware ◉ Necessiten connectivitat ◉ Les aplicacions web són més difícils de desenvolupar ◉ Delegam el control de la nostra informació Història de la World Wide Web ◉ 1969: - ARPANET (Advanced Research Projects Agency Network) ○ Per projectes avançats de recerca ○ 29 d’octubre de 1969: primer missatge exitós a ARPANET ◉ 1989 - Tim Berners-Lee inventa una implementació del concepte d’hipertexte basat en la xarxa ○ Mentre treballa al CERN ○ World Wide Web: enllaçar documents d’hipertexte, accesibles des de qualsevol node de la xarxa ○ Va alliberar la seva invenció per ús públic Història de la World Wide Web ◉ 1989-1996 - Web 1.0 ○ Documents d’hipertexte (links) ○ Documents estàtics enllaçats ◉ 1997-2003 - Web 1.5 ○ Documents generats dinàmicament, depenent dels paràmetres de petició ○ CGI (Common Gateway Interface): per executar programes al servidor que generen les pàgines web dinàmicament Generalment escrits amb llenguatge C Amb problemes de seguretat Podíen saturar el servidor (scripts interpretats al servidor per generar HTML i enviar-li al client) Va fracasar (altres lleguatges interpretats com PHP precompilen el codi per tenir un millor rendiment) ○ Altres llenguatges de programació interpretats: Costat del client → JavaScrip, VBScript, Java Applets… Costat del servidor → PHP, ASP, JSP (JavaServer Pages) tots amb accés a BD Història de la World Wide Web Web estàtica: Sempre mostra el mateix contingut. Web dinàmica: El contingut mostrat s’adapta a l’input de l’usuari, a canvis a la BD, data/hora d’accès, etc. Història de la World Wide Web ◉ 2004-2019: Web 2.0 ○ Llocs web que emfatitzen el contingut generat per l’usuari ○ Tecnologia de feeds RSS (Really Simple Syndication) per rebre actualitzacions (news) ○ Tecnologia AJAX (Asynchronous JavaScript and XML) ○ Wikipedia, blogs, Flickr (una de les primeres web d’imatges)… ○ “Què és Web 2.0” (Tim O’Reilly) http://www.oreilly.com/pub/a/web2/archive/what-is-web-20.html ○ Rich Internet application (RIA): Aplicacions interactives d’internet enriquides d’un punt de vista gràfic i d’usabilitat/interactivitat Funcions multimèdia (animacions, vídeo, etc.) Dónen resultats similars a les aplicacions d’escriptori (drag-and-drop, UI rics, poden funcionar sense connexió a Internet, etc.) Adobe Flash, Microsoft Silverlight, AJAX, HTML5... Història de la World Wide Web ◉ 2004-2019 - Web 2.0 ○ Web Social: per donar suport a la interacció social (Facebook, Twitter, discord…) ○ Service Oriented Architecture (SOA). Arquitectura Orientada als Serveis Serveis web Funcionalitats encapsulades a serveis independents que resolen les peticions dels clients Els serveis són elements modulars i reusables de software que interaccionen per APIs. ○ Software as a Service (SaaS): ○ Desenvolupament d’aplicacions mòbils (Responsive Web) Història de la World Wide Web ◉ 2020 - Web 3.0 ○ Web Inteligent Inteligència Artificial (IA) aplicada a la web Processament Natural del Llenguatge (PNL): relacionat amb les interaccions entre ordinadors i llenguatges humans Aprenentatge automàtic (Machine Learning) Sistemes de recomanació ○ Web Semàntica Promou formats de dades comuns i protocols d’intercanvi Informàció semàntica (= significant). Comprensible per les màquines Gràcies a la inclusió de metadades, transforma la informació en coneixement Arquitectura web bàsica (client-servidor) Arquitectura de les aplicacions web ◉ Segueix un esquema client-servidor ○ Servidor web: Apache, Nginx, Microsoft IIS… ○ Client web: Google Chrome, MS Internet Explorer, Firefox... ◉ Llenguatge HTML ○ Existeix un estàndard amb recomanacions sobre la creació i interpretació de documents web ○ Test ACID: per comprovar si els navegadors compleixen estàndards de la W3C (http://www.acidtests.org/) ○ I per comprovar compatibilitat amb HTML5: http://html5test.com/ ◉ Esquema bàsic d’una petició HTTP: El navegador fa una petició a una URL → Consulta DNS de la IP del servidor → Petició amb el protocol HTTP al servidor → Resposta del servidor per HTTP del codi HTML → Representació al navegador del codi HTML Arquitectura web amb pàgines estàtiques Arquitectura web amb pàgines dinàmiques EL client: sols un navegador web ◉ Realitza peticions HTTP al servidor i presenta les pàgines web ◉ Interpreta el codi HTML, CSS, JavaScript, etc. ◉ Principals navegadors: ○ Microsoft Edge. Integrat a Windows. ○ Mozilla Firefox. De la lliberació del Netscape Navigator. Codi obert i lliure, NO té llicència GPL, sinó una llicència pròpia. Multiplataforma. ○ Google Chrome. Codi obert. Multiplataforma. ○ Safari. De Apple. Per Mac OS X i Windows. ○ Opera. Multiplataforma. ◉ Per smartphones i tablets: versions específiques per Android o Apple iOS. El servidor web ◉ També s’anomena ‘servidor HTTP’ ◉ És un sistema informàtic (hardware o software) que processa peticions a través del protocol HTTP (o HTTPS) ◉ Pot retornar un resultat (un recurs) per a aquesta sol·licitud ○ Generalment un document HTML+CSS+JS, però també JPG, PNG, PDF, XML, JSON… ◉ Servidors web més populars: ○ Apache ○ Microsoft IIS ○ Nginx ○ Google GWS (d’ús intern a Google) Servidors web més utilitzats (2021) Llenguatges i tecnologies Llenguatges i tecnologies al costat client (frontend) ○ Són incorporats amb el codi HTML, que el navegador web interpreta per mostrar la pàgina web. Llenguatges i tecnologies al costat servidor (backend) ○ Són components que el servidor web interpreta. ○ Generen elements (pàgines web dinàmiques) que es lliuren al client. Llenguatges i tecnologies al costat client (frontend) ◉ HTML (Hypertext Markup Language). Descriu la estructura de la pàgina web. ◉ CSS (Cascading Style Sheets). Descriu la presentació de la pàgina web. ◉ JavaScript. Llenguatge interpretat al navegador web en temps d’execució. ○ Biblioteques JavaScript populars: Lodash, jQuery, Axios, D3.js ○ Ara es fan servir més aviat frameworks com React, Angular, o Vue.js ◉ Plugins. Necessiten ser instal·lats al navegador web. ○ Adobe Flash, Microsoft Silverlight, Java Applets… (obsolets) ○ Han estat reemplaçats per HTML5 Llenguatges i tecnologies al costat servidor (backend) ◉ Parts del costat del servidor: ○ Servidor web (o servidor HTTP) -> Serveix pàgines web ○ Servidor d’aplicacions -> Executa la lògica de negoci i aplicacions web dinàmiques ○ Sistema Gestor de Bases de Dades (SGBD) -> proporciona dades Nota: Jolt is a JSON transformation library  Servidor d’aplicacions ◉ És un programari que proporciona l’entorn per córrer aplicacions web dinàmiques, gestiona la lògica de negoci, i accedeix a les bases de dades. ○ Execució de codi: Processa sol·licituds amb codi en diversos llenguatges (C#, Java, PHP, etc.). ○ Gestió de connexions: Connecta amb bases de dades i serveis. ○ Seguretat: Autentica usuaris i controla l'accés. ○ Escalabilitat: Manté el rendiment en moments de gran càrrega. ○ Integració: Facilita la connexió amb APIs i altres sistemes. ◉ Servidors d'aplicacions populars: ○ PHP Application Server: Executa aplicacions PHP. ○.NET Framework: Entorn de Microsoft per a aplicacions escalables. ○ Java Application Server: Servidors com Apache Tomcat. ○ Node.js: Executa JavaScript al servidor. (Next.js per apps React dinàmiques.)  Llenguatge: Java Python PHP Python JavaScript Ruby JavaScript C# JavaScript JavaScript PHP Frameworks de back-end més utilitzats (2023) Sistema Gestor de Bases de Dades (SGBD) ◉ Base de dades: ○ Col·lecció organitzada de dades (esquemes, taules, consultes, informes, visualitzacions i altres objectes) ◉ Sistema Gestor de Bases de Dades (SGBD): ○ Programari informàtic que interactua amb la base de dades ○ Està dissenyat per permetre la definició, creació, consulta, actualització i administració de BDs ○ SGBD populars: MySQL, MariaDB, PostgreSQL, MongoDB,, Microsoft SQL Server, Oracle... Stacks per webs dinàmiques LAMP stack XAMPP stack ◉ Plataforma sobre la que ◉ Paquet de programari lliure que funcionen les aplicacions conté: web creades utilitzant la ○ X (Qualsevol sistema següent combinació d'eines operatiu: Windows, Linux, necessàries: Solaris i Mac OS X) ○ Linux ○ Apache ○ Apache ○ MySQL (ara, MariaDB) ○ MySQL o MariaDB ○ PHP ○ PHP ○ Perl ◉ http://apachefriends.org Stacks per webs dinàmiques MEAN stack PERN stack ○ MongoDB ○ PostgreSQL ○ Express.js ○ Express.js ○ Angular ○ React ○ Node.js ○ Node.js Serveis web SOAP (obsolet) ◉ Permeten connexió entre servidors ◉ Intercanvi de dades (XML) amb l’objectiu d’oferir uns serveis ◉ Proveïdors ofereixen serveis com a procediments remots ○ Exemple: agències de viatge, “rastreator” per assegurances, etc.. ◉ WSDL: (Web Services Description Language) descriuen un servei web (URL, com és la petició…) ◉ UDDI: (Universal Description, Discovery, and Integration) publiquen la informació dels serveis web disponibles (fa de llistat públic de serveis web). ◉ SOAP (Simple Object Access Protocol o Protocol Simple d'Accés a Objectes): missatges de petició i de resposta Serveis web SOAP  Serveis web REST o RESTful (actual) ◉ Connexió entre servidors: Permet la comunicació entre servidors per intercanviar dades. ◉ Intercanvi de dades: Utilitza normalment JSON (també admet XML, però JSON és més lleuger). ◉ Serveis basats en recursos: REST es basa en l'accés a recursos (p. ex., objectes de dades) mitjançant mètodes estàndard HTTP: ○ GET: Recuperar dades ○ POST: Crear noves dades ○ PUT: Actualitzar dades existents ○ DELETE: Eliminar dades ◉ OpenAPI/Swagger: Eines utilitzades per descriure i documentar les APIs REST, permetent una fàcil comprensió i integració. ◉ Arquitectura simplificada: REST no requereix WSDL ni UDDI com SOAP. Opera directament sobre HTTP amb menys protocols, cosa que el fa més ràpid i fàcil d'implementar.  Apliacions al núvol. Cloud Computing ◉ Informàtica basada en Internet que proporciona diferents tipus de serveis ○ Aquests serveis estan disponibles des de diferents dispositius client en xarxa, com ara ordinadors d'escriptori, ordinadors portàtils, tauletes i telèfons intel·ligents ○ Es basa en recursos informàtics de processament compartit ◉ Diferents tipus de serveis al núvol: ○ Emmagatzematge al núvol: DropBox, Google Drive, MS OneDrive ○ Ofimàtica web: Google Docs, MS Office 365 ○ Backup On-line: Carbonite, Backblaze, CrashPlan ○ Sistemes operatius web: EyeOS (Telefónica), ChromeOS (Google) ○ Xarxes socials: Facebook, Instagram, Twitter, LinkedIn ○ Bibloteques multimèdia: Flickr, Youtube Models de serveis de Cloud Computing ◉ Infrastructure as a Service (IaaS) - Infrastructura com a servei És una forma de computació en el núvol on s'ofereixen als seus clients recursos, físics i virtuals, com màquines virtuals, tallafocs, sistemes d'emmagatzematge o balancejadors de càrrega, entre d'altres. Per poder oferir aquests elements s'utilitzen hipervisor com Xen, KVM, VMware ESX / ESXi o Hyper-V, entre d'altres. Per exemple, en comptes de tenir 10 ordinadors físics amb Linux i 4 GB de RAM cadascun, podem "virtualizarlos" en el núvol i treballar amb ells com si fossin sistemes físics, encara que en realitat no ho són, estan virtualitzats dins d'un servidor. ○ Exemples: Amazon Web Services (AWS), Google Cloud, MS Azure… Funcionalitats que poden incloure les IaaS: Màquines virtuals, Sistema operatiu, programari de servidor, emmagatzematge, accés a la xarxa… Models de serveis de Cloud Computing ◉ Platform as a Service (PaaS) - Plataforma com a servei És un concepte de computació en el núvol mitjançant la qual els usuaris poden desenvolupar, executar i administrar aplicacions sense preocupar-se per la infraestructura que hi hagi per sota. D'aquesta manera, els desenvolupadors només han de preocupar per la programació de les aplicacions, mai per la configuració ni el programari que hi ha per sota, estalviant temps i recursos. Per exemple, PaaS pot executar-se per sobre del IaaS (si anem a virtualitzar tot). ○ Exemples: Google App Engine, Heroku, Cloud Foundry... Aquestes són algunes de les funcionalitats que poden incloure dins d'una proposta de PaaS: Entorn de scripting de servidor, Sistema de gestió de base de dades, Eines de disseny i desenvolupament, Hosting... Models de serveis de Cloud Computing ◉ Software as a Service (SaaS) - Software com a servei És un model de distribució de programari pel qual tercers desenvolupadors ofereixen certes aplicacions a través d'Internet accessibles només a través d'un client propi. Aquest tipus de computació en el núvol l’utilitzem gairebé diàriament, per exemple, a l'connectar-nos a Twitter o Facebook des dels seus respectius clients o en veure un vídeo o una pel·lícula en streaming, per exemple, des de Netflix. ○ A vegades es coneix com a "programari sota demanda", ○ Normalment, SaaS és accedit a través d'un navegador web ○ Exemples: Google Suite, Microsoft Office 365, Dropbox... Models de servei de computació en núvol disposats com a capes en una pila  Organismes d'estandardització ◉ Organismes que estableixen protocols i estàndards que defineixen aspectes de la World Wide Web: ○ World Wide Web Consortium (W3C): recomanacions HTTP, HTML, URL, CSS, XML… ○ Internet Engineering Task Force (IETF): Estableix estàndards d’Internet (STD) i genera documents (Request For Comments o RFC) sobre seguretat i protocols de xarxa (TCP/IP, TLS/SSL etc.) ○ Organització Internacional per l'Estandardització (ISO): format horari UTC, model OSI, etc.. ○ Consorci Unicode: codificació de caràcters Unicode ○ Internet Assigned Numbers Authority (IANA): supervisa globalment l'assignació d'adreces IP, la gestió dels noms de domini als servidors arrel DNS, etc. Aplicacions amb les que es farà feina al curs ◉ Sistema operatiu: Linux / Windows ◉ Navegadors: Google Chrome ◉ Editor de text: Visual Studio Code (VS Code) + plugins ◉ Servidor web: Live Server plugin (VS Code) ◉ Control de versions: Git (github.com) Bibliografia ◉ Aplicacions web CFGM - Sistemes Microinformàtics i Xarxes Institut Obert de Catalunya https://ioc.xtec.cat/educacio/recursos-materials-aprenentatge?id=87 ◉ Aplicaciones Web (Segunda Edición - 2023) Raül V. Lerma-Blasco, José Alfredo Murcia Andrés, Elvira Mifsud Talón ISBN: 978-84-481-8392-9 Editorial McGraw-Hill Sou lliure de: Compartir — copiar i redistribuir el material en qualsevol mitjà i format Adaptar — remesclar, transformar i crear a partir del material El llicenciador no pot revocar aquestes llibertats, sempre que seguiu els termes de la llicència. Amb els termes següents: Reconeixement — Heu de reconèixer l'autoria de manera apropiada, proporcionar un enllaç a la llicència i indicar si heu fet algun canvi. Podeu fer-ho de qualsevol manera raonable, però no d'una manera que suggereixi que el llicenciador us dóna suport o patrocina l'ús que en feu. NoComercial — No podeu utilitzar el material per a finalitats comercials. CompartirIgual — Si remescleu, transformeu o creeu a partir del material, heu de difondre les vostres creacions amb la mateixa llicència que l'obra original. No hi ha cap restricció addicional — No podeu aplicar termes legals ni mesures tecnològiques que restringeixin legalment a altres de fer qualsevol cosa que la llicència permet https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode