70 www.linuxmagazine.com.br

Código Da VinciDesenvolvedores que trabalham com linguagens de programação gráficas apontam e clicam para criar software a partir de módulos pré-fabricados. Neste artigo, vamos analisar cinco ambientes livres para o desenvolvimento de programação visual.por Tim Schürmann

Em ambientes de desenvol-vimento gráfico, os pro-gramadores simplesmente

usam o mouse para desenhar um fluxograma; em seguida, o ambiente de desenvolvimento o traduz em um aplicativo final. Os desenvolvedores não precisam aprender comandos complexos e estes comandos não produzem erros de sintaxe nem sofrem bu-ffer overflows. O ideal é que o ambiente de desenvolvimento passe pelo programa, destacan-do visualmente o componente ativo no momento e facilitando

significativamente o processo de solução de problemas.

Os primeiros ambientes de de-senvolvimento gráfico surgiram na década de 1960, mas apenas as ferramentas de editores de guia de interface de usuário ou Rapid Development (RAD) são de uso comum. Os desenvolvedores as utilizam para criar interfaces de usuário em conjunto para seus aplicativos (por exemplo, Glade [1] e Qt Designer [2]); no entan-to, na realidade, apenas pedaços de código laboriosamente digi-tados dão vida aos elementos da

interface gráfica. As ferramentas de design são igualmente restri-tas, especialmente ferramentas para Unified Modeling Language [3]. Mais uma vez, elas geram um framework de código que o programador preenche com conteúdo no teclado.

Se observar bem, o usuário irá encontrar um número surpreen-dentemente grande de lingua-gens visuais de programação (VPLS), às quais seus criadores geralmente incluem um ambiente de desenvolvimento adequado. Muitas vezes, o ambiente de de-senvolvimento é projetado com um campo específico de aplica-ção em mente.

Etoys and Co.O Etoys [4] é um ambiente de desenvolvimento concebido para ajudar as crianças a desempenhar tarefas como escrever histórias interativas em sala de aula ou programar as órbitas dos plane-tas. Dessa forma, a Etoys procura tanto tornar a programação pala-tável aos alunos como fornecer--lhes uma forma divertida de aprender matemática ao expli-car a ciência de forma intuitiva e ajudar a melhorar as competên-cias linguísticas. O software foi criado pela Apple em 1996 como Squeak e logo passou para a Dis‑ney Imagineering Research onde tornou-se Etoys. Em seguida, pas-sou para a Viewpoints Research, que criou a Squeakland Founda‑tion, atualmente trabalhando na expansão da Etoys. O projeto, em código aberto, é suportado financeiramente por diversas en-tidades, incluindo a Intel e a HP. O Sugar OS, sistema operacional do hardware utilizado no proje-to One Laptop per Child (OLPC), também inclui a Etoys.

Se o usuário não conseguir encontrar o ambiente de de-

Programação

71Linux Magazine #115 | Outubro de 2014

senvolvimento no repositório da distribuição, pode pegar uma versão do site oficial do projeto, mas apenas para sistemas de 32 bits. Basta extrair o arquivo ZIP correspondente e, em se-guida, executar o script etoys.sh. Algumas partes do Etoys estão sujeitas às licenças MIT e Apache. Depois de iniciar um novo projeto, o desenvolvedor primeiro desenha objetos bi-dimensionais pequenos, como carros, estradas ou casas com as ferramentas de desenho embu-tidas e, em seguida, as organiza em uma tela branca para criar uma pequena cena. Se o usuá-rio clicar com o botão direito em um objeto, os ícones aparecem com um destaque em torno do objeto (figura 1) que pode ser usa-do para girar e redimensionar o objeto e abrir o Viewer (o ícone do olho). Uma paleta de funções abre-se com itens relacionados ao objeto, que o usuário pode então arrastar e soltar para com-pilar um script. Se uma função requer parâmetros, tais como o número de graus de rotação, basta configurá-lo clicando na imagem. Alternativamente, é possível criar variáveis.

A Etoys ainda possui gerencia-mento de versão rudimentar. O ambiente de desenvolvimento é baseado na implementação Small‑talk Squeak, mas os fundamen-tos de orientação a objetos são escondidos do usuário; a Etoys revela apenas o código fonte Smalltalk correspondente na requisição. Os desenvolvedores fornecem uma extensa documen-tação sob a forma de um arquivo PDF e uma wiki no site. Mesmo com numerosos exemplos e ví-deos instrutivos (screencasts), a curva de aprendizado pode ser bastante íngreme, e usar o Etoys é trabalhoso e pouco in-

