Cara Membuat Aplikasi Android dengan Python dan Kivy

Setelah selesai dengan Catatan tipe data Python. sekarang saya ingin mencatat pembelajaran saya tentang Cara Membuat Aplikasi Android dengan Python dan Kivy.

Kivy adalah salah satu Framework Python dan rata rata librarynya digunakan untuk, pengembangan aplikasi Mobile dan Multi Touch Software yang bersifat NUI (Natural User Interface). dan Kivy merupakan GUI (Graphical User Interface) terbaik yang banyak digunakan di python.

Kenapa Harus Kivy?

1. Kivy berada dibawah naungan MIT License. Jadi, seluruh source codenya bebas dan dapat dikomersilkan.

2. kivy dibangun dengan library Python.

3. Cross Platform. Artinya, sekali ngoding bisa berjalan di linux, IOS dan Windows.

oke, segitu aja untuk perkenalan kivynya. jika masih belum jelas, silahkan browsing ya. langsung aja saya catat untuk pembelajaran kivy ini.

Hasil dari Browsing selama seminggu ini saya berhasil membuat halaman login dengan kivy dan Kivymd. apa tuh bang kivymd..?

Kivymd adalah Material Design dari kivy. kalo di HTML kivymd ini bisa di bilang css.

hasilnya seperti ini yang akan saya catat

Cara Membuat Halam Login di Kivy

Membuat halamn login di kivy saya membuatnya dengan empat file yang berada di folder Aplikasi Python. yaitu

1. main.py sebagai halaman utama

2. hallog.kv singkatan dari halaman login berada di folder kv

3. screens.py berada di folder screens

4. dan hallog.py berada di folder screens

untuk link download file nanti akan saya sertakan di akhir catatan ini.

jika di skemakan sebagai berikut.

Folder Aplikasi Python

    file main.py

    Folder kv

        hallog.kv

        assets berisi file file pendukung seperti gambar dan font

    Folder Screens

        hallog.py

        screens.py

oke saya mulai dari file yang pertama yaitu 

1. main.py

from kivymd.app import MDApp

from kivymd.uix.screenmanager import ScreenManager

from kivy.core.text import LabelBase

from screens.screens import *

class WindowManager(ScreenManager):

pass

class LapakNgoding(MDApp):

def build(self):

self.wm = WindowManager()

screens =[

Hallog(name="hallog")

]

for screen in screens:

self.wm.add_widget(screen)

return self.wm

if __name__ == '__main__':

LabelBase.register(name="Atma", fn_regular="kv/assets/fonts/Atma-Bold.ttf")

LabelBase.register(name="Tagline", fn_regular="kv/assets/fonts/Ubuntu-LI.ttf")

LabelBase.register(name="Line", fn_regular="kv/assets/fonts/Ubuntu-M.ttf")

LapakNgoding().run()

from kivymd.app import MDApp
from kivymd.uix.screenmanager import ScreenManager
from kivy.core.text import LabelBase

baris tersebut untuk mengimport library yang dibutukan

from screens.screens import *

dan khusus yang baris perintah ini, berfungsi untuk mengimport file screens yang berada di folder screens.

class WindowManager(ScreenManager):
    pass

Memanggil Class Windows Manager yang berada di library screen Manager 

class LapakNgoding(MDApp):
    def build(self):
        self.wm = WindowManager()
        screens =[
            Hallog(name="hallog")
        ]
        for screen in screens:
        self.wm.add_widget(screen)
        return self.wm

Class LapakNgoding sebagai nama aplikasi dan membangun windows manager dari file hallog.py yang berada di folder screens.

if __name__ == '__main__':
    LabelBase.register(name="Atma", fn_regular="kv/assets/fonts/Atma-Bold.ttf")
    LabelBase.register(name="Tagline", fn_regular="kv/assets/fonts/Ubuntu-LI.ttf")
    LabelBase.register(name="Line", fn_regular="kv/assets/fonts/Ubuntu-M.ttf")
LapakNgoding().run()

