สร้างเว็บค้นหาข้อมูลจาก Google Sheet ด้วย Apps Script และ Sheetrock.js

ปัจจุบันเราทำงานร่วมกันกับผู้อื่นผ่าน Google Workspace for Education เป็นช่วงระยะเวลาหนึ่งแล้ว มีไฟล์ที่ทำงานร่วมกันมากมาย บางท่านใช้ Google Sheet สำหรับจัดเก็บข้อมูลเพื่อเป็นฐานข้อมูล เพื่อความคล่องตัวในการเปิดอ่านไฟล์ร่วมกัน หลายท่านอาจจะเคยประสบปัญหากรณีมีไฟล์ Google Sheet และใส่สูตรคำนวณในไฟล์ไว้แล้ว แต่มีความต้องการที่จะแชร์ไฟล์นี้ให้กับผู้อื่นที่ทำงานร่วมกันหรือบุคคลภายนอก เพื่อค้นหาข้อมูลภายในไฟล์ได้ จะทำอย่างไรดีนะ

จากประเด็นหรือความต้องการที่จะค้นหาข้อมูลในไฟล์ Google Sheet วิธีที่แอดมินแนะนำ คือ การทำเว็บสำหรับการค้นหาข้อมูล แต่เว็บที่เราทำนี้ ไม่ต้องหาเครื่องแม่ข่ายเพื่อพัฒนาและติดตั้ง เราใช้การบริการของ Web Apps ของ Google ที่มีให้เราได้ใช้งานกัน

ภาษาและเครื่องมือที่ใช้ ประกอบไปด้วย Apps Script, HTML, CSS, JavaScript Library (Sheetrock.js, DataTables)

สำหรับท่านที่เพิ่งเริ่มต้นกับ Google Apps Script – Web Apps อ่านบทความนี้ได้ เริ่มต้น Web Apps ด้วย Google Apps Script

ส่วนบทความนี้ เราจะนำเอาไลบราลี Sheetrock.js มาช่วยในการแสดงผลข้อมูลจาก Google Sheet ให้เป็นเว็บแอป มาเริ่มต้นกันเลย 🙂

1.สร้าง Folder และสร้างไฟล์ Google Apps Script

2.ได้ไฟล์ Code.gs หรือ รหัส.gs จากนั้น ตั้งชื่อไฟล์ Apps Script และบันทึกโปรเจกต์

3.ภายในไฟล์ Code.gs ตั้งชื่อฟังก์ชัน doGet() และกำหนดคำสั่งการแสดงผลหน้าเว็บผ่านไฟล์ชื่อ home

function doGet() {
  return HtmlService.createTemplateFromFile('home').evaluate()
}

4. สร้างไฟล์ HTML ชื่อ home

ในบทความนี้เราจะนำเอา Sheet ที่เราสร้างไว้มาใช้ร่วมกับเว็บแอปที่สร้างขึ้น ต้องใช้บริการ Google sheet ภายในโปรเจกต์

5.เพิ่มบริการ Google Sheet Api

และคลิกปุ่ม add

เมื่อเพิ่มบริการแล้ว จากนั้นเราต้องเตรียมไฟล์ Google Sheet ไว้ด้วย เราอาจจะเลือกไฟล์ที่มีอยู่แล้วได้ หรือจะหาข้อมูลเพื่อทำเป็นไฟล์ข้อมูลสำหรับการเรียนตามบทความนี้ได้เช่นกัน
ผู้เขียนหาตัวอย่างข้อมูลมาสำหรับเป็นฐานข้อมูลจาก เว็บ thespreadsheetguru จะมีตัวอย่างชุดข้อมูล Employee เตรียมไว้ให้ในรูปแบบ CSV/Excel เราสามารถคัดลอกข้อมูลใส่ไว้ใน Google Sheet ได้

6.เตรียมไฟล์ Google Sheet

จุดสังเกต ไฟล์ Google Sheet นี้จะต้องมีการ Share แบบ “Anyone with the link”

เมื่อเตรียมไฟล์ Sheet สำเร็จแล้ว เราจะพักตรงนี้ไว้ก่อน มาดูไลบราลี Sheetrock.js กัน ต้องเริ่มต้นอย่างไรได้บ้าง

Sheetrock.js เป็นไลบราลี JavaScript สำหรับการสืบค้น ดึงข้อมูลและแสดงข้อมูลจาก Google Sheet สามารถเขียน/เลือกคอลัมน์สำหรับการแสดงผลได้ด้วยคำสั่งคล้ายภาษา SQL
ที่มา: Sheetrock.js

เมื่อเราได้ศึกษาจากเว็บ Sheetrock.js แล้ว เริ่มต้นใช้งานกับเว็บแอปกันเลย

7. การใช้งาน Sheetrock.js

