Informate sin compromiso
91 846 39 54 / 659 552 510
Phonegap

Phonegap (2)

Miércoles, 12 Marzo 2014 08:55

Instalación de Plugins APIs en Phonegap 3 2/2

Escrito por

Buenos, pues como lo prometido es deuda, vamos a ver como podemos hacer uso de las APIs de Phonegap / Cordova que en esta versión se usan a modo de Plugins, y como todo plugin, debe ser instalado vamos a hacer una prueba instalando la API de notificaciones y creando una sencilla APP para testear que efectivamente esta funcionando.

Ves al archivo index.html que se encuentra en la carpeta www de nuestro proyecto creado, una vez tengas este archivo abierto, que puedes editar con cualquier editor html, cambia por lo siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>

<script type="text/javascript" charset="utf-8" src="/cordova.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// device APIs are available
//
function onDeviceReady() {
// Empty
}

// alert dialog dismissed
function alertDismissed() {
// do something
}

// Show a custom alertDismissed
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}

</script>
</head>
<body>
<p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
</body>
</html>

Bien, ahora ya tenemos un archivo que hace uso de una API, entonces, ejecuta el emulador guardando los cambios y trata de mostrar la notificación, efectivamente no hace nada. Para que esto funcione, volvemos al terminal e instalamos el plugin:

cordova plugin add org.apache.cordova.dialogs

 

Ahora vamos a volver a compilar:

cordova build ios

y emulamos:

cordova emulate ios

 

Ahora si nos lo toma (ver video) y estamos listos para continuar. Bueno, pues esto es todo, si quieres aprender más sobre phonegap tienes un curso muy completo en: http://www.pixelpro.es/cursos-mobile/aplicaciones-phonegap.html

Miércoles, 12 Marzo 2014 08:33

Instalación Phonegap 3 (en Mac)

Escrito por

Saluods, en este tutorial vamos a ver en primer lugar, la instalación de Phonegap o Cordova en mac, con la versión 3 (la 3.4 es la del video). Lo primero que necesitamos es instalar Node JS, para ello debemos ir a esta página:

http://nodejs.org/

La instalación es muy muy sencilla y tan solo tenemos que seguir los pasos marcados. Uan vez hemso instalado Node JS ya estamos listos para ejecutar sus comando. Abrimos el terminal e instalamos Phonegap / Cordova de la siguiente forma:

sudo npm install-g cordova

También se puede hacer:

sudo npm install-g phonegap

Estupendo, pues hecho esto, nos aseguramos de que estamos en la raiz, con el comando "cd" y si es así vamos a crear un proyecto de la siguiente forma:

cordova create miproyecto com.tudominio.miproyecto Miproyecto

Genial, si todo va bien, accedemos al directorio creado:

cd workshop

y luego añadimos las plataformas para las que vamos a desarrollar la app:

cordova platforms add ios

Estupendo, esto nos crea el proyecto, que podemos abrir con xcode. El Xcode lo vamos a necesitar para bastantes tareas así que asegurate de que está instalado en una versión superior a la 4, Xcode es gratuito y se puede bajar desde aquí: Xcode

Pues lo siguiente es testear que todo esta funcionando correctamente, asi que vamos a compilar mediante:

cordova build ios

 

y cuando termine el proceso la abrimos en el emulador (este se instala y descargar desde Xcode, o lo podemos hacer a mano desde consola). Si no tienes el emulador instalado, lo puedes hacer directamente asi:

sudonpm install-g ios-sim

 

y si ya lo tienes, lo que hacemos es ejecutarlo:

cordova emulate ios

Bueno pues phonegap ya esta instalado y funcionando. En esta versión notarás que las APIs ya no están por defecto y tenemos que cargarlas como plugins, así que te invito a pasar al siguiente tutorial donde te explico como se instalan y testean.

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies Más información.