Construye aplicaciones móviles con Sencha Touch

Las aplicaciones para teléfonos móviles y tabletas se han convertido en una necesidad tanto para los negocios, empresas y también para los individuos.

Investigando en la web me encontré con una poderosa herramienta para los desarrolladores de aplicaciones web para móviles: Sencha Touch, conocer en qué se basa, sus características y otros aspectos te dará un comienzo sobre el uso de esta tecnología para luego puedas seguir investigando el tema.

¿Qué es Sencha Touch?

Sencha Touch es un framework para el desarrollo de aplicaciones móviles. Fue el primer framework basado en HTML5 y JavaScript, también hace uso de CSS3. La combinación de estas tecnologías permite crear un interface similar a la de aplicaciones nativas como Android, BackBerry e iOS. Sencha está disponible para su descarga desde su página oficial: https://www.sencha.com/products/touch/download/ allí podrás descargarla con licencia comercial o licencia Open Source GPL.

Características de Sencha Touch

Sencha Touch crea aplicaciones HTML5 de aspecto nativo usando JavaScript basado den el patrón MVC líder para la creación de aplicaciones web móviles multiplataforma.

Sencha aprovecha las técnicas de aceleración de hardware para proporcionar componentes de interfaz de alto rendimiento para dispositivos móviles.

Cuenta con más de 50 temas incorporados en los componentes de interfaz de usuario y nativas para las principales plataformas móviles. Así como con un variedad de widgets de interfaz de usuario de alto rendimiento tales como listas, formularios,  menús y barras de herramientas construidos especialmente para plataformas móviles.

Ofrece todo lo que necesitas para la creación de aplicaciones impresionantes que puedan trabajar en iOS, Android, BlackBerry, Windows Phone, y mucho más.

Cuenta con un novedoso motor de diseño adaptativo, animaciones fluidas y funciones de desplazamiento que permiten desarrollar aplicaciones que respondan de forma instantánea a los usuarios.

Este framework incluye un paquete de datos robusta capaz de utilizar datos de cualquier fuente de datos back-end.

También tiene un paquete gráfico avanzado que le permite visualizar los datos en los dispositivos móviles. Sencha Touch utilizar el mejor desplazamiento y animaciones para cada dispositivo lo resulta en una gran experiencia en todas partes.

Ventajas de Sencha Touch

controles IU(Interfaz de Usuario)

Una de sus principales ventajas es la cantidad de controles IU que son fáciles de utilizar y personalizar. Estos controles han sido diseñados especialmente para dispositivos táctiles por eso incluye una variedad de eventos táctiles o gestures.  Así que usa adicionalmente a los eventos touchstart y touchend otros como tap, double tap, tap and hold, swipe, rotatedrag y drop.

Integración de datos

Como ya mencioné antes Sencha Touch utiliza el patrón MVC en el lado del cliente y ofrece una API rica y poderosa para el manejo de flujo de datos. Estos los podemos leer desde AJAX, JSON o local storage de HTML5. Así podemos usar datos sin conexión gracias a los almacenes locales.

Instalación de Sencha Touch

Primer paso: Descargar el DSK de Sencha Touch desde su página web: https://www.sencha.com/products/touch/download/ allí tendrás que rellenar el formulario y en especial escribir correctamente tu correo electrónico donde te enviarán un enlace para la descarga. El archivo que descargarás estará comprimido en ZIP lo debes descomprimir para luego renombrarlo a “touch”.

Ahora comprueba si está correctamente instalado y funcionando. Para ello abre el navegador web y escribe la dirección: http://localhost/touch

Recuerda que Sencha solo funciona con navegadores basados en WebKit como Safari, Chrome, Epiphany, Maxthon o Midori. Si no el navegador correcto aparecerá una página en blanco.

Aunque la mayoría de la aplicaciones construidas con Sencha Touch se podrían ejecutar y visualizar directamente sin necesidad de un Servidor Web; usaremos uno para realizar pruebas como emulador, en su defecto también podríamos usar un dispositivo móvil real.

Estructura de Carpetas

Para iniciar a construir un proyecto nuevo crearemos una carpeta en nuestro servidor. Luego creamos un archivo nuevo llamado index.html que esté vacío. Ahora sí debemos enlazarlo con Sencha Touch dentro de una subcarpeta llamada “lib/touch” esto sería así:

$ mkdir hello-world // Nuevo proyecto
$ cd hello-world
$ touch index.html
$ mkdir lib
$ ln -s /home/code/web/SenchaSDK/sencha-touch-VERSION ./lib/touch

Las aplicaciones creadas con Sencha Touch se crean con un documento HTML5 que contiene referencias a JavaScript y código CSS para ello nuestro archivo index.html debe tener al menos el siguiente código:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"
type="text/css" />
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

En un próximo artículo explicaremos de forma práctica como crear una aplicación móvil con Sencha Touch. Para mayor información puedes leer las referencias en la que me he basado: http://www.jtech.ua.es/dadm/restringido/web/sesion02-apuntes.pdfhttps://www.sencha.com/products/touch/#resources


PAGE TOP