Phonegap (2)
Instalación de Plugins APIs en Phonegap 3 2/2
Escrito por David Piqué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
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:
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.
