Papa programmiert

Projekt Schiffeversenken

Arbeiten mit Flask

Die Installation von Flask erfolgt über das Terminal mit:

pip install flask

Bevor wir starten, überlegen wir, ob wir eine virtuelle Umgebung verwenden wollen. Vorteile:

Isolierte Installation der Pakete
Keine Auswirkungen auf andere Projekte

Solltet Ihr Euch für eine virtuelle Umgebung entscheiden, müsst Ihr diese erst einrichten, bevor Ihr Flask installiert. Wie das geht, findet Ihr über eine Internetrecherche.

Ich habe mich gegen eine virtuelle Umgebeung entschieden, sauber wäre es allerdings.

Egal wie Ihr Euch entscheidet, wir gehen jetzt unsere erste Version an.

Schauen wir kurz auf die Struktur:

Übertragen in VSCode sieht das bei mir dann so aus:

Hinweis

Bevor Ihr alles per Hand kopiert, könnt Ihr Euch auch die Sourcen hier oder über den Button unten herunterladen.

In die Datei app.py kopiert Ihr folgendes:

from app_init import create_app

app = create_app()

if __name__ == '__main__':
    app.run(debug=True)

In app_init.py:

from flask import Flask

def create_app():
    app = Flask(__name__)

    # Blueprints registrieren
    from routes import main
    app.register_blueprint(main)

    return app

Weiter geht es mit routes.py:

from flask import Blueprint, render_template

# Erstelle den Blueprint für die Routen
main = Blueprint('main', __name__)

@main.route('/')
def index():
    return render_template('index.html')

Die Datei base.html sieht so aus::

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>I can haz embedded CSS and JS</title>
	<style>
		@media print {
			p { color: red !important; }
		}
	</style>
</head>
<body>
	<h1>I can haz embedded CSS and JS</h1>
	<script>
	if (true) {
		console.log('foo');
	}
	</script>

</body>
</html>

Dazu die Datei index.html:

{% extends 'base.html' %}
{% block content %}
<h3>Kann losgehen?</h3>
<div class="button-text-container">
    <button type="submit" class="button-index">Go</button>
</div>
{% endblock %}

Und damit es schon einen ersten Eindruck gibt, in die Datei styles.css kommt folgendes:

/* Grundlayout */
body {
  font-family: 'Montserrat', Verdana, Geneva, Tahoma, sans-serif; /* Schriftart */
  background-color: #f8f9fa;
  margin: 0;
  padding: 20px;
  color: #333;
}

/* Button */
.button-index {
  padding: 10px 20px;
  margin: 5px;
  background-color: #007bff;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

Die Datei games.js bleibt erst einmal leer. Lassen wir es laufen!

Jetzt müsste bei Euch auch wieder der Run-Button oben rechts funktionieren (Bild zum Vergrößern anklicken):

Nun wieder dem Link folgen oder im Browser http://127.0.0.1:5000/ eingeben, dann landet Ihr auf der Startseite der Anwendung:

Falls nicht, Starten der Anwendung über ein neues Terminalfenster, dann "flask run" eingeben, das sollte es auch tun:

Damit sind wir am Ende von version_01 eine genauere Beschreibung gibt es in der Projektdoku (Download hier). Den Sourcecode könnt Ihr hier oder über den Button unten herunterladen.

Inhaltsverzeichnis:

1. Vorwort
2. Das Projekt
3. Vorarbeiten
4. Das Projekt „Schiffeversenken“
4.1. Der Funktionsumfang
4.2. Die Planung der Umsetzung
4.3. Das Coden
4.3.1 Arbeiten mit Flask
4.3.2 Die Datenbank
4.3.3 Der Spielstart
4.3.4 Der Spielcode
4.3.5 Die Spielfelder
4.3.6 Setzen der Schiffe
4.3.7 Das Spielen
4.4. Die Veröffentlichung
5. Abschluss