[06] Freitag, 18. Mai 2018

Ziele der Veranstaltung

  • Alle Beteiligten kennen die grundlegenden Begriffe des Internets (Das sind viele!)
  • Alle haben für die nächsten dreißig Tage einen Uberspace-Account.
  • Alle Beteiligten haben erste Schritte mit Python unternommen.
  • Alle Beteiligten habe eine Flask-Anwendung auf dem Uberspace zum weiteren Ausprobieren.

Thema: Provider, Server, Python und Flask

Registrierung bei Uberspace

  • Geh auf die Homepage von Uberspace und klicke "Ubernaut werden".
  • Trag einen schönen Username ein und lass die Checkbox für "Uberspace 7" aktiv. Klick "ab geht's" und ab geht's!
  • Trag auf der nächsten Webseite eine valide Email-Adresse ein und vergib ein sichers Kennwort. Schreib's Dir auf!
  • Lies die Zahlungsbedingungen und klick auf "Make it so!"

Einrichtung Uberspace

  • Klick auf der nächsten Seite auf "Datenblatt". Lies dort unter "Dein Uberspace im Web", wie Du Deine neue Seite erreichen können wirst. Ruf den Link auf, es wird dort "Forbidden" stehen. Das ist erklärbar, weil Du noch keine HTML-Dokumente o.ä. online gestellt hast.
  • Schau unter "Auf diesem Server liegt dein Uberspace" nach, wie der Host heißt, auf dem Dein Uberspace liegt.
  • Um per SSH auf Deinen Uberspace zugreifen zu können, musst Du noch eine Kleinigkeit erledigen. Klick auf der Seite "Datenblatt" ganz oben unter "Deine Zugangsdaten" auf "Zugänge verwalten".
  • Trag rechts unter "SSH-Zugang zum Uberspace" ein sicheres Passwort ein. Jetzt hast Du zwei, merke Dir beide gut und unterscheide sie: Das erste war für Deinen Account auf uberspace.de, das zweite für den Zugang zu Deinem Server! Später solltest Du einen SSH-Schlüssel hinterlegen, weil das komfortabler und sicherer ist.

Verbindung per SSH zum Server herstellen

Stelle eine Verbindung per SSH zu Deinem Account auf dem Uberspace-Server her. Beispiel:

$ ssh [username]@[server].uberspace.de # Stand auf dem "Datenblatt" bei Uberspace

Du solltest aufgefordert werden, Dein SSH-Passwort einzugeben. Die Erfolgsmeldung könnte wie folgt aussehen:

Das Herstellen einer SSH-Verbindung zu einem entfernten Server ist auf den drei gängigen Betriebssystemen unterschiedlich:

  • Windows: Der Klassiker ist PuTTY, weil es ohne Installation funktioniert und damit auch für den Unterricht gut geeignet ist. Darauf achten, dass Ihr die .exe-Datei für Euer Betriebssystem herunterladet.
  • MacOS: SSH ist schon vorinstalliert, es reicht, das Terminal zu öffnen und den Befehl, der oben steht, einzugeben.
  • Linux: SSH ist schon vorinstalliert, es reicht, ein Terminal zu öffnen und den Befehl, der oben steht, einzugeben.
Last login: Thu May 17 20:51:28 2018
Welcome to Uberspace 7!

Current version: 7.1.5.0
Manual: https://manual.uberspace.de/en/
Watch out for changes at: https://manual.uberspace.de/en/changelog.html
Follow us on Twitter for updates: https://twitter.com/ubernauten

In case anything is unclear or something breaks, feel free to reach out to our support team at hallo@uberspace.de!
[asdf@klemola ~]$

Umschauen auf dem Server

Gib mal folgendes Linuxkommando ein, um herauszufinden, wo im Dateisystem Du gerade bist:

$ pwd

Nun liste mal den Verzeichnisinhalt auf:

$ ls -la

Navigiere in den Ordner html, um ein erstes HTML-Dokument anzulegen:

$ cd html

List nochmal den Verzeichnisinhalt auf. Da ist noch nichts! Leg mit dem schmalen Editor nano eine index.html an:

$ nano index.html

Schreib einen Schnipsel HTML Deiner Wahl in den Editor und speichere mit STRG+X. Bestätige mit Y und drücke ENTER bei der Frage nach dem Dateinamen.

Nun rufe erneut Deine URL auf. Dort sollte Deine Website im Internet zu sehen sein!

Erste Schritte mit Python

Dein Uberspace kann auch Python. Lies darüber im Wiki von Uberspace nach und probier die folgenden Schritte einmal aus. Rufe als erste die interaktive Python-Konsole auf. Wir werden mit Python 3 arbeiten, daher:

$ python3.6

Du landest in einer Eingabeaufforderung, die ab jetzt Python von Dir verlangt. Los geht's!

>>> print("Hello World!")

Läuft! Rechne mal was:

>>> 3+4

Rechnen geht auch. Dann kommen jetzt die spannenden Sachen. Schreib ein erstes Python-Programm! Verlasse dafür wieder die Python-Shell mit STRG+D.

Öffne wieder nano mit folgendem Befehl:

$ nano programm1.py

Gib folgenden Code ein:

#!/usr/bin/env python3.6

for jubel in range(10):
    print("Ich lerne Python!")

Speichere Dein Programm, verlasse den Editor und mach die Datei ausführbar:

$ chmod +x programm1.py

Ruf das Programm auf:

$ ./programm1.py

Na, was steht da?

Flask in Betrieb nehmen

Flask ist ein so genanntes Framework, das auf Python basiert und für die schnelle Webentwicklung gedacht ist. Wir werden damit arbeiten. Zunächst muss Flask in Deinem Uberspace installiert werden:

$ pip3.6 install Flask --user

Nun kannst Du dynamische Webseiten entwickeln. Die einfachste Flask-Anwendung sieht wie folgt aus. Schreib Sie als app.py mit nano im Verzeichnis html.

#!/usr/bin/env python3.6

from flask import Flask
from flask import request

app = Flask(__name__)

# -- Homepage --
@app.route("/index.html")
def index():
    # Response, die an den Browser zurueckgeht
    return """
        <html>
                <head>
                        <title>Meine erste Flask-Anwendung</title>
                </head>
                <body>
                        <h1>Meine erste Flask-Anwendung</h1>
                        <p>Lorem ipsum...</p>
                        <a href="#">Ein Link...</a>
                </body>
        </html>
    """

@app.route("/team")
def team():
        return "<h1>Unser Team</h1>"

if __name__ =='__main__':
    app.run(host="127.0.0.1", port="61001", debug=True)

Beachte, dass auf demselben Server, z.B. auf klemola, nicht alle denselben Port haben können. Er muss laut Uberspace über 61000 liegen und noch frei sein. Vielleicht musst Du ein paar ausprobieren.

Speichere und schließe den Editor. Aus Gründen, die wir lieber in der Veranstaltung besprechen, weil sie hier zu weit führen, müssen wir noch eine Datei anlegen, die Anfragen an Dein neues Flask-Programm auch in die richtigen Bahnen lenkt. Das geht wie folgt, die Zusammenhänge kommen anschließend:

Leg eine neue Datei .htaccess im gleichen Verzeichnis an. Achte auf die korrekte Schreibweise mit dem führenden Punkt. Die Datei wird zwei Anweisungen aufnehmen, die der Webserver Apache bei jedem Aufruf Deiner Webseite ausführt:

RewriteEngine On
RewriteRule (.*) http://localhost:61001/$1 [P]
Options +MultiViews

Beachte, dass die Portnummer dieselbe sein muss wie in der app.py!

Speichere und schließe den Editor.

Mach die Datei app.py ausführbar...

$ chmod +x app.py

... und teste das Programm:

$ ./app.py

Die Erfolgsmeldung sollte so aussehen:

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:61002/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 231-450-442

Nun rufe die Anwendung wie folgt im Browser auf:

https://[username].uber.space/

Sollte funzen! Mit dem Einstieg kannst Du jetzt in die Programmierung dynamischer Webseiten einsteigen. Alles weitere steht in den Dokumentationen von Uberspace, Python und Flask.

Auftrag

  • Arbeite Dich in Flask ein. Ziel ist es, dass Deine bisher statische Website oder Anwendung von Flask ausgeliefert wird.
  • Für alle mit einem Raspberry: Versucht, die Schritte im Tutorial mit dem Raspberry nachzuvollziehen. Bekommt ihr es hin, dass eine Website ausgeliefert wird?

Abgabetermin

Der Auftrag ist bis zum Mittwoch, 30.05.2018, zu erledigen.