Aplicación móvil con Python Kivymd

Kivymd para diseñar aplicaciones profesionales

Para el post del día de hoy, compartiré con ustedes un diseño para una aplicación de banco móvil, la aplicación es meramente para mostrar el diseño, no tiene ninguna funcionalidad y fue creada con el propósito de que aprendas a estructurar una aplicación como esta.

El diseño no es mío, pero les estaré dejando el enlace de la persona que lo diseño por si es de su interés Masudur Rahman.

Esta es la imagen del diseño:

Y esta es la imagen del resultado:

Descarga el código y aprende con el:

Este no será un tutorial, ya que solo explicaré algunas partes del código, te estaré dejando un enlace para poder descargar el proyecto y luego daré una breve explicación de algunos fragmentos del código que yo considero importantes, el objetivo es que aprendas a crear tus propias aplicaciones basándote en programas ya hechos, donde puedas extraer el código o los componentes que necesites y además aprendas una técnica de estructurar tus proyectos para una aplicación que puede crecer en cuanto a funcionalidades y número de pantallas.

Descarga el proyecto aquí

Una vez que descargues el proyecto y lo abras, verás una estructura como la siguiente:

En la raíz del proyecto, podemos observar las siguientes carpetas:

assets.- En esta carpeta estarán todos los recursos de nuestra app como son imágenes, fuentes, audios, videos, etc.

components.- En esta carpeta situaremos los componentes personalizados que pueden utilizarse en distintas partes del proyecto, a su vez esta carpeta tiene dos carpetas más para separar el código de Python de los archivos con extensión kv.

screens.- En estas carpetas es donde colocaremos el código correspondiente a cada pantalla diseñada que al igual que los componentes esta carpeta separa los archivos de Python de los archivos kv, con la diferencia de que en estos archivos es donde haremos uso de los componentes que vayamos creando.

Por ultimo en la raíz también tenemos el archivo main.py que es donde inicializaremos nuestra aplicación, llamaremos a las diferentes pantallas que programamos y crearemos métodos globales que puedan ejecutarse desde cualquier pantalla.

Revisando el código

Acá un ejemplo del código que hay en main.py:

En esta clase aparte de iniciar la aplicación, también definimos colores que utilizaremos a lo largo de la app y crearemos el manejador de nuestras pantallas que son dos, "homescreen" y "transactionscreen".

El siguiente ejemplo pertenece al componente info_card dentro de la carpeta components:

Este componente se hizo de esta manera para poderlo utilizar en ambas ventanas como lo muestra las siguientes imágenes: 

Como se puede observar en el código, este componente se crea en el archivo py, pero todo el estilo se le da en el archivo kv, este componente puede recibir distintos parámetros, como el text y amount, que son utilizados en los label llamando a root.text y root.amount para asignar el texto a cada label, root hace referencia a los parámetros de la clase InfoCard.

Aquí un ejemplo de como se utilizaría este componente:

Existen otras formas de crear componentes reutilizables en kivymd que mostraré en seguida.

Este código corresponde al campo de búsqueda que se creo para la pantalla homescreen y fue escrito completamente desde código kv, donde SearchField es el nombre de nuestro componente y @MDBoxLayout corresponde al componente del que heredara sus atributos. Este componente fácilmente se pudo haber creado de manera global como se hizo con el componente InfoCard, pero no tenia sentido hacerlo ya que solo se utiliza una vez.

Y por ultimo tenemos un componente que se utiliza dinámicamente:

 

Estos componentes se crearon desde código Python, pero se les dio estilo desde kv.

 Y finalmente se utilizo dinámicamente desde el archivo transactions.py al iniciar la pantalla.

Corresponden a los siguientes elementos de la aplicación.

Que por cierto aproveche este ejemplo para simular una situación donde se extraiga esa información de una base de datos, API o alguna otra fuente, para hacer la simulación se creo un archivo .json dentro de la carpeta assets/data, es como si consultáramos información desde una API y esta nos regresa un JSON, el archivo se recorre con un ciclo y se generar los componentes con la información consultada.

Espero que esta información te haya resultado útil, puedes complementar la aplicación agregando nuevas pantallas o reciclar los componentes en tus propios proyectos.

Si tienes alguna duda puedes compartirla sin miedo en la sección de comentarios, tratare de responderte con brevedad y si no se la respuesta puedo ayudarte con lo que sé.