Entregaa2 2OsosMaduros

Temas Especiales de Programación
Carrera: Ing. En Computación
Grupo: 1008
Prof: Héctor Saldaña Aldana
Equipo osos maduros:

-Luengas Ramírez Carlos Alfonso No. 316100915
-Melesio Molina Roberto Enrique No.
Entrega 2.2 “Modelo de 3-capas con CRUD”
• Objetivo
Desarrollar una aplicación web cliente/servidor que siga el enfoque de tres capas
(modelo 3-tier), con un diseño responsivo. Esta aplicación implementará operaciones
CRUD (Crear, Leer, Actualizar, Eliminar) en la capa de datos como parte de su lógica de
negocio.
• Procedimiento
Partiendo de que el objetivo de esta entrega es realizar una aplicación web, en otras
palabras, un formulario que nos guarde nuestros registros de una manera local y
podamos implementar un CRUD, para poder eliminar y editar nuestros registros.
La entrega pasada fue un verdadero desorden ya que partimos de una confusión y nos
adelantamos bastante a las entregas. Lo que se pedía para la primera entrega lo
logramos hacer sin ningún detalle, solo fue cuestión de malentendidos ya que tratamos
de implementar un DBMS por lo que tuvimos bastantes complicaciones sobre todo con
los equipos de cómputo relacionándolo con los puertos.
Para esta entrega reutilizamos el código que teníamos de la entrega pasada ya
perfeccionado en el cual nos guardaba nuestros registros del formulario en un archivo
Json, esto con un código JavaScript
Este fue nuestro punto de partida, Un formulario que nos guardaba 5 datos con un dato
numérico y 2 campos con diferentes opciones, nos guardaba nuestros registros en un
Json de manera local como lo muestra a continuación
Se podría decir que hasta aquí era lo que se tenia que realizar en la primera entrega,
pero por malentendidos y falta de comunicación no se pudo entregar de forma correcta.
El código de este proyecto se encuentra en un repositorio en GitHub el cual se incluyo
en la entrega pasada por si se desea revisarlo.
Para la siguiente parte de nuestra entrega el reto fue encontrar una manera de poder
visualizar nuestros registros guardados y poderlos editar y eliminar, en otras palabras,
realizar un CRUD.
Sinceramente, hasta la clase del día 5 de octubre del 2023, estaba perdido en cuanto a
lo que se tenia que realizar ya que no terminaba de entenderlo, pero afortunadamente
varios compañeros estaban en la misma situación que yo y el profesor pudo aclarar las
dudas y explicarlo de una manera más sencilla.
Decidí buscar la manera de poder mostrar una tabla y que allí se mostraran los regustros,
donde en esta misma pudiera agregar los botones de editar y de eliminar.
Cabe recalcar que trabajamos con “Sublime Text” ya que es un entorno en el cual se nos
facilita escribir de manera local, de igual manera para algunos otros proyectos usamos
“Visual Studio Code” pero no tenemos ningún problema en cambiar los códigos de editor
de texto.
En esta parte del código fue donde decidimos agregar la tabla de registros en nuestro
programa, esto para que después en nuestro archivo JavaScript le podamos dar las
ordenes necesarias para poder guardar y mostrar los registros.
Ahora en nuestro código JS usamos algunos comentarios para poder identificar que
hacia cada parte del código y así poder encontrar errores ya que inicialmente tuvimos
bastantes, esos se enlistaran más adelante.
Para la parte del diseño fue donde lo dejamos de una manera “Sencilla” ya que no
quisimos meter mucha mano en el CSS y lo dejamos con un diseño sobrio, sobre todo
en la tabla, pero así lo podemos utilizar sin ningún problema.
La vista final de nuestra aplicación web se ve así
• Listado de problemas
Creo que el error principal para esta parte del proyecto fue que no fui tomando
evidencia de los errores como fueron surgiendo ya que me concentré más en tratar de
corregirlos.
• El primer error al ir implementando nuestro código fue el diseño, ya que se veía
todo muy amontonado.
Esto se corrigió de una manera muy sencilla ya que solo era cuestión de ordenar
porcentajes en nuestro CSS, así se veía de manera más ordenada
• Como segundo punto, nos costó bastante trabajo conectar nuestro botón de
guardad en Json con nuestra tabla ya que Nos lo convertía en formato Json pero
no lo podíamos visualizar en la tabla.
Esto se corrigió con un repositorio de datos en GitHub y un video de YouTube,
su bibliografía se encuentra en las referencias.
• Como ultimo error y el mas complicado, fue de nuevo nuestro botón de guardar,
ya que nos devolvía el mismo arreglo de registros repetidas veces, teníamos que
refrescar la pagina para que se actualizara.
Aquí guardamos un registro, para los siguientes nos los volvía a mandar en la
tabla
Asi nos arrojaba los resultados cada que los volvíamos a guardar y teníamos
que refrescar la pagina para que se pudiera actualizar
En el mismo video que mencionamos en el punto pasado mencionaban como

