apoyo ingenieril a la empresa fosterapps en el proceso de
TRANSCRIPT
Apoyo ingenieril a la empresa FosterApps en el proceso de Quality Assurance de
producto (Asegurador de la calidad).
Practica Social, Empresarial o Solidaria
Andrés Ernesto Bermúdez Ramírez
Universidad Cooperativa De Colombia
Facultad De Ingeniería
Ingeniería De Sistemas
Villavicencio
2018
Apoyo ingenieril a la empresa FosterApps en el proceso de Quality Assurance de
producto (Asegurador de la calidad).
Practica Social, Empresarial o Solidaria
Andrés Ernesto Bermúdez Ramírez
Tutor:
Josué Guillermo Cucaita Murcia
Ingeniero de Sistemas
Universidad Cooperativa de Colombia
Facultad de Ingeniería
Programa de Ingeniería de Sistemas
Villavicencio, Meta
2018
iii
Resumen
FOSTERAPPS S.A.S, es una organización caracterizada por implementar el Desarrollo de
software, como vía eficaz de construcción y regularidad de los diferentes sitios Web y
aplicaciones móviles. La empresa en mención se acentúa por su producto principal denominado
Komercia, el cual hace referencia a una plataforma online, en la cual los usuarios pueden
registrarse y fundar tiendas virtuales para la venta de productos y/o servicios. (adicional la
empresa presta servicio de ingeniería a entidades gubernamentales, empresas privadas, como
inmobiliarias, aseguradoras, etc.)
Dado lo mencionado anteriormente, es necesario enfatizar en la estrategia del Quality
Assurance (QA), como el proceso de garantía de la funcionalidad y desempeño de los diferentes
productos de software vinculados a la plataforma Komercia, teniendo en cuenta la gran cantidad
de documentación e información sensible, razón por la cual se es necesario controlar, gestionar y
corroborar el correcto funcionamiento de la plataforma para garantizar el cumplimiento y la
optimización del ciclo vital del producto generado.
El desarrollo de la práctica se encuentra alineado al marco de trabajo de FOSTERAPPS
S.A.S, proseguida de actividades planificadas y procedimientos debidamente documentados y de
esta manera, ofrecer una solución integral y eficaz que supla la necesidad a más de 250 usuarios
vinculados a la plataforma Komercia.
iv
Tabla de contenido
1.Descripción y naturaleza de la organización ............................................................................... 1
2.Información de la empresa ........................................................................................................... 1
2.1 Misión ........................................................................................................................... 3
2.2 Visión ............................................................................................................................ 4
2.3 Organigrama ................................................................................................................. 4
2.4 Objetivos estratégicos ................................................................................................... 6
2.5 Valores de FosterApps .................................................................................................. 6
2.6 Cláusula de confidencialidad ........................................................................................ 7
3. Requisitos de la organización ..................................................................................................... 8
3.1 Perfil del asegurador de calidad – Quality Assurance (QA) ......................................... 8
4. Funcionalidades, características y restricciones ....................................................................... 10
4.1 Scrum .......................................................................................................................... 10
4.2 Requisitos tecnológicos .............................................................................................. 11
5. Plan de acción ........................................................................................................................... 13
6. Actividades realizadas .............................................................................................................. 14
6.1 Introducción a la plataforma Komercia ...................................................................... 14
6.2 Informe de errores ..................................................................................................... 17
6.3 Migración a tiendas Komercia .................................................................................... 20
6. 4 Otras actividades .................................................................................................... 3626
v
6.4.1 Introducción a nuevas herramientas tecnológicas para el desarrollo Web
(Framework,VUE.JS) ............................................... ¡Error! Marcador no definido.27
6.4.2 Capacitación HTML5, CSS3, JAVASCRIPT…...……………………………...38
6.4.3 Búsqueda de posibles clientes ......................................................................... 3838
6.4.4 Creación de herramientas para capacitación en el uso de la plataforma
Komercia.. ................................................................................................................... 3939
7. Logros y lecciones aprendidas .............................................................................................. 4444
8. Limitaciones, conclusiones y recomendaciones ....................................................................... 45
8.1 Limitaciones .............................................................................................................. 4645
8.2 Conclusiones.................................................................................................................. 45
8.3 Recomendaciones ...................................................................................................... 4747
9. Bibliografía ............................................................................................................................... 48
10. Anexos .................................................................................................................................... 49
10.1 Anexo A. Acta de inicio modalidad de grado ........................................................... 49
10.2 Anexo B. Compromiso de confidencialidad FosterApps S.A.S ........................... 5252
10.3 Anexo c. Certificado de Práctica FosterApps S.A.S ................................................. 53
10.4 Certificado autorización asesor de grado .................................................................. 54
10.5 Carta de aprobación metodologica ............................................................................ 55
vi
Índice de tablas
Tabla 1. Cronograma de actividades ........................................................................................ 13
vii
Índice de figuras
Figura 1. Logo de ParqueSoft Meta.Adaptado de (PARQUESOFT, 2017 ). ¡Error! Marcador
no definido.
Figura 2. Logo de FosterApps. Adaptado de (FOSTERAPPS, 2015) …………………...……2
Figura 3. Organigrama FOSTERAPPS. Adaptado de (2015) ................................................... 5
Figura 4. Logo Plataforma Komercia. Adaptado de (KOMERCIA, 2017 ) ............................ 11
Figura 5. Página principal Komercia. Adaptado de (Komercia, 2017) ...……………………12
Figura 6. Panel Login Komercia. Adaptado de (Komercia, 2017).. ........................................ 12
Figura 7. Página principal Komercia. Adaptado de (Komercia, 2017).. ................................. 14
Figura 8. Login Komercia. Adaptado de (Komercia, 2017).. .................................................. 15
Figura 9. Panel de control tienda creada en Komercia. Adaptado de (Komercia, 2017).. ...... 15
Figura 10. Editor de plantilla tienda creada en Komercia. Adaptado de (Komercia, 2017).. . 16
Figura 11. Inventario tienda creada en Komercia. Adaptado de (Komercia, 2017).. .............. 16
Figura 12. Panel plataforma Komercia.. .................................................................................. 17
Figura 13. Panel plataforma Komercia .................................................................................... 18
Figura 14. Panel plataforma Komercia, agregar banner.. ........................................................ 18
Figura 15. Panel ventas plataforma Komercia......................................................................... 19
Figura 16. Tienda plataforma Komercia.. ............................................................................... 19
Figura 17. Plantilla plataforma Komercia.. ............................................................................. 20
Figura 18. Super panel administración de tiendas creadas en Komercia ................................ 21
Figura 19. Lista de tiendas creadas en Komercia. Adaptado de (Komercia, 2017).. .............. 22
Figura 20. Lista de tiendas creadas en Komercia. Busqueda especifica ................................. 22
Figura 21. Lista de tiendas creadas en Komercia. Busqueda especifica.. ............................... 23
Figura 22. Vinculando otro admin a tienda Komercia. Adaptado de (Komercia, 2017).. ...... 23
Figura 23. Admin vinculado a tienda Komercia. Adaptado de (Komercia, 2017) .................. 24
Figura 24. Migración tienda Komercia. Adaptado de (Komercia, 2017).. .............................. 24
Figura 25. Visualización plantilla N° 1 tienda Komercia. Adaptado de (Komercia, 2017).. .. 25
Figura 26. Editor plantilla actualziada tienda Komercia. Adaptado de (Komercia, 2017)... .. 25
Figura 27. Tienda migrada a su nueva plantilla Komercia. Adaptado de (Komercia, 2017) .. 26
Figura 28. Logo VUE.JS. Adaptado de (VUE.JS, 2014)... ..................................................... 27
viii
Figura 29. Página principal VUE.JS. Adaptado de (VUE.JS, 2014)... .................................... 28
Figura 30. Guía de instalación VUE.JS. Adaptado de (VUE.JS, 2014)... ............................... 29
Figura 31.Descarga CLI-VUE.JS. Adaptado de (VUE.JS, 2014)... ........................................ 29
Figura 32. Repositorio GitHub VUE.JS... ............................................................................... 30
Figura 33. Página de descarga NODE.JS... ............................................................................. 30
Figura 34. Instalación paso a paso NODE.JS... ....................................................................... 31
Figura 35. Instalación paso a paso NODE.JS.. ........................................................................ 31
Figura 36. Instalación paso a paso NODE.JS... ....................................................................... 32
Figura 37. Instalación paso a paso NODE.JS... ....................................................................... 32
Figura 38. Instalación paso a paso NODE.JS... ....................................................................... 33
Figura 39. Instalación paso a paso NODE.JS.. ........................................................................ 33
Figura 40. Instalación paso a paso NODE.JS.. ........................................................................ 34
Figura 41.Verificación instalación NODE.JS.. ....................................................................... 34
Figura 42. Instalación del generador de proyectos de VUE.JS... ............................................ 35
Figura 43.Instalación terminada [email protected]... .............................................................. 35
Figura 44. Creando primer proyecto VUE.JS... ...................................................................... 37
Figura 45. Verificación proyecto creado en VUE.JS... ........................................................... 37
Figura 46. Primer proyecto creado en VUE.JS desde el editor VISUAL STUDIO CODE... . 38
Figura 47. Creación vídeo tutoriales Komercia. Camtasia Studio... ....................................... 40
Figura 48. Creación vídeo tutoriales Komercia, panel de control. Camtasia Studio... ............ 41
Figura 49. Creación vídeo tutoriales Komercia, agregar producto. Camtasia Studio... .......... 41
Figura 50. Creación vídeo tutoriales Komercia. Camtasia Studio.... ...................................... 42
Figura 51. Creación vídeo tutoriales Komercia. Camtasia Studio... ....................................... 42
Figura 52. Video tutorial creado Komercia. Camtasia Studio... .............................................. 43
Figura 53. Video tutorial Komercia desde el reproductor de Windows. Camtasia Studio...... 43
ix
Índice de anexos
• Anexo A. Acta de inicio .................................................................................................... 49
• Anexo B. Compromiso de confidencialidad FOSTERAPPS ........................................... 52
• Anexo C. Certificado de Practica FOSTERAPPS ............................................................ 54
• Anexo D. Certificado autorización asesor de grado ........................................................... 55
• Anexo E. Carta de aprobación metodologica ..................................................................... 56
Otros anexos
• Manual de usuario Komercia
x
Glosario
• Git extensions: Plataforma de desarrollo colaborativo para el control de cambios en sitio
de un proyecto.
• GitHub: Herramienta para alojar en la nube una gran cantidad de información.
• Git commit: Es un paquete de cambios realizados en el proyecto alojados en el
escritorio.
• Git init: Se inicia GIT en la carpeta donde está el proyecto.
• Git clone: Se clona el repositorio de github o bitbucket.
• Git push origin master: Se sube al repositorio.
• Git add: Se añaden todos los archivos para el commit.
• Npm install -G vue-cli: Permite instalar un generador de proyectos de VUE.JS.
• Vue init webpack nombre_proyecto: Se crea proyecto en VUE.JS
1
1. Descripción y naturaleza de la organización
2. Información de la empresa
ParqueSoft Meta, es una organización de carácter privado integrada por instituciones de
alto prestigio en el Departamento del Meta, como son la Cámara de Comercio de Villavicencio, la
Empresa Electrificadora del Meta, la Universidad de los Llanos, Gases del Llano S.A., entre otras,
especializada en la gestión de las tecnologías y su relación con el desarrollo económico y social,
es una entidad que durante los últimos 5 años ha demostrado liderazgo y participación activa en la
Red Regional de Emprendimiento del Departamento del Meta y en el Consejo Departamental de
Ciencia, Tecnología e Innovación – CODECTI Meta. La entidad se ajusta a los criterios de
selección sugeridos por el Min Tic como entidad ejecutora para la convocatoria VDR.
Figura 1. Logo de PARQUESOFT META. Recuperado de http://parquesoftmeta.com/
2
ParqueSoft Meta, se encuentra ubicada en la Cr 28 No 46 - 47 – Barrio Caudal en la ciudad
de Villavicencio, Departamento del Meta. Actualmente, la organización en mención cuenta con
una página Web oficial: http://www.parquesoftmeta.com/
Ahora bien, en lo que se refiere a FosterApps S.A.S, es una empresa colombiana líder
fundada en la ciudad de Villavicencio, Meta; la cual cuenta con más de 3 años de experiencia.
Figura 2. Logo de FOSTERAPPS. Adaptado de (FOSTERAPPS, 2015).
La cual se encuentra ubicada en la Cr 28 No 46 - 47 – Barrio Caudal en la ciudad de
Villavicencio, Departamento del Meta. Su página web oficial es http://www.fosterapps.com/
Se caracteriza por ofrecer una serie de asesorías, desarrollo, soporte y acompañamiento en
cualquier tipo de proyecto Web (Páginas Web). Actualmente, FosterApps está conformada por un
equipo de profesionales eficientes que hacen posible la solución de las necesidades informáticas,
dentro de los cuales se destaca profesionales especializados en diseño gráfico, área de mercadeo,
ingenieros especializados en el desarrollo Web, entre otros. Es importante mencionar que las
principales actividades por la cual se fundamenta FosterApps son el Desarrollo Web, Marketing
digital, entre otros.
3
Básicamente las destrezas del equipo de talento humano perteneciente a FosterApps
comprenden diversas áreas de experiencia, diseño interactivo, experiencia de usuario, desarrollo
Web y móvil.
A la fecha se cuenta con los más altos estándares de desarrollo en programación y diseño,
utilizando CSS3, HTML5, JAVASCRIPT, AJAX, PHP y MYSQL en entornos de servidor
LINUX. Además, se tiene experiencia en el manejo con Framework como VUE.JS, LARABEL Y
REACT NATIVE. FosterApps, se encuentra a la vanguardia del mercado y se basa en ser un
equipo de trabajo que utiliza la organización por manejo FRONT-END y BACK-END.
2.1 Misión
FosterApps S.A.S, es una empresa especializada en el diseño, desarrollo, actualización e
implementación de estrategias efectivas de desarrollo de software. Nuestra misión es brindar
soluciones avanzadas de mercadeo y publicidad online a través de nuestra plataforma Komercia,
garantizando como eje fundamental al desarrollo integral de nuestros clientes un servicio de alta
calidad, tecnologías más innovadoras y un equipo de trabajo con espíritu de servicio con la
finalidad de mejorar la competitividad y productividad de nuestra empresa, logrando el
crecimiento organizacional de nuestros usuarios y/o clientes.
Nuestros servicios profesionales parte del aprovechamiento de las redes sociales
destacándose por la atención personalizada a nuestros clientes, aplicando las mejores prácticas,
procesos y tecnologías disponibles en el desarrollo Web.
4
2.2 Visión
Ser reconocidos a nivel nacional e internacional como una de las empresas líderes en el
mercado de desarrollo de software, identificados por un alto nivel de productividad y
competitividad. Ofreciendo productos y servicios de calidad que nos convertirá en una solución
estratégica y rentable para nuestros clientes y/o usuarios, logrando cumplir con sus expectativas,
para lo cual se mantiene unos procesos de mejora continúa basados en la adaptación e innovación
de los estándares tecnológicos.
2.3 Organigrama
La estructura organizacional de FosterApps, se describe desde los componentes superiores
en secuencia descendente. En el siguiente organigrama más que estipular el orden jerárquico de la
organización se evidencia la distribución de las distintas áreas que conforman a FosterApps y que
con un trabajo en conjunto logran dar el funcionamiento de la empresa en mención.
Con base a lo mencionado anteriormente, FosterApps está estructurado de la siguiente
forma: el área de gerencia se encuentra a cargo del Ingeniero de sistemas Gustavo Moreno. Un
nivel descendente se localiza la CEO dirigida por Angelica Bohórquez, bajo el cargo de Jefe de
Finanzas.
5
Figura 3. Organigrama FOSTERAPPS. Adaptado de (FOSTERAPPS, 2015).
Como se observa en la figura 3, FosterApps se compone de tres divisiones; situándose el
área de Desarrolladores; el área Comercial y por último el área de Contabilidad. Es importante
mencionar que el área de Desarrollo está constituida por 2 dependencias, en primera instancia se
encuentra la unidad denominada como desarrollador de Front – end, la cual corresponde a aquellas
tecnologías que corren del lado del navegador Web del cliente y/o usuario, esta sección se
caracteriza por el abordaje de 3 lenguajes tales como HTML, CSS y JAVASCRIPT (FosterApps,
2015).
El personal a cargo del área de Front - end está en condiciones de estilizar la página Web
de tal manera que la página pueda quedar cómoda y accesible para el usuario, por lo cual es
indispensable el tener conocimiento y experticia en las técnicas de User Experience, interacción,
diseño Web y de lenguaje de transferencia de información como XML y JSON (FosterApps, 2015).
6
En segunda instancia se ubica la unidad de desarrollador de Back – end, la cual la hace
referencia al temario propio del servidor, el personal ubicado en esta área se encarga de interactuar
con las bases de datos, verificando el manejo de sesiones de los diferentes usuarios. El personal
especializado de esta dependencia se caracteriza por la experticia principalmente en 4 lenguajes
siendo PHP; PYTHON; NET y por último JAVA. En este caso se es preciso el conocimiento y
practica en las bases de datos, Frameworks y librerías entre otros, los cuales garanticen la
confidencialidad y seguridad de la información suministrada en las plataformas de la empresa
(FosterApps, 2015).
2.4 Objetivos estratégicos
• Generar confianza: este pilar es necesario e imprescindible; dado que permite que el cliente
se interese en los productos y/o servicios que se brinda a través de la plataforma Komercia.
• Promover talento digital: se fomentará la relación tecnológica entre los jóvenes a través
interacción de las redes sociales enlazadas con la plataforma Komercia.
• Desafiar las ideas tradicionales: somos emprendedores, innovadores y nuestro proceso
siempre termina con tu idea trasformada en un producto funcional, tangible y de alta
calidad.
2.5 Valores de FosterApps
Son una base fundamental para el funcionamiento óptimo de la empresa FosterApps, por lo cual
trabajan para proyectar a los clientes y/o usuarios los valores de:
• Creatividad
7
• Confianza
• Complicidad
• Profesionalidad
• Responsabilidad
• Respeto
2.6 Cláusula de confidencialidad
En cumplimiento de la ley 1581 del 2012 de protección de Datos Personales, el pasante tratará
toda la información y documentación que sea suministrada y/o tenga acceso de forma confidencial,
manteniéndose bajo el deber de secreto profesional, cuya obligación permanecerá aún después de
finalizar sus prácticas en la entidad.
Como consecuencia de los lineamientos de protección de propiedad intelectual o industrial, toda
información desarrollada en la entidad de FosterApps S.A.S es confidencial, la empresa en
mención se guarda el derecho de reservar los secretos corporativos detrás de este proyecto con la
finalidad de evitar la divulgación, copia, reproducción, duplicidad y/o modificación de estos.
Dado lo mencionado anteriormente, para garantizar la discreción de la información relevante a
los proyectos de la entidad de FosterApps, se realizó un acuerdo de confidencialidad y no
divulgación, al final del presente libro se anexa una copia del formato en donde se explican todos
los términos y condiciones de la cláusula (¡Error! No se encuentra el origen de la
referencia.¡Error! No se encuentra el origen de la referencia.).
8
3. Requisitos de la organización
El desarrollo de software es proclive a la existencia de errores y/o falencias en el código
originándose un “software defectuoso o en mal estado”, lo anterior logra desatar el funcionamiento
incorrecto del proyecto, pero ¿qué sucede con esos errores y/o fallas?
Generalmente, cuando esos tipos de errores no logran ser detectados a tiempo suelen provocar
un sobrecosto económico para la organización, afectando la economía e imagen de la entidad para
la cual se desarrolló; al suceder ese tipo de situación surgen preguntas como ¿existe algún tipo de
proceso y/o estrategia que permita la reducción de los riesgos del software defectuoso?
En el campo de la ingeniería de Software, no se debe de subestimar los errores de código, como
forma de dar un control a la problemática en mención, se ha implementado el software Quality
Assurance (AQ), siendo el plan de garantía de la calidad del software. El objetivo principal del
QA, es detectar los errores que se puedan presentar y lograr minimizar o neutralizar el daño que
pueda causar en el Software, es por ello que los QA se consideran parte esencial para una entidad
en el campo del desarrollo Web, situándose como eje entre la parte del mercado y soporte técnico
(Pujol, 2015).
3.1 Perfil del asegurador de calidad – Quality Assurance (QA)
El asegurador de calidad, es la persona encarga de supervisar, gestionar y dar resolución a
las problemáticas y/o falencias existentes con los Software, para lo cual deberá de realizar un
seguimiento constante al proceso de creación del software, con el objetivo de garantizar que el
9
producto esté terminado dentro del tiempo establecido y con la certeza de haber minimizado o
neutralizado las posibles fallas en el sistema (Ortiz, 2017).
En FosterApps, se desarrolla el QA como una herramienta fundamental de trabajo, dado que
con la implementación de este se logra garantizar que la entrega del software sea eficiente, seguro
y acorde a la necesidad del cliente y/o usuario. Es por ello que el ingeniero asegurador de calidad
debe de tener el siguiente perfil:
• Iniciativa y capacidad de aprendizaje continuo.
• Analizar, diseñar y ejecutar plan de pruebas sistemáticas del software.
• Realizar un registro y seguimiento de los errores y/o falencias detectadas en el Software.
• Forjar la creación de herramientas que promuevan el correcto uso de la plataforma.
• Identificar las necesidades del mercado, las tendencias de los clientes y/o consumidores.
• Realizar de forma constante informes acerca del estado actual de la empresa y de sus
productos.
• Vigilar que durante las fases de diseño y desarrollo del Software se cumpla con los
estándares establecidos.
• Documentar resultados obtenidos.
• Otras actividades relacionadas con Quality Assurance Software relacionadas con el
Marketing Digital, desarrollo Web entre otras.
Habilidades: Excelente ortografía, uso de herramientas de gestión de documentos, habilidades
de redacción, manejo de herramientas para el modelado.
10
Conocimientos técnicos en relación a: WORD, HTML, CSS, JAVASCRIP, Git Hub, Git
Extensions.
4. Funcionalidades, características y restricciones
Mediante el convenio de cooperación entre la Universidad Cooperativa de Colombia sede
Villavicencio y la empresa FosterApps S.A.S, el estudiante del programa de ingeniería de sistemas
ANDRES ERNESTO BERMUDEZ RAMIREZ, inició las actividades de su práctica social,
empresarial o solidaria como modalidad de grado, desempeñándose como asegurador de calidad
(QA) con la finalidad de generar un beneficio común dándose una solución a las necesidades de la
entidad contratante.
4.1 Scrum
El termino Scrum hace referencia al proceso en el que se aplican de manera regular un conjunto
de buenas prácticas para trabajar colaborativamente, en equipo, con el propósito de lograr el mejor
resultado posible de un proyecto lográndose satisfacer las necesidades y expectativas del cliente.
Estas prácticas se apoyan unas a otras promoviendo la colaboración en equipos, para lograr
desarrollar los productos y/o servicios, para lo cual se desarrolla equipos altamente productivos y
competitivos (Araque, 2017).
Una de las características principales del Scrum es su modelo de acción dado que tiende a
regirse por un proceso empírico, en el cual se constituye el respeto a las personas y la auto -
organización de los equipos de trabajo. Con el Scrum se realizan entregas parciales y regulares del
producto final, este tipo de proceso está dirigido para proyectos en entornos complejos, donde se
11
necesita adquirir resultados de forma casi inmediata. No obstante, el Scrum mantiene como pilar
fundamental la innovación, la competitividad, la flexibilidad y la productividad (Francia, 2017).
4.2 Requisitos tecnológicos
Las actividades que se realizan para el apoyo del área de asegurador de calidad están soportadas
por los recursos tecnológicos con los que dispone FosterApps, el cual cuenta con una sala de Vive
digital ubicada dentro de las instalaciones de ParqueSoft. Estos requerimientos están encaminados
a incorporar tecnologías de la información en herramientas que beneficien la optimización de las
actividades que se realizan directamente en la plataforma Komercia, entre otros.
Komercia es una plataforma revolucionaria de comercio electrónico centrada en cerrar la
brecha entre el mundo del comercio en línea y todos los negocios cotidianos, proporcionándoles
una plataforma Web robusta, escalable y fácil de usar para exhibir sus productos o servicios
(FOSTERAPPS, 2015).
Figura 4. Logo Plataforma Komercia. Adaptado de (Komercia, 2017).
Uno de los aspectos esenciales de la plataforma Komercia, es que ofrece a las MiPymes
hacer presencia en la Web, a través de un sitio Web y aplicación móvil, esta plataforma
proporciona como ventaja a los usuarios el lograr generar presencia de marca mediante la
generación de visitas a su tienda online.
12
Figura 5. Página principal Komercia. Adaptado de (Komercia, 2017).
Figura 6. Panel Login Komercia. Adaptado de (Komercia, 2017).
13
5. Plan de acción
Esta sección contiene la descripción de las actividades mencionadas en la propuesta de grado
para la ejecución de la Práctica social, empresarial o solidaria como Apoyo ingenieril a la empresa
FosterApps en el proceso de Quality Assurance de producto (Asegurador de la calidad).
Tabla 1
Semanas
Actividades 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Recolección
requerimientos e
información.
Organización de la
información.
Elaborar el informe del
estado actual de la empresa
FosterApps y productos de
Desarrollo Web que
maneja.
Elaboración del plan de
QA basado en estándares.
Operacionalizar de forma
adecuada el plan de
calidad de QA por el cual
se rija la empresa
FosterApss
Realizar el análisis de UX
(experiencia de usuario) y
estudio de mejoras
realizado por el plan de
calidad QA en la empresa
FosterApps
Entrega Final
14
6. Actividades realizadas
6.1 Recolección requerimientos e información
Para esta actividad fue indispensable realizar un reconocimiento de la plataforma
Komercia. Teniendo en cuenta lo anterior se logro evidenciar que cada vez son más los que se
atreven a comprar por internet y pensar que la red también puede ser un lugar seguro para
adquirir los productos y/o servicios que necesites en ese momento. Debes tener en cuenta que,
por norma general, los productos que pueden ser adquiridos en tienda física o virtual, suelen
tener un precio más económico si lo adquieres online, pues se abaratan muchos los costes para el
comerciante. Komercia es una plataforma que ayuda a crear y administrar tu propia tienda online
y en solo minutos tendrás todo lo necesario para empezar a vender por internet.
Figura 7. Página principal Komercia. Adaptado de (Komercia, 2017).
15
Figura 8. Login Komercia. Adaptado de (Komercia, 2017).
Figura 9. Panel de control tienda creada en Komercia. Adaptado de (Komercia, 2017).
16
Figura 10. Editor de plantilla tienda creada en Komercia. Adaptado de (Komercia, 2017).
Figura 11. Inventario tienda creada en Komercia. Adaptado de (Komercia, 2017).
17
6.2 Organización de la información.
Elaborar el informe del estado actual de la empresa FosterApps y productos de Desarrollo
Web que maneja.
Elaboración del plan de QA basado en estándares.
Para la ejecución de las actividades mencionadas anteriormente se realizó un Informe de
errores relacionados al estado actual de la empresa y su productor Web, siendo la plataforma
Komercia
Inventario-Productos-en el anuncio Organizar se encuentra la palabra "econtrarlos"
Figura 12. Panel plataforma Komercia.
18
El botón Enviado no funciona para cambiar el estado de las ventas
Figura 13. Panel plataforma Komercia.
No carga o se agregar el banner
Figura 14. Panel plataforma Komercia, agregar banner.
19
El botón "Enviado" no realiza ninguna función
Figura 15. Panel ventas plataforma Komercia.
En el carrito de compras se pierde "Mi pedido"
Figura 16. Tienda plataforma Komercia.
20
En la plantilla nueva en CONTACTO el placeholder dice “Comentrario”
Figura 17. Plantilla plataforma Komercia.
6.3 Operacionalizar de forma adecuada el plan de calidad de QA por el cual se rija
la empresa FosterApss
Realizar el análisis de UX (experiencia de usuario) y estudio de mejoras realizado por el plan
de calidad QA en la empresa FosterApps
Como parte de estas actividades, se desarrolló el plan de QA con la migración de las tiendas
Komercia a su nueva plantilla. La actualización de un software o aplicación web supone
el lanzamiento de una nueva versión que incluye más herramientas y soluciona fallos de la versión
precedente. Debido al constante avance de la tecnología, la mayoría de los programas informáticos
más populares se actualiza con frecuencia. Habitualmente, un proyecto de migración de datos se
lleva a cabo para reemplazar o actualizar servidores o equipos de almacenamiento, para una
21
consolidación de un sitio web, para llevar a cabo el mantenimiento de un servidor o para reubicar
un centro de datos.
En aras de mejorar la prestación del servicio a sus usuarios y clientes Komercia llevó a
cabo un proceso de migración a su nueva plantilla esperando la optimización y satisfacción de
sus clientes. Para lleva a cabo esta migración se realizó el siguiente proceso:
1. Ingresar a https://panel.komercia.co e ingresar usuario y contraseña.
2. Listar tiendas a migrar.
3. Vincular nuevo usuario como administrador de la tienda a migrar.
4. Actualizar panel de Komercia para tener acceso a la tienda a migrar.
5. Realizar cambio a la nueva plantilla dejando los mismos colores, tipo de letra,
banner, footer, etc.
Figura 18. Super panel administración de tiendas creadas en Komercia
22
Figura 19. Lista de tiendas creadas en Komercia. Adaptado de (Komercia, 2017).
Figura 20. Lista de tiendas creadas en Komercia. Busqueda especifica.
23
Figura 21. Lista de tiendas creadas en Komercia. Busqueda especifica. Adaptado de (Komercia, 2017).
Figura 22. Vinculando otro admin a tienda Komercia. Adaptado de (Komercia, 2017).
24
Figura 23. Admin vinculado a tienda Komercia. Adaptado de (Komercia, 2017).
Figura 24. Migración tienda Komercia. Adaptado de (Komercia, 2017).
25
Figura 25. Visualización plantilla N° 1 tienda Komercia. Adaptado de (Komercia, 2017).
Figura 26. Editor plantilla actualziada tienda Komercia. Adaptado de (Komercia, 2017).
26
Figura 27. Tienda migrada a su nueva plantilla Komercia. Adaptado de (Komercia, 2017).
27
Es importante mencionar que la realización de estas actividades se dio de forma parcial, lo
anterior se deriva dada una serie de circunstancias relacionadas con la dirección del área
administrativa de la organización FosterApps, debido a lo anterior, las actividades fueron limitadas
según la orientación de director de la empresa.
6.4 Actividades Complementarias
6.4.1 Introducción a nuevas herramientas tecnológicas para desarrollo web
(framework VUE.JS).
Figura 28. Logo VUE.JS. Adaptado de (VUE.JS, 2014).
Es un framework progresivo para crear interfaces de usuario. Fue creado por Evan You quien
trabajaba en Google realizando prototipos y en el core del Framework de Meteor, hasta que pensó
en otra forma de hacer una opción más fácil que abarcara las necesidades a la hora de hacer
prototipos. Así surgió Vue en el 2014, desde entonces ha tenido una gran evolución y sigue
creciendo en su versión 2 cada vez más y más.
Es un marco de JavaScript de código abierto para crear interfaces de usuario . La integración
en proyectos que usan otras bibliotecas de JavaScript se simplifica con Vue porque está diseñada
para ser adoptable de forma incremental. Vue también puede funcionar como un marco de
aplicación web capaz de impulsar aplicaciones avanzadas de una sola página .
28
Características:
• Accesible.
• Versátil: Su núcleo es bastante pequeño y se escala a través de plugins, con lo cual
encontrará mucho que Vue es una librería muy parecida a React, una librería que cumple
un propósito.
• Escalable por el mismo tema de la versatilidad.
• Reactivo.
• Optimizado: Su core ocupa 74KB, como ves es bastante liviano.
• Comunidad: Va creciendo a un ritmo importante con más 66500 estrellas en GitHub y
130 personas contribuyendo al core cada día.
• Licencia MIT: se publicó bajo el amparo de esta licencia.
Instalación VUE.JS
Ingrese a la página oficial de VUE.JS https://vuejs.org/
Dar clic en GET STARTED
Figura 29. Página principal VUE.JS. Adaptado de (VUE.JS, 2014).
29
Dar clic en Installation
Figura 30. Guía de instalación VUE.JS. Adaptado de (VUE.JS, 2014).
Busca el CLI y dar clic en official CLI
Figura 31. Descarga CLI - VUE.JS. Adaptado de (VUE.JS, 2014).
30
Luego se abre un repositorio en GitHub
Figura 32. Repositorio GitHub VUE.JS.
Luego se descarga la herramienta NODE.JS 10.12.0 Actual y procede a la instalación. Esta
aplicación permite ejecutar una variedad de herramientas relacionadas a JavaScript
Figura 33. Página de descarga NODE.JS
31
Figura 34. Instalación paso a paso NODE.JS
Figura 35. Instalación paso a paso NODE.JS
32
Figura 36. Instalación paso a paso NODE.JS
Figura 37. Instalación paso a paso NODE.JS
33
Figura 38. Instalación paso a paso NODE.JS
Figura 39. Instalación paso a paso NODE.JS
34
Figura 40. Instalación paso a paso NODE.JS
Después de haber terminado la instalación haga la combinación de teclas Windows + R,
escriba CMD y se abrirá la consola de comandos de Windows. Para verificar la instalación de
NODE.JS escriba el comando node –version y enseguida de enter. Ahí mostrará la versión de
NODE.JS que se acaba de instalar.
Figura 41. Verificación instalación NODE.JS
35
Ahora escriba el comando npm install -g vue-cli, esto permite instalar un generador de
proyectos de VUE.JS. El vue-cli es tan solo una herramienta de líneas de comandos, es decir es un
comando nuevo que se va a poder ejecutar desde la consola y él te va a generar un proyecto nuevo.
Ahora se espera que termine de descargar.
Figura 42. Instalación del generador de proyectos de VUE.JS
Instalación terminada [email protected]
Figura 43. Instalación terminada [email protected]
36
Creando nuestro primer proyecto
1. Desde la consola de Windows acceda al escritorio de su computador con la línea de
comando cd desktop.
2. Después de estar ahí escriba el comando Vue init webpack mi_primer_proyecto
3. Confirme el nombre del proyecto y de enter.
4. Puede colocar una descripción del proyecto (Opcional). Enter
5. Puede colocar el nombre del autor (Opcional). Enter
6. Seleccione la opción 1 Runtime + compiler: recommended for most users. Enter
7. Install vue-router? De n. El vue-router es tan solo una manera de tener una navegación, es
decir, permite trabajar en el mismo navegador sin necesidad de abrirnos otras pestañas.
En este caso no se va a utilizar. Enter.
8. ¿Use ESLint to lint your code? (Y/n) pulse la tecla n. Enter
9. Set up unit tests (Y/n) pulse la tecla. Enter.
10. Setup e2e tests with Nightwatch? (Y/n) pulse la tecla n. Enter.
11. Should we run `npm install` for you after the project has been created? (recommended)
npm. Se recomienda seleccionar la primera opción. Enter
12. Se inicia a descargar una serie de herramientas utilizadas por VUE.JS y puede ver la
configuración del framework VUE.JS.
37
Figura 44. Creando primer proyecto VUE.JS
De esta forma se instala y crea un primer proyecto con VUE.JS
Figura 45. Verificación proyecto creado en VUE.JS
38
Desde un editor de código se puede abrir el primer proyecto y ver todo su contenido
Figura 46. Primer proyecto creado en VUE.JS desde el editor VISUAL STUDIO CODE
6.4.2 Capacitación HTML5, CSS3, JAVASCRIPT
La línea administrativa de la organización, con la finalidad de que el personal de talento
humano vinculado a la empresa sea capacitado frente a su área de desempeño, para poder realizar
de forma idónea sus funciones realizó una serie de capacitaciones, las cuales se profundizaron
sobre el manejo de HTML5, CSS3 y JAVASCRIPT.
6.4.3 Búsqueda de posibles clientes
Actualmente es notorio el aumento del uso de las redes sociales en el Internet, siendo usadas
como instrumento personal y/o laboral de una forma versátil para los usuarios y/o empresas. La
era digital ha logrado tener un empoderamiento en las personas ocasionando abrir un sinfín de
posibilidades que facilita a las empresas llegar a sus consumidores ágilmente y directamente, dado
39
que las redes sociales son una herramienta esencial en el mundo del Marketing como consecuencia
del fácil acceso a ellas.
Lo mencionado anteriormente proporciona a los emprendedores el poder generar un
acercamiento con los clientes en muy poco tiempo y de una forma eficaz, logrando darse a conocer
en el mercado digital, existiendo la posibilidad en buen término de alcanzar a los compradores
potenciales y/o ampliación nacional e internacional de su negocio dentro del mercado digital.
Es importante mencionar que la comunicación e interacción con los clientes en las redes
sociales es un factor fundamental dentro del Marketing, puesto que se puede dar una
retroalimentación con ellos, acatando sus sugerencias, inquietudes y opiniones frente al producto
y/o servicio, brindado así una adecuada prestación del servicio y una mejora de los productos,
logrando mantener a los clientes actuales y/o atraer nuevos clientes.
Se realizó una búsqueda de los clientes potenciales vinculados a las redes sociales quienes
frecuenta este medio para la venta de sus productos y/o servicios, con la finalidad de brindarle
acceso a la plataforma Komercia, con el propósito de que aumente su nivel de “engagement
comercial”, el cual hace referencia al poder de atracción e influencia que ejerce sobre los
consumidores y/o usuarios digitales.
6.4.4. Creación de herramientas para capacitación en el uso de la plataforma
Komercia
Pensando siempre en el usuario y en la mejora de su experiencia en la plataforma KOMERCIA
se realizaron 2 tareas las cuales se nombraron migración de tiendas y creación de videos para
usuarios, para explicarlas se dará un recorrido por cada una de estas.
40
En la primera se migraron las tiendas del plan gratis de las plantillas antiguas a una plantilla
nueva la cual no solo era más amigable con el usuario sino también otorgaba una capa de edición
más alta, de esta manera el usuario tenía acceso no solo al cambio de letra, colores y banners, sino
que también tenía herramientas nuevas como diferentes tipografías, varios tipos de banners u otros
elementos que antes se veían limitados a un solo estilo.
Posteriormente se crearon videotutoriales para los usuarios en los cuales se ayudaba paso a
paso a los nuevos usuarios en la creación, edición y carga de productos a sus tiendas, así como
tips o ayudas extra que mejorarían su experiencia en la plataforma, videos los cuales estarían
cargados en la plataforma de manera que cualquier persona pudiese encontrarlos fácilmente a un
clic de distancia.
Figura 47. Creación video tutoriales Komercia. Camtasia Studio.
41
Figura 48. Creación video tutoriales Komercia, panel de control. Camtasia Studio.
Figura 49. Creación video tutoriales Komercia, agregar producto. Camtasia Studio.
42
Figura 50. Creación video tutoriales Komercia. Camtasia Studio.
Figura 51. Creación video tutoriales Komercia. Camtasia Studio.
43
Figura 52. Video tutorial creado Komercia. Camtasia Studio.
Figura 53. Video tutorial Komercia desde el reproductor de Windows. Camtasia Studio.
44
7. Logros y lecciones aprendidas
Las funciones que desarrolla un pasante se encuadran en un gran número de actividades, que
permiten optimizar los recursos del asegurador de calidad (QA), se puede decir que:
En primera instancia se recibió capacitación y apoyo en el uso de las nuevas herramientas
tecnológicas para desarrollo web tales como:
• Framework VUE.JS.
• Capacitación HTML5, CSS3 y JAVASCRIPT
• GitHub
En segunda instancia se brindó soporte efectuando el test unitario del producto Komercia que
brinda la empresa en mención en la actualización del manual de usuario que consta de los
siguientes ítems generales:
• Diagnosticar posibles errores en la plataforma Komercia.
• Elaboración de informe de errores encontrados en la plataforma.
En tercera instancia se apoyó a la elaboración del manual de usuario.
En cuarta instancia se brindó apoyo en la migración de más de 250 tiendas creadas en la
plataforma Komercia a su nueva actualización lo cual se basaba en:
• Vincular al nuevo administrador desde el super panel de Komercia
• Garantizar la integridad de la información existente (Productos).
• Realizar cambio a la nueva plantilla dejando los mismos colores, tipo de letra,
banner, footer, etc.
45
En quinta medida se brindó el apoyo en la búsqueda de posibles clientes ya que este
desempeña un papel fundamental para el crecimiento de la plataforma Komercia haciendo uso de
las diferentes redes sociales.
46
8. Limitaciones, conclusiones y recomendaciones
8.1 Limitaciones
FosterApps cuenta con un excelente grupo de trabajo, está muy bien organizado y se han
destacado por ser un grupo unido, con disposición a escuchar para resolver inquietudes y cumplir
a tiempo la entrega de sus tareas asignadas. Sin embargo, se presentó una limitación:
• Un espacio de trabajo reducido para el grupo de profesionales en sus diferentes áreas,
lo que dificulta un desempeño óptimo de las actividades a desarrollar, lo que ha llevado
a la utilización de espacios alternos como la sala vive digital que se encuentra ubicada
en las instalaciones de ParqueSoft Meta donde esta presentó fallas constantes en el
servicio de internet.
8.2 Conclusiones
• El cargo de asegurador de calidad (QA) es fundamental ya que es el responsable de las
actividades principales para el desarrollo de pruebas a la plataforma. Incluye la
identificación, definición e implementación de las pruebas funcionales y no funcionales
necesarias, así como el registro de los resultados y el análisis de los mismos.
• La documentación es una guía, para que cualquier persona que desee información del
proyecto la pueda tener y entender.
• Existen herramientas como VUE.JS que no son complejas de configurar para cualquier
Ingeniero y hacen del desarrollo web un proceso organizado, haciendo que sea más
47
profesional, su facilidad para construir código bien estructurado y poder construir
aplicaciones complejas.
• El manejo de los repositorios es fundamental para el control de la información, software
como Git Hub el cual permite tener protegidos los datos, verificar movimientos y hacer la
integración de los diferentes componentes del proyecto.
• El proceso de la pasantía en el área de ingeniero asegurador de calidad (QA) se adquirió
conocimientos muy valiosos para el desenvolvimiento como profesional de ingeniería de
sistemas, unos de los más relevantes fueron:
o Apoyar en la búsqueda de posibles errores los cuales afectaran el correcto
funcionamiento de la plataforma Komercia.
o Apoyo en la elaboración del manual de usuario, sistema y ayuda en línea
o Apoyo en la migración de más de 250 tiendas creadas en la plataforma Komercia a
su nueva plantilla.
8..3 Recomendaciones
A la Universidad Cooperativa de Colombia sede Villavicencio:
• Que se siga desarrollando esta modalidad de grado, ya que se genera un gran crecimiento
intelectual, laboral y personal a los futuros ingenieros de sistemas.
A FosterApps:
• Continuar con su buen marco de trabajo Scrum.
• Un área de trabajo más amplia.
• Que sigan permitiendo pasantes de Ingeniería de sistemas de la UCC Villavicencio.
48
9. Bibliografía
Araque, M. (2017). Metodología SCRUM: Qué es y cómo funciona. Obtenido de
https://www.wearemarketing.com/es/blog/metodologia-scrum-que-es-y-como-
funciona.html
Fosterapps. (S,F). Misión, Visión y organigrama. Obtenido de http://www.fosterapps.com/#!/home
Fosterapps. (S,F). ¿Quienes somos?. Obtenido de http://www.fosterapps.com
Francia, J. (2017). ¿Estamos usando Scrum? Obtenido de
https://www.linkedin.com/pulse/estamos-usando-scrum-joel-francia
Komercia. (2018). Nosotros. Obtenido de https://komercia.co/nosotros
Márquez, R. (2017). Tester vs Quality Assurance. Obtenido de
https://www.paradigmadigital.com/dev/tester-vs-quality-assurance/
Parquesoft. (s,f). Nosotros . Obtenido de http://parquesoftmeta.com/nosotros#foco_1
Pujol, A. (2015). Plan de QA. Obtenido de https://slashmobility.com/en/blog/2015/04/por-que-
toda-empresa-deberia-tener-un-plan-de-qa/
VUEJS. (2014). Introducción e instalación VUE.JS. Obtenido de
https://vuejs.org/v2/guide/#What-is-Vue-js
49
10. Anexos
10.1 Anexo A. Acta de inicio modalidad de grado
50
51
52
10.2 Anexo B. Compromiso de confidencialidad FosterApps S.A.S
53
10.3 Anexo c. Certificado de Práctica FosterApps S.A.S
54
10.4 Certificado autorización asesor de grado
55
10.5 Carta de aprobación metodológica