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

Post Views: 16,355

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

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

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

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

การสร้างโฟรเดอร์ระบบและการจัดเตรียมไฟล์แม่แบบ
สร้าง Google Form
สร้าง 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