Mashups: Criando Valor na Web 2.0 (BandTec)

Mashups: CriandoValor na Web 2.0

Carlos Duarte do [email protected]

@chesterbr http://chester.blog.br

O que vamos ver

● O que é um Mashup? (e por que isso me interessa?)

● Exemplos● Tecnologia● Prática (exercício(s?) - aprenda fazendo!)

Palestrante(quem é esse cara?)

● Bacharel em Matemática Aplicada e Computacional (IME/USP)

● Desenvolvedor de Software (20 anos) ● Entusiasta do Software Livre● Gerente de Produto no Apontador● Twitter: @chesterbr● Mais informações: http://chester.me

http://chester.me/

O que é Mashup?

Mashup

“uma composição incomum ou inovadora de conteúdo (tipicamente vindo de origens não-relacionadas)

feita para consumo humano”

O que é Mashup?

O que é Mashup?

O que é Mashup?

O que é Mashup?

Mashup



Mashup



Mashups: A nova raça de aplicações WebDuane Merril, 2006/2009

Web 2.0

Web 2.0

Web 2.0● Web como plataforma● Sempre em beta● Múltiplas plataformas● Experiência rica● Cavalgando a inteligência coletiva

O'Reilly, 2005

Mashup



Mashups: A nova raça de aplicações WebDuane Merril, 2006/2009

Tipos de Mashup

● Mapas ● Fotos e Vídeos● Busca e compras● Notícias

Exemplos

Flickr + Google Maps = http://flickrvision.com

cruzalinhas.appspot.com

Lojas Online => http://buscape.com.br

Sites de Notícias => http://news.google.com.br

Tecnologia

Tecnologia

● Arquitetura (APIs/sites/browsers) ● AJAX● REST● Crawling / Scraping● Web Semântica/ RDF● RSS e ATOM

Arquitetura

● Provedores de Conteúdo/APIs ● Site de Mashup● Navegador (browser)

(os atores)

APIsApplication Programming Interface

APIs● Funcionalidades (métodos, funções)● Protocolos (como eu chamo?)● Autenticação (quem pode chamar?)

Uma API é um contrato!

APIs no Brasil

Fonte:

AJAX

AJAX

AJAX

Asynchronous JavaScript + XML

AJAX


Chamadas em segundo plano(sem o “reload)

AJAX


Lógica de apresentação e navegação no browser

AJAX


...ou não(JSON)

AJAX● Navegador chama HTML principal● Usuário clica/interage● Cada interação gera uma chamada ao

servidor (em background)● Respostas do servidor acionam eventos

(JavaScript), que redesenham partes daPágina (usando DOM)

AJAXImplementações possíveis:‒Tag <iframe>‒Objeto XMLHttpRequest

Conselho de amigo:jQuery (http://jquery.com)

AJAX com jQuery<script type=”text/javascript”> $.getJSON("http://api.flickr.com/services ↵ /feeds/photos_public.gne?tags= ↵ cat&tagmode=any&format=json& ↵ jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });</script>

REST

● Representational State Transfer ● Usa apenas HTTP (RFC 2616)● Entidades são caminhos, ex.:

/clientes/empresaX/pedidos/32● Verbos HTTP: GET, PUT, DELETE...

Crawling / Scraping

● Extrair dados “na marra” ● Último recurso (sujeito a quebra e problemas legais)● Cuidados: não sobrecarregar o servidor, obedecer ROBOTS.TXT● Sugestão: XPath

XPath<html> <head>...</head> <body> <div>nome da pagina</div> <div>campo1</div> <p>campo2</p> ... <p id=”xyz”>campo3</p> </body></html>

campo1: /html/body/div[2]campo2: /html/body/pcampo3: //p[@id=”xyz”]

XPath<html> <head>...</head> <body> <div>nome da pagina</div> <div>campo1</div> <p>campo2</p> ... <p id=”xyz”>campo3</p> </body></html>

campo1: /html/body/div[2]campo2: /html/body/pcampo3: //p[@id=”xyz”]

Web Semântica/RDF

● Grosso modo: “descrever o significado do conteúdo”● RDF (Resource Description Framework) é um meta-formato● Pode ser embutido no próprio HTML

● Dica: pesquise “microformats”

RDF (FOAF) embutido<html> <head>

</head> <body> <p >Oi, eu sou o

Carlos Nascimento . <img src="chester.jpg" /> </p> </body></html>

RDF (FOAF) embutido<html> <head> <link rel="schema.foaf" href="http://xmlns.com/foaf/0.1/" /> <link href="#chester" rev="foaf-homepage foaf-made" rel="foaf-maker" /> </head> <body> <p id=”chester”>Oi, eu sou o <span class="foaf-name"><span class="foaf-firstName">Carlos</span> <span class="foaf-surname">Nascimento</span></span>. <img src="chester.jpg" class="foaf-depiction" /> </p> </body></html>

RSS● Sigla com vários significados (dica: Really Simple Sindication)● Descreve / agrega conteúdo (web syndication) em uma timeline● Publish / Subscribe● É só um XML! (1.0 era RDF)

KML● Keyhole Markup Language (Keyhole Earth Viewer ⇒ Google Earth)● Descreve pontos geográficos● É um XML● Extensível e tem subsets, ex.: ARML (Augmented Reality ML)

KML<kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <Placemark> <name>New York City</name> <description>New York City</description> <Point> <coordinates> -74.006393,40.714172,0 </coordinates> </Point> </Placemark> </Document></kml>

Prática

Exercício: Yahoo! Pipes

● Y! Pipes: programação visual http://pipes.yahoo.com

● Idéia: misturar dois jornais diferentes: http://estadao.com.br/ http://folha.com.br/

Exercício: Mashup JavaScript

● Mapear museus em São Paulo ● Museus: Apontador● Mapas: Google Maps

Exercício: Mashup JavaScript● Cadastre-se: http://www.apontador.com.br

● Crie o aplicativo, anote o key e o secret ● Aprenda sobre a API Apontador: http://api.apontador.com.br

● Faça uma busca no navegador: http://api.apontador.com.br/v1/ search/places/byaddress ?state=sp&city=Sao+Paulo&term=museu

Exercício: Mashup JavaScript● Exemplo da API do Google Maps: http://aponta.me/1yr

● Crie o mapa.html copiando e colando o exemplo● Mude o local e o zoom: var latlng = new google.maps.LatLng(

-23.57775, -46.64326); var myOptions = { zoom: 15,


+

O ideal seria criar uma página no servidor (museus.php), ex.: <?php header("Content-Type: application/vnd.google- earth.kml+xml") echo file_get_contents( “http://$key:$secret@ api.apontador.com.br/v1/search/places...”)

(e na real, usaríamos libcurl no lugar de file_get_contents)


+

mas vamos ganhar tempo e chamar uma página já pronta: var layer = new google.maps.KmlLayer( "http://chester.blog.br/museus.php", {preserveViewport: true}); layer.setMap(map);

Obrigado!

[email protected]@chesterbr http://chester.blog.br

Links Úteis

Textos● What is Web 2.0, Tim O'Reily: http://aponta.me/2F9q● Mashups: The new breed of Web app: http://aponta.me/11tYX

Documentação● Apontador API: http://api.apontador.com.br● Google Maps API “Hello World”: http://aponta.me/4Dbf

Mídia● Vídeo do Girl Talk: http://aponta.me/AA8 ● Grey Album (DJ Danger Mouse): http://aponta.me/1CV

http://aponta.me/2F9q

http://aponta.me/11tYX

http://api.apontador.com.br/

http://aponta.me/4Dbf

http://aponta.me/AA8

http://aponta.me/1CV

Technology

Mashups: Criando Valor na Web 2.0 (BandTec)