Tietojen hakeminen muilta sivuilta ja palveluista - Demo 8

RSS-feedin sisällyttäminen omalle sivulle
HTML-dokumentin osan sisällyttäminen omalle sivulle
Google Maps API
Google Charts

Käytetään muiden tekemiä XML-dokumentteja ja WWW-sivuja tiedonlähteenä. Tutustutaan Apachen handlereihin ja toteutetaan niiden avulla oma sivupohja.

RSS-feedin sisällyttäminen omalle sivulle

Aloita uusi Python-ohjelma. Pyritään hakemaan ja parsimaan A List Apart RSS-feedi ja sisällyttämään siitä tärkeimmät osat omalle sivulle.
Käsiteltävä RSS-feed löytyy osoitteesta: http://www.alistapart.com/site/rss. Tutki sivun lähdekoodia niin pääset jyvälle RSS-tiedoston rakenteesta.

Haetaan RSS-dokumentti Python-ohjelmaan käyttäen Pythonin xml.dom.minidom ja urllib-kirjastoja:

from xml.dom.minidom import parse
	doc = parse( urllib.urlopen("tähän sivun osoite"))
	req.write ( doc.toxml() )

Kaivellaan dokumentista yksittäisiä osia. Haetaan ensimmäiseksi yleistietoja:

# dokumentissa tarvittavat nimiavaruudet
	dc_ns = "http://purl.org/dc/elements/1.1/"
	synd_ns = "http://purl.org/rss/1.0/modules/syndication/"
	admin_ns = "http://webns.net/mvcb/"
	rdf_ns = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	content_ns = "http://purl.org/rss/1.0/modules/content/"
	atom_ns = "http://www.w3.org/2005/Atom"

	title = doc.getElementsByTagName("title");
	link = doc.getElementsByTagName("link");

Hae edellä tehtyyn tapaan myös description, dc:rights ja dc:language -elementit ja tulosta kaikkien hakemiesi elementtien tekstisisältö.
Joudut käyttämään nimiavaruuksia seuraavalla tavalla:
```
	rights = doc.getElementsByTagNameNs(dc_ns, "rights")
```
Muuta dokumenttisi mediatyypiksi text/html ja poista edellä tehdyt tulostuslauseet. Kopioi itsellesi pohja.xml-tiedosto. Luo uusi DOM-puu samaan tapaan kuin edellä:
```
	pohja = parse( "pohja.xml")
```
Lisää pohja-dokumenttiin RSS-feedistä kaiveltu pääotsikko ja tulosta koko pohja-dokumentti. Testaa miten seuraavat toimivat:
```
	body = pohja.getElementById("foo");
	req.write ( body.nodeName )
	body = pohja.getElementById("bar");
	req.write ( body.nodeName )
```
On syytä huomata, että ilman dokumenttityyppimäärittelyn lataamista id-attribuuttia ei tunnisteta id:ksi. Periaatteessa xml:id-merkinnän pitäisi toimia mutta minidom on ominaisuuksiltaan puutteellinen. Ilman dokumenttityyppimäärittelyä voi tulla ongelmia myös entiteettien kanssa.

Kokeile vaihtaa pohjadokumentiksi pohja3.xml. Toimiiko getElementById nyt paremmin? Miksi?
Lisää edellä tehtyyn tapaan pääotsikosta linkki RSS-feedistä saatuun osoitteeseen (link). Lisää myös muiden RSS-feedistä kaivamiesi elementtien sisältö XHTML-dokumenttiisi esim. tekstikappaleina.
Hae RSS-feedistä kaikki item-elementit. Käy nämä kaikki läpi silmukassa ja luo XHTML-dokumenttiin linkkilista (ul), jossa yksi lista-alkio (li) muodostuu kunkin item-elementin sisältämästä title- ja link-elementistä. Vinkkejä silmukassa tehtäviin toimenpiteisiin löytyy luentoesimerkistä. Katso myös mallikuva (Eri rss-feedistä mutta sama ulkoasu).

