Web Development

Sebastian Aldana Solarte Departamento de Ingenierías, Universidad Tecnológica del Pereira Proyecto de grado II Julio César López Betancur 19/01/2024

Resumen Este trabajo documenta y analiza una experiencia de prácticas empresariales en Panthera Hub, filial de Accedo Technologies, especializada en el desarrollo web de aplicaciones. Durante seis meses, el practicante universitario se centró en adquirir competencias avanzadas en el desarrollo full stack utilizando Laravel, Blade y Vue.js incluyendo un poco de javascript y html. El marco conceptual presenta las tecnologías clave y herramientas utilizadas, mientras que el marco metodológico destaca un enfoque integral de aprendizaje a lo largo de proyectos prácticos. El desarrollo de la práctica se detalla mes a mes, evidenciando la progresión en habilidades técnicas y competencias profesionales. Los resultados de aprendizaje incluyen un dominio medio de las tecnologías anteriormente mencionadas, la gestión eficiente de herramientas y repositorios, así como competencias en trabajo colaborativo y gestión de proyectos.

INDICE DE CONTENIDO

INDICE DE CONTENIDO ............................................................................................................ 3 INDICE DE FIGURAS................................................................................................................... 5 Introducción .................................................................................................................................... 6 Declaración del Problema ............................................................................................................... 7 Objetivos ......................................................................................................................................... 8 Objetivo General ................................................................................................................. 8 Objetivos Específicos.......................................................................................................... 8 Marco Conceptual ........................................................................................................................... 9 Framework .......................................................................................................................... 9 Docker ................................................................................................................................. 9 Laravel ................................................................................................................................ 9 Vue.js ................................................................................................................................ 10 API .................................................................................................................................... 10 Node.js .............................................................................................................................. 11 Bases de datos SQL........................................................................................................... 11 Git ..................................................................................................................................... 11 GitHub............................................................................................................................... 12 JavaScript .......................................................................................................................... 13 HTML ............................................................................................................................... 13 CSS ................................................................................................................................... 14

Marco Metodológico ..................................................................................................................... 15 Desarrollo de la práctica ............................................................................................................... 16 Resultado de las prácticas ............................................................................................................. 18 Habilidades técnicas desarrolladas.................................................................................... 18 Competencias profesionales adquiridas ............................................................................ 21 Conclusión .................................................................................................................................... 23 Referencias .................................................................................................................................... 25

INDICE DE FIGURAS

Figura 1 Código Vue .................................................................................................................... 10 Figura 2 Proyecto en Git ............................................................................................................. 12 Figura 3 Código JavaScript ........................................................................................................ 13 Figura 4 GitHub Desktop ............................................................................................................ 19 Figura 5 Docker Desktop ............................................................................................................ 21

Introducción

El propósito de esta documentación es registrar y analizar en profundidad la enriquecedora experiencia de la práctica empresarial llevada a cabo en Panthera Hub, una destacada filial de Accedo Technologies especializada en el desarrollo web de aplicaciones. Durante mi participación en la empresa, asumí con entusiasmo el rol de practicante universitario en el dinámico y desafiante campo del desarrollo de software web.

A lo largo de seis meses, no solo contribuí al desarrollo de diversos proyectos, sino que también me sumergí de lleno en el aprendizaje y aplicación de habilidades avanzadas. Este documento detalla minuciosamente las actividades realizadas durante esta experiencia, destacando especialmente los conocimientos adquiridos en el uso de los frameworks de Laravel y Vue, así como su integración en proyectos concretos. Además, se presenta un registro exhaustivo de los resultados alcanzados durante este período, evidenciando de manera clara y precisa el progreso en mis habilidades técnicas y competencias profesionales.

El marco conceptual aborda las tecnologías clave y las herramientas utilizadas en los proyectos, ofreciendo una visión integral de mi inmersión en el entorno de desarrollo web. Por otro lado, el marco metodológico resalta el enfoque integral de aprendizaje adoptado, centrado en la participación en proyectos prácticos que permitieron consolidar los conocimientos teóricos adquiridos en la universidad.

