Share
I den här tutorialserien ska jag lära dig hur man bygger en aktiekursapplikation med Raphael JS, Titanium Mobile och Yahoos YQL webbtjänst. Raphael JS-diagrammen kommer att användas för att grafiskt presentera aktiekursinformationen, Titanium Mobile kommer att användas för att korsa kompilera en inbyggd iOS-app och YQL datatabeller kommer faktiskt att hämta aktieinformationen.
YQL är ett SQL-liknande språk som låter dig fråga, filtrera och kombinera data från flera källor över både Yahoo! nätverk och andra öppna datakällor. Normalt är utvecklarens tillgång till data från flera resurser olik och kräver samtal till flera API-er från olika leverantörer, ofta med varierande matningsformat. YQL eliminerar detta problem genom att tillhandahålla en enda ändpunkt för att fråga och forma de data du begär. I den här handledningen använder vi YQLs öppna datatabeller från Yahoo Finance för att hämta och presentera aktiekurserinformation.
Denna presentation av denna information är där Raphael JS-diagrammen kommer in. Diagram och diagram är det enklaste och mest logiska sättet att presentera en tidslinje med finansiella data, och Titanium Mobile kommer inte med ett inbyggt kartläggnings API. Raphael är öppen källkod och MIT licensierad, och det är lyckligtvis väldigt mobilvänlig eftersom den är skriven i standard JavaScript, upprätthåller ett lågt bearbetningspotential, och gör faktiskt i SVG-format vilket innebär att det enkelt kan ändras så att det passar alla mobila skärmar utan en minskning av bildkvaliteten!
Nedan följer en förhandsgranskning av den ansökan vi kommer att bygga i denna serie:
Öppna Titanium Developer och skapa ett nytt projekt. Du kan ge projektet något namn du vill, men jag använder titeln "StockQuotes" för enkelhet. Nu är det bra att ladda ner källfilerna för det här projektet. Hämta och lossa de projektfiler som är kopplade till det här inlägget och kopiera mappen "bilder" till "Resources" -katalogen i ditt nya Titanium-projekt. Titanium innehåller som standard två ikonfiler i roten till din "Resurser" -katalog som heter KS_nav_ui.png och KS_nav_views.png - Vi behöver inte heller så fortsätt och flytta båda dessa till papperskorgen.
Öppna app.js-filen, i roten till din "Resurser" -katalog, till din favoritredigerare. Vi behöver inte någon av den automatiskt genererade koden, så ta bort allt och ersätt det med följande:
Accentsconagua
// Detta ställer bakgrundsfärgen på master UIView Titanium.UI.setBackgroundColor ('# 000'); // Skapa applikationsfönstret var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Skapa titel etiketten för vår app var titleLabel = Titanium.UI.createLabel (text: 'Sök citat', färg: '#fff', höjd: 20, bredd: 320, topp: 6, textAlign: 'center' , typsnitt: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold')); win1.add (titleLabel); // Skapa rullningsområdet, hela vårt innehåll går in här var scrollArea = Titanium.UI.createScrollView (topp: 40, bredd: 320, höjd: 420, contentHeight: 'auto'); // Skapa aktiekursen sökrutan var searchBox = Titanium.UI.createView (bredd: 300, vänster: 10, topp: 10, höjd: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png' ); scrollArea.add (Sökruta); // Skapa offertfältet var quoteInfoBox = Titanium.UI.createView (bredd: 300, vänster: 10, topp: 70, höjd: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Skapa citatdiagramrutan var quoteChartBox = Titanium.UI.createView (bredd: 300, vänster: 10, topp: 280, höjd: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Denna lilla vy lägger bara till 10px av vaddering till botten av // vår scrollview (scrollArea) var emptyView = Titanium.UI.createView (höjd: 10, topp: 580); scrollArea.add (emptyView); // Lägg till rullrutan till fönstret win1.add (scrollArea); // Öppna fönstret win1.open (); Vad vi har gjort ovan skapar ett grundläggande, snyggt stylat skal för vår applikation. Det finns ett utrymme högst upp för att skapa ett sökfält och ytterligare två tomma lådor för att placera vår aktieinformation och vårt diagram. Allt detta har lagts till i ScrollView så att vi enkelt kan bläddra i vår app för att visa information som är dold från skärmens gränser. Kör din app i iPhone-emulatorn och den ska nu se ut som bilden nedan:
Vårt nästa steg är att skapa textfältet och sökknappen som användaren kommer att använda för att interagera med vår ansökan genom att tillhandahålla en stock symbol (t.ex. APPL for Apple Computers) att söka på. Skriv in följande kod före raden där du lagt till sökruta protestera mot scrollArea (rad 39).
// Detta är inmatningsfältet för vår varukod var txtStockCode = Titanium.UI.createTextField (hintText: 'Aktiekod, t.ex. 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); // Skapa sökknappen från vår search.png bild var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', bredd: 80, höjd: 30, höger: 10, borderRadius: 3); // Lägg till händelse lyssnaren för den här knappen btnSearch.addEventListener ('click', searchYQL); searchBox.add (btnSearch); Vad vi åstadkommit ovan är att skapa de två ingående komponenterna som är nödvändiga för att användaren ska kunna mata in data (ett aktiekurs i detta fall) och att utföra en åtgärd baserad på den inmatningen genom att trycka på sökknappen. Om du inte hade märkt redan, vår btnSearch knappobjekt har en händelseloggare som kommer att elda när användaren hinner det och kallar en funktion som heter searchYQL. Om du skulle köra appen i emulatorn nu skulle du sluta med en stor röd felskärm eftersom vi inte har skapat den här funktionen ännu. Låt oss göra det nu.
Skriv in följande längst upp i din app.js-fil, efter Titanium.UI.setBackgroundColor linje:
// Den här funktionen kallas på sökknappen, den kommer att fråga YQL för vår lagdatafunktion searchYQL ()
Om du inte redan har gjort det, spara din app.js fil och kör det i emulatorn. Du bör se en skärm som liknar den nedan:
Nu, innan vi söker YQL för information om våra lager, behöver vi skapa några etiketter och bilder som går in i vårt quoteInfoBox och presentera informationen för användaren. Detta är en ganska framåtriktad process. Följande kod ska placeras innan du lägger till quoteInfoBox till scrollArea på rad 93.
// Lägg till etiketter och bilder som vi behöver för att visa grundläggande lagerinformation var lblCompanyName = Titanium.UI.createLabel (bredd: 280, höjd: 30, vänster: 10, topp: 10, färg: '# 003366', typsnitt: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', text: 'Inget företag valt'); quoteInfoBox.add (lblCompanyName); var lblDaysLow = Titanium.UI.createLabel (bredd: 280, höjd: 20, vänster: 10, topp: 50, färg: '# 000', typsnitt: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', text:' Days Low: '); quoteInfoBox.add (lblDaysLow); var lblDaysHigh = Titanium.UI.createLabel (bredd: 280, höjd: 20, vänster: 10, topp: 80, färg: '# 000', typsnitt: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', text:' Höga dagar: '); quoteInfoBox.add (lblDaysHigh); var lblLastOpen = Titanium.UI.createLabel (bredd: 280, höjd: 20, vänster: 10, topp: 110, färg: '# 000', typsnitt: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', text:' Senast öppet: '); quoteInfoBox.add (lblLastOpen); var lblLastClose = Titanium.UI.createLabel (bredd: 280, höjd: 20, vänster: 10, topp: 140, färg: '# 000', typsnitt: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', text:' Senaste stänga: '); quoteInfoBox.add (lblLastClose); var lblVolume = Titanium.UI.createLabel (bredd: 280, höjd: 20, vänster: 10, topp: 170, färg: '# 000', typsnitt: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', text:' Volym: '); quoteInfoBox.add (lblVolume);
När dina etiketter och vår bildrörs bildpil har lagts till, borde du kunna köra emulatorn och sluta med en skärm som den här:
Nu ska vi göra något användbart med denna layout och fylla den med lagerdata från Yahoo! För att göra det måste vi expandera våra tomma searchYQL () funktion och utföra en sökning mot Yahoo YQL finansdatatabellerna med hjälp av en kombination av YQL-syntax och Titans Titanium.Yahoo.yql () metod.
// Den här funktionen kallas på sökknappen. Det kommer att fråga YQL för vår lagdatafunktion searchYQL () // Gör någon grundläggande validering för att säkerställa att användaren har skrivit in en lagerkods värde om (txtStockCode.value! = ") TxtStockCode.blur (); // gömmer tangentbordet // Skapa frågesträngen med en kombination av YQL-syntaxen och värdet på txtStockCode-fältet var query = 'välj * från yahoo.finance.quotes where symbol = "' + txtStockCode.value + '"; // Utför frågan och få resultaten Titanium.Yahoo.yql (fråga, funktion (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid är null då vi hittade ett giltigt lager om (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // Vi har några data! Låt oss tilldela det till våra etiketter etc lblCompanyName.text = data.quote.Name; lblDaysLow.text = 'Days Low:' + data.quote.DaysLow; lblDaysHigh.text = 'Högsta dagar:' + data. quote.DaysHigh; lblLastOpen.text = 'Senaste Öppna:' + data.quote.Open; lblLastClose.text = 'Senaste stäng:' + data.quote.PreviousClose; lblVolume.text = 'Volym:' + data.quote.Volume; lblPercentChange.text = data.quote.PercentChange; // Om föregående stängning var lika med eller högre än öppningspriset, är // lagerriktningen upp? annars gick det ner! om (data.quote.PreviousClose> = data.quote.Open) imgStockDirection.image = 'images / arrow-up.png'; else imgStockDirection.image = 'images / arrow-down.png'; else // visa en varningsdialog som säger att ingenting kunde hittas varning ('Ingen aktieinformation kunde hittas för' + txtStockCode.value + '!'); ); annars alert ('Du måste ange en lagerkod att söka på, t ex AAPL eller YHOO'); Så, vad händer faktiskt här inom searchYQL () fungera? Först gör vi en väldigt grundläggande validering i textfältet för att säkerställa att användaren har skrivit in en aktiekurs innan du trycker på sökning. Om en aktiekurs noteras, använder vi fläck() Metod i textfältet för att säkerställa att tangentbordet blir dolt. Köttet i koden kretsar kring att skapa en Yahoo YQL-fråga med rätt syntax och ger textfältvärdet som symbolparametern. Denna YQL-fråga är helt enkelt en sträng, som sammanfogas med + -symbolen mycket som du skulle göra med någon annan strängmanipulation i JavaScript. Vi utför sedan vår fråga med Titanium.Yahoo.yql () metod som returnerar resultaten inom inline-funktionens "e" -objekt.
Data inom "e" -objektet är helt enkelt JSON, ett gemensamt, snabbt dataformat som snabbt blir allestädes närvarande på webben och med alla större API-er. Att använda dessa data är en fråga om enkel punktnotering. I vår kod kontrollerar vi först egenskapen som heter data.quote.ErrorIndicationreturnedforsymbolchangedinvalid för att säkerställa att symbolen som användaren angav var en giltig lagerkod. Om det är så kan vi sedan tilldela alla värden till våra etiketter! Slutligen gör vi en kontroll för att se huruvida aktiekursen stängde högre än den öppnade. Om så är fallet kan vi ställa in aktiebehandlingsbilden till en grön "upp" pil, vilket indikerar att det steg i värde. Om det föll i värde kan vi flytta bilden till en röd, "ner" pil.
Kör koden i din emulator och skriv in en kod, till exempel AAPL. Du ska få följande skärm med liknande data som returneras efter att du tryckt på sökknappen:
I nästa handledning i den här serien, som kommer att publiceras nästa vecka, går jag igenom dig genom att konfigurera Raphael JS-kartläggningsbiblioteket, ställa in en webbvy för att visa diagrammet, samla historiska lagerdata med YQL och, naturligtvis, faktiskt ritar en grafisk representation på skärmen för användaren! Var noga med att prenumerera via RSS eller Twitter om du vill bli underrättad när nästa post släpps!
