Deploy de aplicativo rico para web com Plack e CGI.

O que são Aplicativos Ricos?

A grande rede mundial vem se modernizando cada vez mais e com isso possibilitando o avanço e surgimento de diversas tecnologias e métodologias.

Graças ao aumento de velocidade de acesso à rede e a diminiuição de problemas como intermitência no sinal, foi possível aprimorar métodologias de desenvolvimento web e trazer para esse ambiente, características até então somente presentes em aplicativos desktop. Então, eis surge um novo conceito para desenvolvimento web: RIA.

RIA, da sigla em inglês Rich Internet Application, nada mais é que um aplicativo web com características de aplicativos desktop com interface. Um aplicativo RIA, tem por conceito uma interface que mimifica os recursos encontrados em aplicativos GUI presente em qualquer Sistema Operacional.

Nos aplicativos RIA, todos (ou quase todos) os recuros pertinentes a interface são processados pelo browser, e estado e dados da aplicação continuam sendo executados no servidor de aplicativos.

"Aplicações web tradicionais centralizam todo seu código em torno de uma arquitetura de Cliente-servidor e um cliente magro. Todo o processamento é realizado no servidor, e o cliente apenas utiliza uma tela estática (neste caso em HTML). A grande desvantagem deste sistema é que a interação com a aplicação deve ser feita através do servidor, onde os dados são enviados para o servidor, são respondidos e a página é recarregada no cliente como resposta. Utilizando uma tecnologia uma aplicação-cliente que possa executar instruções no computador do usuário, RIAs podem reduzir significativamente o número de sincronizações e aumentar a interatividade com o cliente. Esta diferença pode ser verificada fazendo uma analogia entre terminal e mainframe e servidor de aplicação/Cliente Gordo. " (trecho retirado da WIKIPEDIA)

Em alguns contextos, fica difícil dizer o que é RIA ou não, porém uma característica é comum a este conceito: eles introduzem uma camada intermediária de código, chamada normalmente de client engine, entre o usuário e o servidor. Este client engine é normalmente carregado no início da aplicação, e pode ser acrescido de outras atualizações do código que são baixadas enquanto a aplicação ainda está rodando. O client engine atua como uma extensão do navegador, e é responsável pela renderização da interface de aplicação do usuário e fazer a comunição com o servidor.

Atualmente, para o desenvolvimento RIA, ainda não há um grande número de ferramentas e recursos se comparados com outros conceitos, porém existem alguns frameworks bem ricos e maduros com esse propósito, como DHTMLX e EXTJS.

Eu não incluiría frameworks como Jquery e Prototype nessa lista, porque esses frameworks tem como propósito simplificar a escrita de códigos Javascript, e nao implementar componentes característicos de softwares GUI como DHTMLX e EXTJS fazem.

Liberdade pra uns, escravidão pra outros

Com o amadurecimento da web, foram surgindo diversos ambientes servidores, e consecutivamente diversas outras APIs para esses servidores. Muitos enchergam essa vasta quantidade de opções de servers web como uma "liberdade", porém, o que muitos não vêem, é que na maioria dos casos, ao escolher aquele ambiente e aquela API, o desenvolvedor se tornou eterno escravo daquele ambiente. Ou seja, seu aplicativo, pra "rodar" sempre dependerá daquela tecnologia, e assim, ele acabou de virar um escravo.

E assim, o conceito de Middleware nunca foi tão valioso, e esse sim, pode ser intitulado por "liberdade", pois lhe garante desenvolver um aplicativo que funcione em qualquer ambiente servidor, e o tempo que seria perdido com peculiaridades do ambiente, poderá ser empenhado em tarefas pertinentes a melhoria da aplicação em si.

Seguindo os ensinamentos de meu querido amigo e professor Edem Cardim, resolvi estudar e empregar um fantástico modulo perl que consiste num "kit" de ferramentas, dentre elas um middleware e server de teste que é o Plack -> http://search.cpan.org/dist/Plack/lib/Plack.pm

Então resumindo, com o Plack, pude constuir um aplicativo sem me preocupar com o ambiente servidor, e com isso me dedicar mais ao aplicativo em si.

Definindo "ferramentas & recursos"