menjalankan dan LabelBase.register mengambil file font untuk digunakan pada file hallog.kv yang di operasikan pada file hallog.py (perhatikan class LapakNgoding(MDApp).

2. hallog.kv (singkatan dari halaman login)

<Hallog>:

MDFloatLayout:

md_bg_color: ("#d3ede6")

Image:

source:"kv/assets/foto/lapakngodingtr.png"

size_hint: .5 , .5

pos_hint:{"center_x": 0.5,"center_y": 0.70}

Image:

source:"kv/assets/foto/logoLapakngodin9.png"

size_hint: .2 , .2

pos_hint:{"center_x": 0.5,"center_y": 0.85}

MDLabel:

text: "L a p a k N g o d i n g"

halign : "center"

font_size : "30sp"

font_name : "Atma"

pos_hint:{"center_y": 0.71}

MDLabel:

text: "Belajar Ngoding dengan Browsing"

halign : "center"

font_size : "16sp"

font_name : "Tagline"

pos_hint:{"center_y": 0.65}

color:("#808080")

MDTextField:

id: email

hint_text: "Username or Email"

halign : "center"

mode: "rectangle"

icon_left: "account"

size_hint: 0.65, 0.10

pos_hint:{"center_x": 0.5,"center_y": 0.58}

MDTextField:

id: pass

hint_text: "Password"

mode:"rectangle"

icon_left: "key-variant"

size_hint: 0.65, 0.10

pos_hint:{"center_x": 0.5, "center_y": 0.47}

MDRaisedButton:

text:"L o g i n"

font_size : "16sp"

font_name : "Atma"

size_hint: 0.30, 0.02

pos_hint: {"center_x": 0.32, "center_y": 0.37}

md_bg_color: ("#23a484")

MDRaisedButton:

text:"D a f t a r"

font_size : "16sp"

font_name : "Atma"

size_hint: 0.30, 0.02

pos_hint: {"center_x": 0.68, "center_y": 0.37}

md_bg_color: ("#23a484")

MDRaisedButton:

text:"Login dengan Google"

font_size : "16sp"

font_name : "Atma"

size_hint: 0.66, 0.02

text_color:("#00000")

pos_hint: {"center_x": 0.5,"center_y": 0.28}

md_bg_color: ("#23f2eb")

MDRaisedButton:

text:"Login dengan Facebook"

font_size : "16sp"

font_name : "Atma"

size_hint: 0.66, 0.02

text_color:("#00000")

pos_hint: {"center_x": 0.5,"center_y": 0.19}

md_bg_color: ("#38b6ff")

MDLabel:

text: "Lupa Password?"

halign : "center"

font_size : "16sp"

font_name : "Line"

pos_hint:{"center_y": 0.10}

color:("#000000")

<Hallog>:

Memanggil variabel hallog yang dibuat pada file hallog.py

MDFloatLayout:
    md_bg_color: ("#d3ede6")

Membuat Layout dengan background warna. disini definisi warna saya menggunakan format hex.

Image:
    source:"kv/assets/foto/lapakngodingtr.png"
    size_hint: .5 , .5
    pos_hint:{"center_x": 0.5,"center_y": 0.70}

Memanggil Image atau gambar, membuat ukuran dan posisi gambar.

MDLabel:

    text: "L a p a k N g o d i n g"
    halign : "center"
    font_size : "30sp"    font_name : "Atma"
    pos_hint:{"center_y": 0.71}

membuat text serta, ukuran dan posisi.

MDTextField:
    id: email
    hint_text: "Username or Email"
    halign : "center"
    mode: "rectangle"
    icon_left: "account"
    size_hint: 0.65, 0.10
    pos_hint:{"center_x": 0.5,"center_y": 0.58}

membuat form input serta, ukuran, posisi, icon dan model animasi ketika di klik.

MDRaisedButton:
    text:"L o g i n"
    font_size : "16sp"
    font_name : "Atma"
    size_hint: 0.30, 0.02
    pos_hint: {"center_x": 0.32, "center_y": 0.37}
    md_bg_color: ("#23a484")

membuat Buttom serta, ukuran, posisi, dan warna. bisa juga menggunakan font tertentu seperti yang di definisikan pada font_name.

3. screens.py

hanya berisi satu baris saja dalam file ini yaitu

from screens.hallog import Hallog

yang berfungsi untuk mengimport variabel Hallog. dimana, variabel screens di file main.py berisikan variabel Hallog.

4. hallog.py yang berada di folder screens.

from kivymd.app import MDApp

from kivymd.uix.screen import MDScreen

from kivy.lang import Builder

class Hallog(MDScreen):

def __init__(self, **kw):

Builder.load_file("kv/hallog.kv")

super().__init__(**kw)

sama seperti file main.py. kenapa tidak disatukan aja bang di main.py.? ya karena saya mau yang mudah dalam mendevelopnya. jadi, kode tidak menumpuk di satu file saja.

oke brader, segini dulu ya. maaf brader, untuk file yang saya infokan diatas tidak saya sertakan link downloadnya. karena saya ingin brader semua, praktek langsung dengan mengetik baris kode per kode. maaf ya. hehehe becanda ya brader. untuk link silahkan klik di sini.

versi videonya di youtube lapak ngoding.

 

Semoga bermanfaat.

Terima kasih

Jakarta, minggu 9 oktober saat malam dingin mendung tetapi tidak hujan.