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
- Descargar e instalar Java JDK
- Descargar e instalar Eclipse Classic
- Descargar e instalar el SDK de Android
- Desde Eclipse instalar el plugin ADT Plugin
- 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 MedellinJSAppLos 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
Extendiendo Phonegap
PhoneGap Build
(Construyendo en la nube)
Generando el aplicativo para múltiples plataformas
https://build.phonegap.com/
DOcumentación
Gracias A todos
