Crear una aplicación de información ciudadana 311 sin necesidad de codificación

Los siguientes pasos describen cómo crear una aplicación a partir de una plantilla configurable. En esta lección, utilizará y adaptará una plantilla para generar una aplicación de información ciudadana 311 para la ciudad de Cilantro.

  • Elija una plantilla.
  • Cambie la configuración.
  • Pruébela en los dispositivos.
  • Genere archivos de instalación.
  • Publique en su tienda preferida.

Nota:

El 311 es un número de teléfono para cuestiones no urgentes implementado en numerosas comunidades de Estados Unidos y Canadá. Los ciudadanos pueden llamar a este número para acceder a una variedad de servicios de la ciudad, presentar quejas o informar de cuestiones no urgentes de la comunidad, tales como vehículos abandonados, grafitis o daños en la calzada. En todo el mundo, las autoridades locales proporcionan el mismo servicio a sus ciudadanos, pero, a menudo, sin un número estandarizado.

Crear una aplicación

La ciudad de Cilantro le ha proporcionado una capa de entidades que contiene un punto y una capa de polilínea que representa los servicios del 311 de la ciudad de Cilantro. Usará la plantilla Quick Report de AppStudio para crear una aplicación móvil multiplataforma.

Nota:

La plantilla Quick Report es ideal cuando se desea crear una aplicación de captura de datos. Le permite capturar una observación y enviarla a una capa en línea. Puede agregar su imagen de marca con iconos, colores e imágenes de pantalla de presentación. Muchas ciudades han creado aplicaciones móviles de información ciudadana 311 basadas en la plantilla Quick Report.

Para empezar, si es necesario, descargará e instalará AppStudio y algunos logotipos e iconos de la ciudad de Cilantro. Después, creará una aplicación con la plantilla Quick Report.

  1. Descargue el archivo comprimido Cilantro-City-Branding.
  2. Extraiga el contenido de Cilantro-City-Branding.zip en la ubicación que desee (por ejemplo, C:\Cilantro-City).
  3. Abra AppStudio.
    Nota:

    Si no tiene AppStudio, puede descargarla desde la página Recursos de ArcGIS AppStudio. Una vez descargado, haga clic en el archivo para iniciar el asistente de instalación. Siga las instrucciones del asistente para instalar la aplicación.

  4. En la cinta de la aplicación AppStudio, haga clic en Iniciar sesión.
  5. En el panel Iniciar sesión, seleccione Iniciar sesión.

    Opción Iniciar sesión

  6. Inicie sesión en su cuenta de organización de ArcGIS o en ArcGIS Enterprise usando una cuenta de usuario nominal.
    Nota:

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

  7. En la aplicación AppStudio, haga clic en Nueva aplicación.

    Botón Nueva aplicación

    Aparece la ventana Nueva aplicación, que presenta varias plantillas de aplicaciones listas para usar organizadas en pestañas a lo largo de una cinta.

  8. En la ventana Nueva aplicación, haga clic en la pestaña Plantillas y elija la plantilla Quick Report.

    Plantilla de Quick Report

    Nota:

    Los nombres de plantilla pueden mostrar un número de versión como parte del nombre. Además, al seleccionar una plantilla, se muestran un resumen y una descripción que describen un caso de uso y la configuración de la plantilla en el lado derecho de la ventana.

  9. En el panel lateral, haga clic en el botón Crear.

    Se crea una nueva aplicación Quick Report con la plantilla. Se agrega a la lista de aplicaciones disponibles. Pueden aparecer aplicaciones creadas por otros miembros de su organización. Sin embargo, si es la primera vez que utiliza AppStudio, es su única aplicación. Con la nueva aplicación seleccionada, revise el panel lateral, que proporciona información adicional sobre la aplicación.

  10. En la lista de aplicaciones, haga clic en la nueva aplicación Quick Report para seleccionarla, si es necesario. En el panel lateral, haga clic en el botón Editar título.

    Edite el nombre de la aplicación.

  11. En Título, escriba Cilantro 311 y haga clic en el botón Guardar cambios para actualizar el título de la aplicación.

Personalizar la aplicación

