Google Form ระบบรับสมัครพร้อมสร้างไฟล์ PDF และส่งสำเนาไฟล์ให้ผู้สมัคร ฟรีไม่จำกัด

ขออธิบายหลักการทำงานคราวๆ ของระบบนะครับ คือเมื่อผู้สมัครทำการกรอกข้อมูลที่ Google Form แล้วระบบจะทำการบันทึกข้อมูลลง Google Sheets ตามปกติ หลังจากนั้นก็จะนำข้อมูลไปสร้างเป็นไฟล์ PDF ให้พร้อมสำเนาไฟล์ PDF ให้ผู้สมัครทางอีเมล์

แล้วทำไมถึงฟรีแบบไม่จำกัด?… จริงๆแล้วการทำงานแบบนี้ Google Form มีปลั๊กอินส่วนเสริมให้ใช้งานกันฟรีๆ เช่น Form Publisher, Autocratgo เป็นต้น แต่ฟรีแบบจำกัดจำนวนคือ PDF 20 ไฟล์/เดือน หุหุ…

 จึงต้องดิ้นรนหาทางเขียนโค้คเอาเอง ต้องขอบคุณแรงบันดาลใจจาก  ครูอภิวัฒน์”สอนสร้างสื่อ” ในการใช้งาน  Form Publisher  และ อ.ดรัณภพ ยิ้มแย้ม สำหรับโค้ค PdfService ที่ใช้เป็นแนวทางในการพัฒนา สำหรับซอร์โค้คที่ผมได้พัฒนาสามารถนำไปศึกษาและใช้งานได้ฟรีตามใบอนุญาต MIT โดยในนามชมรมโอเพนซอร์สและฟรีแวร์ ม.อ. ซึ่งสามารถนำไปประยุกต์ใช้งานสำหรับสร้างรับสมัครนักเรียนได้ครับ

สำหรับการสร้างระบบ ขอสรุปขั้นโดยภาพรวมดังนี้

  1. การสร้างโฟรเดอร์ระบบและการจัดเตรียมไฟล์แม่แบบ
  2. สร้าง Google Form
  3. สร้าง App script ที่ Google Sheets

1. การสร้างโฟรเดอร์ระบบและการจัดเตรียมไฟล์แม่แบบ

1.1 สมมุติว่ามีแบบฟอร์มรับสมัครที่เป็นไฟล์ word เราต้องแปลงให้เป็นรูปภาพก่อน ไปที่ https://convertio.co/th/docx-jpg

1.2 ไปที่ Google Drive สร้างโฟรเดอร์ตั้งชื่อ “ระบบรับสมัคร” ซึ่งภายในโฟรเดอร์ประกอบด้วย

โฟรเดอร์ย่อย PDF , โฟรเดอร์ย่อยไฟล์อัพโหลด (เมื่อทำข้อ 2.1) ,  ไฟล์แม่แบบ Google Slides (เมื่อทำข้อ 1.3) , ไฟล์ Google Form (เมื่อทำข้อ 2.1), ไฟล์ Google Sheet (เมื่อทำข้อ 2.3),  แสดงดังภาพ

1.3 สร้างไฟล์ Google Slides เพื่อสร้างไฟล์เทมเพลตตั้งชื่อว่า “แม่แบบ”  แล้วตั้งค่าขนาดไลด์เป็น A4 คลิกเมนู File > Page setup > Custom (ใส่ค่า 8.3 x 11.7 inches)

1.4 นำรูปจากข้อ 1.1 ไปวาง

1.5 กำหนดตำแหน่งสำหรับแทนที่ข้อความด้วยสัญลักษณ์ {……..}

1.6 ไปที่เป็นรูปภาพให้คลิกขวาที่รูปภาพแล้วคลิกเมนู “Alt Text” เพื่อตั้งชื่อให้รูปภาพสำหรับแทนที่รูปของผู้สมัคร

ในการตั้งชื่อรูปให้ขึ้นต้นด้วยคำว่า “รูปภาพ” ถ้ามีมากกว่า 1 รูป ให้ใส่เป็นเช่น รูปภาพ1 รูปภาพ2 รูปภาพ3 ฯลฯ ไปเรื่อยๆ จนครบทุกรูป

