Desarrollo de Apps: Fases del proceso.
Las tres fases del proceso de desarrollo de Apps
Un proceso no se entiende si no se divide en fases o actividades.
Un proceso es un conjunto de actividades mutuamente relacionadas que al interactuar juntas convierten los elementos de entrada en resultados.
¡No te agobies!... lo haremos sencillo, vamos a hablar de las fases que se contempla en el proceso de desarrollo de una app y lo visualizaremos a través de un práctico ejemplo.
Como vimos en este artículo anterior, con las plataformas low-code/no-code (LCNC), la barrera de aprender un lenguaje de programación se puede eludir. Sin embargo, es importante comprender que la creación de aplicaciones es algo más que ser capaz de codificar.
Los desarrolladores han estado haciendo aplicaciones durante los últimos 40-50 años con una variedad de herramientas y tecnologías.
Durante este tiempo, se ha perfeccionado un conjunto de ideas, principios y conceptos que forman parte de la base del desarrollo de aplicaciones.
Aunque sepas manejar una gran herramienta LCNC, si no hay un proceso organizado antes de crear una App, ¡no tendrás éxito!
A partir de aquí cubriremos conceptos que se aplican tanto a entornos de programación LCNC como tradicionales.
Introducción
Las fases principales del proceso inicial del desarrollo de aplicaciones son TRES:
DISEÑO DE LA INTERFAZ DE USUARIO
En esta fase se diseña lo que el usuario de nuestra aplicación va a ver y lo que podrá hacer.
LOGÍSTICA DE DATOS
En esta fase, se construye la base de datos y se estudia su organización, se definen las variables, y se examina cómo se gestionan (almacenar, recuperar, eliminar) los datos dentro y fuera de la aplicación.
FLUJOS DE TRABAJO
En esta fase, se averigua el correcto funcionamiento de la aplicación y cómo implementar los procesos lógicos que la aplicación debe seguir.
Para ilustrar esta teoría, veamos un ejemplo: imaginemos una aplicación simple para tomar notas.
Será una aplicación donde podrás escribir notas, agregar un título a la nota para recordar de qué se trata, ver una lista de notas y guardar y eliminar estas notas.
En este caso:
Diseño de la Interfaz de usuario
Nos permitirá escribir texto para las notas (incluido un título), enumerar las notas y los controles para guardarlas y eliminarlas.
Flujos de Lógica
Las funciones de lógica necesarias para guardar y eliminar notas, y reglas para supuestos escenarios como por ejemplo: donde el usuario evite introducir notas sin títulos, o el tipo de orden de las notas (por fechas, por prioridad, etc…)
Logística de Datos
La estructura básica de este ejemplo necesita, al menos, dos tipos de datos (variables): el dato del título y el dato del contenido de la nota. Podríamos pensar también en introducir un campo con fecha (otro dato) y otro con imagen.
Recuerda dos cosas:
Estas tres fases no son «herméticas», es decir, pueden variar a medida que se desarrolla la app y pueden vincularse entre sí. Son fases dinámicas.
Además, podrán existir otras fases (que veremos en otras lecciones más avanzadas) pero estas tres fases se consideran esenciales.
En el siguiente apartado analizaremos a fondo la primera de las fases (Diseño de la Interfaz de Usuario) y dejaremos las otras dos fases para una próxima lección.
Diseño de la Interfaz de usuario
Hemos definido la interfaz de usuario (UI) de una App como todo aquello que el usuario puede ver y con lo que puede interactuar en la pantalla del dispositivo móvil.
Tenemos que pensar que nuestra app tiene que tener la mejor usabilidad posible y proporcionar una grata experiencia al usuario.
Comencemos a pensar en los elementos necesario para esta finalidad: las páginas, los botones, la tipografía, los colores, los elementos de navegación, el orden de estos elementos, etc.
Algunos de estos conceptos nos son más o menos familiares como usuarios de aplicaciones, pero ahora los veremos desde el punto de vista del desarrollo de aplicaciones.
Veremos después como llamamos a estos elementos: Componentes.
¿Cómo colocar cosas en la pantalla?
Una pantalla, sea de un TV, portátil o dispositivo móvil, está llena de PÍXELES.
No somos diseñadores gráficos, pero es bueno saber que estos píxeles son diminutos puntos que se iluminan para crear lo que podemos visualizar en estas pantallas.
PIXEL: Es la unidad básica de una imagen digitalizada en pantalla a base de puntos de color o en escala de grises.
Podríamos trabajar desarrollando aplicaciones donde organizar cada uno de los millones de píxeles individuales en la pantalla uno por uno, uno a uno, … Esto llevaría mucho tiempo hacerlo.
Preferiríamos un enfoque más rápido y conveniente.
Para ello, los entornos de desarrollo (y más aún los LCNC) suelen estar equipados con un conjunto de herramientas para crear una interfaz de usuario sin tener que definir pixel por pixel.
Esto se consigue creando, mediante la programación, una forma de definir un conjunto de elementos para diferentes partes de la interfaz de la aplicación.
Estos elementos o componente definidos en algún lenguaje de programación son usados para representar todo lo que puede aparecer en la interfaz, desde párrafos de texto hasta botones.
Una interfaz de usuario no solo define los elementos que se pueden ver, sino que también define algunas de las interacciones básicas en la aplicación, por ejemplo, un botón en el que se puede hacer clic o un cuadro de diálogo que aparece encima de algún otro contenido.
La importancia de la CONSISTENCIA
Un buen diseño de la interfaz de usuario es importante porque, si bien debería ser fácil de usar y algo obvia, también define la experiencia para el usuario final.
El diseño de la interfaz de usuario y la experiencia del usuario es un tema amplio en sí mismo, por lo que solo lo discutiremos brevemente.
Sobre todo, lo que desea de su interfaz de usuario es que el usuario capte intuitivamente un patrón de cómo funciona la aplicación y que esté en línea con las expectativas del usuario.
No deberían tener que buscar diferentes tipos de navegación o diferentes botones de una vista a otra.
Dentro de un entorno LCNC, normalmente tendrás una gran cantidad de componentes prediseñados para la interfaz de usuario.
Este servicio «listo para usar» es una ventaja para garantizar que su interfaz de usuario sea consistente.
¿Qué significa consistente?
Significa que cuando usamos una aplicación, como usuarios, esperamos que se comporte como otras aplicaciones que hemos usado en el pasado.
También significa que la aplicación es familiar para el usuario a medida que se mueve por diferentes partes de la misma.
Consistencia es sinónimo de UNIFORMIDAD y COHERENCIA.
Esta consistencia reduce la carga cognitiva del usuario y contribuye a una experiencia más cómoda con la aplicación.
Esta idea de coherencia también puede extenderse al uso de diferentes Apps.
Quiero decir con esto que si trabajas en el desarrollo de distintas Apps para una misma empresa, cada App deber tener coherencia en su diseño para hacerla lo más familiar e intuitiva posible de cara a los usuarios.
Las VISTAS
Las vistas son, exactamente lo que parecen, las diversas cosas que ves en una aplicación.
Algunas plataformas LCNC también pueden llamarlas PÁGINAS.
Las VISTAS o PÁGINAS en una App hacen referencia al espacio que representa la pantalla de un dispositivo físico. Aquí se ubican todos los componentes interactivos que formarán parte de la interfaz de usuario de la aplicación
Volvamos a nuestro ejemplo anterior: la aplicación para tomar notas.
Definiríamos DOS VISTAS:
La interfaz de usuario para tomar notas sería una vista, que podríamos llamar Entrada de Notas.
La vista que enumera todas las notas que hemos tomado podríamos llamarla: Lista de Notas.
Se deben crear vistas principales basadas en una distinción funcional clara.
Tener vistas claramente separadas también ayudará más adelante, cuando comience a implementar los flujos de lógica en tu aplicación, al separar las diferentes áreas de tu aplicación en secciones manejables.
Al diseñar y planificar tu aplicación, es una buena idea tomarse el tiempo para desglosar las vistas o páginas individuales y cómo se conectan entre sí.
¿Cómo planificar esas VISTAS?
Solo son necesario dos pasos.
- Primero, haz una lista de todas las actividades principales que el usuario debe realizar como:
- «El usuario crea un ticket de soporte».
- «El usuario selecciona un evento como favorito».
- «El usuario deja sus datos personales en un formulario».
- «El usuario busca un determinado dato»
- ….
- Segundo, piensa y dibuja en papel como estas actividades se materializaran en las vistas de tu aplicación. Debes asegurarte de que las acciones relacionadas con una actividad estén agrupadas en la misma vista.
!Importante¡… !Minimiza el número de VISTAS¡
Cuantas menos vistas tenga, mayor fluidez, menor será la carga de trabajo para expandir y actualizar la aplicación, y más fácil e intuitivo será para el usuario.
La navegación entre diferentes vistas
La navegación incluye moverse entre vistas, enlaces y menús.
Con la navegación entre vistas implementamos el COMPORTAMIENTO que queremos que haga nuestra App.
Planificar y predecir este comportamiento es muy importante para que el desarrollo de nuestra app sea exitoso.
Vemos esto con el ejemplo de la aplicación que estamos haciendo para tomar notas. Consideremos las implicaciones de navegación de nuestro diseño hasta ahora.
Recordemos que hemos decidido que nuestra app tenga DOS vistas principales (Entrada de Notas y Listas de Notas).
1ª Consideración:
Para moverse entre las dos vistas principales, debemos introducir un menú principal.
Un menú son solo enlaces a las páginas principales de la aplicación.
Una plataforma low-code/no-code debería brindarte un sencillo complemento para crear dicho menú (¡AppGyver lo tiene!).
La ventaja de un menú estándar es que es un elemento de interfaz de usuario ampliamente utilizado que muchos usuarios buscan, lo que ofrece la ventaja de la coherencia.
2ª Consideración:
Cancelar una entrada de nota y volver al listado.
Si estamos en la vista Entrada de Notas, pero queremos cancelar nuestra acción y volver a la vista de Lista de Notas, añadiremos un botón Cancelar que haría dos cosas: finaliza la edición de la nota y nos lleva de vuelta a la vista de lista.
Estos son solo algunos ejemplos de cómo implementar la navegación en una aplicación. Al igual que con las vistas, la planificación anticipada lo ayudará a crear una excelente navegación para su aplicación.
Componentes, elementos o bloques de construcción
Cada parte de la interfaz de usuario en nuestra aplicación debe estar representada por «algo«.
Esto incluye todos los botones, cualquier texto, imágenes, íconos, etc. En el desarrollo de aplicaciones, todos estos elementos individuales están representados por componentes.
El término Componentes se usa en muchas herramientas y plataformas, pero también se les conoce como elementos o bloques de construcción.
Son lo mismo, y estos componentes son los componentes básicos de cualquier interfaz de usuario. Los componentes cubren la funcionalidad más general que necesitas en tu aplicación, para brindarle flexibilidad en la manera en que desarrollas la interfaz de usuario.
Ya sabes que en esta web nos enfocamos en el aprendizaje de SAP Build Apps y AppGyver, concretamente, estas herramientas usan COMPONENTES VISUALES y de LÓGICA para desarrollar la interfaz de usuario y sus flujos de navegación.
Cuando hablamos de componentes como elementos visuales de una interfaz de usuario, es importante para nosotros hacer una distinción entre el elemento de la interfaz de usuario y su estilo.
Si pensamos en un componente de botón, entonces lo que define el bloque de construcción es que tenemos un contorno con algo de texto dentro, y que se puede hacer clic en este elemento.
El aspecto real del componente, ya sea azul o rojo, y si la forma es redonda o rectangular, pertenece a los «estilos», un área que no trataremos en este momento.
Te recuerdo que AppGyver tiene una herramienta interna denominada PANEL de PROPIEDADES donde se configuran todos los estilos y diseños de los componentes.
Un componente de botón siempre tendrá algunos estilos predeterminados para ayudarlo a configurarlo visualmente, pero, por ahora, solo nos centraremos en lo que necesitas para comenzar a desarrollar tu App y los estilos y diseños vendrán después.
Composición de los componentes
Hablemos de componentes y composición.
Una de las principales razones por las que los componentes son un concepto tan poderoso en el desarrollo de aplicaciones es cómo se pueden componer.
En otras palabras, puedes crear componentes utilizando componentes.
No hay límites fijos sobre cuán grandes o pequeños pueden ser los componentes. Los componentes más pequeños son cosas como un icono individual o una línea divisoria.
Los componentes más grandes pueden ser algo así como un componente de mapa para geolocalización o un reproductor de video.
Muchos componentes, en realidad, estarán formados por componentes más pequeños.
Un ejemplo: Pensemos en un elemento de casilla de verificación que podrías ver en cualquier aplicación.
Si hace una lista de estos elementos de casilla de verificación, tiene un componente de lista de casillas de verificación, que consta de todos estos componentes individuales.
Podemos, y a menudo lo haremos, etiquetar esto como un componente de casilla de verificación, pero en realidad es un componente de casilla de verificación y un componente de texto para la etiqueta.
En una interfaz de usuario, los componentes crean este tipo de grupos todo el tiempo.
Con la experiencia comprobarás cómo puedes construir cosas bastante complejas (componentes complejos) a partir de fundamentos simples (componentes simples).
Este tipo de composición es lo que podrás hacer en la mayoría de las plataformas y/o herramientas LCNC.
La composición se vuelve particularmente efectiva a medida que crea más aplicaciones o más grandes, donde la composición de componentes reutilizables te ahorrará mucho tiempo y esfuerzo a largo plazo.
La conclusión es que al crear la interfaz de usuario de tu aplicación, idealmente debes pensar en las vistas y en los componentes que usarás, teniendo en cuenta que podrás usar componentes reutilizables a medida que avanzas.
Hasta aquí este artículo,
…aún nos queda desarrollar el contenido de las otras dos fases del proceso de desarrollo de una App.
En el próximo artículo, cubriremos cómo programar los flujos de lógica que impulsa la actividad en nuestra aplicación y como administrar la lógica de datos de la misma.
Resumen
Debes de quedarte con los conceptos siguientes:
El desarrollo de una App es un proceso que tiene, al menos, TRES fases:
No te olvides de la CONSISTENCIA en el diseño de la UI y la diferencia entre VISTAS y COMPONENTES de la misma.
Y que programar una buena NAVEGACIÓN entre vistas y componente es clave del éxito.
¡¡Nos vemos en la siguiente lección!!
