Construye una aplicación de cotización de acciones: Buscar datos de acciones con YQL

() translation by (you can also view the original English article)

En esta serie de tutoriales, te enseñaré cómo crear una aplicación de cotización de acciones con Raphael JS, Titanium Mobile y el servicio web YQL de Yahoo. Los gráficos Raphael JS se usarán para presentar gráficamente la información de cotización de acciones, Titanium Mobile se usará para compilar una aplicación nativa de iOS y las tablas de datos YQL recuperarán la información de acciones.

Introducción a Yahoo YQL y Raphael JS

YQL es un lenguaje similar a SQL que te permite consultar, filtrar y combinar datos de mú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 alimentación. YQL elimina este problema al proporcionar un ú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 información sobre cotizaciones bursátiles.

Esta presentación de esta información es donde entran los gráficos Raphael JS. Los gráficos son la forma más fácil y lógica de presentar una línea de tiempo de datos financieros, y Titanium Mobile no viene con una API de gráficos nativa. Raphael es de código abierto y tiene licencia del MIT, y afortunadamente es muy amigable para dispositivos móviles porque está escrito en JavaScript estándar, mantiene una huella de procesamiento baja y en realidad se procesa en formato SVG, lo que significa que se puede cambiar de tamaño fácilmente para adaptarse a cualquier pantalla móvil sin una disminución en la calidad de la imagen!

Vista previa final de la aplicación

La siguiente es una vista previa de la aplicació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 usaré el título "StockQuotes" para simplificar. Ahora es un buen momento para descargar también los archivos fuente para este proyecto. Descarga y descomprime los archivos del proyecto adjuntos a esta publicación y copia la carpeta "images" en el directorio "Resources" de tu nuevo proyecto Titanium. De forma predeterminada, Titanium también incluye dos archivos de iconos en la raíz de tu directorio "Resources" llamados KS_nav_ui.png y KS_nav_views.png; no los necesitamos, así que adelante y mueve ambos a la papelera.

Paso 2: Crear la interfaz básica

Abre el archivo app.js, en la raíz de tu directorio "Resources", en tu editor favorito. No necesitamos ninguno de los códigos generados automáticamente, así que elimínalo todo y reemplázalo con lo siguiente:

// This sets the background color of the master UIView
Titanium.UI.setBackgroundColor('#000');

// Create the application window
var win1 = Titanium.UI.createWindow({  
    backgroundImage: 'images/background.png'
});

