PyWarcaby to seria artykułów, w których opisuję proces tworzenia gry przeglądarkowej w warcaby angielskie. Grę tworzę w języku Python jako projekt na zaliczenie przedmiotu na studioach. Wciąż uczę się programowania w języku Python, dlatego zapraszam wszystkich do obserwowania serii i wspólnej nauki!

Informacja: począwszy od tego posta, seria będzie publikowana przy użyciu serwisu Utopian.io. Dzięki temu struktura wpisów będzie bardziej przejrzysta.

Logo serii PyWarcaby.
_{Zdjęcie w tle: Paul Brennan (w domenie publicznej).}
^{Logo Pythona: Python Software Foundation}

Wstęp

Witaj w drugim wpisie w serii PyWarcaby. Ostatnim razem wprowadziłem cię w specyfikację projektu, opisałem większość zasad warcabów angielskich. Pisałem też trochę o samej aplikacji. Najważniejsze funkcje PyWarcabów to możliwość rozgrywki z innym graczem na innym komputerze oraz rozgrywka z komputerem, dzięki której będzie można zmierzyć się z (raczej nie wysoce zaawansowaną) sztuczną inteligencją (opartą o algorytm min-max).

Jeden wpis, w którym tylko gadam, to jednak wystarczająco. Dzisiaj przejdziemy wreszcie do bardziej technicznych aspektów i zaczniemy kodować. Poniżej skrót dzisiejszego artykułu.

Czego się nauczę?

Dzisiaj nauczysz się, jak zainstalować wszystkie potrzebne aplikacje i poprawnie skonfigurować środowisko developerskie. Następnie stworzysz prostą aplikację opartą o framework Flask.

• Jak zainstalować Pythona 3, Pip oraz Flaska?
• Jaką strukturę folderów i plików przyjmie nasza aplikacja?
• Jak stworzyć najprostszą aplikację we Flasku?
• Jak dodać szablony i style do aplikacji?
• Jak uruchomić aplikację na serwerze localhost?

Wymagania

Na łamach tego wpisu zakładam, że używasz dystrybucji Linuxa opartej na Ubuntu, bowiem musisz mieć dostęp do menedżera pakietów APT, przy pomocy którego będziemy instalować niektóre zależności.

• Ubuntu (preferencyjnie w wersji 14.04 lub nowszej)
• Podstawowa wiedza nt. terminala i jego użytkowania
• Bardzo podstawowa wiedza nt. jakiegokolwiek języka programowania

Trudność

Czynności opisywane w tym tutorialu są dosyć proste, na razie obędzie się bez dodatkowej magii.

• Podstawowa

Treść wpisu

1. Stos technologiczny

W tej części opiszę dokładnie stos technologiczny, którego będę używał. Opiszę także moje środowisko programistyczne oraz uruchomieniowe.

Ta część jest ważna, jeżeli chciałbyś testować oprogramowanie z tej serii na swoim własnym komputerze.

2. Tworzenie aplikacji

W tej części zainstalujemy wszystkie zależności potrzebne do pracy nad aplikacją oraz stworzymy bardzo podstawową, bazową aplikację dla gry PyWarcaby.

---

1. Stos technologiczny

Python 3

Oczywiste, że będziemy potrzebowali interpretera języka Python, aby w ogóle móc uruchomić program napisany w tym języku. Jeżeli używasz systemu Ubuntu, to prawdopodobnie masz już zainstalowany interpreter języka w wersji 2. My jednak będziemy używać Pythona w wersji 3., dlatego musimy doinstalować wymaganą paczkę.

Aby to zrobić, otwórz terminal i wywołaj komendę:

$ sudo apt install python3

To powinno zainstalować w twoim systemie interpreter Python 3. Aby sprawdzić poprawność instalacji, spróbuj w terminalu wywołać polecnie:

$ python3

Pip

Pip to menedżer zależnośći dla aplikacji stworzonych w Pythonie. Jego nazwa oznacza Pip Installs Packages, Pip Installs Python lub Preferred Installer Program. Będziemy potrzebować Pip w celu zainstalowania Flaska, a także innych zależności w przyszłości (o ile pojawią się takowe).

$ sudo apt install python-pip

Jeżeli instalacja się powiodła, możesz sprawdzić zainstalowaną wersję pip wpisując w terminalu poniższe polecenie:

$ pip -V

Flask

Flask to ostatnia paczka, której będziemy potrzebowali. Jak pisze jej autor na stronie internetowej frameworka:

Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions. And before you ask: It's BSD licensed!
— flask.poco.org

Flask to bardzo prosty szkielet aplikacji, który pozwala tworzyć strony i aplikacje internetowe przy użyciu języka Python. Flask udostępnia tak podstawowe funkcjonalności jak ścieżki routingu, obsługę zapytań, szablony i zarządzanie sesją. Poza tym jest darmowy i otwartoźródłowy oraz posiada całkiem aktywną, pomocną społeczność.

Aby zainstalować Flaska użyjemy menedżera Pip:

$ pip install Flask

Chcemy także zainstalować interpreter Flaska, który dostepny będzie z poziomu terminala. Wpisz w terminalu:

$ sudo apt install python-flask

Front-end

Będę używał staromodnych HTML oraz CSS, aby stworzyć interfejs graficzny gry PyWarcaby. W tym momencie prototypuję w czystym CSS, ale niewykluczone, że wkrótce przeniosę się na SCSS.

Używam także frameworka Kube CSS aby przyspieszyć tworzenie interfejsu gry. Wybrałem Kube, ponieważ jest lekkie i proste.

2. Tworzenie aplikacji

Kiedy wreszcie zainstalowaliśmy wszystkie zależności, możemy wreszcie zacząć tworzyć naszą aplikację!

2.1. Struktura plików

Zacznijmy od przygotowania struktury plików i folderów dla naszej aplikacji:

run.py
/pycheckers
. . /templates
. . . . base.html
. . . . index.html
. . /static
. . . . __init__.py
. . views.py

2.2. Plik run.py

run.py to plik, przy pomocy którego będziemy uruchamiać aplikację. Jest on odpowiedzialny za wczytanie całej naszej gry i uruchomienie jej na odpowiednim serwerze oraz porcie. Zawartość plikurun.py to tylko trzy linijki:

#!flask/bin/python
from pycheckers import app

app.run(host='127.0.0.1', port=5000, debug=True)

Importujemy aplikację app z modułu pycheckers (czyli folderu pycheckers), a nastepnie uruchamiamy ją przy pomocy metody app.run(). Argumenty określające hosta, port oraz debugowanie są ustawione na wartości domyślne, jednak pozostawiłem je, aby było to przejrzyste.

2.3. Folder /pycheckers

To właśnie tutaj przechowujemy wszystkie pliki naszej gry: logikę, treść, szablony, style, pliki statyczne itd.

Najpierw musimy zainicjalizować naszą aplikację w pliku __init__.py:

from flask import Flask

app = Flask(__name__)

from pycheckers import views

Ten plik importuje moduł Flaska do zmiennej app oraz importuje ścieżki routowania (views). Tak wygląda treść pliku views.py w najbardziej podstawowej wersji:

from hello_world import app

@app.route('/')
def index():
    return "Hello world!"

Informujemy Flaska, że na ścieżce domowej naszej aplikacji internetowej (adres /) chcemy wywołać funkcję index(), która zwróci tekst Hello world!.

Teraz jeżeli udamy się do katalogu z naszą aplikacją (tam gdzie znajduje się plik run.py) i uruchomimy naszą aplikację wpisując w terminalu:

python3 run.py

wszystko powinno zadziałać i nasza prosta strona będzie dostępna w przeglądarce po wpisaniu w pasek adresu: localhost:5000. Jeżeli wszystko działa, zobaczysz napis Hello world! wypisany na białym tle.

2.4. Szablony

Nie chcemy jednak wypisywać suchego tekstu, czyż nie? Na szczęście Flask domyślnie wspiera system szablonów Jinja 2 i to właśnie jego będziemy używać.

Nie będę zagłębiał się w szczegóły nt. Jinjy (dostępna jest bardzo obszerna i pomocna dokumentacja), ale opiszę tylko dwa podstawowe znaczniki:

{{ }} — podwójne klamerki wykorzystuje się do wypisania zmiennej lub wartości zwracanej przez funkcję, np. tak: {{ variable_name }}
{% %} — pojedyncze klamerki z procentami wykorzystywane są do tworzenia konstrukcji takich jak pętle, if-else, zagnieżdżania szablonów i innych działań. Przykładowa konstrukcja: {% if x in y %} X is in Y! {% endif %}

Mamy już utworzony folder /templates i to właśnie tam będziemy przechowywać wszystkie nasze szablony w Jinja'y. Jest to domyślny folder Flaska, ale można go zmienić. Wewnątrz folderu z szablonami mamy już pliki base.html oraz index.html. Zobaczmy, jak będzie prezentować się zawartość tego pierwszego:

<html>
<head>
    <title>{% block title %}{% endblock %} - PyCheckers </title>
</head>
<body>

    <h1>PyCheckers</h1>

    <div id="content">
        {% block content %}{% endblock %}
    </div>

    <footer>
        <p>PyCheckers - stopka.</p>
    </footer>

</body>
</html>

Ten szablon nosi nazwę bazy nie bez powodu: jest to bazowy szablon, który będziemy wykorzystywać do generowania wszystkich innych szablonów. Pozwala to zastosować zasadę DRY (don't repeat yourself), bowiem elementy takie jak nagłówek strony czy jej stopka będą automatycznie wstawiane do innych szablonów.

{% block content %}{% endblock %} to najważniejsza część tego szablonu. W ten sposób oznaczamy miejsce, gdzie będziemy mogli wstawić automatycznie treści innych szablonów – na przykład w pliku index.html:

{% extends "base.html" %}
{% block title %}Homepage{% endblock %}

{% block content %}
    <h2>Homepage</h2>

    <p>
      Welcome to PyCheckers game.
    </p>
{% endblock %}

Informujemy system Jinja, że szablon ten rozszerza (extends) domyślny szablon base.html. Oznaczamy także {% block content %}, a jego wnętrze automatycznie wstawi się w odpowiednie miejsce w szablonie bazowym.

Teraz musimy tylko zmodyfikować nasze ścieżki routowania tak, aby zamiast wypisywać tekst generowały szablony. Otwórz plik views.py i zmodyfikuj jego treść w następujący sposób:

from hello_world import app

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

Funkcja index() zamiast zwracać tekst, zwraca wywołanie funkcji render_template() – ta zaś wyrenderuje szablon przekazany w argumencie.

Jeżeli teraz udasz się pod adres localhost:5000, zobaczysz ładną stronę z nagłówkami <h1> i <h2>, a także zdaniem umieszczonym w znaczniku <p>.

2.5. Pliki statyczne (CSS i JS)

Teraz chcemy jeszcze umożliwić dodawanie plików statycznych do naszych szablonów: stylów CSS, skryptów JavaScript oraz obrazków. Do tego będzie nam potrzeby folder /static, gdzie domyślnie Flask będzie szukał wszystkich statycznych zasobów. Tak wygląda struktura folderu /static:

/static
. . /css
. . . . style.css
. . /js
. . . . main.js

Aby uzyskać wewnątrz szablonów dostęp do tych plików, użyjemy wbudowanej funkcji url_for(). Zmodyfikuj blok <head> w pliku base.html poprzez dodanie tam poniższej linijki:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

Zaraz przed znaczknikiem zamykającym ciało szablonu (</body>) dodaj natomiast wczytywanie skryptu main.js:

<script src="{{ url_for('static', filename='js/script.js') }}"></script>

W ten sposób Flask automatycznie wygeneruje poprawne ścieżki do tych statycznych zasobów. Zostaną one także automatycznie dodane do wszystkich szablonów naszej aplikacji, bowiem korzystają one z szablonu bazowego base.html.

Podsumowanie

Dzisiaj udało nam się przygotować środowisko developerskie i zainstalować wszystkie potrzebne zależności oraz programy. Następnie stworzyliśmy bardzo podstawową aplikację we Flasku. Następnym razem stworzymy już ostylowaną szachownicę z pionkami graczy, które dodatkowo będzie można wybierać i przesuwać!

Zapraszam do obserwowania tej serii wszystkie osoby zainteresowane programowaniem oraz technologiami komputerowymi i internetowymi. PyWarcaby to seria, która pomoże w nauce programowania i pozwoli zapoznać się z myśleniem algorytmicznym.

Zachęcam też do komentowania tego wpisu jak i przyszłych. Nie jestem wybitnym programistą, zapewne będę popełniał wiele błędów i niedopatrzeń. Jeżeli zauważysz taki błąd, masz jakąś propozycję albo po prostu chcesz o coś zapytać: pisz śmiało w komentarzach!

Dzięki za uwagę i do następnego artykułu!

---

Seria PyWarcaby

To drugi wpis z serii PyWarcaby, w której opisuję proces tworzenia gry przeglądarkowej w warcaby angielskie przy pomocy Pythona 3 i Flaska. Poniżej znajdziesz linki do poprzednich wpisów z tej serii:

#1 — Wprowadzenie (na Steemit)

W poście wprowadzającym opisuję mój projekt: dlaczego go robię, jak zamierzam go zrobić i przy użyciu jakich technologii. Opisuję także zasady warcabów angielskich.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---