Share
In questa serie di tutorial, ti insegnerò come creare un'applicazione di quotazione azionaria con Raphael JS, Titanium Mobile e il servizio web YQL di Yahoo. I grafici di Raphael JS saranno utilizzati per presentare graficamente le informazioni di quotazione di borsa, Titanium Mobile verrà utilizzato per compilare a croce un'app nativa per iOS e le tabelle di dati YQL recupereranno effettivamente le informazioni di borsa.
YQL è un linguaggio simile a SQL che ti consente di interrogare, filtrare e combinare i dati da più fonti su entrambi gli account Yahoo! rete e altre fonti di dati aperte. Normalmente, l'accesso degli sviluppatori ai dati da più risorse è eterogeneo e richiede chiamate a più API di provider diversi, spesso con formati di feed diversi. YQL elimina questo problema fornendo un singolo endpoint per interrogare e modellare i dati richiesti. In questo tutorial, utilizzeremo le tabelle di dati aperti YQL fornite da Yahoo Finance per recuperare e presentare le informazioni di quotazione di borsa.
Questa presentazione di queste informazioni è il punto in cui entrano in gioco le carte Raphael JS. Grafici e diagrammi sono il modo più semplice e più logico per presentare una cronologia dei dati finanziari e Titanium mobile non viene fornito con un'API nativa per la creazione di grafici. Raphael è autorizzato open-source e MIT, ed è fortunatamente molto mobile friendly perché è scritto in JavaScript standard, mantiene un basso ingombro di elaborazione e in realtà esegue il rendering in formato SVG, il che significa che può essere facilmente ridimensionato per adattarsi a qualsiasi schermo mobile senza una diminuzione della qualità dell'immagine!
Di seguito è riportata un'anteprima dell'applicazione che verrà creata in questa serie:
Apri Titanium Developer e crea un nuovo progetto. Puoi dare al progetto qualsiasi nome tu voglia, ma userò il titolo "StockQuotes" per semplicità. Adesso è un buon momento per scaricare anche i file sorgente per questo progetto. Scarica e decomprimi i file di progetto allegati a questo post e copia la cartella "images" nella directory "Resources" del tuo nuovo progetto Titanium. Di default Titanium include anche due file di icone nella directory principale della directory "Risorse" chiamata KS_nav_ui.png e KS_nav_views.png - non ne abbiamo nemmeno bisogno quindi andiamo avanti e spostiamo entrambi nel cestino.
Apri il file app.js, nella directory principale della directory "Risorse", nel tuo editor preferito. Non abbiamo bisogno di alcun codice generato automaticamente, quindi cancellalo e sostituiscilo con quanto segue:
Accentsconagua
// Imposta il colore di sfondo del master UIView Titanium.UI.setBackgroundColor ('# 000'); // Crea la finestra dell'applicazione var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Crea l'etichetta del titolo per la nostra app var titleLabel = Titanium.UI.createLabel (text: 'Cerca le quotazioni', color: '#fff', height: 20, width: 320, top: 6, textAlign: 'center' , font: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold'); win1.add (titleLabel); // Crea l'area di scorrimento, tutto il nostro contenuto va qui var scrollArea = Titanium.UI.createScrollView (top: 40, width: 320, height: 420, contentHeight: 'auto'); // Crea la casella di ricerca per virgolette var searchBox = Titanium.UI.createView (width: 300, left: 10, top: 10, height: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png' ); scrollArea.add (searchbox); // Crea la finestra delle informazioni sulle quote var quoteInfoBox = Titanium.UI.createView (width: 300, left: 10, top: 70, height: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Crea la finestra del grafico di quota var quoteChartBox = Titanium.UI.createView (width: 300, left: 10, top: 280, height: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Questa piccola vista aggiunge solo 10px di padding alla parte inferiore di // la nostra scrollview (scrollArea) var emptyView = Titanium.UI.createView (height: 10, top: 580); scrollArea.add (emptyView); // Aggiungi la scrollview alla finestra win1.add (scrollArea); // Apri la finestra win1.open (); Quello che abbiamo fatto sopra è stato creato un guscio di base, ben disegnato per la nostra applicazione. C'è uno spazio in alto per creare un campo di ricerca e altre due caselle vuote per posizionare le nostre informazioni sulle scorte e il nostro grafico. Tutto questo è stato aggiunto a un ScrollView così possiamo facilmente scorrere la nostra app per visualizzare qualsiasi informazione che è nascosta dai limiti dello schermo. Esegui la tua app nell'emulatore iPhone e ora dovrebbe assomigliare all'immagine qui sotto:
Il nostro prossimo passo è quello di creare il campo di testo e il pulsante di ricerca che l'utente utilizzerà per interagire con la nostra applicazione fornendo un simbolo azionario (ad esempio APPL per computer Apple) su cui effettuare la ricerca. Inserisci il seguente codice prima della riga in cui hai aggiunto il tuo casella di ricerca oggetto al ScrollArea (linea 39).
// Questo è il campo di testo di input per il nostro codice di magazzino var txtStockCode = Titanium.UI.createTextField (hintText: 'Stock code, ad es. APPL', borderWidth: 0, width: 200, left: 10, height: 30, font: fontSize: 14, fontColor: '# 262626', fontFamily: 'Helvetica', correzione automatica: false, autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_ALL); searchBox.add (txtStockCode); // Crea il pulsante di ricerca dalla nostra immagine search.png var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', width: 80, height: 30, right: 10, borderRadius: 3); // Aggiungi il listener di eventi per questo pulsante btnSearch.addEventListener ('click', searchYQL); searchBox.add (btnSearch); Ciò che abbiamo realizzato sopra è creare le due componenti di input necessarie per l'utente per inserire i dati (una quotazione di borsa in questo caso) e per eseguire un'azione basata su quell'ingresso toccando il pulsante di ricerca. Se non lo avessi già notato, il nostro btnSearch L'oggetto pulsante ha un listener di eventi che si attiva ogni volta che l'utente lo tocca e chiama una funzione chiamata searchYQL. Se dovessi eseguire l'app nell'emulatore ora, avresti una grande schermata di errore rossa poiché non abbiamo ancora creato questa funzione. Facciamolo ora.
Inserisci quanto segue nella parte superiore del tuo file app.js, dopo il Titanium.UI.setBackgroundColor linea:
// Questa funzione viene chiamata sul pulsante di ricerca, quindi eseguirà una query su YQL per la nostra funzione di dati di magazzino searchYQL ()
Se non lo hai già fatto, salva il tuo app.js file ed eseguirlo nell'emulatore. Dovresti vedere una schermata simile a quella qui sotto:
Ora, prima di cercare YQL per informazioni sui nostri titoli, dobbiamo creare alcune etichette e immagini che andranno a finire nelle nostre quoteInfoBox e presentare le informazioni all'utente. Questo è un processo abbastanza semplice. Il seguente codice deve essere inserito prima di aggiungere il quoteInfoBox al ScrollArea sulla linea 93.
// Aggiungi le etichette e le immagini che abbiamo bisogno di mostrare alcune informazioni di base dello stock var lblCompanyName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366', font: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', testo: 'Nessuna società selezionata'); 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 ', testo:' Giorni bassi: '); 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 ', testo:' 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 ', testo:' Ultima apertura: '); 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 ', testo:' Ultima chiusura: '); 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 ', testo:' Volume: '); quoteInfoBox.add (lblVolume);
Una volta che le tue etichette e la nostra freccia dell'immagine di movimento sono state aggiunte, dovresti essere in grado di eseguire l'emulatore e finire con uno schermo come questo:
Ora facciamo qualcosa di utile con questo layout e riempilo con i dati di borsa di Yahoo! Per fare ciò abbiamo bisogno di espandere il nostro vuoto searchYQL () funzione ed esegui una ricerca contro le tabelle di dati finanziari di Yahoo YQL usando una combinazione di sintassi YQL e Titanium Titanium.Yahoo.yql () metodo.
// Questa funzione viene richiamata sul pulsante di ricerca. Interrogerà YQL per la nostra funzione di dati di magazzino searchYQL () // Esegui alcune convalide di base per garantire che l'utente abbia inserito un valore di codice di magazzino if (txtStockCode.value! = ") TxtStockCode.blur (); // nasconde la tastiera // Crea la stringa di query utilizzando una combinazione di sintassi YQL e il valore del campo txtStockCode var query = 'seleziona * da yahoo.finance.quotes dove symbol = "' + txtStockCode.value + '"'; // Esegui la query e ottieni i risultati Titanium.Yahoo.yql (query, function (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid è null allora abbiamo trovato uno stock valido if (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // abbiamo alcuni dati! assegniamoli alle nostre etichette ecc. lblCompanyName.text = data.quote.Name; lblDaysLow.text = 'Giorni bassi:' + data.quote.DaysLow; lblDaysHigh.text = 'Giorni alti:' + dati. quote.DaysHigh; lblLastOpen.text = 'Ultimo accesso:' + data.quote.Open; lblLastClose.text = 'Ultima chiusura:' + data.quote.PreviousClose; lblVolume.text = 'Volume:' + data.quote.Volume; lblPercentChange.text = data.quote.PercentChange; // se la chiusura precedente era uguale o superiore al prezzo di apertura, la // direzione dello stock è aumentata? altrimenti è andato giù! if (data.quote.PreviousClose> = data.quote.Open) imgStockDirection.image = 'images / arrow-up.png'; else imgStockDirection.image = 'images / arrow-down.png'; else // mostra una finestra di avviso che dice che non è stato trovato nessun avviso ('Non è stato possibile trovare informazioni di magazzino per' + txtStockCode.value + '!'); ); else alert ('È necessario fornire un codice di inventario da cercare, ad esempio AAPL o YHOO'); Quindi, cosa sta succedendo qui nel searchYQL () funzione? Innanzitutto, stiamo eseguendo una convalida molto semplice sul campo di testo per garantire che l'utente abbia inserito una quotazione azionaria prima di premere la ricerca. Se viene trovata una quotazione azionaria, usiamo il blur () metodo del campo di testo per garantire che la tastiera sia nascosta. La carne del codice ruota attorno alla creazione di una query Yahoo YQL utilizzando la sintassi corretta e fornendo il valore del campo di testo come parametro simbolo. Questa query YQL è semplicemente una stringa, unita usando il simbolo + proprio come faresti con qualsiasi altra manipolazione di stringhe in JavaScript. Quindi eseguiamo la nostra query usando il Titanium.Yahoo.yql () metodo, che restituisce i risultati all'interno dell'oggetto "e" della funzione inline.
I dati all'interno dell'oggetto "e" sono semplicemente JSON, un comune formato di dati veloce che sta diventando rapidamente onnipresente sul web e con tutte le principali API. L'utilizzo di questi dati è una questione di semplice notazione dei punti. Nel nostro codice, per prima cosa controlliamo la proprietà chiamata data.quote.ErrorIndicationreturnedforsymbolchangedinvalid al fine di garantire che il simbolo inserito dall'utente fosse un codice di inventario valido. Se lo è, possiamo quindi assegnare tutti i valori alle nostre etichette! Infine, facciamo un controllo per vedere se il prezzo delle azioni ha chiuso più in alto di quanto non sia stato aperto, in tal caso possiamo impostare l'immagine di movimento delle scorte su una freccia verde "su", indicando che è aumentata di valore. Se ha perso valore, possiamo spostare l'immagine su una freccia rossa, "in basso".
Esegui il codice nel tuo emulatore e inserisci un codice, come AAPL. Si dovrebbe ottenere la seguente schermata con dati simili restituiti dopo aver premuto il pulsante di ricerca:
Nel prossimo tutorial di questa serie, che verrà pubblicato la prossima settimana, ti guiderò attraverso la creazione della libreria di grafici di Raphael JS, la creazione di una visualizzazione web per visualizzare il grafico, la raccolta di dati di magazzino storici con YQL e, ovviamente, effettivamente disegnando una rappresentazione grafica sullo schermo per l'utente! Assicurati di iscriverti tramite RSS o Twitter se desideri ricevere una notifica quando viene pubblicato il prossimo post!
