Let's Code EP1: รู้จักกับ Swift, SwiftUI และ Swift Playgrounds

ไอเดียของคุณ…อาจกลายเป็นแอปที่เปลี่ยนโลกได้ !!

ทุกวันนี้แอปพลิเคชันที่คุณใช้บน iPhone หรือ iPad ล้วนเกิดจาก 'คนธรรมดา' ที่กล้าคิดและลงมือทำ คุณไม่จำเป็นต้องเป็น 'โปรแกรมเมอร์' หรือเรียนเขียนโปรแกรมมาก่อน ขอแค่คุณกล้าเรียนรู้ เพราะเรา....จะสอนคุณเขียนคำสั่งเพื่อสร้างแอปแบบที่มัน "ง่าย สนุก และใช้ได้จริง" ^^

บทเรียนนี้เป็นบทเรียนแรกใน หลักสูตรการเขียนโปรแกรมและการสร้างแอปด้วยภาษา Swift ด้วย Swift Playgrounds สำหรับนักเรียนระดับมัธยมศึกษาตอนปลาย ระยะเวลา 18 ชม.

มาเริ่มที่หัวข้อแรก เรื่อง รู้จักกับ Swift, SwiftUI และ Swift Playgrounds กันเลยนะครับ

วัตถุประสงค์ในการเรียนรู้

  1. ผู้เรียนเกิดความเข้าใจเกี่ยวกับความแตกต่างระหว่าง Swift และ SwiftUI
  2. ผู้เรียนสามารถใช้โปรแกรม Swift Playgrounds เพื่อเขียนคำสั่งภาษา Swift ได้
  3. เข้าใจแนวคิดการเขียนโปรแกรมแบบ Declarative ด้วย SwiftUI

ขั้นตอนการจัดการเรียนการสอน

เริ่มต้นนำเข้าสู่บทเรียน ด้วยข้อความสำหรับสร้างแรงบันดาลใจ "Everyone should have the opportunity to create something that can change the world" และคลิปวิดีโอที่เกี่ยวกับการสร้างแอปจาก Youtube หรือผลงานที่น่าสนใจของรุ่นพี่ที่เคยเรียนวิชานี้

ผู้สอนอธิบายว่า โค้ดดิ้ง (Coding) คือ ภาษาของเทคโนโลยี และการเรียนเขียนโค้ด คุณไม่ได้เรียนรู้เพียงแค่ภาษาของเทคโนโลยีเท่านั้น แต่ กำลังเรียนรู้แนวทางในการคิด รวมทั้งยังสามารถทำให้ความคิดนั้นกลายเป็นจริงขึ้นมาได้อีกด้วย และอธิบายจุดเด่นของภาษา Swift ดังนี้

Swift เป็นภาษาโปรแกรมสมัยใหม่ที่ถูกสร้างขึ้นโดย Apple ในปี 2014 เพื่อใช้ในการพัฒนาแอปพลิเคชันบนแพลตฟอร์มต่างๆ ของ Apple เช่น iOS, iPadOS, macOS, watchOS และ tvOS โดย Swift มีจุดเด่นในเรื่องของความง่ายต่อการเรียนรู้ อ่านง่าย เขียนง่าย และมีความปลอดภัยสูง

จุดเด่นของ Swift:

  • ง่ายต่อการเรียนรู้ (Easy to Learn) มีไวยากรณ์ใกล้เคียงภาษาธรรมชาติ ทำให้เหมาะสำหรับผู้เริ่มต้น
  • ความปลอดภัย (Safe) ช่วยป้องกันข้อผิดพลาดจากการเขียนโปรแกรมได้อย่างดี
  • ประสิทธิภาพสูง (Fast) ประมวลผลได้เร็วและมีประสิทธิภาพ
  • ใช้งานได้หลายแพลตฟอร์ม (Cross-platform) รองรับการใช้งานบนหลายอุปกรณ์ของ Apple


กิจกรรมที่ 1 เรียนรู้วิธีเขียนโค้ด

Swift Playgrounds เป็นแอปพลิเคชันบน iPad และ Mac ที่ออกแบบมาเพื่อให้ทุกคนสามารถเรียนรู้การเขียนโปรแกรมด้วยภาษา Swift ได้ง่ายและสนุกสนานผ่านการเล่นเกมและการทดลองเขียนโค้ดจริง


  • แนะนำการใช้ Swift Playgrounds และการดาวน์โหลด Playground Book
  • ดาวน์โหลด "เรียนรู้การเขียนโค้ด 1"
  • ให้ผู้เรียนเล่นเกมในบทเรียน เรื่อง คำสั่ง (Command) โดยผู้สอนควรอธิบายเกี่ยวกับคำสำคัญต่างๆ ดังนี้
  • คำสั่ง (Command) คือ โค้ดที่เขียนขึ้นเพื่อสั่งให้โปรแกรมดำเนินการทำงานบางอย่างที่เฉพาะเจาะจง
  • การทำงานตามลำดับ (Sequence) คือ การทำงานเรีียงลำดับตามขั้นตอนการทำงานในชุดคำสั่งจากบนลงล่าง
  • การแก้บั๊ก (debugging) คือ การแก้ไขการทำงานที่ผิดพลาดของโปรแกรม

กิจกรรมที่ 2 การสร้างส่วนติดต่อกับผู้ใช้ด้วย SwiftUI

