[timohei.net] Web-palvelin

timohei.net / Opintojaksot / Älykkään sähkölaitteen projekti / Web-käyttöliittymän luominen /

Web-palvelin

Flask on Python-yhteensopiva web-palvelin. Se asennetaan pip-sovelluksella (pip - PIP Installs Packages). Asenna Flask:

Raspberryssä:

$ sudo pip install flask

Windowsissa:

C:\Users\ktunnus> pip install flask

Asennuksen onnistuminen voidaan testata luomalla tiedosto hello.py ja syöttämällä sinne alla olevat rivit. #-merkin jälkeen olevat kommentit voi jättää syöttämättä.

Sivut kannattaa luoda omaan hakemistoonsa (esimerkiksi ~/www), jonne alla oleva hello.py-tiedostokin siis luodaan).

from flask import Flask # Tuodaan luokkaluokka (class) määrittelee mallin ("piirustukset"),
 joiden mukaisia olioita ohjelmassa voidaan luoda
 ja käyttää. Luokassa määritellään myöhemmin
 luotavien olioiden ominaisuudet (properties)
 ja metodit ("temput", methods),  joita olio
 osaa tehdä. Flask sovelluskehyksestä flask
app = Flask(__name__) # Luodaan Flask-olio nimeltä app. Argumentti __name__ on Pythonin
                      # sisäinen muuttuja, jonka arvo välittyy uudelle oliolle

@app.route("/") # Kun palvelimelta haetaan juuritiedostoa (esim. osoitteella
                # http://timohei.net/ eikä vaikkapa osoitteella
                # http://timohei.net), suoritetaan alla oleva ohjelma.
def hello():
   return "Hello World!" # Send text to the browser

if __name__ == "__main__": # Things to do if this script is run from console
   app.run(host='0.0.0.0', port=80, debug=True) # Set the server to listen to port 80 and report errors

Käynnistä palvelin - se pysyy käynnissä kunnes pysäytetään <ctrl>-c-painalluksella:

Raspberryssä:

$ sudo python hello.py

Windowsissa:

C:\Users\ktunnus> python hello.py

Avaa PC:n selain ja kirjoita osoitteeksi Raspberryn IP-osoite. Selain-ikkunaan ilmestyy teksti "Hello world!".

Template

Sivustoja ei ole järkevää edellä olevan esimerkin kokeilun jälkeen kirjoittaa python-ohjelman sisään. Sen sijaan kannattaa käyttää sivupohjia (templates).

Ota template-pohjat käyttöön lisäämällä hello.py-tiedoston ensimmäiselle riville render_template:
```
from flask import Flask, render_template
```
Luo web-hakemiston alle templates-hakemisto - hakemiston nimi tulee olla täsmälleen tuo!
```
mkdir templates
cd templates
```
Vain Raspberryssä: Tarkista vielä, että olet nyt oikeassa hakemistossa:
```
pwd
```
-> pitää tulostua ~/www/templates (mikäli aiemmin luomasi sivustohakemistoon www)

Luo tiedosto index.html ja kirjoita sinne:

<html>
  <body>
    <h1>templates-hakemiston index.html</h1>
  </body>
</html>

Poistu editorista tallettaen tiedosto.
Siirry www-hakemistoon (eli yksi taso "ylemmäksi" hakemistopuussa):
```
cd ..
```
Määritellään hello.py tulostamaan selaimelle templates-hakemiston index.html, kun web-palvelimelle tulee selaimelta sivupyyntö juurihakemistoon /. Tämä tapahtuu muokkaamalla hello.py-tiedoston kolmirivinen @app.route("/") osio seuraavaan muotoon:
```
@app.route("/")
def hello():
  return render_template('index.html');
```

Käynnistä web-palvelin:

Raspberryssä:

$ sudo python hello.py

Windowsissa:

C:\Users\ktunnus> python hello.py

Avaa selain ja kirjoita osoitteeksi Raspberryn IP-osoite (Windows-koneella localhost), jolloin selaimeen tulostuu seuraavanlainen näkymä:

Template dynaamisella sisällöllä

Template-pohja on mahdollista määritellä dynaamiseksi, eli lisätä sinne tilanteen mukaan muuttuvaa sisältöä. Tässä esimerkissä luodaan template, joka näyttää selaimen osoiteriville kirjoitetun käyttäjän nimen.

