Ok, no to postanowilem napisac maly tutorial, jak stworzyc wlasny szalbon dla SPB Insight
Bedzie to na przykladzie szablonu
Sport | onet.pl. Newsy beda sciagane z
tej strony.
Generalnie chodzi o analize kodu strony, takze znajomosc (nawet niewielka) HTMLa i CSSa bedzie bardzo pomocna.
<?xml version="1.0"?>
<template version="1.0">
<channel>
<name>Sport | onet.pl</name>
<url>http://sport.onet.pl/0,0,wiadomosci.html</url>
</channel>
Poczatek naszego szablonu - nie zmieniamy nic oprocz oczywiscie nazwy (pomiedzy tagami <name>) i adresu stronki na ktorej mieszcza sie interesujace nas newsy (pomiedzy tagami <url>).
<parse_channel> <![CDATA[
var d = new Document(channel.url, "iso-8859-2");
var tags = d.getElementsByAttr("a", "class","a2b");
for (i in tags) {
var href = tags[i].getAttribute("href");
var article = new Article();
article.id = href;
article.url = href;
article.header = tags[i].innerText;
channel.articles.push( article );
}
]]> </parse_channel>
Ta czesc odpowiada za "wyizolowanie" naszych newsow z calej strony. Dla kazdego takiego newsa bedziemy tworzyc obiekt klasy Article (czyli pojedynczy artykul).
Na poczatku tworzymy sobie dokument
d:
var d = new Document(channel.url, "iso-8859-2");W tym wierszu praktycznie nie zmieniamy nic oprocz kodowania (tutaj: iso-9959-2). Wiekszosc stron jest kodowana wlasnie w ten sposob, czasem moze byc kodowanie utf-8. Rodzaj kodowania odczytujemy oczywiscie z kodu zrodlowego strony.
var tags = d.getElementsByAttr("a", "class","a2b");Tutaj tworzymy sobie tablice
tags, w ktorej trzymamy wszystkie tagi <a>, klasy "a2b" czyli w kodzie strony musi byc cos takiego:
<a href="jakistamlink.pl" class="a2b">opislinku</a>Teraz zajmiemy sie wybraniem atrybutow dla naszego artykulu, odpowiadac za to bedzie nastepujaca petla:
for (i in tags) {
var href = tags[i].getAttribute("href");
var article = new Article();
article.id = href;
article.url = href;
article.header = tags[i].innerText;
channel.articles.push( article );
}
Generalnie kazdemu, kto choc troche mial stycznosc z programowaniem bedzie bardzo latwo zrozumiec o co tu chodzi. Ale postaram sie wyjasnic dla tych, ktorzy nie sa zbyt mocni w tym temacie
Otoz
tags jest to i-ty element naszej tablicy wszystkich linkow (tagow <a>). Zeby stworzyc artykul musimy koniecznie okreslic przynajmniej jego 3 parametry: id (numer identyfikacyjny artykulu - o tym wspomne pozniej), url (czyli adres(link) do danego aqrtykulu/newsa) oraz header (czyli opis artykulu/newsa jaki bedzie widoczny liscie artykulow po wybraniu kanalu). Linijka:
var href = tags[i].getAttribute("href"); sluzy do wyciagniecia adresu (pobrania do zmiennej o nazwie href wartosci parametru
href tagu <a>). Potem juz tylko przypisujemy konkretnym parametrom artykulu wyciagnieta wartosc
href - id artykulu takze bedzie mialo wartosc zmiennej
href, a to dlatego iz program w czasie aktualizacji sprawdza czy artykul o danym id nie zostal juz pobrany wczesniej. Kazdy artykul musi miec unikatowe id, a kazdy link do osobnego artykulu jest wlasnie inny. Naglowek (header) artykulu ustalamy poprzez:
article.header = tags[i].innerText;Jest to oczywiscie wyciagniecie textu pomiedzy tagami <a> (opis linka).
Nastepnie zostaje nam juz tylko dopisac artykul do listy poprzez:
channel.articles.push( article );Na tym konczy sie pierwsza czesc naszej pracy. Pozostala nam teraz analiza kodu pojedynczego artukulu/newsa.
<parse_article> <![CDATA[
var d = new Document(article.url, "iso-8859-2");
var date = d.getElementsByAttr("div", "class", "a09 sz")[0].innerText;
var wstep = d.getElementsByAttr("div", "class", "a2b")[0].innerText;
var tresc = d.getElementsByAttr("div", "class","a2")[0].innerHTML;
if (d.getElementsByAttr("img", "class", "mb2")[0]) {
var nodeImage = d.getElementsByAttr("img", "class", "mb2")[0];
var imageSrc = nodeImage.getAttribute("src");
var imageDescr = d.getElementsByAttr("td", "class", "a0")[0].innerText;
var imageTag = "<center><br><br><img src=" + imageSrc + "><br>" + imageDescr + "</center><br>";
article.body = "";
article.body += "<i><small>" + date + "</small></i><br><br><b>" + wstep + "</b>" + imageTag + tresc;
}
else {
article.body = "";
article.body += "<i><small>" + date + "</small></i><br><br><b>" + wstep + "</b><br><br>" + tresc;
}
]]> </parse_article>
</template>
Podobnie jak poprzednio tworzymy sobie zmienna d jako nowy dokument z odpowiednim kodowaniem. I teraz zaczyna sie juz wlasciwie dowolnosc. Otoz kazda strona jest inna i nie ma idealnego przepisu jak zbudowac ta czesc. Musimy ponownie zaglebic sie w kod strony. W tym przypadku mozna zauwazyc, ze niektore newsy maja zdjecia a niektore nie, za to kazdy ma jakby date i wstep (ktory na stronie jest pogrubiony) oraz oczywiscie sama tresc newsa. Mozna zauwazyc, ze text z data jest zawarty pomiedzy tagami <div class="a09 sz"></div>. Wyciagamy wiec text spomiedzy tych tagow do zmiennej
date w ten oto sposob (podobnie jak wyciagalismy wartosc href z <a> w pierwszej czesci):
var date = d.getElementsByAttr("div", "class", "a09 sz")[0].innerText;W ten sam sposob radzimy sobie z wstepem, jak rowniez z sama juz trescia, jednak w tym przypadku nie pobieramy tylko czystego tekstu, ale caly kod HTML:
var tresc = d.getElementsByAttr("div", "class","a2")[0].innerHTML;a to dlatego aby widoczne byly np wytluszczenia druku, podkreslenia itp. (realizowane przez html wlasnie). Jak juz wspomnialem nie wszystkie newsy maja zdjecia, wiec musimy to sprawdzic:
if (d.getElementsByAttr("img", "class", "mb2")[0]) {
var nodeImage = d.getElementsByAttr("img", "class", "mb2")[0];
var imageSrc = nodeImage.getAttribute("src");
var imageDescr = d.getElementsByAttr("td", "class", "a0")[0].innerText;
var imageTag = "<center><br><br><img src=" + imageSrc + "><br>" + imageDescr + "</center><br>";
article.body = "";
article.body += "<i><small>" + date + "</small></i><br><br><b>" + wstep + "</b>" + imageTag + tresc;
}
Zastosowalismy instrukcje warunkowa
if i jezeli istnieje obiekt <img class="mb2"> to wykonamy wszystkie instrukcje zawarte pomiedzy
{ i
}. Natomiast jesli zdjecia nie ma to wykona sie:
else {
article.body = "";
article.body += "<i><small>" + date + "</small></i><br><br><b>" + wstep + "</b><br><br>" + tresc;
}
W powyzszych linijkach zajmujemy sie takze formatowaniem naszego artukulu, czyli jak ma on wygladac na ekranie naszego PDA.
body jest to parametr naszego artykulu odpowiadajacy co bedzie wyswietlane. Do niego wrzucamy po kolei wszystkie nasze zmienne (date, wstep, tresc) odpowiednio wszystko formatujac (uzywajac standardowego formatowania html).
Nie zawsze jednak takie dzialania sa potrzebne (stosowanie warunkow
if), poniewaz czesto mozna pobrac cala tresc newsa jako
tresc i wtedy w pobranym kodzie html beda znajdowaly sie te obrazki (nie potrzebne moga byc rowniez zmienne
date i
wstep), to wszystko zalezy od strony i jak zostala ona stworzona. Jesli analizowaliscie inne szablony to pewnie zauwazyliscie ze niektore bardzo sie roznia od siebie, takze w gruncie rzeczy trzeba samemu kombinowac i probowac
Na koniec caly szablon:
<?xml version="1.0"?>
<template version="1.0">
<channel>
<name>Sport | onet.pl</name>
<url>http://sport.onet.pl/0,0,wiadomosci.html</url>
</channel>
<parse_channel> <![CDATA[
var d = new Document(channel.url, "iso-8859-2");
var tags = d.getElementsByAttr("a", "class","a2b");
for (i in tags) {
var href = tags[i].getAttribute("href");
var article = new Article();
article.id = href;
article.url = href;
article.header = tags[i].innerText;
channel.articles.push( article );
}
]]> </parse_channel>
<parse_article> <![CDATA[
var d = new Document(article.url, "iso-8859-2");
var date = d.getElementsByAttr("div", "class", "a09 sz")[0].innerText;
var wstep = d.getElementsByAttr("div", "class", "a2b")[0].innerText;
var tresc = d.getElementsByAttr("div", "class","a2")[0].innerHTML;
if (d.getElementsByAttr("img", "class", "mb2")[0]) {
var nodeImage = d.getElementsByAttr("img", "class", "mb2")[0];
var imageSrc = nodeImage.getAttribute("src");
var imageDescr = d.getElementsByAttr("td", "class", "a0")[0].innerText;
var imageTag = "<center><br><br><img src=" + imageSrc + "><br>" + imageDescr + "</center><br>";
article.body = "";
article.body += "<i><small>" + date + "</small></i><br><br><b>" + wstep + "</b>" + imageTag + tresc;
}
else {
article.body = "";
article.body += "<i><small>" + date + "</small></i><br><br><b>" + wstep + "</b><br><br>" + tresc;
}
]]> </parse_article>
</template>
Dosyc wkurzajaca rzecza jest to, ze jesli popelnimy jakis blad, to kanal nie bedzie nam nic wyswietlal, albo bedzie wyswietlal artykuly bez zadnej tresci. Nawet mala literowka moze byc tego przyczyna
Z doswiadczenia wiem, ze czasami naprawde wiele razy trzeba testowac szablon zanim bedzie dzialac poprawnie
Mam nadzieje, ze choc troche ten tekst komus ulatwi robienie szablonow do SPB Insight, oczywiscie w miare mozliwosci bede robil nowe dla uzytkownikow tego forum. Przepraszam za ewentualne bledy i brak polskich znakow (tak juz mam)
