PhoneGap es una propuesta de licencia OpenSource (código abierto), basada en JavaScript, que permite crear aplicaciones para dispositivos móviles utilizando HTML5 y CSS3. Esta nueva tecnología soporta el desarrollo de aplicaciones para los sistemas Android, IOS, BlackBerry, Windows Phone y Symbian.
Esta herramienta maneja APIs que permiten el acceso y control de elementos como el acelerómetro, cámara, contactos en el dispositivo, red, almacenamiento, notificaciones, entre otras.
PhoneGap cuenta con dos grandes ventajas al momento del desarrollo: se pueden ejecutar las aplicaciones en nuestro navegador web, sin depender de un simulador dedicado a esta tarea, y por otra parte, tenemos la posibilidad de soportar funciones sobre frameworks como Sencha Touch o JQuery Mobile.
Actualmente PhoneGap se encuentra en un proceso de “re identificación”, pues se conocen planes de cambiar su nombre, debido a que esta tecnología fue adquirida por la compañía Adobe, y ellos desean re-nombrar esta herramienta como “Cordova”.
Manos a la obra.
Explicaremos cómo llevar a cabo una aplicación nativa en las principales plataformas móviles Android, Windows Phone e IOS.
Así que primero realizaremos el clásico “hola mundo” con un simple html
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"/> <title>Hola mundo en Phonegap</title> </head> <body> <h1>HOLA MUNDO!</h1> </body> </html>
Android
Para desarrollar en android lo haremos con el software Eclipse entonces:
- Descargar e instale la ultima versión de Eclipse Classic aunque sirve desde la versión 3.4 hacia adelante.
- Descargar e instalar el SDK de Android
- Descargar e instalar el plugin ADT
- Descargar la última versión de Phonegap y extraiga su contenido. Vamos a trabajar con el directorio de Android así que puede eliminar los otros directorios dentro de la carpeta lib.
Luego de instalar los elementos anteriores, abrimos Eclipse y creamos Nuevo> Proyecto de Android y completamos las ventanas con los datos que ocuparemos.
En el directorio raíz del proyecto debemos crear 2 nuevos directorios
- / Libs
- activos / www
Copiar archivos
- copiar el archivo Córdoba-1.7.0.jar dentro de Libs,
- Córdoba-1.7.0.js dentro de activos / www
- Copiar xml carpeta de la descarga anterior a Córdoba / RES
Para cargar los nuevos archivos dentro de la solución del proyecto apretamos (F5)
Editar el archivo principal de su proyecto de Java se encuentra en el src carpeta en Eclipse:
- Añadir import org.apache.cordova *.;
- Cambie el de la clase se extienden desde la actividad de DroidGap
- Vuelva a colocar la setContentView () de acuerdo con super.loadUrl (“file :/ / / android_asset / www / index.html”);
Click derecho sobre AndroidManifest.xml y seleccione Abrir con> Editor XML y Pegar los siguientes permisos entre el <uses-sdk…/> y <application…/> etiquetas.
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
Luego para finalizar entrar a assets/www y abrir el archivo index.html para luego copiar el código que teníamos anteriormente agregando el script.
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"> </script>
Para probar nuestro código hacemos click derecho al proyecto y ejecutamos la aplicación.
Windows Phone
El desarrollo en esta plataforma se realizará en SDK de Windows Phone con lo cual programaremos en Visual Studio con lo cual una de las limitante para los que no tengan un PC con windows especialmente de windows vista Servipack 2 hacia adelante.
Abra Visual Studio Express para Windows Phone y crea un Nuevo proyecto, seleccione CordovaStarter , coloque el nombre del proyecto que desee y aceptar.
Luego revisamos dentro de la carpeta assets/www en el explorador de soluciones para abrir el archivo index.html y copiamos el código html que teníamos anteriormente, agregando el script.
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"> </script>
Para probar nuestro código simplemente ejecutamos la aplicación en el emulador que deseemos a que posee 2 uno con 256 mb y otro con 512 mb.
IOS
El desarrollo plataforma IOS la realizaremos sobre Xcode que la pueden descargar desde la Mac App Store y con el directorio de Lib/ios de Cordova. Al igual que en windows phone aquí también existe una limitante la cual es que se debe trabajar sobre un MAC, y además es necesario tener la certificación de developer de IOS.
Abrimos Xcode y creamos un nuevo proyecto basado en Cordova-based Application.
Cuando nuestro proyecto ya está instalado realizamos click derecho a la solución y abrimos la carpeta con el nombre “www”, debemos arrastrar a esta solución (específicamente donde está el nombre que nosotros le damos en el explorador de la solución) y nos aparecerá una ventana donde debemos seleccionar donde dice
crear referencias de carpetas para las carpetas de agregado
o en inglés
create folder references for any added folders
y colocamos Finalizar.
y para finalizar buscamos el archivo index.html que se encontrara dentro de la carpeta ”www” y copiamos el código html que teníamos anteriormente, agregando el script.
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"> </script>
Para probar nuestro código simplemente seleccionamos que tipo de dispositivo queremos usar y ejecutamos la aplicación (en la parte superior izquierda del Xcode).
APRENDAMOS MÁS
En Mejorando.la puedes ver el Curso de Android y PhoneGap con @ykro.
Luis
Excelente aporte, como siempre Maestros de la web !!
Excelente! hace tiempo tenia ganas de meter mano en este asunto, que mejor de esta forma.
Gracias
Prefiero mas tecnología para programar con Android, porque el SDK de iOS es caro y muy cerrado o privativo.
En si felicitaciones por el tutorial.
xD
Respeto mucho las tecnologias OpenSource para sacar apps, pero la verdad es que las mejores apps son las que son desarrolladas de manera completamente nativa, en el caso de IOS con Objective-C en XCODE y para android Con Java en Eclipse.
El SDK de IOS es caro, pero actualmente deja mas ganancias a los desarrolladores.
Estimado Luis Leon y otros que puedan ayudarme, aun enredado por unos conceptos, que diferencia hay entre utilizar phonegap + jquerymobile en comparación a utilizar la técnica de Responsive Design (html5+css3+mediaqueries+jquery), suena a una gran diferencia pero al menos ayudarme en que caso utilizar ambos y en que no, ya que hay muchos curso por alli en la red que no se por cual comenzar o cual no tomar en cuenta.
saludos y gracias.
Te explico, al usar Phonegap + jquerymobile estas creando una aplicación nativa del celular, la cual se instala en el celular o tablet y accedes a ella desde tu celular y no necesita Internet y realiza las funciones y lógica que le fueron asignadas. En cambio en Responsive Design es desarrollar una pagina web o aplicación web con la cual se vera de forma distinta según la resolución del aparato del cual se esta entrando, y para entrar se necesitara Internet.
Así que te recomiendo, si quieres mostrar una web entiéndase blog, portafolio, etc.. realizarlo con responsive Design pero si es una aplicación la cual tenga lógica o preste un servicio al usuario, esta realizarla en PhoneGap
Saludos Angel!!!1
super buen aporte compadre !!
gracias luis, ya esta claro.
Una pregunta, Phonegap para que versiones de Android se puede utilizar? para todas?
Tengo entendido que desde 1.5 hacia arriba funciona correctamente y al 100%
Te dejo una imagen con las versiones y su nivel de soporte de API http://docs.phonegap.com/en/1.8.1/img/guide/getting-started/android/AndroidFlow.png esta sacada de la pagina oficial de phonegap
hola luis , continuaras con mas de phonegap…
Exelente aporte, espero mas ejemplos y mas informacion o herramientas para desarrollar aplicaciones para moviles
tutorial básico, excelente para empezar a desarrollar desde 0 conocimiento. Se seguirá, con este tema? seria excelente
Muchas gracias….
Demasiado básico, con muchos errores, como si lo hubieras escrito sin ganas, desvelado, faltas ortográficas, inconcluso:
1. mencionas la carpeta “activos” cuando debería ser assets.
2. Vamos a trabajar con el directorio de Android así que puede eliminar los otros directorios dentro de la carpeta lib. Ehhhhhh!
3. Añadir import org.apache.cordova *.;
Cambie el de la clase se extienden desde la actividad de DroidGap
¿De que estas hablando? Si no supiera a que te refieres, no entendería nada..
Saludos.
Ahhhh! ahora caigo, ya decía yo, donde lo he leído, le pasaste un traductor al manual original encima mal traducido
http://docs.phonegap.com/en/1.9.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
ajaja sos pillo!
como se configura el phonegap para playbook, he intentado pero no me funciona
Se puede hacer precarga de imágenes con phonegap?? es algo tedioso tener que esperar a que se carguen las imágenes después de un rato, gracias.
Muy bueno para empezar, tuve unos detalles con unas palabras traducidas, pero me sirvió a la perfección estuve arto tiempo buscando algo básico para poder empezar.
Gracias Maestros del Web
¿Como acceder al numero telefonico del propio celular con phonegap?
Estoy creando una aplicacion android con phonegap y ocup saber si se puede acceder numero telefonico del propio dispositivo movil con phonegap y de ser así como se puede hacer.
En si ocupo saber el numero de teléfono del celular donde se instale la aplicación, como whatapp que registra al usuario por su numero de teléfono.
Gracias
shualo <3
como puedo hacer que mi aplicación mobil corra no en el emulador si no que aparezca como una nativa en mi celular
Gracias!! me sirvo mucho.
La verdad, cuando leí: [i]“Copiar xml carpeta de la descarga anterior a Córdoba / RES”[/i] no pude continuar…
XD
En fin, gracias a GIOVANNY por su aclaración!
Empezaba bien el tutorial, pero después da asco.
Se valora la intención, pero se nota que mandaron el texto en inglés al traductor y así como salió lo subieron. Sin corregir nada. (-10)
[...] Les dejo un link extra directamente desde maestrodelweb [...]
Puedo usar phonegap en una aplicacion nativa para android que se desarrolla en java?
exelente chicos pero creo que el nombre correcto del archivo Córdoba-1.7.0.jar es Cordova-1.7.0.jar con V y sin tilde jeje
Ya despues que tengo la aplicacion terminada como genero el apk con eclipse? Porque he visto tutoriales y al momento de querer instalar me manda error incluso subi mi proyecto a al constructr se phonegap y no carga el index
Con el constructor build.phonegap.com debes colocar el script de phonegap.js en header de todas tus web que usan phonegap para que te funcione.
Con el eclipse soy medio malo y la unica forma en la e podido generar el APK es dandole run as Adroid Aplication y el APK queda en la carpeta bin del proyecto, pero si te manda error probablemente no lo genere.
Te recomiendo usar AppLaud para eclipse a mi me a ayudado bastante. Mira este tutorial http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt3
Y si no sabes donde esta tus errores debuguea con console.log() de java script y el ddms.bat del sdk de androit
Muy bien explicado, me agrada este tutorial, gracias
[...] bueno, no realmente pero a diferencia de otros frameworks multiplataforma, que están basados en JavaScript/HTML5, Cocos2D-X utiliza la API gráfica de OpenGL ES mejorando el desempeño de la aplicación en el [...]
colegas una pregunta sobre las tildes en html tengo un problema he terminado una aplicaion nativa y en mi html tengo etiquetas de que contienen sus respectivos parrafos y en ellos palabras con tilde lo malo del asunto es que cundo instalo el apk y corro la aplicacion los parrafos me muestran simbolos de como cunado no reconoce tales tildes que me sugieren pa corregir eso , estuve investigand y encontre que hay que colocar en el meta pero esto no me soluciona el problema.
gracias por su atencion
Si estas utilizando la cabecera HTML5 y el charset utf-8 no debes tener problemas con eso.
si tengo colocado asi
pero aun sige el problema de los caracteres
si tengo colocado asi
pero aun sigue el problema de los caracteres
content=”text/html; charset=UTF-8″
y las malas lenguas dicen que debe estar justo después de la etiqueta de apertura
Joder no sali el html me referia a esto meta charset=”utf-8″ y debe estar justo despues de la apertura del head
Que mal que no revisen lo que publican, muy mal! como usan un traductor para sacar cosas de otro lado y copy pastear asi? horrible!
Para la gente que este haciendo este tuto y no entienda que carajo pasa en los pasos de instalacion de phoneGap para Android vaya a http://docs.phonegap.com/en/1.9.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Gracias a Giovanny!