phonegap 

(Apache cordova)

+

jquery mobile



La forma más sencilla y rápida de desarrollar una aplicación móvil para múltiples plataformas

problemáTICA ACTUAL EN EL  desarrollo

de aplicativos móviles


El panorama actual del desarrollo móvil obliga a que un desarrollador que pretenda dar cobertura a un número de usuarios aceptable deba tener múltiples versiones de su aplicativo desarrolladas en diversos lenguajes de programación usando los diferentes SDK de las plataformas.


todo esto debido a las diversas plataformas de los dispositivos móviles de los usuarios.

Phonegap 

(Apache Cordova)



PhoneGap es un framework de desarrollo para aplicativos móviles que permite construir aplicaciones de fácil portabilidad a múltiples plataformas usando HTML, CSS y Javascript.

Plataformas soportadas


Las plataformas a soportadas a la versión 2.3 de PhoneGap son:


Cómo funciona?


UNA Aplicación en WEBview

Toda aplicación de PhoneGap corre en un componente nativo que visualiza una página web, esta página web tiene la opción de usar el API Javascript de PhoneGap que permite acceder a los recursos del dispositivo móvil

desde una vista más técnica

Qué puedo hacer con el API

de PhoneGap?


El API me permite acceder a los diferentes recursos del dispositivo móvil donde se va a ejecutar el aplicativo, estos recursos pueden variar por limitaciones de software o hardware en cada plataforma.


Recursos disponibles en el api


  • Accelerometer (sensores de movimiento)
  • Camera (Captura de fotos)
  • Capture  (Acceso a los sistemas de captura de video y sonido)
  • Compass (Obtiene la dirección hacia donde esta apuntando el dispositivo)
  • Connection (Detección del estado de la conexión de red)

Recursos disponibles en el api


  • Contacts  (Acceso a la libreta de direcciones)
  • Device (Información específica del dispositivo)
  • Events (Detección de eventos nativos en el dispositivo)
  • File (Acceso al sistema de archivos)
  • Geolocation (Sistemas de geolocalización)
  • Globalization (i18n)

Recursos disponibles en el api


  • InAppBrowser (Control del navegador)
  • Media (Reproducción y grabación de audio)
  • Notification (Notificaciones visuales, audibles y táctiles)
  • Splashscreen (Pantalla inicial del aplicativo)
  • Storage (Almacenamiento de datos de la aplicación en el sistema nativo)

Soporte del api de acuerdo a la plataforma

Cómo iniciar el desarrollo?


Para comenzar a desarrollar un aplicativo debemos contar con un ambiente de desarrollo de alguna de las plataformas soportadas.

Para este caso vamos a utilizar Android como plataforma para desarrollar un aplicativo.

Entorno de desarrollo para android


  1. Descargar e instalar Java JDK
  2. Descargar e instalar Eclipse Classic
  3. Descargar e instalar el SDK de Android
  4. Desde Eclipse instalar el plugin ADT Plugin
  5. Descargar y descomprimir PhoneGap


El proceso es casi idéntico en Windows, Linux y Mac

Creación del proyecto


Para las plataformas más populares el proceso de creación del proyecto esta simplificado mediante un script que genera todos los recursos, este script de nombre create se encuentra en el subdirectorio bin del directorio de la plataforma despues de descomprimir PhoneGap

./create ~/tmp/MedellinJSApp com.MedellinJS.MedellinJSApp MedellinJSApp

Los parámetros son: ruta de creación, nombre del paquete y nombre del aplicativo

Importación del proyecto en Eclipse

Trabajando con el proyecto


Dentro de la carpeta assets del proyecto, esta www, esta carpeta es la que contiene el aplicativo, index.html es la página que se carga inicialmente

Ejecutar el proyecto


El proyecto puede ser ejecutado haciendo  click con el botón derecho en el y seleccionando la opción Run As -> Android Application,  esto lo ejecutará en un emulador que provee el Android SDK o puede ser ejecutado en un dispositivo Android con las opciones de desarrollo activadas.

Desde eclipse se puede crear el emulador si no se tiene uno usando la herramienta AVD

Cómo luce un aplicativo de
PhoneGap?

Algunos Ejemplos


Por lo general se usa algún toolkit que simplifique la tarea y nos permita tener un look adecuado

Enter

Jquery

Mobile

Qué es Jquery Mobile?


JQuery Mobile es un framework para el desarrollo de interfaces gráficas en HTML orientado a compatibilidad entre múltiples plataformas móviles.



Cómo funciona?


Jquery Mobile hace un uso extensivo de la especificación de atributos personalizados 'data' de  HTML5, clases de CSS y eventos en Javascript para crear una interfaz compatible con las plataformas soportadas.

Componentes disponibles en Jquery Mobile


Página básica en

Jquery Mobile

<!DOCTYPE html>
<html>
 <head>
  <title>Página básica</title>
  <link rel="stylesheet" href="themes/medellinjs.min.css" />
  <link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.mobile.min.js"></script>
 </head>



Página básica en

Jquery Mobile

       
<body>       
   <div data-role="page" id="page1">
     <div data-role="header">
        <h3>Header</h3>
     </div>
     <div data-role="content">

     </div>
     <div data-role="footer">
        <h3>Footer</h3>
     </div>
   </div>
</body>
</html>

Definición de Algunos

Widgets


Un botón:

<a href="#" data-role="button" id="boton1">Un botón</a>

Un switch:

<select name="flip-1" id="flip-1" data-role="slider">
	<option value="off">Off</option>
	<option value="on">On</option>
</select>

Asignación de eventos a

los widgets


$("#mi_boton").on("click", function(event, ui) {
  miFuncion();
});

$("#mi_select").on( "change", function(event, ui) {
  miOtraFuncion();
});

Personalizando la apariencia


PhoneGap + Jquery Mobile



Jquery Mobile incluye una sección dentro de su documentación donde da pautas específicas para su uso apropiado en aplicaciones PhoneGap




Extendiendo Phonegap


Cuando necesitamos una funcionalidad compleja en un aplicativo que no este incluida en el API de PhoneGap, es posible crear un plugin con código nativo para cada plataforma para dicha funcionalidad y acceder esta nuevo plugin usando el API Javascript.




PhoneGap Build
(Construyendo en la nube)


Generando el aplicativo para múltiples plataformas


PhoneGap Build es un servicio en linea que me permite construir los paquetes de mi aplicativo para las múltiples plataformas soportadas mediante un proceso sencillo y unos requerimientos mínimos, solo un zip o un repositorio GIT que contengan el código HTML,CSS y JS

https://build.phonegap.com/


DOcumentación



PhoneGap:

Jquery Mobile:

Gracias A todos



Adrián Estrada
edsadr@gmail.com
@edsadr

phonegap y jquery mobile

By Adrián Estrada

Made with Slides.com

phonegap y jquery mobile

  • 4,955

More from Adrián Estrada