1 - IDE Perl: Padre (http://padre.perlide.org/)

2 - Ambiente de desenvolvimento: Plack

3 - Interface HTTP: CGI (http://search.cpan.org/~markstos/CGI.pm-3.55/lib/CGI.pm), poderia ser qualquer outra.

4 - Framework Javascript: DHTMLX (www.dhtmlx.com) O framework DHTMLX é um framework muito rico e maduro e oferece diversos componentes RIA para aplicações de propósitos diversos. Possui versão open e paga. Iremos utilizar a open, lógico.

Definindo o "aplicativo"

O aplicativo tem como ideia principal mimificar um aplicativo do tipo Gerenciador de Arquivos

Funções Principais:

	# Visualização dos diretórios em "estrutura de árvore"

	# Visualização dos arquivos contidos no diretório com informações particulares sobre cada um

	# Criação de diretórios

	# Exclusão de diretórios

	# Visualização de arquivos

	# Download de arquivos

	# Exclusão de arquivos

Preparando o Ambiente

Pra mostrar a verdadeira liberdade que o Plack dá ao desenvolvedor, vou fazer o deploy de nossa aplicação em um SO Windows 2008 Server e esta mesma aplicação rodará em qualquer ambiente que tenha Perl instalado. Porém, quem quiser fazer o deploy num SO linux ou unix, poderá efetuar os mesmos procedimentos correspondentes.

1º passo: Instalar o Perl

	# Windows

	1 - Vá até a url http://strawberryperl.com/ e baixe o Strawberry Perl seguindo o link  Download Strawberry Perl 5.12.3.0 e instale. Durante a instalação,
	escolha o diretório C:\strawberry para a instalação do Strawberry Perl

	# Linux, Unix, Mac
	A maioria desses SOs já vêm com perl instalado. Digite perl -v numa linha de comando para saber qual a versao do seu Perl

2º passo: Instalar os módulos Perl que utilizaremos em nossa aplicação

	1 - Abra o prompt de comando. Menu Iniciar => Executar => cmd "enter".

	2 - Já no prompt de comando, digite o seguinte comando cd c:\strawberry\perl\bin para "entrarmos" no diretório onde se encontram os binários do Perl

	3 - Digite o comando => cpanm CGI => dê enter para instalar o Modulo CGI. Após terminar, siga o próximo comando.

	4 - Digite o comando => cpanm CGI::Emulate::PSGI => dê enter para instalar o Modulo CGI::Emulate::PSGI. Após terminar, siga o próximo comando.

	5 - Digite o comando => cpanm CGI::Compile => dê enter para instalar o Modulo CGI::Compile. Após terminar, siga o próximo comando.

	6 - Digite o comando => cpanm Plack => dê enter para instalar o Modulo Plack. Após terminar, siga o próximo comando.

	7 - Digite o comando => cpanm JSON => dê enter para instalar o Modulo JSON. Após terminar, siga o próximo comando.

	8 - Digite o comando => cpanm Date::Day => dê enter para instalar o Modulo Date::Day. Após terminar, siga o próximo comando.

	9 - Digite o comando => cpanm Date::Language => dê enter para instalar o Modulo Date::Language. Após terminar, siga o próximo comando.

	10 - Digite o comando => cpanm Path::Class => dê enter para instalar o Modulo Path::Class. Após terminar, siga o próximo comando.

	11 - Digite o comando => cpanm HTML::Entities => dê enter para instalar o Modulo HTML::Entities.

3º passo: Criar estrutura de diretórios para a aplicação

	Como meu HD é particionado, vou criar o minha estrutura de diretórios no drive D:\
	A estrutura de diretórios ficará assim:

	D:\artigo\
	=>	diretório "container"  de nossa aplicação

	D:\artigo\plack_conf\
	=>	diretório onde armazenaremos o arquivo de configuracao de nossa aplicação plack

	D:\artigo\www\

	=>	diretório raiz de nosso aplicativo web que vamos construir

	D:\artigo\www\cgi-bin\
	=>	diretório onde armazenaremos os arquivos Perl de nosso aplicativo web que vamos construir

	D:\artigo\www\gerenciadordedocumentos\
	=>	diretório que servirá para armazenar os files que nosso aplicativo web irá gerenciar

	D:\artigo\www\static\
	=> diretório onde armazenaremos os arquivos estáticos de nossa aplicação web. aqui ficarão os arquivos como html, javascripts e imagens

	D:\artigo\www\static\codebase\
	=> 	diretório onde iremos armazenar os arquivos dos componentes do framework DHTMLX que iremos utilizar em nossa aplicação

	D:\artigo\www\static\javascript\
	=> diretório onde armazenaremos os scripts javascript que iremos construir para nossa aplicação

	D:\artigo\www\static\tinymce\
	=> diretório onde armazenaremos o aplicativo TinyMCE - Editor WYSIWYG

4º passo: Criar o arquivo de configuracao da aplicação plack

Abra seu editor de texto preferido e cole o seguinte código:


		use warnings;
		use strict;

Salve o arquivo com o nome de app.psgi no diretório D:\artigo\plack_conf\

5º passo: Iniciar a aplicação plack na porta 5000 da máquina

	1 - Abra o prompt de comando. Menu Iniciar => Executar => cmd "enter".

	2 - Já no prompt de comando, digite o seguinte comando cd c:\strawberry\perl\bin para "entrarmos" no diretório onde se encontram os binários do Perl

	3 - Digite o seguinte comando: plackup d:\artigo\plack_conf\app.psgi			=> dê enter

	4 - Você verá no terminal escrito: HTTP::Server::PSGI: Accepting connections at http://0:5000/  => a partir deste momento, você já pode acessar sua aplicação
	pelo browser, digitando por exemplo a seguinte url: http://127.0.0.1:5000
	Porém, nossa aplicação web ainda não foi construída, e logo, o plack não tem nada à servir para o browser.

6 passo: Construir o aplicativo web

1 - Baixar e armazenar os arquivos do framework DHTMLX que iremos utilizar na interface RIA.

Em nossa aplicação, iremos utilizar os seguintes componentes da versão 2.5 :

	# DHTMLX layout API
	# DHTMLX tree API
	# DHTMLX windows API
	# DHTMLX folders  API - atual DATAVIEW na lib 3.0 (versao current)
	# DHTMLX toolbar API
	# DHTMLX menu API

	Baixe o arquivo /static/images/equinocio/2011/set/codebase.rar contendo todos os componentes já "instalados" no mesmo diretório.
	Descompacte os arquivos dentro do diretório D:\artigo\www\static\codebase\

Você ainda poderá baixar a suite DHTMLX diretamente no site da fabricante em http://www.dhtmlx.com.br. A suíte vem com cada componente isolado em seus respectivos diretórios

2 - Vamos criar o arquivo principal de nossa interface.

Abra seu editor de texto preferido e crie um novo arquivo do tipo XHTML (contendo doctype, head e body).

Seguindo "as boas práticas", dentro do HEAD do nosso arquivo html iremos disponibilizar os arquivos CSS e Javascript dos componentes DHTMLX

CSSs das LIBS DHTMLX dentro do HEAD

Os arquivos CSS devem sempre anteceder os arquivos Javascript

Javascripts das LIBS DHTMLX dentro do HEAD

	


blog comments powered by Disqus