Share
In deze tutorialserie zal ik je leren hoe je een aandelenkoersapp maakt met Raphael JS, Titanium Mobile en Yahoo's YQL-webservice. Raphael JS-grafieken zullen worden gebruikt om de aandelenofferte-informatie grafisch weer te geven, Titanium Mobile zal worden gebruikt om een native iOS-app te compileren, en YQL-gegevenstabellen zullen de aandeleninformatie daadwerkelijk ophalen.
YQL is een SQL-achtige taal waarmee u gegevens uit meerdere bronnen kunt opvragen, filteren en combineren in zowel Yahoo! netwerk en andere open gegevensbronnen. Normaal gezien is de toegang van ontwikkelaars tot gegevens uit meerdere bronnen ongelijk en vereist oproepen naar meerdere API's van verschillende providers, vaak met verschillende feedformaten. YQL elimineert dit probleem door een enkel eindpunt te bieden voor het opvragen en vormgeven van de gegevens die u aanvraagt. In deze zelfstudie gebruiken we de open YQL-gegevenstabellen die door Yahoo Finance worden aangeboden om informatie over aandelenkoersen op te halen en te presenteren.
Deze presentatie van deze informatie is de plaats waar Raphael JS-diagrammen binnenkomen. Diagrammen en grafieken zijn de eenvoudigste, meest logische manier om een tijdlijn met financiële gegevens te presenteren, en Titanium mobile wordt niet geleverd met een native charting API. Raphael is open-source en MIT-gelicentieerd en het is gelukkig erg mobielvriendelijk omdat het is geschreven in standaard JavaScript, een lage verwerkingsvoetafdruk behoudt en in SVG-indeling wordt gerenderd, wat betekent dat het gemakkelijk kan worden aangepast zodat het past op elk mobiel scherm zonder een afname van de beeldkwaliteit!
Het volgende is een voorbeeld van de applicatie die we in deze serie gaan bouwen:
Open Titanium Developer en maak een nieuw project. Je kunt het project elke gewenste naam geven, maar ik gebruik de titel "StockQuotes" voor de eenvoud. Het is nu een goed moment om de bronbestanden voor dit project te downloaden. Download en unzip de projectbestanden die aan dit bericht zijn gekoppeld en kopieer de map "images" naar de map "Resources" van uw nieuwe Titanium-project. Standaard bevat Titanium ook twee pictogrambestanden in de hoofdmap van uw opgeroepen map "Resources" KS_nav_ui.png en KS_nav_views.png - we hoeven het ook niet, dus ga je gang en verplaats beide naar de prullenbak.
Open het app.js-bestand in de hoofdmap van uw map 'Resources' in uw favoriete editor. We hebben geen van de automatisch gegenereerde code nodig, dus verwijder alles en vervang het door het volgende:
Accentsconagua
// Hiermee stelt u de achtergrondkleur in van de master UIView Titanium.UI.setBackgroundColor ('# 000'); // Maak het toepassingsvenster var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Maak het titellabel voor onze app var titleLabel = Titanium.UI.createLabel (text: 'Zoekcitaten', kleur: '#fff', height: 20, width: 320, top: 6, textAlign: 'center' , font: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold'); win1.add (titleLabel); // Maak het scrolgebied, al onze inhoud komt hier var scrollArea = Titanium.UI.createScrollView (top: 40, width: 320, height: 420, contentHeight: 'auto'); // Creëer het zoekvak vakbieding var searchBox = Titanium.UI.createView (width: 300, left: 10, top: 10, height: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png' ); scrollArea.add (Searchbox); // Maak het citaatinformatievak var quoteInfoBox = Titanium.UI.createView (width: 300, left: 10, top: 70, height: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Maak het vak Citaatdiagram var quoteChartBox = Titanium.UI.createView (width: 300, left: 10, top: 280, height: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Deze kleine weergave voegt slechts 10px padding toe aan de onderkant van // our scrollview (scrollArea) var emptyView = Titanium.UI.createView (height: 10, top: 580); scrollArea.add (emptyView); // Voeg de scrollview toe aan het venster win1.add (scrollArea); // Open het venster win1.open (); Wat we hierboven hebben gedaan, is een eenvoudige, mooi vormgegeven schaal voor onze toepassing. Er is een spatie bovenaan om een zoekveld te maken en nog twee lege vakken om onze aandeleninformatie en onze grafiek te plaatsen. Dit alles is toegevoegd aan een ScrollView, zodat we gemakkelijk door onze app kunnen bladeren om informatie te bekijken die voor de grenzen van het scherm verborgen is. Voer uw app uit in de iPhone-emulator en deze zou er nu als volgt uit moeten zien:
Onze volgende stap is het maken van het tekstveld en de zoekknop die de gebruiker gebruikt om met onze applicatie te communiceren door een voorraadsymbool (bijv. APPL voor Apple Computers) aan te bieden waarop kan worden gezocht. Voer de volgende code in vóór de regel waaraan u uw hebt toegevoegd searchbox bezwaar tegen de scrollArea (regel 39).
// Dit is het invoertekstveld voor onze voorraadcode var txtStockCode = Titanium.UI.createTextField (hintText: 'Stock code, bijv. 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); // Maak de zoekknop in onze search.png-afbeelding var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', width: 80, height: 30, right: 10, borderRadius: 3); // Voeg de gebeurtenislistener voor deze knop toe btnSearch.addEventListener ('click', searchYQL); searchBox.add (btnSearch); Wat we hierboven hebben bereikt, is om de twee invoercomponenten te maken die de gebruiker nodig heeft om gegevens in te voeren (in dit geval een aandelenkoers) en om een actie uit te voeren op basis van die invoer door op de zoekknop te tikken. Als u het al niet had gemerkt, onze btnSearch Het object button heeft een gebeurtenislistener die wordt geactiveerd wanneer de gebruiker erop tikt en een functie met de naam called searchYQL. Als u de app nu in de emulator zou uitvoeren, zou u een groot rood foutscherm krijgen, omdat we deze functie nog niet hebben gemaakt. Laten we dat nu doen.
Voer het volgende in boven aan uw app.js-bestand, na de Titanium.UI.setBackgroundColor lijn:
// Deze functie wordt aangeroepen op zoekknop tik, het vraagt YQL om onze voorraadgegevensfunctie searchYQL ()
Als u dit nog niet hebt gedaan, sla uw app.js bestand en voer het uit in de emulator. U zou een scherm moeten zien dat er ongeveer uitziet als hieronder:
Voordat we YQL gaan zoeken naar informatie over onze aandelen, moeten we eerst een aantal labels en afbeeldingen maken die in onze database kunnen worden opgenomen quoteInfoBox en presenteer de informatie aan de gebruiker. Dit is een vrij eenvoudig proces. De volgende code moet worden geplaatst voordat u de quoteInfoBox naar de scrollArea op regel 93.
// Voeg de labels en afbeeldingen toe die we nodig hebben om basisvoorraadinformatie te tonen var lblCompanyName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, colour: '# 003366', font: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', tekst: 'Geen bedrijf geselecteerd'); 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 ', tekst:' 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 ', tekst:' 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 ', tekst:' 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 ', tekst:' 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 ', tekst:' Volume: '); quoteInfoBox.add (lblVolume);
Zodra uw labels en onze beeldbewegingsafbeeldingpijl zijn toegevoegd, zou u de emulator moeten kunnen uitvoeren en eindigen met een scherm zoals dit:
Laten we nu iets nuttigs doen met deze lay-out en het vullen met voorraadgegevens van Yahoo! Om dat te doen, moeten we onze leegte uitbreiden searchYQL () functie en voer een zoekopdracht uit tegen de Yahoo YQL-tabellen met financiële gegevens met behulp van een combinatie van YQL-syntaxis en Titanium's Titanium.Yahoo.yql () methode.
// Deze functie wordt opgeroepen op zoekknop tikken. Het zal YQL opvragen voor onze stock data functie searchYQL () // Doe wat basis validatie om ervoor te zorgen dat de gebruiker een stock code waarde invoert als (txtStockCode.value! = ") TxtStockCode.blur (); // het toetsenbord verbergt // Maak de queryreeks met een combinatie van YQL-syntaxis en de waarde van het veld txtStockCode var query = 'select * from yahoo.finance.quotes where symbol = "' + txtStockCode.value + '"'; // Voer de query uit en krijg de resultaten Titanium.Yahoo.yql (query, functie (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid is null dan hebben we een geldige voorraad gevonden als (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // we hebben wat gegevens! laten we het toewijzen aan onze 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; // als de vorige afsluiting gelijk was aan of hoger was dan de openingsprijs, is de // stockrichting omhoog? anders ging het naar beneden! if (data.quote.PreviousClose> = data.quote.Open) imgStockDirection.image = 'images / arrow-up.png'; else imgStockDirection.image = 'images / arrow-down.png'; else // toon een meldingsvenster met de melding dat er niets kon worden gevonden alert ('Geen voorraadinformatie kan worden gevonden voor' + txtStockCode.value + '!'); ); else alert ('U moet een voorraadcode opgeven om op te zoeken, bijvoorbeeld AAPL of YHOO'); Dus, wat gebeurt hier eigenlijk binnen de searchYQL () functie? Eerst voeren we een zeer eenvoudige validatie uit op het tekstveld om ervoor te zorgen dat de gebruiker een aandelenkoers heeft ingevoerd voordat hij op Zoeken drukt. Als een aandelenkoers wordt gevonden, gebruiken we de blur () methode van het tekstveld om ervoor te zorgen dat het toetsenbord wordt verborgen. Het vlees van de code draait om het maken van een Yahoo YQL-query met de juiste syntaxis en het leveren van de tekstveldwaarde als de symboolparameter. Deze YQL-query is gewoon een tekenreeks, samengevoegd met het + -symbool, zoals u zou doen met andere tekenreeksmanipulaties in JavaScript. Vervolgens voeren we onze query uit met behulp van de Titanium.Yahoo.yql () methode, die de resultaten binnen het 'e'-object van de inlinefunctie retourneert.
De gegevens binnen het 'e'-object zijn eenvoudig JSON, een algemeen, snel gegevensformaat dat alomtegenwoordig wordt op het web en met alle belangrijke API's. Het gebruik van deze gegevens is een kwestie van eenvoudige puntnotatie. In onze code controleren we eerst het geboekte eigendom data.quote.ErrorIndicationreturnedforsymbolchangedinvalid om ervoor te zorgen dat het door de gebruiker ingevoerde symbool een geldige aandelencode was. Als dat zo is, kunnen we alle waarden aan onze labels toewijzen! Ten slotte controleren we of de aandelenkoers hoger is gesloten dan is geopend. Als dit het geval is, kunnen we het beeld voor de voorraadbeweging instellen op een groene pijl 'omhoog' om aan te geven dat deze steeg in waarde. Als de waarde is gedaald, kunnen we de afbeelding verplaatsen naar een rode pijl 'omlaag'.
Voer de code uit in uw emulator en voer een code in, zoals AAPL. Na het indrukken van de zoekknop zou je het volgende scherm moeten krijgen met vergelijkbare gegevens:
In de volgende zelfstudie in deze serie, die volgende week wordt gepubliceerd, zal ik u helpen met het instellen van de Raphael JS-diagrambibliotheek, een webweergave instellen om de grafiek weer te geven, historische voorraadgegevens verzamelen met YQL, en natuurlijk eigenlijk een grafische weergave op het scherm tekenen voor de gebruiker! Meld je aan via RSS of Twitter als je op de hoogte wilt worden gesteld wanneer het volgende bericht wordt uitgebracht!
