Crear un Pega Web Mashup

4 Tareas

15 minutos

Pega Platform 8.7 (Español)

Pega Platform 8.7 (English) Pega Platform 8.7 (日本語)

Visible to: All users

Intermedio Pega Platform 8.7 Experiencia de usuario Español

Escenario

GoGoRoad es una aplicación de asistencia en carretera que pertenece a Uplus Auto. Las partes interesadas de GoGoRoad quieren darles a los clientes la capacidad de crear una nueva solicitud de asistencia desde el sitio web de la empresa para optimizar las operaciones relativas a las solicitudes de asistencia en carretera de los clientes. Cree un Pega Web Mashup e implemente el mashup en el sitio web de Uplus Auto.

La siguiente tabla incluye las credenciales de operador que necesita para completar el reto.

Función	Nombre de usuario	Contraseña
Desarrollador de aplicaciones	author@gogoroad	pega123!

Debe iniciar su propia instancia de Pega para completar este Título del desafío.

La inicialización puede demorar hasta 5 minutos. Le pedimos que tenga paciencia.

• Iniciar sesión

Recorrido del Reto

Tareas detalladas

1 Crear una aplicación de autoservicio

Nota: Conforme a las prácticas recomendadas de Pega, cree una aplicación sobre la aplicación principal para que los cambios en la UI que haga para el web mashup no afecten la UI de la aplicación principal.

1. En el encabezado de Dev Studio, haga clic en GoGoRoad > New Application para abrir el asistente New Application (Nueva aplicación).
   
2. En el asistente New Application (Nueva aplicación), haga clic en Search all types  (Buscar todos los tipos) para seleccionar un tipo de aplicación.
   
3. En el campo, escriba o seleccione GoGoRoad y haga clic en Use this application type para usar la aplicación actual.
   
4. Debajo de Select case types (Seleccionar tipos de caso), confirme que estén seleccionados todos los tipos de caso y haga clic en Continue (Continuar).
   
5. Debajo de Select data types (Seleccionar tipos de datos), confirme que estén seleccionados todos los tipos de datos y haga clic en Continue.
   
6. Nombre la aplicación GoGoSelf-Service.
   
7. Haga clic en Create application (Crear aplicación).
8. Haga clic en Go to app (Ir a la app).
9. En Dev Studio, abra la definición de la aplicación GoGoSelf-Service.
10. En la sección Built on applications (Aplicaciones incorporadas), debajo de la aplicación GoGoRoad 01.01.01, agregue la aplicación Theme-Clarity 01.01 para anular las reglas de Cosmos y mostrar el formulario de solicitud de asistencia en una aplicación web de autoservicio.
11. Haga clic en la segunda fila y arrástrela para mover la aplicación Theme-Clarity por encima de la aplicación GoGoRoad, de modo que la aplicación GoGoSelf-Service use el skin de la aplicación Theme-Clarity.
    
    Tip: Si encuentra que falta una regla de flujo después de crear la aplicación GoGoSelf-Service, abra la regla de flujo y guarde una copia en la nueva aplicación con el botón Save As (Guardar como).

2 Configurar los permisos de la aplicación

1. En la definición de la aplicación GoGoSelf-Service, haga clic en la pestaña Security (Seguridad).
2. En la sección Mashup security, haga clic en Add a row (Añadir una fila).
   
3. En el campo Trusted origin (Origen fiable), escriba https://pegasystems.github.io/uplus-wss/ para permitir que la aplicación acepte mensajes entrantes del sitio anfitrión.
4. Guarde la definición de la aplicación.

3 Crear un canal mashup en App Studio

1. En el panel de navegación de App Studio, haga clic en Channels (Canales).
2. Cree una nueva interfaz de canal Web mashup llamada Request for assistance (Solicitud de asistencia).
   
3. Verifique que Use encryption (Usar la encriptación) esté activado para garantizar la observancia de las prácticas recomendadas de seguridad.
4. En la sección Configuration (Configuración), en la lista Action , confirme que Create a new case (Crear un nuevo caso) esté seleccionado.
5. En la lista Case type (Tipo de caso), seleccione Assistance Request (Solicitud de asistencia).
6. Active la opción Retain mashup state on browser refresh (Mantener el estado del mashup al actualizar el navegador) .
7. En la lista Skin , seleccione Clarity Theme - Deep Cerise  para darle una skin listo para usar al mashup.
8. En la lista Initial skeleton , confirme que Default Mashup Skeleton esté seleccionado.
9. Haga clic en Generate mashup code (Generar código de mashup) para mostrar la ventana Mashup code.
   
10. En la ventana Mashup code, en la sección Mashup code , haga clic en Copy y pegue el código en un archivo de texto para hacer referencia a los valores de los parámetros.
    
11. Cierre la ventana Mashup code (Código de mashup) y luego haga clic en Save  (Guardar) para guardar el canal.

4 Implementar el mashup en el sitio de Uplus

Nota: El sitio de Uplus les permite a los usuarios introducir los valores de atributos del código de mashup de manera sencilla, para tener una vista previa del código de mashup sin configurar un sitio externo. Si usted tiene su propio sitio externo, puede agregarlo como origen de confianza y pegar todo el código de mashup <div> en el código del sitio anfitrión para implementar el mashup en el sitio externo.

1. Haga clic en https://pegasystems.github.io/uplus-wss/ para acceder al sitio de Uplus en su navegador.
   
2. En el sitio de Uplus, haga clic en Auto para abrir la aplicación de Uplus Auto.
   
3. En el pie de página del sitio de Uplus Auto, haga clic en Settings (Configuración).
   
4. En el panel de navegación a la izquierda, haga clic en Quick Links (Enlaces rápidos) para configurar el caso de mashup en el sitio de Uplus Auto.
   
5. Abra el archivo de texto con el código de mashup y complete el formulario Mashup Case 1 usando los valores de atributos del código de mashup como se muestra en la siguiente tabla.

   Nombre del atributo en el código de mashup	Campo del formulario	Valor del formulario
   data-pega-threadname	Nombre del caso en "en"	Solicitud de asistencia
   data-pega-action	Acción	createNewWork
   data-pega-URL	URL	Nota: Este valor es la URL de la instancia que usa para generar el código de mashup.
   data-pega-action-param-classname	Nombre de clase	GoGo-GoGoSelf-Work-AssistanceRequest
   data-pega-applicationname	Nombre de la aplicación	GoGoSelf
   data-pega-channelID	Id. del canal	Nota: Este valor es un Id. único que se genera en el código de mashup.

    
   Tip: Los valores en el formulario coinciden con los valores de atributos en el código de mashup que usted creó, como se muestra en la siguiente imagen.

   
6. En el panel de navegación de la izquierda, haga clic en Users (Usuarios).
7. En el formulario User 1 (Usuario 1), en los campos Username y Pega userid, escriba author@gogoroad.
8. En los campos Password y Pega password, escriba pega123!.
   
9. En el panel de navegación a la izquierda, haga clic en Save para guardar la configuración.

Confirme su trabajo

1. En el encabezado de Settings, haga clic en el logo Uplus Auto para volver al sitio principal de Uplus Auto.
2. En la esquina superior derecha del sitio de Uplus Auto, haga clic en Log in (Acceder) y use las credenciales que introdujo en el formulario User 1 para Sign in.
3. En el panel ubicado de la derecha, en la sección Quick links, haga clic en Request for assistance (Solicitar asistencia).
   
4. Confirme que el sitio muestre el Pega Web Mashup, en el que puede crear un caso de solicitud de asistencia.
   
   Nota: Si aparece un mensaje de error que dice que las cookies de terceros deben estar habilitadas para que el mashup funcione, habilite las cookies en Dev Studio. Haga clic en Configure > System > Settings > Cross-Site Request Forgery, habilite la opción Enable samesite cookie attribute y seleccione None de la lista Samesite options. Haga clic en Submit (Enviar).
5. Avance en el caso hasta el paso de identificación de vehículo.
6. Actualice el navegador y confirme que se mantenga el estado del mashup.

---

Este Reto es para practicar lo aprendido en el siguiente Módulo:

• Pega Web Mashup v4

---

Disponible en la siguiente misión:

• Senior System Architect v4