Projeto em Kony: passo a passo

Por Lucas Maciel|
Atualizado: Jul 2023 |
Publicado: Ago 2017

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.

Quer ver mais conteúdos como esse?

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

Criando um novo projeto Kony
Criando um novo projeto

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”.

Renomeando a tela
Renomeando a tela

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.

Widget Pallet
Widget Pallet

Selecionaremos um botão e um Label e os arrastaremos para a área de nossa tela:

Controles utilizados
Controles utilizados

Para organizar nossa tela, clicaremos primeiro no botão e em seguida na aba Flex Properties:

Alterando as propriedades
Alterando as propriedades

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
Renomeando os controles

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
Criando um novo módulo Javascript

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

Janela de propriedades
Janela de propriedades

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.

Função de inicio da aplicação
Função de inicio da aplicação

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

Configurando servidor para chamadas de serviço
Configurando servidor para chamadas de serviço

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

Clean and Build
Clean and Build

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.

Canal Android Nativo
Canal Android Nativo

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.

Procurando pelo seu celular
Procurando pelo seu celular

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

Quer saber mais?

Desenvolvimento de Software

Confira outros artigos

Veja outros artigos de Desenvolvimento de Software