Aprende a publicar con Apache Cordova hacia Android, Windows 8 RT y otros…

Hola, hacía tiempo que no escribía un tutorial. Pero estábamos en un proceso de transición informática, que aun no termina, pero ya casi rompemos el cascaron. (aparte también mis problemas existenciales y legales, etc).

 

Ahora vamos aprender a transportar un proyecto web (HTML 5, JavaScript, CSS 3), mediante Apache Cordova a distintos entornos, como pueden ser: Una aplicación para dispositivos móviles, una aplicación para escritorio en Windows 8 y así.

Apache Cordova
Apache Cordova

La página oficial de Apache Cordova, es:

http://cordova.apache.org/

También tiene un hijo mal parido, tipo cloncito y de la onda de quien fue primero, si el huevo o la gallina, que se llama PhoneGap, cuya página oficial es:

http://phonegap.com/

 

Lo primero por hacer será descargar el archivo de Apache Cordova, pero si lo descargamos de la página oficial, solo traerá los .java, que habrá que pasar por ANT y cosas así de la onda de yaba… Pero si lo hacemos desde la pagina de PhoneGap, traerá los archivos JAR y demás mas ad-hoc, para los flojos como yo.

El link para descargar la versión 2.9 directo es este:

https://github.com/phonegap/phonegap/archive/2.9.0.zip

Pero si ya lees este tutorial en un futuro post apocalíptico, pues visita la página oficial para encontrar una versión más reciente:

http://phonegap.com/install/

Entonces, procederás a tener lista tu aplicación web, funcionando. Yo aquí el ejemplo lo daré con un simple “hola mundo”. Pero el procedimiento para crear aplicaciones nativas para dispositivos móviles o de escritorio, es igual.

Empecemos con un hijo mal parido de UNIX: “Android”.

Después deberás descargar el Eclipse ADT (aka: Android Developers Tools), el cual servirá para poder crear los archivos APK, desde ahí, con una facilidad suavecita, que hasta “la sobrina” tal vez, tuviera una nano-oportunidad de lograr hacer uno (y a lo mejor el “tío”, asistido por alguien también lo logre).

Aqui el link para descargarlo:

http://developer.android.com/sdk/index.html#download

