LABORATORIO COMPUPTACIÓN EN EL CLIENTE WEB

[pic 1]

LABORATORIO

COMPUPTACIÓN EN EL CLIENTE WEB

Alberto Orozco Ramírez

UNIR | MAESTRÍA EN INGENIERÍA DE SOFTWARE

ÍNDICE

Introducción y objetivos        2

Entorno y herramientas        2

VS Code        2

Desarrollo del ejercicio        3

Estructura del proyecto        3

Objeto XMLHttpRequest        4

Funciones AJAX de jQuery y jQuery ICNDB Plugin        6

Node-Fetch        9

Web Component        11

Introducción y objetivos

La actividad por desarrollar en este laboratorio tiene como propósitos el aprender sobre las peticiones de un sitio web (cliente) a un servidor web. Para esto nos remontamos a algunas de las versiones de cómo se llevaba a cabo este procedimiento anteriormente a como se realiza en la actualidad para aprender sobre los avances que ha tenido y poder analizar sobre estos. El objetivo general es poder desarrollar un ejemplo sobre las varias maneras que existen de comunicar un cliente web con un servidor con las diferentes tecnologías a través del tiempo, los métodos a desarrollar durante la actividad son mediante:

• Objeto XMLHttpRequest.
• Funciones AJAX del “framework” jQuery.
• Plugin específico para jQuery creado por el mantenedor del servicio al que nos vamos a conectar.
• Web component – Desarrollado por un tercero.

Entorno y herramientas

Para llevar a cabo nuestra práctica, empezaremos por adecuar nuestro ambiente de trabajo. Para esta actividad se necesita un entorno capaz de correr una página web básica, así que necesitaremos lo siguiente:

• VS Code (Visual Studio Code)
• NodeJS

VS Code

Para llevar a cabo la actividad necesitaremos de un editor de código fuente, para ello instalaremos VS Code. VS Code es uno de los editores de código fuente más utilizados en la actualidad para el desarrollo de software, este fue creado por la empresa Microsoft y una de las razones por las que es que muy utilizado es que es multiplataforma, lo cuál permite que se pueda instalar en múltiples sistemas operativos, VS Code está disponible para Windows, Mac OS y Linux.  

Para poder instalarlo podemos encontrarlo disponible en el sitio oficial, el sitio es el siguiente:

https://code.visualstudio.com

[pic 2] 

Ilustración 1.- Opciones de descarga de VS Code

En el momento de realizar esta actividad VS Code se encuentra en la versión 1.69. No es estrictamente necesaria una versión en específico para llevar a cabo el ejercicio, sin embargo, se recomienda descargar ampliamente la versión actual al momento de realizar la actividad, y si ya se encuentra instalado, contar con las últimas actualizaciones. El proceso de instalación de VS Code es muy sencillo, una vez que se entra a enlace puesto previamente, se podrá descargar un ejecutable que se encargará de la instalación. Los fines de este documento no cubren el paso a paso de la instalación del software a instalar.

Desarrollo del ejercicio

La actividad por desarrollar se basará en la petición a una API existente y disponible públicamente para su consumo, esta se trata API que cuenta con un contenido de chistes del bien conocido actor Chuck Norris. La API consume los chistes de una base de datos (ICNDB - http://icndb.com/), esta API se consumirá desde una página que se desarrollará y mostrará los chistes obtenidos de manera aleatoria.

Estructura del proyecto

Para comenzar con la aplicación, comenzaremos por crear un folder para nuestro proyecto. Utilizaremos el nombre “ChistesChuck” sobre el cual iremos añadiendo archivos para cada método a realizar.  

Primero añadiremos un archivo HTML de nombre “index.hmtl”, este archivo fungirá como página de inicio para nuestro proyecto, de aquí podremos ir navegando a las diferentes páginas que contendrá nuestro sitio. El desarrollo del archivo index.html queda fuera del alcance del proyecto.

Para la actividad se utilizará la librería de estilos Bootstrap, utilizaremos la referencia CDN para facilitar su uso. Esta referencia se añadirá en el código HTML de las páginas a desarrollar. Además, se agregó la referencia de jQuery que se utilizará más adelante.

Librerías añadidas mediante referencia CDN:

• Bootstrap V.4.6.x
• JQuery V.3.6.0

Ahora añadiremos un archivo de JavaScript en la raíz del proyecto, le llamaremos “index.js”.  En este iremos agregando nuestro código de JavaScript para cada página que se añada al sitio. Ya para finalizar nuestra estructura inicial, añadiremos un folder de nombre “Pages”, en este se tendrán que agregar las páginas nuevas que iremos agregando, al finalizar este paso tendremos la siguiente estructura:

[pic 3] 

Ilustración 2.- Estructura inicial del proyecto

Objeto XMLHttpRequest

El primer método por desarrollar será por medio del Objeto XMLHttpRequest. Iniciaremos añadiendo el primer archivo con el nombre: “chuck2005.html” dentro de nuestro folder Pages.  

El código del archivo HTML es el siguiente:

[pic 4] 

Ilustración 3.- Código HTML para archivo chuch2005.html

Para hacer la petición se hizo uso del Objeto XMLHtppRequest, con este podemos hacer peticiones AJAX de manera eficaz, para ello, solo es necesario crear una petición como el que se muestra a continuación en el archivo index.js: