Projeto em Kony: passo a passo
O INICIO
Em agosto de 2017 aconteceu o primeiro Hour of Code na dti digital. O Hour of Code é um evento na empresa com o objetivo de promover uma abordagem mais “mão na massa” para os funcionários. Nesse primeiro Hour of Code, resolvemos mostrar para todos interessados, a criação de um projeto em Kony.
Para quem não conhece, Kony é uma plataforma de desenvolvimento de aplicações multiplataforma mobile nativas. Ou seja, com uma mesma base de código e desenho de suas telas, você gera aplicações nativas tanto para iPhone quanto para Android.
Uma das grandes vantagens da Kony é seu código ser escrito em Javascript, que possibilita uma grande flexibilidade das lógicas da aplicação. Outra vantagem é a unificação de layouts. Os layout em iPhone e Android se apresentam da mesma forma nas duas plataformas. Então, sem grandes problemas, o que você desenha é o que você vê na tela do seu celular.
OBJETIVO DE UM PROJETO EM KONY
Esse artigo tem como objetivo mostrar um pouco como foi essa experiência e também guiá-lo pelo mesmo processo de criação de um projeto em Kony básico.
Para os interessados em seguir o passo a passo, utilizaremos aqui os seguintes programas:
* Kony Studio 6.5.3
* Kony Visualizer 2.5.2
MÃO NA MASSA
Em primeiro lugar, abra o Kony Studio. Clique em File -> New Application
![projeto em kony Criando um novo projeto Kony](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_1.png)
Ao criar um novo projeto, também já criada para nós, uma tela vazia. Iremos renomear essa tela para Tela 1, clicando com o botão direito nela e em seguida em “Rename”.
![projeto em kony Renomeando a tela](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_2.png)
Uma vez que a tela foi criada, vemos que ela está vazia. Vamos popular a tela com um botão e um label. Para isso, usaremos o Widget Pallet.
![projeto em kony Widget Pallet](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_3.png)
Selecionaremos um botão e um Label e os arrastaremos para a área de nossa tela:
![Controles utilizados](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_4.png)
Para organizar nossa tela, clicaremos primeiro no botão e em seguida na aba Flex Properties:
![Alterando as propriedades](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_5.png)
Nas propriedades do elemento, definiremos os seguintes valores:
-
Center X: 50%
-
Top: 200 dp
-
Width: 200 dp
-
Height: 50 dp
-
Z Index = 10
Todas outras propriedades devem estar com seus valores apagados.
Agora, faremos a mesma coisa com o Label, porém, utilizaremos as propriedades abaixo:
-
Center X: 50%
-
Top: 300 dp
-
Width: 200 dp
-
Height: 30 dp
-
Z Index = 10
Para finalizar nossa interface, apenas renomearemos os controles para nomes mais fáceis de utilizar. O botão pode ser chamado de botao1 e o label chamaremos de label 1.
![Renomeando os controles](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_6.png)
Agora que já temos um layout definido para a interação com o usuário, iniciaremos com as lógicas da aplicação. Toda a parte de codificação do App é feita em Javascript. Para isso, a Kony utiliza do que ela chama de javascript modules. Para o caso dessa aplicação, iremos criar dois novos módulos:
- modAplicacao.js
- modTela1.js
![Criando um novo módulo Javascript](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_7.png)
Abrindo o arquivo modTela1.js, insira o código abaixo:
tela1Controller = function(){}
tela1Controller.init = function(){
Tela1.label1.text = “”;
Tela1.botao1.onClick = tela1Controller.clicouBotao1;
}
tela1Controller.clicouBotao1 = function(){
Tela1.label1.text = “HELLO WORLD!”;
}
Essas linhas de código definem uma função que controlará o inicio da tela, que limpa o texto do label e faz a ligação do click do botão com uma função definida pelo programador. A função escolhida foi de mostrar o texto “Hello World!” como manda a tradição da área.
Se você é um leitor atento, percebeu que estamos usando o nome Controller no nome da entidade que controla nossa tela. Na verdade, o nome aqui não é significativo e não carrega nenhuma semelhança com o MVC .NET. Mas por questões de organização, em meus projetos gosto de ter uma entidade controladora de fluxo e interfaces, por isso o nome.
Agora, abrindo o arquivo modAplicacao.js, insira o código abaixo:
function IniciarAplicacao(){
Tela1.init = tela1Controller.init;
}
Esse código faz apenas o Link do evento de init da tela com a função criada no outro módulo. Lembre-se: estamos utilizando Javascript. Portanto todas variáveis e funções criadas no “root” dos arquivos .JS serão vistas globalmente.
LIGANDO OS PONTOS
Nesse ponto já temos todos os blocos que precisamos para fazer nosso aplicativo funcionar. Mas antes de rodar o App criado, precisamos ligar os pontos e fazer algumas configurações.
A primeira coisa é informar ao projeto qual função será o “Start” do App. Para isso vamos em project -> properties -> (Aba) Application-> post-appinit
![projeto em kony Janela de propriedades](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_8.png)
Vai abrir uma nova janela para sabermos qual será a nossa ação desejada no Início do aplicativo. Vamos escolher a opção “Invoke Function” e selecionar a nossa função “IniciarAplicacao”. Em seguida clique em OK e Finish.
![projeto em kony Função de inicio da aplicação](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_9.png)
A segunda ação que devemos configurar é o servidor no qual estamos apontando nossas chamadas de serviço. Como não estamos realizando nenhuma chamada, vamos deixar o servidor apontando para Localhost. Essa configuração fica em Project -> properties -> (Aba) Kony Server Details -> Server
![projeto em kony Configurando servidor para chamadas de serviço](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_10.png)
Rodando o APP
Agora estamos prontos para rodar a aplicação. Para isso, clique em cima do projeto com o botão direito. Build -> Clean and Build
![projeto em kony Clean and Build](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_11.png)
Em seguida, escolha o canal que você deseja fazer o deploy. Usaremos o canal Android Nativo como exemplo. Após a seleção, clique em Build.
![projeto em kony Canal Android Nativo](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_12.png)
Após o Build ser concluído com sucesso, vá na aba Emulators e em seguida procure pelo seu dispositivo. Ao encontrá-lo, clique com o botão direito e em seguida Launch. Se abrir alguma janela, clique OK.
![projeto em kony Procurando pelo seu celular](https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_13.png)
Parabéns! Agora você tem um aplicativo 100% multiplataforma rodando e funcionando! Não foi necessário configurar nenhuma questão de lógica ou tela para Android nem iPhone. Ao selecionar o canal que você deseja fazer o deploy (pode ser escolhido mais de um ao mesmo tempo) a ferramenta já se encarrega de gerar um App nativo com todas características de um app nativo:
- Push notifications
- Ícone personalizável para a Home
- Configurações específicas de cada plataforma
Desenvolvimento de Software
Confira outros artigos
![](/_next/image?url=https%3A%2F%2Fwww.cms.dtidigital.com.br%2Fwp-content%2Fuploads%2F2024%2F07%2Fmecanismos-de-acompanhamento.webp&w=1024&q=75)
Mecanismos de Acompanhamento no Desenvolvimento de Software
O uso de mecanismos de acompanhamento é imprescindível no mundo do desenvolvimento de software e pode potencializar a eficiência digital. O acompanhamento efetivo das operações é fundamental para garantir a entrega de soluções digitais de sucesso. Na nossa empresa, utilizamos uma metodologia única, o dti evolve, que incorpora inteligência artificial (IA) para acelerar nosso processo de […]
Desenvolvimento de Software
![Fundo de código com celular apresentando eficiência digital com copilot](/_next/image?url=https%3A%2F%2Fwww.cms.dtidigital.com.br%2Fwp-content%2Fuploads%2F2024%2F07%2FGitHub-copilot-eficiencia-dti.webp&w=1024&q=75)
Eficiência digital com copilot: um caso de uso do GitHub
Em um mundo em constante evolução tecnológica, otimizar o tempo e potencializar a eficiência digital se torna cada vez mais crucial. Portanto, vamos apresentar alguns experimentos que estão sendo implementados com o Git Hub Copilot em busca de maior eficiência digital. Certamente quem nos acompanha sabe que estamos experimentando e introduzindo as melhores ferramentas de […]
Desenvolvimento de Software
![Engenharia de Prompt - Como conversar com Ia](/_next/image?url=https%3A%2F%2Fwww.cms.dtidigital.com.br%2Fwp-content%2Fuploads%2F2024%2F07%2FShutterstock_2422157137-1.png&w=1024&q=75)
Engenharia de Prompt: A Arte de Conversar com a IA
Sumário1 Falando a Linguagem das Máquinas2 O que é Engenharia de Prompt?3 A Importância da Engenharia de Prompt em Ação: Aplicações do Mundo Real 4 Princípios-chave da Engenharia de Prompt Eficaz4.1 Desconstruindo o Prompt:4.2 Técnicas de Engenharia de Prompt:4.3 Combinando Técnicas e Criando sua Obra-Prima:5 As Armadilhas da Engenharia de Prompt: Navegando pelos Limites dos Modelos […]
Desenvolvimento de Software