Con el sugerente nombre de TizenCup comienzo una nueva serie de entradas, cuyo objetivo es el ir viendo cómo desarrollar para Tizen OS. Por tanto, hoy nos vamos a dejar de vídeos y comentarios y nos remangamos para comenzar a codificar. En esta primera entrada de TizenCup nos centramos en explicar brevemente cómo funciona el Tizen IDE y de los tipos de proyectos que hay disponibles y veremos un pequeño ejemplo para introducir las herramientas básicas de desarrollo, herramientas que en posteriores entradas iremos viendo más detenidamente.
Por tanto, lo primero que hacemos es abrir el entorno, que se va a convertir en nuestro fiel compañero de viaje. Tizen IDE está basado en Eclipse, y si estáis familiarizado con esta herramienta, no tendréis demasiados problemas para crear nuevos proyectos y ejecutarlos, ya que el funcionamiento es análogo al que se sigue cuando desarrollamos para otro lenguaje (y si hay alguien que no lo conoce, no preocuparse, que iré explicando que voy haciendo)
Lo dicho abrimos Tizen IDE nos aparece la pantalla de bienvenida…
.. y seguidamente le tenemos que decir donde queremos poner nuestro espacio de trabajo (el workspace en nomenclatura Eclipse) que es en donde iremos guardando todos los proyectos que vamos a ir creando, y que yo por defecto he llamado “workspaceTizen” pero poner el nombre que os dé la gana.
La apariencia cuando se abre el IDE es muy parecida a la que tiene una versión estándar de Eclipse y a simple vista no hay nada que resulte especialmente llamativo (tal vez la ayuda y la barra de título con la descripción de Tizen IDE).
Preferencias para Tizen IDE
Antes de continuar vamos a echar un vistazo a la siguiente opción de menú “Windows >> Preferences”:
Esta opción nos lleva a las preferencias del IDE, aquí hay una entrada denominada “Tizen SDK” en donde se configura la ruta en donde está instalado el SDK así como las preferencias Web que queramos utilizar y que de momento vamos a dejar tal y como están.
Crear un nuevo proyecto
Para crear un nuevo proyecto lo haríamos desde la opción “File >> New >> Tizen Web Project”:
Accediendo al asistente de creación de proyectos de Tizen:
El asistente es muy simple y bastante auto explicativo. Los proyectos se crean haciendo uso de una de las plantillas que vienen instaladas, siendo las más interesantes para nosotros ahora mismo, las que se alojan en la opción “Template” y “Sample”. La “User Template” hace referencia a plantillas definidas por el usuario y de momento no nos interesa demasiado, es más, si pulsáis en “User Template” veréis que nos lleva a la plantilla “Basic” que hay en “Template”.
Las plantillas que podemos usar son las siguientes:
- En Template: Se corresponde con los tipos de aplicaciones que se pueden realizar desde Tizen IDE. Hay cinco grupos de plantillas:
- Basic: Es la plantilla básica, desde ella se crea un proyecto en blanco sin ningún elemento adicional.
- Tizen Web UI Framework: La usaremos para crear aplicaciones basadas en formularios. Se divide a su vez en cuatro tipos:
- Single-Page Application: Una aplicación que consta de una única página.
- Multi-Page Application: Para aplicaciones que hacen uso de más de una página
- Master-Detail Application: Lo usaremos para aplicaciones maestro-detalle
- Navigation Application: Aplicaciones de navegación
- jQuery Mobile: La usaremos para crear aplicaciones de una única página basadas en jQuery Mobile.
- HTML5 Boilerplate: Nos permite crear aplicaciones basadas en HTML5, aquí se integra conHTML5 BoilerPlate que es una manera de ponernos a trabajar con HTML5 de un modo muy rápido y del que ya os hablaré largo y tendido.
- Web Presentation : Para crear presentaciones web de un modo muy sencillo gracias a lasplantillas de CoderDeck
- En Sample: Contiene cuatro aplicaciones de ejemplo para mostrar las capacidades del entorno y que son:
- Kitchen Sink: Es un popurrí de ejemplos de uso del API
- Systeminfo: Aplicación que muestra información del sistema haciendo uso del elemento Systeminfo de Tizen OS.
- Contact: La típica aplicación de contactos.
- FileSystem: Igual que la plantilla “Contact” es el ejemplo estándar de acceso al sistema de ficheros.
Todos proyecto Tizen, cuando se genera y se lleva al terminal para su ejecución hay que verlo como una aplicación web en su conjunto, es decir, como un todo cohesionado de elementos HTML5, JavaScript y CSS que se instalan en el dispositivo y que funcionan como una aplicación completa, es decir, como un widget que no necesariamente tiene porque tener necesidad de acceder a recursos externos y que puede auto contener todo lo que necesita para su ejecución.
Configuraciones
Independientemente del tipo de proyecto que vayamos a utilizar, una vez que lo tengamos montado tendremos que ponerlo en marcha sobre un emulador, y para ayudarnos en este proceso tenemos lo que se denominan como configuraciones. Las configuraciones se definen de manera independiente según el modo de ejecución en el que vayamos a probar la aplicación, de este modo, podemos tener configuraciones para el modo depuración y configuraciones para el modo de ejecución normal. La ejecución en modo depuración permite que podamos ejecutar el código paso a paso, poner puntos de ruptura, inspeccionar variables…, en definitiva todo lo que hacemos en un proceso de depuración típico y que no está disponible cuando ejecutamos la aplicación en el modo de ejecución normal.
El modo de definir una configuración es muy sencillo:
- Configuración Modo Depuración: Dos formas:
- Desde la opción “Run >> Run Configurations…”
- Desplegando la opción desde el botón de ejecución
- Configuración Modo Ejecución Normal: Dos formas:
- Desde la opción “Run >> Debug Configurations…”
- Desplegando la opción desde el botón de depuración
En ambos casos, se abre el cuadro de diálogo correspondiente al editor de configuraciones:
Hay una diferencia en este cuadro de diálogo según si estamos o no creando una configuración de depuración y una normal. En el caso del modo depuración, solamente podremos crear configuraciones del tipo “Tizen Web Application” mientras que en la de ejecución normal también podremos crear configuraciones del tipo “Tizen Web Simulator”. La diferencia entre una y otra radica en que en la primera tendremos que hacer uso del Emulator Manager y crear una instancia del emulador para poder hacer las pruebas de la aplicación, estando ante un entorno más real (y a la vez más pesado en cuanto a recursos) en donde hacer nuestras pruebas y en la segunda todo se realiza desde un navegador que simula el comportamiento del terminal (el Web Simulator
Crear la configuración es muy fácil, nos ponemos sobre una de las dos opciones (“Tizen Web Application” o “Tizen Web Simulator”) y pulsamos al botón de nueva configuración, le ponemos un nombre y aceptamos, sin olvidar poner en “Project” el proyecto que deseamos ejecutar sobre la configuración.
Manos a la obra
Para ver todo esto en funcionamiento vamos a crear una aplicación de ejemplo, y para ello usaremos la plantilla de aplicación de contactos.
- Paso 1: “File >> New >> Tizen Web Project
- Paso 2: Seleccionamos “Sample” y el proyecto “Contact” y le ponemos el nombre “ContactTestProject”, y pulsamos sobre el botón “Finish”
Al finalizar la ejecución del asistente, se nos crea toda la estructura de directorios y ficheros del proyecto, y que en esta entrada no voy a entretenerme en explicar, lo iremos viendo según vayamos creando proyectos en siguientes post.
- Paso 3: Si no hemos creado una configuración antes, ahora es el momento de hacerlo tal y como explicamos anteriormente. Para que veamos las diferencias usamos el modo de ejecución normal y creamos dos configuraciones para “Tizen Web Application” y “Tizen Web Simulator” a las cuales ponemos los nombres “Tizen Web Application Configuration” y “Tizen Web Simulator Configuration” respectivamente.
- Paso 4: Ejecutamos la aplicación. Y como hemos definido dos configuraciones para la ejecución vamos a ver qué sucede en cada una de ellas
Ejecución como “Tizen Web Simulator”
Este tipo de ejecución yo lo llamaría ligera, ya que la forma en la cual vamos a ver en funcionamiento la aplicación no requiere más que de un navegador para funcionar. En este navegador se realiza la ejecución de la aplicación como si de una página web estándar se tratase (al fin y al cabo estamos trabajando con componentes web ¿no?), la pantalla se divide en dos zonas, la de la izquierda en donde tenemos acceso a las capacidades del teléfono (orientación de la pantalla, acelerómetro, geolocalización, duración de la batería, mensajería, llamadas…) y la de la derecha en donde tenemos una simulación de la aplicación sobre el terminal.
Según cambiamos los parámetros de ejecución en la zona de la izquierda, podemos comprobar cómo se comporta la aplicación al momento en la zona de la derecha.
Ejecución como “Tizen Web Application”
Hay una ventana de la que no hemos hablado hasta ahora, pero que aparece al arrancar el entorno de trabajo y que se denomina “Connection Explorer”. Esta utilidad es el puente de unión con el Emulator Manager y permite arrancar cualquiera de los terminales que hayamos definido allí.
Si pulsáis en el botón del Emulator Manager éste nos aparecerá en pantalla. En nuestro caso tenemos definido un emulador con una resolución de 480 x 800 y 512 Mb de RAM, pero podéis crear vosotros otro con las características que necesitéis.
Ahora lo arrancamos seleccionándolo y pulsando sobre el botón “Launch” y veremos un cambio importante en el “Connection Explorer” que ahora tiene este aspecto:
Es decir, estamos conectados al terminal definido y estamos viendo toda su estructura de carpetas.
Daros cuenta que estos pasos son previos y necesarios para poder realizar las pruebas en este modo de trabajo, ya que si no lo hacemos así cuando intentemos arrancar la aplicación nos dirá que no tenemos entorno para hacerlo. Si todo fue bien ahora tendremos la aplicación en marcha:
Y nada más…
… creo que por hoy ya hemos hecho mucho trabajo y aprendido un montón de cosas, así que os dejo para que continuéis haciendo vuestras pruebas. En próximas entradas veremos cómo trabajar con el resto de proyectos, analizaremos las propiedades que se definen en ellos, y la estructura de carpetas y ficheros que tenemos que conocer para crear nuestras aplicaciones y volveremos sobre cada una de las herramientas que hemos ido viendo aquí para darles una vuelta de tuerca y conocerlas a fondo.
Nos vemos!