Usaremos las siguientes aplicaciones como cliente HTTP
- Postman
- Telnet
Abre la aplicación Postman, lo usaremos para hacer una solicitud a un servidor HTTP, al abrirlo indentifica qué controles de Postman corresponde a los elementos de entrada y salida de un servicio HTTP:
Has un request GET a la URL https://www.escuelaing.edu.co/es/ y verifica el body de respuesta en las opciones Pretty, Raw, Preview.
Ahora has otro request GET al recurso https://dummyjson.com/todos, nuevamente verifica el body en varias opciones.
Responde las siguientes preguntas:
- ¿Qué pasa si no envío el método correcto?
- ¿Qué pasa si al body response HTML lo fuerzo a leerse como JSON?
- ¿Por qué el preview de HTML no se ve igual a cuando accedo a la URL en un navegador web?
- ¿Qué pasa si le envías un body a una solicitud GET?
Como parte del laboratorio en casa (ya que en los equipos del laboratorio está bloqueado) has los dos request anteriores pero ahora usando la herramienta Telnet sobre el puerto 80. Telnet soporta HTTP y no HTTPS, entonces ¿Qué significa la respuesta 301 cuándo usas telnet en el puerto 80?. Si quieres obtener una respuesta exitosa, podrías hacer solicitudes al servicio HTTP http://example.com/ o usando openssl se pueden hacer request HTTPS https://www.bearfruit.org/thoughts/telnet-for-testing-ssl-https-websites/
Para iniciar verifica que tengas alguna de estas herramientas:
- NPM o YARN
Verificando en terminal sería $ npm --version
La siguiente misión es ejecutar una aplicación react localmente:
-
Abre la aplicación https://codesandbox.io/s/react-js-simple-calculator-pefmr, loguéate con GitHub y juega cambiando los parámetros como colores y duplicando las líneas del archivo App.js con tags como
<ResultComponent ...>en la función render. -
¿Qué hace cada uno de los archivos en la aplicación?
.
├── package.json
├── public
│ └── index.html
└── src
├── App.js
├── components
│ ├── KeyPadComponent.js
│ └── ResultComponent.js
├── index.js
└── styles.css
- Después de haber visto los cambios, vuelve a abrir la URL original https://codesandbox.io/s/react-js-simple-calculator-pefmr y sigue los siguientes pasos:
- Descargar código en un Zip
- Descomprimir el Zip en la carpeta de proyectos de software, (en ciertos PC solo funciona 7-Zip)
- Abrir una terminal de Git Bash en la carpeta descomprimida
- Instalar las dependencias con
npm install - Iniciar la aplicación con
npm start, en algunos computadores con versiones antiguas de nodejs hay que agregarNODE_OPTIONS=--openssl-legacy-provider npm run start - Si te sale el Firewall dale click en cancelar
- Abrir la ruta http://localhost:3000/ en un navegador web como Firefox o Google Chrome
NOTA: Si se está utilizando PowerShell en lugar de Git Bash, reemplaze el comando del punto 5 por $env:NODE_OPTIONS='--openssl-legacy-provider' ; npm run start
Ahora, has el request GET http://localhost:3000/ usando Postman, y revisa si el body de la respuesta es igual a alguno de los archivos del proyecto. Significa eso que es un recurso web dinámico o estático?
En este ejercicio, va a implementar una aplicación Web muy básica, haciendo uso de spring MVC.
Para esto usaremos la documentación oficial de Spring con que que aprenderemos las funciones básicas de este framework https://spring.io/guides/gs/serving-web-content/
Después de terminar el aprendizaje analice:
- ¿Por qué MVC obtiene ese nombre? (puede apoyarse de https://www.javatpoint.com/spring-mvc-tutorial)
- ¿Cuáles son las ventajas de usar MVC?
- ¿Qué diferencia tiene la estructura de directorios de este proyecto comparado con las de proyectos pasados (con solo maven y java EE)?
- ¿Qué anotaciones usaste y cuál es la diferencia entre ellas?
- Ahora, haz el request GET http://localhost:8080/greeting usando Postman, y revisa si el body de la respuesta es igual a alguno de los archivos del proyecto. Significa eso que es un recurso web dinámico o estático?
Usando la arquitectura MVC del punto anterior (el proyecto anterior), realice una aplicación simple qué permita navegar gráficamente sobre esta API https://jsonplaceholder.typicode.com/todos/1, puede guiarse de tutoriales como https://medium.com/@nutanbhogendrasharma/consume-rest-api-in-spring-boot-web-application-354c404850f0
Luego de terminada esta parte responda:
- ¿Qué es RESTful?
- Si utilizo un framework como Boostrap CSS para qué el apartado gráfico se vea más profesional, ¿en qué capa se haría su uso?
¡Llego la hora del reto! Teniendo las bases del uso del framework, cree una nueva ruta, por ejemplo /guess, y agrege formulario básico con un campo llamado "número" (guía de como crear formularios HTML https://www.w3schools.com/html/)
Y vamos a implementar la lógica de nuestro juego:
- Se trata de un juego en línea para adivinar un número, en el que el ganador, si acierta en la primera oportunidad, recibe $100.000. Luego, por cada intento fallido, el premio se reduce en $10.000, como en los juegos de apuesta, es natural qué quede en saldos negativos.
- El número a adivinar debe ser generado en cada intento y comparado con el número qué el usuario está insertando, es un número de 1 a 10.
- Debe existir un botón de reset, qué permita al jugador iniciar de nuevo.
- La capa de controlador debe procer el número del usuario mediante método
POST.
Analice las siguientes situaciones:
- ¿Qué pasa si abro el sitio de juegos en dos navegadores difententes?
- Si quisiera qué a cada jugador le aparecieran independientemente sus respectivos saldos. ¿Qué habría que hacer?
- En un README.md colocar lo siguiente:
- Una sección llamada “INTEGRANTES” y allícolocar el listado de los integrantes del taller (máximo 2).
- Una sección llamada “RESPUESTAS” colocar las respuestas a las preguntas.
- Configurar el archivo .gitignore para excluir del repositorio los archivos no relevantes.
- En una carpeta en la raiz del repositorio llamada diagrams y allí realizar un diagrama de clases del proyecto.