Si estas empezando en el desarrollo móvil y no sabes si escoger entre Android, IOS o Windows Phone pero tienes conocimientos en HTML5, Javascript y CSS3, entonces puede ser una buena opción ver como instalar Apache Cordovaen Windows.
Introducción
Phonegap es un framework desarrollado por Nitobi. El objetivo de este framework es permitir que una aplicación se desarrolle una sola vez y que el mismo código pueda ser compilado y desplegado en diversos sistemas operativos móviles. En general, las aplicaciones sobre Phonegap están creadas sobre HTML5, Javascript, CSS3 y están soportadas por un conjunto de librerías propias del framework que, de acuerdo al sistema operativo, permiten acceder a los recursos del dispositivo, como cámara, acelerómetro entre otros.
Este framework resulto tan interesante que Adobe lo compró para incluirlo en sus productos. En este punto el código de Phonegap pasa a Apache y es llamado Apache Cordova, convirtiendose Phonegap en una especie de distribución de Apache Cordova. En la actualidad Apache Cordova y Phonegap se mantienen libres. La diferencia es que Phonegapprovee servicios de compilación en la nube, y estos son compatibles, es decir puedes desarrollar con Apache Cordovapero compilar usando los servicios de Phonegap Build que provee Adobe. Esto debido a que Phonegap tiene por motor a Apache Cordova.
Con el objetivo de iniciar con Apache Cordova vamos a crear una aplicación para Android bajo Windows y utilizaremos Android Studio para importar el código y empaquetarlo, claro que en esta entrada solo abarcaremos hasta la configuración de Apache Cordova.
1. Que haremos?
Configuraremos un equipo con Windows 7 x64 sobre Virtualbox, en este descargaremos, instalaremos y configuremos todos los componentes para crear nuestra aplicación. Luego, crearemos un dispositivo virtual y desplegaremos el proyecto por defecto que generará Apache Cordova. Durante este proceso nos apoyaremos en Node.js y Apache ANT para la descarga de Cordova y la compilación del proyecto respectivamente.
2. Componentes a Instalar
- Java JDK
- Node.js
- Apache ANT
- Android Studio (incluye SDK, Tools e imagen emulador)
- Apache Cordova
Durante la instalación de los componente del sistema se modificaran variables del sistema, por esta razón recuerde cerrar todas las consolas, para aplicar los cambios. De igual manera ejecute siempre la consola como administrador.
3. Instalación Java
Descargaremos el instalador de Java jdk-7u67-windows-x64.exe , este es compatible con el sistema operativo que estamos trabajando. Para descargarlo, ingresa a Oracle y dependiendo de tu sistema operativo la versión a seleccionar puede variar. Luego procede a descargar e instalar.
Seleccionando el Java JDK
Instalando el Java JDK
Luego de instalar Java, procederemos a configurar la variable JAVA_HOME. Para ello, ingresaremos con la combinación de teclas Windows + Pause; en la ventana emergente seleccione Cambiar Configuración, en Propiedades de Sistema seleccione la pestaña Opciones Avanzadas y luego de clic el botón Variables de Entorno. Agregue en Variables de usuario la variable JAVA_HOME y en el valor ingrese la ruta de instalación del JDK, la cual fue C:Program FilesJavajdk1.7.0_67. Es importante validar de no agregar / al final de la ruta.
Configurando JAVA_HOME
Adicionando variable JAVA_HOME
4. Instalación Node.js
Para descargar Apache Cordova requeriremos de Noje.js; este lo obtenemos desde Node.js, en nuestra instalación usaremos exactamente la versión node-v0.10.32-x64.msi.
Instalación Node.js
Para validar la instalación de Node.js, abrirmos una consola de Windows y ejecutamos.
Verificando instalacion Node.js
5. Instalación Apache ANT
Apache ANT lo podemos obtener desde ApacheAnt.org, en este caso la ultima versión disponible es Apache Ant 1.9.4. Luego de descargarla debemos extraer los archivos, por ejemplo en el disco c:. Luego procedemos a configurar la variable ANT_HOME con el valor de la ruta de instalación, por ejemplo C:apache-ant-1.9.4.
Adicionando variable ANT_HOME
Luego modificaremos la variable de usuario PATH existente, agregando al final ;%ANT_HOME%bin.
Configurando path para Apache ANT
Para validar si la variable esta correctamente configurada ejecutamos en la consola de Windows el siguiente comando.
Verificando instalación Apache ANT
6. Instalación Android Studio y Android SDK
Consulta este post para este paso; Instalación Android Studio y Android SDK.
7. Descarga de componentes de Android SDK
Llegados a este punto procederemos a descargar el SDK y el emulador para la Android 4.4.2 (API 19). Esta versión de Android es la utilizada por defecto por Apache Cordova 3.6.3 para crear y compliar proyectos. En esta descarga también incluimos el paquete extra Intelx86 Atom y Intel x86 Emulator Accelerator (HAXM Installer). Los emuladores en Android son bastante lentos, pero con este paquete y con la virtualización activada en al bios se mejorara considerablemente el rendimeintos Si quieres ver mas detalles de como configurar el emulador Intelx86 Atom ingresa a Speeding Up the Android* Emulator on Intel® Architecture. Si casualmente tienes por antivirus AVAST, entonces primero mira este post Problemas con Avast sobre Windows 8.1 instalando Intel HAXM
Descargando paquetes Android SDK
Descargando complementos Android SDK
8. Creando un Android Virtual Device AVD
Luego de terminarse de descargar los componentes, ingresamos a Tools, Manage AVDs. En la ventana de Android Virtual Device crearemos un dispositivo para poder desplegar el proyecto que crearemos con Apache Cordova.
Ingresando a Manage AVDs
Creado un Android Virtual Device
9. Instalación Apache Cordova
Ahora si, hemos descargado y configurado los componente previos para poder iniciar la descarga de Apache Cordova; crear el proyecto, adicionar la plataforma Android y finalmente desplegarlo en el dispositivo virtual. Para ello nos apoyaremos en Node.js utilizando el siguiente comando.
Instalación Apache Cordova
10. Creación del proyecto con Apache Cordova
Ahora crearemos un carpeta de la siguiente manera C:Desarrollo. En esta ruta de agregará el proyecto que crearemos.
Creando proyecto Apache Cordova
En la ultima linea hemos especificado varios parametros; HelloWorld será el nombre del directorio en el que se generará nuestro proyecto. Dentro a su vez, estará el subdirectorio www, el cual contiene la pagina inicial de la aplicación. Tambien en este subdiretorio estaran los directorio de css, js y img para estilos, javascript e imágenes respectivamente. En el directorio HelloWorld tambien podremos apreciar el archvio config.xml, con la metadata requerida para generar y distribuir la aplicación. Los otros dos parámetros son opcionales: com.example.hello proporciona el paquete de clases de la aplicación y Hello World el titulo de la aplicación a visualizar. Si se desea modifcar estos campos luego de la instalación debemos editar el archivo config.xml.
11. Agregando la plataforma Android al proyecto
Hasta este punto al proyecto no se le ha agregado las plataforma sobre las cuales se desea trabajar. En este ejemplo solo agregaremos Android. Para ello, ingresamos al nuevo directorio creado y agregamos la plataforma ejecutando los siguientes comandos.
Agregando Android plataforma Apache Cordova
12. Compilando el proyecto
En este punto, si hemos configurado correctamente Apache ANT, no tendremos problemas.
Compilando proyecto Android sobre Apache Cordova
13. Desplegando el proyecto sobre un dispositivo virtual
Para desplegar el proyecto utilizaremos el comando emulate. Si no especificamos el dispositivo virtual a utilizar, entonces Apache Cordova seleccionará automáticamente el primer dispositivo que encuentre, el cual previamente creamos en el Manager AVD en pasos anteriores. Si no hemos instalado el emulador de Intel, entonces deberemos esperar unos minutos mientras se inicia por primera vez el emulador. En este ejemplo el emulador no se ejecutará utilizando el Intel Atom, debido a que es una maquina virtual.
Después de un tiempo veremos que carga la aplicación con la imagen por defecto para el proyecto creados.
Proyecto desplegado en el emulador
Hasta aquí hemos terminado la instalación de Apache Cordova, ahora falta que creemos un proyecto utilizado jQueryMobile (JQM) y poder importarlo este dentro de Android Studio para así poder trabajarlo, compilarlo y, si se requiere empaquetarlo para firmar y cargar a la tienda de Google.
0 comentarios:
Publicar un comentario