tuitivo. Alternativas relacionadas para iniciantes são o Scratch [5] ou o Snap [6]. Ambos fornecem funções sob a forma de blocos coloridos (figura 2). Os encaixes de inserção e aninhamento faci-litam a junção de um programa e a codificação em cores ajuda a destacar componentes indivi-duais de código (por exemplo, os loops são representados pela cor amarela escura).

Scratch v2.0 e Snap, no en-tanto, são concebidos como serviços web: o Snap pode ser iniciado apenas através da sua homepage, e a versão offline do Scratch v2.0 requer o am-biente de tempo de execução Adobe Air, o que é muito difícil de executar no Linux. O Scratch versão 1.4, no entanto, está dis-ponível como um programa de desktop totalmente funcional.

Figura 1 O script mostrado aqui conduz o pequeno carro vermelho em toda a tela. A estrela pode ser manipulada através dos ícones exibidos na tela.

Figura 2 Programas snap (chamados de scripts) são compostos de blocos multicoloridos.

72 www.linuxmagazine.com.br

O ambiente de desenvolvimen-to Alice [7] é voltado mais para os professores que querem in-centivar alunos na programação 3D (figura 3). O foco aqui é mais na orientação a objetos. A atu-al versão 3.1 é baseada em Java e raramente usa um assistente para a instalação. O assistente faz o download de quase 1,2 GB de dados a partir da Internet, in-

cluindo objetos 3D, como pessoas e objetos domésticos do jogo de computador The Sims 2. Os programadores que trabalham com Alice só podem usar esses objetos para fins não comerciais ou acadêmicos, contudo. O Alice é liberado sob uma licença pró-pria [8], que permite o uso livre.

Da mesma forma como no Etoys, os fluxogramas conclu-

ídos são muito semelhantes a programas simples, imperativos, com uma caixa pintada em torno de cada declaração. No pedido, Alice exibe o código Java; neste caso, as funções no fluxograma possuem a lista de parâmetros entre parênteses. Essa visuali-zação é útil se o usuário desejar que Alice forneça suporte de programação Java para inician-tes. A função de captura de tela embutida registra animações completas; como bônus, o usuá-rio possui um link direto para o YouTube. A homepage do Alice possui uma variedade de tutoriais e exemplos, e mesmo amostras de materiais de ensino.

BlocklyÀ primeira vista, o Blockly [9], desenvolvido pelo Google e lan-çado sob a licença Apache, se parece com o Snap ou Scratch. No entanto, é possível integrar-mos o editor de código visual aos próprios aplicativos web para ajudar os desenvolvedores a criar macros, por exemplo. O Blockly é, portanto, mais do que um framework, e o editor de có-digo fornecido contém apenas um exemplo de um aplicativo Blockly. Em todos os aplicativos Blockly, o desenvolvedor usa os building blocks da paleta do lado esquerdo para montar o programa à direita. As diferen-tes estruturas de controle usam cores diferentes (por exemplo, os loops são verdes). Podemos agrupar várias instruções em funções e criar variáveis. Dito isso, o Blockly só cria progra-mas imperativos.

Com a ajuda da linguagem de programação visual, os progra-madores podem tanto montar seus programas como traduzi--los automaticamente em códi-go Python, DART e JavaScript, Figura 4 Código Blockly traduzido para outras linguagens.

Figura 3 Os jovens desenvolvedores do Alice podem fazer um personagem 3D (por exemplo, um lobo) correr através de uma cena.

73Linux Magazine #115 | Outubro de 2014

ou convertê-los em XML em se-gundo plano. O editor exibe o código gerado diretamente nas guias correspondentes (figura 4). Por padrão, o Blockly só entende poucos blocos com funções bá-sicas importantes. Codificadores usam um editor independente, conhecido como Block Factory, para criar módulos próprios. No lado esquerdo, o desenvolvedor define a aparência do bloco, ao passo que o editor de texto à direita é feito para lidar com a lógica. Mas é preciso escrever isso em um JavaScript normal.

A documentação para o Blo-ckly é bastante rudimentar e limitada a uma wiki. Amostras fornecidas pelos usuários for-necem mais recursos para come-çar. Por exemplo, elas mostram como integrar o Blockly à um aplicativo web (figura 5). Depois de verificar o atual código fonte do Blockly no repositório Sub-version, o usuário encontrará os exemplos nos subdiretórios de blockly/apps/.

DrakonA homepage do Drakon [10] causa a impressão de poder desenhar um aplicativo sob a forma de um fluxograma, e então o editor Drakon exporta o plano acabado como código fonte em Java, C, C++, Python e muitas outras lin-guagens. No entanto, o Drakon é apenas uma linguagem de es-pecificação visual que permite aos desenvolvedores esboçar seus fluxogramas. Desenhado por funcionários do programa espacial russo, ele se destinava a ajudar no projeto de sistemas de controle de mísseis. Para ajudá-lo a desenhar os diagra-mas, os fabricantes fornecem o editor Drakon, que também gera o código fonte. No entan-to, isso só funciona se o editor