Además del dominio adquirido en el uso de tecnologías específicas, este periodo de prácticas ha fortalecido mi capacidad para gestionar eficientemente herramientas y repositorios, así como para colaborar de manera efectiva en entornos de trabajo colaborativo y la gestión de proyectos. Estos resultados de aprendizaje no solo son valiosos desde el punto de vista técnico, sino que también han contribuido significativamente al desarrollo de habilidades blandas y competencias esenciales en el ámbito profesional.

En resumen, esta experiencia en Panthera Hub no solo representó una oportunidad para aplicar conocimientos académicos en un entorno empresarial real, sino que también fue un período de crecimiento personal y profesional, consolidando mi posición como un profesional competente y versátil en el campo del desarrollo web.

Declaración del Problema Durante mi participación en Panthera Hub, me enfrenté a un desafío significativo que se ha convertido en el punto central de esta documentación. La complejidad del desarrollo web de aplicaciones, en particular, la integración de los frameworks Laravel y Vue en proyectos específicos, reveló áreas de mejora y oportunidades para optimizar procesos. Este desafío técnico no solo destacó la importancia de adquirir habilidades avanzadas, sino que también subrayó la necesidad de abordar eficazmente los obstáculos que surgen en el entorno dinámico del desarrollo de software

Objetivos

Objetivo General

Desarrollar competencias avanzadas y conocimientos prácticos en la creación de aplicaciones empresariales mediante la implementación de las mejores prácticas en el desarrollo web full stack, específicamente utilizando las tecnologías Laravel y Vue. Objetivos Específicos Aprender a configurar y utilizar Laravel y Vue.js para desarrollar aplicaciones web full stack, abarcando desde la configuración inicial hasta la implementación eficiente de modelos, vistas, controladores y rutas.

Desarrollar competencias en el uso de herramientas clave, como Git y Composer, Docker, gestores de bases de datos, y editores de código para el desarrollo eficiente de aplicaciones web.

Aplicar de manera efectiva los principios de programación en el desarrollo web con Laravel y Vue.js, optimizando la estructura del código.

Aplicar conocimientos en proyectos web reales, desarrollando habilidades en la resolución de problemas y la toma de decisiones en situaciones prácticas.

Marco Conceptual Framework Un framework es un entorno o marco de trabajo, un conjunto de prácticas, conceptos y criterios estandarizados a seguir. Siguiendo unas reglas, el framework nos obliga a utilizar buenas prácticas para nuestro código. Además, los frameworks proporcionan herramientas ya desarrolladas, funciones comunes en todos los proyectos (Bello, 2021).

Docker El término "Docker" se aplica a diferentes conceptos, entre los que se incluyen un proyecto de la comunidad open source y sus herramientas; Docker Inc., la principal empresa promotora del proyecto; y las herramientas que la empresa respalda formalmente. El hecho de que las tecnologías y la compañía compartan el mismo nombre puede ser confuso. (Red Hat,

2023)

Laravel “Laravel es un framework PHP multiplataforma para construir aplicaciones web.” (Kinsta Inc, 2022) Proporciona una base sólida para el desarrollo de aplicaciones web escalables y seguras, utilizando patrones de diseño modernos y una sintaxis expresiva. Laravel se destaca por su enfoque en la simplicidad y la facilidad de uso, ofreciendo una curva de aprendizaje relativamente suave y una comunidad activa de desarrolladores.

Vue.js Vue.js es un framework JavaScript de código abierto para crear interfaces de usuario interactivas y dinámicas. Se caracteriza por su enfoque progresivo, siendo adecuado tanto para pequeñas adiciones a páginas HTML existentes como para aplicaciones web de una sola página completas. Vue.js es popular por su simplicidad, flexibilidad y rendimiento. (Abdelrahman Awad, n.d.)

Figura 1 Código Vue

Nota: Código en Vue para mostrar las categorías de una tienda

API

“El término API significa Application Programming Interface” (SYDLE, 2023), que en español significa interfaz de programación de aplicaciones. Es un conjunto de funciones y

procedimientos utilizados para desarrollar e integrar software de aplicaciones, permitiendo la comunicación entre productos y servicios de una aplicación y otra.

