Crear una aplicación de Experience Builder y agregar widgets

Creará una aplicación de experiencia web con ArcGIS Experience Builder. Empezará con una plantilla en blanco y agregará y configurará sus widgets para configurar la aplicación.

Crear una experiencia web en blanco

Empezará creando una aplicación de experiencia web en blanco.

  1. Inicie sesión en su cuenta de la organización de ArcGIS.
    Nota:

    Si no tiene una cuenta de organización, consulte las opciones de acceso a software.

  2. Haga clic en la pestaña Contenido y en Crear aplicación.

    Botón Crear aplicación

  3. Elija Experience Builder.

    Opción Experience Builder

  4. En la página de inicio, haga clic en Crear nuevo.

    Botón Crear nuevo

    Aparece la página Plantilla y muestra la galería de opciones de plantilla. Las plantillas son diseños y temas predeterminados para las aplicaciones que crea. En esta aplicación, utilizará la plantilla En blanco.

  5. En la pestaña Predeterminado, encuentre la plantilla Pantalla completa en blanco y haga clic en Crear.

    Plantilla Pantalla completa en blanco

    La aplicación se abre en el generador y muestra un lienzo en blanco. Cambiará el nombre de su aplicación por un título más significativo.

  6. En la cinta, haga clic en Experiencia sin título 1 y escriba Datos demográficos de salud estatales.
    Nota:

    El título predeterminado podría variar.

    Aplicación con cambio de nombre

    La experiencia web está lista para que agregue widgets. Los widgets se clasifican en categorías basándose en su funcionalidad, como Centrado en mapa, Centrado en datos o Elementos de página.

Agregar widgets a la aplicación

A continuación, agregará el widget Business Analyst, un widget Mapa y un widget Texto a la aplicación.

  1. En el panel Insertar widget, en Centrado en el mapa, arrastre el widget Business Analyst al lienzo.

    Widget que se está arrastrando sobre el lienzo

    El panel Business Analyst se abre a la derecha y presenta el modo Flujo de trabajo seleccionado de forma predeterminada. El modo Flujo de trabajo proporciona al usuario de la aplicación los pasos para elegir una ubicación y ejecutar una infografía. Sin embargo, como conoce la infografía concreta que necesita y las ubicaciones específicas (condados del estado) que desea ver, utilizará el modo Preestablecido en su lugar.

  2. En el panel Business Analyst, en Modo, haga clic en Preestablecido.

    Modo Preestablecido

    A continuación, complementará el widget Business Analyst con los widgets Mapa y Texto.

  3. En el panel Insertar widget, en la sección Centrado en mapa, arrastre el widget Mapa hasta el lienzo.

    Widget Mapa que se está arrastrando hasta el lienzo

  4. En la sección Elementos de página, arrastre el widget Texto hasta el lienzo.
  5. Organice los widgets Texto y Mapa de manera que tengan la misma anchura y ocupen aproximadamente un tercio del lienzo en el lado izquierdo. Cambie el tamaño del widget Business Analyst para utilizar el espacio restante del lienzo.

    Diseño de aplicación

    Ahora el aspecto de la aplicación está compensado. Siempre puede modificar la colocación de los widgets, pero por el momento tiene buen aspecto.

Ha creado una aplicación en Experience Builder, le ha agregado tres widgets y ha diseñado el aspecto de la aplicación y la colocación de los widgets. En la actualidad, los widgets tienen asignada la funcionalidad predeterminada. A continuación, personalizará la configuración de los widgets para satisfacer las necesidades de la empresa.


Configurar el widget Business Analyst y publicar la aplicación

El widget Business Analyst permite mostrar infografías en la aplicación. Ha agregado el widget Business Analyst y lo ha definido para utilizar el modo preestablecido, lo que permite incorporar una infografía y predefinir la ubicación predeterminada, así como el tipo de zona de influencia y las unidades de las ubicaciones de punto.

Nota:

En cualquier momento puede obtener una vista previa e interactuar con la aplicación haciendo clic en Vista en directo.

Configurar los widgets

