<div class="post-title">
<div class="post-meta"></div>
</div>
<div class="post content-box">
<div class="post__header"><img class="alignnone size-full wp-image-2769" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/01.jpg" alt="" width="860" height="452" /></div>
<div class="post__content">

Google Sheets มีเครื่องมือคู่บุญคือ Google Apps Script ซึ่งถ้าเทียบกับ MS Excel ก็คล้ายๆ VBA อะไรแบบนั้น แต่พลังของ Google Apps Script นั้นมันเหนือกว่ามาก เพราะมันสามารถ deploy เป็น web application ได้ วันนี้ผมจะมาแสดงอภินิหารด้วยการเขียนโค้ดยาวประมาณ 8 บรรทัดให้ดูครับ
<h3 id="gexpress">Gexpress</h3>
พระเอกของวันนี้คือ Library ที่ชื่อว่า <a href="https://github.com/coderofsalvation/Gexpress" target="_blank" rel="nofollow noopener noreferrer">Gexpress</a> ครับเป็น middleware สำหรับ google apps script โดยเฉพาะเลย ซึ่ง concept ก็ต้องบอกเลยว่า คล้ายๆกับ <a href="https://expressjs.com/" target="_blank" rel="nofollow noopener noreferrer">Express</a> ของ NodeJS เลยนั่นแหละ แค่ติดตั้งเสร็จเราก็ handle request ได้แบบสบายใจโดยไม่ต้องไปเขียนอะไรวุ่นวายเลยครับ
<h3 id="gexpress-middleware-restsheet">Gexpress-middleware-RESTsheet</h3>
หลังจากเขียน Gexpress ขึ้นมาแล้ว เจ้าของคนเดิมเขาก็ต่อยอดให้ Gexpress สามารถวิ่งเข้าไป อ่าน-เขียน ข้อมูลที่อยู่ใน sheet ได้ด้วย <a href="https://github.com/coderofsalvation/Gexpress-middleware-RESTsheet" target="_blank" rel="nofollow noopener noreferrer">Gexpress-middleware-RESTsheet</a> จึงเกิด ทำให้เราไม่ต้องไปเขียนส่วน CRUD ให้วุ่นวายอีกครับ เรียกผ่าน URL ได้สบายๆเลย

เครื่องมือทั้ง 2 ตัวนี้ทุกคนสามารถเข้าไปอ่านรายละเอียดเพิิ่มเติมได้ที่ Github Repository ของผู้พัฒนาได้เลยนะครับ
<ul>
 	<li><a href="https://github.com/coderofsalvation/Gexpress" target="_blank" rel="nofollow noopener noreferrer">Gexpress</a></li>
 	<li><a href="https://github.com/coderofsalvation/Gexpress-middleware-RESTsheet" target="_blank" rel="nofollow noopener noreferrer">Gexpress-middleware-RESTsheet</a></li>
</ul>
<h2 id="สร้างฐานข้อมูลบน-google-sheets">สร้างฐานข้อมูลบน Google Sheets</h2>
ก่อนจะไปสร้าง api เราก็ต้องมาสร้างฐานข้อมูลกันก่่อนครับ ซึ่งในตัวอย่างนี้ผมก็จะขอสร้างแบบง่ายๆนะครับ เป็นฐานข้อมูลของสินค้าที่มีแค่ sheet เดียว ที่ชื่อว่า "product" ดังรูปนะครับ

<img class="alignnone size-full wp-image-2770" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/02.png" alt="" width="1024" height="751" />

เพิ่มเติมนะครับ column ที่จะเป็น id ของสินค้าผมจะตั้งชื่อไว้เป็น <code class="language-text">#</code> ตามที่ library เขากำหนดไว้นะครับ แล้วอย่าลืมเปลี่ยน format ของทั้ง column ให้เป็น "plain text" ด้วยนะครับ

<img class="alignnone size-full wp-image-2771" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/03.png" alt="" width="1024" height="751" />

เมื่อข้อมูลเราเรียบร้อยแล้ว ต่อไปก็เข้าไปที่ <strong>Script Editor</strong> เพื่อติดตั้งและเรียกใช้งาน <strong>Gexpress</strong> กัน

<img class="alignnone size-full wp-image-2772" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/04.png" alt="" width="543" height="330" />

