martes, 3 de enero de 2012

Comenzando con WebWorks

Vamos a preparar nuestro entorno para realizar Apps para el PlayBook (y también para los SmartPhones) utilizando WebWorks, que básicamente es un entorno de programación con HTML5, CSS3 y las APIS de WebWorks.

Lo primero que necesitamos será un editor de HTML y CSS, podemos utilizar cualquier editor con el que estemos acostumbrados a trabajar, con resaltado de sintaxis, autocompletado (aún me acuerdo cuando programaba en ASP con el Bloc de Notas y un IIS bajo NT…). Podemos utilizar alternativas sencillas como Notepad++ o PSPad, pero yo os voy a ir mostrando lo que utilizo personalmente y que es el Eclipse (descarga del Eclipse Classic), al que posteriormente instalamos el Plug-in Aptana Studio y además le añado algunos Plug-ins más como el AnyEdit Tools para trabajar con HTML entities y otras utilidades a vuestro gusto que podréis encontrar en la increíble cantidad de Plug-ins disponibles para Eclipse.

Eclipse

Para ver nuestro proyecto en el navegador mientras desarrollamos necesitamos un servidor web, no es imprescindible ya que podemos abrir directamente nuestro html en el navegador, pero para mostrar correctamente las rutas de los archivos js, css, imágenes, etc… y poder depurar nuestro código correctamente es prácticamente imprescindible. Podemos utilizar un Apache o el servidor que más nos guste, en mi caso he optado por Nginx que descargamos (utilizamos la versión para Windows, pero eso depende nuestro sistema), descomprimimos la carpeta y ya tenemos un servidor web operativo.

Si utilizáis Skype y lo tenéis abierto, deberéis cerrarlo antes de arrancar el servidor web si vais a utilizar el puerto 80 por defecto, ya que por defecto es el que utiliza Skype, pero una vez cerrado, arrancáis el servidor web (Nginx) y después podéis volver a iniciar Skype que utilizará un nuevo puerto al tener ocupado el 80.

Después iniciaremos el servidor web con un archivo por lotes, crearemos nuestro sitio web para el proyecto y lo pondremos en nuestro archivos hosts, pero ahora nos queda descargarnos el emulador del PlayBook. El primer emulador que vamos a utilizar es simplemente ver nuestra aplicación en el navegador Google Chrome (motor WebKit como el del PlayBook) teniendo en cuenta que la resolución de pantalla del PlayBook es de 1024 x 600 pixels. El siguiente paso es utilizar la extensión de Chrome Ripple (Ripple Mobile Environment Emulator) desde el que poder ver nuestra App como en el PlayBook (también podemos emular SmartPhones BlackBerry si desarrollamos nuestra aplicación para los mismos). Respecto a Ripple, comentar que dejará de mantenerse en breve la extensión de Chrome, ya que ahora se descarga el ejecutable desde https://bdsc.webapps.blackberry.com/html5/download/ripple (tanto para Windows como para Mac), pero en los dos PCs que he probado con Windows 7 de 64bits no me ha funcionado ya que una vez instalado da un error (seguiré probando y si encuentro la solución la publicaré).

Ripple

El tercer paso es descargar el simulador del PlayBook desde https://swdownloads.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477 disponiendo de versión para Windows, Mac y Linux (v 1.0.8, en próximas entradas veremos como crear la máquina virtual y configurarla). Y la última opción para probar totalmente nuestra App es utilizar un PlayBook real.

Bien, vamos a crear nuestra primera App, lo primero es crear el directorio donde la vamos a desarrollar, yo utilizo un carpeta en mi disco D llamada APPs_BB donde pongo dos subcarpetas llamadas PlayBook y Smartphone, y bajo estas subcarpetas creo una carpeta para cada aplicación, así que vamos a crear nuestra primera aplicación en la subcarpeta PlayBook.

Estructura Carpetas

En la carpeta de la aplicación creamos nuestra estructura con las carpetas para imágenes, iconos, javascript, css, etc… además de nuestro html principal de la aplicación y el archivo config.xml (https://bdsc.webapps.blackberry.com/html5/documentation/ww_getting_started/creating_an_app_1885567_11.html) de los que hablaremos en próximas entregas junto con el API (https://bdsc.webapps.blackberry.com/html5/api).

Después creamos el sitio web en Nginx en el archivo /conf/nginx.conf con el nombre del sitio web que queramos y la ruta a nuestra App:

server {
    listen  80;
    server_name  playbook.web;
    root   D:/APPs_BB/PlayBook/HolaEduardo;
    index  index.htm index.html;

}

y metemos en nuestro archivo hosts (C:\Windows\System32\drivers\etc\hosts) el nombre que le hayamos dado al sitio web:

127.0.0.1    playbook.web

Seguidamente arrancamos nuestro servidor web, para lo cual podemos hacer un archivo por lotes para que el proceso se limite a realizar doble clic sobre el mismo (he utilizado RunHiddenConsole que se puede descargar desde Internet):

@ECHO OFF
taskkill /f /IM nginx.exe

ECHO Iniciando Nginx...
RunHiddenConsole.exe C:\nginx\nginx.exe

EXIT

Y ya podemos probar nuestra App poniendo playbook.web en nuestro navegador y probar a activar la extensión Ripple y configurar nuestro dispositivo (PlayBook o Smartphone):

Hola Eduardo

Hola Astrit

Esta aplicación Hola Mundo!!! ;) es un simple html con un fondo y un poco de CSS para darle formato, queda para  las siguientes entradas la configuración de la máquina virtual con nuestro OS del PlayBook, la configuración de aplicaciones, iconos de la APP, Splash Window, código para crear menú nativo del PlayBook, comunicarnos con servidores externos, empaquetar nuestra APP, probarla en el simulador (antes utilizaba un archivo por lotes para estas tareas, ahora tenemos el BlackBerry Tablet OS Graphical Aid), en un PlayBook real, firmar nuestras aplicaciones, subirlas al App World y mucho más siempre que el tiempo lo vaya permitiendo.

No hay comentarios:

Publicar un comentario en la entrada