Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tizen SDK

Introducción al desarrollo de aplicaciones para relojes inteligentes con Tizen

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image
What You'll Be Creating

Convertirse en un desarrollador de aplicaciones para relojes inteligentes es una gran idea, pero ¿Qué tal si eres un desarrollador en HTML? ¿Podrás cumplir tu sueño sin cambiarte a una plataforma completamente diferente?¿Tendrás que abandonar tus habilidades en HTML y comenzar de nuevo? No te preocupes. Tizen viene a rescatarte.

Tizen es un sistema operativo de la familia Linux, apuntando a una gama de dispositivos desde teléfonos inteligentes a relojes inteligentes y muchos más. Mientras Tizen es un proyecto de la Fundación Linux, es guiado por la Asociación Tizen, cuyos miembros incluyen Samsung, Intel y otras compañías reconocidas en la industria de la tecnología.

En éste tutorial, te mostraré como instalar y configurar el Tizen SDK para dispositivos de la tecnología del vestir y desarrollar una aplicación para reloj inteligente con la IDE (Entorno de Desarrollo Integrado). Comencemos.

1.Instalando y Configurando el SDK (Kit de Desarrollo de Software)

Paso 1: ¿Tizen SDK o Tizen SDK for Wearable? (para dispositivos de la tecnología del vestir

Actualmente hay dos tipos de SDKs disponibles. Ya que éste tutorial es sobre desarrollar una aplicación para relojes inteligentes, lo que necesitas es Tizen SKD for Wearable.

Puedes descargarla desde el Sitio de Desarrolladores Tizen. Necesitas descargar un administrador de instalación apropiado que sea compatible con tu sistema operativo y la versión del mismo. Si prefieres una instalación offline a una online, necesitas descargar también una imagen SDK. Si tu sistema operativo es Windows 8 ó Windows 8.1, puedes descargar los archivos de instalación categorizados bajo Windows 7. Funcionarán bien en Windows 8 y 8.1.

Paso 2: Requisitos

Lee las instrucciones detalladas de Tizen sobre los requisitos de hardware y software que tu computadora debe cumplir.

Puedes instalar el SDK aún si tu computadora no reúne éstos requisitos de hardware. Sin embargo, si lo haces, el emulador del reloj inteligente estará lento, lo que resultará en un testeo deficiente de la aplicación . Visita la documentación para más detalles. Te explica como habilitar la Teconología de Virtualización (VT) en tu BIOS y la Prevención de Ejecución de Datos en Windows.

Paso 3: Instalando el SDK

  1. Ejecuta el administrador de instalación que descargaste. Éste es un archivo .exe con un nombre como tizen-wearable-sdk-2-2.159_wndows64.exe, dependiendo de tu sistema operativo y la versión del mismo.
  2. Haz click en Advanced (Avanzada) para ir a la próxima pantalla.
  3. En esa pantalla, marca el botón de imagen SDK y navega hasta el archivo zip que contiene la imagen SDK. Ten en cuenta que estoy asumiendo que prefieres una instalación offline y que ya has descargado la imagen SDK necesaria para tu máquina desarrolladora.
  4. Selecciona el archivo zip de la imagen SDK y da click en Open (Abrir) en el cuadro de diálogo.
  5. Aparecerá un mensaje de Extraer la Imagen SDK. Haz click en OK despues de finalizar la extracción.
  6. Haz click en Next (Siguiente) y aparecerá la ventana de Acuerdo de Licencia.
  7. Acepta el acuerdo y da click en Next (Siguiente).
  8. La ventana de configuración aparecerá. Recomiento dejar todas las casillas de verificación marcadas y da click en Next.
  9. Finalmente, cuando el administrador de instalación te pida por una ubicación para la instalación, especifícala al seleccionar una ruta y da click en Install (Instalar).
  10. Si ya has configurado tu BIOS correctamente, también se instalará automáticamente durante el proceso un Administrador de Ejecución Acelerada de Hardware de Intel (Intel HAXM).
  11. No olvides habilitar la Prevención de Ejecución de Datos si tu sistema operativo es Windows. Reanuda la instalación.

Si lo deseas, puedes instalar Intel HAXM separadamente. Una vez que la instalación se complete, reinicia tu computadora.

Paso 4: Configurando el IDE.

  1. Dirígete al directorio en el que instalaste el SDK y dirígete al subdirectorio del IDE. Ejecuta el archivo ejecutable llamado IDE.

  2. Despues de unos minutos, una ventana aparecerá pidiéndote una ubicación para el espacio de trabajo en el cuál se guardarán las aplicaciones que desarrolles. Especifica la ruta que quieras pra la ubiciación y da click en OK.Despues de la configuración, el IDE debería aparecer.

Paso 5: Características del IDE

En el panel izquierdo del IDE, hay dos ventanas, el Explorador de Proyectos y el Explorador de Conexión. El Explorador de Proyectos muestra los proyectos creados por el usuario. El Explorador de Conexión enlista los dispositivos conectados que actualmente están disponibles, instancias del emulador o dispositivos remotos.

Paso 6:Creando una Instancia del Emulador

  1. En el Explorador de Conexión, haz click en el ícono del Administrador del Emulador, el botón azul que se encuentra más a la izquierda.
  2. Haz click en Yes en la ventana del Control de Cuenta de Usuario que aparece. Ésto traerá la ventana del Administrador del Emulador.
  3. Haz click en Add New (Añadir Nuevo) y dale un nombre a la instancia del emulador.
  4. Cuando hagas click en Confirm (Confimar), la nueva instancia del emulador será creada. Haz click en el botón azul con una flecha en el ícono del emulador para lanzar el emulador.

Tomará varios minutos lanzar el emulador. Deberías ver una ventana con una pantalla de inicio similar a la imagen de abajo cuando está ejecutándose. La instancia del emulador debería aparecer como una entrada en el Explorador de Conexión.

Desplázate hacia arriba desde el punto central inferior de la pantalla de inicio para ir a la pantalla que muestra las aplicaciones instaladas en el dispositivo o emulador. Ya que no has instalado ninguna aplicación aún, solamente se mostrará el icono de Settings.

Puedes regresar a la pantalla anterior o salirte de una aplicación al desplazarte hacia abajo desde el centro de la parte superior de la pantalla.

2. Desarrollando una Tira Cómica sencilla.

En éste ejemplo, vamos a crear una sencilla aplicación para mostrar una tira cómica. Observemos cada paso.

Paso 1: Crear un Nuevo Proyecto

Vamos a crear un nuevo proyecto en la IDE.

  1. Ve a File>New>Tizen Wearable Web Proyect.
  2. En la ventana que aparece, selecciona Basic>Basic application y en Project Name (Nombre del Proyecto) escribe myapp.
  3. Marca la ubicación predeterminada en la casilla de verificación ó navega hasta una ubicación diferente donde quieras guardarlo, y haz click en Finish.
  4. Tu nuevo proyecto, myapp, debería aparecer en el Explorador de Proyectos.
  5. Haz click en la pequeña flecha a la izquierda de myapp para expandir la estructura del proyecto.
  6. Deberías ver un archivo index.html, un subdirectorio css, un subdirectorio js, y otros archivos y carpetas.

HTML, CSS y Javascript constituyen la base para programar en la plataforma Tizen. Si eres un talentoso de HTML, entonces no tienes que aprender un nuevo lenguaje de programación para escribir aplicaciones para la plataforma Tizen. Puedes utilizar tus habilidades en HTML, CSS y Javascript.

Paso 2: Añadiendo Archivos, Recursos y más material

Primero necesitamos añadir dos subdirectorios al proyecto myapp, cómics e imágenes. Para hacer esto, haz click derecho en el directorio del proyecto myapp en el IDE y selecciona New>Folder (Nuevo Directorio). Los subdirectorios deberían aparecer en el directorio expandido de myapp en el IDE.

Descarga los archivos fuente para este proyecto de Github y navega hasta el subdirectorio de imágenes, que contiene varios archivos png. Copia los archivos png al subdirectorio de imágenes que creaste hace un momento.

Puedes pegar archivos al subdirectorio de imágenes en la ventana del Explorador de Proyectos al dar click derecho en el subdirectorio y seleccionar Pegar del menú emergente.

Luego, crea nueve archivos HTML con los siguientes nombres en el subdirectorio comic al dar click derecho en el subdirectorio comic y selecciona Nuevo>Archivo. Asegúrate de incluir la extensión .html para los archivos.

  • page1.html
  • page2.html
  • ...
  • page9.html

Deberías tener ahora nueve archivos HTML en el subdirectorio comic.

Paso 3: Añadiendo Código

Editemos ahora el código en index.html. Éste archivo es el punto de entrada a tu aplicación. Haz doble clic en index.html para abrir el archivo en el IDE. Cambia el contenido del elemento <title> a <title>2nd Race</title>. Después, cambia el contenido del elemento

con lo siguiente:
1
   <body>
2
        <div>
3
            <div><img src="images/coverpage.png" alt="Cover Page" /></div>
4
            <div><a href="#"  class="btn" >&lt;&lt;</a><a href="comic/page1.html"
5
            class="btn"  >&gt;&gt;</a></div>
6
        </div>
7
   </body>

Todo lo que hicimos, fue añadir una imagen a la página y dos botones para navegar a las otras páginas ya que nuestro cómic tendrá diez páginas. Una vez que hayas hecho éstos cambios, guarda el archivo seleccionando Archivo>Guardar del menú.

Si eres nuevo en HTML y CSS, Tuts+ tiene una basta colección de excelentes tutoriales que te ayudarán rápidamente a conocer los fundamentos del desarrollo web.

Posteriormente, haz doble click en style.css en el subdirectorio css y cambia su contenido como se muestra abajo.

Le hemos aplicado algo de estilo al body, imágenes y a los menús de navegación. Una vez que hayas efectuado los cambios, guarda el archivo.

Similarmente, añade código a todos los otros archivos HTML que has creado. El archivo style.css en el subdirectorio css deber ser vinculado externamente a todos éstos archivos HTML. Si no estás seguro de éste paso, entonces descarga los archivos fuente de Github y examina la fuente para que lo tengas más claro.

Paso 4: Probando la Aplicación

Para probar tu aplicación, selecciona el directorio del proyecto myapp, y desde el menú, elige Project>Build Project para construir el proyecto. Asegúrate de que la instancia del emulador esté activa.

Haz click derecho en el directorio myapp y selecciona Run As>Tizen Wereable Web Application para ejecutar el proyecto en el emulador. Utiliza los botones de flechas en la interfaz de usuario para navegar a la página siguiente o previa. Desplázate hacia abajo desde la parte superior de la pantalla para salir de la aplicación.

Conclusión

En éste tutorial, creamos una sencilla aplicación de comic con Tizen SDK para dispositivos de tecnología del vestir y la ejecutamos en el emulador de reloj inteligente que viene incluido en el IDE. La verdadera diversión comienza cuando estás listo para instalarla y ejecutarla en un dispositivo físico.

Puedes encontrar mucha información adicional en los sitios de internet de Samsung y Tizen Developers. ¿Qué estás esperando?

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.