Se trata del proyecto Phonegap básico de la versión 3.4, al que añadiremos Android a su carpeta platforms. Suponemos que tenemos instalado el SDK de Android. Posteriormente añadiremos Bootstrap para ayudarnos a maquetar las vistas, jQuery para simplificar las sintaxis de javascript y FastClick, una librería que elimina un retraso de 300 milisegundos que tiene lugar en Android desde que se pulsa un botón hasta que el sistema de Google lo interpreta como un click. Su funcionamiento lo veremos en la primera aplicación de ejemplo.
Vamos a la carpeta en la que vayamos a guardar la base para nuestro proyectos posteriores y escribimos en línea de comandos:
phonegap create esqueleto
Descargas
Ahora vamos a añadir Bootstrap, versión 3.1.1. Nos descargamos Bootstrap de la página oficial y descomprimimos la carpeta fonts de Bootstrap y la añadimos a la carpeta www del proyecto. También extraemos a la carpeta css del proyecto el fichero bootstrap.min.css. Hacemos lo propio con bootstrap.min.js en la carpeta js.
fuente: getbootstrap.com/
A continuación descargaremos jQuery de su web, y añadiremos el fichero jquery-1.11.0.min.js a la carpeta js del proyecto. Es evidente que la versión que usaremos de jquery es la 1.11.
fuente: jquery.com/
Lo siguiente será la librería FastClick, que la descargamos aquí. El fichero fastclick.js lo situaremos también en la carpeta js.
Código
Cuando tengamos todas las librerías completaremos el fichero index.html de manera que quede así.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Proyecto Phonegap</title>
</head>
<body>
<div class="container">
<h1 class="text-center">PhoneGap</h1>
</div>
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/fastclick.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript">
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
app.initialize();
</script>
</body>
</html>
Analizando un poco el código, vemos que al final del body hemos añadido los javascript de jquery, bootstrap, fastclick, el nuestro propio, e inicializamos fastclick de la manera que se nos aconseja hacer en su web. En el head del documento hemos añadido el css de bootstrap.
Ya tenemos el esqueleto básico de un proyecto Phonegap, ahora vamos a añadirle la plataforma Android para compilar en local(puedes saltarte este paso si quieres compilar únicamente mediante Phonegap Build).
El siguiente comando lo escribimos dentro de la carpeta esqueleto:
phonegap build android
Ya tenemos listo el proyecto que nos servirá para todos los ejemplos del tutorial. Cuando vayamos a crear un nuevo proyecto, con copiar la carpeta esqueleto que hemos dejado lista, y renombrarla, bastará. Obviamente es deseable que editemos el fichero config.xml para cambiar el nombre y el id de la aplicación que creemos en cada momento.
Código fuente.
No hay comentarios:
Publicar un comentario