Node.js Node.js es un entorno de ejecución de JavaScript de código abierto y multiplataforma que permite ejecutar código JavaScript fuera del navegador web. Está construido sobre el motor V8 de Chrome y utiliza un modelo de programación de eventos asíncronos. Node.js es popular para desarrollar aplicaciones de red y del lado del servidor escalables y de alto rendimiento. (Herrera,

2023)

Bases de datos SQL SQL es un acrónimo en inglés para Structured Query Language. Un Lenguaje de Consulta Estructurado. Un tipo de lenguaje de programación que permite manipular y descargar datos de una base de datos. Tiene capacidad de hacer cálculos avanzados y álgebra. Es utilizado en la mayoría de las empresas que almacenan datos en una base de datos. Ha sido y sigue siendo el lenguaje de programación más usado para bases de datos relacionales. (Datademia, 2022)

Git Git es un sistema de control de versiones distribuido, lo que significa que un clon local del proyecto es un repositorio de control de versiones completo. Estos repositorios locales

permiten trabajar sin conexión o de forma remota con facilidad. “Al comienzo puede ser tentador pensar que Git y GitHub son lo mismo. Pero en realidad no lo son.” (Castellanos, 2021) Figura 2 Proyecto en Git

GitHub GitHub es una plataforma de alojamiento propiedad de Microsoft que ofrece a los desarrolladores la posibilidad de crear repositorios de código y guardarlos en la nube de forma segura, utilizando el sistema de control de versiones Git. Facilita la organización de proyectos y permite la colaboración en tiempo real entre varios desarrolladores.

JavaScript “JavaScript es un lenguaje de programación utilizado para hacer páginas web interactivas.” (Amazon Web Services, 2022) Desde actualizar fuentes de redes sociales hasta mostrar animaciones y mapas interactivos, las funciones de JavaScript mejoran la experiencia del usuario en un sitio web. Como lenguaje de scripting del lado del servidor, es una de las principales tecnologías de la World Wide Web.

Figura 3 Código JavaScript

HTML

HTML es la sigla en inglés de HyperText Markup Language, que traducido en español significa "lenguaje de marcado de hipertexto". “Este es el lenguaje que utilizan las aplicaciones

para representar documentos que pueden ser fácilmente interpretados por los navegadores web.” (Nachec & IsraFloores, 2023)

CSS

“CSS, abreviado en sus siglas en inglés como Cascading Style Sheets, que significa hojas de estilo en cascada” (Arimetrics, 2023), es una función que se agrega a HTML y proporciona tanto a los desarrolladores como a los usuarios más control sobre cómo se muestran las páginas. Con CSS, los diseñadores y los usuarios pueden crear hojas de estilo que definen cómo aparecen los diferentes elementos en una página web, permitiendo optimizarla para mejorar su posicionamiento.

Marco Metodológico A lo largo de un periodo de seis meses de prácticas universitarias en Panthera Hub, se implementó un programa exhaustivo de aprendizaje y desarrollo centrado en las tecnologías esenciales de Laravel, Vue.js y Node.js. Durante este periodo, las actividades abarcan desde la introducción inicial a estas tecnologías hasta su aplicación avanzada en proyectos prácticos y desafiantes.

El enfoque metodológico incluyó la ejecución de proyectos específicos, la contribución y mejora significativa a aplicativos existentes y el continuo fortalecimiento de habilidades en el manejo de herramientas de desarrollo como Git y GitHub. Se hizo hincapié en la resolución eficiente de problemas en el código, la mejora constante de habilidades en JavaScript y la participación en la gestión de repositorios.

Un aspecto crítico fue el monitoreo constante del progreso, tanto desde la perspectiva de la empresa, donde las tareas eran asignadas y revisadas por los superiores, como desde la oficina de prácticas, donde se presentaban informes y se llevaban a cabo reuniones periódicas. Estas reuniones, con la participación del tutor y el jefe inmediato de la empresa, garantizaron un seguimiento efectivo, asegurando el cumplimiento de las tareas asignadas y el éxito del proceso de prácticas universitarias. Este enfoque completo facilitó una integración eficaz entre la teoría y la práctica, asegurando un desarrollo progresivo y exitoso a lo largo de la experiencia de prácticas universitarias.

