FÁZE TŘETÍ - @movieCorn.run()

01.12.2018

A na čem to spustíme? 

Pro naši appku jsme zvolily FLASK. Flask je webový microframework pro programovací jazyk Python a podle toho, co jsme o něm četli, tak to má být ten z jednodušších  (chtěly bychom tedy vidět ty těžší:)

Čekalo nás opět samostudium FLASKU (čerpaly jsme z dokumentace Flask na https://flask.pocoo.org, video-tutoriálů z Youtube atd.).

Namapování home-page aneb "Už by to mělo kruci běhat..."

Vyzbrojeni základními informacemi ze samostudia jsme se pokusily podle návodů "naroutovat" naši home-page, tj. index.html. Musím říci, že v tomto bodě jsme se hodně potrápily, jelikož nám to stále nechtělo naši home-page zobrazit a musely jsme hledat příčinu. Pro milióntém zadání příkazu "python server.py" ve Visual Studio Code se nám to ale podařilo. Základní stavební kámen k webovému API byl položen. S radostí jsme pak naroutovaly ještě stránky na Přihlášení a Registraci. Opakující hlavičku každé naší stránky jsme pak uložily zvlášť jako layout.html, v kódu těchto stránek se pak už nemusela opakovat a stačilo na ní odkázat.

Namapování home-page a stránek Registrace a Přihlášení v server.py:

Odkaz na layout.html v index.hmtl (home-page):

Ukázka kódu z layout.html:

HLEDEJ AJAX, HLEDEJ

Vše bylo připraveno na další krok - propojení našeho webového API (Flasku) s databází filmů a zprovoznění připravených filtrů. Pro tyto účely bylo třeba nakouknout do JavaScriptu - konkrétně jsme využily javascriptovou knihovnu AJAX. Její velkou výhodou je, že není nutné znovunačítání a překreslování celé stránky, překreslují se pouze části, kde uživatel provedl nějakou akci (kliknutí na tlačítko apod.). To samozřejmě umožní rychlejší načítání stránek.

Jelikož JavaScript je velmi obtížná disciplína a náš čas na projekt byl omezený, pomohl nám s AJAXem náš mentor Lukáš a v rámci sobotního hackatlonu jsme společně zprovoznili první část našeho filtru - podle roku vydání filmu (parametry - yearTo, yearFrom).

Celý proces funguje následovně:

Uživatel klikne na HLEDAT - spustí se JavaScript AJAX:

-- krok 1: AJAX pošle HTTP požadavek na API (FLASK)

-- kroky 2 až 4: API přepošle dotaz do DB a vrátí výsledek hledání

-- krok 5: AJAX provede refresh HTML stránky s výsledkem.

Pro komunikaci s databází jsme vytvořily novou třídu - class DatabaseService. A současně bylo třeba vytvořit databázovou proceduru (dbo.usp_GetMovies), která nám vrací hodnoty do našich nadefinovaných parametrů jednotlivých filtrů.

Jakmile jsme měly filtr podle roku funkční, zprovoznily jsme další filtry - žánr, rating, délka filmu, typ (film či seriál). Tato fáze samozřejmě nebyla hned na první dobrou - postupně jsme zkoušely každý filtr a zkoumaly příčiny chyby 'AJAX ERROR' (a že si s námi AJAX hodně a dlouho povídal o errorech). Výbornou pomůckou je karta Network při volbě "Prozkoumat" v Google Chrome; dále jsme použily tzv. SQL Server Profiler, který nám pomohl identifikovat chyby v naší databázové proceduře. Často byly chyby na všech frontách, a tak v 99 % případů nám to neběželo:).

Ukázka třídy DatabaseService.py:

Ukázka z databázové procedury - dbo.usp.GetMovies:

Pokračování v další kapitole.