corregir este error, así que nos proporcionó el siguiente código
function limpiar html(){

const div empleados= document.queryselector('.divempleados
while(divempleados.firstchild){
Divempleados.removechild(divempleados.firstchild):
}
}
Con ayuda de este mismo código hicimos los arreglos correspondientes en

cuanto a nombres de variables y lo incluimos en nuestro botón de guardar.
• Resultados y Manual de Usuario

La aplicación finalizada nos agrado bastante ya que después de varios errores
funcionaba de maravilla, para hacer la entrega mas sencilla y mas breve incluiremos
nuestro manual de usuario en este mismo apartado y asi mostramos el resultado final
1. Nuestra pantalla principal es la siguiente, en ella tenemos 5 campos en los cuales
vas a registrar tu correo, el color que mas te agrade de las opciones mostradas,
tu edad (solo permite números), tu ciudad de residencia y tu genero (H, M u otro).
2. Teniendo nuestros campos llenos, podemos seleccionar entre 2 opciones, ya

sea “limpiar” o “guardar”.
3. Si seleccionamos “limpiar” nos arroja todos los campos por defecto
4. Si seleccionamos guardar nos lo manda a la tabla

5. Ahora teniendo varios registros en nuestra tabla, podemos escoger de nuestros
registros si queremos editar alguno o eliminarlo, a continuación mostramos que
se pueden eliminar presionando el botón “eliminar” y eliminamos el registro con
el correo de “Roberto”
6. De igual manera si presionamos cualquier botón de editar nos regresa los campos
al formulario, desde allí los podemos editar, podemos corregir los datos
necesarios y posteriormente al presionar el botón “guardar” se vuelven a
almacenar en nuestra tabla
Modificamos la edad de carlos de 30 a 35 y nos lo regreso sin ningún problema,
así mismo para todos los campos.
• Conclusiones
Desarrollar este proyecto resultó ser una experiencia sumamente enriquecedora y
significativa en mi trayecto de aprendizaje, ya que representó un salto hacia la aplicación
práctica de conocimientos previos al mismo tiempo que introducía herramientas y
conceptos nuevos, en particular el uso del CRUD. Inicialmente, enfrentamos cierta
ambigüedad en cuanto a cómo abordar el proyecto, ya que la idea general de crear un
formulario con operaciones CRUD nos parecía abstracta y desafiante. Sin embargo, a
medida que avanzamos, comenzamos a ver cómo los componentes se conectaban y se
desarrollaban, lo que resultó en una comprensión más clara de cómo llevar a cabo la
implementación. Afortunadamente, pudimos aprovechar recursos valiosos como
repositorios en línea y herramientas existentes que nos proporcionaron soluciones y
orientación en momentos de dificultad. En última instancia, esta experiencia no solo
fortaleció nuestras habilidades técnicas, sino que también destacó la importancia de la
colaboración y la búsqueda activa de recursos en el proceso de aprendizaje y desarrollo
de proyectos.
• Referencias
1. García, M. (2017, 5 octubre). MVC (Modelo-Vista-Controlador): ¿Qué es y para
qué sirve? https://codingornot.com/mvc-modelo-vista-controlador-que-es-y-para-que-
sirve. Consultado el 06/10/2023
2. Aguilar, J. M. (s. f.). ¿Qué es el patrón MVC en programación y por qué es útil? -
CampusMVP.es. campusMVP.es. https://www.campusmvp.es/recursos/post/que-es-el-
patron-mvc-en-programacion-y-por-que-es-util.aspx Consultado el 06/10/2023
3. dev.xcheko51x. (2022, 1 julio). CRUD Local (usando array) HTML, CSS y JavaScript
[Vídeo]. YouTube. https://www.youtube.com/watch?v=IuGqaTRyRlI Consultado el
06/10/2023
4. Xcheko51x. (s. f.). GitHub - xcheko51x/CRUD-local-HTML-CSS-JavaScript. GitHub.
https://github.com/xcheko51x/CRUD-local-HTML-CSS-JavaScript Consultado el
06/10/2023

Entregaa2 2OsosMaduros

Cargado por

Copyright:

Formatos disponibles

Entregaa2 2OsosMaduros

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Entregaa2 2OsosMaduros

Cargado por

Copyright:

Formatos disponibles

Temas Especiales de Programación

Carrera: Ing. En Computación

Prof: Héctor Saldaña Aldana

Equipo osos maduros:

En el mismo video que mencionamos en el punto pasado mencionaban como

function limpiar html(){

Con ayuda de este mismo código hicimos los arreglos correspondientes en

• Resultados y Manual de Usuario

2. Teniendo nuestros campos llenos, podemos seleccionar entre 2 opciones, ya

4. Si seleccionamos guardar nos lo manda a la tabla

También podría gustarte