// Create the title label for our app
var titleLabel = Titanium.UI.createLabel({
    text: 'Search Quotes',
    color: '#fff',
    height: 20,
    width: 320,
    top: 6,
    textAlign: 'center',
    font: {fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold'}
});
win1.add(titleLabel);

//Create the scroll area, all our content goes in here
var scrollArea = Titanium.UI.createScrollView({
    top: 40,
    width: 320,
    height: 420,
    contentHeight: 'auto'
});

// Create the stock quote search box
var searchBox = Titanium.UI.createView({
    width: 300,
    left: 10,
    top: 10,
    height: 50,
    borderRadius: 5,
    backgroundImage: 'images/gradient-small.png'
});

scrollArea.add(searchBox);

// Create the quote information box
var quoteInfoBox = Titanium.UI.createView({
    width: 300,
    left: 10,
    top: 70,
    height: 200,
    borderRadius: 5,
    backgroundImage: 'images/gradient.png'
});

scrollArea.add(quoteInfoBox);

// Create the quote chart box
var quoteChartBox = Titanium.UI.createView({
    width: 300,
    left: 10,
    top: 280,
    height: 300,
    borderRadius: 5,
    backgroundImage: 'images/gradient.png'
});

scrollArea.add(quoteChartBox);

// This small view just adds 10px of padding to the bottom of 
// our scrollview (scrollArea)
var emptyView = Titanium.UI.createView({
    height: 10,
    top: 580
});

scrollArea.add(emptyView);

// Add the scrollview to the window
win1.add(scrollArea);

// Open the window
win1.open();

Lo que hemos hecho anteriormente es crear un shell básico con un estilo agradable para nuestra aplicación. Hay un espacio en la parte superior para crear un campo de búsqueda y dos casillas vacías más para colocar nuestra información de acciones y nuestro gráfico. Todo esto se ha agregado a ScrollView para que podamos desplazarnos fácilmente por nuestra aplicación para ver cualquier información que esté oculta en los límites de la pantalla. Ejecuta tu aplicación en el emulador de iPhone y ahora debería verse como la imagen a continuación:

Paso 3: Crear el campo de búsqueda

Nuestro siguiente paso es crear el campo de texto y el botón de búsqueda que el usuario usará para interactuar con nuestra aplicación proporcionando un símbolo de acciones (por ejemplo, APPL para computadoras Apple) para buscar. Ingresa el siguiente código antes de la línea donde agregaste tu objeto searchBox al scrollArea (línea 39).

// This is the input textfield for our stock code
var txtStockCode = Titanium.UI.createTextField({
    hintText: 'Stock code, e.g. APPL',
    borderWidth: 0,
    width: 200,
    left: 10,
    height: 30,
    font: {fontSize: 14, fontColor: '#262626', fontFamily: 'Helvetica'},
    autoCorrect: false,
    autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_ALL
});

searchBox.add(txtStockCode);

// Create the search button from our search.png image
var btnSearch = Titanium.UI.createButton({  
    backgroundImage: 'images/search.png',
    width: 80,
    height: 30,
    right: 10,
    borderRadius: 3
});

// Add the event listener for this button
btnSearch.addEventListener('click', searchYQL);

searchBox.add(btnSearch);

Lo que logramos anteriormente es crear los dos componentes de entrada necesarios para que el usuario ingrese datos (una cotización de acciones en este caso) y para realizar una acción basada en esa entrada tocando el botón de búsqueda. Si aún no lo habías notado, nuestro objeto de botón btnSearch tiene un detector de eventos que se activará cada vez que el usuario lo toque y llame a una función llamada searchYQL. Si ejecutaras la aplicación en el emulador ahora, terminarías con una gran pantalla de error roja ya que aún no hemos creado esta función. Hagámoslo ahora.

Ingresa lo siguiente en la parte superior de tu archivo app.js, después de la línea Titanium.UI.setBackgroundColor:

1	// This function is called on search button tap, it will query YQL for our stock data
2	function searchYQL() {
3	}

Si aún no lo has hecho, guarda tu archivo app.js y ejecútalo en el emulador. Deberías ver una pantalla similar a la siguiente:

Paso 4: Búsqueda de cotizaciones de acciones con Yahoo YQL

Ahora, antes de buscar en YQL información sobre nuestras acciones, necesitamos crear algunas etiquetas e imágenes que irán a nuestro quoteInfoBox y presentarán la información al usuario. Este es un proceso bastante sencillo. El siguiente código debe colocarse antes de agregar quoteInfoBox al scrollArea en la línea 93.

// Add the labels and images we need to show some basic stock information
var lblCompanyName = Titanium.UI.createLabel({
    width: 280,
    height: 30,
    left: 10,
    top: 10,
    color: '#003366',
    font: {fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica'},
    text: 'No company selected'
});
quoteInfoBox.add(lblCompanyName);

var lblDaysLow = Titanium.UI.createLabel({
    width: 280,
    height: 20,
    left: 10,
    top: 50,
    color: '#000',
    font: {fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica'},
    text: 'Days Low: '
});

quoteInfoBox.add(lblDaysLow);

var lblDaysHigh = Titanium.UI.createLabel({
    width: 280,
    height: 20,
    left: 10,
    top: 80,
    color: '#000',
    font: {fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica'},
    text: 'Days High: '
});

quoteInfoBox.add(lblDaysHigh);

var lblLastOpen = Titanium.UI.createLabel({
    width: 280,
    height: 20,
    left: 10,
    top: 110,
    color: '#000',
    font: {fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica'},
    text: 'Last Open: '
});

quoteInfoBox.add(lblLastOpen);

var lblLastClose = Titanium.UI.createLabel({
    width: 280,
    height: 20,
    left: 10,
    top: 140,
    color: '#000',
    font: {fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica'},
    text: 'Last Close: '
});

quoteInfoBox.add(lblLastClose);

var lblVolume = Titanium.UI.createLabel({
    width: 280,
    height: 20,
    left: 10,
    top: 170,
    color: '#000',
    font: {fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica'},
    text: 'Volume: '
});

quoteInfoBox.add(lblVolume);

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

Ahora hagamos algo útil con este diseño y rellénalo con datos de stock de Yahoo!. Para hacer eso, necesitamos expandir nuestra función searchYQL() vacía y realizar una búsqueda en las tablas de datos financieros de Yahoo YQL usando una combinación de sintaxis YQL y el método Titanium.Yahoo.yql() de Titanium.

// This function is called on search button tap. It will query YQL for our stock data
function searchYQL() {

  // Do some basic validation to ensure the user has entered a stock code value
  if(txtStockCode.value != '') 
  {
    txtStockCode.blur(); //hides the keyboard
    
    // Create the query string using a combination of YQL syntax and the value of the txtStockCode field
    var query = 'select * from yahoo.finance.quotes where symbol = "' + txtStockCode.value + '"';
    
    // Execute the query and get the results
    Titanium.Yahoo.yql(query, function(e) {
        var data = e.data;
        
        // Iff ErrorIndicationreturnedforsymbolchangedinvalid is null then we found a valid stock
        if(data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) 
        {
            //we have some data! let's assign it to our labels etc
            lblCompanyName.text = data.quote.Name;
            lblDaysLow.text = 'Days Low: ' + data.quote.DaysLow;
            lblDaysHigh.text = 'Days High: ' + data.quote.DaysHigh;
            lblLastOpen.text = 'Last Open: ' + data.quote.Open;
            lblLastClose.text = 'Last Close: ' + data.quote.PreviousClose;   
            lblVolume.text = 'Volume: ' + data.quote.Volume;          
            lblPercentChange.text = data.quote.PercentChange;
            
            //if the previous close was equal or higher than the opening price, the 
            //stock direction is up... otherwise it went down!
            if(data.quote.PreviousClose >= data.quote.Open)  {
                imgStockDirection.image = 'images/arrow-up.png';
            }
            else  {
                imgStockDirection.image = 'images/arrow-down.png';
            }  
                                                                
        }
        else 
        {
            //show an alert dialog saying nothing could be found
            alert('No stock information could be found for ' + txtStockCode.value + '!');
        }
    });      
  } 
  else 
  {
    alert('You must provide a stock code to search upon, e.g. AAPL or YHOO');
  }
}

Entonces, ¿qué está sucediendo realmente aquí dentro de la función searchYQL()? Primero, estamos haciendo una validación muy básica en el campo de texto para asegurarnos de que el usuario haya ingresado una cotización de acciones antes de presionar buscar. Si se encuentra una cotización de acciones, usamos el método blur() del campo de texto para asegurarnos de que el teclado quede oculto. La esencia del código gira en torno a la creación de una consulta de Yahoo YQL utilizando la sintaxis correcta y proporcionando el valor del campo de texto como parámetro de símbolo. Esta consulta YQL es simplemente una cadena, unida con el símbolo + de la misma forma que lo harías con cualquier otra manipulación de cadenas en JavaScript. Luego ejecutamos nuestra consulta usando el método Titanium.Yahoo.yql(), que devuelve los resultados dentro del objeto 'e' de la función en línea.

Los datos dentro del objeto 'e' son simplemente JSON, un formato de datos rápido y común que se está volviendo ubicuo en la web y con todas las API principales. El uso de estos datos es una simple notación de puntos. En nuestro código, primero verificamos la propiedad llamada data.quote.ErrorIndicationreturnedforsymbolchangedinvalid para asegurarnos de que el símbolo que ingresó el usuario era un código de stock válido. Si es así, ¡podemos asignar todos los valores a nuestras etiquetas! Por último, verificamos si el precio de las acciones cerró más alto de lo que abrió, si es así, podemos establecer la imagen del movimiento de las acciones en una flecha verde "hacia arriba", lo que indica que su valor aumentó. Si bajó de valor, podemos mover la imagen a una flecha roja "hacia abajo".

Ejecuta el código en tu emulador e ingresa un código, como AAPL. Deberías obtener la siguiente pantalla con datos similares devueltos después de presionar el botón de búsqueda:

Para la próxima vez...

En el próximo tutorial de esta serie, que se publicará la próxima semana, te guiaré a través de la configuración de la biblioteca de gráficos Raphael JS, la configuración de una vista web para mostrar el gráfico, la recopilación de datos históricos de acciones con YQL y, por supuesto, realmente dibujar una representación gráfica en la pantalla para el usuario. ¡Asegúrate de suscribirte a través de RSS o Twitter si deseas recibir una notificación para la próxima publicación!