Ing. Sistemas Computacionales

sábado, 11 de enero de 2025

Artículo | MVP / PMV (producto mínimo viable)

enero 11, 2025 Creado por Victor Jesus Maximo Abundio Sin comentarios

MVP / PMV (Producto Mínimo Viable) 

Introducción

Un Producto Mínimo Viable (PMV) es una versión inicial de un producto que solo tiene las características básicas necesarias para que funcione. El propósito de un PMV es lanzar rápidamente y obtener retroalimentación de los usuarios para saber si la idea es buena o si necesita mejoras. Al no estar completamente desarrollado, el PMV permite ahorrar tiempo y dinero, ya que no se invierte en funciones que los usuarios realmente no necesitan o no valoran.

El PMV es perfecto cuando tienes una idea pero no estás seguro de cómo los usuarios van a reaccionar. Te permite aprender de sus comentarios y mejorar el producto de forma continua. Al empezar con una versión simple, puedes ajustar rápidamente lo que no funciona, y, si es necesario, agregar nuevas características conforme los usuarios lo pidan. Esto te permite evitar cometer errores grandes y asegurarte de que el producto final sea realmente lo que los usuarios quieren.

¿Qué es?

Un Producto Mínimo Viable (PMV) es una estrategia que permite a los desarrolladores lanzar una versión básica del producto para probar su viabilidad en el mercado. En lugar de esperar a tener todas las características listas, se crea una versión simple que resuelva el problema principal para los usuarios. Esto ayuda a identificar rápidamente si el producto tiene aceptación y qué mejoras son necesarias, lo que reduce riesgos y permite tomar decisiones informadas a lo largo del proceso de desarrollo. Es una forma de priorizar el aprendizaje y la validación sobre el perfeccionismo desde el inicio.

¿Cuáles son las características?

Un Producto Mínimo Viable (PMV) tiene características clave como ser rápido de desarrollar, incluir solo las funciones esenciales para que el producto funcione, y enfocarse en validar la idea con los usuarios reales. Se lanza con el objetivo de obtener retroalimentación temprana para aprender y mejorar el producto de manera continua. Además, minimiza costos y riesgos al evitar agregar características innecesarias al principio, y está diseñado para evolucionar y adaptarse según las necesidades del mercado.

¿Para qué sirve?

Un Producto Mínimo Viable (PMV) sirve para validar rápidamente una idea o concepto en el mercado, asegurando que haya demanda real antes de invertir grandes cantidades de tiempo y recursos. Su propósito principal es obtener retroalimentación temprana de los usuarios para entender si el producto resuelve el problema que se quiere abordar y si los usuarios están dispuestos a usarlo o pagar por él. Además, permite identificar mejoras necesarias, realizar ajustes en función de las necesidades del mercado y minimizar el riesgo de crear un producto que no cumpla con las expectativas de los usuarios. En resumen, el PMV ayuda a tomar decisiones informadas sobre cómo desarrollar el producto y guiar su evolución en función de datos reales.

¿Cuándo usarlo?

Un Producto Mínimo Viable (PMV) debe usarse cuando se tiene una idea o concepto de producto, pero aún no se sabe con certeza si tiene demanda en el mercado o si resolverá efectivamente el problema de los usuarios. Es ideal en las primeras etapas de desarrollo, cuando se quiere validar una hipótesis o explorar el interés de los usuarios sin realizar una inversión significativa. También es útil cuando se necesita obtener retroalimentación temprana para evitar gastar tiempo y recursos en funcionalidades que no serán bien recibidas. Además, se debe usar cuando se quiere iterar rápidamente, adaptándose a las necesidades del mercado y a las respuestas de los usuarios, antes de continuar con un desarrollo más completo o costoso.

Ventajas

Una de las ventajas de un Producto Mínimo Viable (PMV) es que permite validar el producto en el mercado con una inversión mínima, lo que resulta en un riesgo reducido. Al enfocarse solo en las funcionalidades esenciales, los equipos pueden lanzar un producto funcional y aprender rápidamente si la idea es viable, sin perder tiempo ni recursos en características que no serán utilizadas. El PMV también permite a las empresas generar interés y atraer a los primeros usuarios, creando una base de clientes que puede influir en el desarrollo futuro del producto.

