Hacer tu propia App Mobile de Odoo

 Odoo ofrece una App Mobile en Android y iOS. El problema es que no se trata de un servicio para Community, sino que es Enterprice, sin contar problemas de compatibilidad con Apps de terceros (como pueden ser las que desarrollamos nosotros). Aún así, en Moldeo Interactive buscamos soluciones para satisfacer las necesidades de cada tipo de cliente. En muchos casos no se trata de no pagar el Enterprice, muchos clientes necesitan una App con ciertas especificaciones y vistas a ver en versión Mobile, que lo convierten en un sistema completamente distinto a la versión de escritorio. La creación de una App que funcione con WebView en Android y iOS no es para nada compleja, sin embargo es necesario tener ciertos conocimientos en Angular y, especialmente, en Apache Cordova para saber como lidiar con las dificultades típicas. En nuestro caso, contamos con años de experiencia sobre nuestras espaldas, tanto en Odoo como en Angular y Cordova.

Reconocer el Cliente Mobile

Hay opciones en CSS para reconocer el ViewPort y tener unos estilos con la variación del ancho de la pantalla. Sin embargo esto es útil para tener una vista adaptable a la pantalla de celular y Odoo ya trae eso incorporado al usar Bootstrap. Si extendemos el módulo Base de Odoo, podemos agregar un archivo JavaScript con la siguiente función:

function getMobileOperatingSystem() {
 var userAgent = navigator.userAgent || navigator.vendor || window.opera;

 if (/android/i.test(userAgent)) {
    return "Android";
 }

 if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return "iOS";
 }

 return "No es móvil";
}

Esto puede ser llamado al principio de la base, y en el caso de tratarse de un celular o tablet, poder llamar una hoja de estilos. Necesitamos hacer esto en nuestra web de Odoo, de lo contrario solo podremos tener la interfaz responsiva en nuestra App, sin la opción de agregar otras opciones (podemos quedarnos solo con la versión responsiva).

Una App que integre Odoo

En realidad es muy sencillo. En nuestro template principal de Angular (o en su defecto en nuestro HTML principal, si no queremos usar Angular) incluiremos la siguiente línea:

<div style="width:100%;height:100%;overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
    <iframe src="http://www.example.com" scrolling="yes" style="width:100%;height:100%" frameborder="0"></iframe>
</div>

Donde "www.example.com" es el sitio web donde se encuentra alojado el sistema de Odoo. Este código es especial, y está adaptado para funcionar en sistemas táctiles, en Android y en iOS sin problemas. Parece un truco muy banal, pero no lo es, queda mucho trabajo por hacer si queremos una configuración especial, pero el grueso de la cuestión está acá: un IFRAME. Tenemos opciones de IFRAME, EMBED y OBJECT, pero en las pruebas de rendimiento la mejor tag (y la mas moderna para móviles) es la IFRAME.

¿Por qué Angular?

La pregunta sería ¿por qué no? Ya en serio, Angular es potente, nos permite incluir cosas de forma superficial al IFRAME, como puede ser un sistema de Chat interno para la empresa solo accesible por los empleados cuando emplean la Red de la empresa (por ejemplo con Socket.IO), y distintos componentes con visualizadores que potencien la experiencia de usuario. Realmente introducir un IFRAME en Angular es tan simple como en un HTML normal, y ya tenemos un sistema escalable que nos permitirá aumentar la potencia de la App si lo deseamos en algún momento. La opción de hacerlo con HTML a secas sigue siendo una posibilidad para quienes no deseen frameworks.

Compilar y Testear la App con Apache Cordova

Asumimos que se tienen conocimientos en Apache Cordova, la forma de compilación es propia de cada desarrollador. Nosotros preferimos armar un paquete integrando Angular con Cordova, pero hay quienes prefieren usar Ionic. No es lo importante, lo importante es verificar el funcionamiento correcto de la App en localhost, compilarla en un APK o App de iOS, y testear en los teléfonos. De ser posible, distribuir una versión de prueba en la empresa del cliente.

Android permitirá compilar infinitas APK incluso en modo debug, lo cual permite conectarse por USB a una computadora y monitorear, con la consola, errores o problemas reportados por la App. En el caso de iOS, se requiere una cuenta de desarrollador para poder compilarla y solo nos dejará tres dispositivos de testeo. Esto quiere decir que, sacando el teléfono de desarrollo, solo podremos testear en dos dispositivos del cliente. Apple ofrece una licencia para desarrollar con unos 100 dispositivos de prueba por año, pero dicha licencia es paga y no negociable. Si nuestro cliente decide subir la App a Google Play, deberá tener una cuenta de desarrollador en la tienda, lo que cuesta unos 25 dólares por única vez (salvo que nosotros como desarrolladores deseemos proveer la cuenta). Si desea que esté en App Store, se necesitará una cuenta de desarrollador, la cual cuesta 99 dólares al año (muchos desarrolladores proveen la cuenta al cliente a cambio de una tarifa anual por alojamiento y desarrollo de la App). Si no desea que esté en tiendas online, para el caso de Android es solo instalar el APK, pero en iOS es imposible hacerlo de otra manera. No es recomendable ya que, al querer actualizar la App, será mucho más sencillo si esta se encuentra en un Store online oficial. La tienda Aptoide está disponible para Android en caso de querer subir una App sin tener licencia para desarrollador (de forma gratuita).

Haciendo uso de extensiones de Cordova podremos almacenar los datos de Sesión del usuario, con el objetivo de generar una especie de Auto-Logueo, siempre y cuando los necesitemos. Cordova cuenta con una gran cantidad de Plugins, así que hay algo para cada necesidad (sincronización con un servidor Node, uso de OSC, código de barras, lectura de código QR, etc).