บทที่ 6: การพัฒนาแอปพลิเคชั่นสมาร์ทโฟนสำหรับระบบปฏิบัติการ iOS

6.1 การตั้งค่าสภาพแวดล้อมการพัฒนา (Development Environment Setup)

ก่อนที่จะเริ่มพัฒนาแอปพลิเคชั่น iOS เราต้องติดตั้งและตั้งค่าเครื่องมือที่จำเป็นก่อน

6.1.1 การติดตั้ง Xcode

Xcode เป็น Integrated Development Environment (IDE) อย่างเป็นทางการสำหรับการพัฒนาแอปพลิเคชั่น iOS

ดาวน์โหลดและติดตั้ง Xcode จาก Mac App Store

6.1.2 การสร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ใหม่ใน Xcode โดยเลือก:

• Template: Single View App
• Language: Swift
• Minimum Deployment Target: iOS 13.0 หรือสูงกว่า

6.2 การออกแบบส่วนติดต่อผู้ใช้ (User Interface Design)

เราจะออกแบบส่วนติดต่อผู้ใช้ (UI) ของแอปพลิเคชั่นโดยใช้ Storyboard หรือ SwiftUI

6.2.1 การออกแบบด้วย Storyboard

Storyboard เป็นเครื่องมือที่ใช้ในการออกแบบ UI แบบ Visual

หน้าจอหลักจะประกอบด้วย:

• UIImageView: สำหรับแสดงภาพที่ผู้ใช้เลือก
• UIButton: สำหรับเลือกภาพจากคลังภาพหรือถ่ายภาพใหม่
• UILabel: สำหรับแสดงผลการทำนาย

6.2.2 การออกแบบด้วย SwiftUI

SwiftUI เป็นเฟรมเวิร์คใหม่สำหรับการสร้าง UI ด้วยโค้ด

ตัวอย่างโค้ด SwiftUI สำหรับหน้าจอหลัก:

struct ContentView: View {
    @State private var selectedImage: UIImage?
    @State private var showingImagePicker = false
    @State private var predictionResult = ""
    
    var body: some View {
        VStack {
            if let image = selectedImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
                    .frame(height: 300)
            } else {
                Image(systemName: "photo")
                    .resizable()
                    .scaledToFit()
                    .frame(height: 300)
                    .foregroundColor(.gray)
            }
            
            Button("เลือกรูปภาพ") {
                showingImagePicker = true
            }
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(10)
            
            Text(predictionResult)
                .padding()
        }
        .padding()
        .sheet(isPresented: $showingImagePicker) {
            ImagePicker(image: $selectedImage)
        }
    }
}
                    

6.3 การนำโมเดล Core ML มาใช้งาน (Implementing Core ML Model)

เราจะนำโมเดล Core ML ที่ได้จากการแปลงในบทที่ 4 มาใช้งานในแอปพลิเคชั่น

6.3.1 การเพิ่มโมเดลในโปรเจกต์

คัดลอกไฟล์ `.mlmodel` ไปยังโปรเจกต์ Xcode

6.3.2 การโหลดโมเดล

Xcode จะสร้างคลาสสำหรับโมเดล Core ML โดยอัตโนมัติ

ตัวอย่างโค้ดการโหลดโมเดล:

do {
    let config = MLModelConfiguration()
    let model = try DurianDiseaseClassifier(configuration: config)
    // ใช้งานโมเดล
} catch {
    print("Error loading Core ML model: \(error)")
}
                    

6.3.3 การประมวลผลภาพ

ก่อนที่จะนำภาพเข้าสู่โมเดล เราต้องทำการประมวลผลภาพก่อน

ใช้ Vision Framework ในการประมวลผลภาพ:

func processImage(_ image: UIImage) {
    guard let pixelBuffer = image.toCVPixelBuffer() else {
        return
    }
    
    do {
        let config = MLModelConfiguration()
        let model = try DurianDiseaseClassifier(configuration: config)
        let prediction = try model.prediction(image: pixelBuffer)
        
        // แสดงผลการทำนาย
        let disease = prediction.classLabel
        let confidence = prediction.classLabelProbs[disease] ?? 0
        
        predictionResult = "โรค: \(disease)\nความมั่นใจ: \(confidence * 100)%"
    } catch {
        predictionResult = "เกิดข้อผิดพลาด: \(error.localizedDescription)"
    }
}
                    

รูปที่ 6.1: การแปลงโมเดลเป็น Core ML

6.4 การพัฒนาฟังก์ชันเพิ่มเติม (Developing Additional Features)

เราสามารถเพิ่มฟังก์ชันเพิ่มเติมเพื่อเพิ่มความสามารถของแอปพลิเคชั่น

6.4.1 การเลือกภาพจากคลังภาพ

ใช้ `UIImagePickerController` ในการเปิดคลังภาพและให้ผู้ใช้เลือกภาพ

ตัวอย่างโค้ด:

struct ImagePicker: UIViewControllerRepresentable {
    @Binding var image: UIImage?
    @Environment(\.presentationMode) var presentationMode
    
    func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.delegate = context.coordinator
        return picker
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        let parent: ImagePicker
        
        init(_ parent: ImagePicker) {
            self.parent = parent
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let uiImage = info[.originalImage] as? UIImage {
                parent.image = uiImage
            }
            
            parent.presentationMode.wrappedValue.dismiss()
        }
    }
}
                    

6.4.2 การถ่ายภาพใหม่

ใช้ `UIImagePickerController` ในการเปิดกล้องและให้ผู้ใช้ถ่ายภาพใหม่

ตัวอย่างโค้ด:

func openCamera() {
    let picker = UIImagePickerController()
    picker.sourceType = .camera
    picker.delegate = self
    present(picker, animated: true)
}
                    

6.4.3 การแสดงข้อมูลโรค

สร้างฐานข้อมูลหรือไฟล์ JSON เพื่อเก็บข้อมูลเกี่ยวกับโรคต่างๆ และแสดงข้อมูลเมื่อผู้ใช้ต้องการ

6.5 การทดสอบและดีบัก (Testing and Debugging)

ทดสอบแอปพลิเคชั่นบนอุปกรณ์จริงหรือ Simulator เพื่อหาข้อผิดพลาดและแก้ไข

6.5.1 การทดสอบบน Simulator

ใช้ iOS Simulator ใน Xcode ในการทดสอบแอปพลิเคชั่น

6.5.2 การทดสอบบนอุปกรณ์จริง

เชื่อมต่ออุปกรณ์ iOS กับ Mac และทดสอบแอปพลิเคชั่นบนอุปกรณ์จริง

6.6 การเผยแพร่แอปพลิเคชั่น (App Distribution)

หลังจากพัฒนาและทดสอบแอปพลิเคชั่นเสร็จแล้ว เราสามารถเผยแพร่แอปพลิเคชั่นได้

6.6.1 การสร้าง Developer Account

สมัคร Apple Developer Program เพื่อรับสิทธิ์ในการเผยแพร่แอปพลิเคชั่นบน App Store

6.6.2 การเตรียมแอปพลิเคชั่นสำหรับการเผยแพร่

เตรียมแอปพลิเคชั่นสำหรับการเผยแพร่โดย:

• การตั้งค่า App ID และ Provisioning Profile
• การเพิ่มไอคอนและ Launch Screen
• การเพิ่มข้อมูลสำหรับ App Store