Desarrollo de la práctica Durante el periodo de prácticas universitarias en Panthera Hub, filial de Accedo Technologies, se llevó a cabo un proceso integral de aprendizaje y desarrollo en el campo del software web. A lo largo de seis meses, el rol como practicante universitario se enfocó en el aprendizaje y aplicación de tecnologías clave, con énfasis en Laravel, Vue.js y Node.js.

En el primer mes, se dedicó tiempo a un entrenamiento intensivo en las tecnologías Laravel, Vue.js y Node.js. Este proceso se llevó a cabo a través de un curso dirigido por uno de los desarrolladores de la empresa, seguido de la implementación de estos conocimientos en un proyecto específico. Se establecieron objetivos específicos según condiciones predefinidas, los cuales sirvieron como guía para la aplicación práctica de las tecnologías aprendidas. Además, se adquirieron habilidades en el uso de herramientas de desarrollo como Visual Studio y Wamp, y se incorporaron prácticas efectivas de control de versiones con Git y GitHub. Las sesiones de capacitación con el jefe proporcionaron un espacio para resolver dudas y acelerar el proceso de aprendizaje.

Durante el segundo, tercer y cuarto mes, se asignó al practicante a un proyecto existente centrado en la creación de páginas web utilizando HTML y JavaScript. Se realizaron contribuciones significativas mediante la actualización de código antiguo para garantizar su correcto funcionamiento. El enfoque continuó en el dominio de Laravel, Vue.js y JavaScript, participando activamente en pequeñas tareas dentro de los proyectos de la empresa. Se contribuyó al control de versiones con Git y GitHub.

El tercer mes incluyó actividades didácticas para niños utilizando JavaScript, HTML, JavaScript y CSS, donde se implementan características en un aplicativo según el diseño gráfico recibido. También se llevó a cabo la edición de contenido multimedia para actividades, incluyendo la generación de audios con software generador de voz. La gestión de repositorios con Git y GitHub continuó siendo una parte integral de las actividades.

En el cuarto mes, se enfocó en la gestión eficiente de repositorios con Git y GitHub, y se inició el aprendizaje del idioma inglés trabajando en una aplicación educativa. Se resolvieron problemas en el código, se mejoraron las habilidades en JavaScript con la creación de juegos básicos, y se crearon actividades didácticas adicionales con JavaScript, HTML y CSS. La verificación de calidad de software se llevó a cabo mediante pruebas, y también se realizó la edición de imágenes y contenido multimedia.

En el último mes de prácticas, fui asignado al proyecto denominado "Levely", el cual utiliza las tecnologías Laravel, Vue y Blade, además de Docker para garantizar su funcionamiento correcto. En este proyecto, se me encomendaron diversas tareas, destacándose la creación de un nuevo menú orientado a la información del usuario.

Este nuevo menú no solo ofrecía una experiencia mejorada para el usuario al proporcionar información relevante, sino que también permitía al usuario acceder a otro menú específico. En este segundo menú, el usuario tenía la capacidad de listar y administrar otros usuarios. La implementación de estas funciones implicó la creación y configuración de

controladores, rutas, vistas, modelos, request, y la gestión de condicionales para manejar posibles errores.

Resultado de las prácticas Este proceso no solo me brindó la oportunidad de aplicar y consolidar mis conocimientos en Laravel, Vue y Blade, sino que también me permitió familiarizarme con el entorno Docker y la integración de diversas capas de la aplicación. La resolución de tareas complejas y la gestión eficiente de los distintos elementos del proyecto contribuyeron significativamente a mi desarrollo práctico y a la comprensión integral de la implementación de proyectos web con estas tecnologías. Este último mes en "Levely" representó un valioso capítulo en la integración de teoría y práctica a lo largo de mi experiencia de prácticas universitarias.

Habilidades técnicas desarrolladas Desarrollo Intermedio con Laravel y Vue.js: Se alcanzó un nivel intermedio en la utilización de Laravel y Vue.js, destacándose en la participación en proyectos reales y en la superación de desafíos específicos inherentes a estas tecnologías.

Dominio de Herramientas de Desarrollo: Se adquirió profundo conocimiento en el manejo de herramientas esenciales de desarrollo, tales como Visual Studio, Wamp y Git. Estas herramientas se aplicaron de manera efectiva durante la ejecución de proyectos, contribuyendo al desarrollo eficiente y organizado.

