MakeXYZ Fun

[Video Summary] Ch. 8.13 - Location Search with Debouncing in SwiftUI (2024)

Admin -

Mô tả nhanh

Video này hướng dẫn cách tạo một view tìm kiếm địa điểm có khả năng tái sử dụng trong SwiftUI, cho phép người dùng nhập địa điểm và thu hẹp kết quả tìm kiếm theo thời gian thực. Video cũng giới thiệu kỹ thuật "debouncing" để tránh gửi quá nhiều truy vấn tới Apple cùng một lúc.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách tạo một view tìm kiếm địa điểm có khả năng tái sử dụng trong SwiftUI, cho phép người dùng nhập địa điểm và thu hẹp kết quả tìm kiếm theo thời gian thực. Video cũng giới thiệu kỹ thuật "debouncing" để tránh gửi quá nhiều truy vấn tới Apple cùng một lúc.

Dưới đây là các bước chính được thực hiện trong video:

  1. Tạo PlaceLookupView:

    • Tạo một file SwiftUI View mới tên PlaceLookupView.
    • Thêm một biến @State private var searchText để lưu trữ text tìm kiếm.
    • Sử dụng NavigationStack và List để hiển thị kết quả tìm kiếm (tạm thời hiển thị text input).
    • Thêm .searchable modifier để tạo search bar.
    • Thêm .onChange modifier để theo dõi thay đổi trong searchText và thực hiện tìm kiếm (chức năng tìm kiếm sẽ được thêm sau).
    • Thiết lập listStyle là .plain.
    • Thêm navigationTitle và navigationBarTitleDisplayMode cho view.
    • Thêm một nút "Cancel" trong toolbar để dismiss view.

  2. Cập nhật ContentView:

    • Tạo biến @State private var sheetIsPresented để kiểm soát việc hiển thị sheet.
    • Thêm .sheet modifier vào cuối VStack để present PlaceLookupView.
    • Thêm một nút để toggle sheetIsPresented và trình bày PlaceLookupView.
    • Chỉnh sửa nút "Cancel" trong PlaceLookupView thành "Dismiss".

  3. Tạo Model Place:

    • Tạo một file Swift mới tên Place, là model để chứa thông tin về địa điểm.
    • Import MapKit và Contacts.
    • Tạo struct Place tuân theo Identifiable.
    • Tạo private property mapItem (MKMapItem) để lưu trữ thông tin địa điểm.
    • Khởi tạo Place với một mapItem.
    • Tạo computed properties:
      • name (String): tên địa điểm.
      • latitude (CLLocationDegrees): vĩ độ.
      • longitude (CLLocationDegrees): kinh độ.
      • address (String): địa chỉ, lấy từ CNPostalAddress và chuyển đổi thành một chuỗi duy nhất.

  4. Tạo ViewModel PlaceLookupViewModel:

    • Tạo file Swift mới tên PlaceLookupViewModel.
    • Import MapKit.
    • Thêm @MainActor và @Observable để đảm bảo cập nhật UI trên main thread.
    • Tạo class PlaceLookupViewModel.
    • Thêm property places (Array) để lưu trữ kết quả tìm kiếm.
  • Tạo hàm search(text: String, region: MKCoordinateRegion) (async, throws):
    • Tạo MKLocalSearch.Request với naturalLanguageQuery và region.
    • Tạo MKLocalSearch từ request.
    • Gọi hàm search.start() (await) để thực hiện tìm kiếm.
    • Kiểm tra xem có kết quả trả về không, nếu không sẽ throw lỗi.
    • Map các MKMapItem trong response thành mảng Place.
  1. Kết nối PlaceLookupView với ViewModel:
    • Thêm @State var placeVM (PlaceLookupViewModel) vào PlaceLookupView.
    • Thay đổi List để iterate qua placeVM.places.
    • Hiển thị name và address của mỗi place trong list.
    • Thêm @State private var searchTask (Task<Void,Never>?) để quản lý các task tìm kiếm.
    • Thêm .onChange(of: searchText) modifier để theo dõi thay đổi search text và thực hiện debouncing:
      • Cancel task đang thực thi (nếu có).
      • Nếu search text rỗng, xoá mảng places hiện tại.
      • Tạo task mới:
        • Chờ 300ms (tránh gửi quá nhiều request).
        • Kiểm tra task có bị cancel không, nếu có thì return.
        • Gọi placeVM.search() với search text mới và tìm kiếm trong vùng hiện tại.
    • Thêm .onAppear modifier để khởi tạo searchRegion với vị trí hiện tại của thiết bị.
    • Thêm .onDisappear modifier để cancel các task đang thực thi khi view biến mất.
  • Chỉnh sửa lại khởi tạo PlaceLookupView trong ContentView để truyền vào biến locationManager.

  1. Thêm hàm get Region vào LocationManager

    • Thêm hàm getRegionAroundCurrentLocation(radiusInMeters: CLlocationDistance = 10000) -> MKCoordinateRegion? vào LocationManager để trả về 1 region xung quanh vị trí hiện tại với bán kính cho trước.

  2. Thử nghiệm trên Simulator

  • Chạy ứng dụng trên simulator và test tính năng tìm kiếm địa điểm với các địa điểm khác nhau. Chú ý đến việc search radius sẽ ảnh hưởng đến kết quả tìm kiếm trên preview và trên simulator.

Video này cung cấp một hướng dẫn chi tiết về việc tạo một chức năng tìm kiếm địa điểm mạnh mẽ, kết hợp việc sử dụng các API của Apple, kỹ thuật debouncing và tốt nhất là khả năng tái sử dụng view tìm kiếm.

Chúc bạn có những trải nghiệm lập trình thú vị!