Python Panoráma 4: Saját webes applikáció készítése Heroku-val11 perc olvasás

Manapság egyre könnyebb saját weboldalt készíteni és sok esetben nagyon praktikusnak bizonyulhat, ha rendelkezünk egy saját online felülettel legyen bármilyen célunk is vele. Ebben a részben azt fogjuk megnézni, hogyan is lehet egy Python script és a Heroku segítségével egy saját webes alkalmazást létrehozni és fenntartani.

CÉL

Célunk tehát egy olyan saját weboldal felállítása, amelyet bárki elérhet bárhonnan, ha ismeri az oldalunkhoz tartozó URL címet. Ebben a részben nem igazán a Python script-ünkön lesz a hangsúly, de azért mindenképpen egy fontos alkotóeleme lesz a folyamatnak. A script-ünket a “Flask” nevű package felhasználásával fogjuk elkészíteni, amely egy híd funkcióját betöltve fogja host-olni az általunk megadott tartalmakat.

Azonban ahhoz, hogy ezt a weboldalt bármikor bárki fel tudja keresni, szükségünk van egy szervergépre, amely 0-24 órás elérhetőséget biztosít. Ekkor térünk rá a Heroku-ra és az ingyenes felhőalapú szolgáltatására. Továbbá a Heroku szervereken és a gépünkön tárolt adatok szinkronizációját is meg kell oldanunk valamilyen módon.

MEGVALÓSÍTÁS

Kezdjük a weboldalunk felállításának a menetét a Python script-ünk megírásával. Az előző résszel ellentétben most kicsit kényelmesebben átadjuk a terepet a Flask nevezetű Python package-nek. Egy hét soros Python script-tel létre is tudjuk hozni a Flask applikációnkat. Viszont mindezek előtt még installáljuk a Flask package-et a “pip install Flask” paranccsal. A Flask egy kifejezetten webes alkalmazások létrehozására szolgáló könyvtár. Most, hogy telepítettük a Flask-et már elkezdhetjük írni a programunkat, ami a következőképpen fog kinézni:

from flask import Flask

app=Flask(__name__)

@app.route('/')
def home():
    return "This is my Homepage."

@app.route('/about/')
def about():
    return "This is my about page."

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

Első lépésként importáljuk a flask könyvtárból a “Flask” class-t. Majd a Flask class-t a benne lévő “__name__” speciális változóval együtt példányosítjuk. A “__name__” egy olyan speciális változó, amely a program lefuttatása során a “__main__” értéket veszi fel. Azonban, ha a script-ünket importáljuk egy másik script-be és a Python script-ünket nemes egyszerűséggel script1-nek neveztük el, akkor a lefuttatása során a “__name__” változó a “script1” értéket veszi fel, mint string. Ezt a különbséget vizsgálja a kód utolsó két sora és ezzel tudjuk kontrollálni a Flask applikációnk megfelelő futtatását.

A kód középső részében azt definiáljuk, hogy az egyes URL címek esetén mit csináljon a weboldalunk. Az első függvény esetében a honlaphoz hozzárendeltük a “This is my Homepage” szöveget. A második függvénynél pedig az about oldalhoz rendeltük hozzá a szöveget. Ha erről meg szeretnénk magunk is győződni, akkor nincs más dolgunk, minthogy lefuttatjuk a programot és a böngészőbe URL sávjába beírjuk a “localhost:5000”-t.

Annak érdekében, hogy html fájlokat is hozzá tudjunk rendelni az egyes oldalakhoz szükségünk van a flask könyvtárból a render_template class-ra is. Ezek után már csak a megfelelő html.fájlokat kell létrehoznunk, amelyeket script-ünkkel megegyező helyen újonnan létrehozott “templates” mappába kell elhelyeznünk. A html fájlokat innen töltheted le. Így a kódunk a következőképpen alakul át:

from flask import Flask, render_template

app=Flask(__name__)

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

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

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

Az oldalunk pedig jelenleg így néz ki:

previous arrow
next arrow
Slider

Ahhoz, hogy az oldalunk formai szempontból is érdemileg nézzen ki, egy css fájlt is hozzá kell csatolnunk a html fájlokhoz. Ezt úgy tehetjük meg, hogy a “templates” mappához hasonlóan készítünk egy “static” mappát és elhelyezzük benne a css fájlunkat. Egyébként, ha képeket szeretnénk beilleszteni a weboldalba, akkor azokat is a static mappába kéne elhelyeznünk.

Ezt követően már egy viszonylag kezdetleges weboldalhoz jutunk. Azonban nem sokra megyünk eddig vele, mert csupán a saját gépünkön érhető el. A következő pár lépésben azt nézzük meg, hogyan lehet ezen változtatni a Heroku segítségével.

Elsőként rendkívül fontos, hogy képesek legyünk a script-ünket egy virtuális Python környezetben futtatni. Ez nem tesz mást, minthogy az alap python installációnk mellé szükséges egy teljesen új Python installáció is, amelyet a programunkat tartalmazó mappa szűlőmappájába kell elhelyeznünk. Ezt a Command Line és a “python -m venv virtual” parancs segítségével érhetjük el. Ha jól csináltuk, akkor valami hasonlót kell látnunk a mappáinkban:

previous arrow
next arrow
Slider

Ez a lépés azért lényeges, mert mikor futtatni akarjuk az oldalunkat a Flask applikációnkon keresztül, akkor csupán pár support könyvtárra van szükségünk és nem az eddig telepített összesre. Pontosan ezért az újonnan telepített Python-t csak azokkal a könyvtárakkal bővítjük ki, amelyekre ténylegesen szükségünk lesz a webes applikációnk futtatásához.

Most pedig ismerkedjünk meg jobban a Heroku-val, hogy a honlapunkat széles körben elérhetővé tehessük. Első lépésként létre kell hoznunk egy Heroku fiókot. Regisztráció itt. Miután ezzel megvagyunk, telepítenünk kell a “Heroku Toolbelt”-et, amely egyébként alapértelmezetten telepíti nekünk a “Git”-et is, mert a Toolbelt a “Git”-en alapszik. Ha valamilyen okból mégsem települne a Git, akkor az innen is letölthető. A Git egyébként egy olyan platform, amelyen keresztül képesek leszünk a weboldalunkhoz kapcsolódó fájlokban történő változásokat a Heroku szerver felé továbbítani.

Most, hogy már minden eszközünk meg van ahhoz, hogy a Command Line-on keresztül kommunikálni tudjunk a Heroku szerverekkel, hozzuk is létre a Heroku webapplikációnkat. Ehhez írjuk be a Command Line-ba a “heroku login” parancsot, lépjünk be az újonnan létrehozott fiókunkba, majd a “heroku create yourappnamehere” nevű paranccsal állítsuk elő az alkalmazásunkat. Próbáljunk meg olyan nevet választani az alkalmazásunknak, amely egyedi, ugyanis könnyen ütközhetünk abba a problémába, hogy egy adott név már foglalt. Ez azért lehetséges, mert ez a név fog megjelenni a weboldal URL címében is. Ha ezt sikeresen elvégeztük és a böngészőbe beírjuk az applikációnk nevét a “.herokuapp.com” taggal ellátva, akkor fel tudjuk keresni a saját weboldalunkat. Ez az URL esetünkben tehát így nézne ki:
yourappnamehere.herokuapp.com

Láthatjuk, hogy az oldal elérhető és működik is, csak nem éppen a kívánt tartalmat jeleníti meg. Ez azért van, mert még nem töltöttük fel a Heroku szerverre a fájljainkat és nem mondtuk meg a szervernek, hogyan kezelje azokat. Most azonban ezt is megtesszük.

Ahhoz, hogy a szerveren megfelelően fusson az oldalunk szükségünk van három különböző fájl-ra. Ezeket a fájlokat a “static”, “templates” és a python script-ünket tartalmazó mappában kell létrehoznunk. Elsőként készítsünk el egy “requirements.txt” nevű fájlt, amelyben azokat a könyvtárakat tüntetjük fel, amelyeket szeretnénk, ha a szervergép is telepítene, hogy alkalmazásunk működőképes legyen. A szükséges könyvtárak listáját a virtuális python környezetünkre mutató “pip freeze” parancs adja meg.

Azonban mielőtt ezt a listát átmásolnánk a requirements.txt-be, le kell töltenünk a gunicorn könyvtárat a szokásos “pip install” parancs segítségével. A gunicorn azért kell nekünk, mert így lesz képes a Heroku szerver futtatni a weboldalunkat egy webszerveren keresztül. Ha sikeresen telepítettük a gunicorn-t, akkor most már átmásolhatjuk a telepítendő könyvtárak listáját és elmenthetjük a requirements.txt fájlt.

A második fájl egy kiterjesztés nélküli “Procfile” fájl lesz, amely azt fogja megmondani a Heroku szervernek, hogy milyen webszervert használjon és milyen alkalmazást indítson el. Lényegében tehát a gunicorn-ra és a hét soros python script-ünkre kell hivatkoznunk benne a következőképpen:

web: gunicorn website_script:app

Nagyon fontos, hogy a “Procfile” után semmilyen kiterjesztés ne álljon. Ezért például ha egy .txt fájlként hoztuk létre, akkor egyszerűen töröljük ki “.txt” kiterjesztést a nevéből. A harmadik és egyben utolsó fájlunk egy “runtime.txt” nevű fájl lesz, amelynek a tartalmát a heroku oldalán található útmutató alapján adhatjuk meg. Egyszerűen csak másoljuk át az éppen aktuális runtime-ot (python 3.6.5 vagy későbbi verziói).

Ha ezzel is megvagyunk, akkor megvan minden szükséges fájlunk a weboldalunk felállításához. Azaz már csak fel kell töltenünk ezeket a fájlokat a Heroku szerverre a Git segítségével. Ehhez nyissunk meg egy Command Line ablakot a fájlokat tartalmazó mappában és írjuk be a “git init” parancsot, majd ezután a “git add . ” parancsot, amely az aktuális mappa tartalmát betölti a git-be (a parancs végén található pont utal az aktuális mappára) aztán a következő sorba a ” git commit -m “First commit, deployment of webpage” ” kerül, amelyben pedig megnevezzük a változtatásunk okát vagy természetét, ami ebben az esetben az, hogy létrehozzuk magát a webalkalmazásunkat.

previous arrow
next arrow
Slider

 

Ezután hivatkoznunk kell arra a Heroku alkalmazásra, amelyre alkalmazni szeretnénk a változtatásokat. Ezt a

"heroku git:remote ---app yourappnamehere"

paranccsal tehetjük meg. Végül a “git push heroku master” paranccsal el tudjuk indítani a fájlok feltöltését a szerverre. Amennyiben sikerült mindent megfelelően előkészítenünk, akkor innentől kezdve saját weboldallal fogunk rendelkezni. Ezt ellenőrizzük is le a “yourappnamehere.herokuapp.com” felkeresésével. Remélhetőleg ugyanazt a honlapot pillantjuk meg a böngészőnkben mint, amit a “localhost:5000”-en láthattunk a html fájlok hozzáadása után.

TOVÁBBFEJLESZTÉS ÉS FELHASZNÁLÁS

Az általunk létrehozott weboldal elég statikus, ha szeretnénk rajta javítani, akkor érdemes lehet valamilyen dinamikus háttérfunkciókat hozzáadni. Például jól lenne, ha egy adatbázis futna a háttérben mikor az oldalunk látogatója valamilyen interakcióba lép az oldallal. Ha szétnézünk az interneten igazából már alig találni olyan oldalt, amely ne használna valamilyen dinamikus funkciót valamilyen célra. Felhasználása ebből adódóan pedig szintén rendkívül széles.

Lehet mind személyes (saját személyes weboldal, például blog), tanulmányi (egy közösség számára készített oktatási anyagot tartalmazó oldal) vagy üzleti (tervezésre, stratégiai előkészítésre szolgáló) célra is használni. Én például oktatási célra használtam a bemutatott módszertant és a második részben bemutatott webmap-nek köszönhetően létrehoztam egy Gazdaságföldrajz vizsgafelkészítő oldalt.
A részhez tartozó fájlokat itt érheted el.

Köszönöm, hogy végigolvastad a posztomat és ha érdekesnek találtad, akkor nézz bele a sorozat többi részébe is.

Gulácsy Dominik

About Dominik Gulácsy

Sophomore at Corvinus University of Budapest studying International Business who is motivated to use relevant academic knowledge to solve problems through optimisation. Dedicated to fully support the development of new business solutions in close collaboration with team members by IoT and data science applications. Gained experience in SQL and VBA but looking forward to learning more. A keen supporter of the circular economy.

View all posts by Dominik Gulácsy →

Leave a Reply

Your email address will not be published. Required fields are marked *