El diseño de su aplicación Cilantro 311 debe representar claramente su organización, así como el uso y la funcionalidad de la aplicación. Para aumentar el atractivo visual y el valor informativo de su aplicación, modificará la apariencia agregando descripciones, colores de ciudad, logotipos e imagen de marca.

  1. En la lista de aplicaciones, confirme que su aplicación Cilantro 311 esté seleccionada y haga clic en el botón Configuración del panel lateral.

    Aparece la ventana Configuración de AppStudio. Reposicione la ventana según sea necesario. No cierre la ventana de la aplicación principal AppStudio.

    Elija Configuración.

    En la ventana Configuración de AppStudio, cambiará y actualizará la vista en miniatura de la aplicación.

  2. En el panel Detalles, haga clic en el icono que representa la imagen de vista en miniatura de la aplicación.

    Cambie la vista en miniatura.

    Aparece una ventana de navegador.

  3. En la ventana del navegador, vaya a la carpeta que contiene el contenido extraído de Cilantro-City-Branding. Haga doble clic en la imagen thumbnail-cilantro311.
  4. Aparece un cuadro de diálogo que informa de que una copia de esta imagen sustituirá a la vista en miniatura actual. Haga clic en para confirmar la sustitución.

    El panel Detalles actualiza la vista en miniatura de la aplicación Cilantro 311 con el logotipo de la ciudad.

  5. En el panel Detalles, en Resumen, escriba Comunique problemas a la ciudad de forma fácil y rápida.
  6. En Descripción, escriba Esta aplicación permite a los ciudadanos solicitar fácilmente y rápidamente servicios comunitarios de 311 no urgentes, como la eliminación de grafitis, reparación de farolas, mantenimiento de árboles y más a la ciudad de Cilantro.

    A continuación, agregará un icono como identificación e imagen de marca de la aplicación en smartphones y otros dispositivos en los que es probable implementarla.

  7. En la ventana Configuración de AppStudio, haga clic en la pestaña Recursos.
  8. En el panel Recursos, en Icono de aplicación, haga clic en la imagen.

    Cambie el icono.

  9. En la ventana del navegador, busque la carpeta que contiene el contenido extraído de Cilantro-City-Branding. Haga doble clic en la imagen Icon-cilantro311.
  10. En la ventana del mensaje, haga clic en para copiar el archivo de imagen a la carpeta del proyecto de la aplicación.

    El icono se actualiza. A continuación, agregará una imagen de fondo.

  11. En la ventana Configuración de AppStudio, haga clic en la pestaña Propiedades.

    Aparece el panel Propiedades de Quick Report.

  12. Localice y revise las pestañas Pantalla de inicio, Formulario, Colores y Otras propiedades del panel.
  13. En la pestaña Pantalla de inicio, en Imagen de fondo, haga clic la imagen de fondo predeterminada (Forest Fire).

    Cambiar la imagen de fondo.

  14. En la ventana del navegador, busque la carpeta que contiene el contenido extraído de Cilantro-City-Branding. Haga doble clic en la imagen background-cilantro311.
  15. Si recibe un mensaje que le pregunta si desea copiar la imagen en la carpeta de la aplicación, haga clic en .

    En el panel Propiedades de Quick Report, la imagen de fondo de la pantalla de inicio se actualiza para reflejar la marca actualizada de la aplicación de información ciudadana 311 de Cilantro.

  16. En la pestaña Pantalla de inicio, desplácese y localice la propiedad Mostrar logotipo y haga clic en el botón Mostrar logotipo para desactivar el logotipo.

    Ajuste Mostrar logotipo

  17. Por su cuenta, es posible que desee actualizar los vínculos del pie de página y agregar un número de teléfono, detalles del sitio web y detalles de contacto adicionales como, por ejemplo, una dirección de correo electrónico.
  18. En la parte inferior de la ventana Configuración de AppStudio, haga clic en Aplicar para guardar los cambios.

    Un cuadro de mensaje verde confirma que se ha aplicado su configuración.

    La ciudad de Cilantro le ha proporcionado una capa de entidades que contiene un punto y una capa de polilínea que representa los servicios del 311 de la ciudad de Cilantro. A continuación, agregará la capa de entidades a la aplicación.

Agregar datos