encontrar as devidas instruções na linguagem de programação desejada nos elementos do dia-grama (figura 6).

O Drakon, portanto, não é es-tritamente uma linguagem de programação gráfica, e o editor é extremamente complicado de operar. Desenvolvido em Tcl/Tk, esse utilitário não suporta a função snap: se o usuário mo-ver um item, deverá conectar todas as linhas manualmente. A

documentação está disponível apenas para Drakon; os usuá-rios são forçados a explorar o editor por conta própria, mas o programa, pelo menos, é de domínio público.

TersusCom as ferramentas apresentadas anteriormente, os desenvolve-dores simplesmente apontam e clicam para compor um fluxogra-ma de comandos individuais; até

Figura 5 Uma função criada como um gráfico no Blockly é bloqueada à direita.

Figura 6 O editor Drakon só gera código fonte se o desenvolvedor tiver depositado as instruções relevantes nos elementos do diagrama.

74 www.linuxmagazine.com.br

mesmo a programação orientada a objetos em Alice, basicamente, usava um estilo imperativo. O Tersus [11], por outro lado, con-centra-se no fluxo de dados. No ambiente de desenvolvimento baseado em Eclipse, uma paleta à direita oferece funções para a manipulação de números, tex-to ou listas. Se o usuário aplicar

uma função na tela, ela aparece como uma caixa com entradas e saídas. A caixa para a multipli-cação, por exemplo, possui duas entradas (para os dois números a serem multiplicados) e uma saída para o resultado. Quando conectamos essas entradas e saídas para as entradas e aídas de outras funções, o resultado é

um diagrama de fluxo de dados, como mostrado na figura 7, e é possível aninhar esses diagramas para montar cálculos complexos de unidades menores.

O Tersus converte o programa finalizado em um aplicativo web e o apresenta com seu próprio servidor Tersus. As funções e operações oferecidas na paleta cobrem, sobretudo, as necessi-dades dos desenvolvedores web. Entre outras coisas, fornece links para bancos de dados e funções de autenticação e geração de cha-ves. Entradas e saídas são mani-puladas por formas (views) cujas partes são novamente compostas por componentes do tipo apontar e clicar. O princípio de aninha-mento (nesting) também se apli-ca aqui: se o usuário quiser dois campos de entrada para aparecer ao lado de uma página, primeiro precisa localizar um elemento de uma linha no formulário e, em seguida, deverá localizar os dois campos na linha. O Tersus dese-nha os campos de entrada como retângulos simples. Se o usuário quiser ver os resultados, precisa completar e desenvolver todo o programa. O Tersus é liberado sob a GPLv2, mas seu fornecedor, a Tersus Software Ltd., também oferece uma versão comercial com links para bancos de dados comerciais como Oracle e supor-te aprimorado para arquivos do Microsoft Office.

Diagramas como um benefícioO Tersus usa ferramentas princi-palmente para o processamento de sinais, bem como fluxogramas de dados para programas de música e multimídia. Por exemplo, se usarmos o GNU Radio Compa-nion [12], podemos arrastar os componentes de um gerador de

Figura 7 O Tersus trabalha com diagramas de fluxo de dados. Este calcula o fatorial do número disposto do lado esquerdo da tela.

Figura 8 Esta estrutura no GNU Radio Companion simula um tom de discagem.

75Linux Magazine #115 | Outubro de 2014

Figura 9 O Lava PE exibe as classes, métodos e propriedades em uma hierarquia.

Figura 10 O Lava usa espaços reservados para assegurar declarações sintaticamen-te corretas.

onda senoidal de uma paleta para a área de desenho e ligar a saída com a entrada do componente de saída de áudio, que também pode ser arrastado a partir da paleta. Podemos então mudar e converter sinais (figura 8), utili-zando outros blocos.

Com a ajuda da ferramenta Pure Data (PD) [13], os usuários podem usar essa abordagem para executar sons através de vários estágios de processamento, bem como processar vídeo e dados multimídia. Os artistas gráficos também usam diagramas de flu-xo de dados gráficos [14] no pro-grama Blender 3D para processar posteriormente as imagens ren-derizadas. Para isso, eles ligam os nós de composição.