หลังคลิกที่เมนูก็จะมี tab ใหม่เกิดขึ้นมาพร้อมหน้าตาของ editor ที่มี code แปะมาให้นิดนึง อันดับแรกผมแนะนำให้ตั้งชื่อ Script ก่อนครับ โดยคลิกที่ชื่อด้านซ้ายบนแล้วเปลี่ยนให้เป็นชื่อ project ของเราให้เรียบร้อย

<img class="alignnone size-full wp-image-2773" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/05.png" alt="" width="1024" height="751" />

จากนั้นทำการเพิ่ม Library ด้วยการคลิกที่เมนู <strong>Resources &gt; Libraries...</strong> จะมีหน้าต่างให้เราจัดการ Library ใน script ชุดนี้ครับ ให้ Add Library เข้าไป โดยกรอกรหัสเข้าไปที่ช่องด้านล่างทีละตัว ดังนี้นะครับ
<ul>
 	<li><strong>Gexpress</strong> <code class="language-text">1Lm_jNmD2FWYF-Kgj7AdHVvLEVXZ4c5AXwzd1KJSb48scn0HLBq64um7S</code></li>
 	<li><strong>GexpressTamotsu</strong><code class="language-text">1u4tNXyogsenLfbzOYk7JCyxzgxvJSo2GtdmI3pfUKWtodYIyWMXQ89NX</code></li>
</ul>
<img class="alignnone size-full wp-image-2774" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/06.png" alt="" width="1024" height="751" />

หลังจาก Add เข้าไปแล้วให้เลือก version ดังนี้นะครับ
<ul>
 	<li><strong>Gexpress</strong> เลือก version 22 ครับเป็นตัวล่าสุด</li>
 	<li><strong>GexpressTamotsu</strong> เลือก version 32 ครับ เพราะตัวล่าสุดผมเจอปัญหาเวลาเรียก query แบบทั้งหมดเลยถอยมา 1 version</li>
</ul>
<img class="alignnone size-full wp-image-2775" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/07.png" alt="" width="1024" height="751" />

