Share
I denne opplæringsserien vil jeg lære deg hvordan du lager et aksjekursapplikasjon med Raphael JS, Titanium Mobile og YAHOOs webservice. Raphael JS-diagrammer vil bli brukt til å presentere aksjekursinformasjonen grafisk, Titanium Mobile vil bli brukt til å krysse kompilere en innfødt iOS-app, og YQL datatabeller vil faktisk hente lagerinformasjonen.
YQL er et SQL-lignende språk som lar deg spørre, filtrere og kombinere data fra flere kilder på tvers av Yahoo! nettverk og andre åpne datakilder. Vanligvis er utviklerens tilgang til data fra flere ressurser ulik og krever samtaler til flere APIer fra forskjellige leverandører, ofte med varierende feedformater. YQL eliminerer dette problemet ved å gi et enkelt sluttpunkt for å spørre og forme dataene du ber om. I denne opplæringen bruker vi YQL åpne datatabellene levert av Yahoo Finance for å hente og presentere aksjekurserinformasjon.
Denne presentasjonen av denne informasjonen er hvor Raphael JS-diagrammer kommer inn. Diagrammer og grafer er den enkleste og mest logiske måten å presentere en tidslinje med økonomiske data, og Titanium Mobile kommer ikke med et innfødt kartleggings-API. Raphael er åpen kildekode og MIT lisensiert, og det er heldigvis veldig mobil vennlig fordi den er skrevet i standard JavaScript, opprettholder et lavt behandlingsavtrykk, og faktisk gjøres i SVG-format, noe som betyr at det enkelt kan endres slik at det passer til hvilken som helst mobil skjerm uten en reduksjon i bildekvaliteten!
Følgende er en forhåndsvisning av programmet vi skal bygge i denne serien:
Åpne Titanium Developer og opprett et nytt prosjekt. Du kan gi prosjektet noe navn du vil, men jeg bruker tittelen "StockQuotes" for enkelhet. Nå er det også en god tid å laste ned kildefilene for dette prosjektet. Last ned og pakke ut prosjektfilene som er vedlagt dette innlegget, og kopier mappen "bilder" over til "Ressurser" -katalogen av ditt nye Titanium-prosjekt. Titanium inneholder som standard to ikonfiler i roten til katalogen "Ressurser" KS_nav_ui.png og KS_nav_views.png - Vi trenger heller ikke så gå videre og flytte begge disse til søpla.
Åpne app.js-filen, i roten av katalogen "Ressurser", til din favorittredigerer. Vi trenger ikke noen av den automatisk genererte koden, så slett alt og erstatt den med følgende:
Accentsconagua
// Dette setter bakgrunnsfargen til master UIView Titanium.UI.setBackgroundColor ('# 000'); // Opprett søknadsvinduet var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Opprett titteletiketten for appen vår titleLabel = Titanium.UI.createLabel (text: 'Search Quotes', farge: '#fff', høyde: 20, bredde: 320, topp: 6, tekstLette: 'senter' , skrifttype: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold'); win1.add (titleLabel); // Opprett rulleområdet, alt innholdet vårt går inn her var scrollArea = Titanium.UI.createScrollView (topp: 40, bredde: 320, høyde: 420, contentHeight: 'auto'); // Opprett aksjekvalitets søkebok var searchBox = Titanium.UI.createView (bredde: 300, venstre: 10, topp: 10, høyde: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png' ); scrollArea.add (searchbox); // Opprett tilbudsinformasjonskassen var quoteInfoBox = Titanium.UI.createView (bredde: 300, venstre: 10, topp: 70, høyde: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Opprett sitat kartboksen var quoteChartBox = Titanium.UI.createView (bredde: 300, venstre: 10, topp: 280, høyde: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Denne lille visningen legger bare 10px med polstring til bunnen av // vårt rullegardin (scrollArea) var emptyView = Titanium.UI.createView (høyde: 10, topp: 580); scrollArea.add (emptyView); // Legg rulleskjermen til vinduet win1.add (scrollArea); // Åpne vinduet win1.open (); Det vi har gjort ovenfor, er opprettet et grunnleggende, pent utformet skall for vår søknad. Det er et mellomrom øverst for å lage et søkefelt, og to flere tomme bokser for å plassere vår aksjeinformasjon og vårt diagram. Alt dette har blitt lagt til i ScrollView, slik at vi enkelt kan bla gjennom appen vår for å se informasjon som er skjult fra grensene på skjermen. Kjør appen din i iPhone-emulatoren, og den skal nå se ut som bildet nedenfor:
Vårt neste skritt er å lage tekstfeltet og søkeknappen som brukeren vil bruke til å samhandle med vår søknad ved å gi et lager symbol (for eksempel APPL for Apple Computers) for å søke på. Skriv inn følgende kode før linjen der du la til søkefelt protestere mot scrollArea (linje 39).
// Dette er inntastingsfeltet for vår varenummer var txtStockCode = Titanium.UI.createTextField (hintText: 'Lagerkode, f.eks 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); // Opprett søkeknappen fra vår search.png bilde var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', bredde: 80, høyde: 30, høyre: 10, borderRadius: 3); // Legg til hendelseslytteren for denne knappen btnSearch.addEventListener ('klikk', søkYQL); searchBox.add (btnSearch); Det vi oppnådde ovenfor, er å opprette de to inngangskomponentene som er nødvendige for at brukeren skal kunne skrive inn data (et aksjeseddel i dette tilfellet) og å utføre en handling basert på denne innspillingen ved å trykke på søkeknappen. Hvis du ikke hadde lagt merke til allerede, vår btnSearch knappobjekt har en hendelseslytter som vil brenne når brukeren tapper den og kaller en funksjon som heter searchYQL. Hvis du skulle kjøre appen i emulatoren nå, ville du ende opp med en stor rød feil skjerm som vi ikke har opprettet denne funksjonen ennå. La oss gjøre det nå.
Skriv inn følgende øverst i app.js-filen din, etter Titanium.UI.setBackgroundColor linje:
// Denne funksjonen kalles på søkeknappen, den vil spørre YQL for vår lagerdatafunksjon searchYQL ()
Hvis du ikke allerede har gjort det, lagre din app.js filen og kjør den i emulatoren. Du bør se en skjerm som ligner på den nedenfor:
Nå, før vi søker YQL for informasjon om våre aksjer, må vi lage noen etiketter og bilder som vil gå inn i vår quoteInfoBox og presentere informasjonen til brukeren. Dette er en ganske rett frem prosess. Følgende kode skal plasseres før du legger til quoteInfoBox til scrollArea på linje 93.
// Legg til etikettene og bildene vi trenger for å vise noen grunnleggende lagerinformasjon var lblCompanyName = Titanium.UI.createLabel (bredde: 280, høyde: 30, venstre: 10, topp: 10, farge: '# 003366' fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', tekst: 'Ingen valgt selskap'); quoteInfoBox.add (lblCompanyName); var lblDaysLow = Titanium.UI.createLabel (bredde: 280, høyde: 20, venstre: 10, topp: 50, farge: '# 000', skrift: fontSize: 14, fontWeight: 'fet', fontFamily: 'Helvetica ', tekst:' Days Low: '); quoteInfoBox.add (lblDaysLow); var lblDaysHigh = Titanium.UI.createLabel (bredde: 280, høyde: 20, venstre: 10, topp: 80, farge: '# 000', skrifttype: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', tekst:' Days High: '); quoteInfoBox.add (lblDaysHigh); var lblLastOpen = Titanium.UI.createLabel (bredde: 280, høyde: 20, venstre: 10, topp: 110, farge: '# 000', skrifttype: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', tekst:' Sist åpnet: '); quoteInfoBox.add (lblLastOpen); var lblLastClose = Titanium.UI.createLabel (bredde: 280, høyde: 20, venstre: 10, topp: 140, farge: '# 000', skrift: fontSize: 14, fontWeight: 'fet', fontFamily: 'Helvetica ', tekst:' Siste lukk: '); quoteInfoBox.add (lblLastClose); var lblVolume = Titanium.UI.createLabel (bredde: 280, høyde: 20, venstre: 10, topp: 170, farge: '# 000', skrifttype: fontSize: 14, fontWeight: 'bold', fontFamily: 'Helvetica ', tekst:' Volum: '); quoteInfoBox.add (lblVolume);
Når etikettene og vår lagerbevegelsesbildepil er lagt til, bør du kunne kjøre emulatoren og ende opp med en skjerm som denne:
La oss nå gjøre noe nytt med denne oppsettet og fylle det med lagerdata fra Yahoo! For å gjøre det må vi utvide vårt tomme searchYQL () funksjon og utfør et søk mot Yahoo YQL finansdatatabeller ved hjelp av en kombinasjon av YQL-syntaks og Titanium Titanium.Yahoo.yql () metode.
// Denne funksjonen kalles på søkeknappen. Det vil spørre YQL for vår lagerdatafunksjon searchYQL () // Gjør noen grunnleggende validering for å sikre at brukeren har angitt en aksjekodeverdi hvis (txtStockCode.value! = ") TxtStockCode.blur (); // skjuler tastaturet // Lag forespørselsstrengen ved hjelp av en kombinasjon av YQL-syntaks og verdien av txtStockCode-feltet var spørring = 'velg * fra yahoo.finance.quotes hvor symbol = "' + txtStockCode.value + '"; // Utfør spørringen og få resultatene Titanium.Yahoo.yql (spørring, funksjon (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid er null da vi fant en gyldig aksje hvis (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // Vi har noen data! La oss tildele det til våre etiketter osv. lblCompanyName.text = data.quote.Name; lblDaysLow.text = 'Dager lav:' + data.quote.DaysLow; lblDaysHigh.text = 'Dager høy:' + data. quote.DaysHigh; lblLastOpen.text = 'Sist åpnet:' + data.quote.Open; lblLastClose.text = 'Siste lukk:' + data.quote.PreviousClose; lblVolume.text = 'Volum:' + data.quote.Volume; lblPercentChange.text = data.quote.PercentChange; // Hvis forrige lukk var lik eller høyere enn åpningsprisen, er // lagerretningen opp? ellers gikk det ned! hvis (data.quote.PreviousClose> = data.quote.Open) imgStockDirection.image = 'images / arrow-up.png'; else imgStockDirection.image = 'images / arrow-down.png'; ellers // viser en varslingsdialog som sier at ingenting kunne bli funnet varslet ('Ingen lagerinformasjon kunne bli funnet for' + txtStockCode.value + '!'); ); ellers alert ('Du må oppgi en lagerkode for å søke på, for eksempel AAPL eller YHOO'); Så, hva skjer faktisk her inne i searchYQL () funksjon? For det første gjør vi en veldig grunnleggende validering i tekstfeltet for å sikre at brukeren har angitt et aksjekilbud før du trykker på søk. Hvis et aksjekurser er funnet, bruker vi uklarhet() Metode i tekstfeltet for å sikre at tastaturet blir skjult. Kjøttet i koden dreier seg om å opprette en Yahoo YQL-spørring ved å bruke riktig syntaks og gi tekstfeltverdien som symbolparameter. Denne YQL-spørringen er rett og slett en streng, sammen med symbolet +, mye som du ville gjøre med noen annen strengmanipulering i JavaScript. Vi utfører deretter spørringen vår ved hjelp av Titanium.Yahoo.yql () metode, som returnerer resultatene innenfor 'e' -objektet til inline-funksjonen.
Dataene i 'e' -objektet er bare JSON, et vanlig, raskt dataformat som raskt blir allestedsnærværende på nettet og med alle de store API-ene. Bruk av disse dataene er et spørsmål om enkel prikknotasjon. I vår kode, sjekker vi først egenskapen som heter data.quote.ErrorIndicationreturnedforsymbolchangedinvalid for å sikre at symbolet som brukeren skrev inn var en gyldig lagerkode. Hvis det er, kan vi da tildele alle verdiene til våre etiketter! Til slutt, vi gjør en sjekk for å se om aksjekursen er lukket høyere enn den åpnet. Hvis så, da kan vi sette lagerbevegelsesbildet til en grønn "opp" pil, noe som indikerer at den er økende i verdi. Hvis det falt i verdi, kan vi flytte bildet til en rød, "ned" pil.
Kjør koden i emulatoren din og skriv inn en kode, for eksempel AAPL. Du bør få følgende skjerm med lignende data returnert etter å ha trykket på søkeknappen:
I neste veiledning i denne serien, som skal publiseres i neste uke, går jeg gjennom å sette opp Raphael JS-kartleggingsbiblioteket, sette opp en webvisning for å vise diagrammet, samle historiske lagerdata med YQL, og selvfølgelig, faktisk tegne en grafisk representasjon på skjermen for brukeren! Pass på å abonnere via RSS eller Twitter hvis du vil bli varslet når neste innlegg blir utgitt!
