Share
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 de Yahoo YQL. Los gráficos de Raphael JS se utilizarán para presentar gráficamente la información de cotización de acciones, se usará Titanium Mobile para compilar de forma cruzada una aplicación iOS nativa, y las tablas de datos YQL realmente recuperarán la información de existencias.
YQL es un lenguaje similar a SQL que le permite consultar, filtrar y combinar datos de múltiples fuentes tanto en Yahoo! Red y otras fuentes de datos abiertas. Normalmente, el acceso de los desarrolladores a los datos de múltiples recursos es dispar y requiere llamadas a múltiples API de diferentes proveedores, a menudo con diferentes formatos de fuentes. YQL elimina este problema al proporcionar un único punto final para consultar y dar forma a los datos que solicita. En este tutorial, utilizaremos las tablas de datos abiertos YQL proporcionadas por Yahoo Finance para recuperar y presentar información de cotización de acciones..
Esta presentación de esta información es donde entran en juego los cuadros de Raphael JS. Los gráficos y gráficos son la forma más fácil y lógica de presentar una línea de tiempo de los datos financieros, y Titanium Mobile no viene con una API de gráficos nativos. Raphael es de código abierto y tiene licencia MIT, y, afortunadamente, es muy fácil de usar para dispositivos móviles porque está escrito en JavaScript estándar, mantiene una huella de procesamiento baja y, en realidad, se presenta en formato SVG, lo que significa que se puede redimensionar fácilmente para adaptarse a cualquier pantalla móvil una disminución en la calidad de la imagen!
Lo siguiente es una vista previa de la aplicación que construiremos en esta serie:
Abre Titanium Developer y crea un nuevo proyecto. Puede darle al proyecto el nombre que desee, pero usaré el título "StockQuotes" para simplificar. Ahora es un buen momento para descargar los archivos de origen para este proyecto también. Descargue y descomprima los archivos de proyecto adjuntos a esta publicación y copie la carpeta "imágenes" en el directorio "Recursos" de su nuevo proyecto de Titanium. Por defecto, Titanium también incluye dos archivos de iconos en la raíz de su directorio de "Recursos" llamado KS_nav_ui.png y KS_nav_views.png - No necesitamos tampoco, así que ve y mueve ambos a la basura.
Abra el archivo app.js, en la raíz de su directorio de "Recursos", en su editor favorito. No necesitamos ninguno del código generado automáticamente, así que elimínelo todo y reemplácelo con lo siguiente:
Accentsconagua
// Esto establece el color de fondo del master UIView Titanium.UI.setBackgroundColor ('# 000'); // Crea la ventana de la aplicación var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Cree la etiqueta del título para nuestra aplicación var titleLabel = Titanium.UI.createLabel (text: 'Search Quotes', color: '#fff', altura: 20, ancho: 320, arriba: 6, textAlign: 'center' , font: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold'); win1.add (titleLabel); // Crea el área de desplazamiento, todo nuestro contenido va aquí var scrollArea = Titanium.UI.createScrollView (top: 40, width: 320, height: 420, contentHeight: 'auto'); // Crear el cuadro de búsqueda de cotización de valores var searchBox = Titanium.UI.createView (width: 300, left: 10, top: 10, height: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png' ); scrollArea.add (searchBox); // Crea el cuadro de información de cotización var quoteInfoBox = Titanium.UI.createView (width: 300, left: 10, top: 70, height: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Crear el cuadro de gráfico de cotización var quoteChartBox = Titanium.UI.createView (width: 300, left: 10, top: 280, height: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Esta vista pequeña solo agrega 10px de relleno al fondo de // nuestra scrollview (scrollArea) var emptyView = Titanium.UI.createView (height: 10, top: 580); scrollArea.add (emptyView); // Agregar la vista de desplazamiento a la ventana win1.add (scrollArea); // Abrir la ventana win1.open (); Lo que hemos hecho anteriormente es crear un shell básico y bien diseñado 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 stock y nuestro gráfico. Todo esto se ha agregado a un ScrollView para que podamos desplazar fácilmente nuestra aplicación para ver cualquier información que esté oculta de los límites de la pantalla. Ejecute su aplicación en el emulador de iPhone y ahora debería verse como la imagen a continuación:
Nuestro siguiente paso es crear el campo de texto y el botón de búsqueda que el usuario utilizará para interactuar con nuestra aplicación al proporcionar un símbolo de cotización (por ejemplo, APPL para computadoras Apple) para buscar. Ingrese el siguiente código antes de la línea donde agregó su caja de búsqeda objetar al scrollArea (línea 39).
// Este es el campo de texto de entrada para nuestro código de stock var txtStockCode = Titanium.UI.createTextField (hintText: 'Código de stock, por ejemplo, APPL', borderWidth: 0, width: 200, left: 10, height: 30, font: fontSize: 14, fontColor: '# 262626', fontFamily: 'Helvetica', autocorrección: falsa, autocapitalización: Titanium.UI.TEXT_AUTOCAPITALIZATION_ALL); searchBox.add (txtStockCode); // Crea el botón de búsqueda desde nuestro search.png image var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', width: 80, height: 30, right: 10, borderRadius: 3); // Agregue el detector de eventos para este botón btnSearch.addEventListener ('clic', searchYQL); searchBox.add (btnSearch); Lo que hemos logrado anteriormente es crear los dos componentes de entrada necesarios para que el usuario ingrese datos (una cotización de acciones en este caso) y realizar una acción basada en esa entrada presionando el botón de búsqueda. Si no lo habías notado ya, nuestro btnSearch el objeto botón tiene un detector de eventos que se activará cuando el usuario lo toque y llame a una función llamada searchYQL. Si tuviera que ejecutar la aplicación en el emulador ahora, terminaría con una gran pantalla de error roja ya que aún no hemos creado esta función. Hagamos eso ahora.
Ingrese lo siguiente en la parte superior de su archivo app.js, después de Titanium.UI.setBackgroundColor línea:
// Esta función se llama en el botón de búsqueda, buscará en YQL nuestra función de datos de stock searchYQL ()
Si aún no lo has hecho, guarda tu app.js Archivo y ejecutarlo en el emulador. Debería ver una pantalla similar a la siguiente:
Ahora, antes de buscar en YQL para obtener información sobre nuestros stocks, necesitamos crear algunas etiquetas e imágenes que se incluirán en nuestros quoteInfoBox y presentar la información al usuario. Este es un proceso bastante sencillo. El siguiente código se debe colocar antes de agregar el quoteInfoBox al scrollArea en linea 93.
// Agregue las etiquetas e imágenes que necesitamos para mostrar información básica sobre el stock var lblCompanyName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366', font: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', texto: 'No hay ninguna compañía seleccionada'); quoteInfoBox.add (lblCompanyName); var lblDaysLow = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 50, color: '# 000', fuente: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', texto:' Días bajo: '); quoteInfoBox.add (lblDaysLow); var lblDaysHigh = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 80, color: '# 000', fuente: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', texto:' Days High: '); quoteInfoBox.add (lblDaysHigh); var lblLastOpen = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 110, color: '# 000', fuente: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', texto:' Último Abrir: '); quoteInfoBox.add (lblLastOpen); var lblLastClose = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 140, color: '# 000', fuente: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', texto:' Último cierre: '); quoteInfoBox.add (lblLastClose); var lblVolume = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 170, color: '# 000', fuente: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', texto:' Volumen: '); quoteInfoBox.add (lblVolume);
Una vez que haya agregado sus etiquetas y nuestra flecha de imagen de movimiento de stock, debería poder ejecutar el emulador y terminar con una pantalla como esta:
Ahora hagamos algo útil con este diseño y llenémoslo con datos de existencias de Yahoo! Para ello necesitamos expandir nuestro vacío. searchYQL () funciona y realiza una búsqueda en las tablas de datos financieros de Yahoo YQL utilizando una combinación de sintaxis YQL y Titanium Titanio.Yahoo.yql () método.
// Esta función se llama en el botón de búsqueda. Buscará en YQL nuestra función de datos de stock searchYQL () //. Realice alguna validación básica para garantizar que el usuario haya ingresado un valor de código de stock si (txtStockCode.value! = ") TxtStockCode.blur (); // oculta el teclado // Cree la cadena de consulta utilizando una combinación de sintaxis YQL y el valor del campo txtStockCode var query = 'select * from yahoo.finance.quotes donde symbol = "' + txtStockCode.value + '"'; // Execute the query y obtenga los resultados Titanium.Yahoo.yql (query, function (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid es nulo, entonces encontramos un stock válido if (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // ¡Tenemos algunos datos! Asignémoslo a nuestras etiquetas, etc. lblCompanyName.text = data.quote.Name; lblDaysLow.text = 'Days Low:' + data.quote.DaysLow; lblDaysHigh.text = 'Days High:' + data. quote.DaysHigh; lblLastOpen.text = 'Último abrir:' + data.quote.Open; lblLastClose.text = 'Último cierre:' + data.quote.PreviousClose; lblVolume.text = 'Volumen:' + data.quote.Volume; lblPercentChange.text = data.quote.PercentChange; // si el cierre anterior fue igual o mayor que el precio de apertura, // ¿la dirección del stock está subiendo? De lo contrario se fue abajo! if (data.quote.PreviousClose> = data.quote.Open) imgStockDirection.image = 'images / arrow-up.png'; else imgStockDirection.image = 'images / arrow-down.png'; else else // muestra un cuadro de diálogo de alerta que dice que no se pudo encontrar nada alerta ('No se pudo encontrar información de stock para' + txtStockCode.value + '!'); ); else alert ('Debe proporcionar un código de stock para buscar, por ejemplo, AAPL o YHOO'); Entonces, ¿qué está pasando aquí dentro de la searchYQL () ¿función? 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 difuminar() Método del campo de texto para asegurar que el teclado se oculte. La esencia del código gira en torno a la creación de una consulta Yahoo YQL usando 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 usando el símbolo + como lo haría con cualquier otra manipulación de cadenas en JavaScript. Luego ejecutamos nuestra consulta utilizando el Titanio.Yahoo.yql () Método, 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 común y rápido que se está haciendo omnipresente en la web y con todas las API principales. El uso de estos datos es una cuestión de simple notación de puntos. En nuestro código, primero verificamos la propiedad llamada data.quote.ErrorIndicationreturnedforsymbolchangedinvalid para asegurarse de que el símbolo que el usuario ingresó 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 se abrió, si es así, podemos establecer la imagen del movimiento de las acciones en una flecha verde "hacia arriba", lo que indica que aumentó en valor. Si se redujo su valor, podemos mover la imagen a una flecha roja "hacia abajo".
Ejecute el código en su emulador e ingrese un código, como AAPL. Debería obtener la siguiente pantalla con datos similares devueltos después de presionar el botón de búsqueda:
En el próximo tutorial de esta serie, que se publicará la próxima semana, lo 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 stock con YQL y, por supuesto, en realidad dibujando una representación gráfica en pantalla para el usuario! Asegúrese de suscribirse a través de RSS o Twitter si desea recibir una notificación cuando se publique la próxima publicación!
