Tareas adicionales para el diseño de una experiencia de app móvil

Antes de comenzar: prepare el framework de la página de lista:

• Cree un canal móvil para su app. Para obtener más información, consulte Configuración de apps móviles.
• Asegúrese de tener un tipo de caso que pueda utilizar para completar la pantalla de la página. Por ejemplo, cree un tipo de caso para la creación de reportes de gastos. Para obtener más información, consulte Tipos de casos.
• Si desea agregar acciones de deslizamiento personalizadas para que los usuarios realicen en los elementos de la lista, configure primero una acción para todo el caso. Para obtener más información, consulte Adición de acciones opcionales a los casos.

En la autoría prescriptiva low-code para páginas de listas, simplemente aproveche los tipos de casos de su aplicación de Pega. A continuación, puede ajustar la forma en que la app muestra los datos del tipo de caso en los dispositivos móviles. Consejo: Si crea una página de lista móvil mediante un tipo de caso disponible sin conexión y, a continuación, agrega dicha página de lista a la navegación de la app, el proceso de empaquetado automático garantiza que todos los casos a los que hace referencia la página de lista estén disponibles para su uso en modo sin conexión. Para obtener más información sobre cómo habilitar la compatibilidad con el modo sin conexión para los tipos de casos en su aplicación, consulte Habilitar el procesamiento de casos en apps móviles disponibles sin conexión.

1. Abra su canal móvil:
   1. En el panel de navegación de App Studio, haga clic en Channels (Canales).
   2. En la sección Current channel interfaces (Interfaces de canal actuales), haga clic en el mosaico que representa un canal móvil para su app.
2. En la página de canal móvil, en la pestaña Content (Contenido), haga clic en la categoría List pages (Páginas de listas).
3. Cree una nueva página de lista haciendo clic en Add (Agregar).
4. En la sección Edit page (Editar página), en el campo Page name (Nombre de la página), introduzca el nombre de la página de lista.
5. Opcional: para cambiar el ícono predeterminado de la página de lista móvil, seleccione un ícono del catálogo de imágenes:
   1. Junto al campo Page name (Nombre de la página), haga clic en el ícono actual.
   2. En la ventana Icon class picker (Selector de clase de ícono), seleccione el ícono que desea usar.
6. En la lista Case type (Tipo de caso), seleccione el tipo de caso que es compatible con su proceso de negocio. Por ejemplo: para una página de lista en la que los usuarios presentan gastos en diferentes categorías, como la categoría Alojamiento, seleccione el tipo de caso de creación de reportes de gastos.
7. En la lista Data page (Página de datos), seleccione la fuente de datos de la lista que desea utilizar para completar la pantalla de la página. Por ejemplo: seleccione la vista de datos que almacena todos los reportes de gastos de la categoría Alojamiento.
   Nota: Al crear un tipo de caso, Pega Platform crea automáticamente una fuente de datos de lista, que puede utilizar en las páginas de listas móviles.
8. En la sección List item information (Información del elemento de la lista), configure cómo la página muestra los objetos de trabajo:

   Elecciones	Acciones
   Agregar un campo al objeto de trabajo	En la sección List item information (Información del elemento de la lista), haga clic en Add field (Agregar campo) y, a continuación, seleccione un tipo de campo. En la lista que aparece junto al campo, seleccione la propiedad que desea utilizar para completar el campo en el momento de la ejecución.
   Quitar un campo del objeto de trabajo	En la sección List item information (Información del elemento de la lista), junto al campo que desea eliminar, haga clic en el ícono Delete this row (Eliminar esta fila).

   Por ejemplo: puede utilizar la siguiente configuración de campos y propiedades para mostrar la página con los reportes de gastos:
   • Para el campo Primary (Principal), seleccione la propiedad Label (Etiqueta) que define el nombre del reporte.
   • Para el campo Secondary (Secundario), seleccione la propiedad Amount (Monto) que define el monto total del gasto.
   • Para el siguiente campo Secondary (Secundario), seleccione la propiedad Create Date/Time (Fecha/hora de creación) que define la fecha y hora en que se presenta el gasto.
   • Para el siguiente campo Secondary (Secundario), agregue una propiedad personalizada que defina la categoría del gasto, como Alojamiento.
   • Para el campo Status (Estado), seleccione la propiedad Work status (Estado del trabajo) que define el estado del reporte.
9. En la sección Swipe actions (Acciones de deslizamiento), especifique lo que ocurre cuando los usuarios deslizan el dedo por los objetos de trabajo seleccionados en el momento de la ejecución:

   Elecciones	Acciones
   Agregar una acción de deslizamiento de derecha a izquierda	En la categoría Right side actions (Acciones a la derecha), haga clic en Add action (Agregar acción) y, a continuación, seleccione la acción que desea agregar.
   Agregar una acción de deslizamiento de izquierda a derecha	En la categoría Left side actions (Acciones a la izquierda), haga clic en Add action (Agregar acción) y, a continuación, seleccione la acción que desea agregar.
   Eliminar una acción de deslizamiento	Junto a la acción que desea eliminar, haga clic en el ícono Remove (Eliminar).
   Cambiar el nombre de la acción de deslizamiento	Junto a la acción cuyo nombre desea cambiar, haga clic en el ícono Click to edit configuration (Hacer clic para editar la) configuración. En el campo Name (Nombre), introduzca un nuevo nombre para la acción. Haga clic en Submit (Enviar).
   Cambiar el ícono de una acción de deslizamiento	Junto a la acción cuyo ícono desea cambiar, haga clic en el ícono Click to edit configuration (Hacer clic para editar la) configuración. En la sección Icon (Ícono), haga clic en Change (Cambiar). En la ventana Icon class picker (Selector de clase de ícono), seleccione el ícono que desea usar. Haga clic en Submit (Enviar).
   Cambiar la dirección de deslizamiento de la acción	Arrastre la acción seleccionada a la categoría de dirección de deslizamiento correspondiente. Por ejemplo, para cambiar la dirección de deslizamiento de derecha a izquierda, arrastre la acción a la categoría Right side actions (Acciones a la derecha).
   Cambiar el orden de las acciones de deslizamiento	Nota: Esta opción está disponible si agrega más de una acción para una dirección de deslizamiento.Arrastre la acción seleccionada hacia arriba o hacia abajo en la lista de direcciones de deslizamiento.Consejo: Asegúrese de que la acción más importante para su página se muestre más cerca del borde de la pantalla para que el elemento sea más accesible para los usuarios de la app móvil.

   Por ejemplo: para una página con reportes de gastos, puede configurar las siguientes acciones de deslizamiento:
   • En la categoría Right side actions (Acciones a la derecha), agregue una acción Edit details (Editar detalles) para que los usuarios puedan editar los reportes de gastos seleccionados deslizando el dedo hacia la izquierda.
   • En la categoría Right side actions (Acciones a la derecha), agregue una acción Attach file (Adjuntar archivo) para todo el caso para que los usuarios puedan adjuntar archivos, como una factura, a los reportes de gastos seleccionados deslizando el dedo hacia la izquierda.
   • En la categoría Left side actions (Acciones a la izquierda), agregue una acción Follow (Seguir) para que los usuarios puedan comenzar a recibir notificaciones sobre un reporte de gastos seleccionado deslizando el dedo hacia la derecha.
10. Opcional: para agregar un botón de acción flotante que cree un nuevo objeto de trabajo cuando los usuarios toquen el botón, seleccione la checkbox Show create item button (Mostrar botón de creación de elementos).
    El botón de acción flotante es un botón que aparece en la parte inferior de la página en la app móvil.
    Por ejemplo: para la página de lista móvil con una lista de reportes de gastos, el botón de acción flotante crea un nuevo reporte de gastos.
11. Haga clic en Save (Guardar).

Por ejemplo: un desarrollador de apps móviles diseña una página de lista para la app de creación de reportes de gastos uPlus que les permite a los usuarios desplazarse por los gastos y examinar la información más relevante, como la etiqueta y el tipo de gasto.

Próximo paso: agregue su página de lista móvil a la barra de menús y, a continuación, verifique los cambios en su app móvil. Para obtener más información, consulte Adición de elementos a la barra de menús y Vista previa de apps móviles.

• Autoría de páginas de casos móviles para aplicaciones Cosmos React

  Personalice las páginas de casos en el entorno de autoría low-code para resaltar la información más relevante en una vista móvil fácil de usar. De esta manera, se asegura de que los usuarios puedan ver y editar con eficacia los casos en sus dispositivos móviles.

• Adición de un gadget de búsqueda

  Mejore la usabilidad de su app móvil configurando y habilitando la funcionalidad de búsqueda. Puede garantizar resultados de búsqueda más útiles y aumentar la velocidad de búsqueda limitando el alcance de estas a tipos de casos específicos.

