בשבוע שעבר הוצב לפניי אתגר: להקים אתר HTML נקי (בלי מערכת כמו WP או מוודל), שמציג RSS מאתר חיצוני.
חיפושים קצרים העלו שאיני הראשונה שמתבקשת לעשות זאת, וכמובן יש חיה כזאת – באמצעות JavaScript. כרגיל ב-SO, היו כמה תשובות שניתנו לשאלה זו, כאשר אפשר לחלק את הפתרונות המוצעים ל-3 קבוצות:
- אלה שלא עבדו בכלל
- אלה שעבדו חלקית
- זו שבסוף הצליחה
אלה שלא עבדו כלל
היו שתיים כאלה – הפלגאין של jQuery כבר לא קיים; הפונקציות המובנות של jQuery לטיפול ב-XML לא משתפות פעולה כשהכתובת של ה-RSS היא מדומיין אחר.
אלה שעבדו חלקית
היו שתי הצעות שעבדו מצוין – אבל רק עבור שדות מסויימים וקבועים מראש ב-RSS. הפלגאין הזה מאפשר בכמה שורות קצרות להראות כמות נבחרת של פריטים מקובץ RSS. דא עקא, שהוא מאפשר להראות רק את שדות הכותרת, התקציר והתאריך, ואילו אנו רצינו להציג גם את התמונה. מחקירת הפלגאין עלה שהוא משתמש ב-Google Feed API ולכן החלטתי ללכת ישירות למקור ולנסות להשיג באמצעות ה-API הזה את המידע שהייתי זקוקה לו. ל-API יש אמנם תיעוד מאד ברור וקל, עם דוגמת קוד פשוטה שצריך רק להעתיק ולהדביק, ולשנות בהתאם לצורך, אבל הוא גם מאוד מוגבל והוא עצמו מחזיר רק את השדות הנ”ל, ללא יכולת של השתמש (המתכנת) להגמיש את השדות.
זו הצליחה
בצר לי המשכתי לקרוא, וראיתי שיש עוד דרך להשתמש ב-API, וזאת באמצעות הבקשה שיחזיר XML (ברירת המחדל היא JSON). ברגע שהתוצאה היא XML כל ה-node-ים נגישים לנו תכנותית. לקח לי כמה דקות עד שהבנתי שאפשר להשתמש בפונקציה find של jQuery כדי למצוא את המידע שאני מבקשת בתוך ה-XML, ואז פשוט שלפתי את ה-node-ים הרלוונטיים, יצרתי אלמנטי HTML, ו-וואלה – נוצר לי דף HTML עם קורא RSS!
$(document).ready(function () {
var feed = new google.feeds.Feed('http://www.hayadan.org.il/category/biology/brain/feed/');
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function (result) {
if (!result.error) {
var container = document.getElementById("divRss");
if (container != null) {
for (var i = 0; i < 2; i++) {
var entry = $(result.xmlDocument).find('item')[i];
var li = document.createElement("li");
var liClass = document.createAttribute("class");
liClass.value = "clear-after";
li.setAttributeNode(liClass);
/* image*/
var img = document.createElement("img");
var src = document.createAttribute("src");
src.value = $(entry).find("enclosure").attr("url");
img.setAttributeNode(src);
li.appendChild(img);
/* linked title*/
var a = document.createElement("a");
var href = document.createAttribute("href");
href.value = $(entry).find("link").html();
a.setAttributeNode(href);
a.appendChild(document.createTextNode($(entry).find("title").html()));
li.appendChild(a);
/* published date*/
li.appendChild(document.createElement("br"));
// format date
var postDate = new Date($(entry).find('pubDate').html());
li.appendChild(document.createTextNode('(' + postDate.getDate() + "." + (postDate.getMonth() + 1) + "." + postDate.getFullYear() + ')'));
container.appendChild(li);
}
}
}
});
})
;
כן, הקוד יכול היה להיות יעיל יותר. אבל אחרי כל התלאות, ובשביל כ-ו-ל-ה 3 אלמנטים – התעצלתי…
לגזור ולשמור :).