Muokataan ensin hello.py-tiedostoa

Lisätään uusi @app.route:

@app.route('/nimikoe/<nimi>')
def nimikokeilu(nimi):
  return render_template('nimisivu.html', kayttaja=nimi)

Luodaan templates-hakemistoon tiedosto nimisivu.html ja kirjoitetaan sinne:
```
<html>
  <body>
    <h1>Terve, {{ kayttaja }}!</h1>
  </body>
</html>
```
Mikäli web-palvelin on vielä edellisen kokeilun jäljiltä käynnissä, pysäytä se näppäämällä ctrl-c ja käynnistä uudelleen www-hakemistossa annettavalla komennolla sudo python hello-py
Avaa selain ja kirjoita osoitteeksi
```
[IP-osoite]/nimikoe/[oma nimesi]
```
eli esimerkiksi
```
193.167.101.153/Timo
```
tai
```
localhost/Timo
```
jolloin selaimelle tulostuu seuraavanlainen näkymä:

HTTP:n GET- ja POST-metodit

GET- ja POST-metodeilla voidaan välittää web-palvelimelle parametreja HTTP-pyynnössä mukana kulkevina muuttujina.

GET-metodissa parametrit lähetetään osana selaimella haettavan web-sivun osoitetta. Parametrit annetaan web-sivun osoitteen lopussa kysymysmerkin jälkeen. Mikäli muuttujia on useita, erotetaan ne toisistaan &-merkillä:

http://example.com/jokusivu.html?muuttuja1=arvo&muuttuja2=arvo&muuttuja3=arvo[...]

Esimerkiksi tämän juuri nyt näkemäsi sivun osoitteessa on kaksi parametria: p, jolle on asetettu arvo 20opintojaksot/0400YY00BJ16/30html ja t, jolle on asetettu arvo 10flask_fi.html. Kyseiset arvot on asetettu kiinteästi linkissä, jota klikkaamalla tulit tälle sivulle.

POST-metodissa parametrit upotetaan web-lomakkeella luotuun HTTP-pyyntöön niin, että ne eivät näy osoitteessa. Alla esitetyllä web-lomakkeella saataisiin haettua tämä sivu kirjoittamalla ensimmäiseen kenttään 20opintojaksot/0400YY00BJ16/30html, toiseen kenttään 10flask_fi.html ja klikkaamalla HAE-painiketta. Lomake asettaisi muuttujat p ja t yllä olevassa GET-esimerkissä esitetyt arvot ja lähettäisi HTTP-pyynnön palvelimelle osoitteeseen http://timohei.net/. Käytännössä palvelin ei kuitenkaan näyttäisi haluttua sivua, koska ko. osoitteessa oleva sovellus on ohjelmoitu vastaanottamaan vain GET-metodilla lähetettyjä pyyntöjä!

<html>
    <body>
    <form action="http://www.oamk.fi/?~timohei/" method="POST">
      p-parametri: <input type="text" name="p"><br>
      t-parametri: <input type="text" name="t"><br>
      <input type="submit" value="HAE"><br>
    </form>
    </body>
    </html>

GET-metodilla tehtyyn pyyntöön voidaan reagoida Flaskilla esimerkiksi seuraavalla tavalla:

# Tiedoston alun import-osaan lisätään request
from flask import Flask, request, render_template

# Uusi app-lisäys:
@app.route('/laskenta', methods = ['GET'])
def laskin():
  a = request.args.get('a')
  b = request.args.get('b')
  return render_template('laskenta.html', html_eka=a, html_toka=b, html_tulos=int(a)*int(b))

HTML-template templates/laskenta.html:

<html>
  <body>
    <h1>Laskin</h1>
    <p>Syötetyt arvot: a = {{ html_eka }}, b = {{ html_toka }}</p>
    <p>Kertolaskun tulos = {{ html_tulos }}</p>
  </body>
</html>
</p>

Laskentasivua kutsutaan selaimella antamalla muuttujille a ja b arvot osoitteen loppuosassa GET-metodin määrittelemällä tavalla: http://localhost/laskenta?a=12&b=30

Lisäohjeita

Build a python-powered web server with Flask (Raspberry Pi Learning Resources)
Flask Quickstart (Flask site)