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

Back

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

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

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

Title

Description

Keyword

Detail

.lesson-container * {
            box-sizing: border-box;
        }

.header-box {
            background: linear-gradient(135deg, #1A73E8 0%, #4285F4 100%); 
            color: white; 
            padding: 35px; 
            border-radius: 15px; 
            text-align: center; 
            margin-bottom: 35px; 
            border-bottom: 5px solid #1557B0;
        }
        .header-box h2 { margin: 0; font-size: 30px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.2); font-family: 'Prompt', sans-serif; }
        .header-box p { margin: 10px 0 0 0; font-size: 18px; color: #E8F0FE; }

h3.section-title {
            color: #1A73E8; 
            border-left: 5px solid #4285F4; 
            padding-left: 15px; 
            font-size: 22px; 
            margin-top: 35px;
            font-family: 'Prompt', sans-serif;
        }

/* 1. โครงสร้าง 3 ขั้นตอน */
        .types-container { display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap; }
        .type-box {
            flex: 1; min-width: 200px; 
            background-color: #F8F9FA; 
            border: 1px solid #DADCE0; 
            border-radius: 10px; 
            padding: 15px; text-align: center;
        }
        .type-box.active {
            background-color: #E8F0FE; 
            border: 2px solid #1A73E8; 
            transform: scale(1.03); 
            box-shadow: 0 4px 8px rgba(26, 115, 232, 0.2); 
        }

/* 2. อุปกรณ์เครื่องมือ */
        .symbol-grid {
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
            gap: 15px; margin-top: 15px;
        }
        .symbol-card { padding: 15px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; }
        
        /* 3. ภารกิจส่งงาน */
        .mission-container {
            background: #F8F9FA; border: 2px dashed #9AA0A6; padding: 25px; border-radius: 15px; margin-top: 25px; margin-bottom: 20px;
        }
        .mission-inner {
            background: white; padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid #DADCE0;
        }
        
        /* สไตล์กล่องสถานการณ์ */
        .scenario-box {
            background-color: #E6F4EA; border-left: 5px solid #1E8E3E; padding: 15px; margin-bottom: 15px; border-radius: 0 8px 8px 0;
        }
    </style>

<div class="lesson-container">
    
    
    <div class="header-box">
        <h2>🚀 บทเรียนที่ 1: ก้าวแรกสู่การเป็นนักพัฒนาแอป</h2>
        <p>เตรียมพื้นที่ทำงาน (Workspace) ให้พร้อม ก่อนลุยโปรเจกต์จริง!</p>
    </div>

<h3 class="section-title">1. บันได 3 ขั้น สู่การเป็น Junior Developer</h3>
    <p>ก่อนที่เราจะเริ่มเขียนโปรแกรมสร้างแอป เราต้องทำการ Setup สภาพแวดล้อมในการทำงานของเราให้พร้อมตาม 3 ขั้นตอนนี้ครับ:</p>
    <div class="types-container">
        <div class="type-box">
            <strong style="color: #424242;">1. ล็อกอินเข้าสู่ระบบ</strong><br>
            <span style="font-size: 14px;">(Authentication)</span><br>
            <span style="font-size: 13px; color: #757575;">✅ ยืนยันตัวตนด้วย Google Account</span>
        </div>
        <div class="type-box">
            <strong style="color: #424242;">2. ปรับแต่งพื้นที่ทำงาน</strong><br>
            <span style="font-size: 14px;">(Workspace Setup)</span><br>
            <span style="font-size: 13px; color: #757575;">✅ ตั้งค่าเมนูเป็นภาษาไทยเพื่อความรวดเร็ว</span>
        </div>
        <div class="type-box active">
            <strong style="color: #1A73E8; font-size: 18px;">3. ซิงก์อุปกรณ์ทดสอบ</strong><br>
            <span style="font-size: 14px; color: #1A73E8;">(Device Syncing)</span><br>
            <span style="font-size: 13px; color: #1557B0;">⭐ เชื่อมต่อแท็บเล็ตด้วย AI Companion</span>
        </div>
    </div>

<h3 class="section-title">2. อุปกรณ์คู่กายนักพัฒนา (Developer Tools)</h3>
    <p>ในการทำงานด้วย MIT App Inventor เราจะต้องใช้งานอุปกรณ์ 2 ชิ้นร่วมกันแบบ Real-time คือ:</p>
    
    <div class="symbol-grid">
        <div class="symbol-card" style="background: #FEF5E7; border: 2px solid #E67E22;">
            <div style="font-size: 50px; margin-bottom: 5px;">💻</div>
            <strong style="color: #D35400;">1. คอมพิวเตอร์ (พื้นที่ออกแบบ & เขียนโค้ด)</strong>
            <p style="font-size: 13px; margin: 5px 0 0 0;">ใช้สำหรับลากวางส่วนติดต่อผู้ใช้ (UI) และต่อบล็อกคำสั่งตรรกะ (Logic) ซึ่งเป็นสมองของแอปพลิเคชัน</p>
        </div>
        <div class="symbol-card" style="background: #E8F0FE; border: 2px solid #1A73E8;">
            <div style="font-size: 50px; margin-bottom: 5px;">📱</div>
            <strong style="color: #1557B0;">2. แท็บเล็ต (อุปกรณ์ทดสอบผลลัพธ์)</strong>
            <p style="font-size: 13px; margin: 5px 0 0 0;">ใช้แอป <b>MIT AI2 Companion</b> สแกน QR Code เพื่อทดสอบการทำงานของแอปที่เราเขียนขึ้นมาจริงๆ</p>
        </div>
    </div>

<div class="mission-container">
        <h3 style="color: #202124; margin-top: 0; display: flex; align-items: center; font-family: 'Prompt', sans-serif;">
            <span style="font-size: 30px; margin-right: 10px;">🎯</span> 3. ภารกิจส่งงาน: Mission 1
        </h3>
        <p>ให้นักเรียนทำตามขั้นตอนเพื่อเปิดระบบใช้งาน และแคปภาพหน้าจอส่งครูครับ:</p>
        
        <div class="scenario-box">
            <strong style="color: #137333;">📌 เป้าหมายภารกิจ: "สร้างโปรเจกต์ใหม่และซิงก์อุปกรณ์ให้สำเร็จ!"</strong>
            <p style="margin: 5px 0 0 0; font-size: 15px;">เมื่อนักเรียนทำตามขั้นตอนครบถ้วน หน้าจอแท็บเล็ตของนักเรียนจะต้องว่างเปล่า เป็นสีขาวเหมือนกับหน้าจอจำลองในคอมพิวเตอร์แบบเป๊ะๆ</p>
        </div>

<div class="mission-inner">
            <h4 style="margin-top: 0; color: #333; font-family: 'Prompt', sans-serif;">🛠 สเต็ปการลงมือทำ (Do & Check):</h4>
            <ol style="padding-left: 20px; margin-bottom: 0;">
                <li style="margin-bottom: 10px;">เปิด Google Chrome เข้าไปที่เว็บไซต์ <b>ai2.appinventor.mit.edu</b> แล้ว Login ด้วยอีเมลของนักเรียน</li>
                <li style="margin-bottom: 10px;">มองไปที่มุมขวาบนของจอ คลิกที่คำว่า English แล้วเปลี่ยนเป็น <b>ภาษาไทย</b></li>
                <li style="margin-bottom: 10px;">คลิกปุ่ม <b>เริ่มโครงการใหม่ (Start new project)</b> ตั้งชื่อว่า <b>MyFirstApp</b> <i>(ข้อควรระวัง: ห้ามเว้นวรรคเด็ดขาด)</i></li>
                <li style="margin-bottom: 10px;">ที่เมนูด้านบน เลือก <b>เชื่อมต่อ (Connect) > AI Companion</b> จะมี QR Code ปรากฏขึ้น</li>
                <li style="margin-bottom: 10px;">หยิบแท็บเล็ตเปิดแอปรูปผึ้ง <b>(MIT AI2 Companion)</b> กดปุ่มสีฟ้าเพื่อสแกน QR Code</li>
                <li style="margin-bottom: 0;">แคปหน้าจอ (Screenshot) ที่มีโปรเจกต์ของนักเรียน ส่งใน <b>Google Classroom</b> ได้เลย! 🎉</li>
            </ol>
        </div>
    </div>

</div>