Aplicación simple con Python utilizando Kivy y Kivymd

¿Sabias que es posible crear tus aplicaciones móviles con el lenguaje de programación Python? 

Y la herramienta más adecuada para ello es utilizando las librerías de Kivy y Kivymd, las cuales nos proveen de componentes conocidos como widgets, que podremos utilizar para crear nuestras aplicaciones.

Kivy es una librería de Python de código abierto que permite desarrollar aplicaciones con interfaces gráficas multi-plataforma (Android, iOS, Windows, Linux) de manera rápida y sencilla. Por otro lado podríamos decir que Kivymd  es una extensión de la librería Kivy a la cual se le han añadido widgets con un estilo Material Design, de esa forma puedes crear aplicaciones visualmente modernas utilizando el lenguaje python.

Para comenzar a utilizar estas tecnologías es necesario tener instalada una versión de Python 3.6 o superior y tener en cuenta que estas instrucciones fueron pensadas para usuarios de Windows por lo que algunos de los procedimientos mencionados pueden no funcionar en Linux o Mac OS. 

Si ya cuentas con una versión de Python que cumple con las especificaciones, pasamos a crear un entorno virtual:


Configuración del entorno virtual de Python

Abre una terminal, dirígete hasta la carpeta donde quieras crear tu entorno virtual y escribe.

py -m venv nombre_de_nuestro_entorno_virtual

Después de crearlo procedemos a activarlo. En la misma ruta y desde la terminal escribimos:

nombre_de_nuestro_entorno_virtual\Scripts\activate

Debes tener en cuenta que para el comando anterior se utilizó \ (Slash invertido) en lugar de la / (Slash simple). 

Si el procedimiento se realizó correctamente, visualizaras el siguiente resultado en consola:
(nombre_de_nuestro_entorno_virtual) C:\...>


Instalación de librerías Kivy y Kivymd 

En la misma consola y con nuestro entorno virtual activado, escribiremos las siguientes líneas:

pip install kivy
pip install pillow
pip install kivymd==0.104.2


Contador con kivy y kivymd

Nuestra aplicación como lo dice el titulo, será muy sencilla, pero el objetivo es que comiences a conocer lo sencillo que es crear un app con estas herramientas. La aplicación consistirá en un contador, capaz de incrementar y decrementar su valor por medio de dos botones. 

Contador con python kivymd aplicación sencilla

Puedes utilizar el editor que más te guste, en mi caso utilizare Visual Studio Code ya que incorpora una consola que nos permite ejecutar fácilmente los scripts en Python. Empezaremos creando una carpeta en el lugar que más te guste, puede llamarse SimpleApp y dentro crearás dos archivos, uno llamado main.py y otro simpleapp.kv.

Estructura de aplicación simple kivymd

El archivo con extensión kv es un archivo que se encargará de leer la librería de Kivy y es donde nosotros indicaremos el contenido de nuestros componentes. Esta parte también se puede hacer solo con Python pero resulta más limpio trabajar de esta forma con un archivo aparte. 

Si decides colocar otro nombre a la clase SimpleApp asegúrate de cambiar también el nombre del archivo kv ya que este archivo debe ir con el mismo nombre pero en minúsculas.  


Código del archivo main.py
from kivymd.app import MDApp
from kivymd.uix.relativelayout import MDRelativeLayout

# Clase que heredará los atributos de MDRelativeLayout
# MDRelativeLayout es un contenedor donde los elementos
# pueden ser posicionados en cualquier parte de él y pueden interponerse
class Contador(MDRelativeLayout):
    def incrementar(self): # Método para incrementar el número en el Label
        # self.ids accede a cualquier identificador de elemento dentro de esta clase
        valor_actual = int(self.ids.conteo.text)
        self.ids.conteo.text = str(valor_actual + 1)

    def decrementar(self): # Método para decrementar el número en el Label
        valor_actual = int(self.ids.conteo.text)
        self.ids.conteo.text = str(valor_actual - 1)

class SimpleApp(MDApp):
    def build(self):
        return

if __name__=="__main__":
    SimpleApp().run()


Código del archivo simpleapp.kv:
Contador:
    MDLabel:
        text: "0" # Valor que mostrará la etiqueta
        color: (.3,.8,.6,1) # Color del texto RGBA con valores del 0 al 1
        pos_hint: {'center_x': 0.5,'center_y': 0.6} # Posición absoluta del elemento
        halign: "center" # Alineación horizontal del contenido de la etiqueta
        font_size: '50dp' # Tamaño de la fuente en densidad de pixeles (dp)
        id: conteo # nombre con el que se le identificará a la etiqueta

    MDFillRoundFlatIconButton:
        text: 'Incrementar' # Texto del botón
        icon: 'plus' # Ícono
        pos_hint: {'center_x': 0.4, 'center_y': 0.4}
        on_release: root.incrementar() # Evento al soltar el botón

    MDFillRoundFlatIconButton:
        text: 'Decrementar' # Texto del botón
        icon: 'minus' # Ícono
        pos_hint: {'center_x': 0.6, 'center_y': 0.4}
        md_bg_color: (.7,0,0,1) # color del botón
        text_color: (1,.1,.1,1) # Color del texto en el botón
        icon_color: (1,.1,.1,1) # Color del icono en el botón
        on_press: root.decrementar() # Evento al presionar el botón


'''
::: NOTA :::
la variable "root" hará referencia a la clase
padre del componente en este caso "Contador".

En algunos casos veras también la variable "app"
la cual hará referencia a la clase de la aplicación "SimpleApp".
'''


Para ejecutar nuestro código debemos escribir en la consola

py main.py


¡Felicitaciones has creado tu primer aplicación con interface grafica en Python!

Espero que te haya resultado útil esta información, estaré publicando más contenido sobre este tema y compartiendo código de aplicaciones un poco más complejas, de modo que pueda mostrarte la forma en que puedes trabajar con proyectos más grandes, como crear un ejecutable para Windows de tu aplicación y como crear un apk para Android.

Comentarios

Entradas populares de este blog

Aplicación móvil con Python Kivymd