Share
¿Quiere aprender a usar PhoneGap, pero no sabe por dónde empezar? Únase a nosotros para crear "Sculder", no solo un homenaje a una excelente serie de televisión de ciencia ficción, sino también una aplicación móvil nativa para el creyente en usted.!
En esta serie, construiremos una aplicación móvil utilizando algunas de las funciones de PhoneGap. Pasaremos de la instalación del SDK a la implementación en las tiendas de aplicaciones de las dos plataformas principales: iOS y Android. Los conceptos cubiertos en esta serie incluirán el acceso a la cámara del dispositivo, el almacenamiento local y la geolocalización..
En esta primera parte, analizaremos qué es realmente PhoneGap y para qué puede usarlo, y luego veremos la instalación del marco de PhoneGap y los SDK que necesitamos para realizar pruebas en OS X, Windows y Linux. ambientes Luego construiremos y ejecutaremos la aplicación PhoneGap "Hello World" muy simple para asegurarnos de que todo funciona correctamente..
A estas alturas, es probable que tenga una buena idea de lo que es PhoneGap y probablemente incluso lo haya usado, pero si no es así, aquí tiene un breve resumen.
PhoneGap nació en iPhoneDevCamp en 2008, donde se creó simplemente porque no había muchos desarrolladores de Objective-C en comparación con los desarrolladores web. El desafío consistía en armar un marco que permitiera a los desarrolladores web utilizar HTML, CSS y JavaScript para codificar aplicaciones que pudieran aprovechar la funcionalidad nativa del dispositivo móvil, como las funciones de cámara, almacenamiento y ubicación geográfica. Inicialmente diseñado para funcionar con el iPhone, dentro de un año, PhoneGap estaba creciendo y comenzaba a ser compatible con Android también. Ahora, con casi 4 años de edad, PhoneGap es uno de los kits de herramientas más populares para desarrollar aplicaciones móviles y es compatible con una gama mucho más amplia de dispositivos móviles como iOS, Android, Blackberry, Symbian, webOS, WP7 y Bada..
En el momento de la publicación (por ejemplo, enero de 2012), el marco actualmente es compatible con el Acelerómetro, Cámara, Compás, Contactos, Archivo, Geolocalización, Medios, Red, Notificaciones (Alerta, Sonido y Vibración) y las API del dispositivo de almacenamiento. Hay soporte completo para todas estas funciones en los dispositivos iOS más nuevos (3GS +) y Android. Para obtener más detalles sobre la compatibilidad con dispositivos Blackberry, WP7, Sybian, webOS y Bada, consulte la tabla de compatibilidad oficial.
A pesar de la creencia contraria, PhoneGap no es una solución de escritura una vez que se implementa en todas partes (aunque se acerca). Sin duda, es un marco multiplataforma capaz de ejecutarse en muchos dispositivos compatibles, pero para implementarlo con éxito, es probable que necesite probar y modificar su código en cada uno de los dispositivos de destino..
Si desea desarrollar para iOS, necesitará una computadora basada en Intel que ejecute MAC OS X versión 10.6 o posterior. También necesitará la última versión de Xcode (versión 4 en el momento de la escritura) y el SDK de iOS para la prueba. Para descargar Xcode, deberá registrarse como miembro del Programa de Desarrolladores de Apple.
Diríjase a www.phonegap.com y en la esquina superior izquierda verá un botón para descargar la última versión de PhoneGap. Al hacer clic en esto, se solicitará la descarga de un archivo ZIP que contiene todo lo que necesita para comenzar..
Descomprimir el archivo le dará numerosas carpetas, cada una etiquetada con el sistema operativo de destino. Mientras estamos instalando para iOS, abra la carpeta iOS y monte la dmg expediente. los dmg contiene una pkg expediente. Haga clic en esto y pasar por el proceso de instalación. Después de completar la instalación, puede continuar e iniciar Xcode y, cuando cree un nuevo proyecto, debería poder elegir PhoneGap como plantilla..
Ahora podemos configurar las opciones para nuestro proyecto y la ubicación de nuestros archivos. Una vez que hemos hecho eso, nuestro proyecto se construye en el directorio especificado y Xcode nos presenta nuestra página de resumen. Aquí podemos agregar fácilmente los íconos de la aplicación y cambiar un par de configuraciones cuando nuestra aplicación esté lista para ser empaquetada y enviada a la tienda de aplicaciones, por ahora solo seguiremos adelante y presionando RUNAR en la esquina superior izquierda. Esto compilará la aplicación y activará el simulador de iOS..
Si intenta esto ahora, después de la pantalla de inicio debería obtener un error que indica que el index.html No se pudo encontrar el archivo. No hay que preocuparse, esto es en realidad lo que debería suceder. Necesitamos ir al directorio de trabajo para el proyecto (haga clic derecho en el proyecto en Xcode y haga clic en mostrar en el buscador) y allí veremos un www directorio en la raíz del proyecto.
Ahora necesitamos arrastrar ese directorio hacia Xcode y agregarlo al proyecto..
En las opciones para estos archivos, debemos asegurarnos de que seleccionamos "Crear referencia de carpeta para cualquier carpeta agregada", luego hacer clic en finalizar. Nuestro www El directorio ahora se agrega al proyecto. Ahora podemos hacer clic en ejecutar de nuevo y obtendrás el 'Hello World' básico para PhoneGap.
los www El directorio será ahora nuestro directorio raíz para la aplicación. Aquí es donde guardaremos cualquier HTML, CSS o JavaScript que nuestra aplicación va a utilizar, como usted esperaría para cualquier otra aplicación web. los phonegap.js El archivo es el archivo JavaScript que actuará como nuestra API, lo que nos dará acceso a las API nativas que podríamos usar en nuestra aplicación más adelante..
A diferencia de desarrollar para iOS, puedes desarrollar para Android en cualquier plataforma. Aunque se recomienda que use el IDE de Eclipse con un par de complementos, existe una forma alternativa de usar PhoneGap (a través de la línea de comandos), pero es bueno si comienza a hacerlo primero con un IDE y luego pruebe. La forma de línea de comandos y ver cuál prefiere. En este tutorial utilizaremos el método IDE..
Primero, tendrá que dirigirse al sitio web de Eclipse y descargar el IDE para la plataforma de su elección. La versión clásica está bien para lo que necesitamos. Una vez descargado, inicie Eclipse y necesitamos instalar el complemento ADT. Tienes que ir a Ayuda => Instalar nuevo software y haga clic en agregar en la esquina derecha.
Luego puede ingresar el complemento de ADT para el nombre del complemento e ingresar lo siguiente para la URL del repositorio.
https://dl-ssl.google.com/android/eclipse/
El complemento se descargará e instalará y Eclipse le pedirá que reinicie. Una vez que se reinicia puedes crear un nuevo proyecto de Android..
Luego, pasará por el asistente de proyectos, donde le dará un nombre a su aplicación y configurará su espacio de trabajo. También seleccionará su SDK de destino de compilación; puede seleccionar el último por ahora (4.0.3 en el momento de la escritura). Ir a través del resto del asistente y configurar la información restante para la aplicación.
Se le preguntará si desea descargar e instalar los SDK de Android necesarios en este momento. Si ya los tiene en su máquina, continúe y busque la carpeta. Si no, puedes dejar que Eclipse las descargue por ti..
Dentro del directorio raíz de la aplicación necesitamos crear un directorio llamado tapas y dentro del directorio de activos cree otro directorio llamado www. Ahora, vuelva al archivo original de PhoneGap que se descargó y en la carpeta de Android que necesita para copiar el phonegap.jar archivo a la libs directorio que creamos y luego copiar el phonegap.js al www directorio.
Su estructura debe verse como la siguiente:
Dentro de nuestro www directorio, crear un index.html archiva y suelta el siguiente código:
mobiletuts phonegap Bienvenido a PhoneGap
Editar activos / www / index.html
Ahora necesitamos hacer algunos cambios en el archivo principal de Java que se pueden encontrar en el src carpeta. Primero, necesitamos cambiar la clase ' ampliar desde Actividad a DroidGap.. Entonces necesitamos reemplazar setContentView (R.layout.main); con super.loadUrl ("file: ///android_asset/www/index.html"); y luego agregar import com.phonegap. *; después de las dos primeras importaciones. Su archivo Java al finalizar debe verse algo como esto:
Accentsconagua
paquete com.shaundunneTest; importar android.app.Activity; importar android.os.Bundle; import com.phonegap. *; clase pública TestActivity extiende DroidGap / ** Llamado cuando la actividad se crea por primera vez. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ("file: ///android_asset/www/index.html"); Eclipse probablemente lanzará algunos errores ahora, simplemente haga clic derecho en la carpeta libs y vaya a Ruta de compilación => Configurar ruta de compilación y luego en la pestaña de bibliotecas, haga clic en agregar JAR y seguir adelante e incluir el phonegap.jar expediente. Esto debería aclarar los errores. Ahora, necesitamos agregar algunos permisos al archivo de manifiesto para garantizar que PhoneGap se ejecute correctamente.
Abre el AndroidManifest.xml presentar y agregar lo siguiente antes de la solicitud entrada:
En la etiqueta de actividad, agregue el siguiente atributo:
android: configChanges = "orientación | keyboardHidden"
Esto asegura que la aplicación no vuelva a cargar el index.html en cualquier momento esos eventos suceden.
Lo último que hay que hacer es copiar el xml carpeta desde la descarga de PhoneGap a la res Directorio en el proyecto. Ya está listo para ejecutar esto en el emulador..
Puede hacer clic derecho en su proyecto ahora y correr como una aplicación de Android. Si aún no ha configurado un dispositivo, se le pedirá que lo haga. Si necesita ayuda para hacerlo, consulte la documentación aquí.
Y eso es todo lo que necesitas para iniciarte en Android.!
Hasta ahora, hemos cubierto solo dos de las plataformas móviles para nuestra aplicación, pero es probable que queramos distribuirlas en todas las plataformas que admite PhoneGap, ¿verdad? Bueno, en lugar de instalar algunos SDK más, otro IDE con algunos complementos más y configurar una Máquina Virtual para probar, esta serie utilizará el servicio PhoneGap: Build cuando llegue el momento de distribuir la aplicación..
PhoneGap: Build, como se indica en el sitio web, es un servicio basado en la nube que tomará una aplicación HTML / CSS / JS comprimida y le enviará la aplicación, compilada y lista para su distribución (una advertencia: para Android, iOS y BB necesitará los certificados requeridos para la Distribución). PhoneGap: la compilación está en BETA en este momento, y si bien hay opciones de pago (que vale la pena tener si las vas a usar con regularidad), existe una opción gratuita que permite una aplicación privada. Eso es todo lo que necesitamos para nuestro proyecto en este momento, así que siga adelante e inscríbase ahora ya que usaremos el servicio Build al final de la serie..
Ahora tenemos nuestro entorno listo para el desarrollo con PhoneGap. En la siguiente parte de esta serie, comenzaremos a ver las API a las que PhoneGap nos permite acceder y cómo usarlas en nuestra aplicación..
