Skip to main content

Reto

Crear un Pega Web Mashup

4 Tareas

15 minutos

Visible to all users
Intermedio Pega Platform 8.7 Interfaz 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 [email protected] pega123!
Nota: Su entorno de práctica podría admitir la compleción de varios retos. Como resultado, es posible que la configuración que se muestra en el tutorial del reto no coincida exactamente con su entorno.

Recorrido del Reto

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.

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).
    new application
  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.
    search all application types
  3. En el campo, escriba o seleccione GoGoRoad y haga clic en Use this application type para usar la aplicación actual.
    built on app
  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).
    select all case types
  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.
    select all data types
  6. Nombre la aplicación GoGoSelf-Service.
    name your application
  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.
    app definition GoGoSelf-Service
    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).
    Mashup security section of the ReserveIt application definition
  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).
    Create a web mashup channel interface
  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.
    Generate mashup code button
  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.
    mashup code on text file
  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.
    uplus
  2. En el sitio de Uplus, haga clic en Auto para abrir la aplicación de Uplus Auto.
    Uplus auto tile
  3. En el pie de página del sitio de Uplus Auto, haga clic en Settings (Configuración).
    settings
  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.
    uplus settings menu
  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.
    using mashup parameters in the uplus form
  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 UsernamePega userid, escriba [email protected].
  8. En los campos PasswordPega password, escriba pega123!.
    User 1 form
  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).
    quick links request assistance
  4. Confirme que el sitio muestre el Pega Web Mashup, en el que puede crear un caso de solicitud de asistencia.
    final mashup
    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:


Disponible en la siguiente misión:

If you are having problems with your training, please review the Pega Academy Support FAQs.

¿Le ha resultado útil este contenido?

¿Quiere ayudarnos a mejorar este contenido?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice