Todos sabemos que para poder hacer cada cosa necesitamos saber cómo está estructurado, esto mismo se aplica para phonegap, ya había mostrado esta grafica en el anterior Post, y aunque para mi esta gráficamente explicado, indicare también cual es la estructura de archivos que trae Phonegap.
Bien como se ve cuando dijimos que usaríamos HTML,CSS y JavaScript estábamos en lo cierto, Entonces describiendo la gráfica anterior indicare que Existe un archivo llamado cordova.js el cual es el encargado de verificar toda tu aplicación html y junto a los plugins que tengas instalados, como el plugin de cámara, acelerómetro, etc este se vuelva el puente a los plugins nativos, y el código HTML y CSS se muestre y actué como aplicación nativa.
Phonegap estructura de Archivos
Esta parte es sencilla, entendiendo esto tendremos la facilidad de movernos y hacer lo que queramos:
Y bien cuando creamos un proyecto de phonegap o cordova esto es lo que vemos, dentro de la carpeta con el nombre de nuestro proyecto, encontraremos estas carpetas, explicare solo las que están marcadas, la que dice “platforms” contiene las plataformas con las que trabajaremos el proyecto en este si usamos android dentro de esa carpeta encontraremos una carpeta con el nombre de android.
Ahora nos enfocaremos en la otra carpeta que se llama “www” esta carpeta contiene todo con lo que vamos a trabajar asi como aquí :
Entonces esto es a como ya estamos acostumbrados a ver nuestra estructura, de archivos, con la diferencia que encontraremos un archivo “config.xml” el cual no deberemos borrar, todo lo demás podemos borrarlo y pegar nuestra aplicación web, cuando ustedes revisen ese archivo podrán ver que hay información del proyecto ahí, como el nombre del proyecto, con que archivo va a iniciar la aplicación, ahí también pueden configurar si quieren iniciar con index.html o de repente con otro archivo, si van a usar alguna dirección de dominio especifica o cualquier dominio enviara y recibirá datos.
También para no estar descargando e instalando cada vez en el móvil la aplicación, podemos emularla y esto es bastante sencillo abramos nuestro Android SDK (y donde esta eso ¿?) recordemos que instalamos esto en C:\Android_sdk luego vamos a la carpeta “eclipse” y abrimos “eclipse.exe”
Luego vamos a la opción que esta en la imagen
Y le damos click y aparecerá una ventana descarguen las apis con las que van a trabajar (a que me refiero ¿?) pues si ustedes tiene en su móvil o piensan desarrollar para los móviles con Android 3 tendrán que descargar el Api de Android 3, ahora en el desplegable “Extras”, descarguen el Google USB Driver, esto será cuando quieran conectar su móvil a la pc y quieran ejecutar su aplicación desde la consola lo envían y se instala y ejecuta en su móvil sin hacer nada mas.
Luego de descargar su app si ven al lado del icono que acabamos de presionar hay otro pues clic en el, que aparecerá el famoso AVD (Android Virtual Device Manager), bien si vemos ahí podemos ver un dispositivo (esto es un emulador de dispositivos Android), seleccionamos el existente y le damos click a “Start” si nos aparece otra ventana le damos click a “Launch” y seguido de ello aparecerá esto :
Bien para que hemos hecho esto ? pues para tener nuestro emulador ejecutándose y podamos probar nuestra app Android sin tener que descargar e instalarla en un móvil.
Ahora para usar el emulador una vez haya aparecido los iconos de Android, (que haya terminado de cargar) haremos lo siguiente vamos a la consola y escribamos en la carpeta de nuestro proyecto lo siguiente:
C:\caperta_miproyecto\cordova emulate android
Y luego de un momento (esto depende de la velocidad de su equipo, aparecera abierta nuestra aplicación :), bien el siguiente post aprenderemos a crear y configurar nuestro emulador como queramos