Figma_e_Kodular_3

Prévia do material em texto

<p>FUNDAMENTOS DE DESIGN DE</p><p>SISTEMAS</p><p>AULA 5</p><p>Prof. Eduardo Alexandre Franciscon</p><p>2</p><p>CONVERSA INICIAL</p><p>Nesta abordagem, vamos trabalhar no nosso primeiro projeto totalmente</p><p>prático, integrando o Figma e o Kodular. Com uma calculadora como projeto,</p><p>vamos entender como o Figma é importante para o mapeamento da ideia, das</p><p>funcionalidades e como auxilia enormemente no conjunto de componentes</p><p>utilizados para o desenvolvimento.</p><p>No Kodular, vamos elaborar a parte de design da calculadora, faltando</p><p>apenas a programação orientada a blocos para a finalização do projeto. Com</p><p>isso, temos a percepção da simetria entre as duas ferramentas para</p><p>desenvolvimento de projetos.</p><p>Além disso, é fundamental destacar a importância da comunicação eficaz</p><p>entre os membros da equipe durante todo o processo de desenvolvimento. A</p><p>colaboração e o compartilhamento de ideias são essenciais para garantir que</p><p>todos estejam alinhados com os objetivos do projeto e compreendam</p><p>completamente as funcionalidades que estão sendo implementadas. O uso do</p><p>Figma facilita esse processo, permitindo que a equipe visualize e comente sobre</p><p>o design em tempo real e garantindo que qualquer ajuste necessário seja</p><p>identificado e discutido coletivamente antes da programação.</p><p>A integração entre o design no Figma e a programação no Kodular</p><p>destaca a necessidade de um planejamento detalhado e uma clara divisão de</p><p>responsabilidades. Isso inclui definir claramente os papéis dentro da equipe,</p><p>como quem é responsável pelo design UI/UX no Figma e quem implementará a</p><p>lógica no Kodular, garantindo que todas as partes do projeto sejam</p><p>desenvolvidas harmoniosamente.</p><p>Por fim, a experiência prática de levar um projeto do conceito ao protótipo</p><p>funcional enfatiza a importância da aprendizagem baseada em projetos. Essa</p><p>abordagem não apenas melhora as habilidades técnicas individuais, mas</p><p>também desenvolve competências essenciais como trabalho em equipe,</p><p>resolução de problemas e comunicação eficaz. Ao concluir esse projeto, você</p><p>não apenas terá criado um aplicativo funcional, mas também terá adquirido uma</p><p>compreensão profunda de como ferramentas complementares e colaboração</p><p>efetiva são fundamentais para o sucesso no desenvolvimento de software.</p><p>3</p><p>TEMA 1 - PROJETO DE DESIGN NO FIGMA</p><p>Para iniciarmos nossos aprendizados práticos em projetos, vamos</p><p>começar por um projeto simples, mas que nos dará uma noção muito boa sobre</p><p>a lógica por trás das produções entre design e programação orientada a blocos.</p><p>Vamos produzir uma calculadora a partir do zero criando um design no</p><p>Figma até a exportação do projeto dentro do Kodular. Para isso, vamos trabalhar</p><p>com o básico entre as duas ferramentas.</p><p>Com isso, a calculadora terá um funcionamento muito simples: ela deve</p><p>ter dois campos para preenchimento de valores e aritméticos, sendo:</p><p>1. O símbolo “+” é chamado de operador de adição. Ele é usado para</p><p>combinar dois números e encontrar sua soma.</p><p>2. O símbolo “-” é chamado de operador de subtração. Ele é usado para</p><p>encontrar a diferença entre dois números, subtraindo um número de outro.</p><p>3. O símbolo “*” é chamado de operador de multiplicação. Ele é usado para</p><p>multiplicar dois números e encontrar seu produto.</p><p>4. O símbolo “/” é chamado de operador de divisão. Ele é usado para dividir</p><p>um número por outro e encontrar o quociente.</p><p>Também teremos uma opção de “limpar” os campos preenchidos, que</p><p>será representado pela letra “C”. E, para finalizar, o campo onde vai aparecer o</p><p>resultado. No Figma, vamos produzir um design simples como o da Figura 1.</p><p>Nesse primeiro exemplo, não trabalharemos com design elaborado nem</p><p>usaremos cores ou imagens de fundo. Apenas demonstraremos como o Figma</p><p>e o Kodular podem ser ferramentas excelentes para a produção de projetos que</p><p>partem de exemplos simples até os mais complexos. Com isso, observe na</p><p>Figura 1 que apenas o design de campos e botões está em evidência.</p><p>4</p><p>Figura 1 - Design da calculadora no Figma</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Figma.</p><p>Iniciar o aprendizado de programação no Kodular e design no Figma com</p><p>um projeto de calculadora oferece uma série de vantagens que tornam essa</p><p>escolha particularmente interessante para novos desenvolvedores. Esse tipo de</p><p>projeto combina a simplicidade necessária para quem está começando com a</p><p>oportunidade de explorar conceitos fundamentais tanto de design quanto de</p><p>programação, tornando-se uma excelente introdução ao desenvolvimento de</p><p>aplicativos.</p><p>Primeiramente, a natureza intuitiva de uma calculadora como projeto</p><p>inicial facilita a compreensão dos conceitos básicos de programação e design.</p><p>Quase todos estão familiarizados com a funcionalidade e a interface de uma</p><p>calculadora, o que reduz a curva de aprendizado e permite que os iniciantes se</p><p>5</p><p>concentrem mais nas técnicas de desenvolvimento e menos na definição de</p><p>requisitos ou na compreensão do problema a ser resolvido.</p><p>Ao trabalhar com o Figma para o design da calculadora, podemos praticar</p><p>a criação de interfaces de usuário (UI) que são ao mesmo tempo funcionais e</p><p>esteticamente agradáveis. O Figma oferece ferramentas poderosas e flexíveis</p><p>que permitem aos iniciantes experimentar diferentes abordagens de design sem</p><p>a necessidade de escrever código, o que é ideal para entender os princípios do</p><p>design UI/UX, como hierarquia visual, alinhamento e contraste.</p><p>Por outro lado, o Kodular, com sua abordagem de programação baseada</p><p>em blocos, desmistifica a codificação para quem pode se sentir intimidado por</p><p>sintaxes complexas. Ao criar uma calculadora, aprendemos a manipular</p><p>variáveis, implementar lógica condicional e responder a entradas do usuário,</p><p>habilidades essenciais para qualquer programador. A simplicidade da interface</p><p>do Kodular encoraja a experimentação e o aprendizado por tentativa e erro,</p><p>abordagens valiosas no processo educativo.</p><p>Além disso, a combinação de Figma e Kodular em um projeto de</p><p>calculadora destaca a importância da colaboração entre design e</p><p>desenvolvimento. Com isso, ganhamos uma apreciação pela necessidade de</p><p>comunicação e coordenação entre as equipes de design e programação, uma</p><p>habilidade vital na indústria de tecnologia. Por meio desse projeto,</p><p>experimentamos em primeira mão como as decisões de design afetam o</p><p>desenvolvimento e vice-versa, preparando-nos para o trabalho colaborativo em</p><p>futuros projetos mais complexos.</p><p>Finalmente, completar um projeto de calculadora oferece uma sensação</p><p>de realização tangível que pode aumentar a confiança dos iniciantes. O sucesso</p><p>na criação de um aplicativo funcional, mesmo um tão simples quanto uma</p><p>calculadora, pode incentivar a se aprofundarem ainda mais no mundo do</p><p>desenvolvimento de software, explorando conceitos mais avançados e projetos</p><p>mais desafiadores.</p><p>TEMA 2 - O DESIGN DA CALCULADORA E OS DETALHES DE</p><p>FUNCIONAMENTO</p><p>O Figma tem uma opção muito útil para a comunicação eficiente entre os</p><p>profissionais do design e do desenvolvimento: os balões de comentários, como</p><p>mostra a Figura 2. O balão de comentário do Figma é uma ferramenta poderosa</p><p>6</p><p>que facilita a colaboração entre membros da equipe durante o processo de</p><p>design. Com esse recurso, os usuários podem adicionar comentários</p><p>diretamente ao projeto, destacando áreas específicas da interface ou fornecendo</p><p>feedback sobre elementos de design.</p><p>2.1 Mecanismo de funcionamento dos comentários</p><p>Esses balões de comentário permitem uma comunicação clara e eficiente</p><p>entre os membros da equipe, mesmo que estejam trabalhando remotamente ou</p><p>em fusos horários diferentes. Isso ajuda a garantir que todas as partes</p><p>interessadas estejam na mesma página e que as sugestões de melhoria sejam</p><p>facilmente identificadas e implementadas.</p><p>Figura 2 - Balão de comentário com as especificações da calculadora</p><p>Fonte: Elaborado por Eduardo</p><p>Franciscon utilizando o software Figma.</p><p>Além disso, o balão de comentário do Figma permite que os usuários</p><p>respondam a comentários, iniciem discussões e até mesmo resolvam problemas</p><p>7</p><p>diretamente no contexto do projeto. Isso promove uma colaboração mais</p><p>dinâmica e interativa, resultando em um processo de design mais eficaz e</p><p>refinado.</p><p>A dinâmica de uso dos balões do Figma permite que apenas um</p><p>comentário por vez seja visualizado com o passar do mouse sobre o balão. Mas</p><p>todos os comentários do projeto ficam expostos em um menu localizado na parte</p><p>direita do ambiente do Figma, conforme se vê na Figura 3.</p><p>Figura 3 - Menu de comentários do projeto</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Figma.</p><p>Todas as vezes que um comentário é clicado nesse menu, ele é mostrado</p><p>completamente no canva do Figma. Com essa ferramenta, os usuários podem</p><p>destacar áreas específicas da interface, responder a comentários e resolver</p><p>questões de design de forma rápida e fácil. Isso promove uma colaboração mais</p><p>fluida e iterativa, resultando em projetos mais refinados e de alta qualidade.</p><p>8</p><p>2.2 As especificações da calculadora</p><p>Com a utilização dos comentários, foram definidas as seguintes regras</p><p>para o funcionamento da calculadora. Partiremos de cada comentário realizado,</p><p>sendo:</p><p>• Comentário 1: o cursor deve estar disponível no campo na abertura do</p><p>app.</p><p>• Comentário 2: após o preenchimento do primeiro campo, o cursor deve</p><p>ficar disponível nesse campo.</p><p>• Comentário 3: os botões de operações aritméticas devem ser capazes de</p><p>alterar o resultado final sem a necessidade de limpar a calculadora.</p><p>• Comentário 4: o botão “C” deve limpar os campos de valores e também o</p><p>campo de resultado.</p><p>• Comentário 5: o campo resultado apenas mostra o resultado das</p><p>operações realizadas.</p><p>Lembrando que, se algum problema ocorrer na fase de codificação da</p><p>calculadora, respostas aos comentários podem ser feitas e reorganizados os</p><p>parâmetros para desenvolvimento.</p><p>TEMA 3 – O DESIGN DE COMPONENTES</p><p>A descrição detalhada dos componentes, como label, button e text box,</p><p>dentro do projeto do Figma é crucial para garantir uma transição suave e eficiente</p><p>do design para a implementação no Kodular. Ao fornecer descrições claras e</p><p>precisas para cada elemento da interface do usuário, os designers podem</p><p>comunicar suas intenções e especificações aos desenvolvedores de forma clara</p><p>e concisa.</p><p>Essas descrições ajudam os desenvolvedores a entenderem o propósito</p><p>de cada elemento e como ele deve ser implementado no aplicativo. Isso reduz a</p><p>possibilidade de mal-entendidos e erros durante o processo de desenvolvimento,</p><p>economizando tempo e esforço.</p><p>Além disso, as descrições dos elementos no Figma também facilitam a</p><p>manutenção do código no Kodular. Os desenvolvedores podem se referir às</p><p>descrições para entender a função e o comportamento esperado de cada</p><p>9</p><p>elemento, o que torna mais fácil fazer ajustes e atualizações no aplicativo</p><p>conforme necessário.</p><p>Figura 4 - Design da calculadora contendo os elementos para desenvolvimento</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Figma.</p><p>A inclusão de descrições detalhadas dos elementos no projeto do Figma</p><p>é fundamental para garantir tanto uma colaboração eficaz entre designers e</p><p>desenvolvedores como a consistência e a precisão na implementação do design</p><p>no Kodular.</p><p>Os elementos label, button e text box são componentes essenciais em</p><p>interfaces de usuário. Suas funções são:</p><p>• Label: é usado para exibir texto estático, como títulos ou descrições.</p><p>• Button: permite aos usuários interagir com o aplicativo, como clicar para</p><p>enviar um formulário.</p><p>10</p><p>• Text box: é usado para coletar entrada de texto do usuário, como um</p><p>campo de entrada para um nome ou senha.</p><p>Cada um desses elementos desempenha um papel importante na criação</p><p>de uma experiência de usuário intuitiva e funcional em aplicativos. É fundamental</p><p>detalhar no Figma os componentes que serão utilizados dentro do Kodular para</p><p>o desenvolvimento de um projeto por uma série de razões cruciais. Ao realizar</p><p>essa prática, os desenvolvedores podem colher uma série de benefícios que</p><p>contribuem significativamente para a eficiência do processo de desenvolvimento</p><p>e a qualidade final do produto.</p><p>Em primeiro lugar, ao detalhar os componentes no Figma, os</p><p>desenvolvedores estão estabelecendo uma base sólida para o projeto no</p><p>Kodular. Isso significa que eles têm uma compreensão clara de todos os</p><p>elementos necessários para a interface do usuário e a funcionalidade do</p><p>aplicativo antes mesmo de começar a programar. Isso ajuda a reduzir a</p><p>necessidade de fazer alterações significativas durante o desenvolvimento,</p><p>economizando tempo e evitando refações desnecessárias.</p><p>Além disso, detalhar os componentes no Figma resulta em um projeto com</p><p>ganho de tempo. Os desenvolvedores podem facilmente referenciar o design</p><p>detalhado no Figma enquanto trabalham no Kodular, o que agiliza o processo de</p><p>implementação. Isso minimiza a necessidade de tomar decisões de design no</p><p>momento e reduz o tempo gasto em experimentação e iteração durante o</p><p>desenvolvimento.</p><p>A integração entre o Figma e o Kodular também ajuda a garantir que os</p><p>prazos apertados sejam cumpridos de maneira mais eficaz. Ao ter uma visão</p><p>clara dos requisitos do projeto desde o início, os desenvolvedores podem</p><p>planejar suas tarefas de maneira mais eficiente e priorizar o trabalho necessário</p><p>para atender aos prazos estabelecidos. Além disso, ao evitar refações e</p><p>retrabalhos, os desenvolvedores podem manter o progresso do projeto em um</p><p>ritmo constante, garantindo que todos os marcos sejam atingidos dentro do</p><p>cronograma previsto.</p><p>Detalhar os componentes no Figma antes de iniciar o desenvolvimento no</p><p>Kodular é uma prática essencial que leva a uma maior eficiência, qualidade e</p><p>cumprimento de prazos no processo de desenvolvimento de aplicativos. Ao</p><p>estabelecer uma base sólida desde o início e facilitar a comunicação entre design</p><p>11</p><p>e desenvolvimento, essa abordagem ajuda a garantir o sucesso do projeto em</p><p>todos os aspectos.</p><p>TEMA 4 – A ARTE DO ÍCONE DO APP NO FIGMA</p><p>Desenvolver o ícone do seu aplicativo no Figma oferece várias vantagens,</p><p>como a facilidade de colaboração em equipe, a capacidade de compartilhar e</p><p>iterar rapidamente o design e a integração perfeita com outros aspectos do</p><p>desenvolvimento do aplicativo. Com o Figma, você pode criar ícones</p><p>profissionais e atraentes que complementam perfeitamente a experiência do</p><p>usuário no seu aplicativo desenvolvido no Kodular.</p><p>4.1 Especificações para criação do ícone</p><p>Ao exportar um aplicativo no Kodular, é importante seguir as</p><p>especificações corretas para as imagens que serão usadas como ícones do</p><p>aplicativo. Abaixo estão as especificações recomendadas para as imagens de</p><p>ícone:</p><p>1. Tamanho da imagem: recomenda-se que a imagem do ícone tenha pelo</p><p>menos 512x512 pixels.</p><p>2. Formato do arquivo: as imagens de ícone devem estar em formato PNG.</p><p>Esse é um formato comumente usado para imagens na web e suporta</p><p>transparência, o que é importante para ícones.</p><p>3. Transparência: certifique-se de que a imagem do ícone tenha um fundo</p><p>transparente. Isso garante que o ícone se integre bem com o tema do</p><p>dispositivo e não tenha uma área de fundo visível ao redor dele.</p><p>4. Qualidade da imagem: mantenha a qualidade da imagem alta para</p><p>garantir que o ícone seja nítido e claro em diferentes dispositivos e</p><p>resoluções de tela.</p><p>Seguir essas especificações ajudará a garantir que o ícone do seu</p><p>aplicativo tenha uma aparência profissional e seja exibido corretamente em</p><p>dispositivos móveis.</p><p>12</p><p>4.2 Criação do ícone</p><p>Seguindo os passos anteriormente descritos, vamos criar um ícone para</p><p>nosso app. Logo, o primeiro passo é criar um frame com diâmetro de 512x512</p><p>pixels. A Figura 5 mostra esse processo.</p><p>Figura 5 - Criação do frame do ícone no Figma</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Figma.</p><p>A arte do ícone pode ser algo individual. Na Figura 6 apresentamos uma</p><p>ideia simples e fácil de fazer. Dentro do frame, foram usados quatro quadrados</p><p>de tamanhos iguais para representar os operadores aritméticos e um círculo</p><p>perfeito no centro que representa a igualdade.</p><p>Figura 6 - Ideia de ícone para o app</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Figma.</p><p>13</p><p>Os quadrados foram coloridos em uma escala de tons de azul e o círculo</p><p>seguindo a mesma escala com um azul mais escuro. Os operadores são textos</p><p>centralizados nos quadrados e círculo com a fonte aumentada até o tamanho</p><p>desejado.</p><p>A exportação da imagem deve ser feita em PNG. A Figura 7 demonstra a</p><p>exportação e a seleção da opção .PNG, bastando salvar em sua máquina no</p><p>local desejado.</p><p>Figura 7 - Exportação da imagem do ícone</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Figma.</p><p>Feito isso, temos nosso ícone pronto para uso mais tarde no momento de</p><p>exportação do nosso app dentro do Kodular.</p><p>TEMA 5 – O DESIGN DA CALCULADORA NO KODULAR</p><p>Uma vez que temos o design definido por meio do Figma, o próximo passo</p><p>é a construção do app no Kodular. Para isso, seguimos o método já estudado,</p><p>começando pela criação do design no visualizador do Kodular. Seguimos com a</p><p>programação dos blocos e por fim os testes.</p><p>Tendo isso em mente, é necessário saber que a programação do design</p><p>do Kodular não será a mesma do Figma, pois temos outros atributos a considerar</p><p>na seleção dos elementos que vão compor o app, como a seleção do elemento</p><p>14</p><p>correto na paleta, a nomeação dos elementos para o seu uso dentro da</p><p>programação dos blocos e o espaçamento entre os elementos.</p><p>Na Figura 8, temos a imagem de como ficou nosso projeto da calculadora</p><p>visualmente após realizada a fase do design dentro do Kodular.</p><p>Figura 8 - Design da calculadora no Kodular</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Kodular.</p><p>Foram seis elementos para a organização da tela do app, a iniciar por um</p><p>grid de organização vertical, usado para organizar os componentes do app de</p><p>forma visual. Dentro desse grid de organização, colocamos um “label” com a</p><p>escrita “CALCULADORA” que não tem funções para serem configuradas, é</p><p>apenas para exibir o título. Logo abaixo um componente de “space”, responsável</p><p>apenas por dar um espaço até o próximo componente, um “text box”, que vai</p><p>receber o primeiro número para a equação. Segue-se com outro “space” e</p><p>novamente um “text box” para o segundo número e outro “space”.</p><p>15</p><p>Para a organização dos botões, temos outro grid de organização, mas</p><p>desta vez de organização horizontal. Dentro dele, os botões de “+”, “- “, “x”, “/” e</p><p>“C”. Após o grid, um “space” e outro “label” o qual não terá configurações, apenas</p><p>exibe a palavra “RESULTADO”. E para encerrar outro “label” que vai receber o</p><p>resultado da equação. Na Figura 9, podemos ver todo o conjunto de</p><p>componentes devidamente organizado no espaço de componentes na tela de</p><p>design da plataforma.</p><p>Figura 9 - Componentes organizados para o app da calculadora</p><p>Fonte: Elaborado por Eduardo Franciscon utilizando o software Kodular.</p><p>Existe uma convenção de nomenclatura entre os programadores</p><p>relacionado à nomeação dos componentes. Eles frequentemente usam</p><p>abreviações como “btn”, “lbl” e “txt” ao nomear os componentes para programar</p><p>por algumas razões:</p><p>• Concisão e clareza: essas abreviações são curtas e fáceis de entender,</p><p>o que torna o código mais conciso e legível. Isso é especialmente útil em</p><p>ambientes de desenvolvimento onde o espaço é limitado ou onde a</p><p>legibilidade do código é importante.</p><p>• Padrões de nomenclatura: muitas vezes, os desenvolvedores adotam</p><p>padrões de nomenclatura para garantir consistência em seus projetos ou</p><p>16</p><p>em projetos de equipes. O uso de abreviações padronizadas para</p><p>componentes comuns, como botões (“btn”), rótulos (“lbl”) e caixas de texto</p><p>(“txt”), pode facilitar a compreensão do código por outros membros da</p><p>equipe.</p><p>• Facilidade de identificação: ao ver uma abreviação como “btn” ou “txt”,</p><p>os desenvolvedores podem instantaneamente reconhecer que se trata de</p><p>um botão ou uma caixa de texto, respectivamente. Isso simplifica a</p><p>identificação e compreensão dos componentes no código.</p><p>• Eficiência na digitação: digitar abreviações curtas como “btn”, “lbl” e “txt”</p><p>é mais rápido do que escrever os nomes completos dos componentes.</p><p>Isso pode economizar tempo durante o processo de codificação,</p><p>especialmente em situações em que os desenvolvedores precisam</p><p>escrever muitos desses componentes repetidamente.</p><p>A adoção de convenções de nomenclatura para os componentes em</p><p>projetos de programação desempenha um papel crucial na eficiência e clareza</p><p>do desenvolvimento de software. Essa prática, apesar de parecer simples à</p><p>primeira vista, traz benefícios significativos que impactam diretamente a</p><p>qualidade do código e a colaboração em equipe.</p><p>Uma convenção de nomenclatura bem definida ajuda a criar um ambiente</p><p>de código mais legível e compreensível. Por exemplo, ao usar prefixos como</p><p>“btn” para botões, “lbl” para labels (rótulos) e “txt” para campos de texto, os</p><p>desenvolvedores podem imediatamente identificar o tipo de componente ao qual</p><p>a variável se refere, sem a necessidade de consultar a implementação detalhada</p><p>do componente. Isso acelera o processo de desenvolvimento, pois os</p><p>programadores gastam menos tempo decifrando o propósito de cada</p><p>componente no código.</p><p>Além disso, quando os membros da equipe seguem uma convenção de</p><p>nomenclatura consistente, o código se torna mais padronizado e organizado.</p><p>Isso é especialmente importante em projetos maiores ou em ambientes de</p><p>desenvolvimento colaborativo, onde várias pessoas trabalham no mesmo</p><p>código. Uma convenção uniforme reduz a curva de aprendizado para novos</p><p>membros da equipe, permitindo que eles compreendam e contribuam para o</p><p>projeto mais rapidamente. Isso também minimiza o risco de conflitos e erros</p><p>devido a mal-entendidos sobre o papel ou o estado de um componente</p><p>específico.</p><p>17</p><p>Outra vantagem significativa é a melhoria na manutenção do código. À</p><p>medida que projetos de software evoluem, o código precisa ser atualizado,</p><p>refatorado ou expandido. Uma convenção de nomenclatura clara facilita a</p><p>localização de componentes específicos e a compreensão de suas funções,</p><p>tornando o processo de modificação menos propenso a erros. Isso é</p><p>particularmente valioso para a detecção e correção de bugs bem como para a</p><p>implementação de novas funcionalidades.</p><p>Adicionalmente, o uso de convenções de nomenclatura facilita a</p><p>automação de certas tarefas de desenvolvimento, como testes e documentação.</p><p>Ferramentas e scripts podem ser configurados para reconhecer padrões de</p><p>nomenclatura e realizar ações específicas, como gerar documentação de API ou</p><p>identificar casos de teste, de maneira mais eficiente e com menos configuração</p><p>manual.</p><p>Por fim, a consistência na nomenclatura dos componentes reflete um nível</p><p>de profissionalismo e atenção aos detalhes, características altamente</p><p>valorizadas no desenvolvimento de software. Ela demonstra um compromisso</p><p>com a qualidade e a sustentabilidade do código, facilitando a colaboração e o</p><p>entendimento mútuo dentro da equipe de desenvolvimento e entre as partes</p><p>interessadas.</p><p>O uso de uma convenção de nomenclatura para os componentes não é</p><p>apenas uma boa prática de programação; é uma estratégia essencial que</p><p>promove a clareza, a manutenção, a colaboração eficaz e a qualidade geral em</p><p>projetos de desenvolvimento de software.</p><p>O uso de abreviações como “btn”, “lbl” e “txt” na nomeação de</p><p>componentes é comum entre os programadores devido à concisão, clareza,</p><p>consistência, facilidade de identificação e eficiência na digitação</p><p>que elas</p><p>oferecem. Dessa forma, observe na Figura 9 que os componentes foram</p><p>renomeados nas regras da convenção. Isso ficará mais claro no momento da</p><p>programação em blocos. Note ainda que apenas os componentes que serão</p><p>utilizados na programação são renomeados; aqueles que são apenas usados</p><p>para fins de design visual não precisam ser renomeados.</p><p>No menu de “Propriedades”, Figura 10, configuramos todos os elementos</p><p>relacionados ao nosso app. A seguir, mostramos as configurações de cada</p><p>elemento.</p><p>• Screen1: alinhamento horizontal = centro; alinhamento vertical = topo.</p><p>18</p><p>• OrganizacaoVertical1: alinhamento horizontal = centro; alinhamento</p><p>vertical = topo</p><p>• Label1: fonte = 32; altura = automático; largura = automático; texto =</p><p>“CALCULADORA”</p><p>• Space1: altura 30 px; largura 30 px.</p><p>• txtNumero1: fonte = 14; altura = automático; largura 220 px; tipo de</p><p>entrada = número; alinhamento do texto = esquerda; dica = “ ”</p><p>• Space2: altura 30 px; largura 30 px.</p><p>• txtNumero2: fonte = 14; altura = automático; largura 220 px; tipo de</p><p>entrada = número; alinhamento do texto = esquerda; dica = “ ”</p><p>• Space3: altura 30 px; largura 30 px.</p><p>• OrganizacaoHorizontal1: alinhamento horizontal = centro; alinhamento</p><p>vertical = topo; altura = automático; largura = 220 px,</p><p>• btnSomar: tamanho da fonte = 14; altura = automático; largura =</p><p>preencher principal; texto = “+”; alinhamento do texto = centro</p><p>• btnSubtrair: tamanho da fonte = 14; altura = automático; largura =</p><p>preencher principal; texto = “-”; alinhamento do texto = centro</p><p>• btnMultiplicar: tamanho da fonte = 14; altura = automático; largura =</p><p>preencher principal; texto = “x”; alinhamento do texto = centro</p><p>• btnDividir: tamanho da fonte = 14; altura = automático; largura =</p><p>preencher principal; texto = “/”; alinhamento do texto = centro</p><p>• btnLimpar: tamanho da fonte = 14; altura = automático; largura =</p><p>preencher principal; texto = “c”; alinhamento do texto = centro</p><p>• Space4: altura 30 px; largura 30 px.</p><p>• Label 2: fonte = 32; altura = automático; largura = automático; texto =</p><p>“RESULTADO”</p><p>• lblResultado: fonte = 26; altura = automático; largura = 220 px; texto = “*”</p><p>Essas configurações de propriedades são para organizar os componentes</p><p>dentro do design estabelecido para o app. Feitas as configurações, o próximo</p><p>passo é a programação em blocos dentro do Kodular.</p><p>FINALIZANDO</p><p>Nesta abordagem, refletimos sobre a jornada de desenvolvimento</p><p>partindo do Figma até o Kodular. Nossa missão era clara desde o início:</p><p>19</p><p>desenvolver um projeto prático – uma calculadora. Esse projeto não foi apenas</p><p>sobre codificação ou design; foi uma oportunidade para vivenciar, em primeira</p><p>mão, como a integração entre diferentes plataformas e a colaboração em equipe</p><p>são cruciais no desenvolvimento de software.</p><p>Por meio do Figma, exploramos a importância de mapear nossas ideias e</p><p>funcionalidades antes de mergulhar no desenvolvimento. Essa fase inicial</p><p>provou ser fundamental, permitindo-nos visualizar o design e os componentes</p><p>do nosso projeto e garantindo que todos na equipe compartilhassem uma visão</p><p>unificada. Por sua vez, o Kodular nos desafiou a transformar esse design em</p><p>uma realidade funcional, aplicando as funcionalidades e configurações da paleta</p><p>de componentes e propriedades para iniciarmos na prática nossa calculadora.</p><p>20</p><p>REFERÊNCIAS</p><p>FIGMA. Figma: the collaborative interface design tool. 2022. Disponível em:</p><p><https://www.figma.com>. Acesso em: 19 mar. 2024.</p><p>KODULAR. Kodular: the visual programming environment for Android. 2022.</p><p>Disponível em: <https://www.kodular.io/>. Acesso em: 19 mar. 2024.</p>