Además, al trabajar de forma iterativa, los equipos pueden adaptarse con rapidez a los cambios en el mercado y las necesidades de los usuarios, lo que contribuye a crear un producto que realmente resuelva problemas y tenga éxito.

Desventajas

Las desventajas de un Producto Mínimo Viable (PMV) incluyen el riesgo de que la versión inicial del producto no sea lo suficientemente atractiva para captar la atención de los usuarios o para competir en un mercado saturado. Al estar limitado a las funcionalidades más básicas, puede que no ofrezca una experiencia completa o que los usuarios se frustren por la falta de características que esperaban. 

Además, la retroalimentación obtenida con un PMV puede no ser completamente representativa de lo que los usuarios querrían en una versión final, ya que los usuarios podrían no estar dispuestos a comprometerse con un producto incompleto. También, el lanzamiento temprano de un PMV podría generar expectativas poco realistas o dañar la reputación de la marca si el producto no es percibido como útil o funcional.

Ejemplos

Un ejemplo de Producto Mínimo Viable (PMV) es Dropbox, que empezó con un simple video mostrando cómo funcionaba su idea de almacenamiento en la nube, sin tener la plataforma completa. Otro ejemplo es Airbnb, que comenzó ofreciendo un espacio en su propio apartamento para alquilar, antes de construir todo el sitio web. Estos ejemplos muestran cómo lanzar una versión básica de un producto ayuda a validar rápidamente si los usuarios están interesados, sin necesidad de invertir mucho dinero o tiempo al principio.

Conclusión

En conclusión, un Producto Mínimo Viable (PMV) es una estrategia efectiva para validar rápidamente una idea de producto con una inversión mínima, permitiendo obtener retroalimentación real de los usuarios desde el principio. Aunque tiene ventajas como la reducción de riesgos, el ahorro de tiempo y recursos, también presenta desventajas, como la posibilidad de generar expectativas bajas o no ofrecer una experiencia completa. Usarlo es ideal en las fases iniciales del desarrollo para probar hipótesis, aprender del mercado y hacer ajustes antes de comprometerse con una versión más compleja o costosa. En resumen, el PMV es una herramienta clave para desarrollar productos de forma ágil y eficiente, alineados con las necesidades reales de los usuarios.




sábado, 7 de diciembre de 2024

Proyecto | Angular v18 + Spring Boot v3 + Laravel v11 | LibHubTec

diciembre 07, 2024 Creado por Victor Jesus Maximo Abundio Sin comentarios

 

Proyecto | LibHubTec

Introducción

El proyecto consiste en reservar libros de una biblioteca de universidad desde un portal web llamada “LibHubTec” que es usado por alumnos de la universidad, el proyecto cuenta con una API para realizar peticiones desde el portal web “LibHubTec”. Adicionalmente, el proyecto tiene una aplicación web llamada “AdminPanel” con una arquitectura de “Monolitica”, que es usado por usuarios administradores.


LibHubTec 

Es un portal web con una arquitectura de “FrontEnd y BackEnd desacoplados”,  creada con Angular v18, PrimeNG, PrimeFlex, PrimeIcons.  Está conectado con una API para realizar peticiones. Este portal web, es usado por alumnos, con un correo electrónico y una contraseña para poder ingresar. 


API

Este un API para ser consumido desde el portal “LibHubTec”, está creado con Spring Boot v3, Spring Data JPA, Spring Security, JWT, Spring Email, Spring Web, Lombok, etc. 

Utiliza MySQL como base de datos para almacenar y recuperar la información, y proporcionar para el portal web “LibHubTec”.


AdminPanel

Este es una aplicación web con una arquitectura “Monolitica”, creada con Laravel 11, Moonshine Laravel, MySQL. Esta aplicación web es usada por administradores, para registrar administradores, alumnos, libros, enviar notificaciones, ver dashboard, etc.


Ver proyecto (GitHub Pages)

Funciones

El proyecto está conformado con dos aplicaciones web y una API, adicionalmente se usa Docker y Docker Compose para levantar todos los servicios.


