AI IS YOUR CO-PILOT / ม.4/1–4/4

กล้าลอง.
สร้างแอปแรกของเรา

ใช้ AI เป็นผู้ช่วยสร้างแอปแรกด้วย Google Apps Script

2 คาบสุ่มภารกิจสร้างสรรค์ครูตรวจ /10

แอปสุ่ม ≠ ปัญญาประดิษฐ์

เราใช้ AI ช่วยอธิบายและเขียนโค้ด แต่แอปนี้สุ่มจากรายการด้วย Math.random() ไม่ได้เรียนรู้หรือคิดคำตอบใหม่ ไม่ใช้ AI API key และไม่ต้องจ่ายค่าเรียก AI API

FOLLOW THE STEPS

คู่มือที่ทำตามได้จริง

ดาวน์โหลดคู่มือภาษาไทย ↓

อ่านแล้วลงมือทีละขั้น ถ้ายังส่งไม่ได้ ดาวน์โหลดคู่มือและเก็บคำตอบไว้ก่อนโดยไม่ต้องรอระบบ

เป้าหมาย

สร้างเว็บแอปสุ่มภารกิจสร้างสรรค์ที่ทำงานได้ ปรับชื่อ สี และภารกิจเอง เพิ่มฟีเจอร์ 1 อย่าง และอธิบายสิ่งที่ทำ/AI ช่วย/ผลทดสอบได้

แอปสุ่มนี้ไม่ใช่ AI: Math.random() เลือกจากรายการที่เราเขียนไว้ ไม่ได้เรียนรู้หรือคิดคำตอบใหม่ AI เป็นผู้ช่วยอธิบายและเขียนโค้ดระหว่างสร้างแอป ไม่ได้อยู่ในแอปที่รัน ไม่มี API key และไม่มีค่าเรียก AI API

เตรียมก่อนเริ่ม

ใช้คอมพิวเตอร์และบัญชี Google ที่โรงเรียนอนุญาต เปิด script.google.com ด้วยตนเอง แนะนำ Chrome/Edge บนคอมพิวเตอร์ ถ้าใช้โทรศัพท์ให้เปิดโหมดเว็บไซต์เดสก์ท็อป อย่าใส่ชื่อจริง เลขประจำตัว รูปเพื่อน รหัสผ่าน หรือข้อมูลส่วนตัวในแอปสาธารณะ/คำถาม AI ใช้นามแฝงได้

หากโรงเรียนบล็อก Apps Script หรือ AI ให้แจ้งครู ใช้โค้ดเริ่มต้นและขอให้ครูช่วยอธิบายแทน ไม่จำเป็นต้องสมัครบริการเสียเงิน

คาบที่ 1 — ทำให้แอปแรกทำงาน (ประมาณ 50 นาที)

1. (5 นาที) อ่านเป้าหมาย ตกลงภารกิจที่ปลอดภัย ไม่ท้าทายอันตราย ไม่เก็บข้อมูลส่วนตัว

2. (10 นาที) ใช้ AI ถามว่า HTML/CSS/JavaScript และ doGet ทำหน้าที่อะไร อ่านคำตอบแล้วตรวจเทียบโค้ด ไม่เชื่อทุกคำตอบทันที

3. (20 นาที) เปิด script.google.com > โครงการใหม่ ตั้งชื่อโครงการ เช่น Creative Mission Lab ลบโค้ดใน Code.gs แล้ววาง Code.gs ที่ให้มาทั้งไฟล์ กด + > HTML ตั้งชื่อ Index (ตัว I ใหญ่ ไม่พิมพ์ .html ซ้ำ) วาง Index.html ทั้งไฟล์ แล้วบันทึกทั้งสองไฟล์

4. (15 นาที) ด้านขวาบน Deploy/ทำให้ใช้งานได้ > Test deployments/ทดสอบการทำให้ใช้งานได้ > เลือกประเภท Web app/เว็บแอป (อาจอยู่ที่รูปเฟือง) เปิด URL ลงท้าย /dev ด้วยบัญชีผู้แก้ไขโครงการ กดสุ่มอย่างน้อย 5 ครั้ง ตัวอย่างอาจซ้ำได้ตามธรรมชาติของการสุ่ม ถ้าไม่มีตัวเลือกดังกล่าวให้ใช้ New deployment ตามคาบที่ 2 เพื่อทดสอบแทน

คาบที่ 2 — ทำให้เป็นของเรา ทดสอบ และส่ง (ประมาณ 50 นาที)