HTML-dokumentin osan sisällyttäminen omalle sivulle

HTML-dokumentin parsiminen tapahtuu Pythonissa aivan samalla tavalla kuin edellä parsittiin RSS-dokumenttia. Luo uusi Python-tiedosto ja hae siihen tiedot tiedeuutisten pääsivulta:
Kokeile validoida sivu. Huomaat, että sivu ei ole täysin validia XHTML:ää, joten sivun lataus XML:nä ei toimisi. Kokeile miten minidom reagoi rikkinäiseen dokumenttiin.
Koska sivu ei ole täysin hyvin muodostettu (well-formed), sivu täytyy joko käsitellä erillisellä html-parserilla (tagsoup...) tai siistiä jotenkin ehjäksi. Siistiminen onnistuu HTML tidyn avulla. Tidya ei löydy suoraan valmiina kirjastona users.jyu.fistä mutta epävalidi sivu voidaan ajaa WWW:ssä sijaitsevan Tidy your HTML -palvelun kautta ja tämän jälkeen voidaan parsia korjattua versiota tähän tapaan:
```
	url = "http://www.jyu.fi/it";
	url = "http://cgi.w3.org/cgi-bin/tidy?docAddr=http%3A%2F%2Fwww.jyu.fi%2Fit&forceXML=on"
```
Poimitaan seuraavaksi tiedeuutisten etusivulta kymmenen uusinta uutista (otsikot ja sisältö). Joudut tutkimaan sivun rakennetta tarkkaan jotta saat juuri halutut asiat poimittua.
Tulosta lopuksi luomasi sivu, jotta voit tarkastella sitä selaimessa.

Google Maps API

Kokeillaan Googlen tarjoamaa karttarajapintaa (V3). Seuraavat tehtävät onnistuvat suoraan Googlen API-dokumentaation ja esimerkkien avulla.

Luo uusi xhtml-dokumentti. Liitä dokumenttisi head-osaan seuraava script-elementti:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Sijoita dokumenttiisi div-elementti karttaa varten:

<div id="map" style="width:100%; height:640px"></div>

Linkitä dokumenttiisi oma javascript-tiedosto ja määrittele window.onloadiin seuraava ohjelmakoodi:

    // Jyväskylän koordinaatit
    var latlng = new google.maps.LatLng(62.24, 25.75);
   // asetetaan kartan asetukset ja keskipisteeksi Jyväskylä
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
  }

Kokeile näkyykö kartta.
Lisää karttaan navigointikontrolleri, zoomausvalinta ja karttatyyppivalinta.
Lisää kartalle marker-kuvake. Kokeile.
Tee lisäämästäsi markerista raahattava (draggable).
Kokeile löytääkö Google käyttämäsi koneen sijainnin. Keskitä kartta sijaintisi mukaan.
Lisää sivulle input-kenttä johon voit syöttää katuosoitteen. Kokeile geokoodata osoite ja keskittää kartta tähän osoitteeseen. Kokeile tehdä myös päinvastainen eli reverse geocoding. Sijoita löydetty osoite input-kenttään. Tee geokoodattavan paikan etsintä markerin avulla lisäämällä markeriin käsittelijä, joka suorittaa reverse geokoodauksen aina kun markeria on siirretty:
```
  google.maps.event.addListener(marker, 'dragend', function() {
    // tähän reverse geokoodaus
  });
```

Tutustu myös Google Static Maps APIn ominaisuuksiin.

Google Charts

Google Charts on rajapinta jota voi käyttää ilman javascriptiä (vrt. static maps API) mutta myös interaktiivisten kaavioiden tekeminen javascriptin avulla on mahdollista.

Lisää karttasivullesi muutama kaavio Google Chartsin avulla:

<img src="http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" alt="testikaavio" />

Lue Getting Started With Charts Overview. Kokeile erilaisia kaaviotyyppejä.

Käyttäjien kommentit

Ajax