INSTITUTO PROFESIONAL DUOC UC – SEDE PLAZA NORTE ESCUELA DE INFORMATICA Y TELECOMUNICACIONES CARRERA INGENIERÍA EN INFORMATICA INFORME PRÁCTICA PROFESIONAL Empresa Ciudad Docente de Práctica Alumno Fecha inicio Práctica Fecha término Práctica : : : : : : IVARAS CITT – DUOC UC PROVIDENCIA, SANTIAGO JUAN ALBERTO GANA REYES HUGO IGNACIO FICA SAEZ 07/07/2022 30/09/2022 AGRADECIMIENTOS Les otorgo mis sinceros agradecimientos a mí familia, amigos, profesores y colegas que siempre han creído en mí y me han apoyado de distintas formas durante el camino que he recorrido para alcanzar mis objetivos y metas. También y no menos importante, dar las gracias a dios por darme la fuerza y el valor de aventurarme en nuevos desafíos y a mí mismo por persistir siempre e intentar dar todo lo mejor en lo que me propongo a hacer. Gracias también a Duoc UC por su compromiso y excelencia en la labor educativa que se me a entregado, lo cual me permite adquirir nuevos conocimientos. 2 Contenido 1. Antecedentes generales de la práctica ........................................................................................... 4 1.1 INTRODUCCIÓN ..................................................................................................................... 4 1.2 OBJETIVOS DEL INFORME ...................................................................................................... 4 2. Descripción de la práctica ............................................................................................................... 5 2.1 Centro de práctica ............................................................................................................... 5 2.1.1 GENERAL............................................................................................................................. 5 2.1.2 IDENTIFICACIÓN DEL SUPERVISOR DE PRÁCTICA............................................................... 8 2.1.3 IDENTIFICACIÓN DEL ALUMNO EN PRÁCTICA .................................................................... 8 2.2 Trabajo realizado ................................................................................................................. 8 2.2.1 Diagnóstico de la situación actual ............................................................................... 8 2.2.2 Diagrama BPMN ................................................................................................................. 9 2.2.2 Análisis del proceso actual ........................................................................................ 10 2.2.3 Descripción del problema ......................................................................................... 12 2.2.4 Solución de problema ............................................................................................... 12 3. REFLEXION ..................................................................................................................................... 12 4. CONCLUSION ................................................................................................................................. 14 5. GLOSARIO ...................................................................................................................................... 15 7. ANEXOS ......................................................................................................................................... 17 8. EVIDENCIA ..................................................................................................................................... 17 3 1. Antecedentes generales de la práctica 1.1 INTRODUCCIÓN La empresa IVARAS CITT-DUOC UC ubicada en ANTONIO VARAS #666 – PROVIDENCIA y cuyo rubro EDUCACIÓN. Para su producción eficiente se ha dividido en tareas. Pare ello, el Departamento llamado CENTRO DE SERVICIOS ACADEMICOS está encargado de JUAN CARLOS DE LA CRUZ DUSSAUBAT. En este contexto, la labor del alumno en práctica se ha centrado en HABILITAR AMBIENTE DE DESARROLLO EN SERVIDOR IVARAS – DEFINIR APLICACIÓN SEGURA QUE BLOQUEE FUNCION DE MINIMIZAR VENTANA – DESARROLLAR FRONTEND EN FRAMEWORK JAVASCRIPT DE APLICACIÓN TOTEM VERSION PROTOTIPO – CONSTRUIR URLS DE CONSULTA WEB EN NODEJS – ADMINISTRAR Y DISEÑAR ESQUEMA DE DATOS EN BD MONGO. El siguiente documento, persigue como finalidad dar cuenta la dicha labor. Ello ha permitido mejorar las capacidades que ya tenía el practicante. A la par ha permitido demostrar los conocimientos teórico-prácticos asimilados en DuocUc. La experiencia ganada ha permitido al autor de este informe perfeccione sus conocimientos obtenidos previamente, haciéndolo un mejor profesional. Finalmente, el trabajo se encuentra divido en 1. Descripción de la empresa, 2. Descripción del problema abordado, 3. Descripción del modo como se abordó el problema, 4. Conclusiones. 1.2 OBJETIVOS DEL INFORME El objetivo es dar a conocer como el practicante evoluciono al tomar cada problema, y al darle una solución, además de aportar formas más eficientes de finalizar cada actividad pedida por supervisor, de esa manera se podrá completar el objetivo del informe. 4 2. DESCRIPCIÓN DE LA PRÁCTICA 2.1 Centro de práctica 2.1.1 GENERAL RAZON SOCIAL. IVARAS CITT – DUOC UC RUT. 72.754.700-2 GIRO. EDUCACIÓN DIRECCIÓN, TELÉFONO, PÁGINA WEB. ANTONIO VARAS #666 – PROVIDENCIA. 23540400 (ANEXO 1481). WWW.DUOC.CL Presentación de la empresa: IVARAS ES UN CENTRO DE VINCULACIÓN DE PROYECTOS ACADÉMICOS, QUE SU FUNCIÓN ES REALIZAR PROYECTOS ACORDES A LAS NECESIDADES DE ADMINISTRATIVOS, DOCENTES Y COMUNIDAD DUOC. PRINCIPALMENTE EL ÁREA ES DE INNOVACIÓN Y TRANSFERENCIA TECNOLÓGICA. Reseña histórica de la empresa: Desde su fundación, en 1968, como “Departamento Universitario Obrero y Campesino”, Duoc UC ha recorrido un largo camino de consolidación hasta convertirse en una de las instituciones clave en la Educación Superior Técnico Profesional de Chile. Con más de 50 años de historia y la máxima acreditación institucional, por siete años, todos quienes forman parte de Duoc UC pueden decir orgullosamente que miles de técnicos y profesionales, que hoy aportan al desarrollo económico de Chile, se han formado en una de las 9 escuelas y más de 70 carreras vigentes, presentes en sus 18 sedes de la Región Metropolitana, Valparaíso, Biobío, La Araucanía y Los Lagos. El proyecto educativo de Duoc UC que ofrece una formación cristiana e integral permite a sus estudiantes desarrollar al máximo sus capacidades, competencias y valores, convirtiéndolos en mejores personas y en profesionales preparados para insertarse en la sociedad global. La ruta de excelencia que quiere seguir Duoc UC está marcada por la educación centrada en las personas, el aporte al desarrollo del país, la vinculación con el medio y la búsqueda constante de transformación social. 5 Organigrama: 6 Número de empleados: 5001-10.000 EMPLEADOS. Principales productos o servicios: FORMACIÓN DE PROFESIONALES Y TÉCNICOS, FORMACIÓN CRISTIANA E INTEGRAL, EDUCACIÓN Departamento donde se realizó la práctica: PROYECTOS ACADEMICOS Nombre departamento: CENTRO DE SERVICIOS ACADÉMICOS O DEPENDENCIA Directa: JUAN CARLOS DE LA CRUZ DUSSAUBAT Número de empleado: 53 7 2.1.2 IDENTIFICACIÓN DEL SUPERVISOR DE PRÁCTICA NOMBRE COMPLETO. JUAN CARLOS DE LA CRUZ DUSSAUBAT CARGO. COORDINADOR DE PROYECTOS ACADEMICOS 2.1.3 IDENTIFICACIÓN DEL ALUMNO EN PRÁCTICA NOMBRE: HUGO IGNACIO FICA SAEZ CARRERA ESTUDIADA: INGENERIA EN INFORMATICA PERFIL DE EGRESO: FRONTEND DEVELOPER MOTIVACIONES PERSONALES: SIEMPRE DESDE PEQUEÑO ME LLAMAN LA ANTENCION LOS COMPUTADORES, COMO FUNCIONANBAN Y COMO UN SIMPLE PROGRAMA PODIA SOLUCIONAR PROBLEMAS. AHORA QUE COMPRENDO LA DIFICULTAD DE REALIZAR UN PROGRAMA O UN PROYECTO ME MOTIVA A SEGUIR APRENDIENDO PARA ESTAR EN CONSTANTE MEJORA. ESPECTATIVAS DE LA PRACTICA: CONOCER NUEVOS LENGUAJES DE PROGRAMACION Y CONSEGUIR EXPERIENCIA EN EL CAMPO LABORAL. 2.2 Trabajo realizado 2.2.1 Diagnóstico de la situación actual Actualmente en la sede de Antonio Varas los alumnos van a punto estudiantil o a coordinación académica a realizar preguntas que eran muy frecuentes entre los alumnos, también iban a preguntar por sus profesores y en que sala se encontraban, por lo cual se generaban filas por los estudiantes que se dirigían a coordinación académica o al punto estudiantil. 8 2.2.2 Diagrama BPMN 9 2.2.2 Análisis del proceso actual El practicante tiene como cargo de programador FRONTEND, el cual realizara estilados de las vistas solicitadas por su supervisor, y de además de crear nuevas vistas con las funciones requeridas por los usuarios según lo indicado en las reuniones semanales. Lo principal que tuvo que realizar el alumno en práctica fue crear una base de datos en MONGO DB, luego se creó un ambiente BACKEND que sería en NODE JS, lo cual contemplaría endpoints para el TOTEM con los cuales haremos todas las consultas a la base de datos, también este proyecto tendrá dos vistas en el frontend, la primera será para administrar la información que entra a la BBDD y la que se muestra en el TOTEM directamente, la segunda vista es el TOTEM el cual consumirá los endpoints para poder mostrar la información, además esta vista es la más utilizada ya que los alumnos harán las consultas en este punto de información. Lo primero que tuvo que desarrollar el practicante fue crear las vistas del CMS, específicamente habilitar un INPUT que permita la subida de imágenes. Luego de eso integro estilos a la APP del TOTEM llamada “preguntas frecuentes” en esta APP el alumno selecciona la categoría de la pregunta que está buscando, llegando a la pregunta encontrada se envía a un formulario de satisfacción, en estas zonas indicadas el alumno en práctica incorporo código de código en CSS para dejar la APP igual a los mockups realizados por el área de diseños, lo que contemplo la modificación de botones, posiciones de los elementos, color, tipografía, tamaño, orientación, entre todas las modificaciones que se realizaron en el CSS. Luego de realizar la modificación de las vistas de “preguntas frecuentes” se comenzó con la creación de las vistas de la siguiente APP llamada “encuentra tu profe” para esto se creó una vista en REACT JS este es un FRAMEWORK de JAVASCRIPT, la vista principal creada es en la cual se tiene dos INPUT en donde uno de ellos recibe valores numéricos y el otro solo recibe letras, en el primer INPUT se podrá realizar búsqueda por el nombre del profesor o el apellido como el alumno desee o como recuerde, al realizar la búsqueda se mostrara una lista de profesores que tengan el mismo nombre, segundo nombre o apellido, el alumno podrá seleccionar al docente el cual lo redireccionara a una nueva pestaña la cual mostrara los siguientes datos: nombre del profesor, el numero de la sala, el horario que se encontrara el docente en esa aula. El segundo INPUT recibe como dato el RUT del estudiante, y según la API creada muestra una lista de las clases que tiene durante el día, el alumno puede presionar en uno de los profesores y podrá ver en que sala se 10 encontrara, esta sala muestra el número que tiene y también se muestra una imagen de planta marcando la sala que utilizara el docente en los horarios que también se encuentran en la pestaña. Se finalizo la APP “busca tu profe”, se subió a producción y se comenzó a realizar mejorar visuales, mejora en la búsqueda y en el filtrado de datos, además que se tuvo que crear un teclado virtual para que los alumnos puedan buscar los nombres de los profesores o también ingresar su RUT para realizar la búsqueda. Se finalizaron las modificaciones de la APP y en ayuda de los compañeros de practica se realizaron dos vistas más o dos nuevas APP las cuales se llamaron “tour virtual” y “agéndate con varas”, en la cual la primera APP consiste en entrar a una nueva vista la cual posee tres códigos QR para que los alumnos puedan recorrer la sede desde sus celulares, en esta APP el practicante creo varios complementos de REACT JS que se utilizaran en las vistas del “tour virtual”, además que incorporo todo el CSS a dichas vistas para lograr un mejor acabado en la nueva APP, también el alumno en práctica creo unos botones que permite subir y bajar se edificios, todo esto fue posible gracias al uso del HOOK de REACT JS llamado USESTATE, el cual maneja un estado que puede ser modificado y restablecido según como desee el usuario. En la segunda APP llamada “agéndate con varas” también consiste en tener un código QR el cual permite que los usuarios puedan tomar una hora para poder hablar con su coordinador, con un profesor, agendar una hora con orientación psicológica, entre todos los servicios que ofrece esta APP. Todas las APP que posee el TOTEM contienen un formulario al final de cada una para verificar el sí fue de agrado del usuario el uso de TOTEM o si no lo fue. 11 2.2.3 Descripción del problema Los problemas eran tiempos de los alumnos que sufrían los alumnos por realizar preguntas sencillas de orientación por ser nuevos en la institución, también por la consulta de la ubicación de sus aulas y de sus profesores, agendar horas también eran unos de los problemas ya que se aglomeraban muchos alumnos y/o docentes, agregando que recorrer una sede tan grande implicara mucho tiempo para los alumnos y profesores nuevos, lo cual también puede significar perderse en la sede. 2.2.4 Solución de problema La solución para los problemas indicados anteriormente es el TOTEM, ya que es un punto de rápida información para los alumnos y para los usuarios que deseen utilizarlo, además de que contiene información precisa para los usuarios y que no cambiara de versión cada vez que se pregunte, también que esta siempre disponible para los usuarios. Esta solución libra los puntos de interés como coordinación académica y el punto estudiantil. 3. REFLEXION ¿Se entendieron las partes de las tareas que se le encargaron al practicante y como se conectaban?, desde un comienzo el alumno en práctica tuvo problemas para comprender un lenguaje nuevo, pero al pasar de una semana se logró comprender las tareas requeridas por el encargado y de la forma de cómo se conectaba cada una de ellas, ¿Se logro comprender la importancia de estas tareas para el centro de practica?, de manera exitosa el practicante comprendió la importancia que tenía la tarea que debía realizar, ya que era algo que estaría en un constante uso por los usuarios y tiene que estar a un 100% funcional para ellos, ¿De qué manera estas actividades se relacionaban con las otras actividades?, todas las actividades solicitadas por el encargado tenían relación, ya que se creó una APP principal que contiene cuatro APPs internas, y estas estaban enfocadas en los alumnos que utilizan el TOTEM, ¿Fueron eficaces las estrategias, habilidades o procedimientos que se usaron para desarrollar la actividad?, si fueron de eficaces las estrategias, habilidades o procedimiento que se utilizaron por el practicante, ya que se desarrollaban de una manera rápida y sin problemas, de esa manera se logró avanzar rápido en las demás APP que se encontraban en desarrollo, ¿Qué se está 12 aprendiendo?, lo que el practicante está aprendiendo es un FRAMEWORK llamado REACT JS, las buenas prácticas que se deben utilizar al momento de estar programando, de hacer el código lo más simple y legible para los demás compañeros de práctica. La mejor forma para mejorar el desempeño del practicante es estar constantemente leyendo documentaciones de los lenguajes que está utilizando para programar, de los FRAMEWORK que está utilizando, de esa manera comprenderá lo que está realizando y como podrá dar soluciones rápidas y eficaces a nuevas actividades solicitadas, todo esto hará que el alumno se convierta en profesión al capaz de realizar actividades solicitadas, una proactividad, responsabilidad con los tiempos de entregas con lo solicitado, y que sea autodidacta con sus conocimientos en los leguajes que desee aprender. El practicante no ve que se puede modificar en el centro de practica ya que realizo su práctica de forma remota, además que el encargado y todo el equipo de desarrollo siempre tuvo una buena disposición para responder dudas, y ayudar cuando se requería de más personal para realizar una APP. 13 4. CONCLUSION Finalmente, podemos establecer las siguientes conclusiones: 1. En cuanto al objetivo general de la practica podemos señalar que se cumplió de manera satisfactoria, resolviendo todas las actividades que delegaron hacia el alumno en práctica, dejando todos los puntos requeridos resueltos exitosamente. 2. A medida que se veían inconvenientes con los diseños propuestos por el área de diseño del proyecto, se pudo definir una buena ruta de conversación con el área para lograr incorporar los diseños planteados por ellos, de esa manera la APP web quedo con una buena imagen y es intuitiva para los usuarios que lo utilizaran. 3. Finalmente, he comprendido cuales son los procedimientos que se llevan a cabo en proyecto para realizar una aplicación web con un uso táctil que sea responsivo y rápido en respuestas de consultas realizadas por alumnos. 14 5. GLOSARIO FRONTEND La parte del desarrollo web que se dedica a la parte frontal de un sitio web APP Una aplicación informática diseñada para ser ejecutada en el TOTEM TOTEM Aplicación web principal del proyecto QR Es un módulo para almacenar información en una matriz de puntos o en un código de barras bidimensional. REACT JS Una biblioteca JavaScript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. CSS Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. HOOK Son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes de función. USESTATE Es un Hook que te permite añadir el estado de React a un componente de función. MONGO DB Es un sistema de base de datos NoSQL, orientado a documentos y de código abierto. BACKEND Es la parte del desarrollo web que se encarga de que toda la lógica de una página web funcione. NODE JS Es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación JavaScript, asíncrono, BBDD Base de datos CMS El gestor de contenido o CMS (Content Management System) 15 INPUT Conjunto de datos que se introducen en un sistema o un programa informáticos. FRAMEWORK Es un marco o esquema de trabajo generalmente utilizado por programadores para realizar el desarrollo de software JAVASCRIPT Es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. API Es una abreviatura de Application Programming Interfaces, que en español significa interfaz de programación de aplicaciones. 16 7. ANEXOS -PAGINA PRINCIPAL (TOTEM) https://totem.ivaras.cl/inicio recomendaciones para ingresar a la página del tótem, primero se debe presionar las siguientes teclas (Ctrl+shift+i) para ingresar a las herram ientas de desarrollador, luego en el centro superior se deben colocar la siguiente resolución (1080x1920). Se realiza todo esto ya que el tótem es una pantalla en vertical táctil con esa resolución. -CMS http://143.198.132.102:8090/inicio 8. EVIDENCIA Enlace del repositorio del frontend del proyecto https://github.com/cittavaras/front-totem Enlace del repositorio del CMS https://github.com/MarceloCariz/admin-cms 17
