Aplicacion v2

Nuestra archivo app.py

from flask import Flask, render_template
from cripto.data import get_price


app = Flask(
    __name__,
    # Carpeta donde se encuentran los archivos estáticos
    static_folder='static',
    # Carpeta donde se encuentran los templates para el frontend
    template_folder='templates'
)


@app.route('/')
def index():
    site_title = 'Mi aplicacion web'
    return render_template("index.html", site_title=site_title)


@app.route("/price/<symbol>")
@app.route("/price/<symbol>/<to_symbol>")
def datos(symbol, to_symbol='USDT'):
    data = get_price(symbol, to_symbol)
    context = {
        'symbol': symbol,
        'to_symbol': to_symbol,
        'data': data,
    }
    site_title = 'Datos del sistema de transporte de la Ciudad de Córdoba'
    return render_template("datos.html", site_title=site_title, **context)

Nuestro archivo cripto/data.py (recuerda agregar un archivo vacío cripto/__init__.py)

import requests


def get_price(symbol, to_symbol='USDT'):
    """ Obtener el precio de alguna criptomoneda """
    url = f'https://api2.binance.com/api/v3/ticker/24hr?symbol={symbol}{to_symbol}'
    response = requests.get(url)

    # devuelvo todos los datos
    data = response.json()
    return data

El estilo CSS de nuestro sitio en /static/base.css

h2 {
    color: #064096;
    font-size: 1.2em;
}

h3 {
    color: #05624c;
    font-size: 1.1em;
}

.moneda {
    font-weight: bold;
}

#lista-monedas {
    margin: 20px;
    padding: 20px;
    border: 1px solid #222222;
    background-color: #bbbbbb33;
}

El código JavaScript de nuestro sitio en /static/base.js

function agregar_moneda() {
    /*
    agregar la moneda que el usuario escribio en la caja de texto
    a la lista de criptomonedas que se muestran en la pagina.
    */
    let symbol = document.getElementById("nueva-moneda").value;
    if (symbol == "") {
        alert("Debe ingresar un símbolo de moneda!");
        return;
    }
    let a = document.createElement('a');               
    let link = document.createTextNode(symbol);
    a.appendChild(link); 
    a.href = "/price/" + symbol; 
    let lista_monedas = document.getElementById("lista-monedas");
    let new_li = document.createElement("li");
    new_li.appendChild(a);
    lista_monedas.appendChild(new_li);
}

El template HTML de la home de nuestra aplicacion web en /templates/index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href='{{ url_for("static", filename="base.css") }}'>
    <script src='{{ url_for("static", filename="base.js") }}'></script>
    <title>{{ site_title }}</title>
</head>
<body>
    <h2>{{ site_title }}</h2>

    <p>
    <h3>Ver precios de criptomonedas</h3>
    <ul id="lista-monedas">
        {% for coin in ['BTC', 'ETH', 'LTC'] %}
        <li class="monedas">
        <a href="{{ url_for('datos', symbol=coin) }}">
            {{ coin }}
        </a>
        {% endfor %}
    </ul>
    </p>
    <p>
        <input type="text" id="nueva-moneda" placeholder="Introduce una nueva moneda">
        <button id="boton-nueva-moneda" onclick="agregar_moneda()">Añadir</button>
    </p>

</body>
</html>

El template HTML de la pagina de detalle de una criptomoneda en /templates/datos.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href='{{ url_for("static", filename="base.css") }}'>
    <script src='{{ url_for("static", filename="base.js") }}'></script>
    <title>{{ site_title }}</title>
</head>
<body>
    <h2>{{ site_title }}</h2>
    <p>
      Precio de {{ symbol }} a {{ to_symbol }}: <b>{{ data.lastPrice }}</b>
    </p>
    <p>
      Otros datos: {{ data }}
    </p>
    <p>
      <a href="{{ url_for('index') }}">Volver al inicio</a>
    </p>
</body>
</html>

Tarea

Crear una lista de criptomonedas en el backend y sacar la que esta en el frontend (la que dice ['BTC', 'ETH', 'LTC']). Se deberá pasar como variable de contexto al template. Asegurarse que el sitio siga funcionando de la misma forma.
Agrega un nuevo template HTML para mostrar un mensaje de error cuando no se encuentre la criptomoneda buscada. Nota: Cuando una criptomenoda no existe, el API devuelven {'code': -1121, 'msg': 'Invalid symbol.'}.