Configurará el widget Business Analyst para el proyecto del servicio sanitario vinculándolo con el mapa y configurando la ubicación predefinida. También elegirá la infografía mostrada en la aplicación y definirá un título.

  1. En el lienzo, haga clic en el widget Business Analyst para seleccionarlo.

    Aparece el panel Business Analyst. En este panel, puede configurar el widget según sus preferencias.

  2. En el menú desplegable Seleccionar widget de mapa, elija Mapa.

    Opción Mapa

  3. En Configuración de ubicación, asegúrese de que Estados Unidos esté seleccionado y haga clic en Definir una ubicación.

    Botón Definir una ubicación

    Aparece el panel Definir una ubicación. En este panel, puede definir el área geográfica de la infografía. Para este ejemplo, utilizará el hospital del sistema sanitario de la Universidad de Kansas como su ubicación.

  4. En el campo de búsqueda, escriba 1700 SW 7th St. y haga clic en el resultado de búsqueda, que está en Topeka, Kansas.

    Resultados de búsqueda de direcciones

    La ubicación se agrega al mapa y será la ubicación predeterminada cuando los usuarios accedan a su aplicación. A continuación, configurará las zonas de influencia que se utilizarán en el cálculo de la información demográfica de las infografías.

  5. En el panel del widget Business Analyst, haga clic en Definir zonas de influencia.

    Opción Definir zonas de influencia

    Aparece el panel Definir zonas de influencia.

  6. En el panel Definir zonas de influencia, haga clic en Tiempo de conducción seguido de Aplicar.

    Opciones Zona de influencia de tiempo de conducción

    A continuación, elegirá la infografía predetermina que se muestra en su aplicación. Como el objetivo de la aplicación es mostrar información demográfica y relacionada con la salud, seleccionar una infografía con esas variables.

  7. En el panel Business Analyst, haga clic en Seleccionar una infografía.

    Opción Seleccionar una infografía

    Aparece el panel Seleccionar una infografía.

  8. Expanda la categoría Infografía de Esri y elija Estadísticas sobre atención sanitaria y seguros.

    Lista desplegable de infografías

    La infografía aparece en el widget.

    Infografía de ejemplo

    A continuación, asignará un título y una descripción a la aplicación para situar a los usuarios en contexto.

  9. Haga doble clic en el widget Texto y escriba Informe de atención sanitaria y seguros.

    Widget Texto con texto nuevo

  10. En el widget Texto, resalte el texto. En el panel Texto, cambie el tamaño de fuente a 28 píxeles y haga clic en los botones Negrita y Centro para alinear el texto en el centro.

    Configuración de texto

    En el lienzo, el texto se actualiza.

    Texto actualizado del widget

  11. En la cinta, haga clic en el botón Guardar.

    Botón Guardar

    Ha configurado la aplicación a su gusto y ya tiene todo listo para verla en modo Vista en directo y publicarla.

Publicar y compartir la aplicación

A continuación, verá la aplicación como la vería un usuario utilizando el Modo en directo. A continuación, publicará, probará y compartirá la aplicación.

  1. En la cinta superior, haga clic en Vista en directo.

    Opción Vista en directo

    La aplicación cambia a la vista en directo y el botón cambia de color para indicar que la aplicación está en la vista en directo.

    Modo de vista en directo activo

    La vista en directo permite utilizar la aplicación de la misma forma que lo hará el usuario de la aplicación.

  2. En el widget Mapa, en la barra de búsqueda, escriba Wesley Medical Center y elija el resultado en 550 N Hillside Street en Wichita, Kansas.

    Resultados de búsqueda del centro médico

    El mapa se acerca a Wesley Medical Center y aplica zonas de influencia alrededor de la ubicación que representa los tiempos de conducción de 5, 10 y 15 minutos. La infografía muestra las variables de atención sanitaria y seguros correspondientes a 5 minutos de tiempo de conducción desde el centro.

    Vista previa de la aplicación

  3. En la barra de título de la infografía, haga clic en el menú desplegable 5 minutos de conducción y elija 10 minutos de conducción.

    Opción 10 minutos de conducción

    La infografía se actualiza para mostrar los datos demográficos en la zona de influencia de 10 minutos.

    Infografía correspondiente a 10 minutos de tiempo de conducción

    Tras probar la aplicación y verificar que funciona, la publicará para que resulte posible compartirla.

  4. En la cinta, haga clic en el botón Guardar y, a continuación, en el botón Publicar para publicar su aplicación.

    Botón Publicar

  5. En la cinta, haga clic en el botón Más y elija Ver elemento publicado.

    Opción Ver elemento publicado

    Se abre otra pestaña del navegador web y aparece la aplicación.

  6. Pruebe la aplicación buscando un centro médico.
  7. Regrese a la otra pestaña del navegador en la que la aplicación se encuentra en el modo de edición.
  8. En la cinta, haga clic en el botón Más y elija Copiar vínculo de elemento publicado.

    Opción Copiar vínculo de elemento publicado

    Ha copiado el vínculo en la aplicación publicada y puede compartirla. Sin embargo, la configuración de uso compartido predeterminada es para el propietario y, por consiguiente, nadie más puede acceder a la aplicación hasta que cambie la configuración. Puede ir a la página de detalles del elemento de la aplicación en ArcGIS Online desde la aplicación.

  9. En la cinta, haga clic en el botón Más y elija Cambiar configuración de uso compartido.

    Opción Cambiar configuración de uso compartido

    Aparece la página de detalles del elemento de la aplicación.

  10. Haga clic en el botón Compartir.

    Botón Compartir

    La ventana Compartir aparece y presenta varias opciones para compartir. En la actualidad, el propietario de la aplicación es el único que puede acceder a ella, pero puede cambiar un ajuste para compartirla con su organización o con todos (el público).

  11. En la ventana Compartir, haga clic en Organización y luego en Guardar.

    Compártala con la organización.

    Ahora, la aplicación se comparte para que otros miembros de su organización puedan usarla.

En este tutorial, ha creado una aplicación web centrada en la presentación de infografías de una ubicación específica que introduce el usuario. Ha agregado el widget Business Analyst y otros widgets, los ha configurado, ha probado la aplicación, la ha publicado y la ha compartido. Ahora otros pueden utilizar la aplicación para hallar información sobre la atención sanitaria y los seguros de un centro médico que elija.

Encontrará más tutoriales en la galería de tutoriales.