Sumário

1 O INICIO
2 OBJETIVO DE UM PROJETO EM KONY
- - 2.0.1 * Kony Studio 6.5.3
  - 2.0.2 * Kony Visualizer 2.5.2
3 MÃO NA MASSA
4 LIGANDO OS PONTOS

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

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

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.

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

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

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.

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

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

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.

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

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

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.

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.

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

O INICIO

OBJETIVO DE UM PROJETO EM KONY

* Kony Studio 6.5.3

* Kony Visualizer 2.5.2

MÃO NA MASSA

Center X: 50%

Top: 200 dp

Width: 200 dp

Height: 50 dp

Z Index = 10

Center X: 50%

Top: 300 dp

Width: 200 dp

Height: 30 dp

Z Index = 10

LIGANDO OS PONTOS

Projeto em Kony: passo a passo

One-stop shop em tecnologia

Confira outros artigos