LavaA linguagem de programação gráfica Lava [15] foi criada em 2001 no Fraunhofer Institute [16] para a tecnologia da informação segura; agora, outros desenvol-vedores continuam mantendo o projeto. Semelhante ao Drakon, a linguagem de programação é o Lava, enquanto que o ambien-te de desenvolvimento tem o nome de Lava Programming En‑vironment (ou Lava PE). O código fonte completo está disponível sob a GPLv2. O Lava orientado a objetos utiliza uma abordagem um pouco diferente do que as linguagens de programação grá-fica mencionadas anteriormente: para começar, podemos usar um assistente para criar as classes que precisamos no programa. O Lava PE as exibe em uma hierarquia (figura 9). As classes relacionadas podem ser combinadas para criar pacotes, como no Java.

Para implementar os métodos das classes, é preciso mudar para o editor de texto. No editor, não é preciso digitar o código fon-

76 www.linuxmagazine.com.br

Gostou do artigo?Queremos ouvir sua opinião. Fale conosco em: cartas@linuxmagazine.com.br

Este artigo no nosso site: http://lnm.com.br/article/9662

Mais informações

[1] Glade: https://glade.gnome.org

[2] Qt Designer: http://qt-project.org/doc/qt-5/qtdesigner-manual.html

[3] UML: http://www.omg.org/spec/UML/

[4] Etoys: http://www.squeakland.org

[5] Scratch: http://scratch.mit.edu

[6] Snap: http://snap.berkeley.edu

[7] Alice: http://www.alice.org

[8] Alice EULA: http://alice3.pbworks.com/w/page/28830524/Alice%203%20EULA

[9] Blockly: https://code.google.com/p/blockly/

[10] Drakon: http://drakon-editor.sourceforge.net

[11] Tersus: http://www.tersus.com

[12] GNU Radion Companion: http://gnuradio.org/redmine/projects/gnuradio/wiki/GNURadioCompanion

[13] Pure Data: http://puredata.info [

14] Blender: http://www.blender.org

[15] Lava PE: http://lavape.sourceforge.net

[16] Fraunhofer Institute: http://www.fraunhofer.de/en.html

[17] Documentação do Lava PE: http://lavape.sourceforge.net/doc/index.htm

te manualmente; em vez disso, podemos apontar e clicar para compor as instruções de várias paletas. O Lava PE garante auto-maticamente que apenas as de-clarações sintaticamente corretas sejam produzidas. Por exemplo, se usarmos a paleta com as estru-turas de controle para criar um loop foreach, um curinga aparece no lugar da condição de término e no corpo do loop (figura 10).

Podemos, então, substituir esses marcadores apontando e clicando novamente. Dependendo do espaço reservado selecionado, as paletas e combos só oferecem declarações, variáveis e objetos que podem ser usados na situ-ação atual. O próprio ambiente de desenvolvimento é um pouco complicado de usar. A miríade de símbolos sem sentido é um exagero e, por sua vez, dificul-ta o trabalho e leva à perda de tempo. No lado positivo, temos o benefício de programação orien-tada a objetos, o que significa que podemos derivar classes e usar um conceito de signal/slot semelhante ao do Qt. Além dis-so, o Lava PE oferece funções nativas para refatoração.

O programa acabado é execu-tado por um intérprete chamado Lava. O Lava PE fornece um depu-rador para definir breakpoints. No momento do fechamento desta edição, a atual versão 0.9.4 só es-tava disponível como código fonte e requeria o Qt 5.1.1, que por sua vez só é incluído nas distribuições mais recentes. A documentação é baseada em exemplos, e não é apenas incompleta, mas também bem escondida no site [17].

ConclusãoAté o momento, linguagens de programação gráficas possuem recursos bem restritos. Como em um jogo de Lego, eles pos-

suem partes fixas com funções limitadas e predeterminadas. Consequentemente, as ferra-mentas e as suas linguagens só são adequadas para aplicações muito específicas. O Etoys e o Ali-ce facilitam a entrada no mundo da programação 3D, enquanto o Blockly serve como uma lingua-gem macro para aplicativos web próprios. Os diagramas de fluxo de dados do Tersus são úteis se o aplicativo da web que se deseja criar primeiramente processar os dados – tais como gerenciamento de endereços ou processamento de sinais e imagens.

Os limites das linguagens de programação gráfica são cla-ramente mostrados pelo Lava: embora a linguagem seja flexível e poderosa em um nível seme-

lhante ao Java, os desenvolvedo-res são tediosamente forçados a apontar e clicar para compor instruções. O Drakon mostra que nem tudo que é anunciado como uma linguagem de programação visual, na verdade, precisa ser uma linguagem de programa-ção visual. Além do Drakon e do Lava interpretado, os ambientes de desenvolvimento não produ-zem programas acabados. Se o usuário deseja iniciar um jogo que foi programado no Alice, precisa se registrar para baixar o ambiente de desenvolvimen-to. Atualmente, linguagens de programação visuais podem ocupar com sucesso um nicho, mas os desenvolvedores podem esperar um bom tempo para sua grande chance. n