1. diel - Predstavenie Kivy frameworku a tvorba prvých aplikácií

Vitajte u prvej lekcie kurzu, v ktorom sa naučíme vytvárať aplikácie v Kivy frameworku pre Python. Cieľom tohto kurzu je naučiť sa vytvárať aplikácie / hry pre mobilné zariadenia, konkrétne (nielen) pre Android v Kivy frameworku.

Kivy framework

Čo je vlastne Kivy? Kivy je framework pre programovací jazyk Python, ktorý nám umožňuje vytvárať aplikácie pre Windows, Mac OS, Linux, Android a iOS. To je veľa zariadení, ktoré môžu spustiť našu aplikáciu, a ešte lepšie je to, že Kivy podporuje multi-touch. Je teda ideálny pre tvorbu hier a aplikácií na dotyková zariadenia. Na rozdiel napr. Od PyQt Kivy nie je nejaký obal pre GUI toolkit, Kivy framework je napísaný v Pythone, preto pre svoju funkčnosť potrebuje Cython (a odporúčam aj pygame).

Nevýhodou Kivy je vzhľad, keďže nie je natívne a ani sa ako natívny nesnaží vyzerať. Potom, čo v Kivy frameworku budete robiť nejaký ten piatok, budete možno schopní vytvoriť aplikáciu, ktorá bude vyzerať ako niektorá z tohto zoznamu.

Kivy má tiež svoj jazyk pre návrh formulára / GUI, funguje podobne ako CSS pre web.

Počítam s tým, že poznáte základy OOP v Pythone a máte nainštalovaný Python 3.6+.

Inštalácia

Ak Python nemáte z nejakého dôvodu nainštalovaný, odporúčam distribúciu MiniConda.

Ako som spomenul, Kivy framework potrebuje pre svoju funkčnosť balíky pygame a Cython, ktoré nainštalujeme ako prvý. Ďalej je potrebné nainštalovať Pillow. Nasledujúce príkazy spustíme v príkazovom riadku. Ak používate distribúciu Anaconda / MiniConda na Windows, použite Anaconda Prompt.

py -m pip install cython
py -m pip install pygame
py -m pip install Pillow

Potom nainštalujeme samotný Kivy framework:

py -m pip install kivy

V príkazovom riadku by ste mali vidieť výstup podobný tomuto:

Teraz sme pripravení a vrhneme sa na tvorbu našej úvodnej aplikácie.

Tvorba prvej aplikácie

Vytvorte si nový Python projekt. Najprv si importujeme samotný Kivy framework, ďalej nastavíme požadovanú verziu a importujeme tlačidlo s triedou App. Práve tlačidlo sa zdraviacim textom v tejto aplikácii užívateľovi vykreslíme.

#Importujeme Kivy
import kivy
#Minimální potřebná verze pro spuštění
kivy.require("1.10.1")
#Importujeme Tlačítko
from kivy.uix.button import Button
#Importujeme Aplikaci
from kivy.app import App

Vytvoríme si triedu MainApp, ktorá bude dediť z triedy App a bude vracať importovanej tlačidlo s našim textom.

#Vytvoříme třídu aplikace
class MainApp(App):
    #Metoda, která vrátí tlačítko, které se má zobrazit
    def build(self):
        return Button(text = "Zdraví tě tlačítko z Kivy")

Aplikáciu následne stačí len instanciovat a spustiť:

#Spuštění
app = MainApp()
app.run()

Po spustení, ktoré môžete vykonať napr. V príkazovom riadku príkazom py soubor.py, bude aplikácia vyzerať nasledovne:

Tlačidlo sa roztiahlo cez celý formulár, čo je jeho predvolené správanie.

Aplikácie Kalkulačka

Keďže vytvárať Python aplikácie je pomerne jednoduché, stihneme počas dnešnej lekcie vytvoriť aj druhú ukážkovú aplikáciu - jednoduchú kalkulačku. Tá bude umožňovať vykonávať nasledujúce matematické operácie:

• súčet
• rozdiel
• súčin
• podiel

Použijeme nasledujúce ovládacie prvky:

• TextInput - textové pole pre zadanie textu od užívateľa, v našom prípade čísel
• Spinner - ponuka pre výber matematické operácie, funguje podobne ako combobox, teda ako rozbaľovacia ponuka
• Label - popisek pre výpis výsledku
• Button - tlačidlo pre zavolanie metódy, ktorá vykoná výpočet

Formulár aplikácie kalkulačka bude mať nasledujúce rozloženia:

Vidíme, že tu už potrebujeme ovládacie prvky aspoň minimálne zoskupiť a to do dvoch radov. K zoskupovanie prvkov používame tzv. Layouty, česky rozloženie. Možno ich poznáte z už spomínaného PyQt kurzu alebo z iných programovacích jazykov, fungujú všade veľmi podobne.

V našom prípade použijeme na ovládacie prvky v prvom rade BoxLayout, ktorý nám je zoskupia vedľa seba. Obe rady prvkov následne zoskupíte pod seba ďalším BoxLayout em, ktorý obalí celú našu aplikáciu. Ten bude mať na rozdiel od toho prvého nastavenú orientáciu na zvislú.

Na všetky ovládacie prvky v Kivy budeme ďalej referovať ako na widgety.

Tvorba aplikácie

Najskôr si importujete Kivy a nastavíme požadovanú verziu. Potom importujete samotné ovládacie prvky, s ktorými budeme pracovať, a samozrejme i triedu App. Tá tvorí základ každej Kivy aplikácie:

import kivy
kivy.require("1.10.1")
from kivy.uix.button import Button, Label
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput
from kivy.uix.spinner import Spinner

from kivy.app import App

Ďalej si vytvoríme triedu, ktorá bude tentoraz dediť z BoxLayout u, ktorý bude všetko držať pospolu. BoxLayout je layout, ktorý prispôsobí veľkosť widgetov, ktoré obsahuje, veľkosti okna, a zoradí ich podľa svojej orientácie. V našom prípade bude orientácie vertikálne, pretože potrebujeme vložiť dva rady ovládacích prvkov pod seba:

class Kalkulacka_layout(BoxLayout):

    def __init__(self, *args, **kwargs):
        super(Kalkulacka_layout, self).__init__(*args, **kwargs)
        #Nastavíme orientaci Boxlayoutu směrem "dolů"
        self.orientation = "vertical"

Layouty môžeme vkladať aj do seba, čím ako prvý zvislý prvok v okne vložíme ďalší BoxLayout, ktorý bude tvoriť vodorovnú rad prvkov.

Vytvoríme teda nový BoxLayout, ktorý bude obsahovať TextInput, Spinner a Label. Tento layout pridáme do nášho hlavného BoxLayout u. V tomto prípade bude orientácia BoxLayoutu horizontálne, teda aby radil widgety vedľa seba:

# pokračujeme v konstruktoru...
        #Vytvoříme obal pro text input, spinner a label s výsledkem
        widget = BoxLayout(orientation = "horizontal")
        self.cislo1_input = TextInput(multiline = False)
        self.combobox = Spinner(text = "+", values=("+", "-", "*", "/"))
        self.cislo2_input = TextInput(multiline = False)
        self.vysledek_label = Label(text = "0")
        widget.add_widget(self.cislo1_input)
        widget.add_widget(self.combobox)
        widget.add_widget(self.cislo2_input)
        widget.add_widget(self.vysledek_label)
        self.add_widget(widget)

Nakoniec pridáme do okna tlačidlo, ktoré bude reagovať na kliknutie alebo dotyk, záleží na akom zariadení bude aplikácia spustená:

    #Vytvoříme tlačítko, které bude volat metodu vypocitej()
    self.tlacitko = Button(text = "=", on_press = self.vypocitej)
    self.add_widget(self.tlacitko)

def vypocitej(self, *args):
    if self.cislo1_input.text == "" or self.cislo2_input.text == "":
        return False
    if self.combobox.text == "+":
        vys = float(self.cislo1_input.text) + float(self.cislo2_input.text)
    elif self.combobox.text == "-":
        vys = float(self.cislo1_input.text) - float(self.cislo2_input.text)
    elif self.combobox.text == "*":
        vys = float(self.cislo1_input.text) * float(self.cislo2_input.text)
    elif self.combobox.text == "/":
        if self.cislo2_input.text == "0":
            self.vysledek_label.text = "ERROR"
            return False
        vys = float(self.cislo1_input.text) / float(self.cislo2_input.text)
    self.vysledek_label.text = str(vys)

Aby sme mohli aplikáciu spustiť, musíme vytvoriť triedu MainApp, ktorá dedí z App, a metódu build(), ktorá bude vracať našu triedu. Tá dedí z BoxLayout ua obsahuje naše vybrané widgety:

class MainApp(App):
    def build(self):
        return Kalkulacka_layout()

MainApp().run()

A máme hotovo. Ak aplikáciu spustíte príkazom py soubor.py, vyskočí na vás okno podobné obrázku nižšie:

Zdrojový kód oboch príkladov nájdete na stiahnutie v prílohe článku. V budúcej lekcii, Kivy language a layouty , si predstavíme Kivy language, popíšeme si layouty, ktoré Kivy framework ponúka, a povieme si k čomu je každý z nich dobrý.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.