Share
În această serie de tutori, vă voi învăța cum să construiți o aplicație de cotare la bursă cu serviciul web YQL de la Raphael JS, Titanium Mobile și Yahoo. Graficele Raphael JS vor fi utilizate pentru a prezenta grafic informațiile despre cotațiile acțiunilor, Titanium Mobile va fi folosit pentru a compila o aplicație nativă iOS, iar tabelele de date YQL vor prelua efectiv informațiile despre stoc.
YQL este un limbaj asemănător cu SQL care vă permite să interogați, să filtrați și să combinați date din mai multe surse în ambele domenii Yahoo! rețea și alte surse de date deschise. În mod normal, accesul dezvoltatorului la datele de la mai multe resurse este disparat și necesită apeluri către mai multe API-uri de la diferiți furnizori, adesea cu diferite formate de feed. YQL elimină această problemă oferind un singur punct final pentru interogarea și modelarea datelor pe care le solicitați. În acest tutorial, vom folosi tabelele de date deschise YQL furnizate de Yahoo Finance pentru a prelua și a prezenta informații despre cotațiile acțiunilor.
Această prezentare a acestor informații este locul în care intră graficele Raphael JS. Graficele și graficele reprezintă cea mai simplă și cea mai logică modalitate de a prezenta o cronologie a datelor financiare, iar Titanium mobile nu vine cu un API nativ charting. Raphael este licențiat în sistem open-source și licențiat de MIT și din fericire este foarte prietenos pentru mobil, deoarece este scris în JavaScript standard, menține o amprentă redusă de procesare și de fapt redă în format SVG ceea ce înseamnă că poate fi redimensionat ușor pentru a se potrivi oricărui ecran mobil fără o scădere a calității imaginii!
Următoarea este o previzualizare a aplicației pe care o vom construi în această serie:
Deschideți Titanium Developer și creați un nou proiect. Puteți oferi proiectului orice nume doriți, dar pentru simplitate voi folosi titlul "StockQuotes". Acum este un moment bun pentru a descărca fișierele sursă pentru acest proiect, de asemenea. Descărcați și dezarhivați fișierele de proiect atașate la această postare și copiați dosarul "imagini" în directorul "Resurse" al noului dvs. proiect Titanium. În mod implicit, Titanium include și două fișiere icoane din rădăcina directorului "Resurse" numit KS_nav_ui.png și KS_nav_views.png - nu avem nevoie de așa ceva și să ne mișcăm pe amândoi în gunoi.
Deschideți fișierul app.js, în rădăcina directorului "Resurse", în editorul dvs. preferat. Nu avem nevoie de codul generat automat, deci ștergeți-l și înlocuiți-l cu următorul text:
Accentsconagua
// Aceasta stabilește culoarea de fundal a titlului UIView Titanium.UI.setBackgroundColor ('# 000'); // Creează fereastra aplicației var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Crearea etichetei de titlu pentru aplicația noastră var titleLabel = Titanium.UI.createLabel (text: 'Citate de căutare', culoare: '#fff', înălțime: 20, lățime: 320, top: 6, textAlign: , font: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold'); win1.add (titleLabel); / / Crearea zonei de derulare, tot conținutul nostru intră aici var scrollArea = Titanium.UI.createScrollView (top: 40, lățimea: 320, înălțimea: 420, contentHeight: 'auto'); // Crearea căsuței de căutare a cotei de valori var searchBox = Titanium.UI.createView (lățime: 300, stânga: 10, partea superioară: 10, înălțimea: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png' ); scrollArea.add (Searchbox); // Crearea casetei de informații despre cotație var quoteInfoBox = Titanium.UI.createView (lățime: 300, stânga: 10, partea superioară: 70, înălțimea: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Crearea casetei de diagramă quote var quoteChartBox = Titanium.UI.createView (lățime: 300, stânga: 10, partea superioară: 280, înălțimea: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Această vizualizare mică adaugă doar 10px de umplutură în partea de jos a // // noastre scrollview (scrollArea) var emptyView = Titanium.UI.createView (height: 10, top: 580); scrollArea.add (emptyView); // Adăugați vizualizarea scroll în fereastra win1.add (scrollArea); // Deschide fereastra win1.open (); Ceea ce am făcut mai sus este creat o cochilie de bază, cu stil frumos pentru aplicația noastră. Există un spațiu în partea de sus pentru a crea un câmp de căutare și încă două cutii goale pentru a plasa informațiile despre stoc și graficul nostru. Toate acestea au fost adăugate la un ScrollView, astfel încât să putem derula cu ușurință aplicația noastră pentru a vedea orice informație ascunsă de limitele ecranului. Rulați aplicația în emulatorul iPhone și acum ar trebui să arate imaginea de mai jos:
Următorul pas este să creați câmpul de text și butonul de căutare pe care utilizatorul îl va utiliza pentru a interacționa cu aplicația noastră, oferind un simbol de stoc (de exemplu, APPL pentru Apple Computers) pentru a căuta. Introduceți codul următor înainte de linia în care ați adăugat-o SearchBox obiecte față de scrollArea (linia 39).
// Aceasta este câmpul de text introdus pentru codul nostru stoc var txtStockCode = Titanium.UI.createTextField (hintText: 'Codul stocului, de exemplu APPL', borderWidth: 0, lățimea: 200, stânga: 10, înălțimea: 30, font: fontSize: 14, fontColor: '# 262626', fontFamily: 'Helvetica', autoCorrect: false, autocapitalizare: Titanium.UI.TEXT_AUTOCAPITALIZATION_ALL); searchBox.add (txtStockCode); / / Crearea butonului de căutare din search.png imaginea noastră var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', lățime: 80, înălțime: 30, dreapta: 10, borderRadius: 3); // Adăugați ascultătorul evenimentului pentru acest buton btnSearch.addEventListener ("faceți clic", căutațiYQL); searchBox.add (btnSearch); Ceea ce am realizat mai sus este crearea celor două componente de intrare necesare pentru ca utilizatorul să introducă date (un citat de stoc în acest caz) și să efectueze o acțiune bazată pe acea intrare atingând butonul de căutare. Dacă n-ai fi observat deja, ale noastre btnSearch butonul obiect are un ascultător de evenimente care se va declanșa când utilizatorul o va conecta și va apela o funcție numită searchYQL. Dacă ați rula aplicația în emulator acum, ați termina cu un ecran mare de eroare roșie, deoarece nu am creat încă această funcție. Să facem asta acum.
Introduceți următoarele în partea de sus a fișierului app.js, după Titanium.UI.setBackgroundColor linia:
// Această funcție este apelată pe butonul de căutare atingeți, se va interoga YQL pentru funcția noastră de stocare a datelor searchYQL ()
Dacă nu ați făcut deja acest lucru, salvați-vă app.js fișier și rulați-l în emulator. Ar trebui să vedeți un ecran similar celui de mai jos:
Acum, înainte de a căuta YQL pentru informații despre stocurile noastre, trebuie să creăm niște etichete și imagini care să intre în noi quoteInfoBox și să prezinte informațiile utilizatorului. Acesta este un proces destul de direct. Următorul cod trebuie plasat înainte de a adăuga quoteInfoBox la scrollArea pe linia 93.
// adăugați etichetele și imaginile de care avem nevoie pentru a afișa câteva informații despre stocul de bază var lblCompanyName = Titanium.UI.createLabel (lățime: 280, înălțime: 30, stânga: 10, partea superioară: 10, culoare: '# 003366' fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', text: 'Nu a fost selectată nicio companie'); quoteInfoBox.add (lblCompanyName); var lblDaysLow = Titanium.UI.createLabel (lățimea: 280, înălțimea: 20, stânga: 10, vârful: 50, culoarea: "# 000", font: fontSize: 14, fontWeight: 'bold', fontFamily: ', text:' Days Low: '); quoteInfoBox.add (lblDaysLow); var lblDaysHigh = Titanium.UI.createLabel (lățime: 280, înălțimea: 20, stânga: 10, vârful: 80, culoarea: "# 000", font: fontSize: 14, fontWeight: 'bold', fontFamily: ', text:' Days High: '); quoteInfoBox.add (lblDaysHigh); var lblLastOpen = Titanium.UI.createLabel (lățime: 280, înălțimea: 20, stânga: 10, vârful: 110, culoarea: "# 000", font: fontSize: 14, fontWeight: 'bold', fontFamily: ', text:' Last Open: '); quoteInfoBox.add (lblLastOpen); var lblLastClose = Titanium.UI.createLabel (lățime: 280, înălțimea: 20, stânga: 10, partea de sus: 140, culoarea: "# 000", font: fontSize: 14, fontWeight: 'bold', fontFamily: ', text:' Ultima închidere: '); quoteInfoBox.add (lblLastClose); var lblVolume = Titanium.UI.createLabel (lățime: 280, înălțimea: 20, stânga: 10, partea superioară: 170, culoarea: "# 000", font: fontSize: 14, fontWeight: 'bold', fontFamily: ', text:' Volum: '); quoteInfoBox.add (lblVolume);
Odată ce etichetele și imaginea săgeată a imaginii a fost adăugată, ar trebui să puteți rula emulatorul și să ajungeți la un ecran ca acesta:
Acum, hai să facem ceva util cu acest aspect și să îl umplem cu date stoc de la Yahoo! Pentru a face acest lucru trebuie să ne extindem spațiul gol searchYQL () funcția și să efectueze o căutare împotriva tabelelor cu date financiare Yahoo YQL folosind o combinație de sintaxă YQL și Titanium Titanium.Yahoo.yql () metodă.
// Această funcție este apelată pe butonul de căutare atingeți. Se va interoga YQL pentru funcția noastră de stocare searchYQL () // Efectuați o validare de bază pentru a vă asigura că utilizatorul a introdus o valoare a codului stocului dacă (txtStockCode.value! = ") TxtStockCode.blur (); // ascunde tastatura // Creați șirul de interogare folosind o combinație de sintaxă YQL și valoarea câmpului txtStockCode var query = 'select * din yahoo.finance.quotes unde symbol =' '+ txtStockCode.value +' ''; // Executați interogarea și obțineți rezultatele Titanium.Yahoo.yql (interogare, funcție (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid este null, atunci am găsit un stoc valid dacă (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // avem date, să le atribuim etichetelor noastre etc. lblCompanyName.text = data.quote.Name; lblDaysLow.text = 'Days Low:' + data.quote.DaysLow; lblDaysHigh.text = 'Zilele mari:' + date. quote.DaysHigh; lblLastOpen.text = 'Ultimul Deschis:' + data.quote.Open; lblLastClose.text = 'Ultima Închidere:' + data.quote.PreviousClose; lblVolume.text = 'Volum:' + date.quote.Volume; lblPercentChange.text = data.quote.PercentChange; // dacă închiderea anterioară a fost egală sau mai mare decât prețul de deschidere, direcția stocului a crescut? în caz contrar a scăzut! dacă (date.quote.PreviousClose> = date.quote.Open) imgStockDirection.image = 'imagini / arrow-up.png'; altfel imgStockDirection.image = 'images / arrow-down.png'; altfel // afișați un dialog de avertizare prin care se spune că nimic nu poate fi găsit alertat ('Nu s-au găsit informații despre stoc pentru' + txtStockCode.value + '!'); ); else alert ("Trebuie să furnizați un cod de stocare pentru a căuta, de exemplu, AAPL sau YHOO"); Deci, ceea ce se întâmplă de fapt aici în cadrul searchYQL () funcţie? În primul rând, facem o validare foarte importantă pe câmpul de text pentru a vă asigura că utilizatorul a introdus o cotă de acțiuni înainte de a apăsa pe căutare. În cazul în care se constată o cotare la bursă, folosim estompa() metoda câmpului text pentru a vă asigura că tastatura devine ascunsă. Carnea codului se învârte în jurul creării unei interogări Yahoo YQL utilizând sintaxa corectă și oferind valoarea câmpului de text ca parametru de simbol. Această interogare YQL este pur și simplu un șir, unite împreună folosind simbolul + la fel ca și în cazul altor manipulări de șir în JavaScript. Apoi executăm interogarea noastră utilizând Titanium.Yahoo.yql () , care returnează rezultatele în obiectul "e" al funcției inline.
Datele din cadrul obiectului "e" sunt doar JSON, un format de date comun, rapid, care devine rapid omniprezent pe web și cu toate API-urile majore. Utilizarea acestor date este o simplă notație. În codul nostru, verificăm mai întâi proprietatea numită data.quote.ErrorIndicationreturnedforsymbolchangedinvalid pentru a se asigura că simbolul introdus de utilizator a fost un cod de stoc valabil. Dacă este, putem să atribuim etichetelor noastre toate valorile! În cele din urmă, facem un control pentru a vedea dacă prețul acțiunilor a fost închis mai mare decât cel deschis, dacă este așa, atunci putem seta imaginea de mișcare a stocului într-o săgeată verde "în sus", indicând că a crescut în valoare. Dacă a scăzut în valoare, putem muta imaginea într-o săgeată roșie, "în jos".
Rulați codul în emulator și introduceți un cod, cum ar fi AAPL. Ar trebui să obțineți următorul ecran cu date similare returnate după apăsarea butonului de căutare:
În următorul tutorial din această serie, care urmează să fie publicat săptămâna viitoare, vă voi îndruma prin crearea bibliotecii Raphael JS charting, stabilirea unei vizualizări web pentru afișarea graficului, colectarea datelor istorice despre stoc cu YQL și, bineînțeles, de fapt, desenarea unei reprezentări grafice pe ecran pentru utilizator! Asigurați-vă că vă abonați prin RSS sau Twitter dacă doriți să fiți anunțat la lansarea următoarei postări!
