Aplicações com Tecnologias Web

469 views

Published on

Como usar o Tatu (web server) e tecnologias web (html5, css3 e javascript) para criar aplicações completas, usando o navegador como UI, e o javascript para "business logic". Os primeiros 17 slides mostram uma espécie de biogrtafia minha, portanto comece pulando estes, caso não lhe interesse. O restante dos 43 slides é a essencia do que queremos mostrar.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
469
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aplicações com Tecnologias Web

  1. 1. Aplicações com tecnologias web Palestra no Congresso de Software Livre do NE → Fac. FIR/Estácio 9 de novembro de 2013 Rildo Pragana
  2. 2. Prehistória: anos 70
  3. 3. Trieste (Ita) - ICTP
  4. 4. Anos 80: Corisco
  5. 5. Microterminais
  6. 6. HandTerm
  7. 7. 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.
  8. 8. 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/
  9. 9. Winprinters ● 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)
  10. 10. Desdobramentos do driver para winprinters http://www.boichat.ch/nicolas/lbp660/
  11. 11. Pentax USA Impressoras (Pocket Jet 200, II e III) ●Scanner (dsmobile) ●
  12. 12. Dsmobile (scanner)
  13. 13. dsmobile
  14. 14. 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
  15. 15. TinyCobol (tools)
  16. 16. Projeto radiola (jukebox)
  17. 17. Linux com transaçoes eletronicas
  18. 18. 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 do banco de dados Metakit.
  19. 19. Manipulando kits ● Utilitário sdx ● sdx qwrap programa.tcl – ● sdx unwrap programa.kit – ● Gera um kit a partir do script fornecido 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).
  20. 20. Tatu web server
  21. 21. Tatu web server 2
  22. 22. Tatu web server 3
  23. 23. Raspberry Pi
  24. 24. rssReader
  25. 25. Programação ”social“
  26. 26. Tatu+Bootstrap https://github.com/rpragana/tatuMin-FIR
  27. 27. Usando Geany para desenvolvimento
  28. 28. Métodos da API method 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
  29. 29. 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."
  30. 30. 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 servicen" $conn out "title= [dict get $parms title]" return } tatu::addRoute "/book/:title/author/:author" route1
  31. 31. html <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; }); javascript 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; } }; });
  32. 32. 2 <div ng-app="rpApp" … > var app = angular.module("rpApp", ['ui.bootstrap']); partials/widget1.html <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>
  33. 33. multipart/form-data Content-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
  34. 34. REST client (GoogleChrome)
  35. 35. REST client (Firefox)
  36. 36. REST client (standalone)
  37. 37. File upload
  38. 38. File upload (browser) HTML: <div file-upload>File Upload in AngularJS</div>
  39. 39. 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.
  40. 40. Exemplo de web service namespace 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}
  41. 41. Tatu plugin
  42. 42. Tatu plugin 2
  43. 43. Perguntas ? ? ? ? ? http://pragana.net Adventures in Linux Programming @rpragana

×