Dado que la ciudad de Cilantro le ha proporcionado una capa de entidades que se utilizará en la aplicación móvil 311 para recopilar información, no tendrá que crear una nueva capa de entidades. La capa de entidades —y más específicamente, la plantilla utilizada en el diseño y la creación de la capa de entidades— es importante porque se utiliza en la aplicación Quick Report para construir selecciones y opciones utilizadas por los ciudadanos para informar y presentar solicitudes comunitarias 311 no urgentes.

  1. En el panel Propiedades de Quick Report, haga clic en la pestaña Formulario.

    Pestaña Formulario

    Nota:

    Los servicios de entidades, más comúnmente denominados capas de entidades, permiten a las organizaciones servir entidades a través de Internet y proporcionar una simbología específica para utilizarla al visualizar las entidades. Además, proporcionan una plantilla que se puede utilizar para una experiencia de edición mejorada en la que los usuarios pueden ejecutar consultas para localizar y actualizar entidades existentes y agregar nuevas entidades. Todas las actualizaciones se aplican al servidor y están disponibles para los usuarios de la capa de entidades.

  2. En el panel Formulario, localice y revise la propiedad Dirección del servicio de entidades.
    Nota:

    Su aplicación Quick Report utilizará la capa de entidades y sus capas y ajustes como plantilla para crear los detalles de informes de la aplicación. Por ejemplo, es posible que tenga una capa de entidades de calles utilizada para capturar información de señales de calles en su vecindario. Cada entidad de señal de calle, ya sea existente o capturada por usted y almacenada en la capa, puede contener atributos que le permiten actualizar y capturar la condición de la señal, incluir una imagen de la señal e informar de una correspondencia relacionada con la señal de calle.

  3. En la propiedad Dirección del servicio de entidades, reemplace la dirección predeterminada por la siguiente URL:
    https://services2.arcgis.com/j80Jz20at6Bi0thr/arcgis/rest/services/Cilantro/FeatureServer

    Dirección del servicio de entidades

    Nota:

    Para buscar una dirección de servicio de entidades alojado, abra el elemento de capa de entidades alojada en ArcGIS Online o ArcGIS Enterprise. Desplácese hacia abajo hasta la sección URL y haga clic en el botón Copiar para copiar la dirección.

    Copie la URL del servicio de entidades.

  4. Para Id. de capa del servicio de entidades, escriba 0,1.

    Los Id. de capa de entidades de la ciudad de Cilantro indican lo siguiente:

    • 0 para representar entidades de punto para recopilar problemas de grafitis, farolas, basura o señales
    • 1 para representar polilíneas para recopilar problemas de calles o aceras

    Un servicio de entidades, o capa de entidades, puede contener varias capas que componen el servicio. Al hacer referencia a capas específicas de una aplicación, debe introducir los Id. de capa para identificar las capas a las que la aplicación accederá y utilizará. Los Id. de capa se numeran empezando por 0, de modo que, si la capa de entidades consta de cinco capas y usted utiliza tres capas, la lista de Id. de capa puede ser 0,3,4, lo que indica que hace referencia a la primera, cuarta y quinta capa del servicio.

    Nota:

    Puede revisar e identificar los Id. de capa de servicio de entidades en el Directorio de servicios REST de ArcGIS junto con el nombre de capa y el tipo de entidad (punto, polilínea o polígono).

A continuación, completará la imagen de marca de la aplicación antes de generar un archivo de instalación.

Agregar un color de marca

Cambie y actualice el color de la aplicación para que coincida con los colores utilizados en el logotipo e iconos de su aplicación móvil de 311.

  1. En el panel Propiedades de Quick Report, haga clic en la pestaña Colores.
  2. En Color de fondo del encabezado, escriba #f15a24 y pulse Intro. En Color del botón, en el código hexadecimal de color, escriba #f15a24 y pulse Intro.

    Actualizar colores de marca

  3. En la parte inferior de la ventana Configuración de AppStudio, haga clic en Aplicar.

    Un cuadro de mensaje verde confirma que se ha aplicado su configuración.

    A continuación, configurará una licencia para ArcGIS Runtime. Las aplicaciones que no tienen licencia muestran un mapa con marcas de agua. Para esta aplicación, seleccionará una licencia Lite sin cargo.

  4. En la ventana Configuración de AppStudio, en el panel izquierdo, localice y seleccione la pestaña Licenciamiento.
  5. En el panel Licenciamiento, en Licenciamiento de ArcGIS Runtime, en Clave de licencia, haga clic en Definir licencia de Lite.

    Botón Definir licencia de Lite

    El cuadro de diálogo Clave de licencia se actualiza y muestra un token de clave de licencia válido.

  6. En la parte inferior de la ventana Configuración de AppStudio, haga clic en Aplicar y, a continuación, cierre la ventana.

Probar su aplicación