LibHubTec 

  • Login 

  • Notificaciones 

    • Listar notificaciones de la cuenta

    • Marcar como leído

  • Libros 

    • Ver libros disponibles

    • Reservar libros

    • Listar libro reservados

  • Anuncios 

    • Ve anuncios de la universidad

  • Búsquedas

    • Ver búsquedas realizadas

    • Eliminar búsquedas realizadas


API

  • Leer libros

  • Consultar un libro

  • Consultar una cuenta

  • Autenticarte desde portal de LibHub (con Angular 18.x)

  • Refrescar un token de autenticación

  • Verificar un token de autenticación

  • Enviar un código y token para recuperación de cuenta desde portal de LibHub (con Angular 18.x)

  • Verificar un token de recuperación de cuenta

  • Recuperar una cuenta desde portal de LibHub (con Angular 18.x)

  • etc.


AdminPanel

  • Un dashboard

  • CRUD para anuncios

  • CRUD para administradores

  • CRUD para cuentas

  • CRUD para libros

  • CRUD para reservar libros

  • CRUD para notificar cuentas

  • Logs para recuperación de cuentas

  • Logs para búsquedas realizadas


¿Cómo funciona?

Para arrancar el proyecto, es necesario instalar docker y docker-compose, para automatizar e iniciar los servicios de forma automática. 


Arrancar servicios (del proyecto) usando Docker-compose


Paso 1) 

Acceder a la ruta raíz (root) el proyecto, a la par de archivo `docker-compose.yml`

Ejecuta el siguiente comando, desde la terminal.

```shell

$ cd workspace

```


Paso 2)

Convertir el archivo `setup.sh` en un archivo ejecutable o script de linux y ejecutarlo. 

Además de crear variable de entorno, instalar nodejs, y crear alias para linux

Ejecuta el siguiente comando, desde la terminal.

```shell

$ dos2unix ./setup.sh && ./setup.sh && source ~/.bashrc 

```


Paso 3) 

Construir todos los servicios de docker-compose

Se construye la imagen, contenedor y ejecuta cada servicio que compone docker-compose 

```shell

$ doc-again

```


Paso 4)

Comienza a probar el proyecto


Felicidades ya puedes acceder a los sitios del proyecto, que son:


- Sitio de servicio Laravel 11.x: [http://192.168.33.99:8000](http://192.168.33.99:8000)


    usuario: admin@admin.com


    contraseña: password


- Sitio de servicio Angular 18.x: [http://192.168.33.99:4200](http://192.168.33.99:4200)


    usuario: victor.maximo@example.com

    

    contraseña: password


- Sitio de servicio SpringBoot 3.x: [http://192.168.33.99:5800](http://192.168.33.99:5800)


- Sitio de servicio Mailpit: [http://192.168.33.99:8025](http://192.168.33.99:8025)


Vista previas

















sábado, 26 de octubre de 2024

Artículo | Stack de desarrollo web

octubre 26, 2024 Creado por Victor Jesus Maximo Abundio Sin comentarios

Stack de desarrollo web

Introducción

Un stack de desarrollo web es el corazón tecnológico de cualquier aplicación moderna. Representa la combinación de herramientas y tecnologías utilizadas para construir desde la interfaz visual hasta el manejo de datos y la lógica detrás del sistema. Estos stacks han revolucionado la forma en que se desarrollan las aplicaciones al ofrecer soluciones integradas, eficientes y escalables. Para un programador junior, entender qué es un stack y cómo utilizarlo es fundamental para construir aplicaciones robustas y estar preparado para proyectos más avanzados en el futuro.
Cada stack tiene componentes específicos que trabajan juntos para cubrir todas las necesidades del desarrollo web. Desde el frontend, encargado de la interacción con el usuario, hasta el backend y la base de datos que manejan la lógica y el almacenamiento de información, un stack permite construir aplicaciones completas. Dominar su uso no solo mejora la productividad, sino que también proporciona un marco confiable para solucionar problemas comunes en el desarrollo.

¿Qué es?

Un stack de desarrollo web es la combinación de tecnologías que se utiliza para crear las distintas partes de una aplicación web: interfaz de usuario, lógica del servidor y almacenamiento de datos. Es una solución integral que define cómo se construirá y funcionará el sistema, optimizando la interacción entre sus componentes.

¿Cuáles son las características?

Los stacks son modulares, lo que significa que están compuestos por tecnologías que pueden usarse juntas o reemplazarse según sea necesario. Además, suelen estar diseñados para soportar grandes volúmenes de tráfico y datos, con características modernas como procesamiento en tiempo real, APIs robustas y soporte para múltiples plataformas.

  1. Integración: Las tecnologías del stack funcionan bien juntas, minimizando problemas de compatibilidad.

  2. Escalabilidad: Muchos stacks están diseñados para manejar un crecimiento en el número de usuarios o datos.

  3. Flexibilidad: Algunos stacks permiten personalización o reemplazo de componentes según las necesidades del proyecto.

  4. Composición típica:

  • Frontend: HTML, CSS, JavaScript, y frameworks como React, Angular, o Vue.js.

  • Backend: Lenguajes y frameworks como Node.js, Django, Ruby on Rails, o Laravel.

  • Base de datos: MySQL, PostgreSQL, MongoDB, etc.

  • Servidor: Apache, Nginx, o plataformas como AWS y Firebase.

¿Para qué sirve?

Un stack sirve para simplificar el proceso de desarrollo al proporcionar un conjunto predefinido de herramientas compatibles. Ayuda a estructurar el código y garantiza que todas las partes del sistema se comuniquen eficientemente, permitiendo a los desarrolladores centrarse en la funcionalidad del proyecto en lugar de en problemas técnicos de integración.

¿Cuándo usarlo?

Un stack es ideal cuando necesitas construir un proyecto completo que combine un frontend interactivo, un backend robusto y una base de datos confiable. Se recomienda especialmente para proyectos que anticipan un crecimiento significativo, ya que la mayoría de los stacks modernos están diseñados para escalar con facilidad. También es útil cuando el tiempo es un factor crítico, ya que un stack predefinido reduce el esfuerzo de integración y configuración. En proyectos más pequeños, su uso depende de la necesidad de funcionalidad avanzada o requisitos técnicos específicos.

Es ideal para proyectos que necesitan una solución integral desde el frontend hasta la base de datos, especialmente si el equipo busca velocidad de desarrollo y escalabilidad. También es útil en proyectos donde la consistencia entre tecnologías reduce el tiempo y esfuerzo en configuración e implementación.

Ventajas

  1. Estandarización: Los stacks proporcionan un conjunto claro de herramientas, lo que reduce la curva de aprendizaje y mejora la colaboración entre equipos.

  2. Productividad: La integración fluida entre tecnologías permite a los desarrolladores concentrarse en crear funcionalidades en lugar de resolver problemas técnicos.

  3. Escalabilidad: Los stacks están diseñados para manejar un aumento en usuarios, datos y funcionalidades sin comprometer el rendimiento.

  4. Documentación y comunidad: Las tecnologías populares dentro de los stacks suelen tener grandes comunidades de soporte, con recursos abundantes para resolver problemas rápidamente.

Desventajas

  1. Curva de aprendizaje: Aprender todas las tecnologías de un stack puede ser abrumador para desarrolladores nuevos, especialmente si incluye herramientas avanzadas.

  2. Dependencia: Algunos stacks limitan la flexibilidad, ya que dependen de tecnologías específicas. Cambiar un componente clave puede requerir rediseñar todo el sistema.

  3. Sobrecarga: En proyectos pequeños, un stack completo puede ser innecesariamente complejo y costoso, tanto en tiempo como en recursos.

  4. Compatibilidad a futuro: Si alguna herramienta dentro del stack deja de ser mantenida o pierde popularidad, migrar a otra puede ser un desafío técnico considerable.

Ejemplos

  1. LAMP (Linux, Apache, MySQL, PHP): Ideal para sitios web tradicionales, ampliamente usado en proyectos monolíticos.

  2. MERN (MongoDB, Express, React, Node.js): Perfecto para aplicaciones modernas con interfaces dinámicas y funcionalidad en tiempo real.

  3. MEAN (MongoDB, Express, Angular, Node.js): Similar al MERN, pero utiliza Angular para el frontend, útil en proyectos con estructuras más rígidas.

  4. Django Stack (Django, Python, PostgreSQL): Famoso por su enfoque en la seguridad y rapidez de desarrollo, es ideal para aplicaciones robustas y con alto nivel de personalización.

Cada stack tiene sus ventajas dependiendo del tipo de proyecto y las habilidades del equipo, por lo que elegir el correcto es clave para el éxito del desarrollo.

Conclusión

En resumen, los stacks de desarrollo web son herramientas esenciales para cualquier programador que busque crear aplicaciones funcionales, escalables y eficientes. Conocer sus características, ventajas, desventajas y ejemplos populares permite elegir el adecuado según las necesidades del proyecto. Para los programadores juniors, un stack no solo simplifica el desarrollo, sino que también proporciona una base sólida para aprender mejores prácticas y trabajar en equipo. Aprovechar estas tecnologías de manera estratégica es clave para enfrentar desafíos técnicos y construir software moderno y exitoso.

sábado, 19 de octubre de 2024

Proyecto | Vite + ReactJS | PizarraJs

octubre 19, 2024 Creado por Victor Jesus Maximo Abundio Sin comentarios

 

Proyecto | PizzaraJs

Introducción

El proyecto consiste en crear una aplicación web de una sola página (SPA) que permite dibujar figuras básicas como: círculo, triángulo, cuadrado, líneas y utilizar una herramienta de lápiz. Además, incluye opciones avanzadas como:

  • Modificación del color de los bordes y el fondo de cada figura.

  • Ajuste del grosor de los bordes para cada figura.


También se han implementado herramientas adicionales, como:

  • Gestión de capas.

  • Herramienta de borrador.

  • Exportar el lienzo en formato PNG o JPG.

  • Funcionalidades de rehacer y deshacer.

  • Exportar e importar lienzos en formato JSON.

  • Como características adicionales, se incluye la opción de dibujar una figura de corazón y agregar texto como herramienta.


El sitio es completamente adaptable (responsive), optimizado para dispositivos táctiles, tabletas, laptops y computadoras de escritorio. Además, incluye mejoras de accesibilidad como tooltips para cada herramienta.


Ver proyecto (GitHub Pages)


Funciones

El sitio web usa react-router-dom, componentes, custom hooks , context y provider para el funcionamiento del sitio con React. Además de usar e incluir módulos externos de npm para React.


Este sitio web tiene las siguientes funciones:

  • Dibujar trazos

  • Capas

    • Agregar 

    • Eliminar

    • Ocultar

    • Activar

  • Dibujar formas

    • Círculo

    • Cuadrado

    • Triángulo

    • Corazón

    • Línea

    • Lápiz

    • Texto

  • Exportar e importar capas, trazos y formas en un archivo JSON

  • Deshacer y Rehacer capas, trazos y formas

  • Exportar a imagen PNG y JPG

  • Modificar herramientas para cada forma

  • Herramienta de borrador


Este conjunto de tecnologías y características para este sitio web:

  • Proyecto dockerizado. (*)

  • Proyecto vagratizado. (*)

  • Estilos de Tailwind CSS

  • Componentes funcionales de ReactJS

  • Hooks personalizados

  • Context y Provider

  • Canvas HTML 5

  • React Icons (Bootstrap)

  • React Tooltip

  • Etiquetas de Open Graph (para SEO)


¿Cómo funciona?

Al entrar al sitio web, por defecto se selecciona la herramienta de lápiz, que puedes comenzar a dibujar sobre la pizarra, el sitio web  tiene un sistema de historial para deshacer y rehacer los trazos. 


Al hacer clic en el botón, que está a un lado del logo, se mostrará las herramientas avanzadas, con que, puedes crear capas ocultar y mostrar capas, puedes exportar el dibujo en una imagen PNG o JPG, puedes exportar en un archivo JSON e importar un JSON de los trazos dibujados.


Adicionalmente, puedes presionar cambiar de herramienta para dibujar formas, tales como: 

  • Lápiz

  • Línea

  • Texto

  • Círculo

  • Triángulo

  • Cuadrado

  • Corazón

Vista previas