home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ระบบ >> Android

คู่มือพัฒนาแอป Android สำหรับมือใหม่: สร้างแอปคำนวณค่าทิปด้วย Kotlin

ปัจจุบันมากกว่า 75% ของโทรศัพท์ทั่วโลกใช้ Android และผู้ใช้อินเทอร์เน็ตส่วนใหญ่เข้าถึงผ่านมือถือ ทำให้ตลาดแอป Android โตโต่งมาก freeCodeCamp เผยแพร่คอร์สสอนพัฒนาแอป Android ฟรีบน YouTube โดย Rahul Pandey (Android Lead ที่ Facebook และอาจารย์ Stanford) คอร์สนี้เหมาะสำหรับผู้เริ่มต้นโดยสร้างแอปคำนวณค่าทิป (Tip Calculator) จริงที่สามารถเผยแพร่บน Play Store ได้

สิ่งที่จะได้เรียนรู้

  • สร้าง UI ด้วย XML และ ConstraintLayout
  • เขียนลอจิกด้วยภาษา Kotlin
  • ใช้ Event Listener สำหรับรับค่าจากผู้ใช้
  • เพิ่ม Animation และการเปลี่ยนสีแบบไดนามิก
  • ปรับแต่งธีมสี Light/Dark Mode

โครงสร้างแอป Tip Calculator

แอปประกอบด้วยหน้าจอเดียว (Single Screen) มีช่องกรอกยอดเงิน (EditText), SeekBar สำหรับเลือกเปอร์เซ็นทิป และ TextView แสดงผลทิปและยอดรวม พร้อม Footer สำหรับปรับแต่งข้อความส่วนตัว

ขั้นตอนสร้าง UI (activity_main.xml)

  1. สร้างโปรเจกต์ใหม่ใน Android Studio (Empty Activity, Kotlin, Min SDK 21)
  2. ใช้ ConstraintLayout เป็น Root View เพื่อประสิทธิภาพดี ไม่มี Nested ViewGroup
  3. วาง TextView 4 ตัวด้านซ้าย (Base, Tip %, Tip, Total) จัดตำแหน่งด้วย Constraints
  4. วาง EditText (InputType: numberDecimal), SeekBar (Max: 30), TextView 2 ตัวด้านขวา
  5. จัด Alignment และ Margin ให้สอดคล้องกัน
  6. ใช้ tools:text สำหรับค่า Preview เท่านั้น ไม่แสดงจริง

ขั้นตอนเขียน Logic (MainActivity.kt)

  1. ผูก View ด้วย findViewById
  2. เพิ่ม setOnSeekBarChangeListener อัปเดต Label เปอร์เซ็นทิปแบบ Real-time
  3. เพิ่ม addTextChangedListener (TextWatcher) สำหรับ EditText ยอดเงิน
  4. สร้างฟังก์ชัน computeTipAndTotal() คำนวณ: 
    tip = baseAmount * tipPercent / 100
total = baseAmount + tip
  5. จัดการ Error: ตรวจสอบ Empty String ก่อนแปลงเป็น Double
  6. Format ผลลัพธ์ให้แสดง 2 ตำแหน่งทศนิยม (String.format("%.2f", value))

เพิ่ม Animation และ Personalization

  • เพิ่ม TextView คำอธิบายทิป (Poor, Acceptable, Good, Great, Amazing) ใต้ SeekBar
  • ใช้ ArgbEvaluator Interpolate สีระหว่างแดง (ทิปแย่) ถึงเขียว (ทิปดี) ตามเปอร์เซ็นต์
  • เพิ่ม Footer "Made with ❤️ by [ชื่อ]" 置中ด้านล่าง
  • ปรับธีมสีใน colors.xml และ themes.xml (Primary, Surface, Background)

ขยายฟีเจอร์เพิ่มเติม (แนะนำ)

  • แบ่งจ่ายบิลตามจำนวนคน
  • เพิ่มปุ่มปัดเศษยอดรวม
  • ปรับปรุง UI/UX และสีสันตามความชอบ

สรุป

คอร์สนี้สอนพื้นฐาน Android Development ครบถ้วน: UI, Logic, Event Handling, Animation, Theming ผู้เรียนสามารถนำโค้ดต่อยอดและเผยแพร่บน Play Store ได้จริง ดูคอร์สเต็มรูปแบบที่ freeCodeCamp.org YouTube (1 ชั่วโมง)