Subido por MATIAS ARMANDO ESTAY CANTERO

Informe P. Profesional HugoFica

Anuncio
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
Descargar