viernes, 31 de octubre de 2014

Instalando PhoneGap - Ejemplo Hola Mundo

Instalando PhoneGap
PhoneGap es un framework de código abierto para el desarrollo de aplicaciones para móviles. Su principal característica es ser multiplataforma, es decir, con un solo código de aplicación podemos utilizarlo en multitud de plataformas móviles, como Android, iOS o Windows Phone.
El núcleo de las aplicaciones PhoneGap se crea utilizando lenguajes de programación Web, como JavaScript, HTML5, CSS3, y con la ayuda de otros frameworks de desarrollo y de la propia API de PhoneGap. Esta API nos permite acceder mediante código JavaScript a características nativas del móvil, como por ejemplo: Acelerómetro, cámara, contactos, eventos, geolocalización, redes o almacenamiento. Posteriormente, y para cada una de las plataformas móviles para las que queramos generar nuestra aplicación, tendremos que incluir este núcleo Web como parte de la aplicación nativa. De esta forma podremos generar una aplicación "nativa" para cada plataforma móvil aprovechando para todas ellas el mismo núcleo de la aplicación.
Podemos encontrar más información de PhoneGap en la dirección www.phonegap.com,donde podrás descargar la última versión del framework.
Soporte
Con PhoneGap es posible desarrollar aplicaciones para los siguientes sistemas operativos para móviles:
a.       Android
b.       iOS
c.       Windows Phone
d.       BlackBerry OS
e.       Web OS
f.         Symbiam
g.        Bada
Para el desarrollo de la aplicación, además de poder utilizar lenguajes de programación web HTML 5, CSS 3 y JavaScript, también soporta perfectamente el uso de frameworks de desarrollo web móvil como: jQuery Mobile, Sencha Touch, Dojo, jQTouch,SprountCore, GloveBox, XUI, iScroll, entre otros.
Cómo trabaja PhoneGap
El esquema básico de funcionamiento de PhoneGap es el siguiente:
          a)      Construir la aplicación usando estándares Web: HTML, HTML 5, CSS, CSS3, JavaScript o               haciendo uso de otros frameworks para el desarrollo de aplicaciones Web.
          b)       Combinar la aplicación Web con PhoneGap, esto nos dará acceso a las características nativas               de los dispositivos móviles.
          c)        Configurar la aplicación en cada una de las plataformas para las que queramos generar la                     aplicación nativa.
Es importante utilizar estándares web para que nuestra aplicación funcione en la mayoría de dispositivos móviles.

Configuración

Primero nos vamos a la página de PhoneGap (www.phonegap.com) y descargamos el archivo "phonegap-2.9.0.zip ",


el cual contiene una carpeta de recursos para cada sistema operativo. En cada carpeta encontraremos una librería JavaScript y otra en el lenguaje nativo que usa la plataforma.



Por ejemplo, para Android tendremos una librería escrita en JavaScript, usada para el desarrollo de las aplicaciones web, que nos dará acceso al hardware del dispositivo a través de la API de PhoneGap. Además tendremos una librería escrita en Java que realiza la comunicación o puente entre la API JavaScript y las características nativas del sistema operativo o hardware.


La configuración de PhoneGap se realiza de forma diferente para cada sistema operativo móvil, pues se utilizan diferentes IDEs de desarrollo, distintos lenguajes de programación (nativos)  y la inclusión del código de nuestra aplicación Web según la plataforma tiene también sus particularidades.
En la siguiente sección explicaremos la configuración de PhoneGap para Android, por último daremos un listado de enlaces con tutoriales para la configuración en el resto de sistemas.

Configuración con Android

En esta sección vamos a ver como configurar PhoneGap para el entorno de desarrollo de Android. Además crearemos una primera aplicación de ejemplo.
Para preparar el entorno de desarrollo, deberemos hacer lo siguiente:

           a)      Descargar e instalar Netbeans 8.1
           b)      Descargar e instalar el SDK de Android.
           c)       Instalar el plugin ADT (Android Development Tools) desde el gestor de plugins de Netbeans.
           d)      Descargar y decomprimir PhoneGap (Cordova). En este caso utilizaremos solamente el                       directorio de Android.

Para configurar un nuevo proyecto tenemos dos posibles opciones: utilizar el script créate que facilita PhoneGap, o crear un nuevo proyecto desde Netbeans y configurarlo manualmente.
A continuación veremos en detalle estas dos opciones.
1.       Crear el Proyecto con PhoneGap: para crear el proyecto directamente con PoneGap tenemos que tener configuradas las siguientes variables de entorno:
a.       Usuario
                                                    i.      JAVA_HOME - C:\Program Files\Java\jdk1.7.0_13
                                                    ii.      ANT_HOME - D:\GWT\ant-1.9.4-bin
                                                    iii.      ANDROID_SDK_HOME - C:\Users\<Nombre Usuario>\AppData\Local\Android\android-studio\sdk
                                                    iv.      ANDROID_HOME - D:\<Nombre Usuario>\.android
b.      Sistema
                                                    i.      Adicionar a la variable path los siguiente: C:\Users\<Nombre Usuario>\AppData\Local\Android\android-studio\sdk\tools;D:\GWT\ant-1.9.4-bin\bin
Una vez configurado estas variables nos vamos al directorio “D:\GWT\phonegap-2.9.0\phonegap-2.9.0\lib\android\bin”




Desde la consola de comandos en este directorio ejecutamos el siguiente comando:

create.bat D:/GWT/DEMOS/DMO1 org.power.demo23 Demo23



Ahora bien ya tenemos nuestro proyecto Android creado ahora procedemos a abrirlo con netbeans, antes no tenemos que olvidar instalar el plugins de Android.
Instalando plugins: http://nbandroid.org/updates/updates.xml


Configuramos el SDK de Android:



Ahora procedemos a abrir el proyecto:



La estructura de archivo debe ser la siguiente:


Ahora hacemos click derecho en el proyecto y seleccionamos propiedades


Y seleccionamos la versión de Android 4.0.3 que corresponde al API 15.
Ahora crearemos una emulador para ejecutar nuestro proyecto con las siguientes características:



Y luego lo iniciamos:



 Iniciando el emulador:




Ejecutamos la aplicación



El resultado lo podemos ver en el emulador



Bueno eso es todo amigos , espero que les sirva de ayuda el tutorial.


Saludos.

Instalacion de EAS - WIN10X64

Instalación en Windows (Version en PDF : Click ) La instalación la realizaremos sobre Windows 10 X64, pero los pasos son los mismo...