Reporte de practicas Final.pdf

UNIVERSIDAD DE SONORA
División de Ingeniería
Departamento de Ingeniería Industrial
DESARROLLO WEB EN REACT
Reporte de Prácticas Profesionales
Presenta
URQUIJO MUNGARRO BERNARDO
INGENIERO EN SISTEMAS DE INFORMACIÓN
Asesor
Mario Barcelo Valenzuela
Hermosillo, Sonora A 19 de octubre de 2022

1
ÍNDICE
ÍNDICE DE FIGURAS................................................................................................... 2
1. INTRODUCCIÓN...................................................................................................... 3
1.1 EXPLICACIÓN DEL PROYECTO ........................................................................... 4
1.2 OBJETIVOS GENERALES ..................................................................................... 4
1.3 METODOLOGÍA ..................................................................................................... 5
2. DESCRIPCIÓN DEL CONTEXTO............................................................................. 6
2.1 ENTORNO DONDE SE UBICA LA UNIDAD RECEPTORA.................................... 6
2.2 ESTRUCTURA ORGANIZACIONAL DE LA UNIDAD RECEPTORA ...................... 7
2.3 NORMATIVIDAD DE LA UNIDAD RECEPTORA................................................... 8
2.4 EQUIPAMIENTO E INSTALACIONES.................................................................... 8
3. FUNDAMENTO TEÓRICO DE LAS HERRAMIENTAS Y CONOCIMIENTOS
APLICADOS ............................................................................................................... 10
3.1 FRONT-END......................................................................................................... 10
3.2 BACK-END ........................................................................................................... 11
3.3 FULL STACK........................................................................................................ 11
3.4 FRAMEWORK ...................................................................................................... 11
3.4.1 REACT............................................................................................................... 11
3.5 HOSTING WEB .................................................................................................... 12
4. DESCRIPCIÓN DETALLADA DE LAS ACTIVIDADES REALIZADAS. ................... 13
4.1 PRIMERA ETAPA................................................................................................. 13
4.2 SEGUNDA ETAPA ............................................................................................... 20
4.3 TERCERA ETAPA................................................................................................ 22
5. ANÁLISIS DE LA EXPERIENCIA ADQUIRIDA ....................................................... 26
5.1 ANÁLISIS DE LA EXPERIENCIA ADQUIRIDA ..................................................... 26
5.2 ANÁLISIS DE LOS OBJETIVOS DE LAS PRÁCTICAS ........................................ 26
5.3 ANÁLISIS GENERAL DE LAS ACTIVIDADES REALIZADAS............................... 27
6. CONCLUSIONES Y RECOMENCIONES ............................................................... 28
7. REFERENCIAS BIBLIOGRÁFICAS Y VIRTUALES ................................................ 29

2
ÍNDICE DE FIGURAS
Figura 2.1 Logo de Strategix…………………………………………………………..7
Figura 4.1.1 Guía para internos de Strategix ……………………………….…14
Figura 4.1.2 Lista de Issues en Gitlab………………………………………………16
Figura 4.1.3 Ejemplo visualización de Brancj……………………………………...17
Figura 4.1.4 Tablero Kanban de Gitlab…………………………………………….18
Figura 4.1.5 Nuevo merge request en Gitlab………………………………………18
Figura 4.2.1 Diseño de página web en Figma……………………………………..20
Figura 4.2.2 Ejemplo del uso de makeStyles………………………………………21
Figura 4.2.3 Página web de Strategix 4…………………………………………….22
Figura 4.3.1 Logo de Médica de la Ciudad…………………………………………22
Figura 4.3.2 Campañas de Notisana……………………………………………….24
Figura 4.3.2 Campañas de Notisana……………………………………………….25

3
1. INTRODUCCIÓN
La Universidad de Sonora en sus reglas estipula que en cada plan de estudios
se incluya una actividad que sirvan con la vinculación entre el alumno y el sector
social o productivo con el propósito de complementar la formación de los
estudiantes, es por eso que la carrera de Ingeniería de Sistemas de Información,
del departamento Departamento de Ingeniería Industrial, incluye en su plan de
estudios las prácticas profesionales con valor a 20 créditos, que equivalen a 340
horas laborales en la empresa.
Para cumplir la norma se necesita enviar una solicitud a unidades receptoras
interesadas en reclutar estudiantes de la carrera que desearan realizar sus
prácticas. En mi caso no tuve que buscar mucho ya que un egresado de
Ingeniería en Sistemas de Información visitó el Centro de Servicios de
Tecnologías de la Información de la Universidad de Sonora (CSTI) buscando
practicantes para Strategix 4, la cual es una empresa dedicada al desarrollo de
soluciones de software y hardware para empresas de adentro y afuera del país.
Mi función en Strategix 4 se desarrolló entre los meses de junio y octubre de
2022, participé en actividades enfocadas en el desarrollo web como la página
web de Strategix 4 y Notisana una aplicación que administra doctores y pacientes
del hospital Médica de la Ciudad.
Este documento es un reporte de las actividades realizadas durante el tiempo en
que se desarrollaron mis prácticas profesionales en la empresa Strategix. El
contenido restante contiene apartados como la descripción del contexto, en el
cual se explica la operación y características de la unidad receptora. En el
siguiente se explica el fundamento teórico de las herramientas y conocimientos
aplicados durante el desarrollo de las prácticas en particular los relacionados con
el desarrollo web utilizando React. Posteriormente se presenta una descripción
detallada de las actividades realizadas, divididas en periodos según los reportes
parciales que se hicieron. Enseguida se expone una valoración de varios temas
relacionados con la experiencia adquirida en ese periodo. Por último, están las

