Tagebuch-Eintrag #62
Flask – API einlesen und ausgeben

Ich hatte bei meinem ersten Tagebuch-Eintrag zu Flask schon erwähnt, dass ich die Daten zur Raumstation ISS versuchen möchte via Flask auszulesen und auch auszugeben.

Ich denke, ich bin jetzt soweit, dass ich das probieren möchte. Langer Rede und kurzer Sinn.

Ich fang mal an 🙂

Die kleine Übung mit Flask

Im Gegensatz zu meiner ersten Übung API der ISS Position auslesen muss ich in diesem Fall wohl keine Daten in eine CSV-Datei schreiben und weiterverarbeiten.

Hier genügt es die Daten aus der JSON-Datei auszulesen und auf der Webseite wiederzugeben.

Ich werde sowohl die Daten von der aktuelle Position der Raumstation, als auch die Daten zu den Personen in der Raumstation ISS ausgelesen. Wird eine schöne Übungsaufgabe mit Flask 🙂

Einlesen der JSON-Dateien

Ich füge hier meine Code ein und erkläre am besten darunter, wie meine Vorgehensweise ist.

Ich bin sicher, dass es auch anders geht, vielleicht auch einfacher. Aber ich bin noch nicht soweit und mir fehlt noch eine Menge Erfahrung mit Python/Flask. Für mir war und ist es erstmal wichtig, dass der Code funktioniert 🙂 Also hier ist der Code und Erklärung zu meiner Vorgehensweise folgt darunter.

# Importiere Flask
from flask import Flask, render_template, url_for
import requests
# Flask-App Instanz definieren
app = Flask(__name__)

# Standard-URL zum Aufrufen der Flask-App: 127.0.0.1:5000
# Wenn die Startseite aufgerufen wird, wird diese Ausgabe getätigt/Funktion ausgeführt: "Hello World"
@app.route('/')
def hello_world():
    print ("URL-FOR AUGABE:", (url_for('static', filename='style.css')))
    return render_template('index.html')

# Wenn die Unterseite "about" aufgerufen wird, wird diese Ausgabe getätigt/Funktion ausgeführt: "About me"
@app.route('/about')
def its_me():
    # Wert name und status werden im main.html-Template übergeben und ausgegeben
    return render_template('index.html', name='Jing', status='Flask lernen')
# Die Seite für ISS-Position ausgeben.
@app.route('/iss')
def iss_status():
    # Request der JSON-Dateien
    response_astros = requests.get("http://api.open-notify.org/astros.json")
    response_iss_now = requests.get("http://api.open-notify.org/iss-now.json")
    # Status Check der APIs
    status_astros = response_astros.status_code
    status_iss_now = response_iss_now.status_code
    print("Status astros.json:", status_astros)
    print("Status iss-now.json:", status_iss_now)
    # JSON-Dateien auslesen und als Dictionary {...} ausgeben
    astros = response_astros.json()
    iss_now = response_iss_now.json()
    print("astros JSON:", astros)
    print("iss-now JSON:", iss_now)
    # Einzelne Daten erfassen und Variable zuweisen
    astros_number = astros["number"] # Anzahl der Personen auf der ISS
    astros_names = astros["people"] # Liste und Dictionary mit den Namen ansprechen.
    # Leere List um die Namen zuspeichern
    astros_name = []
    # For-Schleife um das Dictionary mit den Namen abzufragen
    for people in range(len(astros_names)):
        # print(astros_names[people])
        # print(astros_names[people]["name"])
        # Namen werden in eine neue Liste gespeichert
        astros_name.append(astros_names[people]["name"])
    # For-Schleife umm die NAmen aus der neuen Liste einzelb abzurufen
    for item in astros_name:
        print("Kontroll-Ausgabe, Name aus Namens-Liste:", item)
    iss_lat = iss_now["iss_position"]["latitude"] # ISS Breitengrad
    iss_lon = iss_now["iss_position"]["longitude"] # ISS Längengrad
    iss_time = iss_now["timestamp"] # Zeitstempel als UNIX-Zeit
    print ("ISS-NOW - Kontroll-Ausgabe:", iss_lat, iss_lon, iss_time)
    return render_template('index.html', statuscode=response_iss_now, astros_number=astros_number, iss_lat=iss_lat, iss_lon=iss_lon, iss_time=iss_time, names=astros_name )

Als erstes brauche ich zum einlesen der JSON-Datei das request-Modul, was ich von meinen vorherigen Lektionen schon kenne. Es wird einfach am Anfang der hello.py Datei importiert (Zeile 2). Dann erstelle ich eine neue app.route für die Seite, wo ich die ISS-Daten ausgeben möchte (Zeile 20) und danach die Funktion. In der Funktion definiere ich einfach die JSON-Dateien, die ich auslesen möchte (Zeile 23 u. 24)

Danach prüfe ich den Status mit einem einfachen print-Befehl. Die Ausgabe der Printbefehle erfolgt im Terminal und nicht auf der Webseite, so kann schnell und einfach die Korrektheit von einfachen Dingen prüfen. Was für mich als Anfänger sehr praktisch ist, wenn ich noch nicht sicher bin 🙂

Ist der Status ok – also 200 – gehe ich zur nächsten Aufgabe, nämlich das Einlesen der benötigten Daten. In meinem Fall die Anzahl der Astronauten, die derzeit auf der ISS sind (Zeile 36) und die Namen (Zeile 37), wobei diese verschaltet und sich innerhalb von Listen/Dictionaries befinden.

{'message': 'success', 'people': [{'name': 'Sergey Ryzhikov', 'craft': 'ISS'}, {'name': 'Kate Rubins', 'craft': 'ISS'}, {'name': 'Sergey Kud-Sverchkov', 'craft': 'ISS'}], 'number': 3}

Um nur die Namen zu bekommen, schreibe ich keine for-Schleife (ab Zeile 41) in der ich die Namen einer leeren Liste hinzufüge.

Anschließen kontrolliere ich, ob die Liste mit den Namen korrekt befüllt und ausgegeben wird. Dies mache ich mit eine weitere for-Schleife (Zeile 47, 48).

Damit ist der Astronauten-Teil fertig. Und weiter geht es zur ISS-Position. Gemäß der JSON-Datei werden die Positionen auf dem Breitengrad und Längengrad angegeben, sowie die dazugehörige Zeit (Zeile 49 bis 51). Auch diese Ausgabe prüfen ich vorab mit einem Printbefehl.

Ausgabe im Template

Nachdem die benötigten Daten in der Flask-App korrekt ausgelesen werden konnte. Muss ich diese Daten irgendwie mit dem Template verknüpfen. Da ich für die benötigten Daten auch die Variablen definiert habe, muss ich also nur bei render_template() die Variablen angeben, die im Template ausgegeben werden sollen (Zeile 53). Es folgt jetzt die HTML-Datei und die Erklärung folgt darunter 😉

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        {% if name %}
         <title>learn FLASK Hallo {{ name }}</title>
        {% else %}
            <title>learn FLASK Halle Welt</title>
        {% endif %}
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <strong>Das ist die index.html Datei</strong>
        {% if name %}
            <h1>ABOUT</h1>
            <strong>Hallo {{ name }}!</strong>
            <p>Was machst du gerade?
                <br/><strong><em>{{ status }}</em></strong>
            </p>
        {% elif statuscode %}
        <h1>ISS Daten</h1>
            <p><strong>Status:</strong> {{ statuscode }} </p>
            <p>Es sind derzeit <strong>{{ astros_number }}</strong> Personen auf der ISS</p>
            <p><strong>Personen auf der ISS: </strong> </p>
            <ul class="iss-astros-names">
                {% for name in names %}
                    <li>{{ name }}</li>
                {% endfor %}                
            </ul>
            <p><strong>ISS Breitengrad: </strong> {{ iss_lat }}</p>
            <p><strong>ISS Längengrad: </strong> {{ iss_lon }}</p>
            <p><strong>ISS Zeit: </strong> {{ iss_time }}</p>
        {% else %}
            <h1>Startseite</h1>
            <strong>Hallo Welt!</strong>
        {% endif %}

        <script src="" async defer></script>
    </body>
</html>

Ab der Zeile 30 bis 42 habe ich meinen Code für die Ausgabe der ISS-Daten eingefügt. Zuerst wird geprüft ob der Status von der JSON-Datei für Astronauten korrekt gelesen werden konnte. Danach wird erst eine H1-Überschrift ausgegeben und danach nochmal den Statuscode der o.g. JSON-Datei.
In der nächsten Zeile (33) gebe ich an, wie viele Personen sich derzeit auf der ISS befinden und danach folgt eine for-Schleife um die Namen auszugeben, die in der Variable astros_name, welches bei render_template unter names, zugewiesen und abgespeichert wurde. Die for-Schleife wird nach Jinja Platzhalter geschrieben:

For-Schleife in Jinja-Template

<ul id="iss-astros-names">
    {% for name in names %}
        <li>{{ name }}</li>
    {% endfor %}                
</ul>

Es beginnt mit {% for name in names %} und endet mit {% endfor %}. Eigentlich nichts anderes als in der hello.py, nur eine etwas andere Schreibweise.

Darunter folgt die Ausgabe von der ISS-Position und die dazugehörige Zeit. Das sind dann nur einfach Ausgaben von den Variablen.

Die Zeit belasse ich mal bei der UNIX-Zeit. Das zu konvertieren ist dann ein anderer Tagebuch-Eintrag 😉

Und die HTML-Seite sieht damit so aus. Noch ohne Formatierung.

Ich muss sagen, es macht Spaß. Es macht wirklich Spaß und ich habe Lust auf mehr. Und ich habe mich für ein kostenloses API-KEY bei der NASA angemeldet. Damit werde ich mehr experimentieren können – sogar mit Bilder vom Mars 🙂 Ihr ahnt sicher schon, was später noch kommen wird in meinem Python-Tagebuch-Eintrag 😉

Bis dahin, bleibt gesund!