Créer un module de cotation boursière basé sur Python et Flask

Introduction

Merci d'avoir consulté mon article! Nous allons construire une API de microservice basée sur Python en utilisant le microframework Flask. Nous allons créer une API qui renvoie des informations sur les cotations boursières et exploiter le système de modèles de Flask pour créer un site Web Bootstrap 4 simple pour créer un graphique historique des cours des actions.

Nous allons utiliser le module yfinance pour Python, qui utilise l'API Yahoo Finance pour fournir des informations boursières. Cette API est accessible au public, mais n'est pas garantie de fonctionner pour une utilisation en production. Néanmoins, il nous fournira une excellente source de données pour notre exemple de code.

Exemple de code pour ce projet

J'ai stocké le code de ce projet dans un référentiel git à l'emplacement suivant. https://github.com/grizzlypeaksoftware/Flask-Stock-Widget N'hésitez pas à utiliser le code dans vos projets!

Si vous souhaitez cloner le code sur votre machine locale, vous devrez avoir installé git. Ensuite, vous pouvez naviguer à l'aide de votre ligne de commande jusqu'à l'emplacement où vous souhaitez stocker le code et le cloner sur votre ordinateur.

git clone https://github.com/grizzlypeaksoftware/Flask-Stock-Widget

Installer Python et Flask

Son guide suppose que vous avez au moins une compréhension de base de la programmation Python et comment effectuer des tâches générales au niveau du système d'exploitation. Vous aurez besoin d'un éditeur de code pour créer cette application. J'ai utilisé du code Visual Studio.

Si vous n'avez pas déjà installé Python, vous devez l'installer. L'installation de votre système d'exploitation se trouve à l'emplacement suivant.

Python - Getting Started

Une fois que vous avez installé Python avec succès sur votre système d'exploitation, vous souhaiterez installer Flask.

pip install flask

Une fois l'installation terminée, vous devriez maintenant avoir Python et Flask en cours d'exécution dans votre environnement de développement.

Installation du module yfinance

La prochaine étape consistera à installer le module python Yahoo Finance. Tout comme l'installation de la fiole, nous utiliserons PIP.

pip install yfinance  

Vous pouvez tout savoir sur ce module sur leur site Web github. https://github.com/ranaroussi/yfinance . Si vous voulez vraiment vous lancer dans le codage à l'aide de ce module, je vous recommande d'explorer leur code car certaines fonctionnalités ne sont pas documentées sur leur site web.

Ce module exploite les API Yahoo internes qui ont été conçues pour leur site Web. Il n'y a aucune garantie sur les données retournées par Yahoo Finance à l'aide de ce module.

Premiers pas avec le contrôleur API

Nous allons créer un fichier appelé app.py, et nous commencerons avec le code suivant.

from flask import Flask, request, render_template

Cela signifie que nous allons importer le module Flask que nous avons installé précédemment, et nous allons utiliser Flask, request et render_template pour ce projet.

• Flask - le module Flask principal
• request - fournit un gestionnaire pour l'objet de requête HTTP
• render_template - fournit à Flask un gestionnaire pour le rendu des modèles HTML. Nous l'utiliserons plus tard dans le didacticiel pour créer le site Web de démonstration.

Ensuite, nous importerons le module yfinance.

import yfinance as yf

Ensuite, dans app.py, nous allons instancier l'application du flacon.

app = Flask(__name__)

Et à partir d'ici, nous sommes prêts à terminer le premier appel d'API. Voici le code complété.

from flask import Flask, request, render_template
import yfinance as yf

app = Flask(____name____)