Gestión Efectiva de Repositorios: Se demostró una competencia destacada en la gestión de repositorios utilizando Git y GitHub. Este dominio aseguró un control preciso de versiones y facilitó la colaboración efectiva en equipos de desarrollo, consolidando la importancia de las buenas prácticas en el control de código fuente.

Figura 4 GitHub Desktop

Nota: Se puede observar los distintos repositorios en los cuales se colaboro

Desarrollo Front-end y Back-end: Se fortalecieron habilidades tanto en el desarrollo front-end, con un enfoque especial en JavaScript y Vue.js, como en el back-end, a través del uso de Laravel y Node.js. Esta versatilidad en el manejo de ambas capas del desarrollo web amplió mi capacidad para crear soluciones integrales y funcionales.

Resolución de Problemas de Código: La habilidad para identificar y resolver eficientemente incidencias en el código experimentó un notable mejoramiento. Este progreso reflejó un enfoque analítico y resolutivo, destacándose en la capacidad para abordar y superar obstáculos en el desarrollo de software de manera efectiva.

Gestión Avanzada de Repositorios con Git y GitHub: Se alcanzó un nivel avanzado en la gestión de repositorios utilizando Git y GitHub. Esta habilidad permite un control preciso de versiones, la implementación de ramas efectivas y la colaboración eficiente en equipos de desarrollo distribuidos. Se destacó en la adopción de buenas prácticas, como la creación de pull requests y la resolución efectiva de conflictos.

Dominio en el Uso de Docker: Se adquirió un dominio completo en el uso de Docker para la creación, implementación y ejecución de aplicaciones en entornos contenerizados. La experiencia incluyó la configuración de contenedores, la gestión de imágenes y la orquestación eficiente de servicios, evidenciando la capacidad para optimizar el desarrollo y despliegue de aplicaciones en diferentes entornos.

Figura 5 Docker Desktop

Estas competencias avanzadas en la gestión de repositorios con Git y GitHub, así como en el uso efectivo de Docker, fortalecieron significativamente mi capacidad para colaborar en equipos de desarrollo, implementar prácticas de CI/CD (Integración Continua/Despliegue Continuo) y garantizar la portabilidad y consistencia en el despliegue de aplicaciones.

Competencias profesionales adquiridas Trabajo Colaborativo: La participación en proyectos existentes y la contribución al trabajo en equipo fueron fundamentales para el desarrollo de habilidades de colaboración y comunicación efectiva. La capacidad para trabajar de manera conjunta, compartir conocimientos y resolver desafíos en conjunto se fortaleció a lo largo de las prácticas universitarias.

Gestión de Proyectos: Se adquirió experiencia práctica en la gestión integral de proyectos, desde la planificación inicial hasta la entrega final. Este proceso incluyó la definición de objetivos, asignación de tareas, seguimiento de avances y garantía del cumplimiento de plazos y requisitos establecidos. La habilidad para coordinar y liderar equipos en la ejecución de proyectos fue una competencia clave desarrollada durante estas prácticas.

Adaptabilidad y Aprendizaje Continuo: La exposición a diversos proyectos y la resolución de problemas en entornos cambiantes promovieron un aprendizaje continuo y una rápida adaptación a nuevas situaciones. La capacidad para asimilar rápidamente nuevas tecnologías, enfrentar desafíos inesperados y aprender de manera constante se convirtieron en componentes esenciales de mi desarrollo profesional.

Los resultados de aprendizaje obtenidos durante las prácticas universitarias reflejan un crecimiento sustancial en habilidades técnicas y competencias profesionales, consolidando una base sólida para el desarrollo futuro en el campo del desarrollo de software. Estas competencias no solo son aplicables al ámbito técnico, sino que también contribuyen a mi capacidad para colaborar efectivamente en equipos multidisciplinarios y abordar de manera exitosa proyectos desafiantes.

Conclusión A lo largo de las prácticas universitarias en Panthera Hub, filial de Accedo Technologies, he experimentado un significativo crecimiento tanto a nivel técnico como profesional. La inmersión en proyectos reales utilizando tecnologías clave como Laravel, Vue.js, y Node.js me proporcionó un sólido conjunto de habilidades en el desarrollo web full-stack.

