Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

PhoneGap

No description
by

Daniel Pérez

on 25 October 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of PhoneGap

PhoneGap PhoneGap es un framework que permite crear aplicaciones nativas para dispositivos móviles usando HTML, CSS, and JavaScript. El núcleo de PhoneGap es 100% código abierto, bajo el proyecto Apache Cordova . ¿Qué es? La interfaz de usuario para las aplicaciones PhoneGap es creada usando HTML, CSS y JavaScript. La base de la IU de una aplicación PhoneGap es la vista de un navegador web que ocupa el 100% del dispositivo (ancho y alto).



La vista web usada por PhoneGap es la misma vista web usada por el sistema operativo nativo. En iOS, esta es la clase UIWebView de Objetive-C; en Android, es android.webkit.WebView. De todas formas existen ciertas diferencias para la visualizacion web en los diferentes SO por lo que debe tenerse en cuenta en el desarrollo de la interfaz de usuario. Interfaz de usuario PhoneGap PhoneGap provee de una interfaz de programación de aplicaciones (API) que permite acceder a las funcionalidades del sistema operativo nativo usando JavaScript. El desarrollador construye su aplicación haciendo uso de JavasScript y la API de PhoneGap maneja la comunicación con el sistema operativo nativo. PhoneGap API Como función extra el mecanismo de comunicación JavaScript-Nativo de PhoneGap permite el desarrollo de "plugins nativos". Los plugins nativos de PhoneGap permiten escribir clases propias nativas y sus correspondientes interfaces JavaScript para ser usadas con las aplicaciones PhoneGap. Las aplicaciones PhoneGap se desarrollan haciendo uso de HTML, CSS, y JavaScript, no obstante el producto final de una aplicación PhoneGap es un archivo binario que puede ser distribuido a traves de diferentes canales. PhoneGap- Empaquetado y Distribución Para las aplicaciones iOS la salida es un fichero IPA (iOS Application Archive), para las aplicaciones Android la salida es un fichero APK (Android Package), para Window Phone la salida es un fichero XAP (Application Package), etc... Estas son algunos de los ejemplos de formato de empaquetado de las diferentes aplicaciones "nativas que pueden ser distribuidas en los canales apropiados (iTunes Store, Google Play, Amazon Market, BlackBerry App World, Windows Phone Marketplace, etc...) El cliente PhoneGap se comunica con un servidor de aplicaciones para recibir datos. El servidor de aplicaciones maneja una lógica de negocio para comunicarse con una base de datos o repositorio. PhoneGap- Arquitectura de aplicaciones de alto nivel El servidor de aplicaciones es normalmente un servidor web (Apache, IIS, etc...) con un lenguaje de scripting como ColdFusion, Java, .NET, PHP, etc... PhoneGap desconoce las tecnologías que subyacen y puede trabajar con un cualquier servidor de aplicaciones usando protocolos web standards. La comunicacion entre aplicación y servidor se realiza utilizando peticiones HTTP standards para contenido HTML , servicios REST-ful XML , servicios JSON, o SOAP (o websockets si el SO lo soporta).









De lado del cliente la arquitectura utiliza el modelo aplicación single-page , donde la lógica de la aplicacion reside en una única página HTML. Esta página no se carga nunca de memoria sino que se actualizan sus elementos (DOM HTML) con datos del servidor obtenidos mediante AJAX y otros datos almacenados en memoria con JavaScript. PhoneGap- Arquitectura de aplicaciones de alto nivel Para Android:
Eclipse Classic (Eclipse 3.4+)
Android SDK
Eclipse ADT Plugin
Última versión de Cordova Requisitos Para iOS:
Xcode 4.3+
Xcode Command Line Tools
Equipo basado en Intel con Mac OS X Lion o superior (10.7+)
Necesario para instalar en dispositivo:
Dispositivo Apple iOS (iPhone, iPad, iPod Touch)
Certificado de desarrollador iOS Otros requisitos de otras plataformas en: www.phonegap.com Servicio de compilación en la "nube". El desarrollador sube su desarrollo HTML5, CSS, y JavaScript y el servicio PhoneGap Build se encarga de la compilación y la generación del ejecutable para las diferentes plataformas. PhoneGap Build Crear proyecto Android con el wizard de Eclipse.
Añadir al proyecto los directorios:
/libs
assets/www
Copiar el cordova-X.X.X.js al directorio assets/www
Copiar cordova-X.X.X.jar al directorio libs
Actualizar el proyecto Eclipse para que reconstruya el Build Path e incluya la nueva librería. Instalación Accelerometer: Gestiona el sensor de movimiento del dispositivo.
Camera: Captura fotos usando la cámara del dispositivo.
Capture: Obtiene archivos multimedia usando las aplicaciones de captura.
Compass: Obtiene la dirección a la que mira el dispositivo.
Connection: Comprueba el estado de la red e información de la red móvil.
Events: Eventos nativos a través de JavaScript.
File: Sistema de ficheros nativos a través de JavaScript.
Geolocation: Permite conocer donde ese encuentra el usuario.
Media: Graba y reproduce ficheros de audio.
Notificacition: Notificaciones visuales, audibles y táctiles.
Storage: Accede a las posibilidades de almacenamiento nativas del dispositivo API PhoneGAP Descargar phonegap http://phonegap.com/download versión 2.1
Verificar y tener instalado en el Xcode las "Command Line Tools".
Descomprimir el zip descargado con el Phonegap y acceder por terminal hasta la ruta  /lib/ios/bin
Ejecutar el siguiente comando ./create <project_folder_path> <package_name> <project_name>
Ejemplo ./create ~/Document/Proyect_iOS/HolaMundo es.desic.holamundo HolaMundo
Esto hace que dentro de la carpeta ~/Document/Proyect_iOS/HolaMundo se haya creado un fichero HolaMundo.xcodeproj que podemos abrir con el xcode Instalación En iOS: Crear plugins PhoneGap/Cordova Arquitectura global Crear plugins PhoneGap/Cordova Plugins incluidos en PhoneGap /Cordova (GPS, acelerómetro, lista de contactos, etc...) tiene una parte Javascript y otra nativa.
Los nuevos plugins que se desarrollen incluirán igualmente: Código
nativo + Interface Javascript Crear plugins PhoneGap/Cordova var GoTo = function() {
};

GoTo.prototype.location = function(address, successCallback, failureCallback) {
return PhoneGap.exec(
successCallback,
failureCallback,
'GoTo', // Nombre con el que está registrado el plugin Java
'location', // Acción invocada
[address]);
};

cordova.addConstructor(function() {
cordova.addPlugin("goTo", new GoTo());
}); Implementación de la parte nativa Crear plugins PhoneGap/Cordova public class GoToPlugin extends Plugin {
@Override
public PluginResult execute(String action, JSONArray data, String callbackId) {

try {
Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse("google.navigation:q=" + data.getString(0)));
this.ctx.startActivity(i);
return new PluginResult(Status.OK);
}
catch (Exception e) {
System.err.println(e.getStackTrace());
return new PluginResult(Status.ERROR);
}
}
} Registro del plugin (/res/xml/plugins.xml) Crear plugins PhoneGap/Cordova Uso del plugin <?xml version="1.0" encoding="utf-8"?>
<plugins>
...
<plugin name="GoTo" value="koalite.cordova.GoToPlugin"/>
</plugins> plugins.goTo.location("Plaza Mayor, Madrid, España"); En Android:
Full transcript