การสร้างแกลเลอรี 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 โปรดอดใจรอ
รายการอ้างอิง
- รางวัลสำหรับการถ่ายภาพจาก Google
- หน้าโปรเจ็กต์ Gallery+
- ปิดคลัง
- คอมไพเลอร์การปิด