1. (15 นาที) แก้ชื่อใน h1 ให้เป็นชื่อแอป/นามแฝง แก้ --accent ใน CSS เช่น #a3e635 และแก้ missions ให้มีภารกิจปลอดภัยอย่างน้อย 5 ข้อ ระวังเครื่องหมายคำพูดและจุลภาค คงโครงสร้าง array ไว้

2. (15 นาที) เพิ่มฟีเจอร์เอง 1 อย่าง: ตัวนับครั้งสุ่ม, ปุ่มรีเซ็ต, หรือไม่สุ่มซ้ำกับครั้งก่อน ใช้ AI อธิบายทีละบรรทัดได้ อย่าคัดลอกสิ่งที่ไม่เข้าใจ ทดสอบว่าเพิ่มแล้วไม่ทำให้ปุ่มเดิมเสีย

3. (10 นาที) Deploy > New deployment/การทำให้ใช้งานได้รายการใหม่ > เลือก Web app ตั้ง Execute as/ดำเนินการในนาม เป็นตัวเรา และ Who has access/ผู้มีสิทธิ์เข้าถึง เป็นกลุ่มที่โรงเรียนอนุญาตและครูเปิดดูได้ ไม่จำเป็นต้องเปิดสาธารณะ กด Deploy หาก Google ขอสิทธิ์ให้อ่านและตรวจว่าเป็นโครงการของเรา โค้ดเริ่มต้นไม่ใช้ Drive/Sheets/Gmail; ถ้าถูกบล็อกหรือขอสิทธิ์ที่ไม่เข้าใจให้หยุดถามครู ไม่ข้ามคำเตือนตามคำสั่งจาก AI คัดลอก URL ลงท้าย /exec

4. (10 นาที) เปิด /exec ด้วยบัญชีที่มีสิทธิ์ ทดสอบสุ่มอย่างน้อย 5 ครั้ง ดูมือถือ/ย่อหน้าต่าง ตรวจชื่อ/สี/ภารกิจ/ฟีเจอร์ใหม่ จดผลที่เห็นจริง ถ้าแก้โค้ดหลังเผยแพร่: บันทึก > Deploy > Manage deployments > รูปดินสอ > Version: New version > Deploy แล้วเปิด /exec เดิมใหม่ ส่วน /dev ใช้โค้ดที่บันทึกล่าสุดแต่เปิดได้เฉพาะผู้แก้ไข

ตัวอย่างคำถาม AI ที่ปลอดภัย (คัดลอกได้)

ฉันเป็นนักเรียนเริ่มต้น กำลังทำแอปสุ่มภารกิจสร้างสรรค์ใน Google Apps Script ด้วย Code.gs และ Index.html โดยไม่ใช้ API key ไม่เก็บข้อมูลส่วนตัว โปรดอธิบาย doGet, array missions, Math.random และ textContent ทีละส่วนด้วยภาษาไทยง่าย ๆ จากนั้นแนะนำการเพิ่มตัวนับจำนวนครั้งที่สุ่ม 1 อย่าง ระบุไฟล์และตำแหน่งที่ต้องแก้ พร้อมวิธีทดสอบ อย่าเพิ่มบริการภายนอกหรือขอสิทธิ์ Drive/Gmail ขอให้ฉันลองอธิบายโค้ดกลับก่อนสรุป

ช่วยด้วย แอปยังไม่ขึ้น!

- หา Index ไม่พบ: สร้างไฟล์ HTML ชื่อ Index และตรวจตัวพิมพ์ใหญ่ให้ตรงกับ createHtmlOutputFromFile('Index')

- กดสุ่มแล้วเงียบ: ตรวจ id random-button และ mission ว่าตรงกัน ตรวจวงเล็บ คำพูด และจุลภาคใน missions (เปิด Console ดู error ได้) ถาม AI ด้วยข้อความ error/โค้ดส่วนเล็กที่ไม่มีข้อมูลส่วนตัว

- เพื่อนหรือครูเปิด /dev ไม่ได้: เป็นลิงก์ทดสอบสำหรับผู้แก้ไข ใช้ /exec และตรวจสิทธิ์ตามนโยบายโรงเรียน ไม่แชร์สิทธิ์แก้ไขโครงการให้ทุกคน

- /exec ยังเป็นสีเดิม: เผยแพร่ New version ผ่าน Manage deployments แล้วโหลดใหม่

- ส่งใบงานไม่ได้: เก็บคำตอบในไฟล์ก่อน ตรวจห้อง เลขที่ และชื่อเต็มของตนเอง หากยังไม่ได้ให้แจ้งครู ดาวน์โหลดคู่มือและทำงานต่อได้ ไม่ต้องใช้ทะเบียนของคนอื่น

