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

Back

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

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

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

Title

Description

Keyword

Detail

<div style="font-family: 'Sarabun', sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
    <h2 style="color: #d35400; border-bottom: 2px solid #e67e22; padding-bottom: 10px;">ภารกิจที่ 1: สร้างหน้าจอแอปสมุดจดการบ้าน</h2>
    <p><strong>🎯 ภารกิจ:</strong> สร้างโครงสร้างหน้าจอแอป My Homework Tracker ด้วยเครื่องมือพื้นฐาน</p>
    <p><strong>💡 แนวคิด:</strong> การเตรียมพื้นที่ทำงานและจัดวางส่วนประกอบ (Components) ให้พร้อมสำหรับการเขียนบล็อกคำสั่ง</p>

<h3 style="color: #d35400;">1. เตรียมพื้นที่ทำงาน (สร้างโปรเจกต์ใหม่)</h3>
    <div style="background-color: #fdf2e9; border-left: 5px solid #d35400; padding: 15px; margin-bottom: 20px;">
        <b>ขั้นตอนการสร้าง:</b><br><br>
        1. เข้าเว็บ <b>ai2.appinventor.mit.edu</b> แล้วล็อกอินด้วยบัญชี Google<br>
        2. คลิกปุ่ม <b>Start new project</b><br>
        3. ตั้งชื่อโปรเจกต์ว่า <b>MyHomework</b> (ห้ามเว้นวรรค) แล้วกด OK
    </div>

<h3 style="color: #34495e;">2. สร้าง "ช่องพิมพ์ข้อความ" (TextBox)</h3>
    <div style="background-color: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
        <span style="color: #e74c3c; font-weight: bold;">STEP 1</span><br>
          <span style="color: #3498db; font-weight: bold;">ลากวาง:</span> ลาก <b>TextBox</b> มาวางบนหน้าจอมือถือจำลอง<br>
          <span style="color: #f1c40f; font-weight: bold;">ตั้งชื่อ (Rename):</span> เปลี่ยนชื่อเป็น <b>txt_Input</b><br>
          <span style="color: #2ecc71; font-weight: bold;">Properties:</span> ลบคำในช่อง Hint แล้วพิมพ์ <i>"พิมพ์การบ้านที่นี่..."</i><br>
    </div>

<h3 style="color: #e83e8c;">3. สร้าง "ปุ่มบันทึก" (Button)</h3>
    <div style="background-color: #fce4ec; border-left: 5px solid #e83e8c; padding: 15px; margin-bottom: 20px;">
        <b>ขั้นตอนการปรับแต่งปุ่ม:</b><br><br>
        1. <b>ลากวาง:</b> นำ <b>Button</b> มาวางต่อท้ายด้านล่างของช่องพิมพ์ข้อความ<br>
        2. <b>ตั้งชื่อ:</b> กดปุ่ม Rename เปลี่ยนชื่อเป็น <b>btn_Save</b><br>
        3. <b>Properties:</b> ไปที่ช่อง Text ให้เปลี่ยนข้อความเป็นคำว่า <i>"บันทึกการบ้าน"</i>
    </div>

<h3 style="color: #27ae60;">4. สร้าง "กระดานแสดงผล" (ListView)</h3>
    <div style="background-color: #eafaf1; border-left: 5px solid #27ae60; padding: 15px; margin-bottom: 20px;">
        <b>เตรียมพื้นที่โชว์รายการ:</b><br><br>
        1. <b>ลากวาง:</b> เลื่อนหา <b>ListView</b> แล้วลากมาวางไว้ล่างสุดของหน้าจอ<br>
        2. <b>ตั้งชื่อ:</b> กดปุ่ม Rename เปลี่ยนชื่อเป็น <b>lvw_Homework</b><br>
        3. <b>Properties:</b> ปรับค่า Height และ Width ให้เป็น <b>Fill parent...</b> (ขยายเต็มหน้าจอ)
    </div>
</div>