Share
Dans cette série de didacticiels, je vais vous apprendre à créer une application de cotation boursière avec Raphael JS, Titanium Mobile et le service Web YQL de Yahoo. Des graphiques Raphael JS seront utilisés pour présenter graphiquement les informations de cotation, Titanium Mobile sera utilisé pour compiler de manière croisée une application iOS native et les tableaux de données YQL récupéreront les informations boursières..
YQL est un langage de type SQL qui vous permet d’interroger, de filtrer et de combiner des données provenant de sources multiples sur les deux systèmes Yahoo! réseau et autres sources de données ouvertes. Normalement, l'accès des développeurs aux données de plusieurs ressources est disparate et nécessite des appels à plusieurs API de différents fournisseurs, souvent avec des formats de flux différents. YQL élimine ce problème en fournissant un seul point de terminaison pour interroger et mettre en forme les données que vous demandez. Dans ce didacticiel, nous utiliserons les tables de données ouvertes YQL fournies par Yahoo Finance afin de récupérer et de présenter des informations sur les cours..
C’est dans cette présentation que les graphiques Raphael JS entrent en jeu. Les graphiques sont la manière la plus simple et la plus logique de présenter une chronologie de données financières, et Titanium mobile n’est pas livré avec une API de création de graphiques native. Raphael est open-source et sous licence MIT. Heureusement, il est très convivial pour les mobiles car il est écrit en JavaScript standard, conserve une empreinte de traitement réduite et rend en fait le rendu au format SVG, ce qui signifie qu'il peut être facilement redimensionné pour s'adapter à tout écran mobile. une diminution de la qualité de l'image!
Voici un aperçu de l'application que nous allons construire dans cette série:
Ouvrez Titanium Developer et créez un nouveau projet. Vous pouvez donner au projet le nom de votre choix, mais je vais utiliser le titre "StockQuotes" pour plus de simplicité. C'est maintenant le bon moment pour télécharger les fichiers sources de ce projet. Téléchargez et décompressez les fichiers de projet joints à cet article et copiez le dossier "images" dans le répertoire "Ressources" de votre nouveau projet Titanium. Par défaut, Titanium inclut également deux fichiers d’icône dans la racine de votre répertoire "Ressources", appelé KS_nav_ui.png et KS_nav_views.png - on n'a pas besoin non plus alors allez-y et déplacez les deux à la poubelle.
Ouvrez le fichier app.js, à la racine de votre répertoire "Ressources", dans votre éditeur favori. Nous n'avons besoin d'aucun code généré automatiquement, aussi supprimez-le et remplacez-le par ce qui suit:
Accentsconagua
// Ceci définit la couleur d'arrière-plan du maître UIView Titanium.UI.setBackgroundColor ('# 000'); // Créer la fenêtre de l'application var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Créer l'étiquette de titre de notre application var titleLabel = Titanium.UI.createLabel (text: 'Search Quotes', couleur: '#fff', hauteur: 20, largeur: 320, haut: 6, textAlign: 'center' , fonte: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'bold'); win1.add (titleLabel); // Créer la zone de défilement, tout notre contenu y est inséré var scrollArea = Titanium.UI.createScrollView (top: 40, width: 320, height: 420, contentHeight: 'auto'); // Création du champ de recherche de cotation var searchBox = Titanium.UI.createView (largeur: 300, gauche: 10, haut: 10, hauteur: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png' ) scrollArea.add (searchBox); // Création de la boîte d'informations sur les devis var quoteInfoBox = Titanium.UI.createView (width: 300, left: 10, top: 70, height: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Création de la zone de graphique de devis var quoteChartBox = Titanium.UI.createView (width: 300, left: 10, top: 280, height: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Cette petite vue ajoute simplement 10 pixels de remplissage au bas de // notre scrollview (scrollArea) var emptyView = Titanium.UI.createView (height: 10, top: 580); scrollArea.add (emptyView); // Ajoute la vue de défilement à la fenêtre win1.add (scrollArea); // Ouvre la fenêtre win1.open (); Ce que nous avons fait ci-dessus a créé un shell de base joliment stylé pour notre application. Il y a un espace en haut pour créer un champ de recherche et deux autres cases vides pour placer nos informations sur les stocks et notre graphique. Tout cela a été ajouté à ScrollView afin que nous puissions facilement faire défiler notre application pour afficher toutes les informations masquées des limites de l'écran. Exécutez votre application dans l'émulateur iPhone et elle devrait maintenant ressembler à l'image ci-dessous:
Notre prochaine étape consiste à créer le champ de texte et le bouton de recherche que l’utilisateur utilisera pour interagir avec notre application en fournissant un symbole boursier (par exemple, APPL pour Apple Computers) sur lequel effectuer la recherche. Entrez le code suivant avant la ligne où vous avez ajouté votre Barre de recherche objecter à la scrollArea (ligne 39).
// Ceci est le champ de saisie de notre code stock var txtStockCode = Titanium.UI.createTextField (hintText: 'Code stock, par exemple APPL', borderWidth: 0, width: 200, left: 10, height: 30, font: fontSize: 14, fontColor: '# 262626', fontFamily: 'Helvetica', autoCorrect: false, autocapitalisation: Titanium.UI.TEXT_AUTOCAPITALIZATION_ALL); searchBox.add (txtStockCode); // Créer le bouton de recherche à partir de notre search.png image var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', largeur: 80, hauteur: 30, droite: 10, borderRadius: 3); // Ajoute l'écouteur d'événements pour ce bouton btnSearch.addEventListener ('click', searchYQL); searchBox.add (btnSearch); Ce que nous avons accompli ci-dessus est de créer les deux composants d’entrée nécessaires à l’utilisateur pour saisir des données (un cours de bourse dans ce cas) et d’exécuter une action en fonction de cette entrée en appuyant sur le bouton de recherche. Si vous n'aviez pas déjà remarqué, notre btnSearch L’objet bouton a un écouteur d’événements qui se déclenche chaque fois que l’utilisateur le tape et appelle une fonction nommée searchYQL. Si vous deviez exécuter l'application dans l'émulateur maintenant, vous auriez un grand écran d'erreur rouge car nous n'avons pas encore créé cette fonction. Faisons-le maintenant.
Entrez ce qui suit en haut de votre fichier app.js, après le Titanium.UI.setBackgroundColor ligne:
// Cette fonction est appelée par un clic sur le bouton de recherche, elle interrogera YQL pour notre fonction de données de stock searchYQL ()
Si vous ne l’avez pas déjà fait, enregistrez votre app.js fichier et exécutez-le dans l'émulateur. Vous devriez voir un écran similaire à celui ci-dessous:
Maintenant, avant de chercher dans YQL des informations sur nos actions, nous devons créer des étiquettes et des images qui figureront dans notre répertoire. quoteInfoBox et présenter les informations à l'utilisateur. C'est un processus assez simple. Le code suivant doit être placé avant d'ajouter le quoteInfoBox au scrollArea à la ligne 93.
// Ajoute les étiquettes et les images nécessaires pour afficher des informations de base sur le stock. Var lblCompanyName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366', police: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', texte: 'Aucune entreprise sélectionnée'); quoteInfoBox.add (lblCompanyName); var lblDaysLow = Titanium.UI.createLabel (largeur: 280, hauteur: 20, gauche: 10, haut: 50, couleur: '# 000', police: taille de la police: 14, taille de la police: 'gras', police de la famille: 'Helvetica ', texte:' Jours bas: '); quoteInfoBox.add (lblDaysLow); var lblDaysHigh = Titanium.UI.createLabel (largeur: 280, hauteur: 20, gauche: 10, haut: 80, couleur: '# 000', police: taille de la police: 14, taille de la police: 'gras', police de la famille: 'Helvetica ', texte:' Jours hauts: '); quoteInfoBox.add (lblDaysHigh); var lblLastOpen = Titanium.UI.createLabel (largeur: 280, hauteur: 20, gauche: 10, haut: 110, couleur: '# 000', police: taille de la police: 14, taille de la police: 'gras', police de la famille: 'Helvetica ', text:' Last Open: '); quoteInfoBox.add (lblLastOpen); var lblLastClose = Titanium.UI.createLabel (largeur: 280, hauteur: 20, gauche: 10, haut: 140, couleur: '# 000', police: taille de la police: 14, taille de la police: 'gras', police de la famille: 'Helvetica ', text:' Last Close: '); quoteInfoBox.add (lblLastClose); var lblVolume = Titanium.UI.createLabel (largeur: 280, hauteur: 20, gauche: 10, haut: 170, couleur: '# 000', police: taille de la police: 14, taille de la police: 'gras', police de la famille: 'Helvetica ', text:' Volume: '); quoteInfoBox.add (lblVolume);
Une fois que vos étiquettes et notre flèche d’image représentant le mouvement des stocks ont été ajoutées, vous devriez pouvoir exécuter l’émulateur et obtenir un écran comme celui-ci:
Faisons maintenant quelque chose d’utile avec cette mise en page et complétons-la avec les données boursières de Yahoo! Pour ce faire, nous devons élargir notre espace vide searchYQL () fonctionne et effectue une recherche dans les tables de données financières Yahoo YQL en utilisant une combinaison de la syntaxe YQL et de Titanium Titanium.Yahoo.yql () méthode.
// Cette fonction est appelée par un clic sur le bouton de recherche. Il interrogera YQL pour notre fonction de données de stock searchYQL () // Faites une validation de base pour vous assurer que l'utilisateur a entré un code de stock si ((txtStockCode.value! = ") TxtStockCode.blur (); // masque le clavier // Création de la chaîne de requête à l'aide d'une combinaison de syntaxe YQL et de la valeur du champ txtStockCode var query = 'select * from yahoo.finance.quotes où symbol = "' + txtStockCode.value + '' '; // Exécuter la requête et obtenez les résultats Titanium.Yahoo.yql (requête, fonction (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid est null, alors nous avons trouvé un stock valide if (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // lblCompanyName.text = data.quote.Name; lblDaysLow.text = 'Jours bas:' + data.quote.DaysLow; lblDaysHigh.text = 'Jours haut:' + données. quote.DaysHigh; lblLastOpen.text = 'Dernière ouverture:' + data.quote.Open; lblLastClose.text = 'Dernière fermeture:' + data.quote.PreviousClose; lblVolume.text = 'Volume:' + data.quote.Volume; lblPercentChange.text = data.quote.PercentChange; // Si la clôture précédente était égale ou supérieure au cours d'ouverture, // la direction des stocks est à la hausse? sinon, il est tombé! if (data.quote.PreviousClose> = data.quote.Open) imgStockDirection.image = 'images / arrow-up.png'; else imgStockDirection.image = 'images / arrow-down.png'; else // affiche une boîte de dialogue d'alerte indiquant que rien ne peut être trouvé alerte ('Aucune information sur les stocks n'a pu être trouvée pour' + txtStockCode.value + '!'); ); else alert ('Vous devez fournir un code de stock sur lequel rechercher, par exemple AAPL ou YHOO'); Alors, que se passe-t-il réellement ici dans le searchYQL () une fonction? Premièrement, nous effectuons une validation très basique du champ de texte pour nous assurer que l’utilisateur a bien saisi un cours boursier avant d’appuyer sur Rechercher. Si un cours boursier est trouvé, nous utilisons le brouiller() méthode du champ de texte pour s’assurer que le clavier est masqué. La base du code tourne autour de la création d'une requête Yahoo YQL en utilisant la syntaxe correcte et en fournissant la valeur du champ de texte en tant que paramètre de symbole. Cette requête YQL est simplement une chaîne, réunie à l'aide du symbole +, comme vous le feriez avec toute autre manipulation de chaîne en JavaScript. Nous exécutons ensuite notre requête en utilisant le Titanium.Yahoo.yql () méthode, qui renvoie les résultats dans l'objet 'e' de la fonction inline.
Les données contenues dans l'objet 'e' sont simplement JSON, un format de données commun et rapide qui devient rapidement omniprésent sur le Web et avec toutes les principales API. L'utilisation de ces données est une simple notation par points. Dans notre code, nous vérifions d'abord la propriété appelée data.quote.ErrorIndicationreturnedforsymbolchangedinvalid afin de s’assurer que le symbole saisi par l’utilisateur correspond à un code de stock valide. Si c'est le cas, nous pouvons alors attribuer toutes les valeurs à nos étiquettes! Enfin, nous vérifions si le cours de l'action a clôturé à un niveau supérieur à celui qu'il a ouvert. Dans l'affirmative, nous pouvons définir l'image du mouvement des actions sur une flèche verte "vers le haut", indiquant sa valeur. Si elle a perdu de la valeur, nous pouvons déplacer l'image vers une flèche rouge "vers le bas".
Exécutez le code dans votre émulateur et entrez un code, tel que AAPL. Vous devriez obtenir l’écran suivant avec des données similaires renvoyées après avoir appuyé sur le bouton de recherche:
Dans le prochain tutoriel de cette série, qui paraîtra la semaine prochaine, je vous expliquerai comment configurer la bibliothèque de graphiques Raphael JS, configurer une vue Web pour afficher le graphique, collecter des données historiques sur les stocks avec YQL, et bien sûr, en train de dessiner une représentation graphique à l'écran pour l'utilisateur! Assurez-vous de vous inscrire via RSS ou Twitter si vous souhaitez être averti de la publication du prochain article.!