• Adición de un botón de acción flotante

  Mejore la acción más importante de una página agregando un botón de acción flotante a su app móvil. Por ejemplo, puede agregar un botón de acción flotante que inicie un flujo de casos para crear un nuevo reporte de gastos en su app móvil Gastos.

• Adición de elementos a la barra de menús

  Cree una experiencia de navegación eficaz en su app móvil agregando páginas y acciones a la barra de menús. Por ejemplo, puede agregar una página de perfil personalizada a la barra de menús de su app Gastos para que los usuarios puedan acceder fácilmente a la pantalla con su información básica de contacto.

• Adición de contenido a las apps móviles

Antes de comenzar: cree un canal móvil para su app móvil. Para obtener más información, consulte Configuración de apps móviles.Nota: Lleve a cabo este procedimiento solo en los siguientes escenarios:

• Para especificar diferentes íconos de apps para iOS y Android.
• Para cargar imágenes de íconos en un formato distinto al formato SVG predeterminado, por ejemplo, .png.
• Para cargar imágenes de íconos con un resolución distinta a la recomendada de 512 x 512 píxeles.
• Para las aplicaciones de Android, para cargar un ícono de notificación personalizado para la barra de estado de su app móvil.

De lo contrario, personalice el ícono y la pantalla de inicio de la app móvil en un entorno de low-code. Para obtener más información, consulte Personalización de los íconos y la pantalla de inicio de las apps móviles.

Importante: Cuando reemplace los archivos de imágenes predeterminados en el archivo .zip de activos, asegúrese de mantener la estructura de directorios, los nombres de los archivos y las dimensiones de las imágenes del archivo .zip de activos personalizados idénticos a la configuración del archivo .zip predeterminado. Si falta un activo de imágenes específico en su archivo .zip de activos personalizados, el sistema operativo del dispositivo móvil cambia el tamaño de los activos existentes (Android) o reemplaza los activos que faltan con los recursos predeterminados del sistema (iOS).

1. Descargue el archivo .zip de activos simplificados que coincida con su versión de Pega Mobile Client.
   Para obtener más información, consulte Plantillas de activos de marca de Pega Mobile Client.