เมื่อเราติดตั้ง library ครบแล้วคราวนี้ก็ได้เวลาเรียกใช้งานครับ ให้เราลบ code ที่มีแต่แรกออกไปแล้ววางชุดนี้ลงไปใหม่เลยครับ code ยาวประมาณ 8 บรรทัด
<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> app      <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Gexpress<span class="token punctuation">.</span>App</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> sheet    <span class="token operator">=</span> SpreadsheetApp<span class="token punctuation">.</span><span class="token function">openById</span><span class="token punctuation">(</span><span class="token string">'ใส่ SHEET ID ของคุณ'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> product   <span class="token operator">=</span> GexpressTamotsu<span class="token punctuation">.</span><span class="token function">middleware</span><span class="token punctuation">(</span><span class="token string">'/product'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>sheet<span class="token punctuation">:</span>sheet<span class="token punctuation">,</span>tab<span class="token punctuation">:</span><span class="token string">'products'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>product<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">doGet</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> app<span class="token punctuation">.</span><span class="token function">doGet</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">doPost</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> app<span class="token punctuation">.</span><span class="token function">doPost</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
ใครไม่รู้ว่าจะไปหา sheet id มาจากไหนให้กลับไปเปิดตัว sheet สินค้าที่ทำไว้ก่อนหน้าครับ แล้วดูช่อง address bar ครับมันจะมีหน้าตาแบบนี้

<code class="language-text">https://docs.google.com/spreadsheets/d/XXXXXXXXX/edit#gid=0</code>

ให้ copy รหัสที่อยู่บริเวณ <code class="language-text">XXXXXXXXX</code> (หลัง /d/ ก่อน /edit) นั่นแหละครับ <code class="language-text">SHEET ID</code>ได้แล้วก็เอาไปวางใน code ให้เรียบร้อย

<img class="alignnone size-full wp-image-2776" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/08.png" alt="" width="1024" height="751" />

หลังจากนั้นก็ทำการ deploy โดยเข้าไปที่เมนู <strong>Publish &gt; Deploy as web app...</strong> ผมจะเลือก <strong>Who has access to the app:</strong> เป็น "Anyone, even anonymous" นะครับ เพราะว่าตัวนี้จะทำเป็น api แบบเปิดใครจะเข้าถึงก็ได้

<img class="alignnone size-full wp-image-2777" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/09.png" alt="" width="1024" height="751" />

ระหว่าง deploy ครั้งแรกจะมีการของ permission ของ Google นะครับเรากด allow ไปแต่จะมีหน้า warning ขึ้นมาอย่าพึ่งตกใจ ให้กด "Go to ชื่อโปรเจค (unsafe)" ต่อไปเลยครับ

<img class="alignnone size-full wp-image-2778" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/10.png" alt="" width="1024" height="751" />

<img class="alignnone size-full wp-image-2779" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/11.png" alt="" width="712" height="640" />

เรียบร้อยแล้ว ตอนนี้เราจะได้ web app Url มานะครับ ก็ให้ copy เอาไว้เพื่อไปทดสอบกันได้เลย

<img class="alignnone size-full wp-image-2780" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/12.png" alt="" width="1024" height="751" />

ผมจะใช้ Postman ในการทดสอบนะครับ แต่เนื่องจาก web app Url ที่ได้มามันค่อนข้างยาว ผมเลยมาสร้าง Environment Variable เอาไว้ก่อน เวลาเรียกใช้จะได้สั้นๆ

<img class="alignnone size-full wp-image-2781" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/13.png" alt="" width="1024" height="788" />

การทดสอบจะทำตามตารางที่ผู้พัฒนาเขียนไว้ใน document นะครับ โดย Url จะมีหน้าตาประมาณนี้นะครับ ซึ่งสามารถดูในภาพประกอบได้

<code class="language-text">https://{scriptUrl}/?path=/ชื่อชีท/ไอดีที่อยากได้?method="POST|PUT|DELETE"</code>
<h4 id="ทดสอบ-get-ทั้งหมด">ทดสอบ GET ทั้งหมด</h4>
<img class="alignnone size-full wp-image-2782" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/14.png" alt="" width="1024" height="788" />
<h4 id="ทดสอบ-post-สินค้าใหม่เข้าไป">ทดสอบ POST สินค้าใหม่เข้าไป</h4>
<img class="alignnone size-full wp-image-2783" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/15.png" alt="" width="1024" height="788" />
<h4 id="ทดสอบ-get-สินค้าใหม่ที่พึ่งเพิ่ม">ทดสอบ GET สินค้าใหม่ที่พึ่งเพิ่ม</h4>
<img class="alignnone size-full wp-image-2784" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/16.png" alt="" width="1024" height="788" />

<img class="alignnone size-full wp-image-2785" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/17.png" alt="" width="1024" height="751" />
<h4 id="ทดสอบ-delete-สินค้าใหม่ที่พึ่งเพิ่ม">ทดสอบ DELETE สินค้าใหม่ที่พึ่งเพิ่ม</h4>
<img class="alignnone size-full wp-image-2786" src="http://eau-eastern.asia/ict/wp-content/uploads/2019/08/18.png" alt="" width="1024" height="788" />

เรียบร้อยครับ ตอนนี้เราก็จะได้ API จาก Google Sheets มาใช้กันแบบง่ายๆ โดยไม่ต้องมี server ครับ ที่ผมทดลองให้ดูนี่เป็นแค่เสี้ยวหนึ่งของความสามารถของ Gexpress นะครับ สำหรับใครที่อยากศึกษาเพิ่มเติม สามารถเข้าไปอ่านรายละเอียดได้ที่
<ul>
 	<li><a href="https://github.com/coderofsalvation/Gexpress" target="_blank" rel="nofollow noopener noreferrer">Gexpress</a></li>
 	<li><a href="https://github.com/coderofsalvation/Gexpress-middleware-RESTsheet" target="_blank" rel="nofollow noopener noreferrer">Gexpress-middleware-RESTsheet</a></li>
</ul>
<strong>ที่มา</strong> : <a href="https://peerasak.com/post/create-rest-api-in-5-minutes-by-google-sheet/?fbclid=IwAR28cJzJTZ9S4cU_nJxmr_n7o8zlYZsUBazrlyRYlUxJpmNAFOYDqMh4EcY">https://peerasak.com/post/create-rest-api-in-5-minutes-by-google-sheet/?fbclid=IwAR28cJzJTZ9S4cU_nJxmr_n7o8zlYZsUBazrlyRYlUxJpmNAFOYDqMh4EcY</a>

</div>
</div>