2.สร้าง Google Form

2.1 สร้างแบบฟอร์มตามช่องกรอกข้อมูลแบบกระดาษ โดยต้องกำหนดชื่อให้เหมือนกับข้อ 1.5

2.2 กดสร้างลิงค์กับ Google Sheets

3.สร้าง Apps Script ที่ Google Sheets

3.1 คลิกที่เมนู Extensions > Apps Script

3.2 ให้ก๊อปปี้โค้คนี้ไปใส่

โค้ด Save and Send PDF

function onFormSubmit(e) {

  
  // Creator:  Niti Chotkaew
  // Thankyou: อ.ดรัณภพ ยิ้มแย้ม
  // PSU-OSSF and MIT License 
  
  const ThaiMonth = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"];

  //สร้างวันที่ภาษาไทย
  let today = new Date();
  let day = today.getDate().toString()
  let month = ThaiMonth[today.getMonth()]
  let year = today.getFullYear() + 543
  let time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  let fullThaiDate = day + ' ' + month + ' ' + year + ' ' + time;

  //การกำหนดค่าที่ได้จาก Google Form และค่าอื่นๆ ที่ต้องการกรอกลงในแบบฟอร์ม
  //ชื่อ key ต้องตรงกับใน {...} ไฟล์แม่แบบ

  let data = {
    "ชื่อ": e.values[1],
    "นามสกุล": e.values[2],
    "เบอร์โทร": e.values[3],
    "อีเมล์": e.values[4],
    "รูปภาพ1": e.values[5],
    "รูปภาพ2": e.values[6],
    "วันที่สมัคร": fullThaiDate
  };

  //กำหนดค่า ID ไฟล์แม่แบบ Google Slides 
  let tmpFileId = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  //กำหนดโฟรเดอร์เก็บไฟล์ PDF
  let pdfFolder = DriveApp.getFoldersByName('PDF').next()

  ///////////////////////////////////////////////////////////

  //เปิดไฟล์แม่แบบ
  let templateFile = DriveApp.getFileById(tmpFileId)
  //สร้างก๊อปปี้ไฟล์แม่แบบไปเก็บในโฟรเดอร์ PDF 
  let tempFile = templateFile.makeCopy(pdfFolder)

  //เริ่มนำข้อมูลไปกรอกในไฟล์แม่แบบ
  try {
    //เปิดก๊อปปี้ไฟล์แม่แบบ
    let tempSlideFile = SlidesApp.openById(tempFile.getId())
    
    //เก็บรูปภาพทัั้งหมดในไฟล์แม่แบบ
    let imgs = []
    tempSlideFile.getSlides().forEach(slide => imgs.push(...slide.getImages()))

    //วนลูปกรอกข้อมูล
    Object.keys(data).forEach(key => {

      //กรณีไม่ใช่รูปภาพ... หาข้อความในไฟล์แม่แบบแล้วแทนที่ข้อความ
      if (key.search(/รูปภาพ*|\d/g) == -1) {
        return tempSlideFile.replaceAllText('{' + key + '}', data[key])
      }
      else {
        //key > -1 ถ้าเป็นรูปภาพ... วนลูปหารูปในไฟล์แม่แบบแล้วแทนที่รูปภาพ
        let url
        imgs.forEach(img => {
          //ดึงชื่อรูปภาพ
          let title = img.getTitle()
          //ถ้าชื่อเหมือนกันให้แทนที่รูปภาพ
          if (title == key) {
            //ตรวจสอบลิงค์รูปภาพและแทนที่รูปภาพ
            if (data[key].indexOf('drive.google.com') > -1) {
              let regex1 = /https:\/\/drive.google.com|\/open|\/uc|\/file|\/d|export|download|\?id|\/view|usp|=sharing/g
              let regex2 = /([\w-]){33}|([\w-]){19}/g
              let url_id = data[key].replace(regex1, "").match(regex2)[0]
              url = Drive.Files.get(url_id).driveId
              try {
                img.replace(url)
              } catch (err) {
                //Logger.log('fail to replace image')
                img.replace(DriveApp.getFileById(url_id).getDownloadUrl())
              }
            } else {
              url = data[key]
              img.replace(url)
            }
          }
        })
      }
    })
    //บันทึกและปิดไฟล์แม่แบบ
    tempSlideFile.saveAndClose()

    ///////////////////////////////////////////////////////////

    //สร้างไฟล์ PDF
    let pdfContentBlob = tempFile.getAs(MimeType.PDF);
    let filename = data["ชื่อ"] + '_' + data["นามสกุล"] + '_' + Utilities.formatDate(new Date(), 'GMT+7', 'dd-MM-yyyy hh-mm-ss')
    let file = pdfFolder.createFile(pdfContentBlob).setName(filename)
    
    ///////////////////////////////////////////////////////////

    //ส่งอีเมล์พร้อมแนบไฟล์ PDF
    //ไม่ต้องการส่งอีเมล์ให้คอมเมนต์ส่วนนี้ 
    var email = data["อีเมล์"];
    var subject = 'Your new documnet';
    var body = 'Hello, <br/>Check this PDF file.';
    GmailApp.sendEmail(email, subject, body, {
      htmlBody: body,
      attachments: [{
        fileName: filename,
        content: pdfContentBlob.getBytes(),
        mimeType: "application/pdf"
        }]
    });

    /////////////////////////////////////////////////////////

    //ลบก๊อปปี้ไฟล์แม่แบบ
    tempFile.setTrashed(true)

    /////////////////////////////////////////////////////////

    //การเพิ่มคอลัมน์ลิงค์ไฟล์ PDF ลงใน Google Sheets
    //โหลดค่า Google Sheets ที่กำลังใช้งาน
    var sheet = e.range.getSheet();
    //ดึงค่าแถวปัจจุบัน
    var current_row = e.range.getRowIndex();
    //กำหนดค่าคอลัมน์สุดท้าย
    var last_column = parseInt(sheet.getLastColumn() - 1)
    //เก็บค่าชื่อหัวตารางทั้งหมด
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    
    //ตรวจสอบว่ามีคอลัมน์ลิงค์ไฟล์ PDF แล้วหรือยัง? ถ้ายังไม่มีให้สร้าง
    if (headers[last_column] != 'PDF URL') {
      sheet.getRange(1, sheet.getLastColumn() + 1).setValue('PDF URL')
    }
    //ใส่ลิงค์ไฟล์ PDF ลงใน Sheets
    sheet.getRange(parseInt(current_row), sheet.getLastColumn()).setValue(file.getDownloadUrl())

  } catch (err) {
    //กรณีมีข้อผิดพลาดให้ลบลบก๊อปปี้ไฟล์แม่แบบ
    tempFile.setTrashed(true)
    throw new Error(err);
  }


}

3.3 แก้ไขเลข ID ไฟล์แม่แบบ Google Slides ที่ตัวแปร let tmpFileId

3.4 เพิ่ม Google Drive API

3.3 สร้าง Triggers  ที่หัวข้อ select event type เลือก “On form submit”

3.3 ระบบจะถามเรื่องสิทธิ  Authorization required ให้คลิกอนุญาตเพื่อให้สคิปต์ทำงานได้

เสร็จเรียบร้อย…

ทดสอบลองกรอกข้อมูลที่ Google Form เสร็จลองไปดูที่โฟรเดอร์ PDF ระบบสร้างไฟล์ PDF เรียบร้อย

และลองไปเช๊คอีเมล์… ระบบได้ส่งสำเนาไฟล์ PDF มาให้

สุดท้าย…สามารถดาวน์โหลดตัวอย่างโปรเจกได้ คลิกที่นี่ ครับ

อ้างอิงสำหรับศึกษาเพิ่มเติม

จัดทำโดย นาย นิติ โชติแก้ว ชมรมโอเพนซอร์สและฟรีแวร์ ม.อ.