@app.route("/quote")
def display_quote():
  symbol = request.args.get('symbol', default="AAPL")    
  quote = yf.Ticker(symbol    
  return quote.info

if ____name____ == "____main____":
  app.run(debug=True)

Cela crée une URL unique pour le site Web qui contactera Yahoo Finance et récupérera les informations de cotation boursière au format JSON. Lançons donc l'application!

À partir du type de ligne de commande

python app.py

Cela démarrera l'application en cours d'exécution et devrait faire apparaître l'API sur son port par défaut (5000).

    python app.py
    * Serving Flask app "app" (lazy loading)
    * Environment: production
       WARNING: This is a development server. Do not use it in a production        deployment.
    Use a production WSGI server instead.    
    * Debug mode: on
    * Restarting with stat
    * Debugger is active!
    * Debugger PIN: 146-068-908
    * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Si vous deviez accéder à l'URL suivante, vous devriez maintenant voir les informations de cotation boursière pour Apple répertoriées dans JSON dans le navigateur.

http://localhost:5000/quote

{
  "52WeekChange": 1.0365322,
  "SandP52WeekChange": 0.24646628,
  "address1": "One Apple Park Way",
  "algorithm": null,
  "annualHoldingsTurnover": null,
  "annualReportExpenseRatio": null,
  "ask": 309.42,
  "askSize": 1100, 
  ...
}

Félicitations! Vous obtenez maintenant des cotations boursières à partir d'une simple API. Mais avant de pouvoir dessiner un graphique, nous devrons également extraire des informations historiques.

Extraction de données historiques

Nous le ferons en créant un nouvel itinéraire appelé / history. Nous allons définir une période de 1 an et un intervalle mensuel.

@app.route("/history")
def display_history():

    symbol = request.args.get('symbol', default="AAPL")
    period = request.args.get('period', default="1y")
    interval = request.args.get('interval', default="1mo")        
    quote = yf.Ticker(symbol)   
    hist = quote.history(period=period, interval=interval)
    data = hist.to_json()
    return data

Cela fonctionne de la même manière que l'extraction de la cotation boursière, à l'exception du retour des données historiques de cotation boursière afin que vous puissiez les rendre dans un graphique des prix!

Une fois que vous avez cliqué sur Enregistrer dans l'application, vous devriez pouvoir accéder à cette nouvelle route API en allant sur http://localhost:5000/history

Sur les deux API, vous pouvez passer le symbole sur la chaîne de requête en ajoutant?symbol= . Par exemple http://localhost:5000/history?symbol=TSLA

Félicitations! Vous disposez désormais d'une API de cotation de stock que vous pouvez utiliser pour créer un widget simple avec un graphique. Commençons.

Configuration de la page d'accueil à l'aide de Flask

Flask est livré avec un rendu de modèle simple appelé Jinja. Nous l'utiliserons pour extraire du HTML du système de fichiers et le rendre dans le navigateur. C'est ce que nous utiliserons pour créer notre démo de site Web.

Pour ce faire, vous devrez créer un dossier dans votre projet appelé "modèles" car Jinja recherche toujours dans le dossier des modèles. Si vous regardez dans ce dossier, vous trouverez le modèle HTML. Nous utilisons un tas de bibliothèques dans ce HTML pour rendre les choses faciles alors jetons un coup d'œil. Vous pouvez trouver le code HTML de ce modèle à l'emplacement suivant.

https://github.com/grizzlypeaksoftware/Flask-Stock-Widget/blob/master/templates/homepage.html

Vous verrez d'abord que nous tirons le CSS pour Bootstrap 4 via CDN. Nous utilisons également une partie du balisage Jinja dans ce modèle pour extraire notre fichier CSS statique qui se trouve dans static/css.

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename='css/site.css') }}" rel="stylesheet">

Dans la partie inférieure du HTML, nous appelons un certain nombre de bibliothèques JavaScript à partir de CDN.

• jquery - Une bibliothèque JavaScript polyvalente multi-navigateur
• Bootstrap 4 - un cadre d'interface utilisateur pour HTML5
• Highcharts - Une bibliothèque de graphiques javascript
• Moment.js - Un convertisseur date / heure pour JavaScript
• Number.js - Un formateur de nombres pour JavaScript

Tous ces scripts sont référencés comme suit…

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

Enfin, nous référencerons le fichier javascript de notre propre page afin de pouvoir terminer le projet.

<script src="{{ url_for('static', filename='scripts/site.js') }}"></script>

Rendu du modèle en tant que page Web

Enfin, nous allons créer un itinéraire dans app.py dans lequel nous rendrons le modèle en HTML sur la page et le testerons.

