Desarrolla aplicaciones para iPhone con jQTouch
Publicado el 09/04/2010 en Programación por Jose M. Carbonell
Ingeniero de sistemas y apasionado de Ruby on Rails, desarrollo web y metodologías ágiles. Uno de los primeros en utilizar Ruby on Rails Rails en España.
Como su autor, David Kaneda, indica, jQTouch es un plugin para el desarollo de aplicaciones web en el iPhone e iPod Touch.
Esta librería imita el estilo y el comportamiento de las aplicaciones nativas del iPhone OS usando HTML5 y CSS3. En realidad se basa en características HTML5 y CSS3 soportadas por el motor de renderizado Webkit, presente en Safari Mobile, por lo que se visualizará correctamente en cualquier navegador que funcione con este motor, somo Safari o Chrome y en navegadores de dispositivos móviles que lo utilicen (iPhone, G1 y Pre).
En este tutorial vamos a crear una sencillo cliente de Twitter. La única funcionalidad que tendrá dicho cliente será la de acceder a los mensajes públicos de cualquier cuenta.
El sistema de acceso a los mensajes de Twitter está basado en el código del artículo Notificador ajax usando jQuery y no entraremos en detalle en su código ya que la idea de este tutorial es mostrar el procedimiento para crear aplicaciones web con jQTouch.
Antes de empezar
Básicamente vamos a hacer una aplicación web, alojada en un servidor. Después vamos a crear un acceso director en el listado de aplicaciones. De esta forma accederemos a la aplicación como si fuera nativa, sin tener las barras de navegación del navegador.
Para el correcto funcionamiento de esta aplicación necesitaremos conexión a internet. En un futuro artículo veremos como crear aplicaciones disponibles offline.
Necesitaremos descargar la librería jQuery y jQtouch.
Estructura de la aplicación
Partimos desde la estructura de una página web con un tipo de documento HTML5:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>TheProc.es jQTouch Demo</title>
</head>
<body>
</body>
</html>Estará contenido en un archivo llamado index.html en la siguiente estructura de archivos:
Necesitamos referenciar lo siguiente:
- Hoja de estilos de jqtouch.
- Hoja de estilos del tema visual a utilizar.
- Librería javascript jQuery.
- Plugin jQTouch para jQuery.
Teniendo en cuenta la anterior estructura lo anterior queda así:
<html>
<head>
<meta charset="UTF-8" />
<title>TheProc.es jQTouch Demo</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
<script src="jquery/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>Iniciando jQTouch
Para inicial jQTouch añadiremos lo siguiente tras cargar las librerias:
<head>
<!-- librerias -->
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages:[
'themes/jqt/img/back_button.png',
'themes/jqt/img/back_button_clicked.png',
'themes/jqt/img/button_clicked.png',
'themes/jqt/img/grayButton.png',
'themes/jqt/img/whiteButton.png',
'themes/jqt/img/loading.gif'
]
});
</script>
</head>Las opciones anteriores solo entran en funcionamiento en la versión a pantalla completa, no siendo así en modo navegador. Básicamente precargan las imágenes antes de mostrar la página, establecen la pantalla de inicio, el icono de aplicación y el color de fondo de la barra de estado.
Para más información acerca de las opciones disponibles podéis consultar la wiki de jQTouch.
Las vistas
Voy a llamar vista a las diferentes páginas o paneles de la aplicación. El flujo de la aplicación es el siguiente:
Estas vistas están representadas mediante bloques div que se identifican con distinto id.
La vista principal
La vista principal tendrá un id con valor home. Contendrá una barra superior y una lista de opciones:
Esta vista en HTML será:
<div id="home">
</div>Para añadir la barra superior añadiremos a lo anterior un elemento con clase toolbar. No contendrá ninguna opción, solo el título de la vista que deberá ir incluido en un elemento h1 para que el css de jQTouch lo muestre correctamente.
<div id="home">
<div class="toolbar">
<!-- Titulo de la ventana -->
<h1>TheProc.es</h1>
</div>
</div>Las listas de opciones serán listas ul con la clase rounded:
<div id="home">
<div class="toolbar">
<!-- Titulo de la ventana -->
<h1>TheProc.es</h1>
</div>
<ul class="rounded">
<li class="arrow">
<a href="#theproc_es">TheProc_es</a>
</li>
<li class="arrow">
<a href="#other_form">Otra cuenta...</a>
</li>
</ul>
<h2>Enlaces</h2>
<ul class="rounded">
<li class="forward">
<a href="http://theproc.es" target="_blank">TheProc.es</a>
</li>
<li class="forward">
<a href="http://jqtouch.com" target="_blank">jTtouch</a>
</li>
<li class="forward">
<a href="http://twitter.com" target="_blank">Twitter</a>
</li>
</ul>
</div>La primera lista contiene enlaces que nos permitirán navegar por la aplicación, mientras que los enlaces de la segunda lista nos sacará de la aplicación abriendo otra ventana.
Los elementos de la primera lista tienen la clase arrow que muestra la flecha que indica que vamos a ir a otra parte. Los de la segunda tienen la clase forward lo que nos diferencia los enlaces de los de la primera lista y los enlaces que contiene tienen el target="_blank" por lo que se abrirán en otra ventana.
Para ello añadiremos el siguiente código:
// Mensaje de aviso para los enlaces que abren nuevas ventanas
<script type="text/javascript" charset="utf-8">
// Some sample Javascript functions:
$(function(){
$('a[target="_blank"]').click(function() {
if (confirm('Este link abre una nueva ventana.')) {
return true;
} else {
$(this).removeClass('active');
return false;
}
});
});
</script>Si quisieramos también podemos añadir una barra de información. Para ello podemos crear un elemento con clase info con cualquier texto dentro, por ejemplo:
<div class="info">
Esto es una aplicación de demo de <a href="http://theproc.es">theProc.es</a>
</div>Si nos fijamos en los enlaces de la primera lista, vamos a necesitar 2 vistas más: una con id theproc_es y otra con id other_form.
Listado de tweets de Theproc.es
La siguiente vista va a ser la del listado de los últimos tweets de la cuenta de theproc.es. La identificamos mediante el id theproc_es e inicialmente mostrará una lista vacía.
<div id="theproc_es">
<div class="toolbar">
<h1>TheProc.es</h1>
<a class="back" href="#home">Volver</a>
</div>
<ul class="tweets rounded">
<li>Cargando...</li>
</ul>
<div class="info">
Esto es una aplicación de demo de <a href="http://theproc.es">theProc.es</a>
</div>
</div>La barra de herramientas ha cambiando. Ahora podemos ver un enlace extra con clase back y href #home. Esto simula el botón volver propio de una aplicación nativa.
El siguiente código contendrá el listado de tweets una vez obtenidos del servidor de twitter.
<ul class="tweets rounded">
<li>Cargando...</li>
</ul>Notad la clase tweets. Esto es para poder referirnos a esta lista mediante css #theproc_es ul.tweets ya que más adelante utilizaremos otra vista para mostrar los tweets de otra cuenta.
Añadiremos el siguiente código para obtener los mensajes:
<script type="text/javascript" charset="utf-8">
// Some sample Javascript functions:
$(function(){
// Cuando accedemos a los tweets de the proc es
$('#theproc_es').bind('pageAnimationEnd', function(e, info){
getTweets('theproc_es', 10, 'theproc_es');
});
});
</script>Lo que hacemos es añadir una función (getTweets) al evento pageAnimationEnd de la vista #theproc_es. Esta función recibe el usuario, número de tweets a obtener y el nombre de la página donde los mostrará.
El código de la función es el siguiente:
<script type="text/javascript" charset="utf-8">
// Obtiene los n tweets de un usuario y actualiza update_item
var getTweets = function(user, limit, update_item){
$.ajax({
url: "http://api.twitter.com/status/user_timeline/" + user + ".json?count=" + limit + "&callback=?",
dataType: 'json',
success:function(data){
var list = $('#' + update_item +' ul.tweets');
list.empty();
$(data).each(function(){
var img = $('<img>').attr('src', this.user.profile_image_url);
var divImg = $('<div>').css({float:'left', 'width':'75px'}).append(img);
var createdAt = $('<div>').addClass('created_at').text(this.created_at);
var userSpan = $('<span>').addClass('user').text(this.user.screen_name);
var p = $('<p>').addClass('small').text(this.text);
var divContent = $('<div>').css({marginLeft: '75px'})
.append(createdAt)
.append(userSpan)
.append(p);
$('<li>')
.append(divImg)
.append(divContent)
.appendTo(list);
});
}
});
};
</script>Básicamente construye la url de los mensajes del usuario indicado y los actualiza en la lista con clase tweets perteneciente a la vista indicada.
Formulario de acceso a otra cuenta
La siguiente vista constará de un formulario en la cual podremos introducir una cuenta de twitter para acceder a sus tweets públicos.
El código de la vista de formulario es el siguiente:
<div id="other_form">
<div class="toolbar">
<h1>Otra cuenta</h1>
<a class="back" href="#home">Volver</a>
</div>
<form id="other_form_form">
<ul class="edit rounded">
<li><input type="text" name="account_name" placeholder="Usuario" id="account_name" /></li>
</ul>
<a href="#" class="whiteButton" style="margin: 10px">Aceptar</a>
</form>
<div class="info">
Esto es una aplicación de demo de <a href="http://theproc.es">theProc.es</a>.
</div>
</div>La parte interesante es el formulario. Este formulario tiene un campo de texto llamado account_name y un enlace, con clase whiteButton, lo cual le hará obtener el estilo de los botones de las aplicaciones nativas.
Ahora necesitamos jquery para hacerlo funcionar. Primero asociamos al evento submit del formulario y click del botón la función submitForm que se encargará de enviar obtener y mostrar los mensajes.
$('#other_form form').submit(submitForm);
$('#other_form .whiteButton').click(submitForm);La función para obtener los mensajes:
function submitForm(){
var $el = $('#other_form #other_form_form');
var user = $('#account_name', $el).val();
if (user.length > 1){
getTweets(user, 10, 'other');
jQT.goTo( '#other', 'flip');
}
}Esta función se encarga de obtener el nombre de usuario del formulario y reutiliza la anterior para obtener y mostrar los mensajes. La última instrucción jQT.goTo('#other', 'flip') nos lleva a la vista llamada #other usando la animación de transición flip.
Más información sobre las animaciones de transición.
Listado de tweets
Por último queda la vista donde se muestran los mensajes de la cuenta seleccionada. Esta vista es muy similar a la de los mensajes de la cuenta de Theproc_es:
<div id="other">
<div class="toolbar">
<h1>Otra cuenta</h1>
<a class="back" href="#other_form">Volver</a>
</div>
<ul class="tweets rounded">
<li>Cargando...</li>
</ul>
<div class="info">
Esto es una aplicación de demo de <a href="http://theproc.es">theProc.es</a>.
</div>
</div>Lo único que cambia es el enlace de "volver". Este enlace no envía a la vista #home sino lo que hace a la vista de formulario.
Instalando la aplicación
Vale, ahora ya tenemos la aplicación terminada y podemos probarla en el navegador del iPhone.
Sin embargo, lo interesante es instalar la aplicación como una aplicación más.
Para ello, en el iPhone podemos seleccionar la opción de "Añadir a pantalla de inicio":
Esto nos dejará un icono junto con las demás aplicaciones:
A partir de ahora podremos acceder a la aplicación a pantalla completa:
Y esto es todo. Podéis descargar el código fuente usado para este ejemplo y comprobar como se vería.
Recordad que según este ejemplo necesitareis que aplicación esté online para poder ejecutarla en vuestro iPhone. En un próximo artículo contruiremos una aplicación que podrá usarse totalmente offline.
El código fuente está disponible aquí.
Compartir
no se puede poner el icono que nosotros queramos?? te agradeceria si puedes contestarme al mail o al responder enviarme un link a esta página. no se como no hay mas comentarios aquí !!! esto es interesantísimo
Buenísimo!! derek, te paso un link que puede interesante con respecto a lo del ícono peronalizado, todavía no lo probé, el link es: http://www.aeromental.com/2010/05/21/como-poner-el-icono-de-tu-pagina-en-el-iphone-ipod-touch-y-el-ipad/
@Derek: claro que se puede poner el que quieras. Si te fijas al iniciar jqtouch le puedes especificar qué imagen quieres como icono: var jQT = new $.jQTouch({ icon: 'jqtouch.png' }); Tambien puedes hacerlo como dice @Adrn, que consiste en insertar la linea en el head. Esto es válido en cualquier página web que hagas con soporte para iphone. Cuando añadas la web a la pantalla de inicio usará esa imagen. Sin embargo, en este caso, usando jqtouch yo prefiero añadirlo como opción de inicialización de jqtouch.