นำโค้ดด้านล่างนี้ใส่ไว้ในแท็ก <head> ของไฟล์ HTML ที่เราสร้างไว้ ชื่อไฟล์ home

<head>
    <!-- Load jQuery and Sheetrock from Unpkg -->
    https://unpkg.com/jquery@3.6.0/dist/jquery.slim.min.js
    https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js
</head>

การแสดงผลข้อมูลจาก Google Sheet และสามารถค้นหาข้อมูลได้ด้วย เราจะใช้ แบบ DataTables มาช่วยเราด้วย ส่วนของเว็บ Sheetrock.js มีตัวอย่างการนำ DataTables มาใช้ คลิกที่นี่

เพิ่มโค้ดสคริปต์ที่ต้องใช้เพิ่มเติมในแท็ก <head>

<head>
    <!-- Load jQuery and Sheetrock from Unpkg -->
    https://unpkg.com/jquery@3.6.0/dist/jquery.slim.min.js
    https://unpkg.com/sheetrock@1.2.0/dist/sheetrock.min.js
    <!-- Load DataTables script and stylesheet from Unpkg -->
    https://unpkg.com/datatables@1.10.18/media/js/jquery.dataTables.min.js
    <link href="https://unpkg.com/datatables@1.10.18/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
</head>

จากนั้นเพิ่มแท็ก <table> ในส่วนของแท็ก <body>

<body>

    <h1>Start with Sheetrock.js</h1><br>
    <table id="raw-table" class="table table-condensed table-striped"></table>
</body>

และเพิ่มแท็ก <script> ในส่วนของแท็ก <body>

<body>
    <h1>Start with Sheetrock.js</h1><br>
    <table id="raw-table" class="table table-condensed table-striped"></table>
    <script>
      //
    </script>
</body>

คัดลอกลิงก์บน URL Address ของ Google Sheet มาทั้งหมด

พิมพ์คำสั่งในแท็ก <script> ภายในแท็ก <body> และวาง URL Address ของ Google Sheet

<script>
      // Define spreadsheet URL.
      var mySpreadsheet = 'ระบุลิงก์ Google Sheet ที่เตรียมไว้';
      
</script>

เพิ่มสคริปต์การสืบค้น ดึงและแสดงผลข้อมูล จาก mySpreadsheet ไปแสดงที่แท็ก <table> ID เท่ากับ raw-table

<script>
      // Define spreadsheet URL.
      var mySpreadsheet = 'ระบุลิงก์ Google Sheet ที่เตรียมไว้';

      // Load all hitters and format with DataTables.
      $('#raw-table').sheetrock({
        url: mySpreadsheet,
        query: "select A,B,C,D,E,L order by B asc",
      }).on('sheetrock:loaded', function () {
        $(this).DataTable();
      });
</script>

จุดสังเกต ส่วนของคำสั่ง บรรทัดที่ 21 query: “select A,B,C,D,E,L order by B asc” จะเห็นได้ว่าเป็น Syntax ของภาษา SQL ที่ใช้สำหรับการสืบค้น ดึงข้อมูลเพื่อแสดงผล ความหมายของ A, B, C, .. คือ คอลัมน์ภาย Sheet เราสามารถเลือกคอลัมน์แสดงผลผ่านเว็บแอปได้ง่ายขึ้น ส่วนการเรียงลำดับ Order by เลือก คอลัมน์ที่จะเรียงลำดับได้
(asc เรียงข้อมูลจากน้อยไปมาก desc เรียงข้อมูลจากมากไปน้อย)

เมื่อพิมพ์สคริปต์คำสั่งต่าง ๆ เรียบร้อยแล้ว ทำการ Deploy เว็บแอปกัน

8.Deploy เว็บแอป เลือก New Deployment

จากนั้น เลือก Web app และระบุค่า Configuration กำหนดการแชร์ลิงก์ Web app สำหรับการเข้าถึงการใช้งานรวมกันภายในมหาวิทยาลัย

ระบบประมวลผลและแจ้ง URL เว็บแอป

Copy URL ที่ได้ เปิดหน้าต่างเบราว์เซอร์ใหม่ วาง URL และ Enter เพื่อแสดงผลเว็บแอป

✨ เว็บแอปแสดงผลข้อมูลสำเร็จ เย้! 🌟

👩🏽‍💻 จากบทความนี้เป็นเพียงตัวอย่างหนึ่งในการสร้างเว็บค้นหาข้อมูลจาก Google Sheet ด้วย Apps Script และ Sheetrock.js ซึ่งผู้อ่านสามารถนำไปเป็นแนวทางการใช้งานร่วมกับไฟล์ Google Sheet ที่มีอยู่และทำงานร่วมกันกับผู้อื่นได้ 🥰

16,126

Knowledge Management

สร้างเว็บค้นหาข้อมูลจาก Google Sheet ด้วย Apps Script และ Sheetrock.js

เรื่องใกล้เคียง

ผู้เขียน