En cuanto a las tecnologías específicas, logré un desarrollo intermedio en Laravel y Vue.js, destacándose en la resolución de desafíos específicos y contribuyendo activamente a la ejecución de proyectos reales. La aplicación práctica de estas tecnologías no solo fortaleció mi conocimiento técnico, sino que también me permitió adentrarme en el mundo de Docker, optimizando así la implementación de aplicaciones en entornos contenerizados.

Además, la gestión avanzada de repositorios utilizando Git y GitHub se convirtió en una competencia esencial, asegurando un control preciso de versiones y una colaboración efectiva en equipos distribuidos. La experiencia adquirida en la planificación y ejecución de proyectos consolidó mis habilidades en la gestión integral, desde la definición de objetivos hasta la entrega final, cumpliendo con plazos y requisitos establecidos.

El trabajo colaborativo en proyectos existentes fomenta el desarrollo de habilidades de comunicación efectiva y trabajo en equipo. La adaptabilidad y la capacidad de aprendizaje continuo fueron esenciales para enfrentar desafíos en entornos cambiantes, demostrando una rápida adaptación a nuevas tecnologías y situaciones.

En resumen, las prácticas universitarias no solo contribuyeron al avance de mis habilidades técnicas, sino que también fortalecieron competencias fundamentales para el ámbito profesional, como el trabajo colaborativo, la gestión de proyectos, la adaptabilidad y el aprendizaje continuo. Estas experiencias sientan una base sólida para mi desarrollo futuro en el campo del desarrollo de software, proporcionando una valiosa integración entre la teoría académica y la aplicación práctica en proyectos del mundo real.

Referencias Abdelrahman Awad. (n.d.). Custom Inputs. VeeValidate. Retrieved January 12, 2024, from https://vee-validate.logaretm.com/v4/examples/custom-inputs/ Amazon Web Services. (2022). ¿Qué es JavaScript? - Explicación de JavaScript (JS). AWS. Retrieved January 15, 2024, from https://aws.amazon.com/es/what-is/javascript/ Arimetrics. (2023). Qué es CSS - Definición, significado y ejemplos. Arimetrics. Retrieved January 15, 2024, from https://www.arimetrics.com/glosario-digital/css Castellanos, E. (2021, February 14). Git vs GitHub – ¿Qué es el Control de Versiones y Cómo Funciona? freeCodeCamp. Retrieved January 12, 2024, from https://www.freecodecamp.org/espanol/news/git-vs-github-what-is-version-control-and-howdoes-it-work/ Datademia. (2022, 02 20). ¿Qué es SQL? Datademia. Retrieved January 12, 2024, from https://datademia.es/blog/que-es-sql Herrera, D. C. (2023, April 19). Qué es Node.js - Guía para principiantes (+ casos de uso). Hostinger. Retrieved January 12, 2024, from https://www.hostinger.co/tutoriales/que-esnode-js Kinsta Inc. (2022, November 29). El Framework PHP Laravel - Construcción de Aplicaciones Web Para Todos. Kinsta. Retrieved January 12, 2024, from https://kinsta.com/es/base-de-conocimiento/que-es-laravel/ Manz. (n.d.). ¿Qué es Vue? - Javascript en español. Lenguaje JS. Retrieved January 12, 2024, from https://lenguajejs.com/vuejs/introduccion/que-es-vue/

Nachec, & IsraFloores. (2023, July 18). Conceptos básicos de HTML - Aprende desarrollo web | MDN. MDN Web Docs. Retrieved January 12, 2024, from https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics Ramos, M. (2023, September 14). Comprender Laravel Blade y Cómo Usarlo. Kinsta. Retrieved January 12, 2024, from https://kinsta.com/es/blog/laravel-blade/ Red Hat. (2023, January 20). ¿Qué es Docker y cómo funciona? Ventajas de los contenedores Docker. Red Hat. Retrieved January 12, 2024, from https://www.redhat.com/es/topics/containers/what-is-docker SYDLE. (2023, September 26). ¿Qué es API? Ejemplos, ventajas y tipos. sydle. Retrieved January 15, 2024, from https://www.sydle.com/es/blog/api- 6214f68876950e47761c40e7