4
conclusiones y recomendaciones que resultaron de la experiencia que se
tuvieron en la entidad receptora.
1.1 EXPLICACIÓN DEL PROYECTO
La selección de esa unidad receptora se basó según la especialidad del alumno
adquirida dentro del plan de estudios. Strategix 4 es una empresa start-up
mexicana que brinda soluciones Tecnologías de Información, con el objetivo de
cubrir necesidades de pequeñas y grandes empresas con soluciones integrales.
Por la búsqueda de mayor crecimiento que la empresa está mostrando en estos
momentos, se está trabajando muchos proyectos y se requiere la ayuda de
practicantes en un entorno real; por supuesto, manteniendo asesoría y llevando
de la mano el aprendizaje con la complejidad en las tareas asignadas.
Entre las funciones realizadas se encontraban las relacionadas con la creación,
mantenimiento y cambios de páginas web. Todo ello con el propósito de adquirir
experiencia que pudiera ser útil para el desempeño de funciones similares en mi
futuro desarrollo profesional.
1.2 OBJETIVOS GENERALES
El objetivo general de desarrollar las prácticas en Strategix fué; aplicar los
conocimientos adquiridos en la carrera de Ingeniería en Sistemas de Información
de la Universidad de Sonora, complementar la formación obtenida y adquirir
experiencia para posteriormente estar en mejor posibilidad de ejercer
profesionalmente puestos de responsable de los sistemas informáticos de alguna
organización, institución o empresa. Mientras tanto, la empresa busca forjar
profesionales para las múltiples vacantes con las que cuenta debido a la gran
cantidad de proyectos que está adquiriendo, dándole oportunidad a jóvenes
entusiastas y capaces.

5
Entre los principales objetivos específicos se tienen:
● Lograr la capacitación, operación y resolución de problemas en equipo
que se presentan en el desarrollo de aplicaciones web.
● Aprender la correcta ejecución de Scrum, metodología de desarrollo ágil.
● Aplicar diversos lenguajes y conceptos tales como Git, HTML, CSS, JS y
React.
1.3 METODOLOGÍA
La metodología aplicada durante mis prácticas consistió en tres etapas generales
que se explican brevemente a continuación.
La primera etapa consistió en capacitación. Ésta trató sobre aprender acerca del
uso de Git y Scrum mediante un bootcamp. Esto con el fin de familiarizarme al
manejo del código de un proyecto cuando se trabaja en equipo y también
conocer la forma en la que se trabaja en equipo de forma ágil en la empresa.
La segunda consistió en que todos los practicantes crearán una página web de
Strategix siguiendo un concepto llamado “customer journey” también conocido
como recorrido del cliente, el desarrollo de la página web tenía que estar
enfocado en toda la historia que el consumidor desarrolla con una empresa. Este
proceso posee diferentes etapas que aprendimos en esta etapa y aplicamos al
diseño. La página web se creó utilizando React, una biblioteca de JavaScript.
La última dividió a los practicantes en diferentes proyectos, estuve encargado del
desarrollo de una nueva función de una aplicación web llamada “Notisana”. Dicha
aplicación es un sistema manejador de registro de pacientes, doctores,
diagnósticos para un hospital llamado “Médica de la Ciudad”.

