Tutorial - V7.1-Projeto e Implementação
Tutorial - V7.1-Projeto e Implementação
Tutorial - V7.1-Projeto e Implementação
Revisão e Supervisão:
Curitiba - 2019
1
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Sumário
1. Visão Geral da Disciplina de CSBA .................................................................................................... 4
2. Projetando o Aplicativo ................................................................................................................... 6
2.1. Visão Geral do Aplicativo ........................................................................................................................ 6
2.2. Especificando os Requisitos Funcionais e Não Funcionais.................................................................. 7
2.3. Especificando a Arquitetura de Software ......................................................................................... 10
2.4. Especificando os Algoritmos dos Componentes de Software .......................................................... 10
2.5. Especificando a Interação Humano Computador ............................................................................. 12
3. Implementando o Aplicativo .......................................................................................................... 14
3.1. Criando uma pasta para a implementação do Aplicativo ................................................................. 14
3.2. Passo 1 da implementação do aplicativo .......................................................................................... 14
3.3. Analisando o código .......................................................................................................................... 15
3.4. Passo 2 da implementação do aplicativo .......................................................................................... 16
3.5. Analisando o código .......................................................................................................................... 17
3.6. Passo 3 da implementação do aplicativo .......................................................................................... 19
3.7. Analisando o código do arquivo main.py .......................................................................................... 20
3.8. Analisando o código do arquivo lancador.kv .................................................................................... 21
3.9. Passo 4 da implementação do aplicativo .......................................................................................... 22
3.10. Analisando o código do arquivo main.py .......................................................................................... 23
3.11. Analisando o código do arquivo lancador.kv .................................................................................... 24
3.12. Passo 5 da implementação do aplicativo – Formalismo no código .................................................. 25
3.13. Analisando o código do arquivo main.py quanto ao formalismo ..................................................... 26
3.14. Analisando o código do arquivo lancador.kv – seguindo formalismo .............................................. 29
3.15. Passo 6 da implementação do aplicativo - Conclusão ...................................................................... 31
APÊNDICE A – Referente ao Projeto ...................................................................................................... 40
Desenhando Diagramas com o Draw.io ....................................................................................................... 40
APÊNDICE B – Referente à Implementação ........................................................................................... 47
Instalando o Ambiente de Desenvolvimento Kivy ....................................................................................... 47
APÊNDICE C – Referente aos Layouts do Kivy ........................................................................................ 50
O que é um Layout ....................................................................................................................................... 50
Layouts disponíveis no Kivy .......................................................................................................................... 50
APÊNDICE D – Referente ao Canvas – desenhando formas 2D básicas em Kivy ...................................... 56
O que é Canvas ............................................................................................................................................. 56
2
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
3
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
orienta
RA1 RA2
PROJETO IMPLEMENTAÇÃO
revisa
A Figura 2 detalha as três principais etapas envolvidas no desenvolvimento de aplicativos em CSBA: análise
de publicação técnico-científica, projeto e implementação, fazendo uma relação com os indicadores de de-
sempenho da disciplina.
Situação Problema
Nesse tutorial, criaremos um aplicativo que simula o lançamento de uma bola de basquete até a cesta. Para
ver seu funcionamento na íntegra, acesse o link: https://youtu.be/Hb-P18bErIg
O lançamento da bola de basquete até a cesta pode ser representado matematicamente como um movi-
mento oblíquo, onde a bola se desloca para a frente até uma altura máxima e depois começa a descer,
formando uma trajetória parabólica (Figura 3).
Como pode ser visto na Figura 3, a bola é lançada a um ângulo 𝜃 com uma velocidade inicial 𝑣0 , estando sob
a ação da força da gravidade 𝑔. As componentes horizontal e vertical da trajetória podem ser calculadas em
função do tempo por meio das seguintes equações, respectivamente:
𝑥(𝑡) = 𝑥0 + |𝑣0 |. cos(𝜃) . 𝑡
𝑔𝑡²
𝑦(𝑡) = 𝑦0 + |𝑣0 |. sen(𝜃) . 𝑡 −
2
Fazendo uma simulação com 𝑥0 = 𝑦0 = 0 𝑚, 𝑔 = 9,8 𝑚/𝑠 2 , 𝜃 = 45°, 𝑡 começando em zero e variando em
incrementos de 0,1 s, e variando a velocidade inicial 𝑣0 , temos as seguintes trajetórias:
y (m)
y (m)
Figura 4: Simulação do movimento oblíquo para diferentes valores de velocidade inicial. Quando y=0, entende-se que o objeto
atingiu o solo, portanto, não estão sendo mostrados os valores negativos de y.
5
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
2. Projetando o Aplicativo
Por: Prof. Dr. Luiz Giovanini
Prof.ª MSc. Mª Angela M Roveredo Santos
Essa seção do tutorial abordará a etapa de projeto do aplicativo. Nessa etapa, deve-se produzir um docu-
mento com as especificações do aplicativo, que será utilizado para nortear sua implementação. Este docu-
mento deve conter:
Nesta fase inicial, deve-se pensar na concepção do aplicativo de uma forma mais geral, visando uma análise
alto nível do problema. Isso será feito por meio de um fluxograma (Figura 5), que pode ser desenhado no
computador com o auxílio de ferramenta apropriada (e.g., Draw.io).
6
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
🎯 Obs.: este item refere-se aos dois primeiros indicadores de desempenho da disciplina de CSBA.
Requisitos são as funcionalidades/capacidades que o aplicativo deve possuir para resolver um problema ou
atingir um objetivo. Em outras palavras, eles descrevem aquilo que o aplicativo deve ser capaz de fazer, os
serviços que deve oferecer e as restrições de funcionamento. Um requisito pode ser classificado como fun-
cional ou não funcional.
➢ Requisitos não funcionais: também conhecidos como requisitos de qualidade, referem-se a padrões
de qualidade que o aplicativo deve oferecer, tais como desempenho, confiabilidade, segurança, ro-
bustez, portabilidade, usabilidade, entre outros. Alguns exemplos gerais são:
o “Somente usuários autorizados deverão ter acesso aos dados cadastrais dos clientes”.
o “O tempo de resposta não deverá ultrapassar cinco segundos”.
o “Os arquivos gerados não podem ultrapassar 10 MB”.
o “O aplicativo deverá rodar em qualquer plataforma”.
Para a situação problema deste tutorial (lançamento da bola de basquete), tem-se os seguintes requisitos:
➢ Requisitos funcionais:
o RF01: permitir que o usuário insira os dados de entrada (ângulo de lançamento e velocidade
de lançamento da bola).
o RF02: validar os dados de entrada fornecidos pelo usuário.
o RF03: calcular e reproduzir graficamente a trajetória da bola.
o RF04: verificar se a bola acertou a cesta, emitindo mensagem de sucesso em caso positivo, ou
mensagem de insucesso em caso negativo.
o RF05: ao final de cada lançamento, permitir que o usuário possa escolher entre fazer um novo
lançamento ou encerrar o aplicativo.
O diagrama de casos de uso é uma maneira gráfica de se representar o funcionamento do aplicativo, onde
descreve-se suas principais funcionalidades e a interação das mesmas com o usuário (Figura 6). Esse dia-
grama pode ser construído no computador com o auxílio de ferramenta apropriada (e.g., Draw.io).
7
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
➢ Cada elipse representa um caso de uso, que está vinculado a um ou mais requisitos do aplicativo.
➢ O jogador se relaciona apenas com os casos “Fornecer entradas”, Lançar bola” e “Encerrar”, nos quais
ele atua diretamente. Os outros casos não envolvem a participação do jogador, ou seja, são realiza-
dos inteiramente pelo sistema.
➢ O caso “Lançar bola” inclui o caso “Verificar bola na cesta”. Ou seja, quando o primeiro for realizado,
o segundo sempre será realizado também. Isso porque o objetivo do aplicativo é que, ao lançar a
bola, verifique-se se ela atingiu ou não a cesta.
➢ O caso “Verificar bola na cesta” estende os casos “Mostrar sucesso” e “Mostrar insucesso”. Ou seja,
quando o primeiro for executado, dependendo do resultado, os outros dois podem ou não ser exe-
cutados. Por exemplo, “Mostrar sucesso” só deve ser executado se o usuário acertar a cesta, e “Mos-
trar insucesso” se o usuário errar a cesta.
Cada um dos casos de uso da Figura 6 devem ainda ser detalhados, conforme apresentado abaixo:
Identificação: UC01
Nome: Fornecer entradas
Requisitos envolvidos: RF01, RF02
Sequência típica de eventos:
Usuário: Sistema:
• Informa o ângulo 𝜃 de lançamento da bola. • Verifica se o ângulo 𝜃 informado é maior que 0° e
• Informa a velocidade inicial 𝑣0 de lança- menor que 90°. Enquanto essa condição não for sa-
mento da bola. tisfeita, apresenta erro de leitura desta entrada.
• Verifica se a velocidade 𝑣0 informada é maior do
que zero. Enquanto essa condição não for satis-
feita, apresenta erro na leitura desta entrada.
Identificação: UC02
Nome: Lançar bola
Requisitos envolvidos: RF03
Sequência típica de eventos:
8
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Usuário: Sistema:
• Informa que deseja realizar o lançamento da • Calcula e mostra graficamente a trajetória da bola
bola (ex.: pressiona botão de “lançar"). por meio das equações:
𝑥(𝑡) = 𝑥0 + |𝑣0 |. cos(𝜃) . 𝑡
𝑔𝑡²
𝑦(𝑡) = 𝑦0 + |𝑣0 |. sen(𝜃) . 𝑡 −
2
• Define 𝑥0 e 𝑦0 em função de características gráfi-
cas da tela do aplicativo.
• Fixa 𝑔 = 9,8 𝑚/𝑠².
• Usa 𝑣0 e 𝜃 lidos do usuário e validados.
• Varia 𝑡 em incrementos de 0,1 s, até que a bola a-
tinja o solo (𝑦 = 0) ou até que acerte a cesta.
Identificação: UC03
Nome: Encerrar
Requisitos envolvidos: RF05
Sequência típica de eventos:
Usuário: Sistema:
• Informa que deseja sair do aplicativo. • Encerra o aplicativo.
Identificação: UC04
Nome: Verificar bola na cesta
Requisitos envolvidos: RF04
Sequência típica de eventos:
Usuário: Sistema:
• Nenhum. • Verifica se, em algum momento da trajetória, as
coordenadas (x,y) da bola coincidem com as co-
ordenadas (x±r,y±r) da cesta, considerando uma
margem de tolerância r. Em caso afirmativo, e-
xecuta o caso “mostrar sucesso”. Em caso nega-
tivo, executa o caso “mostrar insucesso”.
Identificação: UC05
Nome: Mostrar sucesso
Requisitos envolvidos: RF04
Sequência típica de eventos:
Usuário: Sistema:
• Nenhum. • Apresenta na tela mensagem de sucesso: “ACERTOU!”.
Identificação: UC06
Nome: Mostrar insucesso
Requisitos envolvidos: RF04
Sequência típica de eventos:
Usuário: Sistema:
• Nenhum. • Apresenta na tela mensagem de insucesso: “ERROU”.
9
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
O Diagrama de Classes (DC) é uma representação estática utilizada para descrever a estrutura de um sis-
tema, apresentando suas classes, atributos, métodos e as relações entre os objetos. Sua função é a de sepa-
rar os elementos de interface da codificação do sistema e é utilizada para documentar a arquitetura dos
softwares (Figura 7). Esse diagrama pode ser construído no computador com o auxílio de ferramenta apro-
priada (e.g., Draw.io).
Nessa etapa, deve-se especificar os algoritmos envolvidos nos métodos das classes, representando-os por
meio de diagramas de estado (Figura 8) e fluxogramas (Figura 9). Esses diagramas podem ser construídos no
computador com o auxílio de ferramenta apropriada (e.g., Draw.io).
DIAGRAMA DE ESTADO
Um Diagrama de Estado (DE) mostra os possíveis estados de um objeto e as transições responsáveis pelas
suas mudanças de estado. O estado de um objeto depende da atividade na qual ele está sendo processado.
Na Figura 9, o objeto bola passa do estado “Pronta para lançamento” para o estado “Em movimento” devido
a transição “lançamento”. O objeto bola atinge a posição de repouso conforme transição executada. Se a
transição for “cesta atingida”, a posição de repouso da bola será “na cesta” ou se a transição for “cesta não
atingida”, a posição de repouso da bola será “no chão”.
10
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
FLUXOGRAMAS
Os fluxogramas apresentados na Figura 9 especificam os algoritmos envolvidos nos métodos das classes
(vide Figura 7, seção 2.3). Assim:
➢ No item (a) da Figura 9, o fluxograma referente ao método lancarBola() da classe Jogador descreve
a entrada válida de valores para a velocidade inicial e o ângulo de lançamento (ambos fornecidos
pelo usuário), a chamada do método mover() da classe Bola e, com base no resultado dessa chamada,
a impressão da mensagem para o usuário.
➢ No item (b) da Figura 9, o fluxograma referente ao método mover() da classe Bola descreve o cálculo
das coordenadas x, y do movimento da bola em função do tempo e dos parâmetros informados (ve-
locidade e ângulo). A cada variação de 0,1 s no tempo, os valores de x e y são atualizados e testados
tanto em relação à posição da cesta como em relação ao chão, até obter o destino final da bola.
(a) Método lancarBola() da classe Jogador. (b) Método mover() da classe Bola.
Figura 9: Fluxogramas dos algoritmos dos métodos (a) Jogador.lancarBola() e (b) Bola.mover()
11
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
A Interação Humano Computador (IHC) trata da comunicação entre o usuário e o aplicativo, incluindo tudo
o que pode acontecer durante a sua utilização. Nessa etapa, deve-se especificar todas as telas do aplicativo,
com suas respectivas componentes visuais e sonoras (Figura 10). Os esboços iniciais geralmente são feitos
no papel, mas uma versão final pode ser desenhada no computador com o auxílio de ferramenta apropriada
(e.g., Draw.io).
Componentes visuais:
Componentes sonoras:
Figura 10: Esboço da tela do aplicativo para o problema do tutorial, com a indicação das componentes visuais utilizadas.
12
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
⚠️ Atenção: é importante que a IHC do aplicativo seja bem planejada, de forma que a experiência do usuário
seja agradável. Em outras palavras, além a funcionalidade do aplicativo, deve-se prezar também pela sua
facilidade de uso. Para isso, atente-se a questões como: quantidade de elementos na tela, facilidade de vi-
sualização das informações (cores, tamanhos de fonte, etc.), facilidade de compreensão das informações
apresentadas, facilidade de interação com o aplicativo, etc.
Para compreender a importância dessa questão, observe a figura abaixo e reflita: qual desses aplicativos de
navegação GPS você se sentiria mais confortável em utilizar?
13
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
3. Implementando o Aplicativo
Por: Prof. MSc. Arnaldo C. M. Junior
Prof. Dr. Gregory M.P. Wanderley
Prof.ª MSc. Mª Angela M Roveredo Santos
🎯 Obs.: kvlang (ou linguagem Kivy) é uma linguagem especializada e semelhante a linguagem Python para a
construção de interfaces gráficas. O objetivo é facilitar a adição e remoção de Widgets (componentes visuais)
ao mesmo tempo que separa o código utilizado para construção gráfica (View) do código Python, ou a lógica de
negócios. O arquivo lancador.kv (criado, neste tutorial, a partir do Passo 3 do Aplicativo) está escrito em
kvlang.
Arquivo main.py
class LancadorApp(App):
def build(self):
self.title = 'Lancador de Bolas de Basquete'
return BoxLayout()
meuApp = LancadorApp()
meuApp.run()
14
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Executando o programa main.py, uma janela vazia é obtida com o título ‘Lancador de Bolas de Basquete’,
conforme a IHC correspondente (Figura 10):
Importa os métodos relacionados a App (classe principal). Estes métodos (ou funções) criam uma instância
do programa. Todo programa Kivy deve importar um módulo App.
Importa um dos tipos de layout disponível para diagramar o quadro (layout da Aplicação)
class LancadorApp(App):
É a classe da aplicação. Esta classe herda a funcionalidade da classe principal App do Kivy.
def build(self):
O método build, herdado da classe App, define quais componentes estarão no quadro (layout da Aplica-
ção), ou seja, os objetos gráficos (widgets) que compõe a aplicação.
self.title = 'Lancador de Bolas de Basquete'
meuApp.run()
15
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
A aplicação é iniciada pela chamada do método run(), ou seja, abre o quadro (layout da aplicação)
Arquivo main.py
class LancadorApp(App):
def build(self):
self.title = 'Lancador de Bolas de Basquete'
lay = BoxLayout(orientation='vertical')
lay.add_widget(Label(text='Velocidade:'))
lay.add_widget(TextInput())
lay.add_widget(Label(text='Ângulo:'))
lay.add_widget(TextInput())
button = Button(text='Lancar!')
button.on_release = self.LancarClick
lay.add_widget(button)
return lay
def LancarClick(button):
print("Lançando!!")
meuApp = LancadorApp()
meuApp.run()
Executando o programa main.py, é obtida uma janela com o título ‘Lancador de Bolas de Basquete’ e con-
tendo dois rótulos, duas caixas de texto e um botão, conforme a IHC correspondente (Figura 11):
16
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Importa os métodos relacionados à classe App e um dos tipos de layout disponível no Kivy
from kivy.uix.label import Label
class LancadorApp(App):
É a classe da aplicação. Esta classe herda a funcionalidade da classe principal App do Kivy.
def build(self):
O método build, herdado da classe App, define quais componentes estarão no quadro, ou seja, os objetos
gráficos (widgets) que compõe a aplicação
Cria um quadro (layout da Aplicação), ou seja, cria uma instância (lay) da classe BoxLayout. Nesse quadro
serão inseridos os widgets dispostos na vertical, ou seja, um widget embaixo do outro. Tais widgets serão
definidos na sequência
lay.add_widget(Label(text='Velocidade:'))
Acrescenta à instância lay um widget de rótulo que herda as funcionalidades da classe Label. Uma das
funcionalidades herdadas é a propriedade text que está recebendo um conteúdo (‘Velocidade:’)
lay.add_widget(TextInput())
Acrescenta à instância lay um widget de caixa de texto que herda as funcionalidades da classe TextInput.
Esse widget serve para receber a digitação do usuário
lay.add_widget(Label(text='Ângulo:'))
17
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Acrescenta à instância lay um widget de rótulo que herda as funcionalidades da classe Label. Uma das
funcionalidades herdadas é a propriedade text que está recebendo um conteúdo (‘Ângulo:’)
lay.add_widget(TextInput())
Acrescenta à instância lay um widget de caixa de texto que herda as funcionalidades da classe TextInput.
Esse widget serve para receber a digitação do usuário
button = Button(text='Lancar!')
Cria um botão, ou seja, cria uma instância (button) que herda as funcionalidades da classe Button. Uma
das funcionalidades herdadas é a propriedade text que está recebendo um conteúdo (‘Lancar!’)
button.on_release = self.LancarClick
on_release é um dos eventos herdados da classe Button pelo widget button. Quando esse evento ocorrer,
será iniciado o método LancarClick. Esse evento ocorre somente quando o usuário libera o referido botão
lay.add_widget(button)
Acrescenta à instância lay um widget de botão (instância chamada button) que herda as funcionalidades
da classe Button. Esse widget herda eventos capazes de executar ações programadas dentro da aplicação
return lay
Retorna um quadro (layout da Aplicação) que é a instância (lay) herdada da classe BoxLayout e contendo
os cinco widgets já definidos
def LancarClick(button):
Definição do método LancarClick que é disparado somente pelo evento on_release do botao (button)
print("Lançando!!")
Impressão da mensagem “Lançando!!” no Shell do Python. Essa ação é realizada somente quando ocorrer
a execução do método LancarClick
meuApp = LancadorApp()
Cria uma instância (meu App) que herda as funcionalidades da classe LancadorApp
meuApp.run()
A aplicação é iniciada pela chamada do método run(), ou seja, abre o quadro (layout da aplicação)
18
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
🎯 Obs.: a execução do programa main.py do passo 3 repete, quase que na íntegra, o resultado obtido pelo
mesmo programa main.py do passo 2. As diferenças deste programa do passo 3 em relação à sua descrição no
passo 2 são:
1. no passo 3, quando ocorre a execução do método LancarClick, a ação realizada é a cópia do conteúdo
digitado pelo usuário da caixa de texto referente à velocidade para a caixa de texto referente ao
angulo, perdendo-se o conteúdo inicial referente ao angulo e digitado pelo usuário antes da execução
do método.
2. no passo 3, o programa main.py não importa as classes Label, TextInput e Button do Kivy, pois não
irá criar os widgets correspondentes a elas. Existe um arquivo escrito na linguagem Kivy (com exten-
são .kv) que conterá a descrição da árvore de widgets da aplicação, possibilitando a separação da
lógica da nossa aplicação (que mantem-se no programa em Python) e a interface do usuário (que
estará descrita no programa em Kivy).
Por convenção: o Kivy procura por um arquivo com o mesmo nome da sua classe principal (aquela
que estende de App) e sem o sufixo “App”. Neste aplicativo a classe principal chama-se LancadorApp,
assim o arquivo buscado será lancador.kv.
19
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Executando o programa main.py (que busca o arquivo lancador.kv) é obtida uma janela com o título ‘Lan-
cador de Bolas de Basquete’ e contendo dois rótulos, duas caixas de texto e um botão, conforme a IHC
correspondente (Figura 12):
cópia do conteúdo de
uma caixa de texto para
outra
Importa os métodos relacionados à classe App e um dos tipos de layout disponível no Kivy
class Quadro(BoxLayout):
Definição do método LancarClick que é disparado somente pelo evento on_release do botão (Button)
agora declarado no arquivo lancador.kv
self.ids.txAng.text = self.ids.txVel.text
Cópia do conteúdo do TextInput com id de txVel para o TextInput com id txAng. Os dois TextInput estão
declarados no arquivo lancador.kv
class LancadorApp(App):
É a classe da aplicação. Esta classe herda a funcionalidade da classe principal App do Kivy
def build(self):
O método build, herdado da classe App, define quais componentes estarão no quadro, ou seja, os obje-
tos gráficos (widgets) que compõe a aplicação.
A definição dos componentes que compõe a aplicação consta do arquivo lancador.kv
self.title = 'Lancador de Bolas de Basquete'
return Quadro()
Cria uma instancia (meuApp) da aplicação e que herda as funcionalidades da classe LancadorApp
meuApp.run()
A aplicação é iniciada pela chamada do método run(), ou seja, abre o quadro (layout da aplicação)
<Quadro>
orientation:'vertical'
Na tela, os widgets que comporão o quadro (layout da aplicação) estarão dispostos na vertical, ou seja,
um widget em baixo do outro. A representação gráfica desses widgets será criada na sequência
Label:
text:'Velocidade:'
Widget que é um rótulo cuja propriedade text, herdada da classe Label, recebe um conteúdo (‘Veloci-
dade:’)
TextInput:
id:txVel
Widget que é uma caixa de texto cuja propriedade id, herdada da classe TextInput, recebe um conteúdo
(txVel). Através do id é possível acessar esse widget que consta do arquivo .kv no programa em Python
(.py)
Label:
text:'Angulo:'
Widget que é um rótulo cuja propriedade text, herdada da classe Label, recebe um conteúdo (‘Angulo:’)
TextInput:
id:txAng
21
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Widget que é uma caixa de texto cuja propriedade id, herdada da classe TextInput, recebe um conteúdo
(txAng). Através do id é possível acessar esse widget que consta do arquivo .kv no programa em Python
(.py)
Button:
text:'Lancar!'
on_release:root.LancarClick()
Widget que é um botão e que herda funcionalidades da classe Button. A propriedade text herdada re-
cebe um conteúdo (‘Lancar!’). O evento herdado on_release executa as ações programadas no método
LancarClick, que está definido na classe Quadro do programa em Python (.py)
🎯 Obs-1.: o programa main.py do passo 4 diferencia-se do anterior principalmente pela presença do laço de
repetição while. Esse laço de repetição é utilizado para calcular a distância percorrida pela bola a cada segundo,
obtendo-se também o tempo total utilizado na obtenção da distância percorrida.
🎯 Obs-3.: os trechos dos códigos abaixo escritos em cor verde referem-se às novas linhas de comando
inseridas nos arquivos do passo 4. As demais linhas de comando são idênticas às descritas nos respectivos
arquivos do passo 3.
x = x0 = 0 Label:
y = y0 = 0 text:'Angulo:'
TextInput:
v0 = float(self.ids.txVel.text) id:txAng
theta = float(self.ids.txAng.text) * pi/180
Button:
dt = 0.1 text:'Lancar!'
t = 0 on_release:root.LancarClick()
22
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
y = y0 + v0*sin(theta)* t - 9.81*t*t/2
Label:
self.ids.txDist.text="Dist = %.2f cm"%x text:'Tempo Total'
self.ids.txTempo.text="Tempo = %.2f s"%t Label:
id:txTempo
class LancadorApp(App):
def build(self):
self.title = 'Lancador de Bolas de Basquete'
return Quadro()
meuApp = LancadorApp()
meuApp.run()
Executando o programa main.py (que busca o arquivo lancador.kv) é obtida uma janela com o título ‘Lan-
cador de Bolas de Basquete’ e contendo seis rótulos, duas caixas de texto e um botão, conforme a IHC cor-
respondente (Figura 13):
Importa tudo da biblioteca math devido as funções matemáticas que serão utilizadas neste programa
x = x0 = 0
y = y0 = 0
Inicializa com zero as variáveis ‘x’, ‘x0’, ‘y’ e ‘y0’ e que indicarão a posição da bola
v0 = float(self.ids.txVel.text)
23
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Leitura do valor digitado pelo usuário numa caixa de texto txVel (originalmente em string). Antes de atri-
buir o valor lido para ‘v0’ que representa a velocidade inicial da bola, a função float() converte o valor lido
em um valor numérico com ponto flutuante
Leitura do valor digitado pelo usuário numa caixa de texto txAng (originalmente em string). Antes de atri-
buir o valor lido para ‘theta’ que representa o ângulo de lançamento da bola, a função float() converte o
valor lido em um valor numérico com ponto flutuante. Este valor convertido é multiplicado por Π / 180
para obter o valor do ângulo ‘theta’ em radianos
dt = 0.1
Inicializa com 0.1 a variável ‘dt’ que representa o valor incremental do tempo
t = 0
Laço de repetição while que serve para repetir a execução dos comandos pertencentes ao laço. A repeti-
ção finaliza quando o valor de ‘y’ for negativo
t = t + dt
Implementação das equações matemáticas descritas em ‘Situação Problema’ do item 1 – Visão Geral deste
tutorial
self.ids.txDist.text="Dist = %.2f cm"%x
Mostra na tela o rótulo txDist cujo conteúdo é o valor armazenado em ‘x’, com duas casas decimais. O
valor de ‘x’ representa a distância percorrida pela bola
self.ids.txTempo.text="Tempo = %.2f s"%t
Mostra na tela o rótulo txTempo cujo conteúdo é o valor armazenado em ‘t’, com duas casas decimais. O
valor de ‘t’ representa o tempo total
Label:
24
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
text:'Distancia Percorrida'
Widget que é um rótulo cuja propriedade text, herdada da classe Label, recebe um conteúdo (‘Distancia
Percorrida’)
Label:
id:txDist
Widget que é um rótulo cuja propriedade id, herdada da classe Label, recebe um conteúdo (txDist). Atra-
vés do id é possível acessar esse widget que consta do arquivo .kv no programa em Python (.py)
Label:
text:'Tempo Total'
Widget que é um rótulo cuja propriedade text, herdada da classe Label, recebe um conteúdo (‘Tempo
Total’)
Label:
id:txTempo
Widget que é um rótulo cuja propriedade id, herdada da classe Label, recebe um conteúdo (txTempo).
Através do id é possível acessar esse widget que consta do arquivo .kv no programa em Python (.py)
Mais do que codificar um programa em uma determinada linguagem de programação, há que se ter em
mente todo o referencial que a etapa de projeto fornece através da arquitetura do software e dos algorit-
mos dos componentes do software.
🎯 Até o passo 4 da implementação do aplicativo, foi contemplada apenas a descrição da situação problema
(item 1, página 4), e as fórmulas a serem utilizadas para sua resolução.
Citando o diagrama de classes (Figura 7 – item 2.3) que descreve a arquitetura do aplicativo a ser desenvol-
vido, tem-se:
25
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
➢ a classe Bola, além dos atributos privados: diametro, x0, y0, x e y, possui também o método mover()
que tem como parâmetros os valores da velocidade inicial e do ângulo, ambos informados pelo usu-
ário
➢ a classe Cesta possui os atributos privados: diametro, x e y
class Quadro(BoxLayout):
def LancarClick(self):
x = x0 = 0
y = y0 = 0
v0 = float(self.ids.txVel.text)
theta = float(self.ids.txAng.text) * pi/180
dt = 0.1
t = 0
while y >= 0:
t = t + dt
x = x0 + v0*cos(theta)*t
y = y0 + v0*sin(theta)* t - 9.81*t*t/2
class LancadorApp(App):
def build(self):
self.title = 'Lancador de Bolas de Basquete'
return Quadro()
meuApp = LancadorApp()
meuApp.run()
26
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
class Bola(Widget):
def __init__(self, **kwargs):
super(Bola, self).__init__(**kwargs)
#Definir as variáveis ao criar a classe Bola
self._x = x0
self.x0 = x0
self._y = y0
self.y0 = y0
self.v0 = 0
self.pos = x0,y0
self.theta = 0
class Cesta(Widget):
pass
class Jogador():
def lancarBola(self, bola, velocidade, theta):
bola.mover(velocidade, theta)
class Cenario(BoxLayout):
def __init__(self, **kwargs):
super().__init__(**kwargs)
Window.size = (400, 600)
self.jogador = Jogador()
self.bola.setEstadoInicial(0,0)
27
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
def LancarClick(self):
v0 = float(self.ids.txVel.text)
theta = float(self.ids.txAng.text) * pi/180
self.jogador.lancarBola(self.bola, v0, theta)
class LancadorApp(App):
def build(self):
self.title = 'Lancador de Bolas de Basquete'
return Cenario()
meuApp = LancadorApp()
meuApp.run()
Observe como o código descrito informalmente no Passo 4 torna-se formal e fiel ao projeto quando des-
crito como no Passo 5. Na tabela abaixo são citadas as principais alterações para alcançar o formalismo
desejado:
Código não formal Código formal e fiel ao projeto
A classe Quadro (nome sem significado) contém A classe Quadro é renomeada para classe Cenario
um único método definido nela: LancarClick() (nome significativo) contendo um único método
definido nela: LancarClick().
A classe Quadro possui o método LancarClick() que A classe Cenario possui seu método construtor
contém todos os comandos a serem executados
pela aplicação, cujo objetivo principal é o cálculo
da posição da bola a cada segundo em sua movi-
mentação
A classe Cenario cria o objeto jogador da classe Jo-
gador
A classe Cenario chama o método setEstadoIni-
cial() pertencente à classe Bola
A classe Cenario possui o método LancarClick()
que apenas lê os valores da velocidade inicial e ân-
gulo fornecidos pelo usuário e chama o método
lancarBola() pertencente à classe Jogador
A classe Bola possui seu método construtor
A classe Bola possui o método setEstadoInicial()
A classe Bola possui o método mover() definido
nela, conforme diagrama de classes.
O método mover() possui apenas os comandos ne-
cessários para o cálculo da posição da bola a cada
segundo em sua movimentação
A classe Cesta é modelada
A classe Jogador possui o método lancarBola() de-
finido nela, conforme diagrama de classes
A classe Jogador chama o método mover() perten-
cente à classe Bola
Ambos os códigos possuem a classe da aplicação: LancadorApp
28
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Executando o programa main.py (que busca o arquivo lancador.kv) é obtida uma janela com o título ‘Lan-
cador de Bolas de Basquete’, agora, com um layout mais próximo do esperado para o aplicativo deste tuto-
rial. Nesta fase, o layout apresenta duas caixas de texto, três rótulos e um botão, conforme a IHC correspon-
dente (Figura 14):
Abaixo está a descrição do código do arquivo lancador.kv desenvolvido para que o arquivo main.py do
passo 5 possa ser executado com sucesso, respeitando o formalismo detalhado no tópico 3.13.
<Cenario>:
orientation: 'vertical'
bola: ball_id
canvas.before:
#Fundo azul
Color:
rgb: utils.get_color_from_hex('#eafbfe')
Rectangle:
pos: (self.width-400, self.height-400)
size: (self.width, self.width)
29
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Color:
rgb: utils.get_color_from_hex('#814805')
Line:
width: 4.0
points: self.width-400, self.height-400, self.width, self.height-400
FloatLayout:
Label:
Bola:
id: ball_id
30
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
hint_text: ''
pos_hint: {'x': 0.47, 'y': 0.1}
Button:
size_hint: (None, None)
height: 40
width: 120
pos_hint: {'center_x': 0.18, 'center_y': 0.50}
text: 'Lanca'
on_press: root.LancarClick()
<Bola>:
FloatLayout:
#Classe da bola
class Bola(Widget):
31
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
#Properties em kivy são uma forma de ASSOCIAR um evento a uma alteração de um atributo.
#Através deste evento podemos atualizar automaticamente todos os elementos que se
#referem a este atributo.
#O evento é processado por um método que possui o nome on_nomeDaPropriedade
#No nosso caso, o método possuirá o nome on_estado
#Construtor
def __init__(self, **kwargs):
super(Bola, self).__init__(**kwargs)
self.cesta = cesta
self.raio = self.width / 2
self._x = x0
self.x0 = x0
self._y = y0
self.y0 = y0
self.v0 = 0
self.pos = x0,y0
self.theta = 0
self.cesta = cesta
32
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
self.raio = self.width / 2
#Properties em kivy são uma forma de ASSOCIAR um evento a uma alteração de um atributo.
#O evento da StringProperty, cujo nome é estado será processado por um método que possui
#o nome on_nomeDaPropriedade. No nosso caso, como demos o nome estado à propriedade:
def on_estado(self, instancia, valor):
#move a bola
def mover(self, velocidade, theta):
#tempo inicial
self.t = 0
#Funcao callback do Clock para atualizar a posicao da bola (ver explicação detalhada na sequência)
def moverIncremental(self, dt):
#incrementa o tempo
self.t = self.t + dt
#Classe da cesta
class Cesta(Widget):
tolerancia = 20
33
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
offsetX = 50
offsetY = 100
#1. Quando a bola estiver abaixo da posição inicial (_y < y0)
if bola._y < bola.y0:
#Classe do jogador
class Jogador():
def lancarBola(self, bola, velocidade, theta):
#Construtor
def __init__(self, **kwargs):
super().__init__(**kwargs)
#Tamanho da janela
Window.size = (400, 600)
#Configura os sons
self.som_erro = SoundLoader.load('./som_erro.wav')
self.som_aplauso = SoundLoader.load('./som_aplauso.wav')
#cria um jogador
self.jogador = Jogador()
#inicializa o jogo
self.inicializar()
34
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
return False
return False
v0 = float(self.ids.txVel.text)
theta = float(self.ids.txAng.text) * pi/180
#Classe da aplicacao
class LancadorApp(App):
# o método build, herdado da classe App, define quais componentes estarão no Cenario
def build(self):
self.title = 'Lancador de Bolas de Basquete'
return Cenario()
35
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Um dos requisitos básicos de uma boa interface com o usuário, seja ela em Kivy, Tkinter ou qualquer outra
opção, é que a mesma seja responsiva. Ou seja, mesmo que exista alguma atividade pesada em termos
computacionais operando concorrentemente com a interface, o usuário não deve perceber travamentos
ou demora demasiada para receber a resposta de uma intervenção sua com a interface. Uma forma de se
atingir este objetivo é desenvolver as atividades de interface e cálculo em threads diferentes, com o cálculo
sendo executado em background.
Por que utilizar threads? Muitas vezes, durante a implementação de programas, nos deparamos com situa-
ções nas quais o programa perde muito a sua eficiência. Uma destas situações mais comum é quando uma
determinada rotina gasta muito tempo para terminar, passando ao usuário a impressão de que tudo está
parado, e que o programa “congelou”. Isto ocorre, por exemplo, em casos de rotinas de entrada e saída,
onde os tempos de acesso a periféricos externos podem ser muito grandes, ou em casos nos quais o pro-
grama fica em um loop muito longo. Seria ótimo se pudéssemos criar o código através do uso de rotinas
independentes sendo executadas em paralelo. Assim, uma interface nunca ficaria bloqueada, o acesso a um
periférico não pararia com o restante das tarefas, etc. Estes códigos independentes são denominados thre-
ads. Threads são uma das formas que temos de conseguir uma execução simultânea de várias tarefas utili-
zando apenas um processador.
Quando dizemos “execução simultânea”, estamos na realidade dizendo que num dado intervalo de tempo,
garantimos que todas as tarefas (threads) serão executadas. Uma por vez, mas em um tempo especificado,
todas terão sido executadas”. Se uma tarefa está demorando muito, o sistema pára a sua execução e passa
o comando para a próxima tarefa na fila. Quando esta última tarefa tiver terminado ou “estourado” o seu
tempo, o comando passa para a próxima e assim sucessivamente.
Com o uso de threads, podemos em alguns casos aumentar em muito a velocidade de execução do programa
como um todo, além de manter a interface com o usuário responsiva.
O Clock é um objeto do Kivy que permite “agendar” uma chamada de função no futuro, uma vez ou
repetidamente em intervalos especificados. É possível obter o tempo decorrido entre o agendamento e a
chamada de função por meio do argumento dt. Assim:
# dt significa delta-tempo
def my_callback(dt):
pass
# chama a função my_callback para ser executada tão logo seja possível
Clock.schedule_once(my_callback)
<Cenario>:
orientation: 'vertical'
canvas.before:
#Fundo azul
Color:
rgb: utils.get_color_from_hex('#eafbfe')
Rectangle:
pos: (self.width-400, self.height-400)
size: (self.width, self.width)
37
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
rgb: utils.get_color_from_hex('#814805')
Line:
width: 4.0
points: self.width-400, self.height-400, self.width, self.height-400
38
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
#Botao "reinicio"
Button:
size_hint: (None, None)
height: 40
width: 120
pos_hint: {'center_x': 0.50, 'center_y': 0.50}
text: 'Inicializa'
on_press: root.inicializar()
#Botao "sair"
Button:
size_hint: (None, None)
height: 40
width: 120
pos_hint: {'center_x': 0.82, 'center_y': 0.50}
text: 'Sair'
on_press: root.Sair()
39
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
A ferramenta draw.io é um software para a criação de diagramas de diversos tipos, que opera em
plataforma on-line e, pode ser acessado através do endereço https://www.draw.io/ . Logo ao acessar o en-
dereço supracitado, a ferramenta pergunta (inicialmente em idioma inglês) se deseja-se criar um novo dia-
grama ou abrir um existente. Nessa mesma tela inicial, é possível ativar o idioma português clicando em
“Language”, conforme demonstra a figura abaixo e escolhendo o idioma português do Brasil.
Após atualizar a página para que o novo idioma entre em vigor, pode-se clicar em “criar um novo
diagrama” para continuar. Dessa forma a ferramenta irá abrir a caixa de seleção para que escolher o tipo de
diagrama que se deseja trabalhar. Basicamente, no curso de Concepção de Soluções Baseadas em Aplicativos
(CSBA), serão necessários quatro tipos diferentes de diagramas, que serão ilustrados na sequência.
40
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Com isso, a aplicação online criará um diagrama exemplo na tela principal. Pode-se utilizar sua estru-
tura como exemplo, com comandos de copia e cola (control + c e control + v) ou, apagar o diagrama exemplo
e arrastar os componentes da barra de ferramentas ao lado esquerdo da tela para compor o próprio dia-
grama. Como exemplo, observe a figura apresentada a seguir.
41
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Após a criação do diagrama em branco, deve-se observar a barra de ferramentas do lado esquerdo
da tela, nela existem diversos conjuntos de itens de diagramação que ficam fechados; podem ser estendidos
clicando-se sobre eles. Por exemplo, localizada a opção UML, ao clicar sobre ela, são apresentados seus
elementos de diagramação, conforme figura abaixo:
42
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Então, basta arrastar os componentes desejados para a área de diagramação. Para conectar os ele-
mentos no diagrama, basta posicionar o mouse sobre um dos elementos (qualquer tipo de diagrama), que é
habilitado o modo de conexão no elemento, onde basta clicar na seta desejada e arrastá-la até o outro ele-
mento para conectar.
43
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Para a criação de “diagramas de classe”, que denota a organização das classes que compõe um apli-
cativo em software, usa-se o diagrama de mesmo nome que está no conjunto de diagramas da UML.
Dessa forma, arrasta-se o elemento “classe” para o diagrama tal qual demonstrado nos diagramas
de caso de uso mostrado anteriormente. O elemento da classe é ilustrado pela figura a seguir:
Durante a disciplina de CSBA, serão abordados os conceitos de classes em software. Neles, será pos-
sível observar que as classes são compostas principalmente por dois elementos distintos, os atributos (field)
e os métodos (method). Quando se traz uma classe para o diagrama, ela vem somente com um atributo e
um método em sua estrutura. Caso sejam necessários mais itens, é necessário dar um duplo clique dentro
da classe para que ela entre em modo de edição, então, colocar os atributos e métodos necessários um a
um, conforme demonstra a figura a seguir. Caso seja necessário, o tamanho da classe pode ser redimensio-
nado para que o texto fique dentro do componente, posicionando o mouse sobre os pontos azul nas bordas.
44
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Por final, também serão utilizados sketchs para criar protótipos de telas de aplicativos e outras apli-
cações. Esses diagramas também podem ser desenhados utilizando essa ferramenta. Rolando a barra de
ferramentas do lado esquerdo da tela até o final, há um botão chamado “+ Mais Formas”. Clicando nele
podem ser habilitadas diversas barras de ferramentas ao gosto do usuário. Dentre elas, há uma barra espe-
cífica para aplicações Android (também para iOS, dentre outras) que pode ser habilitada, conforme imagem
abaixo:
Com a barra Android habilitada, é possível montar o sketch das aplicações para celular diretamente
dentro de um canvas que representa a tela do telefone, tal como representa a figura abaixo.
45
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Para salvar o diagrama, basta ir no menu arquivo e escolher a opção “salvar como”. Dentre diversas
opções online como google drive e outros, é possível salvar o trabalho diretamente em um dispositivo do
computador, como o disco rígido ou um pendrive, clicando-se na opção “dispositivo”.
46
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
O desenvolvimento em Kivy está sendo realizado em ambiente Windows, com Kivy: v1.10.1 e Python: v3.7.2
– 64 bits.
Primeiramente o Python deverá ter sido instalado na máquina. Para executar esta instalação, acesse o link:
https://www.python.org/downloads/windows/ e escolha a opção: Download Windows x86-64 executable
installer do Python 3.7.2 - 2018-12-24 (Figura B-1).
Após o download do arquivo indicado na Figura B-1, esse mesmo arquivo deverá ser executado. No início da
execução aparecerá uma tela (Figura B-2), aonde deverão ser selecionados dois itens IMPORTANTES:
47
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
( 1 ) Install Now executa a instalação da linguagem Python na pasta indicada por C:\Users\Roveredo\App-
Data\Local\Programs\Python\Python37, aonde somente muda a indicação “Roveredo” para o nome dado à
referida pasta na máquina em que se está instalando a linguagem.
( 2 ) Add Python 3.7 to PATH deverá ser selecionado para que seja possível rodar o python pela linha de
comando (Prompt de Comando) do Windows. Adicionar o python ao path do sistema significa deixá-lo disponível
como variável de ambiente do sistema operacional.
🎯 ATENÇÃO: primeiro selecione a opção ( 2 ) e, por último, a opção ( 1 ) para que seja possível adicionar o python
ao PATH do sistema.
Logo após a instalação da linguagem Python, acesse o Prompt de Comando do Windows e verifique se o
Python está acessível digitando python – version. A partir daí a instalação do Kivy é feita através das seguin-
tes linhas de comando:
2. Dependências do Kivy
48
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
4 Instalação do Kivy:
Agora é possível importar o kivy no programa em Python ou rodar um exemplo básico, caso tenha sido feita
a instalação dos exemplos em Kivy (passo 5 descrito acima). Para rodar um exemplo deve ser digitada a linha
de comando indicada abaixo, no Prompt de Comando do Windows e na pasta do Python (Figura B-3):
python share\kivy-examples\demo\showcase\main.py
49
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
O que é um Layout
Um objeto especial que controla a posição e o tamanho dos demais objetos na tela é chamado de Layout.
O BoxLayout organiza os objetos filho em sequência, na vertical ou horizontal (default). Na sua forma mais
simples, os objetos ocupam toda a área disponível na divisão e a divisão é feita reservando o mesmo espaço
para cada objeto.
Como exemplo, abaixo são criados três botões.
text: 'B2'
Button:
text: 'B3'
Espaçamento entre os botões:
NomeArquivoKVApp().run() Button:
text: 'B1'
size_hint: [.2,1]
Button:
text: 'B2'
size_hint: [.4,1]
Button:
text: 'B3'
size_hint: [.3,1]
- Com a instrução “pos_hint” pode-se posicionar o objeto em qualquer posição dentro da linha da tela alo-
cada a ele.
51
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
O parâmetro em pos_hint estabelece que a posição x do objeto deve corresponder ao valor numérico espe-
cificado. “.5”, por exemplo, significa que o botão será inserido na posição correspondente a 50% do compri-
mento total disponibilizado para o objeto.
NomeArquivoKVApp().run() Button:
text: 'B1'
size_hint: [.2,1]
pos_hint: {'x' : .1}
Button:
text: 'B2'
size_hint: [.4,1]
pos_hint: {'x' : .3}
Button:
text: 'B3'
size_hint: [.3,1]
pos_hint: {'x': .5}
O StackLayout é mais flexível que o BoxLayout, distribuindo os objetos pela área da tela nas seguintes orien-
tações:
Representação Funcionamento
das orientações
lr – tb left (esquerda) righ (direita) top (topo) bottom (fundo) – irá distribuir os objetos da
esquerda para a direita, de cima para baixo
rl – bt direita para esquerda, de baixo para cima
lr – bt esquerda para direita, de baixo para cima
rl – tb direita para esquerda, de cima para baixo
bt – rl de baixo para cima, da direita para esquerda
bt - lr de baixo para cima, da esquerda para direita
tb – rl de cima para baixo, da direita para esquerda
tb – lr de cima para baixo, da esquerda para direita
52
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
A distribuição é realizada pela sequência com que os objetos são inseridos no texto do código fonte em Kivy.
Como exemplo, o StackLayout será usado para criar um teclado binário com suas respectivas operações
binárias correspondentes. Assim:
O GridLayout é muito parecido com o StackLayout na configuração lr – tp (esquerda para direita, de cima
para baixo). A diferença é que podemos estabelecer o número de colunas (cols:) e linhas (rows:). Basta for-
necer um desses parâmetros, que o outro é calculado automaticamente dependendo do número de objetos
na tela. Assim como no caso anterior, um objeto pode ser separado do outro usando instruções spacing e
padding.
53
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Button:
text: 'OR'
size_hint:[.33,.5]
Button:
text: 'XOR'
Button:
text: 'cls'
Com o FloatLayout, um objeto é implementado na tela com tamanho em função do tamanho total da tela,
ou seja, nas dimensões do objeto não são especificadas em pixels absolutos, mas sim em percentual do
tamanho da tela na horizontal e vertical.
O maior benefício é a tela se ajustar às mudanças de dimensões provocadas pelo usuário, assim como à
adaptações a telas de diferentes tamanhos.
Exemplo de como pode ser usado o FLoatLayout:
NomeArquivoKVApp().run() FloatLayout:
Button:
text: 'Ola'
pos_hint: {'x': 0, 'top': 1}
Button:
text: 'Mundo louco!'
pos_hint: {'right': 1, 'y': 0}
• terá associado a ele um texto da cor vermelha através da propriedade color (r, g, b, a) onde ‘r’ varia
de 0 a 1 correspondendo ao tom de vermelho da cor, ‘g’ ao tom verde e ‘b’ ao tom azul. O parâmetro
‘a’ corresponde à transparência do texto, sendo 0 totalmente transparente e 1 totalmente opaco;
• font_size estabelece o tamanho da fonte em pixels
• size_hint fornece as dimensões (em percentual) da largura e altura da tela. O valor “.4” significa que
o objeto estará ocupando 40% da largura da tela. O valor “.3” significa que o objeto estará ocupando
30% da altura da tela.
Na sequência do código, quando se faz uso do objeto do tipo [button] já configurado, acrescenta-se a ele:
• text que contém o texto a ser exibido no próprio botão
54
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
• pos_hint define a posição do objeto na tela (x, y). Para y = 1, significa máxima altura possível (ou topo);
para x = 1, significa máxima largura à direita.
55
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
O que é Canvas
Canvas é um conjunto de instruções que permite representar um objeto visivelmente na tela. ATENÇÃO:
canvas NÃO é um espaço em que são traçados os objetos.
Para desenhar numa tela, são necessários dois tipos de objetos: um objeto é chamado CANVAS e o outro é
chamado INSTRUCTION.
Cada objeto Widget em Kivy, ao ser criado, já nasce com um objeto Canvas, ou seja, quando um widget é
criado, ele já sabe como se desenhar na tela. O que ainda é necessário ser fornecido a ele são os parâmetros
para a realização do desenho.
Aqui serão desenhados linhas, retângulos, triângulos e elipses utilizando o objeto Canvas do Kivy.
Um retângulo é inserido na tela; ele inicia na posição 0, 0 e tem o tamanho de 100 pixels na horizontal e 100
pixels na vertical.
Se forem arrastados os limites horizontais da tela, aumenta e diminuindo a área da janela gráfica, o retângulo
não muda de dimensão. Isso ocorre devido as dimensões do retângulo serem absolutas. Para resolver, serão
estipuladas ao retângulo dimensões relativas as dimensões da tela.
No programa em Kivy acima, substitua a linha:
size: 100,100
pela linha:
size: self.width*0.2, self.height*0.2
56
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Agora as dimensões do retângulo são proporcionais ao tamanho da tela, aonde, nesse caso, corresponde a
20% da largura e da altura da tela. Se houver alteração nas dimensões da janela, as dimensões do retângulo
se alterarão de forma proporcional.
O setor circular que foi construído através do comando Ellipse tem como configuração:
NomeArquivoKVApp().run() Ellipse:
segments: 180
angle_start: 0
angle_end: 270
pos: 200,200
size: 100,100
Ellipse:
segments: 3
57
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
angle_start: 0
angle_end: 360
pos: 350,350
size: 100,100
Quad:
points: 300,100, 300,200, 400,200, 400,100
Line:
points: 500,100, 550,150, 600,100, 650,150
Execução
Destacam-se:
• o ponto (Point) que é caracterizado por duas coordenadas, “x” e “y”. Acima estão descritos quatro pon-
tos, todos com tamanho de 4 pixels cada
• o triângulo (Triangle) apresenta três pares de coordenadas representando seus vértices
• o quadrilátero (Quad) apresenta quatro pares de coordenadas representando seus vértices
• a linha (Line) apresenta quatro pares de coordenadas (pontos) pelos quais a linha deverá passar
58
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Especificação de Tipo de
Para que serve
dimensões dimensão
size_hint_x relativa Especifica dimensão relativa entre os widgets no eixo x
size_hint_y relativa Especifica dimensão relativa entre os widgets no eixo y
size_hint relativa Especifica, simultaneamente, dimensões relativas entre os widgets
nos eixos x e y
width absoluta Especifica um valor absoluto no comprimento (eixo x)
height absoluta Especifica um valor absoluto na altura (eixo y)
size absoluta Especifica, simultaneamente, um valor absoluto para o compri-
mento e um valor absoluto para a altura
ATENÇÃO: se você atribui ao size_hint de um widget o valor “0.5” e a outro o valor “1”, o segundo irá ocupar
uma largura duas vezes maior do que o primeiro. Se todos forem “.3”, todos serão iguais. NÃO é o valor
absoluto atribuído que importa, mas sim a relação entre eles.
Quando se fizer necessário especificar um valor absoluto, as propriedades width e height são usadas, res-
pectivamente para largura e altura, porém, É MUITO IMPORTANTE especificar também as propriedades
size_hint_x ou size_hint_y ou ambas (size_hint), caso necessário, como iguais a None. Sem isso o Kivy NÃO
obedece ao valor absoluto especificado em width e height.
59
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Para finalizar: os widgets de layout muitas vezes têm vontade própria e decidem por conta os seus tamanhos.
Geralmente fazem boas escolhas. Mas, só a experimentação em diversos meios de saída poderá assegurar
que a apresentação dos programas está conforme o planejado.
60
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
O que é TextInput
O arquivo .kv começa a ficar mais sofisticado, porém, o fundamental é observar o aninhamento de conjun-
tos de widgets que se faz necessário para que as propriedades dos widgets (layouts) responsáveis pela dis-
posição dos demais objetos (Labels e TextInputs) na tela possa ser aplicada de forma correta.
61
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
id: txt_endereco
size_hint_x: 1
BoxLayout:
orientation: 'horizontal'
Label:
text: 'Fone:'
size_hint_x: .5
TextInput:
id: txt_fone
size_hint_x: 1
BoxLayout:
orientation: 'vertical' os widgets ou conjuntos de widgets serão organizados na vertical
BoxLayout: os campos para entrada de textos e respectivos labels ficam sob esse Layout
orientation:'vertical' cada conjunto (textInput + label) fica numa única linha e na vertical
cols: 1
spacing: 20
padding: [200,10]
BoxLayout:
orientation: 'horizontal' label e textInput ficam na mesma linha, um ao lado do outro
Label:
text: 'Nome:'
size_hint_x: .5 o label tem a metade do tamanho do seu respectivo textInput
TextInput:
id: txt_nome
size_hint_x: 1
62
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Principais vantagens:
➢ Aumento de produtividade;
➢ Reuso de código;
➢ Redução das linhas de código programadas;
➢ Separação de responsabilidades;
➢ Componentização;
➢ Maior flexibilidade do sistema; e
➢ Facilidade na manutenção.
63
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Ilustrações de Classes:
Classe em Python:
Estrutura:
class nome_da_classe:
atributos
construtor
métodos
64
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Demonstração de Classe:
variável = Classe()
Demonstração de Instância:
65
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
66
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Ilustração:
Demonstração de Encapsulamento:
67
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
Ilustração:
Estrutura:
Demonstração de Herança:
68
Pontifícia Universidade Católica do Paraná (PUCPR)
Concepção de Soluções Baseadas em Aplicativos (CSBA)
69