Jestem wielkim zwolennikiem praktycznego nauczania, dlatego nie ma co się rozpisywać, działajmy! 🙂

W tej serii artykułów stworzymy aplikację webową, wyświetlającą ogłoszenia o pracę z portalu GitHubJobs.

Jaka będzie to apka? Możecie ją sprawdzić live pod adresem:
https://serach-jobs-app.herokuapp.com/

Repozytorium projektu na GitHub:
https://github.com/bigeyedes/flask-search-jobs-app

Jaki jest plan?

  1. Nauczymy się obsługi jednego z najpopularniejszych frameworków Python – Flask
  2. Skorzystamy z GitHubJobs API, które przekaże nam wyniki w formacie JSON, uniwersalnym formacie komunikacji między językami programowania – celowo też wybrałem te API, ponieważ nie wymaga autoryzacji, więc nie będziecie musieli rejestrować kont.
  3. Napiszemy aplikację, dzięki której będziemy mogli wyszukiwać, sortować i przeglądać ładnie sformatowane ogłoszenia o pracę – użyjemy tutaj na froncie kalsycznie, CSS i HTML5 + Bootstrap. Tak, wiem, że jQuery to monolit, ale na potrzeby tutorialu, tak będzie łatwiej dla wszystkich.
  4. Napiszemy testy jednostkowe, dzięki czemu zyskamy pewność, że nasza aplikacja nie będzie wadliwa i przewidzimy jej zachowanie.
  5. Na koniec zrobimy deploy na Heroku, aby nasza apka działa live i kto wie, może się przydać, lub być może będziecie chcieli ją samodzielnie rozbudować! 🙂

Sporta dawka wiedzy, od korzystania z Flask na wielu poziomach, przez zewnętrzne public API, JSON, front-end, po deploy. Kompletny, praktyczny projekt, tak dla początkujących i średnio-zaawansowanych.

To na tyle opisu, zacznijmy.

Upewnijcie się, że macie zainstalowanego Pythona 3.7 na swoim PC, jeśli nie znajdziecie go tutaj

Zainstalujmy Flask

Po otworzeniu katalogu w swoim edytorze, musimy zainstalować wirtualne środowisko, czyli virtual enviroment, dzięki czemu utworzymy powłokę, w której będziemy mogli zainstalować framework

W tym celu uruchomcie terminal w edytorze i wykonajcie następujące instrukcje:

python -m venv env

python – wykonuje komendę języka
venv – komenda dla utworzenia wirtualnego środowiska
env – nazwa środowiska

Zaraz po tym działaniu, środowisko należy aktywować poprzez komendę:

env\Scripts\activate

Instalujemy Flask:

pip install Flask

voilà – Flask gotowy!

Proste i szybkie prawda? Za to kocham Pythona!

Na koniec deaktywujcie środowisko używając komendy:

deactivate

Flask został zainstalowany, więc wirtualne środowisko na razie nie będzie nam potrzebne.

Wg dokumentacji powinno uruchamiać się aplikację Flask, właśnie przez środowisko, ale jest lepszy, szybszy i w pełni automatyzowany sposób, który niebawem przedstawię.

Struktura plików

Tworzymy katalog główny application, zaraz obok katalogu ze środowiskiem wirtualnym. Będzie znajdować się logika naszej aplikacji, wszystkie funkcje, templatki, style i wiele więcej. Możemy również stworzyć katalog tests, na tym samym poziomie, w przyszłości umieścimy tam plik z testami jednostkowymi.

W tym katalogu znajdują się foldery i pliki:

  1. Folder static – w nim będziemy przechowywać pliki statyczne, jak style, obrazy, ikony, skrypty JavaScript
  2. Folder templates – osadzimy tu szablony stron HTML, jak strona główna i podstrony
  3. Plik main.py – główna logika aplikacji, która będzie spajać wszystko co aplikacja ma wykonać
  4. Plik scripts.py – zdefiniujemy tutaj funkcje, które obsłużą aplikację i przekażą dane do main.py

Finalnie nasza struktura aplikacji, będzie kreować się tak:

application
|—- static
|—- templates
|—– main.py
|—– scripts.py
env
tests

Dobrze, dopalmy więc Flask w przeglądarce!

W pliku main.py zaczniemy pisać naszą aplikację. Napiszmy podstawowy kod uruchamiający Flask w przeglądarce:

# imports
from flask import Flask

# zmienna aplikacji
app = Flask(__name__)

# routing
@app.route('/')
def hello_world():
    return '<h1>Mops jest słodki i puszysty</h1>'

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

W sekcji imports, jak sama nazwa wskazuje, importujemy moduł flask z klasą Flask do naszej aplikacji.

Flask zostaje przypisany do zmiennej app, gdzie tworzona jest instacja klasy Flask

Dekorator @app.route(‚/’), podpowiada Pythonowi, że uruchamiając właściwy url w przeglądarce, powinna wykonać się poniższa funkcja. Dla strony głównej jest to url = ‚/’, np. dla bloga byłby to url = ‚/blog’ etc.

I tu ciekawy zabieg. Instrukcja warunkowa, dzięki której nie będziemy musieli przy każdej zmianie uruchamiać aplikacji ze środowiska wirtualnego. Włączyliśmy tryb debugowania, przez co możemy zająć się pisaniem kodu, zamiast za każdym razem uruchamiać aplikację na nowo, co zaleca się w dokumentacji 🙂

Spróbujmy zatem odpalić naszą apkę. Wpisujemy w terminalu komendę uruchamiającą główny plik aplikacji:

python main.py

Pod adresem: http://127.0.0.1:5000/ nasza aplikacja będzie aktywna, a Wy powinniście zobaczyć, taki oto przepiękny obrazek:

Chyba nie było zbyt trudno prawda? 🙂

Stworzyliśmy podstawową konfigurację i strukturę naszej aplikacji we Flask, i sprawdziliśmy działanie.

Czy było trudno? Pewnie nie, dlatego mam nadzieję, że spodobała Wam się zajawka tego co będziemy robić w tej serii 🙂

Jeśli macie pytania piszcie, chętnie odpowiem! Będę wdzięczny również za podzielenie się opinią lub udostępnienie tego tutoriala, jeśli okazał się dla Was przydany!

Niedługo kolejna część, w której zajmiemy się już budową właściwej części apki! 🙂