¿Qué pasaría si pudiéramos optimizar la entrada de datos tanto como sea posible para nuestros usuarios móviles? Esta fue la idea que tuve cuando decidí intentar crear un control personalizado de SAPUI5 que pudiera recopilar datos del reconocimiento de voz y colocarlos para su posterior procesamiento. Descubrí que podemos hacerlo posible utilizando un complemento de Cordova y desplegando nuestra aplicación SAPUI5 como una aplicación híbrida. En caso de que deseemos convertir una aplicación existente y habilitar nuestro control, podemos utilizar la función de Proyecto Móvil Híbrido de la Aplicación Web en SAP Web IDE, aunque esta función se ha marcado como experimental en la documentación del complemento SAP Web IDE Hybrid App Toolkit por ahora. Este control se comportará como un sap.m.input normal con el botón de reconocimiento de voz desactivado en caso de que nuestra aplicación no se esté ejecutando en un contenedor híbrido. Aquí hay una breve demostración de cómo se ve el control final:
Entonces, sigamos adelante y veamos cómo podemos crear y usar este control.
Prerrequisitos
Vamos a necesitar las siguientes herramientas:
- SAP Web IDE 1.15
- Hybrid Application Toolkit 1.8.2
- Un dispositivo móvil (en mi caso, Android) para realizar pruebas.
En este caso, nuestro dispositivo Android debe estar conectado, tener los controladores adecuados instalados, tener el modo de desarrollador habilitado y tener Android 4.4 y el modo de depuración USB habilitado, si desea depurar el proyecto con la funcionalidad chrome://inspect.
Obtener el complemento macdonst/SpeechRecognitionPlugin · GitHub e integrarlo con HAT (Cómo hacer esto se explicará más adelante)
Creando un proyecto SAPUI5 para construir y probar el control
Primero, crearemos una aplicación de proyecto SAPUI5 para poder escribir, construir y probar nuestro control. Para ello, debemos ingresar a SAP Web IDE, una vez allí, debemos seleccionar Archivo>Nuevo>Proyecto y luego especificar que queremos un Proyecto de Aplicación SAPUI5. Haremos este proyecto híbrido en una etapa posterior, para poder usar el complemento Cordova para el reconocimiento de voz. Lo llamaremos CustomControlApp y procederemos. A continuación, debemos ingresar nuestro espacio de nombres (custom.controls.demo), seleccionar el tipo de vista como XML e introducir el nombre de nuestra vista (CustomControlView). Después de seleccionar Finalizar, veremos que se creará la siguiente estructura de proyecto para nosotros:
Agregando el control a nuestro proyecto
Una vez que tenemos nuestro proyecto generado, necesitaremos una carpeta llamada control, en el directorio raíz del proyecto. A continuación, crearemos un nuevo archivo dentro de esta carpeta llamado SpeechRecognitionInputControl.js donde colocaremos nuestro control personalizado. Ahora, podemos incluir el siguiente código en nuestro archivo de control SpeechRecognitionInputControl.js:
No visitaremos todo el proceso de creación de un control personalizado en SAPUI5 por ahora, pero aquí hay un par de blogs que pueden ayudarte a comenzar este proceso:
- Cómo crear un control personalizado desde cero
- Creación de controles SAPUI5 personalizados
Básicamente, lo que estamos haciendo en este control es heredar primero de un control sap.m.Input. De esta manera, tendremos las propiedades y métodos de este control. A continuación, estamos agregando un control sap.m.button para iniciar el proceso de reconocimiento de voz. También verificamos que nuestra aplicación se esté ejecutando en un contenedor híbrido y creamos un nuevo objeto SpeechRecognition para usar la funcionalidad del complemento Cordova. Ahora, agregaremos el siguiente código a nuestro CustomControlView, para poder usar nuestro control personalizado en nuestra aplicación de muestra:
A partir de este código, podemos ver que estamos registrando nuestro espacio de nombres XML xmlns:custom=”control” y luego lo usamos para declarar nuestro control
La parte importante que podemos ver es que debemos hacer que la ubicación de nuestro control sea conocida por SAPUI5. Hacemos esto usando la directiva sap.ui.localResources(‘control’). A continuación, debemos importar nuestra clase de control personalizado con jQuery.sap.require(“control.SpeechRecognitionInputControl”). Por supuesto, podemos agregar más instancias de nuestro control programáticamente, y para esto incluimos el controlador de eventos onButtonPress. Después de realizar estos pasos, podemos probar nuestro proyecto para verificar que nuestro control personalizado se esté agregando y que nuestro proyecto se esté ejecutando. Para hacer esto, podemos hacer clic derecho en el archivo index.html > Ejecutar > Ejecutar como > Opción de aplicación web. En este paso, aún no podremos utilizar la funcionalidad de reconocimiento de voz, pero lo haremos agregando algunos pasos adicionales a continuación.
Agregando el complemento de reconocimiento de voz a Hybrid Application Toolkit
Ahora debemos agregar nuestro complemento personalizado a nuestra instalación de HAT. Para ello, recomiendo seguir los pasos mostrados en este blog de Simmaco Ferreiro: Cómo utilizar complementos personalizados de Cordova con SAP Web IDE y Hybrid Application Toolkit. Lo que debemos hacer básicamente es obtener el complemento macdonst/SpeechRecognitionPlugin · GitHub de git, en nuestra carpeta de complementos personalizados para la instalación de HAT, utilizando el siguiente comando: git clone https://github.com/macdonst/SpeechRecognitionPlugin.git. Luego, cuando procedamos a instalar HAT, debemos especificar la carpeta donde tenemos nuestros complementos personalizados y seleccionar nuestro complemento de reconocimiento de voz a continuación.
Haciendo que nuestra aplicación SAPUI5 sea un proyecto de aplicación híbrida
Para completar este paso, debemos haber habilitado el complemento Hybrid App Toolkit en SAP Web IDE y tener nuestro HAT instalado y en funcionamiento. Podemos encontrar los pasos para hacer esto en el siguiente documento: Cómo utilizar Hybrid Application Toolkit (HAT) y probar las aplicaciones. Ahora, para convertir nuestro proyecto de aplicación SAPUI5 existente en un Proyecto Móvil Híbrido, podemos hacer clic derecho en la carpeta principal de nuestro proyecto y seguir la ruta Nuevo > Proyecto Móvil Híbrido desde la Aplicación Web. Este es un asistente de un solo paso donde debemos especificar qué proyecto se debe convertir. A continuación, configuraremos la información de la aplicación que vamos a implementar. Para hacer esto, debemos hacer clic derecho en la carpeta principal de nuestro proyecto y seguir la ruta Configuración del proyecto > Configuración del dispositivo. Aquí debemos especificar el Nombre de la aplicación: CustomControlApp, el ID de la aplicación: com.customcontrol y la Versión: 1.0.0. Debemos especificar la plataforma donde se ejecutará nuestra aplicación en la sección Plataforma. En mi caso, seleccioné Android. A continuación, con nuestro HAT en funcionamiento, debemos hacer clic derecho en el botón Personalizado, en la configuración del complemento, y seleccionar nuestro complemento de reconocimiento de voz.
Implementando nuestra aplicación
Ahora es el momento de implementar nuestra aplicación y probarla. Para ello, haga clic derecho en la carpeta principal de nuestro proyecto y siga la ruta Implementar > Implementar en Hybrid App Toolkit local. Esto implementará la aplicación en HAT y creará y compilará nuestra aplicación híbrida. Ahora, podemos ejecutar nuestro proyecto haciendo clic derecho en nuestro index.html > Ejecutar en > Dispositivo Android. Esto instalará la aplicación de nuestro proyecto en nuestro dispositivo. Ahora podemos hacer clic en el botón de micrófono y verlo en acción.
Depurando nuestra aplicación
Como último paso, podemos depurar nuestra aplicación utilizando la funcionalidad chrome://inspect. Para ello, podemos seguir los pasos incluidos en el siguiente documento: Getting Started with Kapsel – Part 3 — AppUpdate (SP09+)
Conclusión
Espero que hayas disfrutado de este blog, veo muchas herramientas y conceptos realmente interesantes que SAP nos está proporcionando y que podemos aplicar para construir mejores experiencias para nuestros usuarios. Espero que también encuentres útil este control y que puedas tomar esta idea e implementar esta funcionalidad en tus proyectos. ¡Muchas gracias! ¡Feliz codificación!
Nota: Puedes obtener el proyecto fuente completo aquí: eamarce/SAPUI5CustomControlApp · GitHub