Una vez descargado(lo instalaremos -si como no-, (eso ni que fueran frijoles en red: Net Beans). bueno simplemente lo ejecutaremos el programa.

Eclipse ADT
Eclipse ADT

Después nos pedirá el espacio de trabajo para “trabajar”, -obvio, no-.

Seleccionar Workspace
Seleccionar Workspace

Entonces nos marcara un “error”, este error, se produce porque no encuentra el directorio con los archivos con el SDK necesarios para programar en Android.

Error de SDK no encontrado
Error de SDK no encontrado

Si lo hiciéramos de la manera tradicional y yabañera, tendríamos que descargar los SDKs, mediante el SDK Manager.exe … y escoger una de las 15 opciones de Android… lo cual si esta de web@ … Cuando trabaja con Apache Flex, no era necesario más que descargar la 2.x.x y listo… pero bueno, los yabañeros, les gusta complicarse la vida.

¿La mejor parte? Al descargarte el Eclipse ADT, ya te descargaste todo lo necesario, así que solo necesitaremos indicarle a Eclipse ADT, donde esta lo que no encuentra:

Seleccionar SDKs
Seleccionar SDKs

No es otra más que la carpeta SDK que está en el archivo zip del Eclipse ADT, que ya descomprimiste, si no, no te lo pediría…

Seleccionar Carpeta
Seleccionar Carpeta

Una vez hecho esto, Eclipse ADT se pone contento y procede a abrir el workspace, si la pantalla no se parece, solo cierra la de Welcome:

Espacio de Trabajo
Espacio de Trabajo

Ahora, vamos a indicarle que los archivos los guarde en formato UTF-8, para asegurar ver bien estos caracteres: áéíóúü AÉÍÓÚÜ ñÑ. Por lo que hay que ir al menú Window y ahí a Preferences:

Preferencias de Eclipse ADT
Preferencias de Eclipse ADT

Nos abrirá una ventana de preferencias:

Ventana de Preferencias
Ventana de Preferencias

Dentro de esa ventana, escogeremos la opción de General y luego Workspace, dentro de esa ventana escogeremos en la parte que dice: Text File Encoding: Other -> UTF-8

Archivos con UTF-8
Archivos con UTF-8

Le daremos clic en Ok hasta cerrar la ventana de prefencias.

Ahora continuaremos con la creación del proyecto, por lo cual nos iremos al menú de New y luego Android Application Project.

Crear Proyecto de Android
Crear Proyecto de Android

Nos pedirá un Application Name, yo para este ejemplo escogí: holaCordova, los otros input se llenan en automático, y los combos, pondremos esos por el momento. Daremos clic en Next:

Nombrar proyecto
Nombrar proyecto

Luego nos preguntara si creara algunos archivos por default, lo mejor es que si, así que veremos que todo este como en la imagen y daremos clic en Next:

Configuración de Proyecto
Configuración de Proyecto

Luego nos pregunta si le ponemos un iconito a la aplicación, por default, trae los de casa:

Icono por default
Icono por default

Nosotros daremos clic en BROWSE para buscar uno más ad-hoc a nuestra aplicación (recomiendo usar una imagen PNG de 512 x 512 pixeles transparente:

Icono Personalizado
Icono Personalizado

Luego nos pregunta el tipo de “Activity” (Android, nombra así las “vistas” que se muestran en el dispositivo, si vienes de Apache Flex, es el símil a las “views”). Yo aquí escogeré la de Blank, porque no me importa el tipo de vista, pues esta estará regida por mi HTML. Damos clic en NEXT:

Tipo de Activity de Android
Tipo de Activity de Android

Nos preguntara como se llama nuestra “Activity” principal, es decir la que será invocada al abrir la aplicación. Yo le puse por nombre PrincipalActivity y Android, llena el segundo nombre en automático, daremos clic en FINISH:

Nombre de la Actividad Principal
Nombre de la Actividad Principal

Comenzara a realizar mucho ruido, generar un montón de archivos, por aquí y por allá (ya saben es yaba style), y al final nos dejara desplegada nuestra Activity:

Proyecto de Android listo
Proyecto de Android listo

Ahora vamos a crear unas carpetas necesarias para TRAER nuestra aplicación web… Así que en la carpeta de “assets” daremos clic derecho y escogeremos: New -> Folder.

Creación de Carpeta
Creación de Carpeta

Crearemos una carpeta de nombre www y daremos clic en FINISH:

Carpeta www
Carpeta www

Entonces quedara ahora la estructura de carpetas de nuestro proyecto:

Estructura de Carpetas
Estructura de Carpetas

Ahora tendremos que copy pastear el archivo JAR del que hablamos antes, de la carpeta que nos descargamos, veremos que este el archivo cordova-2.9.0.jar (o la versión que exista cuando estés leyendo este tutorial en el futuro).

Archivo JAR de Cordova
Archivo JAR de Cordova

Así que en Eclipse daremos clic derecho sobre la carpeta de “libs” y escogeremos PASTE:

Pegar archivo JAR
Pegar archivo JAR

Entonces quedara ahora la estructura de carpetas de nuestro proyecto:

Estructura de Carpetas
Estructura de Carpetas

Como es una librería externa a la creación original del proyecto, tendremos que indicarle a Eclipse ADT, que la incluya en la generación de la aplicación, entonces daremos clic derecho sobre el archivo, y escogeremos Build Path -> Add to Build Path:

Agregar al Build Path
Agregar al Build Path

Y ahora aparecerá en la librerías referenciadas:

Estructura de Carpetas
Estructura de Carpetas

Ahora vamos agregar un archivo con parametros de configuración: config.xml

Este se encuentra en la carpeta xml del archivo zip, entonces nos copiaremos dicho carpeta:

Archivo XML de configuración
Archivo XML de configuración

La pegaremos en la carpeta “xml” que esta dentro de la carpeta “res” de nuestro proyecto, con clic derecho y Paste:

Pegar en carpeta "res"
Pegar en carpeta “xml” dentro de “res”

Entonces quedara ahora la estructura de carpetas de nuestro proyecto:

Estructura de Carpetas
Estructura de Carpetas

Ahora crearemos un par de carpetas dentro de www para importar los archivos js de Apache Cordova, así que sobre ella seguiremos el procedimiento empleado con anterioridad:

Creación de carpetas js
Creación de carpetas js

Crearemos una carpeta js y luego una libs dentro de ella (aunque la de libs no es muy necesaria, solo es recomendación).

Entonces quedara ahora la estructura de carpetas de nuestro proyecto:

Estructura de Carpetas
Estructura de Carpetas

Buscaremos el archivo cordova.js dentro de la carpeta zip, y lo copiaremos para pegarlo en donde dijimos:

Archivo cordova.js
Archivo cordova.js

Entonces con un clic derecho sobre libs, escogeremos Paste:

Pegado en carpeta "js"
Pegado en carpeta “js”

Entonces quedara ahora la estructura de carpetas de nuestro proyecto:

Estructura de Carpetas
Estructura de Carpetas

Ahora en la carpeta www, yo creare un archivo HTML con un clic derecho y escoger New -> Other…
Si tu estas trayendo tu proyecto web terminado, es aquí donde lo vas a pegar (Si pegas archivos php, asp o jsp aquí, entonces estás haciendo algo mal, porque esos van del lado del servidor, no del lado del cliente, en una aplicación web).

La recomendacion seria, dejar este proyecto con un “hola mundo” primero, y luego ya que funcione, copy pastear todo tu proyecto:

Creación de archivo de prueba
Creación de archivo de prueba

Escogeré General -> File y daré clic en NEXT:

Creación de archivo Nuevo
Creación de archivo Nuevo

Me preguntara por el nombre, le daré el de:

index.html

Ese si es innamovible e inmutable, en el nombre. Dare clic en FINISH:

Archivo index.html
Archivo index.html

En el caso de trabajar con el Eclipse ADT, no tendra las WTP de Eclipse entonces, me abre el explorador al crear el archivo:

Archivo abierto en el Web Browser
Archivo abierto en el Web Browser

Así que la cerrare la pestaña y simplemente daré clic derecho y Open With text editor. Para que me abra el código fuente, y a continuación teclearemos lo siguiente:

Codigo fuente de index.html
Codigo fuente de index.html

Guardamos el archivo y ahora hay que modificar un archivo que se llama:

PrincipalActivity.java

(si has seguido las indicaciones al pie de la letra, de otra forma, el archivo tendrá el nombre que le diste a la actividad principal).

Archivo PrincipalActivity.java
Archivo PrincipalActivity.java

Modificaremos el extends, para que ahora diga:

extends DroidGap

Con esto también nos importara la librería:

org.apache.cordova.DroidGap;

Extendiendo DroidGap
Extendiendo DroidGap

Luego comentaremos la línea que dice:

//setContentView(R.layout.activity_principal);

Y agregaremos esta:

super.loadUrl(“file://android_asset/www/index.html);

Con eso, no cargaremos el activity, si no la pagina index.html al iniciar la aplicacion.

Indicando cargar index.html
Indicando cargar index.html

Ahora el método onCreate, le cambiaremos la visibilidad a “public” para que el HTML, pueda ser invocado sin problemas:

Cambiando visibilidad a public
Cambiando visibilidad a public

Luego comentaremos la línea de:

//import android.app.Activity

Pues ya no la necesitaremos:

Comentareando android.app.Activity
Comentareando android.app.Activity

Ahora vamos a modificar el AndroidManifest.xml dando clic derecho sobre él, escoger Open With -> Android Common XML Editor:

Abriendo AndroidManifest.xml
Abriendo AndroidManifest.xml

Con lo cual tendremos el archivo XML:

Archivo AndroidManifest.xml
Archivo AndroidManifest.xml

Agregaremos la etiqueta de :

<support-screens …

Agregando etiqueta support-screens
Agregando etiqueta support-screens

Luego agregaremos los permisos de nuestra aplicación, en mi caso puse todos, pero puedes comentaríar los que no necesites para tu aplicación:

<uses-permission …

Agregando etiquetas uses-permission
Agregando etiquetas uses-permission

Ahora al

<activity …

Le agregaremos antes de su cierre:

android:configChanges = “orientation|keyboardHidden”

Para tener mostrar/ocultar el teclado de manera adecuada:

Modificando etiqutea activity
Modificando etiqutea activity

Ahora vamos a crear una configuración para hacer el debbug a nuestra aplicación, asi que sobre el bug (bicho verde), escogeremos Debug Configurations:

Preparando el debbuger
Preparando el debbuger

En las opciones que tenemos para debugear, escogeremos la de Android Application y con clic derecho escogeremos New:

Crear nueva configuración para el Debuger
Crear nueva configuración para el Debuger

Nos permitirá escoger un nombre para ese perfil de Debugeo, así como el nombre del proyecto y también si queremos escoger lanzar la Activity por default o alguna otra Activity para lanzar (e inclusive no hacer nada…, no pregunten). Damos clic en DEBUG:

Configurando el Debuger
Configurando el Debuger

Como no tenemos un AVD (Android Virtual Device), o sea un “emulador” de un dispositivo Android, habra que definir uno, damos clic en YES:

Sin un AVD (Android Virtual Device)
Sin un AVD (Android Virtual Device)

Ahora tendremos una venta para escoger un AVD, o incluso un dispositivo móvil conectado vía USB a nuestra computadora, vamos a intentarlo primero con uno Virtual. Daremos clic en:

Launch a new Android Virtual Device:

Escoger un AVD (Android Virtual Device)
Escoger un AVD (Android Virtual Device)

Y luego daremos clic en Manager, para crear uno (o escoger entre los perfiles existentes):

Crear un AVD (Android Virtual Device)
Crear un AVD (Android Virtual Device)

Hay dos pestañas, la que dice:

Device Definitions

Nos lista una serie de dispositivos móviles que funcionan con el SO Android:

Lista de AVD predefinidos
Lista de AVD predefinidos

En la pestaña que dice:

Android Virtual Devices

Nos lista la serie de dispositivos móviles que tenemos definidos dentro de nuestro Workspace de Eclipse ADT, daremos clic en NEW:

Creando un AVD personalizado
Creando un AVD personalizado

Nos abrira una ventana, le pondremos un “sobrenombre” a nuestro Android Virtual Device (AVD), escogeremos uno “base” del primer combo, los demas valores se los pone por default (lo cual es recomendable, pues es la configuracion de fabrica del dispositivo, sin tunearlo), daremos clic en OK:

Personalizando un AVD (Android Virtual Device)
Personalizando un AVD (Android Virtual Device)

Ahora tendremos un AVD listado, solo lo seleccionaremos de la lista y daremos clic en START:

Iniciar un AVD (Android Virtual Device)
Iniciar un AVD (Android Virtual Device)

Nos preguntara si re escalamos la densidad de los pixeles o simplemente lo dejamos tal cual va, dependiendo de la densidad del monitor de tu computadora, podras o no optar modificar estas opciones, por lo mientras, la primera vez, es dejarlo asi (y solo despues jugar a prueba y error con estos valores), daremos clic en LAUNCH:

Personalizar lanzamiento de un AVD (Android Virtual Device)
Personalizar lanzamiento de un AVD (Android Virtual Device)

Nos mostrar el progreso de crear el emulador para el AVD…

¿Por qué un emulador, para un emulador?

Yo este ejemplo lo hice en un Windows a 64 bits, y Android es un Sistema Operativo hijo mal parido de Unix. Entonces, primero tiene que crear un Sistema Operativo Virtual de Unix:

Lanzamiento del AVD (Android Virtual Device)
Lanzamiento del AVD (Android Virtual Device)

Y después de que este quede listo, entonces lanzara el emulador del AVD sobre este:

AVD iniciando...
AVD iniciando…

La primera vez que lo hace, se tarda desde un buen, hasta horrores, dependiendo de que tal ande tu RAM, Disco Duro, Procesador y duendes informáticos en tu PC:

La primera vez del AVD, es lenta su iniciación...
La primera vez del AVD, es lenta su iniciación…

Al terminar nos dejara el SO Android, listo para recibir la aplicación, lo cual estará bien:

AVD (Android Virtual Device) listo para usarse
AVD (Android Virtual Device) listo para usarse

Así que terminaremos cargando nuestra aplicación sobre este AVD, recién creado, lo escogeremos sobre la primera lista, y daremos clic en OK:

Escoger el AVD para lanzar nuestra aplicación en el...
Escoger el AVD para lanzar nuestra aplicación en el…

Si vas a debugear mucho, recuerda, que el AVD, puede quedar en “segundo plano” trabajando (para ahorrarte todo ese tiempo que tardo en levantar).

Si vas a debugear y tienes rutas a servicios web del tipo:

http://localhost/

http://127.0.0.1/

debes cambiarlas a

http://10.0.2.2/

Porque el localhost no sirve directamente en el AVD.

Al principio que nuestra aplicación se monta sobre el AVD, mostrara una aviso de que está esperando por el debbuger.

Esto no debe tardar mucho en cerrarse solo:

Esperando por el Debuger
Esperando por el Debuger

Luego removerá solito ese aviso, y si no tienes “splash screen”, mostrara la clásica pantalla blanca:

Aplicación sin "splash screen" iniciada...
Aplicación sin “splash screen” iniciada…

Por último, tenemos nuestra aplicación web, corriendo con ayuda de Apache Cordova, desde el SO Android:

Nuestra aplicación, lista y ejecutandose en el AVD
Nuestra aplicación, lista y ejecutandose en el AVD

Felicidades, ya la hicimos…!

En la parte del Eclipse ADT, habrá una vista que se llama:

LogCat

Esa pestañita, es importante tenerle un ojo encima, pues nos mostrara TODO lo que acontece dentro de nuestro AVD y de nuestra aplicación adentro del AVD, todo lo que marque de amarillo, serán Warnings, y lo de rojo Horrores:

El importantisimo LogCat
El importantisimo LogCat

Es importante distinguir entre los Errores del AVD y de nuestra aplicación, así que atentos a ello:

Si llega a ocurrir un error grave en nuestra aplicación, el Eclipse ADT, mostrara el aviso para cambiar a la Perspectiva de Debug, daremos clic en YES

Aviso de Error en nuestra aplicación
Aviso de Error en nuestra aplicación

Y nos mostrara la pantalla con el debbug con los errores de nuestra aplicación:

Perspectiva del Debuger
Perspectiva del Debuger

La aplicación también puede “caerse” como cualquier otra aplicación dentro de Android:

La aplicación se puede "caer" como cualquier otra aplicación
La aplicación se puede “caer” como cualquier otra aplicación

No te preocupes es normal, para eso es el debbug.

 

Bueno, hasta aquí vamos bien, que sucede si queremos realizar un debbug en un teléfono con Android…

Hay que seguir una serie de pasos:

  1. Cierra el Eclipse ADT, un ratito.
  2. Tu teléfono en la opción de “desarrollador”, deberá tener activa esa opción.
  3. Una vez activa la opción, deberás conectarlo al puerto USB, como normalmente lo haces. Si reconoce Windows el dispositivo y marca la tarjeta SD del teléfono como una unidad de Windows extraíble, vamos bien, desconecta el teléfono, un ratito en lo que hacemos el 4 y 5:
  4. Ahora con el SDK Manager.exe bajaras en la parte de Extras la opción de:
    Google USB Driver
  5. Y en la parte de Tools, bajaras TODAS las de ahí. Esto va a ser un proceso lento…
  6. Cuando termines, vuelve a conectar el teléfono, ahora tu teléfono, lo debe reconocer Windows y tu teléfono reconocerá a Windows, en tu teléfono aparecerá un “android chiquito” en la barra de notificaciones, avisando que está en modo debbug, listo para la acción.

(El mismo procedimiento aplica para una tableta con Android, algunos teléfonos chinos o tabletas chinas, no funcionan para el debugeo, lamentablemente).

 

Entonces volveremos a abrir el Eclipse ADT, nuestro proyecto y lanzaremos el debuger, entonces en la lista de dispositivos, aparecerá el teléfono o tableta configurada en modo desarrollador, la escogeremos y daremos clic en OK:

Dispositivo movil conectado via USB y reconocido
Dispositivo movil conectado via USB y reconocido

Nos aparecerá todo lo anterior que vimos hasta llegar a la pantalla de nuestra aplicación, inclusive aquí podremos ver el iconito chiquito de android que mencionábamos antes:

Nuestra aplicación en un dispositivo fisico y real
Nuestra aplicación en un dispositivo fisico y real

Felicidades, ya la debugeaste en un dispositivo físico…!

Si vas a debugear y tienes rutas a servicios web del tipo:

http://localhost/

http://127.0.0.1/

debes cambiarlas a

http://www.algunDominioVerdadero.com/

Porque el localhost, ni 127.0.0.1 ni 10.0.2.2 nos sirve en un dispositivo físico en Android.

 

Ahora, yo tengo una tableta china, no me la reconoce el USB con la opción de debbuger…

¿Qué podemos hacer?

Bueno, crearemos un APK…

Daremos clic derecho en la carpeta raiz de nuestro proyecto, y escogeremos la opcion de Android Tools -> Exported Signed Application Package:

Creando un APK firmado digitalmente
Creando un APK firmado digitalmente

¿Por qué no la de Export Unsigned Application Package?

Te marca error al querer instalarla, porque no está firmado el paquete.

También tu dispositivo Android debe estar activa la opción dentro de aplicaciones, para aceptar aplicaciones que no vengan de la tienda de Android.

Nos pide seleccionar un proyecto para crear el APK, damos clic en NEXT:

Escoger proyecto para realizar APK
Escoger proyecto para realizar APK

Ahora, nos dara a escoger si usamos una firma digital ya creada o creamos una, daremos crear, le asignaremos una ruta y la extension p12, asi como una contraseña y confirmaremos, damos clic en NEXT:

Creando una nueva firma digital
Creando una nueva firma digital

Nos preguntara nuevamente la contraseña y otros datos, que llevan las firmas regularmente, llenaremos todos y daremos clic en NEXT:

Detallar firma digital nueva...
Detallar firma digital nueva…

Nos pedirá la ruta a donde guardar el APK que se creara, daremos clic en FINISH:

Escoger carpeta destino para el APK...
Escoger carpeta destino para el APK…

Dicho archivo APK, no es más que un archivo ZIP firmado digitalmente con todo lo que nuestro proyecto contenga, dicho archivo ya lo puedo colocar vía USB a la SD de mi tableta china:

Archivo APK
Archivo APK

Y de ahí instalarlo como cualquier otra APK piratona:

Después podremos ejecutarla para hacer las pruebas de debbugeo en una pantallota:

Aplicación ejecutandose desde la APK creada
Aplicación ejecutandose desde la APK creada

Nuestro archivo APK, no es muy pesado, solo genero 1.82 MB, después de ser descomprimido, comparándolo con un ejemplo de AppCelerator que generaba un archivo de 12 MB, ¿Pues es mejor usar Apache Cordova, no creen?

APK generada es ligera de tamaño
APK generada es ligera de tamaño

 

Hasta ahí está muy bonito el asunto, ¿Pero qué hay de crear una Aplicación para escritorio? Yo utilizo Windows 8 al momento de crear este tutorial, así que me descargue el Visual Studio Express 2012, lo instalare y ejecutare:

IMAGEN 81

Visual Studio Express 2012
Visual Studio Express 2012

La primera vez que lo ejecuto, me pide una clave de producto, como todo producto Microsoft, daré clic en Registrar en Línea:

Solicitud de KEY
Solicitud de KEY

Lo cual nos llevara a un navegador para llenar una página con mis datos personales:

Primera pagina para obtención de KEY
Primera pagina para obtención de KEY

Lo cual nos lleva a otra página, donde colocare mis datos como estudiante o docente, para que no tenga coste la licencia:

Segunda pagina para obtención de KEY
Segunda pagina para obtención de KEY

Y listo, me dará mi clave del producto (también te la envía a tu correo):

KEY obtenido..
KEY obtenido..

Con lo cual lo colocare en donde me la pedía. Y con esto se habilitara el botón de SIGUIENTE:

Introducción del KEY
Introducción del KEY

Me mostrara que la clave del producto esta correcta, la validara y daremos clic en CERRAR:

Aceptación del KEY
Aceptación del KEY

Ahora, pedirá una licencia de desarrollador, esta aplica solo cuando queremos publicar una Aplicación en la Windows Store, así que daremos clic en ACEPTO:

Obtener licencia de Desarrollador...
Obtener licencia de Desarrollador…

Pedirá el mismo correo y contraseña que para la Clave del producto, los anotaremos y daremos clic en INICIAR SESIÓN:

Login para obtener licencia de Desarrollador...
Login para obtener licencia de Desarrollador…

Después de validar nuestro correo, nos permitirá tener una licencia de desarrollador por 30 dias.

Esta solo sirve para el Windows Store, después de este tiempo, podremos seguir probando y debugeando el proyecto en nuestra PC, pero no subir el mismo al Windows Store:

Licencia de Desarrollador obtenida...
Licencia de Desarrollador obtenida…

Cuando este el Visual Studio abierto, daremos clic en Nuevo Proyecto…

Nuevo proyecto en Visual Estudio
Nuevo proyecto en Visual Estudio

En la parte de Instalado -> Plantillas -> JavaScript escogeremos la que dice:

Aplicación Vacía

Le pondremos un nombre y una ubicación, daremos clic en ACEPTAR:

Creando proyecto JS
Creando proyecto JS

Ahora nos abrira la aplicacion por default:

default.js

Archivo default.js
Archivo default.js

Del lado derecho debemos encontrar:

default.html

Y dándole doble clic tendremos que cambiarle el nombre, a:

index.html

Cambiando nombre a index.html
Cambiando nombre a index.html

Ahora, debemos encontrar el archivo del lado derecho que dice:

package.appxmanifiest

Y cambiarle donde decia default.html por index.html, tambien ahi podemos poner algunas cosas para el splash screen y configuraciones para tablets o hibridos (este mismo tutorial, sirve para Windows RT):

Modificando archivo package.appxmanifiest
Modificando archivo package.appxmanifiest

Localizamos el archivo

cordova.js

Que está adentro del archivo zip de cordova, en la carpeta de Windows 8:

Archivo cordova.js para Windows 8
Archivo cordova.js para Windows 8

Ahora en la carpeta de js, con clic derecho escogeremos la opcion de Agregar -> Elemento existente…

Y agregaremos el archivo de cordova.js

Agregando archivo cordova.js
Agregando archivo cordova.js

Así quedara agregada a nuestro proyecto y podremos utilizarla:

Archivo cordova.js añadido
Archivo cordova.js añadido

Agregaremos la línea de script para invocar el archivo cordova.js a nuestra página principal: index.html

Invocación de archivo cordova.js
Invocación de archivo cordova.js

Luego, yo agregue código dentro del body, un h1 para el titulo y un js para agregar un chismoso cuando este lista la aplicación y muestre una alerta:

Añadiendo codigo JS
Añadiendo codigo JS

Ahora localizaremos un icono triangular verde con un letrero de Equipo Local al lado,

Le daremos clic y con eso comenzara a hacer el debug (si se fijan hay opción para debbug y el tipo de CPU x86 o ARM):

Lanzando debbuger para Windows 8
Lanzando debbuger para Windows 8

Nos lanzara la aplicación al tipo “metro style” y el respectivo Alert que configuramos via js. Damos clic en OK:

Aplicación con estilo Windows 8 Metro
Aplicación con estilo Windows 8 Metro

Y nos mostrara la aplicación principal:

Aplicación de Apache Cordova en Windows 8 Metro
Aplicación de Apache Cordova en Windows 8 Metro

Felicidades, ya la debugeaste en Windows 8 Metro Style…!

El proceso para realizar la publicación, no lo tocare aquí, pues en la página de Microsoft ya hay un buen tutorial para eso

http://msdn.microsoft.com/es-MX/windows/apps/jj682079

Genial, no…?

Comenzamos con una aplicación web, luego la llevamos a Android, y luego a una aplicacion metro para windows 8.

De la misma manera, podremos llevarla a iOS, a OS X, a BlackBerry, etc…

Hay muchos tutoriales en la página de Apache Cordova para lograr esos objetivos:

http://cordova.apache.org/docs/en/3.0.0/guide_platforms_index.md.html#Platform%20Guides

Yo no lo hice aquí, porque no tengo esos hardwares para realizar las pruebas.

Y abusados con los nombres de sus aplicaciones y los iconos, que pueden no llegar a lucir muy bien que digamos:

La importancia de Iconos y Nombres adecuados
La importancia de Iconos y Nombres adecuados

Espero que sea de utilidad, es para los muy polluelos, por eso, creo que resulto muy largo, y es que como lo estoy utilizando en mis clases, es difícil estar platicando todo esto, pero es necesario para realizar los jutsus más avanzados de Apache Cordova.

 

Para estar al pendientes de nuevos tutoriales, pues ahí tienen mi cuenta de twitter: http://twitter.com/profesorAntonio y para quejas, pues a otro lado, porque nadie te obligo a leer este blog, feliz código y gracias.

 

(Todas las imágenes mostradas aquí son con FINES EDUCATIVOS, cualquier otro uso pídanle un chance a Apache Cordova, Google o Microsoft, o cualquier empresa mencionada o aludida en este tutorial).

6 comentarios en “Aprende a publicar con Apache Cordova hacia Android, Windows 8 RT y otros…

  1. Hola trate como indicaste


    super.loadUrl("file://android_asset/www/index.html");

    y me marca error “Application Error.- There was a network error. (file://android_asset/www/index.html)”

    y lo cambie a:


    super.loadUrl("file://assets/www/index.html");

    y tmb me marca lo mismo, en que la estoy cajeteando?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *