แก้ไขบทเรียน

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 'Prompt', sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: auto; background: #ffffff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
    
    <div style="background: linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #00E5FF;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5); color: #FFF;">📲 หน่วยที่ 5 EP.4: ลงมือสร้างระบบ IoT ควบคุมผ่านมือถือ</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #84FFFF; font-weight: bold;">Coding & Dashboard Design</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">เรียนทฤษฎีกันมาครบแล้ว ถึงเวลาประกอบร่างความรู้ทั้งหมดเข้าด้วยกันครับ! วันนี้เราจะมาจำลองการสร้าง <strong>"ระบบเปิด-ปิดหลอดไฟผ่านสมาร์ตโฟน"</strong> โดยใช้สมาร์ตโฟนเป็นผู้สั่งการ (Publisher) ส่งผ่านตัวกลาง (Broker) ไปยังบอร์ดสมองกล (Subscriber) เพื่อให้หลอดไฟสว่างขึ้นครับ!</p>

<h3 style="color: #0F2027; border-left: 5px solid #00E5FF; padding-left: 15px; font-size: 22px; margin-top: 30px;">📱 1. สร้างหน้าปัดสั่งการด้วยแอป "IoT MQTT Panel"</h3>
        <p>เราจะเปลี่ยนหน้าจอมือถือธรรมดา ให้กลายเป็นรีโมตสุดล้ำด้วยแอปพลิเคชัน <strong>IoT MQTT Panel</strong> (หรือแอปแนว Dashboard อื่นๆ) โดยมีขั้นตอนง่ายๆ ดังนี้:</p>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            <div style="background: #E0F7FA; padding: 20px; border-radius: 12px; border-left: 6px solid #00BCD4;">
                <strong style="color: #006064; font-size: 16px;">ขั้นตอนที่ 1: เชื่อมต่อ Broker (เซิร์ฟเวอร์ตัวกลาง)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">เปิดแอปขึ้นมา สิ่งแรกที่ต้องทำคือกรอก <strong>IP Address หรือ URL ของ Broker</strong> เพื่อให้มือถือรู้ว่าจะต้องส่งข้อมูลไปที่เซิร์ฟเวอร์ไหน (เช่น tcp://broker.hivemq.com)</p>
            </div>
            
            <div style="background: #ECEFF1; padding: 20px; border-radius: 12px; border-left: 6px solid #607D8B;">
                <strong style="color: #37474F; font-size: 16px;">ขั้นตอนที่ 2: สร้างวิดเจ็ต (Add Widget)</strong><br>
                <p style="font-size: 14px; margin-top: 5px; margin-bottom: 0;">ในกรณีที่เราต้องการเปิด-ปิดไฟ ให้เราเลือกวิดเจ็ตประเภท <strong>สวิตช์ (Switch หรือ Button)</strong> นำมาวางบนหน้าจอ Dashboard</p>
            </div>
        </div>

<h3 style="color: #0F2027; border-left: 5px solid #00E5FF; padding-left: 15px; font-size: 22px; margin-top: 35px;">🔑 2. ถอดรหัสหัวใจ IoT: Topic และ Payload</h3>
        <p>เมื่อเราสร้างสวิตช์บนแอปแล้ว เราต้องตั้งค่า "รหัสลับ" 2 อย่าง เพื่อให้สวิตช์ตัวนี้คุยกับหลอดไฟได้ถูกดวง ไม่ไปเปิดไฟบ้านคนอื่นครับ!</p>
        
        <ul style="margin-top: 10px; margin-bottom: 0; font-size: 15px; color: #333; line-height: 1.8;">
            <li><strong style="color: #00838F;">Topic (หัวข้อ/ช่องทาง):</strong> เปรียบเสมือน "จ่าหน้าซองจดหมาย" หรือเลขห้องแชท เช่น เราตั้งชื่อ Topic ว่า <code>home/bedroom/light1</code> เพื่อบอกให้รู้ว่านี่คือคำสั่งของไฟห้องนอนดวงที่ 1</li>
            <li><strong style="color: #E65100;">Payload (ข้อมูลที่ส่ง):</strong> เปรียบเสมือน "ข้อความในจดหมาย" เช่น ถ้าเราปัดสวิตช์เปิด แอปจะส่ง Payload คำว่า <code>ON</code> (หรือเลข <code>1</code>) ออกไป และถ้าปัดปิด จะส่งคำว่า <code>OFF</code> (หรือเลข <code>0</code>) ออกไปครับ</li>
        </ul>

<h3 style="color: #0F2027; border-left: 5px solid #00E5FF; padding-left: 15px; font-size: 22px; margin-top: 35px;">💻 3. Coding: เขียนโปรแกรมสั่งสมองกลให้ตื่นรู้</h3>
        <p>เมื่อมือถือส่งคำสั่งออกไปแล้ว ฝั่งฮาร์ดแวร์ (เช่น บอร์ด Raspberry Pi, NodeMCU หรือ KidBright) ก็ต้องมี <strong>โปรแกรมคอมพิวเตอร์ (Coding)</strong> ฝังไว้ เพื่อบอกมันว่าต้องทำตัวอย่างไร ซึ่งหลักการเขียนโปรแกรม (เช่น ภาษา Python) จะมีตรรกะดังนี้ครับ:</p>
        
        <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border: 1px solid #E0E0E0; margin-top: 15px;">
            <div style="background: #1E1E1E; color: #00FF00; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 14px; overflow-x: auto; margin-bottom: 15px;">
                1. เชื่อมต่อ Wi-Fi และ Broker ตัวเดียวกัน<br>
                2. Subscribe (ติดตาม) หัวข้อ "home/bedroom/light1"<br>
                3. วนลูปตรวจสอบข้อความ (Payload) ตลอดเวลา<br>
                4. IF (ถ้า Payload == "ON") {<br>
                    จ่ายไฟให้หลอดไฟสว่าง (Output HIGH)<br>
                  }<br>
                5. ELSE IF (ถ้า Payload == "OFF") {<br>
                    ตัดไฟหลอดไฟดับ (Output LOW)<br>
                  }
            </div>
            <p style="margin: 0; font-size: 15px;">เพียงเท่านี้! ทันทีที่เรากดสวิตช์ <strong>ON</strong> บนมือถือ ข้อมูลจะวิ่งไปที่ Broker แล้วส่งต่อมาที่บอร์ดสมองกล บอร์ดอ่านโค้ดเจอคำว่า ON ก็จะสั่งจ่ายไฟให้หลอดไฟสว่างขึ้นทันที นี่แหละครับคือเวทมนตร์ของ <strong>Internet of Things!</strong></p>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background: linear-gradient(135deg, #0F2027 0%, #203A43 100%); color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.4</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #84FFFF;">ทดสอบความเข้าใจเรื่องการสร้างระบบควบคุม IoT</p>
        </div>
        
        <div style="border: 2px solid #203A43; border-top: none; padding: 25px; border-radius: 0 0 12px 12px; background: #fafafa;">
            
            <div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #0F2027;">ข้อที่ 1: ในการใช้งานแอปพลิเคชัน IoT MQTT Panel สิ่งแรกที่นักเรียนต้องตั้งค่าเพื่อให้แอปสามารถสื่อสารกับระบบได้คืออะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เบอร์โทรศัพท์ไม่ต้องใช้ในการเชื่อมต่อระบบ MQTT ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. กรอกเบอร์โทรศัพท์ของสมาร์ตโฟนเครื่องนั้น</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! ต้องกรอก IP Address หรือ URL ของ Broker (เซิร์ฟเวอร์ตัวกลาง) ก่อน เพื่อให้แยปรู้ว่าจะต้องส่งข้อมูลไปที่ไหนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. กรอก IP Address หรือ URL ของ Broker (เซิร์ฟเวอร์ตัวกลาง)</button>
                    <button onclick="checkAnswer(this, false, 'การต่อบลูทูธใช้สำหรับการส่งข้อมูลระยะสั้นๆ ครับ ไม่ใช่อินเทอร์เน็ตของสรรพสิ่ง (IoT)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ทำการจับคู่ (Pairing) บลูทูธระหว่างมือถือกับหลอดไฟ</button>
                    <button onclick="checkAnswer(this, false, 'หมายเลขบัตรประชาชนไม่เกี่ยวข้องกับระบบเครือข่าย IoT ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ระบุหมายเลขประจำตัวประชาชนของผู้ใช้งาน</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #0F2027;">ข้อที่ 2: ในระบบ MQTT คำว่า "Topic" มีหน้าที่เปรียบได้กับสิ่งใดในชีวิตประจำวัน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'เนื้อหาในจดหมาย คือ Payload (ข้อมูล) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เนื้อหาข้อความที่อยู่ด้านในจดหมาย (Data)</button>
                    <button onclick="checkAnswer(this, false, 'บุรุษไปรษณีย์ คือ Broker (ตัวกลาง) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. บุรุษไปรษณีย์ที่คอยวิ่งส่งของ</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! Topic เปรียบเสมือนจ่าหน้าซอง หรือชื่อช่องทางการสื่อสาร ที่ช่วยให้ Broker รู้ว่าจะต้องส่งข้อมูลนี้ไปให้ใครที่ติดตามหัวข้อนี้อยู่ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. จ่าหน้าซองจดหมาย หรือ ชื่อช่องทางการสื่อสาร (Channel)</button>
                    <button onclick="checkAnswer(this, false, 'ตู้ไปรษณีย์เปรียบได้กับ Server ย่อยๆ ครับ ไม่ใช่ Topic')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ตู้ไปรษณีย์สีแดงที่ตั้งอยู่หน้าหมู่บ้าน</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #0F2027;">ข้อที่ 3: หากนักเรียนกดสวิตช์เปิดไฟบนมือถือ แล้วแอปส่งคำว่า "ON" ออกไป คำว่า "ON" นี้เรียกอีกอย่างหนึ่งว่าอะไรตามหลักของ MQTT?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! คำว่า ON หรือ OFF หรือตัวเลขต่างๆ ที่เป็นเนื้อหาของข้อมูล เราเรียกว่า Payload ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Payload (ข้อมูลที่ส่ง)</button>
                    <button onclick="checkAnswer(this, false, 'Topic คือชื่อหัวข้อหรือที่อยู่ปลายทางครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Topic (หัวข้อ)</button>
                    <button onclick="checkAnswer(this, false, 'Publisher คือตัวอุปกรณ์ที่ทำหน้าที่ส่ง (ในที่นี้คือมือถือ) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Publisher (ผู้ส่ง)</button>
                    <button onclick="checkAnswer(this, false, 'Gateway คือตัวกระจายสัญญาณ (เร้าเตอร์) ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. Gateway (เกตเวย์)</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #0F2027;">ข้อที่ 4: ในกระบวนการสั่งเปิดไฟจากมือถือ "บอร์ดสมองกล" (เช่น Raspberry Pi หรือ NodeMCU) ที่ต่ออยู่กับหลอดไฟ จะต้องทำหน้าที่อะไรเป็นหลัก?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'สมาร์ตโฟนต่างหากที่ทำหน้าที่ส่งข้อมูล (Publisher) ไปบอกให้เปิดไฟครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ส่งข้อมูลคำสั่งเปิดไฟ (Publish) ออกไปยังมือถือ</button>
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! บอร์ดสมองกลจะต้องทำหน้าที่ Subscribe (ติดตาม) หัวข้อนั้นไว้ตลอดเวลา พอมีคำสั่งเด้งมาปุ๊บ มันถึงจะเอาคำสั่งไปประมวลผลต่อได้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ติดตามรอรับข้อมูลคำสั่ง (Subscribe) เพื่อนำมาประมวลผลเปิดไฟ</button>
                    <button onclick="checkAnswer(this, false, 'บอร์ดสมองกลไม่ใช่ Broker ครับ Broker คือ Server บนอินเทอร์เน็ต')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ทำหน้าที่เป็น Broker เพื่อกระจายสัญญาณ Wi-Fi ให้ทั้งบ้าน</button>
                    <button onclick="checkAnswer(this, false, 'บอร์ดต้องใช้อินเทอร์เน็ตครับ ไม่อย่างนั้นจะรับคำสั่งจากมือถือที่อยู่นอกบ้านไม่ได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ทำหน้าที่ตัดการเชื่อมต่ออินเทอร์เน็ตทั้งหมดเพื่อความปลอดภัย</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 0; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #0F2027;">ข้อที่ 5: เหตุใดเราจึงต้อง "เขียนโปรแกรม (Coding)" ลงไปในบอร์ดสมองกล ทั้งที่เรากดปุ่มจากในแอปมือถือได้แล้ว?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ไม่จำเป็นครับ สามารถใช้บอร์ดสมองกลรุ่นอื่นๆ ที่รองรับได้หลากหลาย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เพราะแอปพลิเคชันบังคับให้ต้องเขียนโปรแกรมภาษา Python เท่านั้น</button>
                    <button onclick="checkAnswer(this, false, 'การแต่งหน้าจอแอป ไม่ต้องไปยุ่งกับโค้ดฝั่งสมองกลครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อใช้ในการออกแบบสีสันและความสวยงามของปุ่มกดบนมือถือ</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องที่สุดครับ! ฮาร์ดแวร์มันคิดเองไม่ได้ เราต้องเขียนโค้ด (เช่น คำสั่ง IF-ELSE) ไปสอนมันว่า ถ้าได้รับคำว่า ON ให้จ่ายไฟ ถ้าได้รับ OFF ให้ตัดไฟ มันถึงจะทำงานได้สำเร็จครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อสร้างตรรกะ (เงื่อนไข) สั่งการฮาร์ดแวร์ว่าเมื่อได้รับข้อมูลแต่ละแบบจะต้องทำอะไรต่อไป</button>
                    <button onclick="checkAnswer(this, false, 'ถ้าอินเทอร์เน็ตหลุด ระบบ IoT ส่วนใหญ่จะสั่งการผ่านมือถือจากนอกบ้านไม่ได้ครับ โค้ดไม่ได้ช่วยแก้ปัญหานี้โดยตรง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เพื่อให้ระบบสามารถส่งข้อมูลหากันได้แม้จะไม่มีอินเทอร์เน็ตก็ตาม</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

</div>
    </div>

</div>

buttons.forEach(b => {
        b.disabled = true;
        b.style.opacity = '0.6';
    });

feedback.style.display = 'block';
    feedback.style.padding = '12px';
    feedback.style.borderRadius = '8px';
    feedback.style.marginTop = '15px';

if(isCorrect) {
        btn.style.background = '#E0F7FA';
        btn.style.borderColor = '#00BCD4';
        btn.style.color = '#00838F';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F7FA';
        feedback.style.color = '#006064';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#C62828';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>