Criar um aplicativo to-do-app tornou-se como a frase "Hello World", para quando estamos aprendendo uma linguagem de programação é como se fosse uma tradição, é a frase favorita para testar a saída(output) pela primeira vez.
Então, aqui também criamos o famoso aplicativo de to-do-app no Tkinter, para nos familiarizarmos com seu uso.
Neste tutorial, criamos o famoso aplicativo To-do-app em python, usando Tkinter. Criamos este aplicativo para melhorar ainda mais nossa capacidade de trabalhar com python.
Criação da interface gráfica (front-end)
Exatamente como disse, usaremos o Tkinter para a parte visual.
Crie um novo arquivo python e nomeie-o como quiser, o meu chamarei de todo.py e salvarei usando a extensão de arquivo python.
Em seguida, importe a biblioteca tkinter e crie uma janela vazia com o tkinter, e também define algumas cores que irás usar neste projeto.
from tkinter import *
from tkinter import messagebox
################# definindo algumas cores ##############
co0 = "#000000" # preta
co1 = "#59656F"
co2 = "#feffff" # branca
co3 = "#0074eb" # azul
co4 = "#f04141" # vermelho
co5 = "#59b356" # verde
co6 = "#cdd1cd" # cizenta
################# Criando Janela principal ##############
janela = Tk()
# to prevent the window size from being changed
janela.resizable(width=FALSE, height=FALSE)
janela.geometry('500x225')
janela.title('To-do App')
janela.configure(background=co1)
janela.mainloop()
A seguir, criaremos dois frames, um que colocaremos à esquerda e outro à direita da janela principal.
A ideia é dividir a tela em duas partes, uma lateral para mostrar as operações e outra para mostrar as tarefas.
Aqui usaremos o gerenciador de posicionamento de grade, com o qual é mais fácil obter o resultado que queremos obter. Então será:
### dividindo a janela em 2 frames, esquerdo e direito ########
frame_esquerda = Frame(janela, width=300, height=200, bg=co2, relief="flat",)
frame_esquerda.grid(row=0, column=0, sticky=NSEW)
frame_direita = Frame(janela, width=200, height=250, bg=co2, relief="flat",)
frame_direita.grid(row=0, column=1, sticky=NSEW)
##### dividindo o frame esquerdo em duas partes,cima e baixo ######
frame_e_cima = Frame(frame_esquerda, width=300,
height=50, bg=co2, relief="flat",)
frame_e_cima.grid(row=0, column=0, sticky=NSEW)
frame_e_baixo = Frame(frame_esquerda, width=300,
height=150, bg=co2, relief="flat",)
frame_e_baixo.grid(row=1, column=0, sticky=NSEW)
A seguir, vamos criar o botão adicionar, remover e atualizar, que nos permitirá realizar as operações. Estes botões serão posicionados no quadro esquerdo na parte superior. Então teremos:
##### criando botões no frame frame_e_cima ########
b_novo = Button(frame_e_cima, text="+ Novo", width=10, height=1, bg=co3, fg="white",
font="5", anchor="center", relief=RAISED)
b_novo.grid(row=0, column=0, sticky=NSEW, pady=1)
b_remover = Button(frame_e_cima, text="Remover", width=10, height=1, bg=co4,
fg="white", font="5", anchor="center", relief=RAISED)
b_remover.grid(row=0, column=1, sticky=NSEW, pady=1)
b_atualizar = Button(frame_e_cima, text="Atualizar", width=10, height=1, bg=co5, fg="white",
font="5", anchor="center", relief=RAISED)
b_atualizar.grid(row=0, column=2, sticky=NSEW, pady=1)
Depois disso, também iremos criar um Label e Listbox no frame à direita, onde nossas tarefas serão apresentadas, e adicionaremos algumas tarefas na Listbox, assim teremos.
######### Adicionando Label e Listbox no frame a direita ########
label = Label(frame_direita, text="Tarefas", width=37, height=1, pady=7,
padx=10, relief="flat", anchor=W, font=('Courier 20 bold'), bg=co2, fg=co0)
label.grid(row=0, column=0, sticky=NSEW, pady=1)
listbox = Listbox(frame_direita, font=('Arial 9 bold'), width=1)
listbox.grid(row=1, column=0, columnspan=2, sticky=NSEW, pady=5)
Agora iremos adicionar algumas tarefas a nossa lista.
########## adicionando algumas tarefas na Listbox ##########
tarefas = ["Pagar conta", "Comer", "Assistir One Piece", "dormir"]
for item in tarefas:
listbox.insert(END, item)
Desta forma, nosso front end está pronto, agora vamos criar uma função para o botão Novo, Remover e Atualizar, e então conectaremos essas funções com o back end
Criando Banco de dados (back-end)
Agora criaremos nosso banco de dados onde salvaremos nossas tarefas.
Para fazer isso, crie um novo arquivo python com o nome bd.py e execute o código a seguir.
# importando sqlite3
import sqlite3 as lite
# criando e conectando com o banco de dados
con = lite.connect('todo.db')
O código acima irá criar um banco de dados chamado todo.db ,e você verá que um novo arquivo todo.db será criado em sua pasta atual, é o banco de dados que acabamos de criar, a seguir iremos criar tabela dentro do nosso banco de dados.
# Criar tabela
with con:
cur = con.cursor()
cur.execute( "CREATE TABLE tarefa(id INTEGER PRIMARY KEY AUTOINCREMENT, nome TEXT)")
Ao inserir o código acima, assim que ele for executado, e você não obtiver nenhum erro durante a execução, significa que a tabela foi criada.
E depois disso, comente essa mesma linha de código.
"""
# Criar tabela
with con:
cur = con.cursor()
cur.execute("CREATE TABLE tarefa(id INTEGER PRIMARY KEY AUTOINCREMENT, nome TEXT)")
"""
Inserir Tarefas
Agora iremos inserir algumas tarefas na tabela de tarefas.
# Inserir tarefas
with con:
cur = con.cursor()
cur.execute("INSERT INTO tarefa(nome) VALUES('Assistir One Piece')")
cur.execute("INSERT INTO tarefa(nome) VALUES('Comer')")
cur.execute("INSERT INTO tarefa(nome) VALUES('Jogar Bola')")
cur.execute("INSERT INTO tarefa(nome) VALUES('Dormir')")
Após inserir algumas tarefas, transformaremos este código em uma função, e esta função receberá um parâmetro, que é o valor a ser inserido.
# Inserir tarefas
def inserir(i):
with con:
cur = con.cursor()
query = "INSERT INTO tarefa (nome) VALUES (?)"
cur.execute(query, i)
Selecionar Tarefas
Agora iremos selecionar algumas tarefas na tabela de tarefas.
# Selecionar tarefas
with con:
cur = con.cursor()
cur.execute("SELECT * FROM tarefa")
rows = cur.fetchall()
for row in rows:
print(row)
Também transformaremos este snippet de código em uma função.
# Selecionar tarefas
def selecionar():
lista_tarefas = []
with con:
cur = con.cursor()
cur.execute("SELECT * FROM tarefa")
rows = cur.fetchall()
for row in rows:
lista_tarefas.append(row)
return lista_tarefas
Deletar Tarefas
Agora iremos criar query para deletar Tarefa no banco de dados.
# Deletar tarefas
with con:
cur = con.cursor()
cur.execute("DELETE FROM tarefa WHERE id = 3")
Ao executar o script, a tarefa com id = 3 será excluída, agora também transformaremos esse código em uma função.
# Deletar tarefas
def deletar(i):
with con:
cur = con.cursor()
query = "DELETE FROM tarefa WHERE id=?"
cur.execute(query, i)
Atualizar Tarefas
Agora iremos criar query para atualizar as Tarefa no banco de dados.
# Atualizar tarefas
with con:
cur = con.cursor()
cur.execute("UPDATE tarefa SET nome='fazer leitura' WHERE id=2")
Ao executar o script, a tarefa com id = 2 o nome será alterada para “fazer leitura”, agora também transformaremos esse código em uma função.
# Atualizar tarefas
def atualizar(i):
with con:
cur = con.cursor()
query = "UPDATE tarefa SET nome=? WHERE id=?"
cur.execute(query, i)
Conectar front-end com o back-end
Vamos voltar ao script do front end e exibiremos as tarefas que temos no banco de dados em nossa Listbox, então começaremos a conectar o front end com o back end.
Mostrar Tarefas na Listbox
Comecaremos por importar tudo em db.py para dentro do todo.py
from bd import *
Depois disso, passaremos a função selecionar, dentro da variável “tarefas” em todo.py, ao lado de onde está a Listbox., e iremos alterar o código para o seguinte:
###### adicionando algumas tarefas na Listbox ########
tarefas = selecionar()
for item in tarefas:
listbox.insert(END, item[1])
Se executarmos o script, as tarefas do banco de dados serão exibidas dentro da Listbox.
Em seguir iremos transformar este trecho de código em uma função e executá la.
############## Mostrar tarefas na Listbox #############
def mostrar():
listbox.delete(0, END)
tarefas = selecionar()
for item in tarefas:
listbox.insert(END, item[1])
mostrar()
Criar Função main()
Em seguida , iremos criar uma função e essa função receberá um parâmetro que decidirá qual das operações será realizada, entre o botão Novo e Atualizar, e coloca essa função antes desses botões.
#### função main #####
def main(a):
############## novo #############
if a == 'novo':
for widget in frame_e_baixo.winfo_children():
widget.destroy()
print("novo")
############## Atualizar ########
if a == 'atualizar':
for widget in frame_e_baixo.winfo_children():
widget.destroy()
print("Atualizar")
Em seguida, iremos para os botões Novo e Atualizar e passaremos a função para eles usando lambda.
b_novo = Button(frame_e_cima, text="Novo", width=10, height=1, bg=co3, fg="white",
font="5", anchor="center", relief=RAISED, command=lambda: main('novo'))
b_novo.grid(row=0, column=0, sticky=NSEW, pady=1)
b_atualizar = Button(frame_e_cima, text="Atualizar", width=10, height=1, bg=co5, fg="white",
font="5", anchor="center", relief=RAISED, command=lambda: main('atualizar'))
b_atualizar.grid(row=0, column=2, sticky=NSEW, pady=1)
Ao executar o programa e clicar no botão novo, a mensagem “novo” será impressa no terminal, da mesma forma se clicarmos no botão atualizar, a mensagem “atualizar” será impressa no terminal.
Inserir Nova Tarefa
Agora que nossa função está funcionando, iremos criar o formulário para adicionar uma nova tarefa, e também iremos usar a função “inserir()” , na condicao novo, apaga a parte onde esta print("novo"), e cola a seguinte funcao:
#### função adicionar ###
def adicionar():
tarefa_entry = entry.get()
inserir([tarefa_entry])
mostrar()
lb = Label(frame_e_baixo, text="Insira uma nova tarefa", width=42, height=5, pady=15)
lb.grid(row=0, column=0, sticky=NSEW)
entry = Entry(frame_e_baixo, width=15,)
entry.grid(row=1, column=0, sticky=NSEW)
E vamos criar e passar esta função para o botão adicionar.
b_adicionar = Button(frame_e_baixo, text="Adicionar", width=9, height=1, bg=co6,pady=10, fg=co0, font="8", relief=RAISED, overrelief=RIDGE, command=adicionar)
b_adicionar.grid(row=2, column=0, sticky=NSEW, pady=15)
A operação de inserir já está funcionando, e agora vamos conectar a função Atualizar.
Quando executamos o programa e clicamos em novo e escrevermos uma nova tarefa, e clicamos em adicionar, a tarefa será inserida em nosso banco de dados e também na Listbox.
Já temos a opção adicionar funcionando, agora vamos adicionar a função atualizar.
Atualizar Tarefa
Vamos criar uma função e dentro desta função vamos criar um Label e uma entry.
def on():
lb = Label(frame_e_baixo, text="Atualize a tarefa", width=42, height=5, pady=15)
lb.grid(row=0, column=0, sticky=NSEW)
entry = Entry(frame_e_baixo, width=15,)
entry.grid(row=1, column=0, sticky=NSEW)
Ok, agora queremos que quando clicarmos no botão atualizar a função on() seja executada sozinha, então para isso vamos chamar a função aqui embaixo assim.
on()
Em seguida, obteremos a palavra selecionada em nossa Listbox.
cs = listbox.curselection()[0]
s_palavra = listbox.get(cs)
entry.insert(0, s_palavra)
Agora que temos a posição da palavra selecionada, vamos atualizar a mesma palavra, criando uma função.
### função atualizar ####
def alterar():
for item in tarefas:
if s_palavra == item[1]:
nova = [entry.get(), item[0]]
atualizar(nova)
entry.delete(0, END)
mostrar()
Então agora vamos criar um botão e passar a função de atualização nele.
b_atualizar = Button(frame_e_baixo, text="Atualizar", width=9, height=1, bg=co6, pady=10,
fg=co0, font="8", relief=RAISED, overrelief=RIDGE, command=alterar)
b_atualizar.grid(row=2, column=0, sticky=NSEW, pady=15)
A operação de atualização já está funcionando, agora só falta a operação de remover, e para isso será:
Deletar Tarefa
Vamos criar uma função que irá remover a tarefa selecionada na Listbox, e vamos passar essa função para o botão remover.
############## Remove #############
def remover():
cs = listbox.curselection()[0]
s_palavra = listbox.get(cs)
tarefas = selecionar()
for item in tarefas:
if s_palavra == item[1]:
deletar([item[0]])
mostrar()
b_remover = Button(frame_e_cima, text="Remover", width=10, height=1, bg=co4,
fg="white", font="5", anchor="center", relief=RAISED, command=remover)
Agora execute o programa e selecione uma tarefa e clique em remover para ver a tarefa ser removida da lista.
Código Completo
from tkinter import *
from tkinter import messagebox
from bd import *
################# definindo algumas cores ##############
co0 = "#000000" # preta
co1 = "#59656F"
co2 = "#feffff" # branca
co3 = "#0074eb" # azul
co4 = "#f04141" # vermelho
co5 = "#59b356" # verde
co6 = "#cdd1cd" # cizenta
################# Criando Janela principal ##############
janela = Tk()
# to prevent the window size from being changed
janela.resizable(width=FALSE, height=FALSE)
janela.geometry('500x225')
janela.title('To-do App')
janela.configure(background=co1)
### dividindo a janela em 2 frames, esquerdo e direito ########
frame_esquerda = Frame(janela, width=300, height=200, bg=co2, relief="flat",)
frame_esquerda.grid(row=0, column=0, sticky=NSEW)
frame_direita = Frame(janela, width=200, height=250, bg=co2, relief="flat",)
frame_direita.grid(row=0, column=1, sticky=NSEW)
##### dividindo o frame esquerdo em duas partes,cima e baixo ######
frame_e_cima = Frame(frame_esquerda, width=300,
height=50, bg=co2, relief="flat",)
frame_e_cima.grid(row=0, column=0, sticky=NSEW)
frame_e_baixo = Frame(frame_esquerda, width=300,
height=150, bg=co2, relief="flat",)
frame_e_baixo.grid(row=1, column=0, sticky=NSEW)
#### função main #####
def main(a):
############## novo #############
if a == 'novo':
for widget in frame_e_baixo.winfo_children():
widget.destroy()
#### função adicionar ###
def adicionar():
tarefa_entry = entry.get()
inserir([tarefa_entry])
mostrar()
lb = Label(frame_e_baixo, text="Insira uma nova tarefa", width=42, height=5, pady=15)
lb.grid(row=0, column=0, sticky=NSEW)
entry = Entry(frame_e_baixo, width=15,)
entry.grid(row=1, column=0, sticky=NSEW)
b_adicionar = Button(frame_e_baixo, text="Adicionar", width=9, height=1, bg=co6,pady=10, fg=co0, font="8", relief=RAISED, overrelief=RIDGE, command=adicionar)
b_adicionar.grid(row=2, column=0, sticky=NSEW, pady=15)
############## Atualizar ########
if a == 'atualizar':
for widget in frame_e_baixo.winfo_children():
widget.destroy()
def on():
lb = Label(frame_e_baixo, text="Atualize a tarefa", width=42, height=5, pady=15)
lb.grid(row=0, column=0, sticky=NSEW)
entry = Entry(frame_e_baixo, width=15,)
entry.grid(row=1, column=0, sticky=NSEW)
tarefas = selecionar()
cs = listbox.curselection()[0]
s_palavra = listbox.get(cs)
entry.insert(0, s_palavra)
### função atualizar ####
def alterar():
for item in tarefas:
if s_palavra == item[1]:
nova = [entry.get(), item[0]]
atualizar(nova)
entry.delete(0, END)
mostrar()
b_atualizar = Button(frame_e_baixo, text="Atualizar", width=9, height=1, bg=co6, pady=10,
fg=co0, font="8", relief=RAISED, overrelief=RIDGE, command=alterar)
b_atualizar.grid(row=2, column=0, sticky=NSEW, pady=15)
on()
############## Remove #############
def remover():
cs = listbox.curselection()[0]
s_palavra = listbox.get(cs)
tarefas = selecionar()
for item in tarefas:
if s_palavra == item[1]:
deletar([item[0]])
mostrar()
##### criando botões no frame frame_e_cima ########
b_novo = Button(frame_e_cima, text="+ Novo", width=10, height=1, bg=co3, fg="white",
font="5", anchor="center", relief=RAISED, command=lambda: main('novo'))
b_novo.grid(row=0, column=0, sticky=NSEW, pady=1)
b_remover = Button(frame_e_cima, text="Remover", width=10, height=1, bg=co4,
fg="white", font="5", anchor="center", relief=RAISED,command=remover)
b_remover.grid(row=0, column=1, sticky=NSEW, pady=1)
b_atualizar = Button(frame_e_cima, text="Atualizar", width=10, height=1, bg=co5, fg="white",
font="5", anchor="center", relief=RAISED, command=lambda: main('atualizar'))
b_atualizar.grid(row=0, column=2, sticky=NSEW, pady=1)
######### Adicionando Label e Listbox no frame a direita ########
label = Label(frame_direita, text="Tarefas", width=37, height=1, pady=7,
padx=10, relief="flat", anchor=W, font=('Courier 20 bold'), bg=co2, fg=co0)
label.grid(row=0, column=0, sticky=NSEW, pady=1)
listbox = Listbox(frame_direita, font=('Arial 9 bold'), width=1)
listbox.grid(row=1, column=0, columnspan=2, sticky=NSEW, pady=5)
############## Mostrar tarefas na Listbox #############
def mostrar():
listbox.delete(0, END)
tarefas = selecionar()
for item in tarefas:
listbox.insert(END, item[1])
mostrar()
janela.mainloop()
Conclusão
Ok pessoal assim nosso aplicativo está finalizado, qualquer dúvida é só comentar que iremos ajudar, Obrigado.
0 Comentários