Vamos fazer uma tela de login com Python e KivyMD
- #Python
Pythonistas, Devs e até mesmo entusiastas devem saber que python é uma linguagem em ascensão! Mas muita coisa ainda não é nativa da linguagem, pois bem, a criação de Guido van Rossum não foi feita para abranger todas as áreas de TI e por causa disso precisamos usar certos “frameworks”.
Quando trata-se de criação de interface o python possui nativamente o Tkinter, porém os seus widgets não são tão atraentes e modernos, por isso venho apresentar o KivyMD como uma alternativa a ser adotada!
Vale ressaltar que neste artigo opinativo para web ensinarei como fazer a interface da tela de login (com conceitos de UX e UI design) e não será falado como interligar/criar um banco de dados para os usuários com o python.
PRIMEIROS PASSOS…
Certamente, o primeiro passo para esse projeto é ter a linguagem Python instalada no seu computador, e para isso você deve saber qual a versão do Sistema Operacional que sua máquina possui e sua arquitetura (é 32 bits ou 64)!
Mas para quê instalar uma linguagem no meu PC? Simples, o computador é um pai que conta histórias para você “dormir”. E para contar uma história ele precisa saber falar e ler, certo? Muitas linguagens já vêm instaladas em computadores, entretanto, só computadores com distros Linux como sistema operacional já vem com o Python instalado, você terá que instalá-lo caso use Windows ou Mac!
Como eu instalo o Python?
Acesse o site, https://www.python.org/, vá até a área de pesquisa do site e digite “download”. Depois disso, irá aparecer uma nova tela com as principais versões da linguagem, clique em lançamentos e depois no link escrito “Downloads” para direcionar-se às novas versões do Python, e por fim clique no botão escrito “BAIXE A VERSÃO 3.10.0”.
Após o download vá no arquivo baixado e clique duas vezes, logo depois disso o processo de instalação irá começar, recomendo que leia as instruções antes de apertar o botão “next”.
O próximo passo é simples! Caso você não possua uma IDE (Integrated Development Environment ou Ambiente de Desenvolvimento Integrado em português) recomendo o VS Code (Visual Studio Code), pode baixar através deste link: https://code.visualstudio.com/download.
Eu recomendo o Vs Code pois é mais fácil encontrar conteúdos relacionados a ele na internet, porém, não posso esquecer do Pycharm que é uma das IDEs exclusivas para python.
Mas pra quê uma IDE?
As IDEs, são programas que te ajudam a organizar-se, orientar-se e certificar-se que o projeto está sendo desenvolvido corretamente. Sem elas, projetos complexos não poderiam ter novas atualizações.
O último passo é um pouco grande, abra a IDE e aperte CTRL + N para criar uma novo arquivo e depois disso nomeie o arquivo como “aula_kivymd.py”, feito isso procure dentro da IDE um botão nomeado de terminal ou prompt de comando e clique nele, após isso uma janela abrirá e nela escreva o comando pip install kivy depois de escrever aperte ENTER (isso irá fazer a instalação do kivy de forma automática), quando a instalação for finalizada escreva esse comando pip install kivymd e aperte ENTER novamente, depois desse processo poderemos iniciar o projeto da tela de login.
PONTOS IMPORTANTES DO KIVYMD:
- KivyMD é uma “extensão” do Kivy;
- Dar para criar programas para todos os tipos (Linux, Mac, Windows, Android e IOS);
- Todos os serviços do Kivy usam uma linguagem de marcação própria (kvlang);
- Poucas linhas de código, mas conceitos e funções complexas;
- Constrói APPs (aplicativos/aplicações mobile) de forma nativa e gratuita;
- Um código pode ser usado para criar aplicativos variados;
- Usa de forma nativa o Material Design, ícones de interface disponibilizados pela Google;
- É um forte concorrente do Flutter (linguagem e kit de desenvolvimento criado pelo Google para desenvolvimento nativo).
1,2,3 … PROGRAMAR, JÁ :
Na primeira linha, escreva from kivymd.app import MDApp as aplicativo, isso faz com que o KivyMD seja atribuído ao nosso projeto e deixa usarmos seus widgets, o código irá ficar assim:
from kivymd.app import MDApp as aplicativo
Como o KIvyMD usa o kvlang do kivy, precisamos importar o elemento Builder e pra isso basta da um linha em branco para organizar o quê é KivyMD e Kivy, e escrever from kivy.lang import Builder as bd e o código ficará assim:
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
Agora vamos criar uma variável onde colocaremos o elementos do KivyMD, deve ficar algo assim:
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
t = """
Screen:
BoxLayout:
"""
Na variável, criamos uma cena (Screen um widget que mostra o que deve conter no cenário, um aplicativo é uma peça de teatro) e depois colocamos o BoxLayout pois, é um widget que coloca os elemento que estão dentro dele como uma pilha de caixas, ou seja, um encima do outro. Agora vamos colocar um ícone de usuário.
t = """
Screen:
BoxLayout:
FloatLayout:
MDIconButton:
"""
O próximo passo é colocar os atributos do ícone, como o material design a ser usado o seu tamanho e sua opacidade.
t = """
Screen:
BoxLayout:
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60"
"""
O atributo icon define o material design a ser usado, o user_font_size define o tamanho e o pos_hint define a posição através de plano cartesiano e o opacity determina a opacidade. Agora vamos digitar a execução do nosso programa.
class App(aplicativo)
def build(self):
pass
Antes de executar precisamos definir que a variável “t” deve pertencer ao aplicativo, então criamos uma classe que será o nosso aplicativo e dentro dela terá as funções do projeto sendo a builder a principal para a construção do programa, agora vamos melhorar a nossa função.
class App(aplicativo)
def build(self):
App.title = "Aula de Kivy"
self.theme_cls.primary_palette = 'Yellow'
app_layout = bd.load_string(t)
return app_layout
O app.title faz com que a janela do programa tenha um título, o self.theme_cls.primary_palette = ‘Yellow’ define que as cores do aplicativo terá a base no amarelo e a variável app_layout recebe a variável “t” para que seja retornada dentro do aplicativo, agora vamos dizer para o código que queremos ver o projeto.
class App(aplicativo)
def build(self):
App.title = "Aula de Kivy"
self.theme_cls.primary_palette = 'Yellow'
app_layout = bd.load_string(t)
return app_layout
if __name__ == '__main__':
App().run():
O comando if __name__ == ‘_main_’: define que se toda a biblioteca do python e do kivy estiverem instaladas corretamente o nosso projeto pode ser executado/rodado. Se você tentar rodar o código agora pode não aparecer a nossa janela que foi programada por causa que não definimos o tamanho da janela, então logo abaixo terá as imagens para atribuir um tamanho para a janela.
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
from kivy.core.window import Window as windows_pantalla
Em primeiro lugar, devemos importar o módulo window do kivy, depois criar uma variável para armazenar o tamanho que desejamos:
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
from kivy.core.window import Window as windows_pantalla
size_tamaño = (400,420)
Agora vamos intercalar o módulo window com a variável:
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
from kivy.core.window import Window as windows_pantalla
size_tamaño = (400,420)
windows_pantalla.size = size_tamaño
Caso tenha copiado tudo certo até aqui, você já pode executar o código e deve aparecer essa janela:
PARA RECAPITULAR …
O código até agora deve estar similar ao debaixo:
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
from kivy.core.window import Window as windows_pantalla
size_tamaño = (400,420)
windows_pantalla.size = size_tamaño
t = """
Screen:
BoxLayout:
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
"""
class App(aplicativo):
def build(self):
App.title = "Aula de Kivy"
self.theme_cls.primary_palette = 'Yellow'
app_layout = bd.load_string(t)
return app_layout
if __name__ == '__main__':
App().run()
Vamos Customizar Um Pouco Mais:
Agora vamos colocar um campo de texto para o usuário colocar o seu nome, e para isso eu escolhi o Widget MDTextField, agora vamos colocar o text field na variável “t”:
t = ""
Screen:
BoxLayout:
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
""""
O font_size determina ao tamanho, o size_hint_x determina a largura, o hint_text cuida do texto que se trata o campo do texto o pos_hint cuida do posicionamento através do plano cartesiano, o icon_rigth determina o ícone e que ele ficará na direita o icon_rigth_color cuida da cor do campo de texto, nesse caso irá ser o que tiver como paleta de cor.
Agora vamos duplicar o MDTextField, e na duplicata vamos atribuir um novo atributo:
t = ""
Screen:
BoxLayout:
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' senha:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.4}
icon_right: 'lock'
password: True
icon_right_color: app.theme_cls.primary_color
width:200
""""
O password quando direcionado como TRUE (verdadeiro), faz com quê o campo de texto se transforme em senha, ou seja, tudo que o usuário escrever irá aparecer na tela codificado por asteriscos (*).
PARA RECAPITULAR 2 …
Mas um check point, vamos dar uma parada e ver se o código está igual o de baixo:
from kivymd.app import MDApp as aplicativ
from kivy.lang import Builder as bd
from kivy.core.window import Window as windows_pantalla
size_tamaño = (400,420)
windows_pantalla.size = size_tamaño
t = """
Screen:
BoxLayout:
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' senha:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.4}
icon_right: 'lock'
password: True
icon_right_color: app.theme_cls.primary_color
width:200
"""
class App(aplicativo):
def build(self):
App.title = "Aula de Kivy"
self.theme_cls.primary_palette = 'Red'
app_layout = bd.load_string(t)
return app_layout
if __name__ == '__main__':
App().run()o
CUSTOMIZANDO UM POUCO MAIS …
Acho que a esta altura você já deve ter testado o código, e se não gostou do design, calma, estamos só começando.
t = ""
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Aula de Kivy"
size_hint_y:0.11
elevation:20
opacity: .99
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' senha:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.4}
icon_right: 'lock'
password: True
icon_right_color: app.theme_cls.primary_color
width:200
""""
No trecho acima, podemos ver que eu fiz duas alterações que já dão uma outra cara para o projeto! A primeira foi dar um sentido para o BoxLayout, isso faz com que elementos como Toolbar e Navigation Drawer recebam um sentido já pré-definido o segundo foi adicionar o MDToobar que faz uma barra de ferramentas no projeto, o atributo title do MDToobar recebe uma string para exibir o nome da barra de ferramenta, o size_hint_y determina o tamanho da lateral da barra através do plano cartesiano e o elevation trata de adicionar um sombreamento abaixo da barra.
Agora vamos “apimentar”o UI do projeto, um outro atributo/máscara que podemos adicionar em campos de texto do kivy e kivyMD é o helper_text, ele faz aparece uma espécie de legenda quando o usuário usa o campo para digitar algo, se interessou? basta acompanhar para ver.
t = ""
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Aula de Kivy"
size_hint_y:0.11
elevation:20
opacity: .99
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Username or E-mail'
helper_text_mode: "on_focus"
helper_font_size: 0.19
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' senha:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.4}
icon_right: 'lock'
password: True
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Enter Password'
helper_text_mode: "on_focus"
helper_font_size: 0.19
""""
Pode ver que o helper_text carrega uma string para ser exibida, e helper_text_mode atribui um estilo desse texto aparecer.
PARA RECAPITULAR 3 …
O penúltimo check point deste artigo, vou exibir o código que fizemos até agora:
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
from kivy.core.window import Window as windows_pantalla
size_tamaño = (400,420)
windows_pantalla.size = size_tamaño
t = """
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Aula de Kivy"
size_hint_y:0.11
elevation:20
opacity: .99
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Username or E-mail'
helper_text_mode: "on_focus"
helper_font_size: 0.19
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' senha:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.4}
icon_right: 'lock'
password: True
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Enter Password'
helper_text_mode: "on_focus"
helper_font_size: 0.19
"""
class App(aplicativo):
def build(self):
App.title = "Aula de Kivy"
self.theme_cls.primary_palette = 'Red'
app_layout = bd.load_string(t)
return app_layout
if __name__ == '__main__':
App().run()
Linhas Finais …
Para encerrar o artigo, a última coisa que vou mostra é como fazer a senha aparecer quando toca no simbolo. Para isso vamos apagar o ícone do MDTextField da senha e fazer um botão que terá o mesmo local e ícone da senha.
t = ""
<Tela1>:
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Aula de Kivy"
size_hint_y:0.11
elevation:20
opacity: .99
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Username or E-mail'
helper_text_mode: "on_focus"
helper_font_size: 0.19
MDTextField:
id: password
font_size: 18
size_hint_x: 0.9
hint_text: ' senha:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.4}
password: True
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Enter Password'
helper_text_mode: "on_focus"
helper_font_size: 0.19
MDIconButton:
id: password_buttom
icon: 'eye-off'
pos_hint: {'center_x':0.9, 'center_y':0.485}
opacity: 0.60
theme_text_color: "Custom"
text_color: app.theme_cls.primary_color
on_release: root.show_password()
ScreenManager:
Tela1:
name: 'tela1'
"""
Eu coloquei a interface dentro de uma classe que chamei de Tela1, depois criei um botão e cataloguei usando o id de password_button, vale lembra que coloquei o campo senha dentro de um id para o localizar. E no final eu chamo o ScreenManeger para integrar a nova função do projeto.
class Tela1(Screen)
def show_password(self):
if self.ids.password.password is False:
self.ids.password_buttom.icon = 'eye-off'
self.ids.password.password = True
else:
self.ids.password_buttom.icon = 'eye'
self.ids.password.password = False:
PARA RECAPITULAR 4 …
O último check point, desejo sorte e espero ter ajudado, enfim, o código final tenderá a ficar assim:
from kivymd.app import MDApp as aplicativo
from kivy.lang import Builder as bd
from kivy.core.window import Window as windows_pantalla
from kivy.uix.screenmanager import Screen
size_tamaño = (400,420)
windows_pantalla.size = size_tamaño
t = """
<Tela1>:
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Aula de Kivy"
size_hint_y:0.11
elevation:20
opacity: .99
FloatLayout:
MDIconButton:
icon: 'account-box'
user_font_size: '100sp'
pos_hint: {'center_x':0.5, 'center_y':0.8}
opacity: .60
MDTextField:
font_size: 18
size_hint_x: 0.9
hint_text: ' usuário:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.6}
icon_right: 'email-outline'
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Username or E-mail'
helper_text_mode: "on_focus"
helper_font_size: 0.19
MDTextField:
id: password
font_size: 18
size_hint_x: 0.9
hint_text: ' senha:'.capitalize()
pos_hint: {'center_x':0.5, 'center_y':0.4}
password: True
icon_right_color: app.theme_cls.primary_color
width:200
helper_text: ' Enter Password'
helper_text_mode: "on_focus"
helper_font_size: 0.19
MDIconButton:
id: password_buttom
icon: 'eye-off'
pos_hint: {'center_x':0.9, 'center_y':0.485}
opacity: 0.60
theme_text_color: "Custom"
text_color: app.theme_cls.primary_color
on_release: root.show_password()
ScreenManager:
Tela1:
name: 'tela1'
"""
class Tela1(Screen):
def show_password(self):
if self.ids.password.password is False:
self.ids.password_buttom.icon = 'eye-off'
self.ids.password.password = True
else:
self.ids.password_buttom.icon = 'eye'
self.ids.password.password = False
class App(aplicativo):
def build(self):
App.title = "Aula de Kivy"
self.theme_cls.primary_palette = 'Red'
app_layout = bd.load_string(t)
return app_layout
if __name__ == '__main__':
App().run()
REFERÊNCIAS …
Grupo de kivy e kivyMD na rede social REDDIT:
Grupo de kivy e kivyMD na rede social FACEBOOK:
Meu canal no YouTube:
