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

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 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #003300;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFF;">🪄 หน่วยที่ 2 EP.4: แปลงโค้ดเป็นแอปพลิเคชัน (.exe)</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #C8E6C9; font-weight: bold;">Make Your App Executable with PyInstaller</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">เขียนโปรแกรมรับข้อมูลเสร็จแล้ว! แต่ปัญหาคือ ไฟล์ที่เราเขียนมันนามสกุล <strong>.py</strong> ครับ ซึ่งถ้าเราส่งไฟล์นี้ไปให้เพื่อน หรือส่งให้ลูกค้าเปิด พวกเขาจะต้องมีโปรแกรม Python ติดตั้งอยู่ในเครื่องด้วยถึงจะเปิดได้... <em>แบบนี้ไม่สะดวกแน่ๆ!</em></p>
        <p style="font-size: 18px;">ดังนั้น เราต้องทำ <strong>"เวทมนตร์แปลงร่าง"</strong> ให้ไฟล์ .py กลายเป็นโปรแกรมสำเร็จรูป นามสกุล <strong>.exe (Executable)</strong> ที่ใครก็ดับเบิลคลิกเปิดใช้งานได้ทันทีครับ!</p>

<h3 style="color: #1B5E20; border-left: 5px solid #4CAF50; padding-left: 15px; font-size: 22px; margin-top: 30px;">🛠️ 1. รู้จักกับเครื่องมือ PyInstaller</h3>
        <p><strong>PyInstaller</strong> คือเครื่องมือ (Package) พิเศษที่จะทำหน้าที่แพ็คโค้ดของเรา รวมถึงไลบรารีต่างๆ (เช่น Tkinter) ห่อรวมกันเป็นก้อนเดียวให้กลายเป็นไฟล์ <code>.exe</code> ครับ โดยเราจะต้องสั่งงานมันผ่านหน้าต่างสีดำๆ ที่เรียกว่า <strong>Command Prompt (cmd)</strong></p>

<h3 style="color: #1B5E20; border-left: 5px solid #4CAF50; padding-left: 15px; font-size: 22px; margin-top: 35px;">💻 2. ขั้นตอนการเสกไฟล์ .exe (ทำทีละสเต็ป)</h3>
        
        <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 15px;">
            
            <div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border: 1px solid #E0E0E0; border-left: 6px solid #2196F3;">
                <strong style="color: #1565C0; font-size: 18px;">ขั้นที่ 1: ติดตั้ง PyInstaller ลงในเครื่อง (ทำแค่ครั้งแรกครั้งเดียว)</strong>
                <p style="font-size: 14px; margin-top: 10px; margin-bottom: 10px;">เปิดหน้าต่าง Command Prompt (พิมพ์ cmd ในช่องค้นหาของ Windows) แล้วพิมพ์คำสั่งด้านล่างนี้ จากนั้นกด Enter เพื่อดาวน์โหลดเครื่องมือ:</p>
                <code style="background: #263238; color: #4DB6AC; padding: 10px; border-radius: 6px; display: block; font-family: 'Courier New', Courier, monospace; font-size: 16px;">py -m pip install pyinstaller</code>
            </div>

<div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border: 1px solid #E0E0E0; border-left: 6px solid #FF9800;">
                <strong style="color: #E65100; font-size: 18px;">ขั้นที่ 2: เดินทางไปยังโฟลเดอร์ที่เก็บไฟล์โค้ด (Change Directory)</strong>
                <p style="font-size: 14px; margin-top: 10px; margin-bottom: 10px;">สมมติว่าไฟล์โค้ด <code>my_app.py</code> ของเราอยู่ที่หน้า Desktop เราต้องสั่งให้ cmd เดินทางไปที่ Desktop ก่อน ด้วยคำสั่ง <strong>cd (Change Directory)</strong>:</p>
                <code style="background: #263238; color: #FFB74D; padding: 10px; border-radius: 6px; display: block; font-family: 'Courier New', Courier, monospace; font-size: 16px;">cd Desktop</code>
            </div>

<div style="background: #FAFAFA; padding: 20px; border-radius: 12px; border: 1px solid #E0E0E0; border-left: 6px solid #E91E63;">
                <strong style="color: #C2185B; font-size: 18px;">ขั้นที่ 3: ร่ายมนต์แปลงไฟล์ (Build Executable)</strong>
                <p style="font-size: 14px; margin-top: 10px; margin-bottom: 10px;">เมื่อยืนอยู่ถูกที่แล้ว ให้พิมพ์คำสั่งแปลงไฟล์ตามด้วยชื่อไฟล์โค้ดของเรา (อย่าลืมใส่ <code>--onefile</code> เพื่อให้โปรแกรมห่อทุกอย่างออกมาเป็นไฟล์ .exe เพียงไฟล์เดียวให้ดูสะอาดตาครับ):</p>
                <code style="background: #263238; color: #F48FB1; padding: 10px; border-radius: 6px; display: block; font-family: 'Courier New', Courier, monospace; font-size: 16px;">py -m PyInstaller --onefile my_app.py</code>
                <p style="font-size: 13px; color: #757575; margin-top: 10px; margin-bottom: 0;"><em>รอจนกว่าระบบจะประมวลผลเสร็จ และขึ้นคำว่า "completed successfully"</em></p>
            </div>

<div style="background: #E8F5E9; padding: 20px; border-radius: 12px; border: 2px solid #81C784; text-align: center;">
                <strong style="color: #2E7D32; font-size: 18px;">🎁 ขั้นที่ 4: รับผลงาน!</strong>
                <p style="font-size: 14px; margin-top: 10px; margin-bottom: 0;">ไปดูที่หน้า Desktop ของเรา จะพบโฟลเดอร์ใหม่โผล่ขึ้นมา ให้เข้าไปที่ <strong>โฟลเดอร์ชื่อ dist (Distribution)</strong> เราจะพบกับไฟล์ <code>my_app.exe</code> วางอยู่ข้างใน พร้อมก๊อปปี้ไปแจกจ่ายให้ทุกคนใช้งานได้เลย!</p>
            </div>

</div>
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #2E7D32; 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: #C8E6C9;">ทดสอบความเข้าใจเรื่องการแปลงไฟล์โปรแกรม</p>
        </div>
        
        <div style="border: 2px solid #2E7D32; 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: #1B5E20;">ข้อที่ 1: เหตุผลสำคัญที่สุดที่เราต้องแปลงไฟล์ .py ให้กลายเป็นไฟล์ .exe คือข้อใด?</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;">ก. เพื่อป้องกันไม่ให้แอปพลิเคชันติดไวรัสจากอินเทอร์เน็ต</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! ไฟล์ .exe เป็นโปรแกรมสำเร็จรูปของระบบ Windows ทำให้คอมพิวเตอร์เครื่องอื่นสามารถดับเบิลคลิกเปิดใช้งานได้ทันที โดยไม่จำเป็นต้องติดตั้งโปรแกรม Python หรือโหลดไลบรารีใดๆ ไว้ในเครื่องเลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อให้ผู้ใช้งานคอมพิวเตอร์เครื่องอื่นสามารถเปิดแอปพลิเคชันได้ทันที โดยไม่ต้องติดตั้งโปรแกรม Python ไว้ในเครื่อง</button>
                    <button onclick="checkAnswer(this, false, 'การแปลงไฟล์ .exe ไม่ได้ทำให้สีสันหรือหน้าตาของแอปสวยขึ้นครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพื่อทำให้หน้าตาของแอปพลิเคชัน (GUI) มีสีสันที่สวยงามและทันสมัยมากขึ้น</button>
                    <button onclick="checkAnswer(this, false, 'ไฟล์ .exe มักจะมีขนาดใหญ่กว่า .py ด้วยซ้ำครับ เพราะมันห่อเอาเครื่องมือทั้งหมดรวมเข้าไปด้วย')" 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: #1B5E20;">ข้อที่ 2: เครื่องมือที่ใช้ในการแปลงไฟล์ Python ให้กลายเป็นแอปพลิเคชันบน Windows มีชื่อว่าอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'Tkinter เป็นเครื่องมือสำหรับสร้างหน้าจอ GUI ครับ ไม่ใช่เครื่องมือแปลงไฟล์')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. Tkinter</button>
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! PyInstaller คือแพ็กเกจ (Package) สำหรับแพ็คโค้ดให้กลายเป็นไฟล์ Executable (.exe)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. PyInstaller</button>
                    <button onclick="checkAnswer(this, false, 'Command Prompt คือหน้าต่างสีดำที่ใช้ป้อนคำสั่งครับ ไม่ใช่ชื่อเครื่องมือแปลงไฟล์โดยตรง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Command Prompt</button>
                    <button onclick="checkAnswer(this, false, 'messagebox เป็นเครื่องมือเด้งหน้าต่างแจ้งเตือนครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. messagebox</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: #1B5E20;">ข้อที่ 3: ในหน้าต่าง Command Prompt (cmd) คำสั่ง <code>cd</code> ย่อมาจากอะไร และมีหน้าที่อะไร?</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;">ก. Clear Data ใช้สำหรับลบข้อมูลในหน้าจอทิ้ง</button>
                    <button onclick="checkAnswer(this, false, 'การก๊อปปี้ไฟล์ใช้คำสั่ง copy ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. Copy Document ใช้สำหรับคัดลอกไฟล์เอกสาร</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! cd (Change Directory) เป็นคำสั่งพื้นฐานในการเปลี่ยนเส้นทาง หรือเดินเข้าไปยังโฟลเดอร์ต่างๆ เพื่อให้ระบบไปทำงานในตำแหน่งที่เราเก็บไฟล์โค้ดไว้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. Change Directory ใช้สำหรับเปลี่ยนเส้นทางหรือย้ายเข้าไปในโฟลเดอร์ที่ต้องการ</button>
                    <button onclick="checkAnswer(this, false, 'ไม่มีคำสั่ง Create Download ใน cmd ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. Create Download ใช้สำหรับเริ่มดาวน์โหลดโปรแกรม</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: #1B5E20;">ข้อที่ 4: การใส่ส่วนขยาย <code>--onefile</code> ลงไปในคำสั่งแปลงไฟล์ (เช่น <code>py -m PyInstaller --onefile test.py</code>) ส่งผลอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! ถ้าไม่ใส่คำสั่งนี้ โปรแกรมจะแตกไฟล์ระบบยุ่บยั่บออกมาเป็นร้อยๆ ไฟล์ การใส่ --onefile จะช่วยแพ็คทุกอย่างให้เป็นไฟล์ .exe ก้อนเดียว ทำให้ส่งให้คนอื่นง่ายมากครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ทำให้โปรแกรมถูกแพ็ครวมออกมาเป็นไฟล์ .exe เพียงไฟล์เดียว ไม่กระจายตัว</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, false, 'การใส่รหัสผ่านต้องเขียนโค้ดเพิ่มเองครับ คำสั่งนี้ไม่ได้ช่วยเข้ารหัส')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ทำให้โปรแกรมมีระบบรักษาความปลอดภัย ต้องใส่รหัสผ่านก่อนเปิดใช้งาน</button>
                    <button onclick="checkAnswer(this, false, 'คำสั่งนี้ไม่ได้จำกัดสิทธิ์ให้คอมพิวเตอร์เปิดได้เครื่องเดียวครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ทำให้คอมพิวเตอร์สามารถเปิดแอปพลิเคชันนี้ได้เพียง 1 เครื่องเท่านั้น</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: #1B5E20;">ข้อที่ 5: หลังจากที่ระบบรันคำสั่ง <code>PyInstaller</code> เสร็จสมบูรณ์แล้ว นักเรียนจะสามารถเข้าไปหาไฟล์ <code>.exe</code> ได้ที่โฟลเดอร์ใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'โฟลเดอร์ build ใช้เก็บไฟล์ชั่วคราวระหว่างการประมวลผลครับ แต่อันที่พร้อมใช้งานไม่ได้อยู่ที่นี่')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. โฟลเดอร์ build</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่โฟลเดอร์ชื่อ Python ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. โฟลเดอร์ Python</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! ผลผลิตที่เสร็จสมบูรณ์และพร้อมนำไปแจกจ่าย (Distribution) จะถูกเก็บไว้ในโฟลเดอร์ที่ชื่อว่า dist เสมอครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. โฟลเดอร์ dist</button>
                    <button onclick="checkAnswer(this, false, 'โฟลเดอร์ Download เป็นโฟลเดอร์ระบบของวินโดวส์ ไม่ใช่โฟลเดอร์ที่โปรแกรมสร้างให้ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. โฟลเดอร์ Download</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 = '#E8F5E9';
        btn.style.borderColor = '#4CAF50';
        btn.style.color = '#1B5E20';
        btn.style.opacity = '1';
        feedback.style.background = '#E8F5E9';
        feedback.style.color = '#2E7D32';
        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>