6
2. DESCRIPCIÓN DEL CONTEXTO
Strategix (figura 2.1) es una empresa que se fundó en el año 2019 y ofrece sus
servicios desde Hermosillo, es una empresa de servicios y soluciones
tecnológicas con presencia global. Strategix tiene profunda experiencia en IoT,
IA, ciencia de datos y desarrollo de soluciones para ofrecer soluciones rentables
para la digitalización de ecosistemas.
En la actualidad, se dedican al desarrollo de hardware y software a la medida
para empresas u organizaciones que buscan herramientas de tecnología que
den valor agregado al negocio del cliente. Utilizan herramientas avanzadas para
el desarrollo de software, especializándose en el desarrollo de aplicaciones
móviles, por lo que se garantiza la calidad en sus sistemas. Hoy en día tienen
relaciones de proyectos con Parque la Ruina, Espacio Abierto, SOL Energy,
CORO, Médica de la Ciudad y Camro Soluciones entre otras.
Figura 2.1 Logo de Strategix
2.1 ENTORNO DONDE SE UBICA LA UNIDAD RECEPTORA
Strategix es una empresa localizada en la ciudad de Hermosillo, Sonora, México.
La dirección de la oficina es Blvd. Kino 9001, Colonia 5 de Mayo, Hermosillo,
México (figura 2.2). Strategix 4 se ubica dentro de Parque la Ruina en un espacio
compartido de trabajo llamado Espacio Abierto.
Para realizar sus funciones, la empresa Strategix cuenta con la sala de juntas de
Espacio Abierto, utilizada para tener reuniones con clientes o informar a sus
empleados de asuntos relevantes de la empresa. La oficina principal de Strategix
alberga a los programadores y los mecatrónicos para tener su área de trabajo,
cuenta con equipo de cómputo adecuado para realizar tareas de forma

7
adecuada. En mi estadía como practicante se me proporcionó de una Mac.
Afortunadamente estas prácticas sucedieron de forma presencial después de la
pandemia, durante cuatro horas diarias de lunes a viernes.
Figura 2.2. Espacio Abierto en Parque la Ruina
2.2 ESTRUCTURA ORGANIZACIONAL DE LA UNIDAD
RECEPTORA
En Strategix, al menos en la sucursal de Hermosillo, cuenta con menos de diez
empleados, la organización en la oficina es la siguiente:
I. Product Manager
II. Business developer manager
III. Tech lead
IV. Hardware Engineer
V. Software Developer
VI. Interns
A los internos nos dirige el Product Manager, y también contamos con ayuda de
Senior Developers, es decir, otros desarrolladores con más experiencia dentro
de la empresa.

8
2.3 NORMATIVIDAD DE LA UNIDAD RECEPTORA
En cuanto a la normatividad, Strategix es una empresa que guía todo su
quehacer por un conjunto de reglas, lineamientos, políticas, manuales y
procedimientos, los cuales son definidos por el propio CEO.
En particular, cuenta con documentos de descripción de cada puesto dentro de
la empresa, que contiene el nombre del puesto, el propósito y objetivo general
de cada puesto, el reporte, principales relaciones internas y externas, los
principales retos, finalidades y decisiones que emplea cada uno.
2.4 EQUIPAMIENTO E INSTALACIONES
Strategix 4 cuenta con computadoras MacBook y Mac Mini para sus empleados,
cuenta con dos impresoras 3d, monitores LG ultrawide, un modem AT&T externo
a la red de espacio abierto, una pantalla plana para presentaciones, y todo el
equipo necesario para hardware.
En la oficina se tiene a la disposición amplios escritorios de madera y metal con
sillas ergonómicas de oficina, dos pizarrones muchos marcadores, un sillón puff,
strategix tiene muchos libros actuales de interés para negocios virtuales y de
desarrollo ágil.
El software proporcionado por Strategix para hacer diseños fué Figma, una
poderosa herramienta para hacer diseños de aplicaciones en cuanto a front-end
y prototipos. A todos los empleados se les brinda un correo electrónico con el
dominio de @Strategix4.com, con el cual contamos con amplio almacenamiento
en la nube a través de google drive. Con este mismo correo se da de alta en los
espacios de trabajo de Gitlab. Attlassian Confluence y Jira son dos de las
herramientas más importantes que nos brinda Strategix, Confluence sirve para
compartir conocimiento a través de páginas interactivas creadas por los mismos
miembros del equipo y Jira es una herramienta para el desarrollo en Scrum que
brinda las funciones de escribir tareas, agregar estas tareas a un tablero kanban,
y llevar a cabo un registro de todo lo que se lleva a cabo.

9
Como medio de comunicación se usa Slack, un sistema de mensajería para
empresas de paga que conecta a todo el equipo.

10
3. FUNDAMENTO TEÓRICO DE LAS HERRAMIENTAS Y
CONOCIMIENTOS APLICADOS
Desarrollo Web significa construir y mantener sitios web; es el trabajo que tiene
lugar en un segundo plano y que permite que una web tenga una apariencia
impecable, un funcionamiento rápido y un buen desempeño para permitir la
mejor experiencia de usuario.
Es un campo muy bien pagado, las empresas actuales quieren soluciones web
para estar más conectado con sus clientes. Las empresas buscan verse
atractivas en internet, mostrar lo que tienen, demostrar su posición y atraer a
tanta gente como sea posible a su negocio.
Existen muchas herramientas de desarrollo web, en este reporte se mencionan
algunas.
3.1 FRONT-END
El frontend es la parte del desarrollo web que se dedica a la parte frontal de un
sitio web, en pocas palabras del diseño de un sitio web, desde la estructura del
sitio hasta los estilos como colores, fondos, tamaños hasta llegar a las
animaciones y efectos.
Un desarrollador de front-end, es la persona que se dedica básicamente al
diseño web, pero esto no significa que no toque código, front-end está en
contacto con código todo el tiempo.
Dentro del área de front-end se trabaja con lenguajes como: HTML, CSS para
darle estructura y estilo al sitio y Javascript para complementar los anteriores y
darle dinamismo a los sitios web.

