Cómo utilizar la ingeniería de sistemas para crear una aplicación web exitosa

Si comprende cómo funciona, es más fácil construirlo.

Así que finalmente ha completado su diseño en Adobe XD, Figma, Sketch o InVision, pero todavía tiene problemas con la idea de cómo implementar la funcionalidad. No se preocupe, hemos pensado durante un tiempo que la única forma de crear aplicaciones web es comenzar con el diseño de UI / UX junto con bocetos de prototipos.

Afortunadamente, resulta que existen otras y mejores técnicas que podemos usar para describir aplicaciones web sin hacer hincapié en las posiciones, el tamaño o el espaciado que necesitan los elementos de una página.

Permítanme presentarles algo que han utilizado empresas en los campos aeroespacial, marítimo, de defensa, automotriz y de telecomunicaciones para comprender mejor cómo se comportan e interactúan los sistemas. No me refiero a un número X de consejos y trucos sobre cómo mejorar UI / UX, sino qué técnicas puede aplicar del arsenal de Ingeniería de Sistemas (SE) para crear aplicaciones web exitosas.

Estas técnicas tienen muchos beneficios, pero el más importante es la rapidez con la que se pueden expresar ideas y comprender cómo funcionan las cosas.

Al final de este artículo, podrá utilizar algunas de estas técnicas de SE para crear mejores aplicaciones.

Aquí hay cuatro técnicas SE prácticas y relevantes que puede aplicar.

Si desea convertirse en un mejor desarrollador web, comenzar su propio negocio, enseñar a otros o simplemente mejorar sus habilidades de desarrollo, publicaré consejos y trucos semanales de alta calidad sobre los últimos lenguajes web del mercado.

Un ejemplo práctico: plataforma de aprendizaje en línea

Para que los ejemplos sean intuitivos y aplicables, crearemos una plataforma de aprendizaje en línea ficticia. Una plataforma que permite a las personas publicar contenido, el mismo concepto que Medium, YouTube, Unsplash, etc.

Nota: la idea de usar estas técnicas es describirlo lo suficiente para que los desarrolladores puedan implementar fácilmente estas características, lo que significa que no necesitamos entrar en detalles.

Aquí hay algunos buenos consejos para tener en cuenta en las primeras etapas de la aplicación.

1. No empieces con un diseño detallado

En las primeras etapas, la mayoría de los desarrolladores comienzan, naturalmente, por definir primero las soluciones y, por lo tanto, se ponen al día con los detalles que realmente no importan para el producto final. Nos lleva en la dirección equivocada y olvidamos el verdadero propósito de la aplicación.

El diseño es importante, pero no es algo en lo que debamos centrarnos en las primeras etapas. No es fijo (y cambia a menudo), por ejemplo, el color de un botón, la posición de los elementos, el tipo de fuente, etc. Lo que no cambia es el comportamiento subyacente de la aplicación web, como la forma en que una persona se autentica, la forma en que carga algo en una página, los pasos para procesar un pago, etc. Las partes fundamentales siguen siendo las mismas.

2. Empiece por el problema

Primero identifique el problema: el entorno, quiénes son las partes interesadas, el comportamiento y el contexto de la aplicación (el alcance).

No creamos aplicaciones basadas en soluciones, las creamos porque hay un problema, problema o desafío que debe resolverse. En la mayoría de los casos, al cliente no le importa la solución, excepto que funciona. La solución se identificará cuando los desarrolladores comprendan cómo se comporta e interactúa la aplicación.

El problema, por ejemplo, puede ser que la plataforma de comunicación actual sea demasiado lenta, lo que influye en el flujo de trabajo. Otro problema puede ser que el gerente no tenga una visión clara de las tareas con las que trabaja el empleado, etc.

Tenga en cuenta que el problema nos dice que existe una necesidad, pero no brinda ninguna solución. El problema es qué desencadena el proceso de desarrollo. Así que comience con el problema primero antes de comenzar con las soluciones.

Veamos qué técnicas podemos utilizar para describir nuestra plataforma de aprendizaje en línea.

1. Diagrama de contexto

Define los límites

El propósito del diagrama de contexto es definir los límites dentro de la aplicación, o partes de la aplicación, y proporcionar una comprensión clara de las entidades con las que interactúa.

Como se muestra, podemos ver qué tipos de partes interesadas (usuarios) interactúan con la aplicación y los tipos de interacción entre ellos. Tenga en cuenta que no se mencionan los nombres de las partes interesadas ni con qué tipo de base de datos estamos tratando. No queremos quedar atrapados con detalles que pueden cambiar en el futuro.

Aclarar aplicaciones complejas

Si se trata de una aplicación bastante compleja que consta de muchas partes, entonces un diagrama de contexto es una buena alternativa que le permite simplificar las cosas. También es una buena manera de recordarnos cuál es el propósito de la aplicación y eliminar las cosas que le brindan poco valor. Es una forma de dar un paso atrás y concentrarse en lo que es importante.

2. Diagrama de casos de uso

Tenga en cuenta que no mencionamos nada sobre el diseño, el tamaño o la posición de los elementos. En SE es importante que las cosas sean modulares, lo que significa que podemos cambiar las cosas sin afectar la aplicación; no queremos que las cosas sean fijas e inmutables.

Un desarrollador que necesita crear software que funcione debería poder leer un caso de uso y tener una idea clara de lo que debe hacer el software. Fuente.

Describe las interacciones

El propósito del diagrama de casos de uso es describir cómo el usuario interactúa con la aplicación web de forma verbal. Esta es una gran herramienta para comprender qué necesita el cliente y también qué características tiene que implementar el desarrollador.

Elaborar un caso de uso (acción)

Como se muestra arriba, el usuario es el productor de contenido y realiza cuatro acciones. Una acción es una característica que debe implementarse. El diagrama de casos de uso no describe el comportamiento de la aplicación, excepto la interacción entre el usuario y la aplicación, o partes de ella.

Para describir el comportamiento, podemos realizar una acción y elaborarla a través de diagramas como actividad, máquina de estados, diagramas de secuencia, etc.

Por ejemplo, podemos crear un diagrama de actividad para describir los pasos necesarios para realizar la acción de "cargar contenido". Hay un ejemplo de esto en las secciones 3 y 4.

Centrarse en diferentes escenarios de casos de uso

Lo más probable es que la aplicación sea utilizada por usuarios con diferentes roles, como administrador, productor de contenido, editor, analista, etc. Y cada rol tiene un conjunto de necesidades únicas con diferentes casos de uso (interacciones). Es importante que cubramos estas interacciones o, de lo contrario, terminamos con una aplicación estática personalizada para un rol de usuario específico.

3. Diagrama de actividad

Describe el comportamiento

El propósito de un diagrama de actividades es describir la secuencia de actividades necesarias para cumplir con un caso de uso. El caso de uso seleccionado es "cargar contenido" del diagrama de casos de uso, como se muestra arriba.

Usted es libre de decidir sobre qué caso de uso desea ampliar y elaborar; el objetivo no es hacer un diagrama de actividad para cada caso de uso, sino los que son difíciles de entender o implementar.

Describe los pasos para alcanzar la meta.

Es difícil predecir lo que hace el usuario y en qué orden. Por esa razón, un diagrama de actividades nos ayuda a trazar un mapa de las actividades que realiza el usuario y también cubre decisiones de las que quizás no tengamos conocimiento. También se puede utilizar para describir actividades de un no usuario, por ejemplo, una parte de la aplicación que espera algo antes de que pueda ejecutarse. El enfoque es describir el flujo de trabajo.

Expresar ideas a través del diseño

Cuando trabajaba en equipo, un ingeniero senior me entregó un diagrama de actividad de una función que quería implementar. Todo el proceso de desarrollo se volvió mucho más fácil porque no tuve que adivinar cómo se comporta la aplicación, el comportamiento ya estaba descrito a través de un diagrama de actividad.

En general, es una gran herramienta para expresar ideas y pensamientos a las personas en lugar de depender simplemente de la comunicación verbal.

4. Diagrama de máquina de estado

Definir los estados

El propósito del diagrama de la máquina de estados es describir un comportamiento discreto de la aplicación. La diferencia entre un diagrama de actividad y un diagrama de máquina de estados es que el primero describe los pasos para lograr algo (flujo de trabajo), mientras que el segundo describe cómo cambian los estados de un objeto durante su vida útil.

Ambas son técnicas útiles para describir el comportamiento de la aplicación y son útiles para que los clientes y desarrolladores obtengan una comprensión común de cómo funcionan las cosas.

Pensamientos finales

El diseño está en constante movimiento y evoluciona y cambia a lo largo del proceso de desarrollo. Como se mencionó anteriormente, abordar problemas de diseño como UI / UX y bocetos de prototipos es importante, pero no describe realmente cómo funcionan o se comunican las partes subyacentes de la aplicación. También requiere tener diseñadores gráficos capacitados y muchos recursos.

Por esa razón, necesitamos algo que no dependa del diseño, algo que no se enfoque en detalles menores como tipos de fuente, sombras de caja, colores, etc.

Necesitamos técnicas de ingeniería de sistemas para describir cómo se comporta e interactúa la aplicación, para expresar ideas, simplificar el proceso de desarrollo y ayudar a las personas con antecedentes no técnicos a comprender el comportamiento de las aplicaciones.

Tenga en cuenta que hay un conjunto de reglas que se deben seguir al crear dichos diagramas; sin embargo, la mayoría de las personas con las que he trabajado no las entienden o no les importan. Así que el mejor consejo que puedo darte es asegurarte de seguir el propósito del diagrama, pero no te metas en las reglas, como si la línea debe terminar con una punta de flecha, un diamante, etc.

Aquí hay algunos otros artículos que he escrito sobre el ecosistema web junto con consejos y trucos de programación personal.

  • Una guía práctica de los módulos ES6
  • Cómo realizar solicitudes HTTP utilizando la API de recuperación
  • Una comparación entre Angular y React
  • Mejore sus habilidades con estos importantes métodos de JavaScript
  • Una mente caótica conduce a un código caótico
  • Desarrolladores que constantemente quieren aprender cosas nuevas
  • Aprenda estos conceptos básicos de la Web
  • Programe más rápido creando comandos de bash personalizados

Puedes encontrarme en Medium, donde publico semanalmente. O puede seguirme en Twitter, donde publico trucos y consejos de desarrollo web relevantes.