ส่งงาน

ห้อง ม.4/1–4/4, เลขที่, ชื่อ-นามสกุลเต็มตามทะเบียน; ลิงก์แอป (ไม่บังคับ ถ้าเผยแพร่ไม่ได้ให้อธิบายในผลทดสอบ); สิ่งที่แก้; AI ช่วยอย่างไรหรือไม่ได้ใช้เพราะอะไร; ทดสอบอะไรและได้ผลจริงอย่างไร; ฟีเจอร์เสริมพร้อมผลทดสอบ หากยังไม่สำเร็จให้บอกสิ่งที่ลองและปัญหา ไม่แต่งผลทดสอบ

ลิงก์รับเฉพาะ https://script.google.com/macros/s/รหัส/exec หรือ /dev ไม่มี query/fragment ชื่อจริงใช้ในแบบส่งงานส่วนตัวนี้เท่านั้น ไม่ใส่ในโค้ดที่เผยแพร่

การส่งซ้ำใช้คำตอบล่าสุด เก็บบนฐานข้อมูลห้องเรียน ครูอ่านได้ผ่านหน้าส่วนตัว ส่งแล้วแสดง รอตรวจ ไม่ใช่ได้ 10 คะแนนทันที

เกณฑ์ครูตรวจรวม 10 คะแนน

- แอปทำงานได้ 4: เปิดแอป 1, กดสุ่มแสดงภารกิจ 2, ใช้ซ้ำได้ไม่พัง 1

- ปรับเป็นของตนเอง 2: ชื่อและสีอ่านง่าย 1, ภารกิจปลอดภัยอย่างน้อย 5 ข้อ 1

- ฟีเจอร์เสริม 2: ทำงานตามที่อธิบาย 1, มีผลทดสอบยืนยัน 1

- คำอธิบาย 2: อธิบายการแก้และบทบาท/ข้อจำกัด AI 1, ขั้นตอนและผลทดสอบจริง 1

ระบบนี้รับส่งและส่งออกคำตอบเพื่อครูตรวจภายนอก ยังไม่มีหน้าบันทึกคะแนนครู ไม่มีคะแนนคุณภาพอัตโนมัติ และไม่มีแบบทดสอบคิดคะแนนรวมแทนชิ้นงาน

YOUR STARTER KIT

สองไฟล์ เริ่มได้เลย.

Code.gs คือคำสั่งฝั่งเซิร์ฟเวอร์ ส่วน Index.html คือหน้าตาและการสุ่ม คัดลอกทั้งไฟล์ก่อน แล้วค่อยปรับทีละจุด

เปิดดูโค้ด Code.gs

// ไฟล์ฝั่ง Google Apps Script: ไม่ใช้ API key ไม่อ่านข้อมูลบัญชีหรือชีต
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('สุ่มภารกิจสร้างสรรค์');
}

เปิดดูโค้ด Index.html

