<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>jQuery, Ajax, PHP, JSON, XML, Web Technologies &#187; Gears</title>
	<atom:link href="http://blog.chonla.com/category/gears/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.chonla.com</link>
	<description>คุยกันเรื่อง jQuery, Ajax, PHP, JSON, XML และ Web Technologies เป็นภาษาไทยกันดีกว่า</description>
	<lastBuildDate>Tue, 17 Jan 2012 18:27:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>มารู้จักกับ Google Gears, เร่งสปีดเว็บด้วย Google Gears</title>
		<link>http://blog.chonla.com/2008/10/%e0%b8%a1%e0%b8%b2%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81%e0%b8%81%e0%b8%b1%e0%b8%9a-google-gears-%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80/</link>
		<comments>http://blog.chonla.com/2008/10/%e0%b8%a1%e0%b8%b2%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81%e0%b8%81%e0%b8%b1%e0%b8%9a-google-gears-%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80/#comments</comments>
		<pubDate>Thu, 30 Oct 2008 14:06:59 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Gears]]></category>
		<category><![CDATA[Performance Tuning]]></category>
		<category><![CDATA[Web Technologies]]></category>
		<category><![CDATA[Google Gears]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=88</guid>
		<description><![CDATA[Google Gears หรือ Gears เป็นเทคโนโลยีใหม่ ที่ช่วยให้การเปิดเว็บสามารถทำไปได้อย่างรวดเร็วมากขึ้นโดยอาศัยหลักการง่าย ๆ ที่ว่า ไฟล์ต่าง ๆ ที่อยู่บนเครื่องของเรา ย่อมโหลดมาได้เร็วกว่าไฟล์ที่อยู่บนเว็บเซิร์ฟเวอร์ องค์ประกอบของ Gears Gears ประกอบด้วยส่วนประกอบต่าง ๆ ดังนี้ Database Module (ใช้ SQLite) เพื่อใช้เก็บข้อมูลต่าง ๆ ของเว็บไว้ในเครื่องของเรา WorkerPool Module ใช้สำหรับการรัน JavaScript ใน Background LocalServer Module ใช้สำหรับการเรียกใช้ไฟล์ต่าง ๆ ไม่ว่าจะเป็นภาพ หรือข้อมูลอื่น ๆ โดยไม่จำเป็นต้องมีการต่ออินเตอร์เน็ต (Offline Data) โดย LocalServer จะทำการ Cache ข้อมูลเหล่านี้ไว้บนเครื่อง และให้บริการเมื่อมีการร้องขอ Desktop Module ใช้เพื่อให้เว็บที่ใช้ Gears สามารถใช้งานคำสั่งที่เกี่ยวกับ Desktop ได้ เช่น [...]]]></description>
			<content:encoded><![CDATA[<p>Google Gears หรือ Gears เป็นเทคโนโลยีใหม่ ที่ช่วยให้การเปิดเว็บสามารถทำไปได้อย่างรวดเร็วมากขึ้นโดยอาศัยหลักการง่าย ๆ ที่ว่า ไฟล์ต่าง ๆ ที่อยู่บนเครื่องของเรา ย่อมโหลดมาได้เร็วกว่าไฟล์ที่อยู่บนเว็บเซิร์ฟเวอร์</p>
<p><span id="more-88"></span></p>
<p><strong>องค์ประกอบของ Gears</strong></p>
<p>Gears ประกอบด้วยส่วนประกอบต่าง ๆ ดังนี้</p>
<ol>
<li>Database Module (ใช้ SQLite) เพื่อใช้เก็บข้อมูลต่าง ๆ ของเว็บไว้ในเครื่องของเรา</li>
<li>WorkerPool Module ใช้สำหรับการรัน JavaScript ใน Background</li>
<li>LocalServer Module ใช้สำหรับการเรียกใช้ไฟล์ต่าง ๆ ไม่ว่าจะเป็นภาพ หรือข้อมูลอื่น ๆ โดยไม่จำเป็นต้องมีการต่ออินเตอร์เน็ต (Offline Data) โดย LocalServer จะทำการ Cache ข้อมูลเหล่านี้ไว้บนเครื่อง และให้บริการเมื่อมีการร้องขอ</li>
<li>Desktop Module ใช้เพื่อให้เว็บที่ใช้ Gears สามารถใช้งานคำสั่งที่เกี่ยวกับ Desktop ได้ เช่น การสร้าง Shortcut</li>
<li>Geolocation Module ใช้สำหรับบอกตำแหน่งที่อยู่ของผู้ใช้งานเว็บที่ใช้ Gears ณ ขณะนั้น</li>
</ol>
<p><strong>การทำงานของ Gears</strong></p>
<p>ตามที่ผมเคยอ้างไว้ในบทความ Ajax? คืออะไรกันหว่า? [<a title="Ajax? คืออะไรกันหว่า?" href="http://blog.chonla.com/?p=8" target="_blank">http://blog.chonla.com/?p=8</a>] ว่า เว็บ 1 หน้า จะแยกเป็น 3 ส่วน คือ Layout (Application UI), Data, และ Script ส่วนที่เป็น Data ที่แยกออกมานี้ เราเรียกว่า Data Layer</p>
<p>โดยปกติเว็บทั่ว ๆ ไป จะไม่มีการแยก Data Layer ออกมาจากส่วน Layout แต่จะเขียนปนกัน</p>
<div id="attachment_89" class="wp-caption alignnone" style="width: 403px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_1.jpg"><img class="size-full wp-image-89" title="การเชื่อมต่อแบบไม่มี Data Layer" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_1.jpg" alt="การเชื่อมต่อแบบไม่มี Data Layer" width="393" height="131" /></a><p class="wp-caption-text">การเชื่อมต่อแบบไม่มี Data Layer</p></div>
<p>การที่จะเก็บ Data ไว้ในเครื่องเราได้นั้น เราจำเป็นต้องแยก Data Layer ออกจาก Layout ก่อน เราเรียกขั้นตอนนี้ว่า Data Isolation เมื่อเรามองถึงเว็บที่มีการเรียกใช้ Ajax ในการแลกเปลี่ยนเฉพาะ Data ระหว่างเว็บบราวเซอร์ และเว็บเซิร์ฟเวอร์ เราสามารถพิจารณาได้ว่า Ajax นี่เองที่ทำหน้าที่เป็น Data Layer ของเว็บนั้น ๆ</p>
<div id="attachment_90" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_2.jpg"><img class="size-full wp-image-90" title="การเชื่อมต่อแบบมี Data Layer" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_2.jpg" alt="การเชื่อมต่อแบบมี Data Layer" width="500" height="112" /></a><p class="wp-caption-text">การเชื่อมต่อแบบมี Data Layer</p></div>
<p>และตรงนี้เองที่ Gears จะเข้ามามีบทบาท ลองพิจารณาดูนะครับว่า ถ้าเราเอา Module อะไรซักอย่าง ไปคั่นระหว่างส่วนเว็บบราวเซอร์กับส่วน Data Layer เพื่อใช้ในตัดสินใจว่าจะดึงข้อมูลที่เราเก็บไว้จากในเครื่องของเรา หรือจะดึงข้อมูลใหม่จากเว็บเซิร์ฟเวอร์แทน หรือจะทำทั้ง 2 อย่างดี เราเรียก Module ตัวนี้ว่า Data Switch เราสามารถมองได้ว่า Data Switch นี่ก็ทำตัวเหมือนเป็น Data Layer เหมือนกันนั่นเอง</p>
<div id="attachment_91" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_3.jpg"><img class="size-full wp-image-91" title="เพิ่ม Data Switch เข้าไป" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_3.jpg" alt="เพิ่ม Data Switch เข้าไป" width="500" height="103" /></a><p class="wp-caption-text">เพิ่ม Data Switch เข้าไป</p></div>
<p>Data Switch จะทำหน้าที่ทั้งบันทึกข้่อมูลที่ต้องการลงสู่เครื่องของเรา และดึงข้อมูลที่เราต้องการออกมา เมื่อเราเชื่อมภาพการทำงานของ Data Switch เข้าไปด้วย เราจะเห็นได้ว่า นี่แหละครับ คอนเซ์ปต์การทำงานของ Gears</p>
<div id="attachment_92" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_4.jpg"><img class="size-full wp-image-92" title="ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_4.jpg" alt="ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module" width="500" height="160" /></a><p class="wp-caption-text">ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module</p></div>
<p>ตัว Data Switch เองยังสามารถที่จะกำหนดให้ทำการ Synchronize ข้อมูลกับ Server เป็นระยะได้อีกด้วย</p>
<p><strong>Gears เมื่อไม่มี Data Layer</strong></p>
<p>จะทำยังไง ถ้าเราไม่ได้ทำ Data Layer? ยังทำได้ครับ แต่ก็ยุ่งยากขึ้นมาหน่อย เราจะต้องเขียน Code ในการดักขั้นตอนของการรับส่งข้อมูลไปยัง Server เช่น ตอน Submit Form แต่การทำแบบนี้ ทำให้เราต้องทำงานหนักขึ้นอีกเยอะ สู้เอาเวลามาแยก Data Layer ออกมาน่าจะง่ายกว่าหรือเปล่า? <img src='http://blog.chonla.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><strong>เมื่อไหร่ที่จะควรหรือไม่ควรทำ Offline Data</strong></p>
<ul>
<li>เมื่อข้อมูลเป็นข้อมูลชั่วคราว เช่น ข้อมูลดัชนีหุ้น แบบนี้ก็ไม่ควรทำ</li>
<li>ข้อมูลบางอย่างจะมันก็ควรจะเป็น online มากกว่าที่จะเป็น offline เช่น ข้อความพูดคุยในโปรแกรม Chat แบบนี้ก็ไม่ควรทำเหมือนกัน</li>
<li>ข้อมูลที่มีการเรียกใช้บ่อย ๆ แบบนี้ควรทำอย่างยิ่ง</li>
<li>ข้อมูลที่ต้องมีการประมวลผล หรือใช้ข้อมูลมากมายมหาศาลเกินกว่าเครื่องผู้ใช้จะรับไหวได้ แบบนี้ก็ไม่ควรทำ</li>
</ul>
<p><strong>การ Synchronize Data</strong></p>
<p>จะเกิดขึ้น เพราะสาเหตุดังนี้</p>
<ul>
<li>มีการเปลี่ยนแปลงข้อมูลในขณะที่ Offline</li>
<li>มีการใช้งานข้อมูลร่วมกันกับคนอื่น (คนอื่นอาจจะเปลี่ยนแปลงข้อมูลนั้นได้)</li>
<li>มีการเรียกใช้งานข้อมูลจาก External Resource เช่นการเรียกใช้งาน Feed</li>
</ul>
<p>การทำให้ข้อมูลบนเครื่อง เหมือนกับข้อมูลบนเว็บเซิร์ฟเวอร์ เราเรียกว่าการทำ Synchronization เราสามารถทำได้ 2 วิธีคือ Manual Sync และ Background Sync</p>
<p><strong>Manual Sync</strong></p>
<p>จะทำก็ต่อเมื่อ มีข้อมูลที่ต้อง Sync ไม่มากก และผู้ใช้้ต้องการข้อมูลที่ใหม่ล่าสุดก่อนที่จะทำการเปลี่ยนไปใช้ข้อมูลแบบ Offline แต่ปัญหาของการทำ Manual Sync ก็มี เช่น เราไม่สามารถรู้ได้ว่า Network ในขณะนั้นหลุดเมื่อไหร่ เพราะผู้ใช้อาจจะอยู่ในสถานที่ที่ Network ไม่เสถียร เช่นบนรถ เป็นต้น หรือ User อาจจะลืม Sync ก่อนที่จะเข้าสู่ Offline ก็ได้</p>
<p><strong>Background Sync</strong></p>
<p>วิธีนี้จะมีข้อดีคือ ข้อมูลจะอัพเดทเสมอ และสามารถทำได้แม้เน็ตจะไม่เร็ว ข้อเสียคือ ถ้าไม่ได้ใช้ WorkerPool (ถ้าจำไม่ได้ว่าคืออะไร ให้ย้อนกลับไปอ่านข้างต้น) มันจะกิน resource ปริมาณมาก อาจจะทำให้เน็ตช้าได้</p>
<div id="attachment_93" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_5.jpg"><img class="size-full wp-image-93" title="Gears ภาพรวม" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_5.jpg" alt="Gears ภาพรวม" width="500" height="204" /></a><p class="wp-caption-text">Gears ภาพรวม</p></div>
<p><strong>ตัวอย่างเว็บที่ใช้ Gears</strong></p>
<p>Google (Docs, Reader, Picasa, YouTube), MySpace, WordPress 2.6</p>
<p><strong>ตัวอย่าง Gears Application</strong></p>
<ul>
<li><a title="ตัวอย่าง Gears Application" href="http://code.google.com/apis/gears/sample.html" target="_blank">http://code.google.com/apis/gears/sample.html</a></li>
</ul>
<p><strong>บทสรุป</strong></p>
<p>ตามความเห็นส่วนตัวแล้ว Gears ถือว่าเป็นเทคโนโลยีที่น่าสนใจตัวหนึ่ง ยิ่งผนวกเข้ากับ DHTML ที่นับวันยิ่งหวือหวาได้ใจด้วยแล้ว คงเอาชนะใจ Developer หลาย ๆ คนได้ไม่ยาก แต่สำหรับในเชิงการพัฒนาเพื่อธุรกิจแล้ว อาจจะทำได้ยาก เพราะความไม่แน่นอนของพฤติกรรมของผู้ใช้ อาจจะเป็นปัจจัยหลักในการตัดสินใจนำมาใช้สำหรับผู้บริหารได้</p>
<p><strong>แหล่งอ้างอิง</strong></p>
<ul>
<li><a title="Gears Architecture" href="http://code.google.com/apis/gears/architecture.html" target="_blank">http://code.google.com/apis/gears/architecture.html</a></li>
<li><a title="WIKI: Gears (Software)" href="http://en.wikipedia.org/wiki/Gears_(software)" target="_blank">http://en.wikipedia.org/wiki/Gears_(software)</a></li>
</ul>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2008%2F10%2F%25e0%25b8%25a1%25e0%25b8%25b2%25e0%25b8%25a3%25e0%25b8%25b9%25e0%25b9%2589%25e0%25b8%2588%25e0%25b8%25b1%25e0%25b8%2581%25e0%25b8%2581%25e0%25b8%25b1%25e0%25b8%259a-google-gears-%25e0%25b9%2580%25e0%25b8%25a3%25e0%25b9%2588%25e0%25b8%2587%25e0%25b8%25aa%25e0%25b8%259b%25e0%25b8%25b5%25e0%25b8%2594%25e0%25b9%2580%2F&amp;title=%E0%B8%A1%E0%B8%B2%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%20Google%20Gears%2C%20%E0%B9%80%E0%B8%A3%E0%B9%88%E0%B8%87%E0%B8%AA%E0%B8%9B%E0%B8%B5%E0%B8%94%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%20Google%20Gears" id="wpa2a_2"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2008/10/%e0%b8%a1%e0%b8%b2%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81%e0%b8%81%e0%b8%b1%e0%b8%9a-google-gears-%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

