Comenzaremos por establecer los primeros pasos en el desarrollo del diseño de nuestra aplicación. Como mencioné en la lección previa introductoria a este Curso Intermedio, asumimos que ya has planificado el diseño y comprendes la estructura de la interfaz de usuario de tu aplicación.
Dentro de esta estructura, es crucial tener definido el número de páginas que incluirá tu proyecto, así como la paleta de colores y el tipo de tipografía que utilizarás.
En esta lección voy a enseñarte a generar las distintas páginas de una app. Pero antes quiero dejarte claro el concepto de UI (interfaz de usuario).
Interfaz de usuario (UI)
¿Cuál es la función de la Interfaz de Usuario (UI) en una aplicación?
La UI comprende los elementos visuales e interactivos de la aplicación. No solo determina qué elementos son visibles, sino que también establece ciertas interacciones fundamentales dentro de la app.
Los entornos de desarrollo sin programación (no code), como SAP Build apps y Appgyver, ofrecen un conjunto de herramientas diseñadas para facilitar la creación de una UI eficaz.
La UI no solo se enfoca en los elementos que se pueden ver, como botones y menús, sino también en cómo el usuario interactúa con la aplicación, estableciendo interacciones básicas como deslizar, hacer clic, o ingresar información.
El objetivo de un diseño eficaz es lograr que la UI sea intuitiva y fácil de utilizar, minimizando elementos superfluos y simplificando la interacción del usuario con la aplicación. Esta meta se ve significativamente influenciada por la selección adecuada de colores y el estilo y tamaño de la tipografía.
El Theme de una app
El «theme» de un proyecto de app se refiere al conjunto coherente de diseño que incluye colores, tipografías, y elementos visuales que se utilizan a lo largo de la aplicación para proporcionar una experiencia estética y funcional uniforme.
SAP Build apps nos facilita la creación del diseño de la UI mediante el uso de los componentes de vista, la generación de páginas, la elección del mejor menú general de navegación y el «theme» de nuestra app.
Una lección posterior de este curso intermedio la dedicaremos a la configuración del Theme.
Veamos en esta lección como generar las distintas páginas de nuestro proyecto.
Las páginas
Las páginas de nuestro proyecto deben ser las necesarias, es decir, ni más ni menos que las páginas imprescindibles para el correcto funcionamiento de nuestra app.
Tener demasiadas páginas puede hacer que la app sea pesada y su uso complicado. Es recomendable iniciar con el menor número de páginas posible y expandirlas solo si surge la necesidad.
Dentro de SAP Build apps o Appgyver, crear nuevas páginas es tan sencillo como hacer clic sobre el nombre de la página (en color azul) que aparece en la parte izquierda superior de nuestra pantalla principal.
Nos aparecerá la pantalla de creación de nuevas páginas donde verás cada una de las páginas que tienes creadas y un enlace llamado «ADD NEW PAGE» donde haciendo clic podrás añadir una nueva página.
Al crear una nueva página te aparecerá una pantalla emergente para darle el nombre apropiado:
Global canvas
La «global canvas» que verás en la pantalla de páginas está creada de manera predeterminada para todos los proyectos. No la puedes eliminar.
Esta «global canvas» no es una página en sí, se refiere a un espacio de trabajo universal dentro del proyecto donde puedes generar las variables de la aplicación y los flujos de trabajo que afectan de manera global a todo el proyecto.
La idea detrás del «global canvas» es facilitar la gestión de elementos y funcionalidades que tienen un alcance y aplicación en toda la app, para mantener la consistencia en el diseño y en la experiencia de usuario, así como optimizar el proceso de desarrollo al permitir reutilizar configuraciones y definiciones en diferentes partes de la aplicación sin tener que duplicar trabajo.
Vídeo: Crear páginas
En el siguiente vídeo puedes comprobar lo fácil que es crear páginas con SAP Build apps y Appgyver.
En la próxima lección veremos como se construye el menú de navegación de la app.