@app.route("/")
def home():
   return render_template("homepage.html")

Si vous exécutez à nouveau l'application à partir de la ligne de commande, puis accédez à http: // localhost: 5000 / vous devriez maintenant voir un site Web qui ressemble à peu près à ceci.

Extraire le contenu de l'API avec AJAX

Maintenant, tout le reste sera fait directement à partir de JavaScript. Nous interrogerons l'API stock à l'aide de la méthode AJAX de jQuery, et obtiendrons le devis et les informations historiques. Puisqu'il y a deux appels, nous allons d'abord obtenir le devis, puis nous allons extraire l'historique. Cela pourrait également être fait un peu différemment en tirant simultanément la citation et l'historique, mais ce n'est pas ainsi que je l'ai configuré cette fois.

Tout d'abord, cela se produit lorsque le DOM de la page est chargé, c'est que la page appellera la fonction Init (), où nous lancerons la demande pour obtenir la cotation boursière.

Site.prototype.GetQuote = function(){
// store the site context.
var that = this;

// pull the HTTP REquest
$.ajax({
    url: "/quote?symbol=" + that.symbol,
    method: "GET",
    cache: false
}).done(function(data) {

    // set up a data context for just what we need.
    var context = {};
    context.shortName = data.shortName;
    context.symbol = data.symbol;
    context.price = data.ask;

    if(data.quoteType="MUTUALFUND"){
        context.price = data.previousClose
    }      

    // call the request to load the chart and pass the data context with it.
    that.LoadChart(context);
});

};

Ensuite, nous chargerons les données du graphique et les passerons à la fonction de rendu du graphique.

Site.prototype.LoadChart = function(quote){
    var that = this;
    $.ajax({
        url: "/history?symbol=" + that.symbol,
        method: "GET",
        cache: false
    }).done(function(data) {
        that.RenderChart(JSON.parse(data), quote);
    });
};

Une fois les données reçues, RenderChart est appelé avec les données qui ont été collectées. Nous utiliserons ensuite Highcharts pour rendre les données du graphique.

Site.prototype.RenderChart = function(data, quote){
    var priceData = [];
    var dates = [];

    var title = quote.shortName + " (" + quote.symbol + ") - " +    numeral(quote.price).format('$0,0.00');

for(var i in data.Close){
    var dt = i.slice(0,i.length-3);
    var dateString = moment.unix(dt).format("MM/YY");
    var close = data.Close[i];
    if(close != null){
        priceData.push(data.Close[i]);  
        dates.push(dateString);
    }       
}

Highcharts.chart('chart_container', {
    title: {
        text: title
    },  
    yAxis: {
        title: {
            text: ''
        }
    },  
    xAxis: {
        categories :dates,
    },  
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },  
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            }
        },
        area: {
        }
    },  
    series: [{
        type: 'area',
        color: '#85bb65',
        name: 'Price',
        data: priceData
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 640
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }    
});
};

Donc, en rassemblant tout cela, nous devrions maintenant avoir un widget boursier tout complet qui tirera toutes les données, puis dessinera le widget Bourse sur la page. Nous avons ajouté un petit formulaire de saisie afin que vous puissiez changer le symbole en tapant un nouveau symbole, comme TSLA, MSFT ou VTSAX afin d'afficher les informations concernant ce type particulier d'investissement.

Une fois terminé, le site Web devrait ressembler à peu près à ceci…

Conclusion

Dans cet article, nous avons utilisé Python et Flask pour créer une API boursière simple qui peut extraire le formulaire de données de Yahoo Finance, puis l'appliquer pour créer un site Web simple qui affiche un graphique boursier. J'espère que vous avez apprécié ce tutoriel!

Si vous êtes intéressé à lire l'un de nos autres articles de programmation, voici quelques bons articles à consulter:

Création d'une passerelle API avec NGINX

Créez un simple serveur Node.js OAuth avec JWT

Créez un serveur Web sécurisé dans Node.js

Merci à normcyr sur github pour avoir été la première personne à contribuer à ce dépôt de code. Merci pour vos commentaires constructifs!