En tungtslående lettvekter

Introduksjon til Flask mikrorammeverk

Mikrorammeverket Flask gir deg de helt grunnleggende verktøyene du trenger for å sette opp en statisk nettside. Vi gir deg en enkel kick start til Flask mikrorammeverk i denne guiden.

Jeg har flere ganger blitt spurt om å beskrive prosessen og verktøyene jeg bruker i mitt arbeid og generell hacking med webutvikling og lignende, og det er det jeg kommer til å gjøre i denne artikkelen.

Om forfatteren

Kjetil André Liknes er masterstudent i Informasjonssystemer ved Universitetet i Agder og freelancer.

Kjetil André er også engasjert i OpenSource UiA, som består av studenter på Universitetet i Agder

Jeg la tidlig min elsk på Python som et programmeringsspråk gjennom min bachelorutdannelse ved Universitetet i Agder, og var så heldig at jeg fikk jobbe videre med det i min bacheloroppgave, hvor vi så på valget mellom Django og Flask.

Django er et web-rammeverk mer i stilen av Ruby on Rails – et stort og omfattende rammeverk hvor alle verktøyene allere er bygget inn, inkludert en prosjektgenerator, ORM  (Object-relational mapper), og admin-verktøy. Django bygger også mye på å følge konvensjonene som allerede er satt. Dette kan være verdifullt for de som skal lage kjappe simple «Create, Read, Update, Delete»-nettsider på et samlebånd. Django-økosystemet er omfattende og mye å sette seg inn i – og dermed faller Django veldig for seg selv.

flask_framework_website

Flask mikrorammeverk

Flask derimot, er et såkalt «microframework» –  som kun gir deg de helt grunnleggende verktøyene du trenger for å sette opp en statisk nettside rett fra starten. Etterhvert som man trenger mer funksjonalitet, kan man velge og vrake i de forskjellige og mangfoldige pakkene som finnes i det fantastiske python-miljøet.

Dette var noe av hovedgrunnen til at vi valgte Flask mikrorammeverk. På denne måten kunne vi ta inn håndterbare biter av teknologien etterhvert som vi trengte det i det originale prosjektet, uten å måtte krangle med et stort og omfattende rammeverk som helst skal gjøre ting på «sin måte». Dette viste seg å være et veldig lurt valg, da vi fikk ekstremt god fleksibilitet og kunne utvikle spesifikk funksjonalitet for prosjektet veldig raskt.

I denne artikkelen baserer jeg meg på utvikling i Linux (personlig Arch Linux) og OSX. Det er mulig noen ting angående virtualenv og lignende er forskjellig i Windows.

Til slutt så vil vi ende opp med en simpel, statisk webapplikasjon, som vi kan ekspandere videre med hva enn man vil!

Kodeeksemplene brukt i artikkelen kan man finne her: https://github.com/cruor99/flask-itpro-examples

Kom i gang med Flask mikrorammeverk

En viktig konvensjon å starte med i python for alle typer prosjekter, er å aktivt bruke Pythons VirtualEnvironment. Virtualenvironment isolerer pakkene i prosjektet fra resten av systempakkene, slik at man kan være konsekvent på versjonene av pakkene man bruker, samtidig som man ikke forurenser andre prosjekter man holder på med samtidig eller har holdt på med tidligere.

For lage et virtual environment, skriver man følgende i terminalen:

$ virtualenv –no-site-packages venv

Argumentet –no-site-packages sørger for at ingen av de globalt installerte pakkene kommer inn i det nye virtuelle miljøet. Dette er lurt å gjøre om man holder på med GUI-programmering i Python, for eksempel Kivy eller wxPython – da disse ikke funker like greit i et virtualenvironment.

For å aktivere virtualenvironmentet skriver man så:

$source venv/bin/activate

Da er vi klare til å installere pakkene vi trenger i demo-prosjektet vårt.
Den første pakken vi kommer til å bruke er Flask selv.

$pip install flask

Dette vil da hente inn flask og dets avhengigheter, som Jinja2 og lignende.
En lur ting å gjøre i løpet av denne prosessen er å kjøre $pip freeze > requirements.txt fra tid til annen. Dette gjør at man skaper en lesbar katalog av installerte biblioteker, som andre utviklere kan installere i sine virtualenvs med $pip install -r requirements.txt

Prosjektstruktur

Den mest grunnleggende prosjektstrukturen for et Flask-prosjekt er en simpel app.py-fil. For å organisere ting litt bedre vil jeg foreslå følgende prosjektstruktur for demoapplikasjonen:

flask_framework_001

Hello World

Å få opp en Hello World i Flask er kanskje den enkleste «hello world» av alle web-rammeverk. I app.py, skriv følgende:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def home();
  return "Hello world!"


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

flask_framework_002

Først importerer vi Flask.

Deretter lager vi app-objektet, definerer rutene gjennom såkalte «decorators» – identifisert med @.

Dette gjør at vi kan knytte funksjoner opp mot ruter, og vår home-metode returnerer her ”Hello World!”

if __name__ == ''__main__'': er der for å kunne kjøre appen gjennom å kalle følgende i terminalen:

$python app.py

flask_framework_003
Det vil se noe slik ut, og man vil da kunne gå til localhost:5000 i nettleseren for å se vår Hello World!

Templates

La oss legge til en ekstra rute, som henter opp et HTML-template som vi kan style. App.py vil da se slik ut:

from flask import Flask, render_template

app = Flask(__name__)


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

@app.route('/welcome')
def welcome(): 
  return render_template("index.html")
if __name__ == "__main__":
  app.run(debug=True)

Det nye her er at vi også importerer metoden render_template.
Denne metoden ser automatisk etter filen vi har definert i en mappe i samme directory kalt templates.

Bootstrap

Før vi går videre vil jeg introdusere Bootstrap. Mange av dere kjenner sikkert Bootstrap fra før av – alle webutvikleres drøm, om man ikke føler seg helt stødig på webdesign – og et godt grunnlag for videre utvikling for folk som starter.

For å laste ned Bootstrap, gå til GetBootstrap.com og velg «Download Bootstrap».

Ta så og pakk ut innholdet i .zip-filen, og kopier inn i static-mappen vi har opprettet, slik at du ender opp med filstrukturen som vi viste tidligere. Dette betyr at at static-mappen inneholder bootstrap.min.css og bootstrap.min.js

index.html

flask_framework_006

Denne delen burde være kjent for de fleste, så jeg kommer ikke til å gå i mye detalj her. En helt standard template vil se slik ut:

<!DOCTYPE html>
<html>
    <head>
        <title>Flask demonstrasjon</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div class="container">
            <h1>Her er vår første Flask template!</h1>
            <br/>
            <p> Klikk <a href="/">her </a> for å dra tilbake til Hello World </p>
        </div>
    </body>
</html>

Og da er man ferdig!

Konklusjon og videre lesing

Dette har kun vært en kort introduksjon til Flask, og jeg håper det frister dere til å se videre på rammeverket.

For videre utforskning vil jeg anbefale den veldig grundige og velgjennomførte bloggen til Miguel Grinberg, som går gjennom hele prosessen med å lage en «fully fleshed» dynamisk webside, hvor han går mer inn på testing, database og autensitering.

For videre inspirasjon av hva man kan bruke Flask til kan jeg referere til mange større aktører, blant annet WakaTime, Twilio, President Obama’s 2012 valgkampanje – helt til simple hjemmeprosjekter, som mitt eget hjemmeserver webinterface som jeg bruker for å styre medieavspilling, om det er filmer på serve-ren eller streaming fra twitch.tv eller Youtube.

Kommentarer