A continuación, probará su aplicación. Primero, la probará en la aplicación de escritorio. Después, puede probarla en un dispositivo móvil si lo desea.

  1. En la ventana AppStudio, confirme que la aplicación Cilantro 311 esté seleccionada.
  2. En el panel lateral, haga clic en Ejecutar.

    Botón Ejecutar

  3. La aplicación Cilantro 311 se abre en una nueva ventana.

    Ejecute la aplicación.

  4. Por su cuenta, pruebe la funcionalidad de la aplicación Cilantro 311.
    • Haga clic en Nuevo y genere un nuevo informe para un vehículo, un nuevo grafiti o un daño en la calzada.
    • Utilice el botón Siguiente para explorar las distintas opciones de la aplicación.
    • En el panel Agregar ubicación, mueva el mapa para afinar la ubicación del informe.
    • Cuando termine, cierre la aplicación.

    Mapa web en la página Agregar ubicación

    A continuación, puede cargar y compartir la aplicación con la comunidad.

  5. En la ventana AppStudio, confirme que su aplicación Cilantro 311 esté seleccionada y haga clic en el botón Cargar.

    Botón Cargar

  6. En la ventana Carga de AppStudio, en Opciones de uso compartido, haga clic en Mi organización y haga clic en el botón + Cargar.

    Un mensaje Carga correcta de color verde confirma que la aplicación se ha cargado correctamente y los miembros de la comunidad pueden descargarla e instalarla a partir de ahora.

  7. Cierre la ventana Carga de AppStudio.

    A continuación, puede optar por instalar AppStudio Player en un dispositivo móvil o probar la aplicación en su escritorio instalando una versión de escritorio de AppStudio Player. Los siguientes pasos ilustran una instalación de escritorio seguida de pasos opcionales para dispositivos móviles.

    Nota:

    Si no tiene AppStudio Player instalado en su escritorio, puede descargarla desde la página Recursos de ArcGIS AppStudio. Una vez descargado, haga clic en el archivo para iniciar el asistente de instalación. Siga las instrucciones del asistente para instalar la aplicación.

    Para instalar AppStudio Player en un dispositivo móvil, descárguelo de forma gratuita desde Microsoft Store, Google Play o la App Store. En su dispositivo móvil, complete la instalación siguiendo las instrucciones.

  8. En su escritorio o dispositivo móvil, inicie AppStudio Player. Haga clic en Iniciar sesión, inicie sesión en su cuenta de ArcGIS y, a continuación, seleccione su aplicación Cilantro 311.
    Nota:

    En AppStudio Player, puede iniciar sesión con una cuenta de ArcGIS Online o ArcGIS Enterprise.

  9. En AppStudio Player, descargue su aplicación y pruebe la aplicación agregando un nuevo informe y capturando un punto o línea para identificar la ubicación del informe.

Con ArcGIS AppStudio Developer Edition, los desarrolladores pueden crear un archivo de instalación de la aplicación que permita publicar la aplicación en una tienda. La siguiente sección opcional ilustra los pasos para hacerlo.

Crear archivos de instalación para la aplicación (opcional)

Si tiene una licencia de ArcGIS AppStudio Developer Edition (disponible al adquirir un nivel Builder o superior de ArcGIS Developer Subscription), puede crear archivos de instalación de la aplicación. En esta sección, creará un archivo .apk de instalación de la aplicación para Android y .exe para Windows.

Nota:

Necesitará una licencia de Apple Developer para crear un archivo .ipa de instalación de aplicaciones para dispositivos iOS.

  1. En AppStudio, en el panel lateral, haga clic en Configuración.
  2. En la ventana Configuración de AppStudio, haga clic en Plataformas > Android. En Nombre de paquete, proporcione un nombre como com.companyname.myapp.
    Nota:

    El nombre del paquete sigue una convención en la que el nombre de su organización o empresa se incluye dentro de un nombre de paquete estándar.

    Especifique el nombre del paquete para Android.

  3. Haga clic en Aplicar.
  4. Cierre la ventana Configuración de AppStudio.
  5. En AppStudio, confirme que la aplicación esté seleccionada y, en el panel lateral, haga clic en Make.

    Elija la herramienta Make.

    Aparece la ventana Make.

  6. En Make en la nube, haga clic en Seleccionar.

    Seleccionar Make en la nube

  7. En la ventana Configuración Make en la nube, en Seleccione las plataformas deseadas, en la columna Android, active la casilla de ARMv8 (64 bits), y en la columna Windows, active la casilla de 64 bits.

    Configuración en la nube

  8. Haga clic en Analizar compilación y haga clic en Solicitar compilación.

    Aparece la ventana Estado de generación.

    El servicio en la nube de AppStudio tarda unos minutos en crear los archivos de instalación de la aplicación. Una vez completada la solicitud de compilación, recibirá un correo electrónico con las instrucciones de descarga e instalación.

  9. En la ventana Estado de generación, haga clic en https://appstudio-ota.arcgis.com/ e inicie sesión con su cuenta de ArcGIS.

    Vínculo para la descarga

    Nota:

    Opcionalmente, puede leer el código QR correspondiente a los archivos de instalación desde la página de la consola de la aplicación, en https://appstudio.arcgis.com/.

  10. Haga clic en Instalar y descargue e instale las aplicaciones en su dispositivo.

    Botón Instalar

En esta lección, utilizó ArcGIS AppStudio junto con una plantilla configurable lista para usar para ayudarle a crear e implementar una aplicación móvil para la ciudad de Cilantro en la que los ciudadanos pueden enviar solicitudes comunitarias 311 y no urgentes, como la eliminación de grafitis, la reparación de farolas y el mantenimiento de árboles. Para desarrollar esta aplicación, que se puede ejecutar en varias plataformas, no fue necesario escribir ningún código y la aplicación se puede compartir dentro de su organización o con el público. Los pasos opcionales ilustran cómo instalar AppStudio Player en varias plataformas móviles y cómo crear un archivo de instalación de la aplicación.

Para obtener más información, consulte lo siguiente: