Desarrollando Apps multiplataforma con Apache Cordova

Al igual que Xamarin proporciona a los desarrolladores .NET la habilidad de compartir su lógica de negocio en Windows, Windows Phone, iOS y Android, Apache Cordova permite lo mismo para desarrolladores HTML/CSS/JavaScript.

Para ponerlos al día del desarrollo, una de las mejores opciones es descargar y cotillear el código de la aplicación de ejemplo. Se trata de una aplicación de tareas pendientes desarrollada en BackboneJS. En este post la usaremos para mostrar las nuevas capacidades multiplataforma de Visual Studio 2013.

Demostrando que funciona

Una de las primeras cosas que todos queremos hacer cuando nos dicen que una App es realmente multiplataforma, es comprobarlo. El desarrollo de la App no varía entre las distintas plataformas, pero tenemos que decirle a Visual Studio para qué plataforma queremos generar los binarios. Por supuesto podemos cambiar de plataforma en cualquier momento y probar nuestra App en la que queramos.

La forma más sencilla de hacer esto es mediante el “Configuration Manager”. Para los que no lo conozcáis, es la forma que tenemos de decirle a Visual Studio para qué arquitectura y qué perfil de compilación queremos usar.

Podemos seleccionar la plataforma que prefiramos a elegir entre Android, iOS, Windows Phone y Windows 8. Dentro de Windows 8 se hace una diferencia entre las diferentes arquitecturas soportadas: AnyCPU, ARM, x86 y x64 (a.k.a. AMD64 o x86_64). Esta selección es importante no sólo para la generación de los binarios finales a subir a las respectivas Tiendas, sino también durante el desarrollo, ya que Visual Studio únicamente compilará para el operativo seleccionado y por tanto, nos limitará los emuladores disponibles.

Seleccionando la plataforma adecuada y compilando, obtendremos el binario que buscamos.

Depuración multiplataforma

Dado que el código que estamos ejecutando es puramente JavaScript/HTML/CSS, podemos aprovecharnos de las características de depuración de Visual Studio para plataformas Windows. Una de las mejores formas de familiarizarse es poner un punto de ruptura en la porción de código que se encarga de gestionar la inclusión de las tareas que nos indique el usuario. Yo he puesto una en la línea 32 del fichero baseView.js. Como podéis ver en la captura, el código alcanza el punto de ruptura y puedo inspeccionar el estado:

Esto también podéis hacerlo con vuestros desarrollos para Android. Si seleccionamos Android en el “Configuration Manager” y ejecutamos en el simulador, podremos hacer lo mismo:

Comprobando el entorno de desarrollo

Una de las cosas que debemos tener en cuenta, es que estamos unificando muchas tecnologías para posibilitar una gestión de todo el desarrollo desde Visual Studio. El instalador puede realizar la instalación y configuración de todas las herramientas necesarias, pero esto quizá no sea la mejor opción para todo el mundo.

En mi caso particular, ya disponía en mi máquina de Oracle Java 7, Ant y Android SDK. Esto no constituye ningún problema siempre que configuremos adecuadamente nuestros paths. En concreto necesitamos fijar: %JAVA_HOME%, %ANT_HOME% y %ANDROID_HOME%

Todas ellas deben apuntar al directorio base de cada herramienta. Tened en cuenta que en el caso de %JAVA_HOME% esta ¡debe apuntar al JDK y no al JRE! Por ejemplo, estas son las de mi máquina:

Para añadir una variable al entorno podéis seguir estos pasos:

• Accedemos a “Advanced system settings” mediante “System”:

• Nos vamos a la pestaña “Advanced” y luego “Environment Variables”

• Aquí usaremos únicamente la mitad inferior, ya que modifica las variables del sistema. Añadiremos las entradas que necesitemos y luego modificaremos la variable Path existente para añadir las nuevas. Por ejemplo, este es el contenido de mi variable Path: “<Un montón de cosas más>;%ANT_HOME%\bin;C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools”

Acelerando el emulador de Android

Los que hayáis desarrollado previamente para Android habréis tenido que lidiar con su emulador y entenderéis la necesidad de esta sección. Para los que no, os insto a ejecutarlo y comprobarlo por vosotros mismos ;)

Los que tengáis una máquina compatible con Intel VT-x podéis instalar Intel HAXM para acelerar enormemente el emulador. Lo primero es hacer que el SDK de Android se descargue el instalador:

• Ejecutamos “android sdk” en PowerShell
• Buscamos el “Intel x86 Emulator Accelerator (HAXM installer) y le damos a “Install packages…”

Curiosamente esto no lo instala, sino que sólo descarga el instalador. Podemos acceder a él navegando por el sistema de ficheros y ejecutando “intelhaxm.exe” o directamente desde PowerShell con el mandato: $haxm = Join-Path $env:ANDROID_HOME "extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm.exe"; start $haxm

Si vuestra máquina soporta VT-x y el instalador os dice que no, leed el apartado siguiente

Ahora debemos crear nuestro dispositivo virtual usando la tecnología de aceleración de Intel. Para ello, desde PowerShell ejecutaremos “android avd” para lanzar el administrador gráfico:

Podemos añadir o editar uno existente, simplemente aseguraos de seleccionar esta configuración:

• CPU/ABI: Intel Atom (x86)
• Emulation Options: Use Host GPU

La próxima vez que lances el emulador con el perfil que acabas de crear/editar, notarás una mejora de rendimiento más que considerable.

Mi máquina soporta Intel VT-x ¡pero el instalador dice que no!

Es posible que durante la instalación del HAXM obtengas un mensaje de error similar a “This computer meets requirements for HAXM, but VT-x is not turned on”. Hay dos razones posibles. La primera es que no tengas VT-x activado en la BIOS/EUFI. Para comprobarlo tendrás que mirar los manuales de tu fabricante.

La segunda razón es que tengas activado Hyper-V. Este es el caso más común, ya que el emulador de Windows Phone requiere Hyper-V activado para poder funcionar. Desinstalar Hyper-V sería una solución, pero eso impediría lanzar el emulador de Windows Phone, por lo que no lo considero una salida válida. La mejor solución que he encontrado es activar/desactivar Hyper-V al arrancar el ordenador. No es la solución ideal ya que requiere reinicios, pero al menos no tendremos que instalar/desinstalar ni reconfigurar nada.

Para ello tendremos que ejecutar los siguientes mandatos como administrador:

 bcdedit /copy {current} /d "Microsoft Windows 8.1 - No hypervisor"
bcdedit /set {<el id que tenga la entrada que acabas de crear,
 que puedes ver al ejecutar bcdedit sin parametros>} hypervisorlaunchtype off

El primer mandato crea una copia de la entrada que carga actualmente windows y le da el nombre “Microsoft Windows 8.1 - No hypervisor”. El segundo mandato hace que la nueva entrada no arranque Hyper-V. Este método tiene varias ventajas sobre la desinstalación de Hyper-V

• Al arrancar el ordenador elegimos si queremos o no Hyper-V
• No será necesario ningún paso adicional
• No tendremos que reconfigurar ningún adaptador de red virtual al activar/desactivar Hyper-V

Con todo esto ya tenemos suficiente para empezar a desarrollar nuestras Apps multi-device con Apache Cordova usando Visual Studio 2013

Happy multi-device hacking!

Pablo Carballude (@carballude_es)