2. Extraiga el contenido del archivo .zip.
3. Reemplace los activos de imágenes en las carpetas que extrajo del archivo .zip para personalizar cualquiera de los siguientes gráficos:

   Elecciones	Acciones
   Ícono de la app móvil (iOS)	En la carpeta common_assets, reemplace el archivo icon.svg por el archivo de imagen que desea usar. Nota: Si piensa publicar su app móvil en Apple App Store, use un ícono rectangular. Los dispositivos móviles iOS también cambian el tamaño del archivo icon.svg y lo usan como ícono para mostrar notificaciones en la barra de estado de su app móvil.
   Ícono de la app móvil (Android)	En la carpeta common_assets, reemplace el archivo icon.svg por el archivo de imagen que desea usar. En la carpeta android, reemplace el archivo icon_round.svg por el archivo de imagen que desea usar. Nota: Use un ícono circular. Los dispositivos Android que son compatibles con los íconos circulares del iniciador utilizan el archivo icon_round.svg en lugar del archivo icon.svg como ícono de la app. En la carpeta android, reemplace el archivo notification_icon.svg por el archivo de imagen que desea usar. Los dispositivos móviles Android usan este ícono para mostrar notificaciones en la barra de estado de su app móvil. Nota: Use un ícono que cumpla con los siguientes requerimientos: Formato de imagen: 32 bits .png (con alfa) Imagen transparente Índice de color de transparencia: blanco (#FFFFFF) Opcional: para habilitar los íconos adaptables para su app móvil, en la carpeta android, reemplace los archivos icon_background.svg y icon_foreground.svg por los archivos de imagen que desea usar. Para obtener más información sobre los ícono adaptables de los sistemas operativos Android, consulte el artículo Íconos adaptables en el sitio web Android Developers .
   Logotipo de la pantalla de presentación (iOS y Android)	En la carpeta common_assets, reemplace el archivo splashlogo.svg por el archivo de imagen que desea usar.

4. Seleccione las carpetas que extrajo del archivo .zip que ahora tienen los activos personalizados y, a continuación, comprímalos en un único archivo .zip.
5. Abra su canal móvil:
   1. En el panel de navegación de App Studio, haga clic en Channels (Canales).
   2. En la sección Interfaces de canal actuales, haga clic en el mosaico que representa un canal móvil para su app.
6. En la página de canal móvil, en la pestaña Layout, haga clic en Experiencia de marca.
7. En la sección Experiencia de marca, haga clic en el ícono Configurar experiencia de marca avanzada y, a continuación, seleccione la checkbox Experiencia de marca avanzada.
8. En la sección Cargar archivo de experiencia de marca personalizada, haga clic en Elegir archivo y, a continuación, seleccione el archivo .zip que contiene sus activos personalizados.
9. Confirme su selección haciendo clic en Aceptar.
10. Haga clic en Save (Guardar).

Resultado: en el momento de la ejecución, la app móvil utiliza los activos de imagen personalizados del archivo de activos .zip que cargó en el canal móvil.Próximo paso: verifique los cambios en la app móvil generando, instalando e iniciando la app. Para obtener más información, consulte Generación de apps móviles nativas.

• Personalización de los íconos y la pantalla de inicio de las apps móviles

Antes de comenzar: prepárese para obtener una vista previa de una app móvil.

• Configure el canal móvil. Para obtener más información, consulte Configuración de apps móviles.
• En su dispositivo móvil, descargue e instale Pega Mobile Preview desde App Store o Google Play.

Cuando desarrolle una app móvil para una aplicación, obtenga una vista previa del canal móvil en un dispositivo móvil después de cada cambio que influya en la aplicación. Por ejemplo, genere una vista previa después de agregar una página, cambiar el layout o modificar el flujo.

Atención: No utilice Pega Mobile Preview para fines de producción.

Pega Mobile Preview muestra una aproximación de la experiencia del usuario que puede ayudarle a desarrollar y probar su app móvil, hasta que cree un archivo ejecutable. Pega Mobile Preview no es compatible con ciertas funciones, por ejemplo, las notificaciones automáticas.

Los canales móviles que se agregan a Pega Mobile Preview caducan después de 30 días.

1. En el panel de navegación de App Studio, haga clic en Channels (Canales).
2. En la sección Interfaces de canal actuales, haga clic en el mosaico que corresponde al canal móvil que desea modificar.
3. En la esquina superior derecha de la página de configuración del canal móvil, haga clic en el ícono Pega Mobile Preview.

   

   

   Resultado: aparece el panel Vista previa de la aplicación con un código QR.
4. En su dispositivo móvil, abra Pega Mobile Preview y, a continuación, toque Iniciar configuración.
5. En la pantalla de definición de canales, agregue su canal móvil a la lista de canales móviles disponibles:

   Elecciones	Acciones
   Escanear el código QR	Toque Escanear el código QR, apunte la cámara hacia el código QR en el panel Vista previa de la aplicación y espere a que el lector reconozca el código.
   Introducir la URL del canal móvil	En App Studio, en la página de configuración del canal móvil, en el panel Vista previa de la aplicación, haga clic en Enviarme instrucciones por correo electrónico. Resultado: se abre un mensaje de correo electrónico en su cliente de correo electrónico predeterminado. A través de su cliente de correo electrónico predeterminado, envíe el mensaje de correo electrónico a un buzón al que pueda tener acceso desde su dispositivo móvil. En su dispositivo móvil, abra el mensaje y, a continuación, copie la URL del canal móvil. En Pega Mobile Preview, toque Introducir la URL manualmente y, a continuación, pegue la dirección del canal móvil.

   En la lista Activo, puede agregar más canales tocando el ícono Agregar o eliminar canales deslizándolos hacia la derecha o izquierda.
6. En la lista Activo, toque el canal al que desea acceder.
7. En la pantalla de autenticación, inicie sesión en el canal.
8. Pruebe el canal móvil para asegurarse de que el layout y la funcionalidad de la app móvil cumplan con los requerimientos.
9. Opcional: para actualizar el canal móvil después de modificar la app móvil en Pega Platform, actualice el canal:

   Elecciones	Acciones
   Actualizar la pantalla actual	Desliza el dedo hacia abajo para acceder al contenido de la pantalla.
   Actualizar el canal móvil	En cualquier pantalla del canal móvil actual, toque el ícono Atrás. En la lista Activo, toque el nombre del canal móvil.

• Desarrollo de apps móviles
• Adición de contenido a las apps móviles
• Mejora de las apps móviles