<div id="toc_container" role="navigation" aria-label="Table of Contents" data-nosnippet class="toc_white no_bullets toc_numbered toc_title_center">Sumário<ul class="toc_list"><li><a href="#O-INICIO">1. O INICIO </a></li><li><a href="#OBJETIVO-DE-UM-PROJETO-EM-KONY">2. OBJETIVO DE UM PROJETO EM KONY</a><ul><li><ul><li><a href="#-Kony-Studio-653">2.0.1. * Kony Studio 6.5.3</a></li><li><a href="#-Kony-Visualizer-252">2.0.2. * Kony Visualizer 2.5.2</a></li></ul></li></ul></li><li><a href="#MAO-NA-MASSA">3. MÃO NA MASSA</a><ul><li><ul><li><a href="#Center-X-50">3.0.1. Center X: 50%</a></li><li><a href="#Top-200-dp">3.0.2. Top: 200 dp</a></li><li><a href="#Width-200-dp">3.0.3. Width: 200 dp</a></li><li><a href="#Height-50-dp">3.0.4. Height: 50 dp</a></li><li><a href="#Z-Index-10">3.0.5. Z Index = 10</a></li><li><a href="#Center-X-50-2">3.0.6. Center X: 50%</a></li><li><a href="#Top-300-dp">3.0.7. Top: 300 dp</a></li><li><a href="#Width-200-dp-2">3.0.8. Width: 200 dp</a></li><li><a href="#Height-30-dp">3.0.9. Height: 30 dp</a></li><li><a href="#Z-Index-10-2">3.0.10. Z Index = 10</a></li></ul></li></ul></li><li><a href="#LIGANDO-OS-PONTOS">4. LIGANDO OS PONTOS</a></li></ul></div>
<h2>O INICIO </h2>
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 <a href="http://blog.dtidigital.com.br/kony-a-desenvolvedora-multiplataforma-de-apps-mobile-lider-no-quadrante-magico-do-gartner/">Kony</a>.
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.
<h2>OBJETIVO DE UM PROJETO EM KONY</h2>
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:
<h4>* Kony Studio 6.5.3 </h4>
<h4>* Kony Visualizer 2.5.2</h4>
<h2>MÃO NA MASSA</h2>
Em primeiro lugar, abra o Kony Studio. Clique em File -&gt; New Application
<figure id="attachment_1184" aria-describedby="caption-attachment-1184" style="width: 653px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_1.png"><img fetchpriority="high" decoding="async" class="wp-image-1184 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_1.png" alt="Criando um novo projeto Kony " width="653" height="246" /></a><figcaption id="caption-attachment-1184" class="wp-caption-text">Criando um novo projeto</figcaption></figure>
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”.
<figure id="attachment_1185" aria-describedby="caption-attachment-1185" style="width: 513px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_2.png"><img decoding="async" class="wp-image-1185 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_2.png" alt="Renomeando a tela" width="513" height="245" /></a><figcaption id="caption-attachment-1185" class="wp-caption-text">Renomeando a tela</figcaption></figure>
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.
<figure id="attachment_1186" aria-describedby="caption-attachment-1186" style="width: 427px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_3.png"><img decoding="async" class="wp-image-1186 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_3.png" alt="Widget Pallet" width="427" height="287" /></a><figcaption id="caption-attachment-1186" class="wp-caption-text">Widget Pallet</figcaption></figure>
Selecionaremos um botão e um Label e os arrastaremos para a área de nossa tela:
<figure id="attachment_1187" aria-describedby="caption-attachment-1187" style="width: 156px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_4.png"><img loading="lazy" decoding="async" class="size-full wp-image-1187" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_4.png" alt="Controles utilizados " width="156" height="312" /></a><figcaption id="caption-attachment-1187" class="wp-caption-text">Controles utilizados</figcaption></figure>
Para organizar nossa tela, clicaremos primeiro no botão e em seguida na aba Flex Properties:
<figure id="attachment_1188" aria-describedby="caption-attachment-1188" style="width: 537px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_5.png"><img loading="lazy" decoding="async" class="size-full wp-image-1188" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_5.png" alt="Alterando as propriedades " width="537" height="307" /></a><figcaption id="caption-attachment-1188" class="wp-caption-text">Alterando as propriedades</figcaption></figure>
Nas propriedades do elemento, definiremos os seguintes valores:
<ul>
<li style="font-weight: 400;">
<h4>Center X: 50%</h4>
</li>
<li style="font-weight: 400;">
<h4>Top: 200 dp</h4>
</li>
<li style="font-weight: 400;">
<h4>Width: 200 dp</h4>
</li>
<li style="font-weight: 400;">
<h4>Height: 50 dp</h4>
</li>
<li style="font-weight: 400;">
<h4>Z Index = 10</h4>
</li>
</ul>
Todas outras propriedades devem estar com seus valores apagados.
Agora, faremos a mesma coisa com o Label, porém, utilizaremos as propriedades abaixo:
<ul>
<li style="font-weight: 400;">
<h4>Center X: 50%</h4>
</li>
<li style="font-weight: 400;">
<h4>Top: 300 dp</h4>
</li>
<li style="font-weight: 400;">
<h4>Width: 200 dp</h4>
</li>
<li style="font-weight: 400;">
<h4>Height: 30 dp</h4>
</li>
<li style="font-weight: 400;">
<h4>Z Index = 10</h4>
</li>
</ul>
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.
<figure id="attachment_1189" aria-describedby="caption-attachment-1189" style="width: 670px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_6.png"><img loading="lazy" decoding="async" class="size-full wp-image-1189" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_6.png" alt="Renomeando os controles" width="670" height="367" /></a><figcaption id="caption-attachment-1189" class="wp-caption-text">Renomeando os controles</figcaption></figure>
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:
<ul>
<li style="font-weight: 400;">modAplicacao.js</li>
<li style="font-weight: 400;">modTela1.js</li>
</ul>
<figure id="attachment_1190" aria-describedby="caption-attachment-1190" style="width: 402px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_7.png"><img loading="lazy" decoding="async" class="size-full wp-image-1190" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_7.png" alt="Criando um novo módulo Javascript " width="402" height="222" /></a><figcaption id="caption-attachment-1190" class="wp-caption-text">Criando um novo módulo Javascript</figcaption></figure>
Abrindo o arquivo modTela1.js, insira o código abaixo:
tela1Controller = function(){}
tela1Controller.init = function(){
Tela1.label1.text = &#8220;&#8221;;
Tela1.botao1.onClick = tela1Controller.clicouBotao1;
}
tela1Controller.clicouBotao1 = function(){
Tela1.label1.text = &#8220;HELLO WORLD!&#8221;;
}
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.
<h2>LIGANDO OS PONTOS</h2>
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 -&gt; properties -&gt; (Aba) Application-&gt; post-appinit
<figure id="attachment_1191" aria-describedby="caption-attachment-1191" style="width: 636px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_8.png"><img loading="lazy" decoding="async" class="wp-image-1191 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_8.png" alt="Janela de propriedades" width="636" height="244" /></a><figcaption id="caption-attachment-1191" class="wp-caption-text">Janela de propriedades</figcaption></figure>
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.
<figure id="attachment_1192" aria-describedby="caption-attachment-1192" style="width: 232px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_9.png"><img loading="lazy" decoding="async" class="wp-image-1192 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_9.png" alt="Função de inicio da aplicação " width="232" height="213" /></a><figcaption id="caption-attachment-1192" class="wp-caption-text">Função de inicio da aplicação</figcaption></figure>
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 -&gt; properties -&gt; (Aba) Kony Server Details -&gt; Server
<figure id="attachment_1193" aria-describedby="caption-attachment-1193" style="width: 331px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_10.png"><img loading="lazy" decoding="async" class="wp-image-1193 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_10.png" alt="Configurando servidor para chamadas de serviço " width="331" height="184" /></a><figcaption id="caption-attachment-1193" class="wp-caption-text">Configurando servidor para chamadas de serviço</figcaption></figure>
Rodando o APP
Agora estamos prontos para rodar a aplicação. Para isso, clique em cima do projeto com o botão direito. Build -&gt; Clean and Build
<figure id="attachment_1194" aria-describedby="caption-attachment-1194" style="width: 387px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_11.png"><img loading="lazy" decoding="async" class="wp-image-1194 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_11.png" alt="Clean and Build" width="387" height="165" /></a><figcaption id="caption-attachment-1194" class="wp-caption-text">Clean and Build</figcaption></figure>
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.
<figure id="attachment_1195" aria-describedby="caption-attachment-1195" style="width: 531px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_12.png"><img loading="lazy" decoding="async" class="wp-image-1195 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_12.png" alt="Canal Android Nativo " width="531" height="230" /></a><figcaption id="caption-attachment-1195" class="wp-caption-text">Canal Android Nativo</figcaption></figure>
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.
<figure id="attachment_1196" aria-describedby="caption-attachment-1196" style="width: 567px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_13.png"><img loading="lazy" decoding="async" class="wp-image-1196 size-full" title="projeto em kony" src="https://dtidigital.com.br/wp-content/uploads/2017/08/Screenshot_13.png" alt="Procurando pelo seu celular " width="567" height="223" /></a><figcaption id="caption-attachment-1196" class="wp-caption-text">Procurando pelo seu celular</figcaption></figure>
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:
<ul>
<li style="font-weight: 400;">Push notifications</li>
<li style="font-weight: 400;">Ícone personalizável para a Home</li>
<li style="font-weight: 400;">Configurações específicas de cada plataforma</li>
</ul>

Projeto em Kony: passo a passo

Desbloqueie o futuro do seu negócio

Mais conteúdos como esse

Travessa Dona Zilda, 125, sala 203, São Gonçalo – Pelotas, RS. CEP: 96075-166

14841 Dallas Parkway, 8th Floor Addison, TX 75254

R. Levindo Lopes, 357, 5º e 12º Andar – Savassi, Belo Horizonte MG, 30112-010