SwiftUI คือเครื่องมือสำหรับการออกแบบ User Interface (UI) แบบใหม่จาก Apple ที่ออกแบบมาเพื่อให้นักพัฒนาเขียน UI ของแอปพลิเคชันได้ง่ายขึ้น มีประสิทธิภาพมากขึ้น และสามารถใช้งานได้บนหลายอุปกรณ์ในระบบนิเวศของ Apple ไม่ว่าจะเป็น iPhone, iPad, Mac, Apple Watch หรือ Apple TV

จุดเด่นที่สำคัญที่สุดของ SwiftUI คือการที่มันใช้แนวคิดการเขียน UI แบบ Declarative Programming ซึ่งทำให้การเขียนโค้ดมีความเรียบง่ายและอ่านเข้าใจได้ง่ายขึ้นมาก

   

  • สร้าง Project ใหม่ โดยเลือกที่ + Create New App...
  • ครูอธิบายส่วนประกอบต่างๆ ที่อยู่ใน Project
  • MyApp คือ จุดเริ่มต้นของแอป (Entry Point) ประกอบด้วยส่วนสำคัญ ดังนี้
  • @main บอกให้ระบบรู้ว่า จุดเริ่มต้นของแอปพลิเคชันอยู่ที่นี่
  • struct MyApp: App ประกาศโครงสร้างหลักของแอป ที่เป็นไปตามโปรโตคอล App
  • WindowGroup เป็นตัวกำหนดว่า หน้าจอหลักของแอปจะมีหน้าตาเป็นอย่างไร โดยหน้าจอหลักที่เรียกใช้งาน คือ ContentView()
  • ContentView คือ ส่วนที่ใช้สำหรับ ออกแบบหน้าตา (User Interface หรือ UI) ของแอป โดยมีส่วนประกอบหลัก ดังนี้
  • struct ContentView: View ประกาศโครงสร้าง UI ของแอป ตามรูปแบบของโปรโตคอล View
  • body ส่วนที่กำหนดว่าองค์ประกอบ UI ของหน้าจอมีอะไรบ้าง
  • VStack ใช้สำหรับจัดวางองค์ประกอบในแนวตั้ง (Vertical)
  • Image และ Text เป็นส่วนประกอบย่อยภายใน VStack ซึ่งในตัวอย่างประกอบด้วย Image และ Text
  • ครูอธิบายเพิ่มเติมเกี่ยวกับ View และ Modifiers
  • View ใน SwiftUI คือ องค์ประกอบที่ใช้ในการสร้างหน้าตา (UI) ของแอปพลิเคชัน เช่น ข้อความ (Text), รูปภาพ (Image), ปุ่ม (Button) และองค์ประกอบอื่นๆ
  • Modifiers คือ ตัวปรับแต่งที่ใช้เพื่อปรับเปลี่ยนหรือกำหนดลักษณะต่างๆ ให้กับ View เช่น เปลี่ยนสี ขนาดตัวอักษร กำหนดขนาด หรือเพิ่มพื้นที่ว่าง
  • ทดลองแก้ไขคำสั่งใน ContentView เป็น
import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("สวัสดี SwiftUI!")
                .font(.title)
                .foregroundColor(.blue)
                .padding()
                .background(Color.yellow)
            Button("กดฉันสิ!") {
                print("ปุ่มถูกกด")
            }
        }
    }
}
  • ให้นักเรียนทดลองเพิ่มองค์ประกอบใหม่ เช่น ข้อความ (Text) หรือภาพ (Image) ลงใน ContentView ด้วยตนเอง

ขั้นสรุปความรู้

  • เลือกนักเรียนจำนวน 2-3 คนเพื่อแสดงผลงานที่หน้าชั้นเรียน และให้นักเรียนแนะนำสั้นๆ ว่า เขาสร้างอะไรและทำไมถึงเลือกออกแบบเช่นนี้ (อย่าลืม ! ให้คำชมเชยและให้กำลังใจ เพื่อกระตุ้นแรงบันดาลใจให้ผู้เรียนเกิดความมั่นใจในการเรียนรู้)
  • ผู้สอนแสดงคำถามเพื่อกระตุ้นให้ผู้เรียนสรุปหัวข้อหลักที่ได้เรียนวันนี้
  • Swift คืออะไร จุดเด่นของ Swift คืออะไร?
  • Swift Playgrounds ใช้ทำอะไร?
  • SwiftUI และ Declarative UI คืออะไร?
  • View และ Modifiers ใน SwiftUI คืออะไร และทำงานอย่างไร?


แหล่งข้อมูลเพิ่มเติม (Further Resources):


Attachments

Attachments

Swift Swift Playgrounds SwiftUI Coding Thai Secondary Schools

You might also like

Assistive Access: สร้างประสบการณ์ที่เท่าเทียมและพื้นที่ดิจิทัลที่ทุกคนเข้าถึงได้

โลกยุคใหม่ที่เทคโนโลยีกลายเป็นส่วนหนึ่งของห้องเรียน การออกแบบประสบการณ์การเรียนรู้ที่ “ทุกคนเข้าถึงได้” ไม่ใช่เพียงทางเลือก แต่คือ หัวใจของการศึกษาเพื่อความเท่าเทียม โดยเฉพาะอย่างยิ่งสำหรับผู้เรียนที่มีความต้องการพิเศษ 
See more

Creating a survey and graphing app using Swift and Swift UI

Students can use iPads and Swift Playgrounds to make a simple, culturally relevant app that blends Swift and Swift UI. It allows users to submit choices for lunch, and have the results displayed as a pie chart.
See more

Teaching Code with Swift Playgrounds

Learn how to help students build confidence and problem‑solving skills by creating apps with Swift Playgrounds.
See more
0 replies