Aplicações com tecnologias web

Palestra noCongresso de Software Livre do NE

→ Fac. FIR/Estácio 9 de novembro de 2013

Rildo Pragana

Prehistória: anos 70

Trieste (Ita) - ICTP

Anos 80: Corisco

Microterminais

HandTerm

Adotando o Linux e software livre

● Novembro/Dezembro de 1994● Status Quo: Windows 3.1 (crashes,

erros, lentidão, API obscura,...)● Linux! Luz no fim do túnel. Tudo

documentado, multiuser/task, rápido. Um sonho para o desenvolvedor.

Device drivers: scanner Genius

● Scanner Genius Color page CS. ● Não havia driver para o Linux● Duração do projeto: 1 semana (incl.

engenharia reversa - Bochs) - 1997● Pode ser encontrado no

http://www.ibiblio.org/pub/Linux/apps/graphics/capture/

● Samsung ML-85G● ASIC proprietária da M$● Classificada no linuxprinting.org

como “paper weight” (peso de papel)● Duração do projeto: 8 dias.● 6 artigos publicados no Linux Today

(descrevendo toda a interface e ferramentas usadas para decifrar)

Winprinters

Desdobramentos do driver para winprinters

http://www.boichat.ch/nicolas/lbp660/

Pentax USA

●Impressoras (Pocket Jet 200, II e III)●Scanner (dsmobile)

Dsmobile (scanner)

dsmobile

TinyCobol● http://tiny-cobol.sourceforge.net● Compilador Cobol standard (antes

inexistente como software livre)● “fork”: Open Cobol (Keisuke Nishida),

depois reescrito para gerar C (no lugar de asm86)

Logo Design by James Richardson in the isle of Man

TinyCobol (tools)

Projeto radiola (jukebox)

Linux com transaçoes eletronicas

Starkits

● Scripts e extensões encapsulados em um único arquivo (.kit), portável (Linux/Windows/Mac)

● Executável separado para cada plataforma: tclkit, tclkit.exe

● Diretório virtual. Pode conter scripts, bibliotecas (multiplas versões, uma para cada OS), documentação. Implementado no topo dobanco de dados Metakit.

● Utilitário sdx● sdx qwrap programa.tcl

– Gera um kit a partir do script fornecido● sdx unwrap programa.kit

– Expande o kit como o diretório programa.vfs● sdx wrap programa.kit

– Reempacota o kit usando o diretório programa.vfs– Opcionalmente, podemos usar

-runtime tclkit para produzir um starpack (tudo em um só executável).

Manipulando kits

Tatu web server

Tatu web server 2

Tatu web server 3

Raspberry Pi

rssReader

Programação �social�

Tatu+Bootstrap

https://github.com/rpragana/tatuMin-FIR

Usando Geany para desenvolvimento

Métodos da APImethod outHeader {{status 200} {headers {}} {delayed 0}}

method out {s {bin 0}}

method queryNames {}

method queryData {name {multiple 0} {index -1}}

method reqCmd {}

method cliHeaders {}

--------------------------------------------tatu::addRoute {route cmd {log 1}

{protocols {http https}}}

tatu::log {msg {type "warn"}}

Usado com várias “keys” iguais na query.

(*) Conexões são objetos do Snit; o ::tatu é simplesmente um namespace

Plugins básicos 1

namespace eval myapp {}

proc myapp::service {conn parms} {tatu::log "******** myapp starting..."$conn outHeader 200 {Content-Type text/plain}$conn out "Example output of a simple service"

}

tatu::addRoute "/myapp" myapp::service

error "This is an error on purpose.\nComment to remove error msg."

Plugins básicos 2

proc bookService {conn parms} {tatu::log "*** method=[$conn reqCmd] \

conn=$conn parms=$parms"$conn outHeader 200 {Content-Type text/plain}$conn out "Plain text output from a service\n"$conn out "title= [dict get $parms title]"return

}

tatu::addRoute "/book/:title/author/:author" route1

<div ng-controller="widgetCtrl"><label for="checkbox1">

<input id="checkbox1" type="checkbox" ng-model="visible">Toggle me</label><div show="visible" my-widget="Olá, mundo!"></div>

</div>

app.controller("widgetCtrl", function($scope) { $scope.visible = true;});app.directive("myWidget", function() { return { templateUrl: "partials/widget1.html", link: function(scope, element, attributes) { scope.$watch(attributes.show, function(value) { element.css('display', value ? ' ' : 'none'); }); scope.frase = attributes.myWidget; } };});

html

javascript

2

var app = angular.module("rpApp", ['ui.bootstrap']);

<div ng-app="rpApp" … >

<input type="text" ng-model="frase"></input><ol>

<li>Partial with the widget (using a variable)</li><li>Widget contents:<strong>{{frase}}</strong></li><li>===== end of partial ======</li>

</ol>

partials/widget1.html

multipart/form-dataContent-Type: multipart/form-data; boundary=AaB03x

--AaB03x content-disposition: form-data; name="user" content-type: text/plain;charset=utf-8 Maria dos Santos Lima --AaB03x

Tatu:$conn queryValue formVar fieldVar

Exemplo:$conn queryValue user content_type

REST client (GoogleChrome)

REST client (Firefox)

REST client (standalone)

File upload

File upload (browser)HTML: <div file-upload>File Upload in AngularJS</div>

Jquery.fileTree (javascript)

$('.filetree').fileTree({

root: './',

script: '/filetree'

},function(file){alert(file);});

(*) O elemento .filetree (CSS class) poderá ser uma <div>no <html> da página:<div class="filetree"></div>

(**) A rota /filetree irá disparar o script filetree::filetree.

Exemplo de web servicenamespace eval filetree { }

proc filetree::filetree {conn params} {set dir [$conn queryData dir]tatu::log "filetree dir=$dir"set s {<ul class="jqueryFileTree">}

foreach f [glob -directory $dir *] { if {![file isdirectory $f]} continue append s {<ul><li class="directory collapsed">} append s "<a href="#" rel=\"$f/\">" append s "[file tail $f]</a></li></ul>" } foreach f [glob -directory $dir *] { if {[file isdirectory $f]} continue set ext [string range [file extension $f] 1 end] append s "<ul><li class=\"file">" append s "<a href="\"#\"" rel="\"$f">[file tail $f]</a></li> } append s \"</ul>\"

$conn outHeader 200 {Content-Type text/html}$conn out $s

}

tatu::addRoute "/filetree" filetree::filetree 0 {http}

Tatu plugin

Tatu plugin 2

Perguntas

? ??

??

http://pragana.net Adventures in Linux Programming

@rpragana