7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Titanium Mobile

Construye una aplicación de cotización de acciones: Buscar datos de acciones con YQL

Scroll to top
Read Time: 10 mins
This post is part of a series called Make a Stock Quote App with Raphael JS, YQL, and Titanium Mobile.
Make a Stock Quote App: Displaying Charts with Raphael JS

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

En esta serie de tutoriales, te enseñaré cómo crear una aplicación de cotización de acciones con Raphael JS, Titanium Mobile y el servicio web YQL de Yahoo. Los gráficos Raphael JS se usarán para presentar gráficamente la información de cotización de acciones, Titanium Mobile se usará para compilar una aplicación nativa de iOS y las tablas de datos YQL recuperarán la información de acciones.

Introducción a Yahoo YQL y Raphael JS

YQL es un lenguaje similar a SQL que te permite consultar, filtrar y combinar datos de múltiples fuentes en Yahoo! red y otras fuentes de datos abiertas. Normalmente, el acceso de los desarrolladores a los datos de varios recursos es dispar y requiere llamadas a varias API de diferentes proveedores, a menudo con diferentes formatos de alimentación. YQL elimina este problema al proporcionar un único punto final para consultar y dar forma a los datos que solicitas. En este tutorial, usaremos las tablas de datos abiertos de YQL proporcionadas por Yahoo Finance para obtener y presentar información sobre cotizaciones bursátiles.

Esta presentación de esta información es donde entran los gráficos Raphael JS. Los gráficos son la forma más fácil y lógica de presentar una línea de tiempo de datos financieros, y Titanium Mobile no viene con una API de gráficos nativa. Raphael es de código abierto y tiene licencia del MIT, y afortunadamente es muy amigable para dispositivos móviles porque está escrito en JavaScript estándar, mantiene una huella de procesamiento baja y en realidad se procesa en formato SVG, lo que significa que se puede cambiar de tamaño fácilmente para adaptarse a cualquier pantalla móvil sin una disminución en la calidad de la imagen!

Vista previa final de la aplicación

La siguiente es una vista previa de la aplicación que crearemos en esta serie:

Paso 1: Crea un nuevo proyecto

Abre Titanium Developer y crea un nuevo proyecto. Puedes darle al proyecto el nombre que quieras, pero usaré el título "StockQuotes" para simplificar. Ahora es un buen momento para descargar también los archivos fuente para este proyecto. Descarga y descomprime los archivos del proyecto adjuntos a esta publicación y copia la carpeta "images" en el directorio "Resources" de tu nuevo proyecto Titanium. De forma predeterminada, Titanium también incluye dos archivos de iconos en la raíz de tu directorio "Resources" llamados KS_nav_ui.png y KS_nav_views.png; no los necesitamos, así que adelante y mueve ambos a la papelera.

Paso 2: Crear la interfaz básica

Abre el archivo app.js, en la raíz de tu directorio "Resources", en tu editor favorito. No necesitamos ninguno de los códigos generados automáticamente, así que elimínalo todo y reemplázalo con lo siguiente:

Lo que hemos hecho anteriormente es crear un shell básico con un estilo agradable para nuestra aplicación. Hay un espacio en la parte superior para crear un campo de búsqueda y dos casillas vacías más para colocar nuestra información de acciones y nuestro gráfico. Todo esto se ha agregado a ScrollView para que podamos desplazarnos fácilmente por nuestra aplicación para ver cualquier información que esté oculta en los límites de la pantalla. Ejecuta tu aplicación en el emulador de iPhone y ahora debería verse como la imagen a continuación:

Paso 3: Crear el campo de búsqueda

Nuestro siguiente paso es crear el campo de texto y el botón de búsqueda que el usuario usará para interactuar con nuestra aplicación proporcionando un símbolo de acciones (por ejemplo, APPL para computadoras Apple) para buscar. Ingresa el siguiente código antes de la línea donde agregaste tu objeto searchBox al scrollArea (línea 39).

Lo que logramos anteriormente es crear los dos componentes de entrada necesarios para que el usuario ingrese datos (una cotización de acciones en este caso) y para realizar una acción basada en esa entrada tocando el botón de búsqueda. Si aún no lo habías notado, nuestro objeto de botón btnSearch tiene un detector de eventos que se activará cada vez que el usuario lo toque y llame a una función llamada searchYQL. Si ejecutaras la aplicación en el emulador ahora, terminarías con una gran pantalla de error roja ya que aún no hemos creado esta función. Hagámoslo ahora.

Ingresa lo siguiente en la parte superior de tu archivo app.js, después de la línea Titanium.UI.setBackgroundColor:

Si aún no lo has hecho, guarda tu archivo app.js y ejecútalo en el emulador. Deberías ver una pantalla similar a la siguiente:

Paso 4: Búsqueda de cotizaciones de acciones con Yahoo YQL

Ahora, antes de buscar en YQL información sobre nuestras acciones, necesitamos crear algunas etiquetas e imágenes que irán a nuestro quoteInfoBox y presentarán la información al usuario. Este es un proceso bastante sencillo. El siguiente código debe colocarse antes de agregar quoteInfoBox al scrollArea en la línea 93.

Una vez que se hayan agregado tus etiquetas y nuestra flecha de imagen de movimiento de stock, deberías poder ejecutar el emulador y terminar con una pantalla como esta:

Ahora hagamos algo útil con este diseño y rellénalo con datos de stock de Yahoo!. Para hacer eso, necesitamos expandir nuestra función searchYQL() vacía y realizar una búsqueda en las tablas de datos financieros de Yahoo YQL usando una combinación de sintaxis YQL y el método Titanium.Yahoo.yql() de Titanium.

Entonces, ¿qué está sucediendo realmente aquí dentro de la función searchYQL()? Primero, estamos haciendo una validación muy básica en el campo de texto para asegurarnos de que el usuario haya ingresado una cotización de acciones antes de presionar buscar. Si se encuentra una cotización de acciones, usamos el método blur() del campo de texto para asegurarnos de que el teclado quede oculto. La esencia del código gira en torno a la creación de una consulta de Yahoo YQL utilizando la sintaxis correcta y proporcionando el valor del campo de texto como parámetro de símbolo. Esta consulta YQL es simplemente una cadena, unida con el símbolo + de la misma forma que lo harías con cualquier otra manipulación de cadenas en JavaScript. Luego ejecutamos nuestra consulta usando el método Titanium.Yahoo.yql(), que devuelve los resultados dentro del objeto 'e' de la función en línea.

Los datos dentro del objeto 'e' son simplemente JSON, un formato de datos rápido y común que se está volviendo ubicuo en la web y con todas las API principales. El uso de estos datos es una simple notación de puntos. En nuestro código, primero verificamos la propiedad llamada data.quote.ErrorIndicationreturnedforsymbolchangedinvalid para asegurarnos de que el símbolo que ingresó el usuario era un código de stock válido. Si es así, ¡podemos asignar todos los valores a nuestras etiquetas! Por último, verificamos si el precio de las acciones cerró más alto de lo que abrió, si es así, podemos establecer la imagen del movimiento de las acciones en una flecha verde "hacia arriba", lo que indica que su valor aumentó. Si bajó de valor, podemos mover la imagen a una flecha roja "hacia abajo".

Ejecuta el código en tu emulador e ingresa un código, como AAPL. Deberías obtener la siguiente pantalla con datos similares devueltos después de presionar el botón de búsqueda:

Para la próxima vez...

En el próximo tutorial de esta serie, que se publicará la próxima semana, te guiaré a través de la configuración de la biblioteca de gráficos Raphael JS, la configuración de una vista web para mostrar el gráfico, la recopilación de datos históricos de acciones con YQL y, por supuesto, realmente dibujar una representación gráfica en la pantalla para el usuario. ¡Asegúrate de suscribirte a través de RSS o Twitter si deseas recibir una notificación para la próxima publicación!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.