Figma_e_Kodular_2

Prévia do material em texto

<p>FUNDAMENTOS DE DESIGN DE</p><p>SISTEMAS</p><p>AULA 4</p><p>Prof. Eduardo Alexandre Franciscon</p><p>2</p><p>CONVERSA INICIAL</p><p>Nesta etapa, exploraremos os fundamentos da programação de</p><p>aplicativos móveis, a partir do zero até a execução de testes finais.</p><p>Para começar, vamos entender o conceito de programação em blocos.</p><p>Vamos aprender como usar os blocos de programação do Kodular para criar</p><p>lógica e funcionalidades para nossos aplicativos, sem a necessidade de escrever</p><p>um código tradicional. Com essa abordagem visual e intuitiva, qualquer pessoa</p><p>pode se tornar um desenvolvedor de aplicativos.</p><p>Em seguida, vamos entender a importância do cadastro no Kodular.</p><p>Vamos aprender como se inscrever na plataforma, criar uma conta e acessar</p><p>todos os recursos incríveis que o Kodular tem a oferecer. Além disso,</p><p>discutiremos a importância de vincular sua conta do Google ao Kodular, o que</p><p>facilita o acesso e oferece benefícios adicionais.</p><p>Entenderemos a importância da documentação do Kodular. Vamos</p><p>explorar como usar esse recurso valioso para entender os componentes, as</p><p>funcionalidades e os recursos disponíveis na plataforma. A documentação será</p><p>nossa bússola enquanto navegamos pelo mundo da criação de aplicativos.</p><p>Vamos ver também a comunidade de desenvolvedores, onde podemos</p><p>encontrar suporte, compartilhar conhecimento e colaborar com outros</p><p>desenvolvedores na jornada de criação de aplicativos.</p><p>Continuamos com o processo de desenvolvimento de um projeto no</p><p>Kodular. Veremos desde a concepção do design do projeto, passando pela</p><p>implementação da lógica de programação em blocos, até a fase de testes para</p><p>garantir que tudo funcione perfeitamente.</p><p>E, para facilitar ainda mais o desenvolvimento, vamos aprender como</p><p>instalar e usar o Companion do Kodular. Com essa ferramenta, podemos</p><p>visualizar e testar nossos aplicativos em tempo real diretamente em nossos</p><p>dispositivos móveis, tornando o processo de desenvolvimento mais ágil e</p><p>eficiente.</p><p>TEMA 1 – A PROGRAMAÇÃO EM BLOCOS</p><p>A programação por blocos, também conhecida como programação visual</p><p>por blocos, é um estilo de programação em que os programas são construídos</p><p>juntando blocos gráficos que representam diferentes comandos e estruturas de</p><p>3</p><p>controle. Essa abordagem é frequentemente usada em ambientes de</p><p>programação voltados para iniciantes, especialmente crianças, mas também é</p><p>encontrada em ferramentas de desenvolvimento de software para diversas</p><p>aplicações (Figma, 2022).</p><p>Os blocos gráficos geralmente representam operações básicas, como</p><p>loops, condições, operações matemáticas, entrada e saída de dados, entre</p><p>outros. Os programadores podem arrastar esses blocos e conectá-los para criar</p><p>programas funcionais, sem a necessidade de escrever códigos manualmente.</p><p>Isso torna a programação por blocos mais acessível e intuitiva, especialmente</p><p>para aqueles que estão apenas começando a aprender a programar.</p><p>Figura 1 – Exemplo de programação em blocos</p><p>A dinâmica da programação em blocos envolve a criação de programas</p><p>por meio da manipulação de blocos gráficos em um ambiente de</p><p>desenvolvimento visual, conforme a Figura 1. Aqui está uma explicação passo a</p><p>passo da dinâmica típica da programação em blocos:</p><p>1. Seleção dos blocos: o programador começa escolhendo os blocos que</p><p>representam as operações desejadas. Por exemplo, blocos para</p><p>operações matemáticas, loops, condicionais, entrada e saída de dados,</p><p>entre outros.</p><p>2. Arrastar e soltar: uma vez selecionados, os blocos são arrastados para</p><p>uma área de trabalho ou espaço de programação. Isso geralmente é feito</p><p>usando uma interface gráfica amigável, onde os blocos podem ser</p><p>facilmente movidos com o mouse ou o toque em dispositivos sensíveis ao</p><p>toque.</p><p>3. Conexão de blocos: os blocos são conectados uns aos outros para</p><p>formar sequências de comandos. Isso é feito alinhando as conexões de</p><p>4</p><p>entrada e saída dos blocos, de modo que eles se encaixem logicamente.</p><p>Por exemplo, uma operação matemática pode ser conectada a uma</p><p>variável que armazena um valor.</p><p>4. Configuração de parâmetros: alguns blocos podem ter parâmetros</p><p>ajustáveis, como o valor de uma variável, o número de repetições em um</p><p>loop ou as condições em uma estrutura condicional. O programador pode</p><p>ajustar esses parâmetros conforme necessário para personalizar o</p><p>comportamento do programa.</p><p>5. Execução do programa: uma vez que o programa tenha sido montado</p><p>usando os blocos, ele pode ser executado para ver o resultado.</p><p>Dependendo da plataforma utilizada, isso pode envolver pressionar um</p><p>botão de execução para iniciar o programa ou interagir com uma</p><p>simulação em tempo real.</p><p>6. Depuração e refinamento: durante a execução, o programador pode</p><p>identificar problemas no programa e fazer ajustes conforme necessário.</p><p>Isso pode envolver a modificação de blocos existentes, a adição de novos</p><p>blocos ou a reorganização da lógica do programa para corrigir erros ou</p><p>melhorar o desempenho.</p><p>7. Iteração: o processo de criação, execução, depuração e refinamento é</p><p>iterativo. Os programadores continuam ajustando seu programa até</p><p>alcançarem o comportamento desejado ou resolverem o problema</p><p>proposto.</p><p>Essa dinâmica de programação em blocos é projetada para ser intuitiva e</p><p>acessível, especialmente para iniciantes, pois elimina a necessidade de</p><p>aprender uma sintaxe específica de linguagem de programação e permite que</p><p>os programadores se concentrem na lógica e na estruturação do programa</p><p>(Figma, 2022).</p><p>TEMA 2 – INICIANDO NO KODULAR</p><p>Para o uso do Kodular, primeiramente é necessário realizar o cadastro</p><p>dentro da plataforma, que é simples e pode ser feito por meio de um e-mail</p><p>qualquer ou por login do Google de forma automática. A Figura 2 demonstra a</p><p>janela de cadastro ou login do Kodular.</p><p>5</p><p>Figura 2 – Tela de cadastro/login do Kodular</p><p>Fonte: Kodular.</p><p>Ao se cadastrar, é necessário entender como funciona a dinâmica da</p><p>plataforma e também da comunidade presente entre os desenvolvedores que</p><p>utilizam o Kodular para trabalhar. A Figura 3 mostra a simplicidade do</p><p>funcionamento da ferramenta.</p><p>Figura 3 – Tela inicial do Kodular</p><p>Fonte: Kodular.</p><p>6</p><p>Num primeiro momento, como podemos ver na Figura 3, no canto superior</p><p>direito, encontramos a opção “Community”, que dá acesso à comunidade. É uma</p><p>rede ativa e colaborativa onde os usuários podem trocar experiências,</p><p>compartilhar projetos e obter suporte uns dos outros.</p><p>A documentação do Kodular se encontra logo ao lado da comunidade,</p><p>“Docs”. É abrangente e inclui tutoriais, guias e exemplos para ajudar os</p><p>desenvolvedores a explorarem todas as funcionalidades da plataforma e resolver</p><p>problemas comuns. Esses recursos combinados facilitam a aprendizagem e a</p><p>criação de aplicativos para usuários de todos os níveis de habilidade.</p><p>Por fim, nessa tela inicial, temos o botão “Create Apps” por meio do qual</p><p>teremos acesso ao nosso projeto, podendo ser criados e salvos quando</p><p>precisarmos dentro da plataforma (Figma, 2022).</p><p>2.1 A documentação do Kodular</p><p>A documentação do Kodular é uma ferramenta fundamental para qualquer</p><p>pessoa que desenvolva aplicativos na plataforma. Ela oferece uma série de</p><p>vantagens significativas, desde a compreensão mais profunda das</p><p>funcionalidades disponíveis até a segurança e a confiabilidade do</p><p>desenvolvimento.</p><p>Uma necessidade crucial de se utilizar a documentação do Kodular está</p><p>na compreensão das diferentes funcionalidades e recursos oferecidos pela</p><p>plataforma. Como o Kodular é uma ferramenta poderosa e altamente</p><p>personalizável para o desenvolvimento de aplicativos Android sem a</p><p>necessidade de codificação, entender como utilizar seus componentes e blocos</p><p>de programação é essencial para criar aplicativos eficazes e funcionais.</p><p>Além disso, a documentação do Kodular oferece vantagens inestimáveis</p><p>para os desenvolvedores. Ela fornece exemplos claros, tutoriais</p><p>passo a passo</p><p>e explicações detalhadas sobre como utilizar cada recurso da plataforma. Isso</p><p>permite que os desenvolvedores explorem todo o potencial do Kodular, desde a</p><p>criação de interfaces de usuário atraentes até a integração de funcionalidades</p><p>avançadas, como notificações push e armazenamento em nuvem.</p><p>A segurança é outro aspecto crucial fornecido pela documentação do</p><p>Kodular. Ao seguir as práticas recomendadas e as diretrizes fornecidas na</p><p>documentação, os desenvolvedores podem garantir que seus aplicativos sejam</p><p>seguros e confiáveis. Isso inclui a implementação adequada de medidas de</p><p>7</p><p>segurança, como autenticação de usuário, manipulação segura de dados e</p><p>prevenção contra ameaças comuns, como ataques de segurança e vazamento</p><p>de informações.</p><p>A documentação do Kodular é uma ferramenta indispensável para os</p><p>desenvolvedores de aplicativos Android. Ela não apenas fornece uma</p><p>compreensão abrangente das funcionalidades da plataforma, mas também</p><p>oferece vantagens significativas em termos de desenvolvimento eficiente,</p><p>segurança e confiabilidade dos aplicativos criados. Ao utilizar a documentação</p><p>do Kodular de forma eficaz, os desenvolvedores podem criar aplicativos</p><p>poderosos e de alta qualidade que atendam às necessidades e expectativas dos</p><p>usuários (Figma, 2022).</p><p>2.2 A comunidade do Kodular</p><p>Participar da comunidade do Kodular é uma oportunidade valiosa para os</p><p>desenvolvedores de aplicativos, independentemente do seu nível de</p><p>experiência. Essa comunidade vibrante e engajada oferece uma série de</p><p>benefícios que vão desde o suporte técnico até oportunidades de aprendizado e</p><p>colaboração (Figma, 2022).</p><p>Uma necessidade fundamental de se participar da comunidade do</p><p>Kodular está na busca por suporte e resolução de dúvidas. Desenvolver</p><p>aplicativos pode ser um desafio, especialmente para iniciantes, e ter acesso a</p><p>uma comunidade de colegas e especialistas prontos para oferecer conselhos e</p><p>orientações é inestimável. A comunidade do Kodular está repleta de membros</p><p>dispostos a ajudar, seja respondendo a perguntas técnicas específicas,</p><p>oferecendo feedback sobre projetos em desenvolvimento ou compartilhando</p><p>recursos e tutoriais úteis.</p><p>Além disso, participar da comunidade do Kodular oferece vantagens</p><p>significativas em termos de aprendizado e desenvolvimento profissional. Ao</p><p>interagir com outros desenvolvedores, é possível trocar conhecimentos, explorar</p><p>novas ideias e descobrir maneiras inovadoras de utilizar os recursos da</p><p>plataforma. Essa colaboração promove um ambiente de aprendizado contínuo,</p><p>onde os desenvolvedores podem expandir suas habilidades e aprimorar suas</p><p>técnicas de desenvolvimento de aplicativos.</p><p>Outro benefício importante de se envolver na comunidade do Kodular é o</p><p>networking e as oportunidades de colaboração. Conectar-se com outros</p><p>8</p><p>desenvolvedores pode levar a parcerias em projetos conjuntos,</p><p>compartilhamento de recursos e até mesmo oportunidades de trabalho ou</p><p>empreendedorismo. A comunidade do Kodular é um lugar onde os</p><p>desenvolvedores podem encontrar inspiração, apoio e até mesmo potenciais</p><p>parceiros de negócios.</p><p>Participar da comunidade do Kodular é uma escolha inteligente para</p><p>qualquer pessoa interessada em desenvolvimento de aplicativos. Além de</p><p>oferecer suporte técnico valioso, a comunidade proporciona um ambiente</p><p>colaborativo e estimulante onde os desenvolvedores podem aprender, crescer e</p><p>se conectar com outros profissionais do setor. Ao se envolver ativamente na</p><p>comunidade do Kodular, os desenvolvedores podem ampliar suas habilidades,</p><p>expandir suas redes profissionais e alcançar maior sucesso em seus projetos de</p><p>desenvolvimento de aplicativos (Figma, 2022).</p><p>2.3 O cadastro por contato do Google no Kodular</p><p>Registrar-se no Kodular utilizando uma conta do Google oferece uma</p><p>série de vantagens e benefícios significativos para os desenvolvedores de</p><p>aplicativos. Ao vincular sua conta do Google ao Kodular, você desfruta de uma</p><p>integração mais fluida, acesso simplificado a recursos adicionais e uma</p><p>experiência de desenvolvimento mais conveniente e eficiente (Figma, 2022).</p><p>Uma das principais vantagens de utilizar uma conta do Google no</p><p>cadastro do Kodular é a facilidade de acesso. Como a maioria das pessoas já</p><p>possui uma conta do Google para acessar serviços como o Gmail, Google Drive</p><p>e YouTube, usar essa mesma conta para se inscrever no Kodular elimina a</p><p>necessidade de criar e gerenciar múltiplas contas. Isso simplifica o processo de</p><p>login e torna mais fácil para os desenvolvedores acessarem suas contas e</p><p>projetos no Kodular sempre que precisarem.</p><p>Além disso, ao utilizar uma conta do Google, os desenvolvedores têm</p><p>acesso a recursos adicionais e integrações úteis. Por exemplo, o Kodular pode</p><p>aproveitar os serviços e APIs do Google para oferecer funcionalidades</p><p>avançadas, como autenticação de usuário via Google, armazenamento em</p><p>nuvem no Google Drive e integração com o Google Maps e Google Analytics.</p><p>Essas integrações não apenas enriquecem as possibilidades de</p><p>desenvolvimento de aplicativos, mas também simplificam a implementação de</p><p>recursos essenciais (Figma, 2022).</p><p>9</p><p>Outra vantagem importante de usar uma conta do Google no Kodular é a</p><p>segurança e confiabilidade proporcionadas pelos robustos protocolos de</p><p>segurança do Google. Como uma das maiores empresas de tecnologia do</p><p>mundo, o Google investe pesadamente em medidas de segurança para proteger</p><p>as contas dos usuários contra atividades maliciosas, como acesso não</p><p>autorizado e phishing. Ao vincular sua conta do Google ao Kodular, você se</p><p>beneficia dessas camadas adicionais de segurança, garantindo a proteção de</p><p>seus dados e projetos de desenvolvimento (Figma, 2022).</p><p>Utilizar uma conta do Google no cadastro do Kodular oferece uma série</p><p>de vantagens e benefícios significativos para os desenvolvedores de aplicativos.</p><p>Desde a facilidade de acesso até recursos adicionais e maior segurança, essa</p><p>integração simplifica o processo de desenvolvimento e melhora a experiência do</p><p>usuário, permitindo que os desenvolvedores se concentrem no que fazem de</p><p>melhor: criar aplicativos incríveis.</p><p>TEMA 3 – INICIANDO UM PROJETO</p><p>Assim que clicar no botão “Create Apps” da página mostrada na Figura 3,</p><p>você é direcionado à página da Figura 4, em que é necessário clicar no botão</p><p>“Criar o projeto”. Logo em seguida aparecerá uma nova janela, Figura 4, a qual</p><p>tem a finalidade de nomear o projeto.</p><p>Figura 4 – Janela de iniciação de projetos no Kodular</p><p>Fonte: Kodular.</p><p>10</p><p>Após nomear o projeto, essa janela direciona para a próxima etapa de</p><p>início de projetos, onde serão realizadas algumas configurações básicas,</p><p>conforme a Figura 5.</p><p>Figura 5 – Janela de configuração do projeto</p><p>Fonte: Kodular.</p><p>Nas configurações, vamos aprender as mais importantes que têm impacto</p><p>direto no desenvolvimento do projeto, a iniciar pelo nome. É interessante que ele</p><p>seja claro e aponte com facilidade do que se trata. A próxima opção de</p><p>configuração é do tema, “Theme”, que oferece opções de temas diferentes para</p><p>o desenvolvimento, de tons claros até mais escuros.</p><p>A opção “Minimum SDK level” (nível mínimo do SDK), em configurações</p><p>de projeto, refere-se ao nível mínimo da API do Android que o seu aplicativo</p><p>suportará. Isso determina quais dispositivos serão capazes de instalar e executar</p><p>seu aplicativo.</p><p>O “Package Name” (nome do pacote) é um identificador único para seu</p><p>aplicativo Android. Ele é usado para distinguir seu aplicativo de outros aplicativos</p><p>no Google Play Store e no sistema operacional Android. O package name</p><p>geralmente segue a convenção de nomenclatura reversa do domínio (por</p><p>exemplo, “com.exemplo.meuaplicativo”).</p><p>11</p><p>Por fim, temos algumas opções de cores que não impactam diretamente</p><p>na atividade de desenvolvimento dos projetos, mas, se preferir, é possível alterar</p><p>as cores primárias e de destaque para</p><p>um ambiente de desenvolvimento que lhe</p><p>agrade mais (Figma, 2022).</p><p>TEMA 4 – A DINÂMICA DO DESENVOLVIMENTO NA PLATAFORMA</p><p>Para iniciar efetivamente os projetos dentro do Kodular, precisamos ter</p><p>em mente a lógica do desenvolvimento que, basicamente passa por três etapas:</p><p>design do projeto, programação em blocos e teste por meio do Companion</p><p>(Figma, 2022).</p><p>4.1 Design do projeto</p><p>A começar pelo design do projeto, primeiramente, selecionamos a tela</p><p>(“Screen”) em que desejamos fazer a alteração no app (se houver mais de uma</p><p>página). A Figura 6 mostra onde selecionamos as telas em que precisamos fazer</p><p>as alterações.</p><p>Figura 6 – Seleção de telas do app</p><p>Após isso, devemos selecionar os elementos que serão utilizados no</p><p>projeto no menu da paleta, que fica localizado na parte direita do ambiente de</p><p>desenvolvimento. Os elementos são muito variados, entre eles botões, grids,</p><p>labels etc. Uma vez montado o ambiente da tela, é necessária a visualização de</p><p>como fica na tela do dispositivo a organização do layout. Isso é simples, e no</p><p>campo “Visualizador”, no centro da tela, observamos como está a evolução do</p><p>layout. Por fim, temos as configurações das propriedades de cada elemento, que</p><p>são configuráveis no menu da direita do ambiente de desenvolvimento, menu</p><p>“Propriedades”, que tem a finalidade de fazer as configurações visuais do</p><p>elemento em si. Por exemplo: fontes, formas e localização. Feito isso, temos a</p><p>primeira etapa da nossa dinâmica de desenvolvimento concluída.</p><p>Ao selecionar os elementos da paleta e organizá-los para o uso dentro</p><p>projeto, os grids e as configurações no menu de propriedades, tanto para os</p><p>grids de organização, como para as telas do projeto são de muita importância,</p><p>12</p><p>pois um projeto deve ser responsivo para diversos modelos de aparelhos, ou</p><p>seja, o design do projeto deve estar encaixado e atraente para todos.</p><p>A importância de grids de organização e telas bem estruturadas é</p><p>fundamental para o sucesso de qualquer aplicativo, especialmente em</p><p>plataformas como o Kodular, onde a experiência do usuário é essencial. A</p><p>utilização de grids, ou grades, proporciona uma disposição organizada dos</p><p>elementos na tela, facilitando a compreensão e a interação do usuário com o</p><p>aplicativo.</p><p>Em um ambiente como o Kodular, onde os desenvolvedores têm a</p><p>liberdade de criar aplicativos sem a necessidade de escrever códigos, as</p><p>configurações realizadas no menu de propriedades desempenham um papel</p><p>crucial na criação de designs responsivos. Um design responsivo é aquele que</p><p>se adapta de forma eficiente a diferentes tamanhos de tela e dispositivos,</p><p>garantindo uma experiência consistente para todos os usuários,</p><p>independentemente do dispositivo que estão usando.</p><p>Ao configurar as propriedades dos elementos no Kodular, os</p><p>desenvolvedores podem definir parâmetros como largura, altura, margens e</p><p>alinhamentos. Essas configurações são essenciais para garantir que os</p><p>elementos da interface do usuário sejam exibidos corretamente e de forma</p><p>harmoniosa em uma variedade de dispositivos, desde smartphones e tablets até</p><p>telas maiores, como TVs inteligentes.</p><p>Além disso, o Kodular oferece recursos específicos para ajudar os</p><p>desenvolvedores a criar designs responsivos, como componentes de layout</p><p>flexíveis e opções de dimensionamento automático. Ao utilizar esses recursos</p><p>em conjunto com as configurações adequadas no menu de propriedades, os</p><p>desenvolvedores podem garantir que seus aplicativos se adaptem de forma</p><p>inteligente a diferentes tamanhos de tela e proporções, proporcionando uma</p><p>experiência de usuário consistente e agradável.</p><p>A utilização de grids de organização, telas bem estruturadas e</p><p>configurações precisas no menu de propriedades do Kodular é essencial para</p><p>criar designs responsivos e garantir uma experiência de usuário de alta</p><p>qualidade em uma variedade de dispositivos. Ao investir tempo e atenção na</p><p>criação de designs eficientes e adaptáveis, os desenvolvedores podem</p><p>aumentar a usabilidade, a acessibilidade e a satisfação dos usuários com seus</p><p>aplicativos no Kodular (Figma, 2022).</p><p>13</p><p>4.2 Programação em blocos</p><p>A segunda parte é a programação em blocos. Para acessá-la, deve-se</p><p>clicar no botão “Blocos”, localizado na parte superior direita do ambiente de</p><p>desenvolvimento Kodular, próximo ao menu de telas, como demonstrado na</p><p>Figura 6.</p><p>Ao iniciar um projeto no Kodular, os usuários são recebidos com uma tela</p><p>de design onde podem arrastar e soltar diferentes componentes visuais e</p><p>funcionais para construir a interface do seu aplicativo. Em seguida, eles podem</p><p>acessar a área de programação, onde encontram uma vasta biblioteca de blocos</p><p>que representam a lógica e as operações do aplicativo.</p><p>Os blocos são organizados por categorias, facilitando a localização e</p><p>seleção das funcionalidades desejadas. Os usuários podem conectar esses</p><p>blocos para criar sequências de ações, condicionais, loops e muito mais,</p><p>construindo assim a lógica do seu aplicativo de forma visual e interativa.</p><p>Além dos blocos padrão, o Kodular permite aos usuários criar seus</p><p>próprios blocos personalizados, encapsulando sequências de ações repetitivas</p><p>ou complexas em blocos reutilizáveis, tornando o processo de desenvolvimento</p><p>mais eficiente e modular. Na Figura 7, podemos ver na parte inferior esquerda</p><p>os elementos alocados na fase do design do projeto. Nesse exemplo trata-se de</p><p>um grid de organização, um botão e um label de resultados, denominados</p><p>respectivamente como “OrganizaçãoVertical1”, “Botão1” e “lblResultado”.</p><p>Figura 7 – Ambiente de programação em blocos do Kodular</p><p>Fonte: Kodular.</p><p>14</p><p>No centro do ambiente, podemos ver um conjunto de blocos nas cores</p><p>verde e amarelo. Esses blocos quando combinados executam uma função lógica</p><p>para o botão e o label organizados na tela do app na hora do design. Nesse</p><p>exemplo, ao se clicar no botão, o label contendo um texto fica visível para ser</p><p>lido. É um exemplo simples, mas que já demonstra a funcionalidade da</p><p>ferramenta.</p><p>4.3 Teste</p><p>O Companion do Kodular é uma ferramenta essencial para o processo de</p><p>desenvolvimento de aplicativos na plataforma. Ele funciona como um emulador</p><p>em tempo real que permite aos desenvolvedores testar seus aplicativos</p><p>diretamente em dispositivos móveis enquanto os constroem. O funcionamento</p><p>do Companion é bastante simples e eficaz. Após iniciar um projeto no Kodular,</p><p>os desenvolvedores têm a opção de conectar seus dispositivos móveis ao</p><p>ambiente de desenvolvimento. Uma vez conectados, eles podem iniciar o</p><p>Companion no dispositivo móvel.</p><p>Assim que o Companion estiver em execução no dispositivo móvel e</p><p>conectado ao ambiente de desenvolvimento, qualquer alteração feita no projeto</p><p>Kodular é automaticamente refletida no dispositivo móvel em tempo real. Isso</p><p>significa que os desenvolvedores podem ver instantaneamente como suas</p><p>mudanças afetam a aparência e o comportamento do aplicativo enquanto</p><p>continuam a trabalhar nele.</p><p>Essa capacidade de teste em tempo real é extremamente valiosa, pois</p><p>permite aos desenvolvedores iterar rapidamente sobre seus aplicativos, fazer</p><p>ajustes se necessário e garantir que tudo esteja funcionando conforme o</p><p>esperado antes de publicar o aplicativo final na loja de aplicativos.</p><p>Além disso, o Companion do Kodular também oferece recursos</p><p>adicionais, como a capacidade de testar interações com sensores do dispositivo,</p><p>como GPS e acelerômetro, e a capacidade de simular diferentes tamanhos de</p><p>tela e resoluções para garantir que o aplicativo seja compatível com uma</p><p>variedade de dispositivos.</p><p>Na Figura 8, podemos ver o projeto realizado para o experimento montado</p><p>para esta etapa. O projeto visual é simples e o resultado do código executado</p><p>por meio dos blocos é esse que observamos. Já podemos ver o botão e o texto</p><p>que aparece ao clicá-lo. O texto está dentro de um label que tem a finalidade</p><p>15</p><p>exclusiva de mostrar</p><p>o resultado. Por fim, tanto o botão quanto o label estão</p><p>dentro de um grid de organização que não aparece na imagem do projeto, pois</p><p>sua finalidade é apenas de organização dos elementos utilizados dentro dos</p><p>projetos.</p><p>Figura 8 – Imagem do Companion em um smartphone</p><p>Para realizar os testes dentro do projeto é necessário que em um</p><p>smartphone tenha instalado o app do Companion – Kodular, pois é por meio</p><p>desse app que a plataforma do Kodular espelha o projeto em andamento para</p><p>os testes. Uma vez instalado o app em um aparelho, basta clicar na opção</p><p>“Conectar” e depois em “Assistente”, como mostrado na Figura 9.</p><p>Figura 9 - Assistente de teste do Companion</p><p>16</p><p>Depois de pareado o projeto entre a plataforma do Kodular e o</p><p>smartphone, todas as alterações ou atualizações realizadas no projeto poderão</p><p>ser visualizadas e testadas da mesma maneira.</p><p>Esse mecanismo de teste é excelente por várias razões. Primeiramente,</p><p>o Companion permite que os desenvolvedores testem seus aplicativos em tempo</p><p>real diretamente em dispositivos móveis. Isso significa que eles podem visualizar</p><p>instantaneamente como suas alterações no projeto afetam a aparência e o</p><p>funcionamento do aplicativo, proporcionando um ciclo de desenvolvimento mais</p><p>rápido e eficiente.</p><p>Além disso, o Companion do Kodular oferece uma representação precisa</p><p>do comportamento do aplicativo em dispositivos reais, em vez de depender</p><p>apenas de emuladores no computador. Isso ajuda a garantir que o aplicativo</p><p>funcione corretamente em uma variedade de dispositivos Android,</p><p>proporcionando uma experiência mais consistente para os usuários finais.</p><p>Outro ponto forte do teste do Companion é a capacidade de interagir com</p><p>os recursos do dispositivo em tempo real, como GPS, acelerômetro e câmera.</p><p>Isso permite que os desenvolvedores testem recursos específicos do aplicativo</p><p>que dependem desses sensores, garantindo seu correto funcionamento antes</p><p>do lançamento.</p><p>Além disso, o Companion do Kodular oferece uma experiência de</p><p>desenvolvimento mais prática e imersiva, permitindo aos desenvolvedores testar</p><p>o aplicativo em condições semelhantes às do mundo real. Isso ajuda a identificar</p><p>e corrigir problemas de usabilidade e experiência do usuário de forma mais</p><p>eficaz.</p><p>TEMA 5 – COMO INSTALAR E USAR O COMPANION</p><p>O primeiro passo para o uso do Companion é o download do app no</p><p>smartphone em que serão realizados os testes. Dessa forma, dentro da Play</p><p>Store, pesquise pelo Companion Kodular, como mostrado na Figura 10. Feito</p><p>isso, realize a instalação dele (Figma, 2022).</p><p>17</p><p>Figura 10 - Download do Kodular Companion</p><p>Fonte: Kodular.</p><p>Concluída a instalação do app no smartphone, abra-o. A tela inicial do app</p><p>deve ser a mesma da Figura 11.Seu mecanismo é muito simples, existindo a</p><p>opção para scannear um QR code ou digitar a chave de acesso que a plataforma</p><p>do Kodular disponibiliza no momento do pareamento do projeto.</p><p>18</p><p>Figura 11 – Tela inicial do Kodular Companion</p><p>Fonte: Kodular.</p><p>Dentro da plataforma do Kodular, clique em “Conectar” e depois</p><p>“Assistente”, como mostra a Figura 9. Feito isso, uma janela contendo um QR</p><p>code vai aparecer, de acordo com a Figura 12.</p><p>Figura 12 – Janela de pareamento do projeto Kodular</p><p>Fonte: Kodular.</p><p>19</p><p>O projeto pode ser pareado tanto na opção de leitura do QR code como</p><p>por meio do preenchimento do código de autenticação. Assim que realizado esse</p><p>procedimento, o projeto já pode ser testado sempre que necessário no</p><p>smartphone.</p><p>FINALIZANDO</p><p>Ao longo desta etapa, exploramos os fundamentos da programação em</p><p>blocos e como podemos criar aplicativos impressionantes sem a necessidade de</p><p>escrever um código tradicional. Além disso, discutimos a importância do cadastro</p><p>no Kodular e como criar uma conta, aproveitando ao máximo os recursos da</p><p>plataforma. Também exploramos a valiosa documentação do Kodular, que serve</p><p>como um guia essencial para entender todas as funcionalidades disponíveis.</p><p>Assim como a importância da comunidade de desenvolvedores do Kodular, em</p><p>que encontramos apoio, compartilhamos conhecimento e nos inspiramos com</p><p>outros criadores. Falamos também sobre a importância de vincular sua conta do</p><p>Google ao Kodular, o que facilita o acesso e oferece benefícios adicionais.</p><p>Exploramos a dinâmica de desenvolvimento da plataforma, desde o</p><p>design inicial do projeto até a implementação da lógica de programação em</p><p>blocos e os testes finais para garantir que nosso aplicativo funcione</p><p>perfeitamente. E, por fim, aprendemos como instalar e usar o Companion do</p><p>Kodular, uma ferramenta poderosa que nos permite visualizar e testar nossos</p><p>aplicativos em tempo real em nossos próprios dispositivos móveis.</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: 11 mar. 2024.</p>