11
3.2 BACK-END
Es la capa de acceso a los datos, ya sea de un software o de un dispositivo en
general, es la lógica tecnológica que hace que una página web funcione, lo que
queda oculto a ojos del visitante.
El backend de una solución, determina qué tan bien se ejecutará la aplicación y
qué experiencia, positiva o negativa, obtendrá el usuario de su uso.
3.3 FULL STACK
Full-stack abarca tanto front-end como back-end, entonces un desarrollador full-
stack necesita saber cómo funciona la web a todos los niveles para determinar
cómo se van a coordinar la parte cliente y la parte servidor.
3.4 FRAMEWORK
Un framework es un esquema o marco de trabajo que ofrece una estructura base
para elaborar un proyecto con objetivos específicos, una especie de plantilla que
sirve como punto de partida para la organización y desarrollo de software.
Los frameworks son usados por programadores porque permiten acelerar el
trabajo y favorecer que este sea colaborativo, reducir errores y obtener un
resultado de más calidad.
3.4.1 REACT
React es una librería Javascript focalizada en el desarrollo de interfaces de
usuario. React es un excelente aliado para hacer todo tipo de aplicaciones web,
SPA (Single Page Application) o incluso aplicaciones para móviles. Para ello,
alrededor de React existe un completo ecosistema de módulos, herramientas y

12
componentes capaces de ayudar al desarrollador a cubrir objetivos avanzados
con relativamente poco esfuerzo.
Por tanto, React representa una base sólida sobre la cual se puede construir casi
cualquier cosa con Javascript. Además facilita mucho el desarrollo, ya que nos
ofrece muchas cosas ya listas, en las que no necesitamos invertir tiempo de
trabajo. En este artículo te ampliaremos esta información, aportando además
diversos motivos por los que usar React como librería del lado del cliente.
3.5 HOSTING WEB
El hosting web es un espacio físico en un servidor, que está conectado a Internet,
y permite almacenamiento y despacho de información (archivos .html, javascript,
css, imágenes, vídeos, etc) a cualquier visitante.
En strategix se utiliza Hostinger como web host.

13
4. DESCRIPCIÓN DETALLADA DE LAS ACTIVIDADES
REALIZADAS.
Las actividades fueron realizadas en el periodo comprendido entre junio y
octubre del 2022, de un horario de 12:00 a 4:00 los días de lunes a viernes. A
continuación describiré la dinámica de trabajo diaria.
Todos los días sin falta se tiene una una reunión diaria empezando con todos los
practicantes presentes, se hace completamente cara a cara y de pie, por eso se
llama ‘daily stand up’, en esta reunión se tiene una conversación entre los
miembros del equipo en menos de cinco minutos acerca de tres cosas: las tareas
que completamos ayer, que vamos a hacer hoy, y en que tenemos algún
bloqueo. La razón de porque hacer estas reuniones es para estar al tanto de lo
que están haciendo los demás miembros del equipo y compartir nuestras dudas
al equipo para obtener apoyo en caso de ser necesario.
Una vez que se haya llevado a cabo el daily stand up, cada quien va y se sienta
en su lugar en los escritorios y empieza a desarrollar las tareas pendientes. Estas
tareas también llamadas tickets son asignadas por el scrum master a través de
Gitlab, el scrum master escribe estas tareas al inicio de cada sprint en base a los
requerimientos brindados por el product manager.
Toda tarea se realiza de forma individual en ramas del repositorio del proyecto
actual, una vez que se completan las indicaciones de los tickets, se empujan los
cambios a la rama principal en donde se está haciendo el desarrollo. Cuando
esto pase, se tiene que notificar al resto de los miembros por Slack de los nuevos
cambios, para que ellos a su vez actualicen sus copias del repositorio con Git.
4.1 PRIMERA ETAPA
Al inicio del programa de prácticas se brindó una capacitación inicial por parte de
Stretegix 4, esto fue con el propósito de familiarizarnos con las algunas de las

14
herramientas de todos los días: G Suite, Google Drive, Slack, Visual Studio
Code, Gitlab y Scrum.
Para ello se nos proveyó de una guía para internos (figura 4.1), la cual contaba
con enlaces importantes con las guías de cómo trabajar utilizando Gitlab y cómo
trabajar usando la metodología Scrum.
Figura 4.1 Guía para internos de Strategix
La primera lección en este bootcamp fue Scrum, familiarizarnos con este método
ágil de desarrollo, y primero que aprendí de Scrum sobre la agilidad. Esta es una
habilidad para crear y responder al cambio y Scruc es un entorno de trabajo
ligero usado para generar valor a través de soluciones adaptables para resolver
problemas complejos.
Un equipo de scrum no debe ser muy grande, el número de miembros ideal es
menor a 10 integrantes. Dentro del equipo de Scrum existen tres roles:
desarrolladores, product owner y scrum master:

15
● Los desarrolladores o developers crean incrementos usables para el
proyecto y cumplen con responsabilidades como crear un un plan para el
sprint, establecer la “definition of done”, poder adaptarse al cambio y
ayudarse entre desarrolladores en caso de problemas.
● El product owner es un representante del cliente dentro del equipo con la
labor de maximizar el valor de producto. Este miembro del equipo se
encarga de la escritura del Product Backlog. También debe desarrollar y
comunicar al equipo el objetivo del producto.
● El scrum master es la persona en el equipo que checa que se esté
siguiendo scrum al pie de la letra, cumple con las responsabilidades de
mantener registro del tiempo y de la efectividad, ayudar al equipo a tener
una mejor autogestión y remover impedimentos al proyecto.
Scrum es una metodología basada en iteraciones o sprints, al sprint se tiene que
definir su duración en horas. Y la clave de scrum está en sus eventos:
● Sprint Planning, toma alrededor de 5 horas y debe realizarse al empezar
el sprint, en esta planeación se toma los items del product backlog y se
trabaja en el sprint backlog. En esta etapa se hacen análisis, refinaciones
al plan y estimaciones.
● Daily Stand Up, esto es una costumbre diaria en la cual todos los
developers comparten su progreso contestando las preguntas: ¿qué hice
ayer?, ¿qué voy a hacer hoy? y ¿qué bloqueos tengo?.
● Sprint Review es una presentación que se debe de realizar al terminar un
sprint, aquí se presentan los resultados obtenidos.
● Sprint Retrospective es la última sesión que se tiene en el sprint y se
proponen cambios al proceso y herramientas.
En mi explicación de lo que aprendí de scrum he mencionado varias veces
algunos documentos importantes como product backlog y sprint backlog. Product
Backlog es la lista ordenada de lo planeado para el producto. Sprint Backlog es
el ¿qué?, ¿por qué? y ¿cómo? del sprint.

16
Una vez aprendido lo básico del scrum aprendí a usar una herramienta de vital
importancia para desarrollar un proyecto de software en equipo: Gitlab.
Personalmente yo ya tenía un leve acercamiento a Git con la interfaz de Visual
Studio Code, mas sin embargo nunca me dispuse a aprender realmente cómo
trabajar correctamente con esta herramienta.
A grandes rasgos cuando trabajas en un proyecto vas a tener que usar Git para
clonar el repositorio alojado en Gitlab. Gitlab maneja proyectos a través de
versiones llamadas ramas y Git es un sistema de control de versiones que va
instalado en la computadora en la que trabajas. En Strategix 4 cuando se sube
un repositorio de código de cualquier proyecto siempre se definen dos ramas
principales, la rama “main” y “develop''. Main está protegida completamente, solo
el scrum master puede añadir cambios a main, develop por otro lado es la branch
de la que los developers trabajan.
Entonces, ¿cómo trabajamos todos los developers al mismo tiempo? Es muy
sencillo: Primero todos los developers deben de tener el repositorio en su
computadora, para ello se tiene que clonar el repositorio con el siguiente
comando: git clone “url-del-repositorio” esto desde una terminal de
comandos dentro del folder en donde queremos poner la carpeta del proyecto.
Después tienes que ver en Gitlab los tickets que el scrum master asigna para
nosotros los desarrolladores (figura 4.2), una vez tienes un ticket por hacer, vas
a tu terminal, esta puede ser el símbolo del sistema o la terminal de visual studio
code, y escribes en la terminal el siguiente comando. git pull origin
“develop” Esto refresca los cambios de tu código basado en la branch por
defecto que es “develop”. Con este último paso jalas a tu versión del código del
proyecto los cambios que hacen tus compañeros desarrolladores.

17
Figura 4.2 Lista de Issues en Gitlab
Antes de empezar a escribir código hay un paso muy importante, crear una nueva
rama, dicha rama es una ramificación de “develop” y se crea con el siguiente
comando git checkout -b “#1-nombre-del-ticket”, “git checkout” nos
mueve a la branch que estamos escribiendo y “-b” crea la branch en caso de que
no exista. En Visual Studio Code en la esquina inferior izquierda nos aparece la
branch en la que trabajamos (figura 4.3). Ya estando en la branch vamos a
escribir nuestros incrementos al código.
Figura 4.3 Ejemplo visualización de branch
En el curso de Gitlab se enseño a sacarle provecho al tablero kanban (figura 4.4)
que ofrece la plataforma, en este apartado aparecen las tareas a hacer en el
sprint, en dos listas por defecto: tareas abiertas y cerradas. En Strategix aprendi
a agregar dos columnas más que utilizamos como apartados nuevos para tareas
en curso (Done) y tareas en prueba (QA). Esta herramienta es muy útil ya que

