Criando Aplicações Desktop Nativas com HTML, CSS e JavaScript com Tide SDK

Ei pessoal,

Mais um post sobre aplicações desktop nativas (híbridas) com tecnologias web (HTML, CSS e JavaScript). Recebi alguns emails e comentários depois que publiquei o post sobre o Sencha Desktop Packager sobre uma alternativa free e open source.

tidebox

O bom do Sencha Desktop Packager é se a empresa usa muito Ext JS e quer empacotar aplicações com Ext JS, além de ter suporte. Aí o preço da licença é quase nada se comparado ao serviço oferecido (e o foco da Sencha é o público corporativo né?). Mas, para os meros mortais desenvolvedores freelas, desembolsar quase 1400 reais é muita coisa para uma licença. E para nossa sorte, existem alternativas gratuitas e open source no mercado (até melhores que o SDP).

Então no post de hoje vou apresentar o Tide SDK, que dentre todas as ferramentas que empacotam apps desktop nativas, está no meu top 3. o Tide SDK era conhecido como o Titanium Desktop, então não é tão desconhecido assim da comunidade e já tem história e uma comunidade bem ativa.

Hoje então vamos fazer um hello world apenas para apresentar a ferramenta, e depois podemos ir nos aprofundando no assunto com outros posts aqui no blog.

Passos:

  1. Download do SDK e da IDE
  2. Instalação do SDK e da IDE
  3. Criação do Projeto Hello World
  4. Executando o Projeto Hello World

1 - Download do SDK e da IDE

Para fazer o download do SDK e da IDE, vá até http://www.tidesdk.org/ e clique e download.

TideSDK-loiane-01

Faça o download do SDK e da IDE para para o sistema operacional que você estiver usando. No meu caso é o Mac OS:

TideSDK-loiane-02

2 - Instalação do SDK e da IDE

O SDK é um zip. Unzip o arquivo e renomeie a pasta para apenas TideSDK.

TideSDK-loiane-03

Agora precisamos copiar (ou recortar) essa pasta e colar em um diretório específico. Para:

  • Mac OS~/Library/Application Support/TideSDK (é a pasta Library que fica dentro do diretório do seu usuário, no meu caso por exemplo é /Users/loiane/Library/Application Support/TideSDK)
  • Linux~/.tidesdk
  • Windows XPC:\Documents and Settings\All Users\Application Data\TideSDK
  • Windows 7 (Windows 8): C:\ProgramData\TideSDK

E se você usa Windows, também precisa ter esses dois softwares instalados para conseguir empacotar os apps:

Para instalar a IDE, basta executar o arquivo executável e seguir o wizard da instalação.

3 - Criação do Projeto Hello World

Abra a IDE do Tide SDK que acabamos de instalar. Clique em New Project:

TideSDK-loiane-04

Preencha as informações do projeto, como nome do projeto, pacote, o diretório onde será criado (nesse caso uma pasta HelloWorld será criada dentro do diretório informado), o url da empresa (se tiver) e se deseja ativar PHP, Python ou Ruby (como é um Hello world vou deixar desabilitado). Em seguida, clique em Create Project:

TideSDK-loiane-05

Se navegar até o diretório informado, verá que o projeto HelloWorld foi criado com a seguinte estrutura:

TideSDK-loiane-06

Dentro da pasta Resources é onde ficam os arquivos HTML, CSS e JS. Como esse tutorial é um Hello World, o projeto inicial já cria um HTML com um conteúdo dentro para poder testar. Em outro post podemos ir mais a fundo nos arquivos de configuração.

4 - Executando o Projeto Hello World

E para executar o projeto precisamos trocar de aba. Clique em Test & Package:

TideSDK-loiane-07

No canto inferior esquerdo verá um botão Launch App. Clique nesse botão:

TideSDK-loiane-08

A app será executada:

TideSDK-loiane-09

E como podem ver, é uma app desktop nativa que está exibindo código HTML.

E se a gente voltar no diretório do projeto, dentro da pasta dist vamos ver que foi gerada um arquivo executável. Essa é a nossa app!

TideSDK-loiane-10

Código Fonte deste tutorial: https://github.com/loiane/TideSDK-examples/tree/master/HelloWorld

Se quiserem mais informações, podem consultar a documentação (é bem parecida com a documentação do Ext JS e Sencha Touch): http://tidesdk.multipart.net/docs/user-dev/generated/#!/api

Até a próxima! :)