แกลเลอรีของ Google Photography Prize

เว็บไซต์ Google Photography Prize

เราเพิ่งเปิดตัวส่วนแกลเลอรีในเว็บไซต์ Google Photography Prize แกลเลอรีนี้จะแสดงรายการรูปภาพแบบเลื่อนได้ไม่รู้จบที่ดึงมาจาก Google+ โดยจะรับรายการรูปภาพจากแอป AppEngine ที่เราใช้เพื่อดูแลรายการรูปภาพในแกลเลอรี เรายังได้เปิดตัวแอปแกลเลอรีในรูปแบบโครงการโอเพนซอร์สใน Google Code อีกด้วย

หน้าแกลเลอรี

แบ็กเอนด์ของแกลเลอรีนั้นเป็นแอป AppEngine ที่ใช้ Google+ API เพื่อค้นหาโพสต์ที่มีหนึ่งในแฮชแท็กของ Google Photography Prize (เช่น #megpp และ #travelgpp) จากนั้นแอปจะเพิ่มโพสต์ดังกล่าวลงในรายการรูปภาพที่ไม่มีการกลั่นกรอง ทีมเนื้อหาของเราจะตรวจสอบรายการรูปภาพที่ไม่มีการกลั่นกรอง รวมทั้งแจ้งว่าไม่เหมาะสมซึ่งละเมิดหลักเกณฑ์ด้านเนื้อหาสัปดาห์ละครั้ง หลังจากกดปุ่ม "กลั่นกรอง" แล้ว ระบบจะเพิ่มรูปภาพที่ยังไม่ได้ทำเครื่องหมายลงในรายการรูปภาพที่แสดงในหน้าแกลเลอรี

แบ็กเอนด์การดูแล

ฟรอนท์เอนด์ของแกลเลอรีสร้างขึ้นโดยใช้ไลบรารีการปิดของ Google วิดเจ็ตแกลเลอรีก็เป็นองค์ประกอบการปิด ที่ด้านบนของไฟล์ต้นฉบับ เราจะบอกส่วนปิดว่าไฟล์นี้มีคอมโพเนนต์ชื่อ photographyPrize.Gallery และต้องใช้ส่วนต่างๆ ของไลบรารีการปิดที่แอปใช้ ดังนี้

goog.provide('photographyPrize.Gallery');

goog.require('goog.debug.Logger');
goog.require('goog.dom');
goog.require('goog.dom.classes');
goog.require('goog.events');
goog.require('goog.net.Jsonp');
goog.require('goog.style');

หน้าแกลเลอรีมี JavaScript ที่ใช้ JSONP เพื่อดึงรายการรูปภาพจากแอป AppEngine สำหรับ JSONP คือการแฮ็ก JavaScript แบบข้ามต้นทางแบบง่ายๆ ซึ่งแทรกสคริปต์ที่มีลักษณะดังนี้ jsonpcallback("responseValue") เราใช้คอมโพเนนต์ goog.net.Jsonp ในไลบรารี Closure เพื่อจัดการเนื้อหา JSONP

สคริปต์แกลเลอรีจะดำเนินการผ่านรายการรูปภาพและสร้างองค์ประกอบ HTML เพื่อให้รูปภาพแสดงในหน้าแกลเลอรี การเลื่อนได้ไม่รู้จบนั้นทำงานโดยเชื่อมโยงกับเหตุการณ์การเลื่อนหน้าต่าง และโหลดรูปภาพกลุ่มใหม่เมื่อการเลื่อนหน้าต่างอยู่ใกล้กับด้านล่างของหน้า หลังจากโหลดกลุ่มรายการรูปภาพใหม่ สคริปต์แกลเลอรีจะสร้างองค์ประกอบสำหรับรูปภาพและเพิ่มลงในองค์ประกอบแกลเลอรีเพื่อแสดง

กำลังแสดงรายการรูปภาพ

วิธีการแสดงรายการรูปภาพเป็นวิธีที่ง่ายมาก ระบบจะส่งผ่านรายการรูปภาพ สร้างองค์ประกอบ HTML และปุ่ม +1 ขั้นตอนถัดไปคือการเพิ่มกลุ่มรายการที่สร้างขึ้นลงในองค์ประกอบแกลเลอรีหลักของแกลเลอรี คุณสามารถดูรูปแบบคอมไพเลอร์การปิดในโค้ดด้านล่าง ดูคำจำกัดความของประเภทในความคิดเห็น JSDoc และการเปิดเผย @private เมธอดส่วนตัวจะมีเครื่องหมายขีดล่าง (_) หลังชื่อ

/**
 * Displays images in imageList by putting them inside the section element.
 * Edits image urls to scale them down to imageSize x imageSize bounding
 * box.
 *
 * @param {Array.<Object>} imageList List of image objects to show. Retrieved
 *                                   by loadImages.
 * @return {Element} The generated image list container element.
 * @private
 */
photographyPrize.Gallery.prototype.displayImages_ = function(imageList) {
  
  // find the images and albums from the image list
  for (var j = 0; j < imageList.length; j++) {
    // change image urls to scale them to photographyPrize.Gallery.MAX_IMAGE_SIZE
  }

  // Go through the image list and create a gallery photo element for each image.
  // This uses the Closure library DOM helper, goog.dom.createDom:
  // element = goog.dom.createDom(tagName, className, var_childNodes);

  var category = goog.dom.createDom('div', 'category');
  for (var k = 0; k < items.length; k++) {
    var plusone = goog.dom.createDom('g:plusone');
    plusone.setAttribute('href', photoPageUrl);
    plusone.setAttribute('size', 'standard');
    plusone.setAttribute('annotation', 'none');

    var photo = goog.dom.createDom('div', {className: 'gallery-photo'}, ...)
    photo.appendChild(plusone);

    category.appendChild(photo);
  }
  this.galleryElement_.appendChild(category);
  return category;
};

การจัดการเหตุการณ์การเลื่อน

ในการดูว่าผู้เข้าชมเลื่อนหน้าเว็บไปด้านล่างและเราต้องโหลดรูปภาพใหม่เมื่อใด แกลเลอรีจะเชื่อมต่อกับเหตุการณ์การเลื่อนของออบเจ็กต์หน้าต่าง ในการอธิบายเรื่องความแตกต่างในการใช้งานเบราว์เซอร์ เรากำลังใช้ฟังก์ชันยูทิลิตีที่มีประโยชน์จากไลบรารี Closure โดย goog.dom.getDocumentScroll() จะแสดงผลออบเจ็กต์ {x, y} ที่มีตำแหน่งการเลื่อนเอกสารปัจจุบัน goog.dom.getViewportSize() แสดงขนาดหน้าต่าง และ goog.dom.getDocumentHeight() ความสูงของเอกสาร HTML

/**
 * Handle window scroll events by loading new images when the scroll reaches
 * the last screenful of the page.
 *
 * @param {goog.events.BrowserEvent} ev The scroll event.
 * @private
 */
photographyPrize.Gallery.prototype.handleScroll_ = function(ev) {
  var scrollY = goog.dom.getDocumentScroll().y;
  var height = goog.dom.getViewportSize().height;
  var documentHeight = goog.dom.getDocumentHeight();
  if (scrollY + height >= documentHeight - height / 2) {
    this.tryLoadingNextImages_();
  }
};

/**
 * Try loading the next batch of images objects from the server.
 * Only fires if we have already loaded the previous batch.
 *
 * @private
 */
photographyPrize.Gallery.prototype.tryLoadingNextImages_ = function() {
  // ...
};

กำลังโหลดรูปภาพ

เรากำลังใช้คอมโพเนนต์ goog.net.Jsonp เพื่อโหลดรูปภาพจากเซิร์ฟเวอร์ การค้นหาจะใช้เวลา goog.Uri เมื่อสร้างแล้ว คุณสามารถส่งการค้นหาไปยังผู้ให้บริการ Jsonp ด้วยออบเจ็กต์พารามิเตอร์การค้นหาและฟังก์ชันเรียกกลับสำเร็จ

/**
 * Loads image list from the App Engine page and sets the callback function
 * for the image list load completion.
 *
 * @param {string} tag Fetch images tagged with this.
 * @param {number} limit How many images to fetch.
 * @param {number} offset Offset for the image list.
 * @param {function(Array.<Object>=)} callback Function to call
 *        with the loaded image list.
 * @private
 */
photographyPrize.Gallery.prototype.loadImages_ = function(tag, limit, offset, callback) {
  var jsonp = new goog.net.Jsonp(
      new goog.Uri(photographyPrize.Gallery.IMAGE_LIST_URL));
  jsonp.send({'tag': tag, 'limit': limit, 'offset': offset}, callback);
};

ดังที่กล่าวไว้ข้างต้น สคริปต์แกลเลอรีใช้คอมไพเลอร์ Closure ในการคอมไพล์และลดขนาดโค้ด คอมไพเลอร์การปิดยังมีประโยชน์ในการบังคับใช้การพิมพ์ที่ถูกต้อง (คุณใช้เครื่องหมาย @type foo JSDoc ในความคิดเห็นเพื่อตั้งค่าประเภทของพร็อพเพอร์ตี้) และยังบอกคุณเมื่อคุณไม่มีความคิดเห็นสำหรับเมธอดนั้น

แบบทดสอบ 1 หน่วย

เรายังต้องทดสอบ 1 หน่วยสำหรับสคริปต์แกลเลอรีด้วย ไลบรารี Closure จึงมีเฟรมเวิร์กการทดสอบ 1 หน่วยในตัวอยู่แล้ว โดยเป็นไปตามรูปแบบ jsUnit จึงเริ่มต้นใช้งานได้อย่างง่ายดาย

เพื่อช่วยฉันเขียนการทดสอบ 1 หน่วย ฉันจึงเขียนสคริปต์ Ruby ขนาดเล็กที่แยกวิเคราะห์ไฟล์ JavaScript และสร้างการทดสอบหน่วยที่ล้มเหลวสำหรับเมธอดและพร็อพเพอร์ตี้แต่ละรายการในคอมโพเนนต์แกลเลอรี โดยได้รับสคริปต์ดังนี้

Foo = function() {}
Foo.prototype.bar = function() {}
Foo.prototype.baz = "hello";

เครื่องมือสร้างการทดสอบจะสร้างการทดสอบที่ว่างเปล่าสำหรับพร็อพเพอร์ตี้แต่ละรายการ ดังนี้

function testFoo() {
  fail();
  Foo();
}

function testFooPrototypeBar = function() {
  fail();
  instanceFoo.bar();
}

function testFooPrototypeBaz = function() {
  fail();
  instanceFoo.baz;
}

การทดสอบที่สร้างขึ้นโดยอัตโนมัติเหล่านี้ช่วยให้ฉันเริ่มต้นทดสอบโค้ดได้อย่างง่ายดาย ทั้งยังครอบคลุมวิธีการและพร็อพเพอร์ตี้ทั้งหมดโดยค่าเริ่มต้นด้วย การทดสอบที่ไม่ผ่านนั้นสร้างผลกระทบทางจิตใจได้เป็นอย่างดี ซึ่งทำให้ฉันต้องผ่านการทดสอบทีละรายการและเขียนการทดสอบที่เหมาะสม เมื่อใช้ร่วมกับเครื่องวัดความครอบคลุมของโค้ด ก็เป็นเกมสนุกๆ ที่จะทำการทดสอบและการครอบคลุมเป็นสีเขียวทั้งหมด

สรุป

Gallery+ เป็นโปรเจ็กต์โอเพนซอร์สที่แสดงรายการรูปภาพ Google+ ที่มีการกลั่นกรอง ซึ่งตรงกับ #แฮชแท็ก ซึ่งสร้างขึ้นโดยใช้ Go และ Closure Library แบ็กเอนด์ทำงานบน App Engine Gallery+ ใช้ในเว็บไซต์ Google Photography Prize เพื่อแสดงแกลเลอรีงานที่ส่ง ในบทความนี้ เราได้แนะนำส่วนต่างๆ ที่ฉูดฉาดของสคริปต์ฟรอนท์เอนด์ ผู้ร่วมงาน Johan Euphrosine จากทีม App Engine Developer Relations กำลังเขียนบทความที่ 2 ซึ่งพูดถึงแอปแบ็กเอนด์ โดยแบ็กเอนด์เขียนด้วย Go ซึ่งเป็นภาษาฝั่งเซิร์ฟเวอร์ใหม่ของ Google หากคุณสนใจดูตัวอย่างการผลิตโค้ด Go โปรดอดใจรอ

รายการอ้างอิง