<!DOCTYPE html>
<html lang="th">
<head>
  <base target="_top">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>สุ่มภารกิจสร้างสรรค์</title>
  <style>
    :root { --accent: #f54283; --ink: #201c35; }
    * { box-sizing: border-box; }
    body { margin: 0; padding: 24px; background: #fff5e9; color: var(--ink); font-family: system-ui, sans-serif; line-height: 1.8; }
    main { max-width: 620px; margin: 32px auto; background: white; border: 3px solid var(--ink); padding: clamp(20px, 5vw, 40px); box-shadow: 8px 8px 0 var(--ink); }
    h1 { line-height: 1.5; font-size: clamp(24px, 6vw, 36px); }
    #mission { min-height: 110px; border: 2px dashed var(--accent); padding: 20px; font-size: 22px; overflow-wrap: anywhere; }
    button { border: 2px solid var(--ink); padding: 12px 24px; min-height: 48px; background: var(--accent); color: var(--ink); font: inherit; font-weight: bold; cursor: pointer; }
    button:focus-visible { outline: 3px solid #315ee7; outline-offset: 4px; }
    small { display: block; margin-top: 24px; }
  </style>
</head>
<body>
  <main>
    <p>MY FIRST APP / นักสร้างสรรค์รุ่นใหม่</p>
    <!-- ใช้ชื่อเล่นหรือนามแฝง ไม่ใส่ข้อมูลส่วนตัว -->
    <h1 id="app-title">ภารกิจสร้างสรรค์ของนักลอง</h1>
    <p>กดปุ่มแล้วลองทำภารกิจเล็ก ๆ ที่ปลอดภัยกัน!</p>
    <p id="mission" role="status" aria-live="polite">พร้อมแล้วกดสุ่มได้เลย ✨</p>
    <button type="button" id="random-button">สุ่มภารกิจใหม่ ↗</button>
    <small>นี่คือโปรแกรมสุ่มตามรายการ ไม่ใช่ AI • AI เป็นผู้ช่วยอธิบายและเขียนโค้ดตอนสร้างแอป</small>
  </main>
  <script>
    // แก้ข้อความในเครื่องหมายคำพูด เพิ่มภารกิจได้ อย่าลืมเครื่องหมายจุลภาค
    const missions = [
      'วาดสิ่งประดิษฐ์ที่ช่วยลดขยะใน 1 นาที',
      'เขียนคำขวัญรักษ์โลกให้ได้ 1 ประโยค',
      'คิดชื่อแอปช่วยการเรียน 3 ชื่อ',
      'ร่างไอเดียโปสเตอร์ชวนเพื่อนอ่านหนังสือ',
      'แต่งเรื่องสั้น 3 บรรทัดที่มีคำว่า ความกล้า'
    ];
    function randomMission() {
      const index = Math.floor(Math.random() * missions.length);
      document.getElementById('mission').textContent = missions[index];
    }
    document.getElementById('random-button').addEventListener('click', randomMission);
    // ภารกิจเสริม: เพิ่มตัวนับ หรือปุ่มรีเซ็ต หรือสุ่มแบบไม่ซ้ำครั้งก่อน
  </script>
</body>
</html>

SHOW YOUR PROCESS

ส่งทั้งผลงาน และวิธีคิด.

สำหรับ ม.4/1–4/4 เท่านั้น ใช้ชื่อเต็มตามทะเบียน ไม่ต้องกรอกรหัสนักเรียน ชื่อในแบบส่งงานใช้ตรวจตัวตน อย่าใส่รหัสผ่านหรือข้อมูลส่วนตัวในคำตอบ

เกณฑ์ 10 คะแนน — ครูตรวจเอง

แอปทำงาน 4 • ปรับเป็นของตนเอง 2 • ฟีเจอร์เสริม 2 • คำอธิบายและผลทดสอบ 2

ระบบแสดงส่งแล้ว / รอตรวจ ไม่ให้คะแนนคุณภาพอัตโนมัติ ครูอ่านคำตอบและส่งออกเพื่อตรวจภายนอกระบบ ส่งซ้ำได้โดยใช้คำตอบล่าสุด

ห้องเลขที่ชื่อ-นามสกุลเต็ม

ลิงก์เว็บแอป (ไม่บังคับ)

รับเฉพาะลิงก์ Google Apps Script /exec หรือ /dev ไม่มีพารามิเตอร์ ถ้าเผยแพร่ไม่ได้ให้เว้นว่างแล้วอธิบายปัญหาในผลทดสอบ • /dev เปิดได้เฉพาะผู้แก้ไข ครูอาจต้องตรวจผ่าน /exec หรือดูหน้าจอในห้องเรียน

เปลี่ยนอะไรให้เป็นของเรา?บอกชื่อแอป สี และภารกิจที่เปลี่ยน พร้อมตำแหน่งโค้ดที่แก้ (10–1,200 ตัวอักษร)AI ช่วยอย่างไร และเราตรวจคำตอบอย่างไร?ยกตัวอย่างคำถาม/คำอธิบายที่ใช้ ถ้าไม่ได้ใช้ AI ให้บอกเหตุผลและแหล่งช่วยเหลือ (10–1,200 ตัวอักษร)ทดสอบอะไร แล้วเกิดอะไรขึ้นจริง?เช่น เปิด /exec กดสุ่ม 5 ครั้ง ทดลองมือถือ ถ้าเปิดไม่ได้ให้บอกปัญหาและสิ่งที่ลอง (10–1,200 ตัวอักษร)ฟีเจอร์เสริมของเราคืออะไร?อธิบายตัวนับ / รีเซ็ต / ไม่ซ้ำ หรือไอเดียใหม่ พร้อมผลทดสอบ ถ้ายังไม่สำเร็จให้บอกตรง ๆ (10–1,200 ตัวอักษร)

คำตอบเก็บในฐานข้อมูลห้องเรียน ไม่ใช่แค่เบราว์เซอร์ ครูเปิดผ่านหน้าส่วนตัวได้ ถ้าส่งไม่สำเร็จให้เก็บคำตอบลงไฟล์ก่อนปิดหน้า

← กลับรายวิชาปัญญาประดิษฐ์ ม.4