Up next in 10
Como Criar um Gerenciador de Tarefas com Python e Streamlit
Apr 24, 2025
Neste tutorial, você vai aprender a criar um aplicativo de lista de tarefas com Python usando Streamlit para a interface, SQLite para armazenar os dados e Plotly para exibir gráficos interativos de progresso. 🚀 ✅ Ideal para iniciantes e intermediários ✅ Interface moderna com Streamlit ✅ Banco de dados local com SQLite ✅ Gráfico de tarefas concluídas vs pendentes ✅ Estilização com HTML + CSS inline ✅ 100% Python Se você está aprendendo Python e quer construir aplicações visuais e úteis, esse vídeo é pra você! Artigo: https://www.usandopy.com/pt/artigo/como-criar-um-app-de-lista-de-tarefas-com-python-streamlit-sqlite-e-plotly/ 💡Codigo : with col_dir: # Gráfico de progresso com estilo moderno if not lista_tarefas.empty: dados_progresso = lista_tarefas["status"].value_counts().reset_index() dados_progresso.columns = ["Status", "Quantidade"]
View Video Transcript
0:00
olá pessoal sejam bem-vindo de volta ao canal Jão aqui falando hoje vamos criar um novo projeto sobre Python Streamlitad
0:07
o nome do projeto será gerenciador de tarefas ok então esse projeto aqui será muito bom caso estás a começar com
0:12
Streamlitad para que tu possas sentir um pouquinho mais familiarizado com o Streamlit então aqui tem o nosso projeto
0:18
OK sem mais delongas como sempre OK temos aqui o nosso projeto do jeito que ele funciona veja ah esse projeto aqui
0:24
nós vamos conectar com um banco de dados que será praticamente SQ Light 3 OK três melhor dizer e aqui nós teremos a opção
0:31
de adicionar tarefa remover tarefas e também teremos um gráfico aqui só para
0:37
dar mais um pouquinho de beleza no aplicativo ou talvez aumentar complexidade onde nós podemos tipo ver a
0:42
percentagem que é tipo o progresso das tarefas tipo das tarefas concluídas das tarefas que ainda estão pendentes e que
0:48
será este gráfico que nós temos aqui ok então por exemplo aqui nós podemos adicionar tipo uma nova tarefa por
0:53
exemplo aqui já temos três tarefas que primeiro é assistir One Piece depois completar a lição de casa fazer compras OK
0:59
vamos lá imagina que gostamos de aumentar mais uma outra tarefa que será por exemplo deixa-me ver blá blá blá blá blá e o que é que posso dizer tipo OK
1:06
sou única coisa que na cabeça ok assistir o quê solo leveling ok solo
1:11
leveling leveling level level solo leveling solo leveling ok embora que não
1:19
foi nada bom perfeito ok como nós podemos ver aqui aumentamos mais uma tarefa ok então momento essa tarefa está
1:25
como pendente razão pela qual que tarefas pendentes têm 75% em relação às tarefas concluídas
1:30
então por exemplo se eu trocar essa tarefa aqui como por exemplo eh completar a lição de casa se eu trocar para concluídas bum que nós podemos ver
1:38
aqui tipo o nosso gráfico também muda OK então hã como eu também posso deletar
1:43
aqui uma tarefa vamos deletar essa aqui fazer compras deletei e bum também o nosso gráfico foi atualizando OK então
1:50
este será o projeto que nós vamos criar e como sempre se tu gostares de cores deixarei o link na descrição do
1:55
vídeo tu pode ir lá e adquira o código e também para que gostaram de apoiar o canal deixare aí o link OK e ou melhor
2:03
as informações na descrição desse mesmo vídeo OK vão lá ajudam um pouquinho o canal para que eu possa melhorar a
2:08
qualidade dos vídeos também tipo mais topos um pouquinho avançados sobre Python perfeito então vamos começar com
2:14
a criação do nosso projeto veja a primeira coisa que tu tens que fazer como sempre OK tu tens que criar um novo
2:21
script Python já tenho aqui eu vou criar aqui o meu e o meu projeto OK então estou aqui nessa minha pasta aqui nessa
2:26
pasta perdão onde eu estou gravando todos todos os tutoriais que tem a ver com Python Streamlit então tu crias um
2:32
novo arquivo eu já tenho aqui esse arquivo que podemos ver aqui então nesse arquivo primeira coisa que tu vais fazer
2:38
como sempre é importar o streamlitad dentro do seu arquivo ok então vamos fazer o seguinte:
2:43
importams OK stream dessa forma aqui Streaml ST
2:51
perfeito agora após isto também vamos importar o pandas ok
2:58
importandas pedid e após o p também devemos importar o SQ
3:04
3 ok import SQL SQL
3:10
3 perfeito e também devemos importar o plotly ok
3:17
nós vamos usar o plotly para que nós possamos apresentar os gráficos então is vai ser o seguinte
3:24
import dessa forma aqui ok plotly express
3:32
as PX então perfeito essa primeira linha aqui é para que nós possamos usar o
3:37
streamlit aqui dentro aqui o pandas que um certo momento do corpo nós vamos usar o pandas para que nós possamos tipo
3:43
fazer leitura do nosso banco de dados e aqui o SQL 3 será o nosso banco de dados onde nós vamos guardar todas as
3:48
informações e já o plotly ele aqui vai servir para que nós possamos apresentar
3:54
o gráfico OK esse gráfico que nós temos aqui nós vamos usar o plotly para tal
4:00
então agora o próximo passo que nós vamos fazer OK nósamente vamos criar tipo uma conexão com o nosso banco de dados então para que nós possamos fazer
4:07
isso vai ser o seguinte veja eu aqui vou comentar dizendo o seguinte o quê cone
4:13
conexão com o banco de dados conexão com o banco de dados e
4:20
vamos fazer o seguinte eu vou criar uma função chamada def conectar conectar dessa forma aqui._PD pd tipo banco de
4:28
dados abre feix dois pontos e agora aqui eu vou criar uma variável que vou chamar
4:33
de con então esse con aqui vai ser como se fosse um conector vai me permitir eu conectar com o banco de dados ok então
4:38
toda vez que eu vou necessitar fazer uma conexão com o banco de dados sempre vou chamar o meu conectar isso vai ser o
4:44
seguinte con será igual a SQL3 OK sql 3 que é senhor aqui SQL Lite 3 OK
4:53
ponnect ok dessa forma p connect o que é que nós vamos conectar aqui dentro nós
5:00
vamos passar tipo qualquer nome de banco de dados OK se nós já temos o banco o banco de dados já criado nós apenas
5:05
vamos passar o nome OK então como a não temos vamos criar um banco de dados chamado tarefas OK
5:11
tarefas db então DB é a extensão dos bancos de dados nunca se esqueça dessa dessa extensão e apóis a minha conexão
5:18
vou criar tipo o meu cursor que vai me permitir eu fazer tipo todos os comandos OK então o meu cursor será igual a con
5:26
cursor abre e fecha ohou esse zero não sei porque que vê devemos remover
5:31
perfeito depois disso vamos ter o nosso seguinte OK cursor
5:36
será igual a ó desculpa nem vem que o cursor vai ser igual agora nós aqui depois do cursor devemos executar os
5:43
comandos SQL OK então isso vai ser cursor ponto execute abre e fecha então aqui
5:49
dentro onde começa toda a magia nós vamos começar a criar conexão eh os nossos comandos SQL então vamos fazer o
5:55
seguinte OK 1 2 3 4 5 6 perfeito vem aqui e bum a partir daqui começamos
6:03
então aqui dentro nós vamos passar todos os nossos comandos SQL primeiramente que nós vamos fazer nós vamos criar uma
6:09
tabela chamada tarefas OK então essa tabela vai ser o seguinte eu farei o seguinte OK create
6:17
table if not
6:25
dessa forma aqui isso essa tabela vou chamar de tarefa então aqui eu disse o seguinte OK cria uma tabela chamada
6:30
tarefas caso não existe OK caso exista ele apenas vai fazer a conexão então
6:36
faço o seguinte então aqui eu vou criar essa tabela vai ter ID id será integer
6:42
OK primary será primary key primary key ok e eu vou precisar vou passar de
6:49
autoincremente ok auto incremente autoincremento então quando
6:55
eu passo autoincremento eu não preciso mais passar tipo ID para o meu eh para as minhas tarefas OK aí ele vai passando
7:00
o ID automaticamente depois eu terei o seguinte que tarefa criar uma coluna
7:06
chamada tarefa então essa tarefa vai ser teste e não deve ser vazio ok então noto
7:12
nulo dessa coluna aqui vírgula e por fim eu vou ter também uma coluna chamada de
7:19
status ok então se nós precisamos verificar se a telefente ok text note not what note n
7:29
também não deve ser vazio perfeito então dessa forma aqui já
7:34
criamos a nossa conexão com o nosso banco de dados ok então agora após tudo isso aqui nós devemos fazer o comit para
7:40
que essas informações sejam executadas sejam guardadas no nosso banco de dados batalha vamos fazer o seguinte OK
7:50
con.com abre e fecha abre e fecha então depois do commit nós devemos sempre fechar o nosso banco de
7:56
dados ok mas aqui não vai ser necessário porque como estamos a colocar dentro de uma função depois do commit vamos usar
8:03
apenas o retorno para que nós possa nos retornar tipo essa conexão então vamos fazer o seguinte retorn return o quê
8:09
return o con que é a nossa conexão ok
8:14
salvei perfeito agora venho aqui então eh veja depois da conexão com o banco de dados vamos agora tipo criar a primeira
8:22
função que vai nos permitir com que nós possamos tipo inserir uma nova tarefa no nosso banco de dados então isso vai ser
8:28
o seguinte eu vou comentar aqui dizer o seguinte OK eh inserir tarefa não acho
8:33
que primeiro antes de inserir tarefa vamos primeiro criar algo que vai nos permitir com que nós possamos carregar todas as tarefas que estavam presentes
8:39
no nosso banco de dados para tal vou fazer o seguinte OK carregar as tarefas as
8:46
tarefas do banco de dados do banco de dados então isso vai ser o seguinte def
8:53
carregar carregar tarefas abro e fecho dois pontos então
9:01
essa função abre carregar tarefas como sempre vamos ter o nosso con OK vamos terar uma variável chamada con então
9:07
esse nosso con agora se nós iniciamos conectar com banco de dados vamos apenas chamar essa função aqui o que é o
9:14
conectar BD OK então eu vou chamar o meu conectar BD passo aqui no con então isso quer dizer logo já fiz a conexão com o
9:21
banco de dados agora e eu vou usar o Pandas para que eu possa fazer leitura de das informações
9:27
que estão presentes no meu banco de dados tá isso vai ser o seguinte DF vai ser igual a PD Pon read o que é que nós
9:37
vamos ler vamos usar o read SQL do Pandas ok read SQL abre fecha agora aqui dentro será
9:44
onde eu vou passar tipo os comandos ESQL que vai me permitir eu fazer a seleção de todas as informações que estão presentes dentro do banco de dados então
9:51
isso vai ser o seguinte vamos lá ver select e tudo que é o asterisco from a
9:58
partir from tarefa sair tarefas ok bater
10:04
nossa tabela chamada tarefas vírgula depois daqui nós devemos passar tipo o número da nossa conexão que é o nosso
10:10
cono avanço aqui então aqui nós devemos fechar o e a a conexão que depois de nós
10:16
fazermos o uso tá isso vai ser con ponto close abre e fecha
10:22
Deixo aqui embaixo vou retornar retorno o que que eu vou retornar vou retornar o meu DF OK porque pois o DF é que vai
10:29
conter toda essa informação aqui vamos passar o nosso retorno de F ok
10:35
perfeito agora após isto também vamos criar uma outra função que vai nos permitir com que nós possamos adicionar
10:42
tarefas no nosso banco de dados ok aqui é para fazer a conexão com o banco de dados e depois temos mais qu temos essa
10:49
aqui é para que nós possamos carregar todas as informações que estão presentes no banco dados ten alguma informação e a
10:56
próxima função será para que vai nos permettir com que nós possamos adicionar tarefas no nosso banco de dados ok isso
11:02
vai ser o seguinte eu vou comentar aqui dizendo o seguinte: adicionar adicionar
11:08
nova adicionar nova tarefa ih o que que eu escrevi que adicionando tarefa isso
11:14
vai ser def adicionar tarefa adicionar
11:19
undersore o quê tarefa tarefa vai ser abrir e fechar dois pontos blá faço o seguinte ok vai
11:26
ter uma variável chamada tarefa tarefa será igual a ST session OK session seja aqui como nós
11:35
estamos a usar o streamlitad então nós vamos usar bastante o session para que nós possamos
11:40
tipo obter as informações que são inseridas a partir dos campos de input do stream OK por exemplo que se usa
11:47
bastante o session OK é por isso que eu tenho aqui ST eh
11:55
undstate dget dessa forma abre fech vem para cá e bum aqui eu vou passar o
12:02
seguinte entrada tarefa então essa entrada tarefa eu vou usar depois quando eu vou criar
12:08
tipo o campo de entrada do streamlit é por isso que será necessário tipo usar esse tipo passar uma aqui OK tipo uma
12:15
chave que ela permitir eh pegar as a informação depois vou aqui tipo dois
12:21
uma string vazia dessa forma aqui sai daqui e vou para o ponto stripe dessa
12:27
forma aqui stripe and close perfeito então agora vamos fazer o seguinte OK
12:33
então vem esse esse primeiro comando aqui é que nos permite nós pegarmos a informação que será inserida no campo de
12:38
streamlite essa esse campo nós vamos criar depois agora aqui vamos dizer o seguinte: if not tarefa if not tarefa
12:47
caso não tem tarefa ele vai dizer o seguinte ok st
12:55
ST abre fecha ok então esse ponto este ponto error vamos dizer o seguinte humar
13:02
um pouquinho vamos dizer o seguinte o quê deve ser uma string vamos dizer a tarefa a
13:08
tarefa não pode estar vazia tarefa não pode estar
13:14
vazia vazia ok coloca uma exclamação aqui para parecer um pouquinho bonito
13:21
perfeito até também posso tipo copiar um ícone ou emoji del pode ser de quê vocês
13:26
podem colocar qualquer qualquer imó que vocês bem quiser ok então vou vou passar essa aqui que é tipo de aviso ou perigo
13:32
ou não sei do género perfeito depois disso vamos terminar com essa sessão aqui vamos dizer o seguinte retorn
13:39
salvei ok então caso tenha tarefa vamos fazer o seguinte OK con sempre vai ser
13:45
igual a conectar conectar BD ah o N apenas
13:51
conectar BD que a senhora aqui abre e fecha te e vamos fazer agora o seguinte
13:56
como sempre vamos criar o nosso cursor OK cursor ponto
14:03
cursor será igual OK será igual a con cursor ok con p cursor dessa forma
14:12
abrir e fecha ou acho que criar aqui esqueci do igual ok
14:20
perfeito e agora aqui após isto nós vamos ter o seguinte OK vamos agora criar o nosso
14:26
cursor ponto execute abre fecha aqui dentro nós vamos passar tipo o comando
14:32
SK então nós devemos inserir essas tarefas então isso vai ser o seguinte
14:38
insert into into quê into tarefas abre fech aqui dentro vou passar
14:45
os meus campos da tarefa então vou passar na coluna de tarefa viula e também na coluna de status ok abrir
14:52
fecha o que que eu vou inserir vou inserir os valores aqui vamos dizer o seguinte vale ok vales deve ser é plural
15:00
ok vélios então esse velhos vai ser abrir e fechar de novo como não sabemos o valor vamos passar interrogação
15:06
vírgula e interrogação ok e depois saiu aqui depois da vírgula vamos colocar
15:11
aqui uma vírgula e aqui que vamos passar tipo essas informações vamos passar
15:17
primeir aqui vamos passar o quê tipo inicialmente toda qualquer tarefa que nós vamos inserir vamos considerá-la
15:23
como uma tarefa pendente OK não concluir então vai ser o seguinte
15:28
bem pendent ok
15:34
salvamos então após nós inserimos a tarefa devemos fazer sempre o commit que é bastante importante para que a tarefa
15:40
possa ser inserida vai ser o seguinte ok con dcm commit ok ponto commit abre e
15:48
fecha e depois de nós fazermos o commit devemos fechar a conexão vai ser con
15:54
ponto close e open and pum vamos
16:00
salvar ok desce um pouquinho e agora após isto vamos fazer também o seguinte
16:06
OK vamos fazer ST session que é do streamlit OK
16:13
seation state eh vamos abrir porque nós devemos também mudar tipo está ok vamos dizer o
16:19
seguinte OK entrada ou ya
16:24
entrada tarefas por tarefas não tarefa pela entrada tarefa vai ser igual quê a
16:32
string vazia também perfeito então muito bem ok agora antes
16:39
de darmos sequência com a criação das funções eh que nos permite nós fazermos todas as operações vamos agora começar
16:46
tipo com a criação do nosso aplicativo OK então primeira coisa que nós devemos
16:51
criar eu vou criar tipo uma configuração da página essa configuração da página vai ser o seguinte eu vou dizer aqui o seguinte OK configuração
17:00
configur esqueci como é que se escreve ok configuração da página tá aqui a
17:06
configuração da página e vamos começar já com o nosso streamlitad e isto vai
17:11
ser o seguinte OK vamos aqui no ST set o quê set page
17:20
[Música] config config dessa forma aqui abre e
17:25
fech aqui dentro vamos começar todas as configurações que tem a ver com a nossa página primeiramente vamos definir o título da página isso vai ser page do
17:32
title ou não é d bem mais sim page
17:37
title ok vai ser igual a vamos dizer assim app de tarefas app de tarefas Ok salvei
17:48
vamos passar aqui uma vírgula agora para que nós possamos ver tipo essas mudanças vou fazer o seguinte aqui eu vou salvar
17:53
isso aqui vamos rodar o nosso cork então isso vai ser o nosso [Música]
17:58
streamlitadrunmain ok que é o nome do nosso script vamos dar um enter e esperar o
18:03
resultado tá aqui e pum e obtive aqui alguma tarefa algum
18:10
erro e modul stream lit boot este aqui para escrevi mal tá deixa-me só ver aqui
18:17
eh onde que Ah st ponto isso aqui tinha que ser
18:24
set salvei eh vamos volar lá vamos dar um refresh e bum como podemos aqui já temos
18:32
aqui o nosso app tarefas OK então e depois desse passo e app tarefas vamos
18:38
agora tipo passar esse título aqui OK o título do nosso aplicativo por enquanto
18:43
estamos aqui assim estamos dando zero devemos agora passar essa informação aqui isso vai ser o seguinte então eu
18:49
virei aqui para baixo OK abaixo do nosso configuração da nossa configuração e eu
18:55
vou dizer o seguinte OK agora vamos ter o nosso ST.title o do nosso aplicativo OK vai
19:03
ser abre e fechar aqui dentro vai ser vamos chamar de gerenciador e
19:11
gerencia gerenciador de tarefas
19:16
gerenciador de tarefas que salvei eh vamos aqui vamos dar um refresh aqui nesse app bum já temos aqui nosso
19:23
gerenciador de tarefas OK e se nós vemos o aplicativo original ele tem esse ícone aqui OK eu posso copiar simplesmente
19:30
isso aqui como se fosse um emoji esse ícon venho aqui e vou colar aqui ok salvei vamos voltar lá e dei um refresh
19:39
bum já temos aqui o nosso gerenciador de tarefas mas se nós vermos também tipo por exemplo esse aqui ele tipo ocupou
19:46
todo o espaço da tela OK começou aqui mas esse aqui ele está passando toda a informação aqui no meio OK então isso
19:52
aqui também nós devemos ver essa para que ele possa tipo ocupar todo o espaço da tela mas antes disso vamos
19:58
primeiramente tipo eh passar criar o nosso campo de entrada aqui esse campo aqui e também aqui o nosso botão ok
20:05
então isto vai ser o seguinte eu virei aqui depois do nosso título eu vou ter o seguinte o para o nosso campo de entrada
20:13
então para o nosso campo de entrada isso vai ser o seguinte: st pon text aham escrevi mal ok text input
20:23
input abro e fecho e aqui dentro vamos passar tipo o seguinte por exemplo tipo como se
20:30
fosse para tipo informar o que usar o que o usuário deve fazer ok vamos dizer o seguinte
20:36
adicionar adicione uma nova tarefa uma nova tarefa
20:43
ok adiciona uma nova tarefa eh vamos colocar aqui tipo uns dois pontos avança
20:49
viola e aqui nós devemos passar tipo aqui ok essa aqui é que vai nos permitir tipo identificar aqui aqui na nossa
20:55
função de adicionar tarefa que quando nós temos tipo quando nós façamos aqui é session state get pon get entrada de
21:02
tarefas ok para que ele possa indicar qual campo de entrada que tá se tratar então é aqui nós vamos passar tipo a
21:07
nossa ke então aqui eu vou passar tipo a minha op a minha essa
21:14
aqui ele será igual a o quê a
21:19
entrada tarefa Ok para que possa identificar o campo de entrada que estou a me referindo perfeito vamos lá ver
21:26
salvei e agora vamos o que nos falta é o nosso botão ok então vamos ter o nosso ST buton dessa forma aqui buton abrir e
21:34
fechar bom vamos fazer o seguinte o quê eh adicionar
21:41
adicionar ok vírgula e agora aqui no adicionar nós vamos ter
21:47
também tipo on click tipo quando nós clicarmos OK on click ele deve nos retornar uma ação OK
21:55
vamos dizer on click o que é que vamos dizer vamos passar a nossa função adicionar tarefas dessa forma aqui OK
22:01
salvar agora vamos voltar aqui vamos dar um refresh no nosso aplicativo boom como
22:07
nós temos aqui já temos o nosso campo de entrada e o nosso botão adicionar só clicar ele dis seguir tás a ver tarefa
22:13
não pode ser vazia que é aquela essa informação que nós temos aqui que nós havíamos passado aqui onde é que está
22:18
mesmo tem ah esse senhor aqui OK caso o tipo esteja vazio ele vai nos dizer o
22:23
seguinte aqui a tarefa não pode ser vazia foi o que nós obtivemos aqui tarefa ok agora como eu disse OK então
22:31
isso aqui deve deve ocupar toda a tela como do jeito que temos aqui para tal vamos fazer o seguinte OK eu tenho que
22:37
ver aqui nas definições de definições de quem mesmo até da página aqui no set
22:43
page vamos descer um pouquinho então aqui eu vou passar o meu layout layout
22:48
dessa forma aqui e o layout será igual eu vou escolher o wide OK wide para que ele possa tipo se
22:55
expandir vírgula salvei e se nós voltamos para aqui de um
23:01
refresh e bom como podemos ver agora já tá a ocupar todo o espaço ok perfeito
23:08
então agora vamos começar tipo com uma das partes mais importante que é primeiramente carregar as tarefas ok
23:15
vamos criar uma uma lista aqui debaixo vamos fazer o seguinte OK eh vou comentar aqui
23:23
carregar tarefas tarefas ok então eu vou criar uma lista de tarefa ok
23:30
lista tarefas será igual vou chamar minha função de carrega tarefas abrir e fechar
23:36
dessa forma aqui perfeito ok então depois daqui eu vou criar um meu
23:42
contêiner principal que vai ter todo o resto da informação OK vai onde vai
23:47
conter toda essa todo esse resto aqui toda essa informação então para tal vai ser o seguinte depois da lista de tarefa
23:53
eu vou vir aqui vou comentar o seguinte o quê container
23:59
container principal conêiner principal agora no meu contêiner principal eu vou ter o
24:04
seguinte OK wif ft container abrir e fechar dois
24:12
pontos nós vamos ter o seguinte OK eh eu vou criar duas colunas OK vou criar tipo
24:18
uma coluna à esquerda e outra coluna à direita como do jeito que nós temos aqui nessa divisão que temos aqui nesse nosso
24:24
aplicativo se nós verificamos eu tenho essa informação aqui à esquerda onde tem tipo onde tem todas as tarefas e aqui à
24:30
direita onde nós temos o nosso gráfico é isso que eu vou fazer então eu vou criar duas colunas então vai isso vai ser o
24:35
seguinte OK call é esquerda OK é esquerda vírgula e
24:41
também vou ter o meu call direita aqui vou abrir padir apenas
24:46
depois vamos aqui ST ok desculpa coloms dessa forma aqui
24:53
abrir e fechar quantas colunas que eu desejo duas colunas ok que vai ser essa e essa agora vamos trabalhar primeiramente
25:00
com a coluna esquerda OK com a nossa coluna esquerda nós vamos nós vamos nós teremos o seguinte eu vou chamar o meu if call à esquerda que é senhor aqui
25:08
dois pontos vamos ter o seguinte OK if not OK
25:15
if if not lista OK if not lista lista tarefas ponempty ok estou a
25:22
dizer caso a minha lista de tarefa esteja tipo vazia o que que ele vai fazer vai fazer o seguinte ok for index
25:31
for index coma row em lista tarefa aqui em lista tarefas
25:38
dessa forma aqui ponto ok inter row dessa forma aqui
25:44
abrir e fechar avançar dois pontos temos o seguinte ok eu vou criar três colunas
25:49
vou criar três colunas porque veja aqui no nosso aplicativo nas tarefas nós temos o nome da tarefa que é a senhora
25:55
aqui temos o estado e depois temos aqui esse botão que nos permite com que nós possamos deletar uma certa tarefa e a
26:01
mesma coisa que vou fazer aqui é por isso que eu vou ter três colunas então vou ter meu C1 V C2 V e por fim o C3 que
26:10
serão igual a ST novo OK pcums dessa forma aqui eh vou
26:18
abrir e fechar então isso vai ser para dentro uma lista OK e nessa lista de
26:23
colunas eu tipo vou dar tipo a dimensão de para cada coluna OK para o número de tarefa cinco para o qual mesmo T
26:31
deixa-me ver aqui o outro ok para o status e darei 2 vul e para onde vai ter
26:39
o botão darei apenas tipo um espaço de um apenas será suficiente ok depois agora vamos trabalhar primeiramente com
26:45
a primeira coluna com1 dois pontos nós vamos ter o seguinte aqui vamos usar o mark down OK
26:52
então isso vai ser o seguinte st markd markdown eu vou abrir e fechar
27:01
aqui dentro vou usar o F string que faz 1 2 3 ok de novo 1 2 3 perfeito o meu F
27:09
string e teremos o seguinte ok então eu vou recuar isto aqui até aqui na mesma direção com ST para evitar erros
27:16
normalmente ele costuma dar erro ok agora nós vamos ter o seguinte aqui eu vou ter uma div vou criar uma div abre e
27:22
fecha deixa já abrir também e fechar de novo ok então aqui vai ser div aqui
27:28
nessa div devemos fechar vai ser também de novo div ok e aqui nessa
27:34
divinte agora aqui dentro dessa minha div eh eu vou ter o seguinte aqui ele
27:43
vai ser apenas o row OK avançar um pouquinho ele
27:48
vai ser vamos abrir e fechar eu vou passar o meu row é então esse row aqui ele vai ser
27:54
row tarefas ok faço o seguinte rotfa dessa forma
28:01
salvei e agora assim que eu salvei OK eh
28:07
se eu vier aqui e de um refresh como podem ver obtivo um dis seguinte que es
28:13
light operation to syntax então parece que eu tenho aqui tipo uma um erro que na lista tarefas carregar não depois ele
28:21
avança o que que ele disse inline 22 ok carregar tarefas con igual
28:29
conectar_bidd eh line das in connectar bd
28:35
cursoreseecute na linha número 10 ok deixa-me ver onde é que está esse erro
28:42
na linha 55 ok essa aqui que fez com que chamasse a linha 10 linha 10 linha 10
28:48
linha 10 linha 10 a cursor p exec
28:55
Abri abriu okate table if not taref if not ex tarefas o
29:04
que é que ele diz id integer primary key blá blá blá blá blá
29:10
ok hum já parece que obtivo aqui algum error deixa-me só ver aqui nesse cintas
29:17
error narir to parece que eu tenho aqui tipo um erro de Deixa-me só verificar onde é que está
29:23
bem ah deixa syntax error essa parte aqui que
29:28
dá dor de cabeça carga tarefas então esse erro
29:34
aqui deve ser porque aqui na última linha eu coloquei essa vírgula eh acho que não tem que colocar a vírgula porque
29:40
no esquelet o último não se coloca deixa remover essa vírgula aqui salvei eh
29:46
vamos aqui de novo se eu dei um refresh aham agora acho que que aumentou
29:54
é pandas error execution fail ah agora já ok o erro já mudou muito bem perfeito
29:59
então quer dizer que lá era um dos problemas agora estamos aqui na no pandas perfeito e n to select tarefas
30:07
ok e então o que é que eu vou fazer agora o erro já tá aqui que tá dizer e
30:12
vamos lá ver p eu aqui escrevi mais o comando como nós podemos ver aqui tem que ser select salvei voltamos aqui de
30:21
novo deu um refresh ah já tá já tá a funcionar perfeito agora vamos fazer o seguinte para que nós possamos testar
30:29
eh esta com que nós possamos ver tipo as tarefas vamos fazer o seguinte OK eu vou passar aqui uma tarefa aqui como sempre
30:35
uma das coisas que me vem sempre na cabeça é isso aqui assistir One Piece assistir One Piece ok assistir One Piece
30:42
se eu cliquei em adicionar bum como nós primamos taref aqui é One Piece perfeito
30:47
ok agora como nós sabemos nós estamos a usar o MarkD como quando se usa Markd nós devemos sempre fazer o seguinte OK
30:54
devemos tipo eh ativar o HTML então isso vai ser o seguinte eu virei aqui o nosso
31:00
código eh até aqui no nosso markedão agora aqui por trás coloca uma vía dá
31:06
espaço e vamos dizer o seguinte OK eh
31:11
uns dessa forma aqui._allow
31:17
HTML igual a true ok estamos a dizer que nós devemos tipo ativar o HTML tipo para
31:24
que ele possa permitir o HTML agora se eu vier aqui e dar um refresh como nós
31:29
podemos ver aqui já temos o One Piece que é a nossa primeira tarefa mas se nós repararmos com o aplicativo original nós
31:35
podemos ver que tipo aqui tá estilizado OK e também tem esse ponto aqui em quase todas as tarefa então para vou fazer o
31:40
seguinte eu vou copiar esse esse ícone aqui OK virei aqui e aqui por detrás do
31:46
row vou colar o meu esse esse mesmo ícone que dá um pouquinho de espaço talvez se eu vier aqui eh rodar um pouco
31:54
bum já temos aqui ela ok agora vamos utilizar aquela div OK para que nós possamos utilizar essa div eu vou fazer o seguinte dar um pouco de espaço e vou
32:00
ter o meu style OK o style vai ser igual a
32:06
primeira coisa vamos começar com pading OK isso vai ser pading pading será igual a paiding dois
32:15
pontos vai ser a um rem vou usar o
32:21
remonte vírgula margem margem dois pontos é margem de
32:28
também um rem ok e zero ponto e
32:33
vírgula depois vamos ter o nosso background background o meu background
32:40
vai ser a faço o seguinte cardinal F8 OK
32:47
fa FC Ponte vírgula e vou passar também
32:52
um border radius border radios radios 2 8 3X ok ponto e vírgula
33:03
vou descer aqui é para que possamos ver tipo também vou ter o meu
33:08
border and left dois pontos vamos ter o nosso qu px
33:15
X ok eh vai ser solid faço o
33:22
seguinte cardinal 3B
33:29
82 FS6 ponto vírgula depois vamos ter o nosso box faço isso
33:36
shadow é box shadow dois pontos vai ser 2 PX é do é de novo 2 PX
33:46
6 PX e vamos ter o nosso RG BA abrir e
33:54
fechar abrir e fechar aqui vamos ter 0,0 V
34:05
0,0.05 ok então esse aqui aqui você pode definir tipo pode utilizar como tu bem quiseres OK então aqui eu estou a
34:11
estilizar para que possa tipo a mesmaização com o que nós temos no nosso app original então salvei e agora se eu
34:17
vier aqui e de um refresh e bum como nós podemos ver aqui já tá estilizado ok
34:23
agora vamos avançar aqui na parte dos statos e agora para os states nós vamos
34:28
ter o seguinte OK então depois desse senhor aqui vamos
34:33
descer um pouquinho recua e vamos ter o seguinte ok vamos ter tipo opc chamada
34:39
opções de stato ok opções _ status essa essa opções state será
34:46
igual vamos abrir uma lista e nessa lista nós vamos ter tipo dois valores vamos ter tipo o primeiro é o pendente
34:53
vírgula OK ou avança aqui vírula e o segundo vamos ter concluída ok
35:01
[Música] concluída ok perfeito e agora vamos ter
35:08
também tipo o nosso status atual OK status atual OK então esse state atual
35:16
ele vai ser igual a row que a informação já aqui tá dividida do nosso banco de dados ok row faço o seguinte e vamos
35:23
fazer o nosso status status o row status ok vem para
35:29
aqui e descemos salvei agora eh vamos criar agora a
35:36
nossa caixa de seleção select box para o nosso state isso faz o seguinte
35:41
novo status vai ser abrir isso vai ser CD ou
35:47
C2 que é tipo para a coluna do que nós criamos ok nessa essa coluna aqui o C2
35:55
vai ser igual a ponto select [Música]
36:00
select select o quê select box ele vai ser abrir e fechar da isso
36:08
um pouquinho então a única coisa que nós vamos dizer aqui é o seguinte nós devemos dizer tipo status tipo o nome da
36:15
coisa ok vígula e depois vamos ter vamos também a nossa opções de statos tipo opções que vai nos permitir para que nós
36:21
precisamos tipo trocar de estado e depois vamos ter o seguinte OK index que vai ser igual a opções de estatitos
36:30
ponto index ok e vou abrir e fechar o que que eu vou passar vou passar aqui o
36:35
meu estados atual ok estado atual de
36:41
novo vrgula agora aqui nós devemos passar tipo o nosso Q q vai ser igual Q vai ser igual a vou usar o F string OK
36:49
isso vai ser a status OK
36:54
status Vamos abrir e fechar vou passar o row OK abrir e fechar aqui vamos passar
37:02
o nosso ID OK para que ele possa pegar tipo e vamos salvar ok
37:09
salvei e agora vou descer aqui para baixo vou sair fora desse novos datos e
37:14
vou dizer o seguinte ok veja if vamos dizer o seguinte é if
37:22
novo novo status ok se caso ele for diferente de status atual OK status caso
37:31
ele for diferente de status atual dois pontos o que que ele vai dizer vai fazer vai fazer o seguinte OK
37:37
atualizar [Música] atualizar atualizar status statos vai
37:45
ser abrir e fechar aqui vamos ter o seguinte aqui vou passar o meu row ok vamos passar o nosso ID ok vamos
37:54
chegar o ID que estamos aqui para atualizar uma viola aqui vamos passar o nosso novo status e agora veja esse
38:03
atualizar status é uma função que nós também devemos criar que vai nos permitir com que nós possamos tipo atualizar statos das nossas tarefas OK e
38:10
para tal nós vamos fazer o seguinte OK nós devemos criar essa essa função atualizar status então eu virei aqui
38:16
para cima onde temos as nossas funções bem aqui por por cima da configuração da página dá um pouquinho de espaço vamos
38:23
criar aqui essa função atualizar status OK eh eu vou dizer o seguinte vamos
38:28
comentar atua o atualizar
38:35
status das tarefas perfeito então aqui no set das tarefas
38:41
vamos ter o seguinte eu vou ter o meu def def atualizar
38:49
def atualizar
38:55
undstitos isso vai se abrir e fechar dois pontos então aqui devemos tipo a tarefa a o ID da tarefa e vem também
39:01
como o estado atual então eu vou passar aqui mesmo tarefa é
39:07
tarefa ID passar também os meus
39:13
teos ok bom agora vou ter o meu
39:18
con igual a conectar a
39:27
conectar_bidd eh cometi um erro aqui deve ser apenas um e conectar conectar B
39:32
abrir e fechar vamos descer então vamos criar de novo o nosso
39:38
cursor cursor esse cursor vai ser agora a
39:45
cono cursor ok abre e fecha vamos descer um pouquinho e agora
39:53
vamos criar o nosso cursor para que nós possamos executar os códigos ok cursor pon execute o que é que ele vai
40:01
executar vamos agora executar aqui os comandos SQL faço o seguinte update op update que vamos atualizar o
40:09
quê vamos atualizar tarefas tarefas set status ok set status abrir não
40:19
sabemos vamos passar uma um ponto de interrogação where ID
40:26
será igual o quê então sabemos vamos passar uma um ponto de interrogação ok sai daqui vírgula e aqui vamos passar
40:32
uma list e um tuplo OK que vai ser de vai conter tipo os teitos vírgula e
40:38
depois também a tarefa tarefa ID ok
40:44
tarefa ID esse tarefa ID é que está aqui esqueci-te tarefa ok tarefa ID e essa
40:52
tarefa ID aqui esse que nós temos aqui eh taref escrevi
40:58
tarefa é sempre assim que eu começo o L ok eh só tenho que remover esse e colocar aqui tá ok tarefa esse tarefa ID
41:05
é o que nós temos aqui atualizar statos atualizar state atualizar state
41:10
deixa só copiar ele perfeito e
41:17
tarefa ID o que é que se passa então ah já corrigiu
41:24
perfeito e agora depois disso como sempre nós devemos fazer tipo o fechar a conexão então vamos fazer
41:31
essa conexão aqui vou copiar isso aqui quase da mesma cor e vamos fazer o commit depois fechar e depois vamos
41:38
fazer o seguinte OK estate st p r reun ok para que ele possa tipo rodar de novo
41:45
o app você abrir e fechar e salvei então esse atualizar statos vou copiar essa
41:52
função é o que nós temos aqui essa função que nós temos aqui atualizar statos então OK após isto eu vou salvar
41:59
e viremos aqui no nosso aplicativo esse é original se eu vier aqui vamos dar um refresh para ver se tem algum erro ok
42:05
não tem nenhum erro já temos aqui o nossos statos e tá aqui tá escrito pendente OK então vamos tentar trocar
42:11
para concluída concluído não aconteceu nada então quer dizer que tá tudo funcionando ok pendente ya então isso
42:18
quer dizer que está funcionando agora o próximo passo será nós adicionarmos esse botão aqui botão que nós deletamos as
42:24
tarefas então para tal vai fazer o seguinte OK vamos descer para aqui e agora vamos de novo um if ok if C3 OK
42:34
ponto eh button ponto buton vamos abrir e fechar
42:41
aqui a gente vai passar o seguinte OK vamos passar tipo aquele ícone de deletar tarefa ok então eu vir aqui e
42:46
vou copiar esse ícone que tá aqui como ele copiar agora que estou mal ok e não
42:52
tem como eu posso copiar esse ícone aqui porque ele tá dentro de um botão se eu clicar ele vai deletar eh como copiar
42:58
aquele ícone então vocês podem copiar podem copiar tipo qualquer ícone que
43:03
identifica tipo deletar ok então eu como tenho aqui vou colocar no meu computador e vou colar aqui ok vocês podem colocar
43:09
na internet qualquer ícone que representa a deletar eu como tenho aqui eu vou colar aqui tá aqui ele vírgula e
43:16
depois vamos ter tipo o nosso key para que ele possa identificar a tarefa exata para deletar vamos usar o nosso f string
43:23
ok faço o seguinte vamos ter o nosso delete OK
43:29
underscore eh faço o seguinte aqui vamos passar o nosso row
43:35
OK vamos abrir e fechar o que que vamos passar vamos passar o nosso ID dessa forma e vem para cá vamos ter
43:43
dois pontos e bom ele vai fazer o seguinte OK vamos passar nossa eh função
43:48
deletar deletar tarefa abre e fecha aqui vamos passar o
43:54
nosso row OK row abre vamos enviar aqui o nosso
44:01
ID row ID salvei agora essa função tarefa também nós ainda não temos de
44:06
letra tarefa tá mesma coisa viremos aqui para cima debaixo da função atualiza a tarefa já vamos comentar aqui deletar
44:15
tarefa de então aqui vamos fazer o seguinte aqui isso vai ser DF deletar tarefa
44:22
deletar tarefa abre e feix tá esse deletar tarefa ok ele também vai receber
44:30
tipo o ID OK vamos passar aqui nosso ID OK vem para cá dois pontos e vai descer
44:37
então devemos repetir praticamente isto que nós temos aqui eu vou apenas copiar tudo isto aqui copiei venho para cá e
44:45
vou colar ok é parecido então devemos criar conexão o cursor e depois aqui vamos passar tipo o comando já que nós
44:51
desejamos ok então eu virei para aqui até aqui e vamos fazer o seguinte eu vou
44:57
passar o meu delete from tarefas ok
45:05
where ID ou ID e é igual a ponto de
45:10
interrogação então virei aqui aqui que nós vamos passar apenas será o ID ok o
45:16
tarefa IDs que é essa senhora que tem aqui ok o ID então vou passar tarefa IDs
45:22
eh vou copiar isso aqui e vou passar aqui por cima remove essa ID vou passar tarefa a IDs para que possam ter mesmo
45:28
nome depois disso devemos fechar o commit conect close e rerun ok salvei e
45:36
vem para cá já temos aqui o nosso deletar tarefa ok perfeito agora após
45:42
isto se eu salvar é vem para cá se eu rodar isso aqui e bum já temos
45:49
aqui o nosso ícon deletar tá vamos tentar deletar aqui o One Piece cliquei em deletar ou ou obtive algum erro
45:55
perfeito o que é que ele disse tenho aqui aqui nessa parte delete from
46:00
tarefas where id onde é que está acho que aqui tenho
46:06
que passar tipo uma vírgula aqui porque ele deve ser tipo como se fosse uma lista se não me engano ele deve deve passar como se fosse uma lista e delitar
46:13
tarefas tá aqui ele passo aqui uma vírgula salvei e se eu vier aqui vamos fazer um
46:22
refresh ok clica nesse bum ok que tarefa foi vamos voltar de novo uma tarefa ok e
46:27
fazer compras fazer compras ah clica em adicionar bom
46:34
adicionar ok agora nós devemos apresentar o nosso gráfico OK para que
46:39
tipo dessa forma aqui para que ele possa apresentar os resultados então isso vai ser o seguinte eu virei
46:46
aqui de novo aqui dentro OK dá um pouquinho de espaço e agora o próximo
46:52
passo vai ser o seguinte OK vamos sair desse de estar nessa mesma linha aqui com esse wif então isso quer dizer que
46:58
até aqui na segunda linha perfeito vamos descer um pouquinho recar aqui na seg
47:04
vamos dizer o seguinte agora wif ok é wif call direita a não vamos
47:11
trabalhar o seguinte ok agora vamos passar tipo o nosso gráfico já aqui no gráfico ele vai ser o seguinte vai ser
47:18
if not lista ok if not lista tarefas ok
47:24
ponto emptis pontos bom vai ser o seguinte OK vai ser
47:31
dados progresso dados progresso vai ser igual a lista OK lista
47:40
tarefas abrir aqui vamos passar o nosso status
47:45
troquei tudo que status vamos mostar nosso statos avança um pouquinho ponto
47:52
valos ok velhos abre e fecha dessa forma aqui ponto reset ok reset
48:03
reset e_index ok abre e fez
48:10
salvei vamos sair daqui e também vamos criar o nosso dados progresso ponto o quê
48:18
poncums coloms dessa forma ok abre e fecho aqui vamos ser abrir fazer
48:25
assim aqui dentro vamos passar tipo os teitos OK vamos passar os teitos teitos avança aqui vírgula vamos
48:34
passar também a quantidade quantidade qu escrevi bem mal
48:43
quantidade dessa forma avança avança e salva ok agora
48:50
também vamos tipo passar umas cores personalizadas OK para tipo para tarefas
48:56
pendentes e também para as tarefas concluídas OK algum essas cores personalizadas essa aqui eh são parte do
49:04
gráfico OK então parte do gráfico normalmente eu não gosto muito de escrever os códigos eh eu apenas vou copiar e colar aqui OK para que vocês
49:11
possam ver então as cores personalizadas serão isso aqui praticamente dessa forma aqui então bom será isso aqui OK então
49:19
aqui nessa parte aqui isso aqui como é parte do gráfico então tudo que tem a ver com o gráfico todo o corpo do
49:24
gráfico eu vou deixar na descrição desse mesmo vídeo para que vocês possam apenas ir lá copiar e colar porque é muita
49:29
coisa que tem para se inscrever e para evitar erros possíveis erros OK é por
49:35
isso que eu apenas vou copiar todo o corpo do gráfico e colar ok vocês apenas vão fazer a mesma coisa então como eu
49:43
disse corte do gráfico OK eu vou copiar tudo e vou colar aqui vou deixar essas
49:49
cores na descrição do vídeo que pois pois gráfico normalmente é algo que seja reutiliza OK é algo que eu não gosto de escrever os códigos então eu vou copiar
49:56
tudo isso aqui vou deixar lá pois é muita coisa que tem para escrever de gráfico então agora vou salvar isto e
50:03
vamos verificar o que nós já temos ok venho aqui essa é a nossa tarefa
50:11
refresh parece que obtive aqui algum erro ok então vamos deletar isso vamos aqui ok o que aqui eh wifi colom
50:22
ou esse aqui deve recuar recua
50:27
aqui salvei e vamos verificar e
50:33
bum terminamos ok então ah mas só que não
50:38
estou a ver o meu gráfico onde é que está o meu gráfico ah ainda tá a rodar vamos esperar ok muito bem então temos aqui o nosso gráfico como nós podemos
50:44
ver já tá aparece aqui o nosso gráfico OK se eu trocar isso aqui para concluída pum também trocou foi para vermelho ok
50:51
vamos tentar adicionar mais uma nova tarefa fazer compras o que mais que a fazer
50:57
bol e se adicionamos bum como nós peg aqui já foi adicionada e assim nós terminamos
51:05
o nosso aplicativo ok então pois é pessoal para quem gostou do aplicativo do projeto OK dá um like no vídeo se
51:12
inscreva no canal e também você pode personalizar mais esse mesmo aplicativo que é tipo aumentar mais complexidade e
51:18
também melhorar tipo sei lá a beleza do que eu já acredito que não tá assim tão
51:23
bonito ok vocês podem melhorar tipo estilizar mais ele e também como eu
51:29
disse ok para quem gostaria de apoiar o canal tem algumas descrição no vídeo vai lá apoiar o canal e muito obrigado beijo
51:35
no próximo vídeo quer fui
#Computers & Electronics