18
nos permite tener un orden y saber qué tareas hacen nuestros compañeros.
Cuando ya estás escribiendo código en la branch del ticket en el que estás
trabajando, tienes que asegurarte de mover la tarjeta de ese ticket en el tablero
a “Doing”
Figura 4.4 Tablero Kanban de Gitlab
Una vez que terminas de hacer tus incrementos al código tienes que agregar tus
cambios al repositorio de Gitlab, para ello tienes que ejecutar los comandos en
sucesión: ”git add .” y luego ”git commit -m descripción-de-
cambios” esto añade tus cambios y los junta localmente con un comentario,
es entonces que ya puedes empujar tus cambios con ”git push origin
nombre-branch”.
El último paso para añadir lo que has hecho como parte de tu tarea es el merge
request (figura 4.5), esto es una petición que se hace al scrum master a través
de Gitlab, la cual es una fusión de las ramas develop y la rama en la que se haya
hecho una tarea. Hay un apartado en el dashboard del repositorio para hacer
nuevos requests y ver las peticiones pendientes. Una vez creada tu petición se
debe notificar al scrum master. Este a su vez va a checar tu código y probarlo
para comprobar que funciona y cuando termine va aprobar el merge, ahí es
cuando el developer hace merge a las dos branches.

19
Figura 4.5 Nuevo merge request en Gitlab

20
4.2 SEGUNDA ETAPA
Esta etapa consistió en el desarrollo de la página web de Strategix 4, tomando
como referencia la página web de Parque la ruina. La idea era aprender y
familiarizarnos con la forma de trabajar utilizando React. Eddy Varela, el product
manager de Strategix nos facilitó un diseño en base a verticales a papel. Cada
practicante con este diseño previo hizo un Diseño en Figma (figura 4.6), también
para aprender a maquetar una aplicación con dicha herramienta.
Figura 4.6. Diseño de pagina web en Figma
Como parte del desarrollo de la página web se nos introdujo a un concepto nuevo
para nosotros los practicantes. el “customer journey”, la traducción literal del
concepto es “viaje del cliente”. El customer journey es el conjunto de
interacciones que tiene un consumidor con una organización en el proceso de
comprar o conseguir algo.
Empezando el repositorio del proyecto, instalamos una librería de javascript
llamada “material ui”, que provee de un montón de materiales para la creación
de interfaces gráficas. Esto sirvió principalmente para los estilos, ya que material
ui tiene consigo una función llamada “makeStyles” (figura 4.7) que permite
manejar los estilos por clases dentro de una constante en el código.

21
Figura 4.7. Ejemplo del uso de makeStyles
Hablando de estilos, aprendí cómo crear estilos responsivos, con esto me refiero
a la adaptabilidad a diferentes tamaños de pantallas de la aplicación. Aplicando
“Responsive Design” creas una página igualmente visible en cualquier
dispositivo que la visite. Para el uso adaptable se utilizan los margin, padding, y
como manejo de medidas para la responsabilidad se usa el porcentaje y viewport
width.
Creando la página web de Strategix 4 me sirvió para conocer los nombres de
diferentes componentes genéricos que tienen en común las páginas web tales
como las navbar, footer, cards, routes, carruseles, botones, formularios,
dropdowns, menús de hamburguesa, entre otros. Componentes con los cuales
uno como usuario de internet interactúa al estar navegando en diferentes
páginas web, pero ahora comprendo y tengo una noción del patrón de
programación de cada uno de ellos.
El resultado final de esta iteración dejó una página web construida únicamente
por practicantes, claro que con asesoría de otros seniors developers de
Strategix. El primer sprint de este proyecto fue el más importante, porque fue el
primer acercamiento de todos con javascript y react. Después se siguió
trabajando en futuras iteraciones con funciones nuevas para implementar.
Actualmente la página web está alojada bajo el dominio:
https://www.strategix4.com (figura 4.8).

22
Figura 4.8 Página web de Strategix 4
4.3 TERCERA ETAPA
En la última etapa a cada uno de los cuatro internos se le asignó un proyecto
diferente, yo participé en el desarrollo de una nueva función para un proyecto
existente de Strategix4: “Notisana”, una aplicación que administra pacientes,
doctores, diagnósticos de “Médica de la Ciudad” (figura 4.9), la función atractiva
de Notisana es enviar mensajes por whatsapp a sus pacientes con avisos
personalizados a sus condiciones médicas.
Figura 4.9. Logo de Médica de la Ciudad
Para que Notisana está diseñado para crear “casos” y “reglas”. Casos es el
equivalente a diagnósticos, los cuales llevan descripciones, tipo de caso y cada
que tanto se tiene que tener consultas de este caso. Reglas son parámetros

23
adicionales que se escriben sobre cada caso. A partir de un caso y una regla
hechas se puede agregar un diagnóstico al paciente y un mensaje personalizado.
Mi trabajo en este proyecto fue tomar “casos” y “reglas” y combinarlos en uno
como una nueva función llamada “campañas''. Este fue el primer proyecto con el
que trabajé el cual contaba con backend. También he de mencionar que la única
documentación con la que conté de este proyecto fueron dos reuniones grabadas
por Zoom con una developer de la India. Lo más remarcable de este video
mostraba la conexión a la base de datos la cual era en SQL, para trabajar esta
base de datos utilice MySQL Workbench.
A parte Notisana estaba escrito en Typescript un lenguaje diferente a Javascript.
Sin documentación adecuada, poco conocimiento al respecto de Typescript, y
siendo el único developer trabajando en esta nueva función lo primero que hice
fue empaparme de conocimiento de este nuevo ecosistema de tecnologías.
Backend y frontend estaban en el mismo repositorio en dos carpetas llamadas
server y client respectivamente, para compilar el proyecto hace falta correr
ambos. Y implementar la nueva función implicaba hacer modificaciones en los
archivos de cada una de estas carpetas. Puedo decir que en este proyecto
estuve actuando como Full Stack developer.
Como lo único con lo que había trabajado en react fue la página web de Strategix,
yo estaba más familiarizado con frontend, aun así me costó mucho al inicio
identificar exactamente cómo y en donde hacer modificaciones al código para
implementar campañas. Al inicio como desconocía completamente el repositorio
navegaba a través de él utilizando el inspector de elementos de mi navegador y
la función de búsqueda que me proporciona Visual Studio Code. Me di cuenta
que había una carpeta dashboard que contenía todas las tablas resultantes de
pacientes, doctores, casos y reglas.
Cuando cree la nueva tabla de campañas en frontend (figura 4.10) a la figura de
las demás tablas tuve que hacer algunos cambios que incluyeron: añadir en los
roles de usuario permisos para ver campañas, añadir en el backend endpoints

24
para tomar acciones en la base de datos respecto a campañas como por ejemplo
obtener todas las cabañas o borrar las campañas seleccionadas, y por último
crear la tabla de campañas y añadir elementos de prueba en la base de datos.
Figura 4.10. Campañas de Notisana
Trabajar con el backend se me complicó mucho al inicio y tomó algo más de
tiempo de lo que estimaba ya que a diferencia del frontend, en backend no tengo
nada que pueda ver con mis ojos a parte de líneas de código, tuve que
prácticamente explorar toda la parte de back end por mi mismo, a medida que
avanzaba y me sumergía en el repositorio escribía mis dudas al respecto del
funcionamiento y estructura de componentes, esas dudas las aclaraba con otros
devs que me daban ideas del significado y funcionamiento de ciertas clases.
Cuando me fui entendiendo más con todo lo de backend me di cuenta de lo que
tenía que hacer. Tuve que crear varias clases (bastantes) y añadir rutas, lo bueno
es que el código que escribí lo tenía muy fuertemente inspirado de los demás
componentes de backend. Esa fue la parte más difícil para mí, pero una vez
montado lo que necesitaba en esa parte del repositorio pude avanzar mejor.
Lo siguiente que me quedaba por hacer una vez tenía la tabla de campañas en
línea de la base de datos y el código necesario para hacer cambios desde el
repositorio era crear un formulario para crear campañas (figura 4.11).

25
Figura 4.11 Campañas de Notisana
Este proyecto no fue tarea sencilla, tal vez haga falta afinar algunos detalles pero
hice un avance muy significativo. Aquí puse en práctica lo que aprendí en el
transcurso de mis prácticas profesionales, me doy cuenta que siempre hay mas
y mas que aprender. Cada proyecto puede ser distinto y siempre hay una amplia
gama de frameworks que se pueden utilizar pero estoy satisfecho de haber
trabajado con lo que tenía. Aun tengo mucho que dominar y perfeccionar para
ser un mejor web developer, me dedicaré a mejorar.

