Améliorations supplémentaires de l’interface utilisateur

Dans cette partie on propose deux améliorations à l’interface utilisateur qui font l’objet de deux exercices:

• On souhaite d’abord afficher des informations supplémentaires concernant chaque vol lorsqu’un utilise clique sur un marqueur;
• On souhaite ajouter un menu permettant à l’utilisateur de choisir la compagnie aérienne dont il souhaite observer les vols.

Astuce Exercice 5: Informations supplémentaires sur chaque vol

Le code pour cet exercice se trouve dans le répertoire even_better_app. Ce code correspond à l’application qui devrait être obtenue à la fin de l’exercice précédent. Pour afficher des informations supplémentaires sur chaque vol, il faut procéder en deux étapes.

1. Dans le fichier even_better_app/utils.py, modifier la fonction fetch_flight_data pour inclure les information dans les dictionnaires de vols: code IATA des aéroports de départ et d’arrivée, vitesse au sol et type d’avion. Attention : il ne faut pas utiliser la fonction get_flight_details() car vous atteindriez immédiatement la limite de consultation de l’API Flightradar24.

def fetch_flight_data(
    client: FlightRadar24API,
    airline_icao: Optional[str] = None,
    aircraft_type: Optional[str] = None,
    zone_str: Optional[str] = None
) -> List[Dict]:
    """
    Fetch flight data from FlightRadar24 API for
    a given airline, aircraft type and zone.

    Args:
        client (FlightRadar24API): FlightRadar24API client.
        airline_icao (str): ICAO code of the airline.
        aircraft_type (str): Type of aircraft.
        zone_str (str): Zone string.

    Returns:
        List[Dict]: List of flights. A flight should be represented
            as a dictionary with latitude, longitude, id and additional
            keys.
    """
    zone = client.get_zones()[zone_str]
    bounds = client.get_bounds(zone)

    flights = client.get_flights(
        aircraft_type=aircraft_type,
        airline=airline_icao,
        bounds=bounds
    )
    return [
        {
            "id": flight.id,
            "aircraft_code": flight.aircraft_code,
            "latitude": flight.latitude,
            "longitude": flight.longitude,
            "origin_airport_iata": flight.origin_airport_iata,
            "destination_airport_iata": flight.destination_airport_iata,
            "ground_speed": flight.ground_speed,
        } for flight in flights
    ]

2. Pour afficher plus d’informations dans l’application, il faut modifier le contenu de la fonction update_graph_live dans even_better_app/main.py, et plus spécifiquement l’argument children du constructeur dl.Marker. Ajouter les codes des aéroports de départ et d’arrivée et la vitesse au sol.

@app.callback(
    ...
)
def update_graph_live(n, previous_data):
    ...

    # Update map children by adding markers to the default tiles layer
    children = default_map_children + [
        dl.Marker(
            position=[flight['latitude'], flight['longitude']],
            children=[
                dl.Popup(html.Div([
                    dcc.Markdown(f'''
                        **Identifiant du vol**: {flight['id']}.

                        **Aéroport d'origine**: {flight['origin_airport_iata']}.

                        **Aéroport de destination**: {flight['destination_airport_iata']}.

                        **Vitesse au sol**: {flight['ground_speed']} noeuds.
                    ''')
                ]))
            ],
            icon=get_custom_icon(
                get_closest_round_angle(flight['rotation_angle'])
            ),
        ) for flight in data
    ]

    return [children, data]

3. Exécuter l’application en lançant depuis la racine du projet dans un Terminal la commande

python even_better_app/main.py

Vous devriez obtenir davantage d’informations sur un vol en cliquant dessus, en fonction des changements que vous avez effectués.

Passons à l’exercice suivant.

Astuce Exercice 6: Ajout d’un filtre sur la compagnie aérienne

Dans cette exercice, nous allons ajouter à l’interface utilisateur un filtre permettant de choisir la compagnie aérienne dont les vols seront affichés. Le code pour cet exercice (à modifier encore une fois) se trouve dans le répertoire final_app.

1. Nous souhaitons d’abord modifier la mise en page de l’application. Modifier final_app/main.py de manière à intégrer dans app.layout une zone incluant un menu déroulant. Ce menu déroulant devra proposer plusieurs options de compagnie aériennes. Pour faciliter la suite, afficher le nom complet de la compagnie dans le menu déroulant mais faire en sorte que l’attribut value soit un code ICAO.

app.layout = html.Div([
    # The memory store reverts to the default on every page refresh
    dcc.Store(id="memory"),
    # The local store will take the initial data
    # only the first time the page is loaded
    # and keep it until it is cleared.
    dcc.Store(id="local", storage_type="local"),
    # Same as the local store but will lose the data
    # when the browser/tab closes.
    dcc.Store(id="session", storage_type="session"),
    html.Div([
        html.H3('Choix de la compagnie aérienne'),
        dcc.Dropdown(
            id='dropdown',
            options=[
                {'label': 'Air France', 'value': 'AFR'},
                {'label': 'Iberia', 'value': 'IBE'},
            ],
            value='AFR'
        )
    ], style={
        'width': '250px',
        'background': '#f8f9fa',
        'padding': '10px',
        'position': 'fixed',
        'top': 0,
        'left': 0,
        'height': '100vh'
    }),
    html.Div([
        dl.Map(
            id='map',
            center=[56, 10],
            zoom=6,
            style={'width': '100%', 'height': '800px'},
            children=default_map_children
        )
    ], style={'marginLeft': '270px', 'padding': '10px'}),
    dcc.Interval(
        id="interval-component",
        interval=2*1000,  # in milliseconds
        n_intervals=0
    )
])

2. Toujours dans final_app/main.py, modifier le décorateur callback de la fonction update_graph_live pour ajouter un Input correspondant à la compagnie sélectionnée dans le menu déroulant. Pour vous aider, vous pouvez relire cette page, notamment le point 1.c. Modifier également l’appel de la fonction fetch_flight_data pour que les données de la bonne compagnie soient récupérées.

@app.callback(
    [Output('map', 'children'), Output('memory', 'data')],
    [Input('interval-component', 'n_intervals'), Input('dropdown', 'value')],
    [State('memory', 'data')]
)
def update_graph_live(n, airline_icao, previous_data):
    # Retrieve a list of flight dictionaries with 'latitude', 'longitude', 'id'
    # and additional keys
    data = fetch_flight_data(client=fr_api, airline_icao=airline_icao, zone_str="europe")

3. Exécuter l’application en lançant depuis la racine du projet dans un Terminal la commande

python final_app/main.py

La même application se trouve en principe dans le répertoire correction. Et voilà ! Le prototype est terminé !

Dans la section suivante, nous allons voir comment déployer notre application Dash sur le SSP Cloud et la rendre accessible depuis Internet.