Entradas

Mostrando entradas de marzo, 2022

Diseño front-end con React para una aplicación web

Imagen
Este proyecto consiste en la realización de una plataforma web que gestione y optimice el stock de medicamentos en la Farmacia PYC. Este sistema de gestión es una decisión estratégica que permite al servicio farmacéutico documentar todas sus actividades con el fin de planificar, operar y controlar eficazmente sus procesos, además de la implementación y mejora continua que son aspectos fundamentales en el sistema. La plataforma es desarrollada haciendo uso de los diferentes lenguajes web como son HTML, JSX, CSS. Asimismo, para facilitar el desarrollo de la interfaz, se utiliza una librería de JavaScript, React, la cual está focalizada en el desarrollo de interfaces de usuario. React ofrece herramientas y aisladas piezas de código llamadas ‘componentes’ que facilitan el diseño y disminuyen el tiempo de trabajo. En esta primera parte del proyecto solo nos centramos en construir el front-end del sistema de gestión de farmacia con React. En trabajos posteriores nos centraremos en construir ...

Introducción al back-end

Imagen
Introducción al back-end Inicialmente debe estar instalado y configurado correctamente Docker y Vagrant Protocolo http (hypertext transfer protocol):  Es un protocolo de comunicación (reglas) de hipertexto. Permite el internet como lo conocemos, todo viaja a través de este protocolo. Este permite la comunicación entre los servidores y la página web. Los hipertextos corresponden a los links o enlaces. HTTP permite la conexión con el internet. Es un protocolo basado en texto, es decir, el servidor envía texto y responde con texto también. Los navegadores interpretan el texto que envían los servidores. Primer paso: Request El cliente envía una solicitud GET de la siguiente forma:  En consola: telnet www.spacejam.com 80 (puerto) GET/ HTTP/1.1 Host: www.spacejam.com (ejemplo) Accept: text/html User-Agent: Mozilla/5.0 (Macintosh) Al ejecutar los códigos anteriores, se redireccionan al http s (protocolo seguro). Es importante aclarar que se quiere acceder al dominio (space jam) con...

React - Parte 2

Imagen
  React cuenta con unos elementos denominados Hooks, estos son nuevas APIs de libreria que permiten tener estado y otras características de React en los componenetes creados con funciones. Esta API cuenta con dos elementos importantes useState y useEffect.  Cuando se llama la función useState se declara una nueva variable de estado y el único parámetro que necesita es el estado inicial que no tiene que ser necesariamente un objeto como en versiones pasadas, pueden ser números o strings según se requiera. El useState devuelve una pareja de valores, el estado actual y una función para actualizarlo.  Al usar useEffect React entiende que el componente que se está creando tiene que hacer algo después de la renderización. Esta función es útil ya que puede ser utilizada para hacer peticiones de datos o invocar alguna API imperativa.  Al llamar este método dentro de los componentes permite acceder a todas las variables de estado o cualquier prop directamente desde el efec...

HTML y CSS 2

Imagen
HTML HTML significa Hypertext Markup language, define el contenido y la estructura de una página web. Es un lenguaje de etiquetado. Los tags (etiquetas) pueden tener atributos que proveen información adicional sobre un elemento. Algunas etiquetas de HTML y algunos atributos que siempre se encuentran son: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8" />     <title>React App</title>   </head>   <body>     <div id="root">     </div>   </body> </html> CSS CSS significa Cascading Style Sheets, define el estilo y la apariencia de la página, usa selectores que designan exactamente a cuál elemento dentro del HTML se aplicará un estilo, para esto se usan propiedades que determinan los estilos que se aplicarán. Algunas de las propiedades son: Box-sizing: Permite incluir el padding y el borde dentro de la altura...