26
5. ANÁLISIS DE LA EXPERIENCIA ADQUIRIDA
En este apartado se presenta la valoración de los aprendizajes y lecciones
aprendidas durante mi estancia profesional en la empresa Strategix4, tanto en
términos del proyecto en general, los objetivos que se plantearon para su
realización, las actividades desarrolladas y la metodología que se utilizó dentro
de la misma.
5.1 ANÁLISIS DE LA EXPERIENCIA ADQUIRIDA
Finalmente me doy cuenta de cómo es el trabajo en un entorno real, en
Strategix4 aprendí que Scrum es lo óptimo y que no necesariamente siempre
hay un manual que se tiene que seguir al pie de la letra pero si se puede intentar
adaptar las reglas a las necesidades del equipo. De Scrum aplicado en la práctica
a mi parecer son las reuniones para estar al tanto de los avances del proyecto,
aunque hay algunas juntas las cuales pueden ser reducidas a simples mensajes,
no se debe de dejar de lado la comunicación en el equipo.
La experiencia adquirida en estos meses de práctica es importante, porque pude
desempeñarme como ingeniero en sistemas de información, y el trabajar con la
metodología Scrum y un ambiente laboral real me brinda la experiencia para
poder trabajar en una empresa.
5.2 ANÁLISIS DE LOS OBJETIVOS DE LAS PRÁCTICAS
La razón de ser de las prácticas profesionales es meramente para experimentar
el funcionamiento y ambiente laboral de una empresa, en su caso Strategix 4 se
dedica específicamente al desarrollo de soluciones de software, por ello el
objetivo de las prácticas era obtener una capacitación para usar herramientas y
metodologías del momento, ver cómo se trabajaba para clientes reales, como
era el desarrollo de software en equipo y ganar experiencia como desarrollador
web.

27
Los objetivos fueron alcanzados en este periodo de tiempo, ahora y se está a la
expectativa de poder formar parte del equipo de desarrollo de la empresa la cual
es un startup y formar parte del crecimiento de esta misma.
5.3 ANÁLISIS GENERAL DE LAS ACTIVIDADES REALIZADAS
Las actividades dentro de Strategix4 son muy rápidas, son pocos los proyectos
en los cuales participé a comparación de todos los proyectos que maneja la
empresa. Aun así, se cumplió en lo que se tenia planeado para los internos.
A pesar de ser una empresa con poco tiempo en el mercado, Strategix4 me
proporcionó infraestructura, equipo y comodidades a los internos para desarrollar
adecuadamente nuestras actividades. Todas las actividades que realizamos
fueron labor correspondiente a ingenieros en sistemas de información, por eso
considero que valió la pena pasar este periodo de prácticas profesionales en
Strategix4.

28
6. CONCLUSIONES Y RECOMENCIONES
No cabe duda alguna para mi sobre la importancia de hacer prácticas
profesionales, a mi llegó esta oportunidad y no dudé en tomarla, esto significa un
acercamiento vital para mi carrera al mundo laboral que me espera cuando haya
egresado de ingeniería en Sistemas de Información. Siento que definitivamente
el tiempo no pasó volando, si trabajé las horas escritas y queda conmigo la
experiencia obtenida a cerca de las herramientas, metodologías, frameworks y
demás utilidades que aprendí en Strategix4.
Llegue a la conclusión de que la experiencia obtenida en las prácticas
profesionales no se debe reducir a aprender a programar en un lenguaje de
programación especifico como originalmente lo pensaba, a lo que me di cuenta
es que hay más elementos importantes que conoces cuando haces tus prácticas,
conocer antes de comenzar con mis practicas era sobre el proceso del trabajo
en equipo.
Al inicio pensé que no tenia el perfil correcto para estar en Strategix4, pensaba
que desde un inicio me iban a asignar un proyecto enorme y que quedaría mal
con la empresa por no saber nada.
Lo que quiero decir es que a los futuros practicantes es que no deben temer por
no saber o sentir que no saben lo suficiente, la verdad es que, si llegaste a
acumular los créditos necesarios para llevar tus prácticas, debes de saber una
cosa o dos y si no sabes nada en lo absoluto no pasa nada si en tus practicas
las aprendes.

29
7. REFERENCIAS BIBLIOGRÁFICAS Y VIRTUALES
Bel, O. (2022, 24 marzo). Customer journey: qué es y cómo definirlo en tu
estrategia. Recuperado 16 de octubre de 2022, de
https://www.inboundcycle.com/blog-de-inbound-marketing/customer-
journey
Customer Journey: Qué es y para qué sirve. (s. f.). Blog de Salesforce.
Recuperado 16 de octubre de 2022, de
https://www.salesforce.com/mx/blog/2022/02/customer-journey-que-es-y-
para-que-sirve.html
Edix, R. (2022, 26 julio). Framework: qué es, para qué sirve y algunos
ejemplos. Edix España. Recuperado 16 de octubre de 2022, de
https://www.edix.com/es/instituto/framework/
García, I. J. B. (2021, 30 marzo). Backend y Frontend, ¿Qué es y cómo
funcionan en la programación? Recuperado 16 de octubre de 2022, de
https://www.servnet.mx/blog/backend-y-frontend-partes-fundamentales-
de-la-programacion-de-una-aplicacion-web
Strategix4. (s. f.). Recuperado 16 de octubre de 2022, de
https://www.strategix4.com

Reporte de practicas Final.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Reporte de practicas Final.pdf

Similar a Reporte de practicas Final.pdf (20)

Último

Último (20)

Reporte de practicas Final.pdf