4.1.10 .Dataset bàn phím
5.3. Các API chính
5.3.1. Đếm
- Đường dẫn: /count
- Mục đích: Dùng để nhận hình ảnh gửi lên từ phía client, sau đó sử dụng mơ hình học máy để tìm vị trí các vật thể có trong hình và trả về client đưới dạng JSON. Sử dụng SocketIO để thông báo cho client tiến độ thực hiện của Server
Chương 5: PYTHON SERVER
- Đường dẫn: /preprare
- Mục đích: Khi client lựa chọn đếm một loại vật thể sẽ gửi thông tin lên server để chuẩn bị. Vì việc load model vào RAM tốn nhiều thời gian, nên khi nhận được thơng tin thì hệ thống sẽ load model trước để giảm tối thiểu thời gian đưa ra kết quả.
5.3.3. Upload
- Đường dẫn: /upload
- Mục đích: Cho phép người dùng upload hình lên server và lưu vào bộ nhớ
5.3.4. Thêm template
- Đường dẫn: /add
- Mục đích: Khi Admin thêm một template mới có DriveID (Google Drive ID của file model), server sẽ thêm template vào danh sách các model và tải file đó về.
5.3.5. Xố template
- Đường dẫn: /remove
- Mục đích: Khi admin u cầu xoá template thì hệ thống sẽ xoá model đã tải và xoá model khỏi danh sách các model.
Chương 6
6. ỨNG DỤNG iOS
GitHub source code: https://github.com/hosituan/kounter-server
6.1. Công nghệ sử dụng - SwiftUI 6.1.1. Giới thiệu về SwiftUI
Hình 6.1 Logo SwiftUI
- SwiftUI là một framework mới được phát triển bởi Apple. Nó cung cấp một API mới cho phép người dùng có thể viết code và cịn có thể làm việc được trên tất cả các Apple platform: iOS, iPadOS, watchOS và tvOS
- SwiftUI được sử dụng từ iOS 13 trở lên và bây giờ đang trở thành một xu hướng mới, SwiftUI đem lại sự đơn giản trong quá trình code và tốc độ xây dựng ứng dụng nhanh hơn UIKit.
- Hiện tại SwiftUI đang được nhiều người lựa chọn sử dụng mặc dù vẫn đang trong quá trình nâng cấp và bổ sung, bởi vì họ tin SwiftUI sẽ phát triển mạnh mẽ trong tương lai.
- SwiftUI sẽ là một Framework mạnh mẽ trong tương lai gần, tuy còn nhiều thiếu sót nhưng Apple đã và đang ngày một hồn thiện cho nó.
6.1.2. Yêu cầu sử dụng
- iOS tối thiểu là iOS 13.
- MacOS Catalina và XCode 11 Beta trở lên để SwiftUI render Canvas.
6.1.3. Cấu trúc của SwiftUI
Chương 6: ỨNG DỤNG iOS
Hình 6.2 Cấu trúc project SwiftUI
6.1.3.1. Cách thức hoạt động - AppDelegate:
o Ngay cả trong iOS 13, AppDelegate vẫn là điểm truy cập chính của một ứng dụng. Các phương thức AppDelegate này được cho là phải ở đó để xử lý các sự kiện trong vòng đời ứng dụng, tức là phản hồi ứng dụng đang được khởi chạy, chạy nền, nền trước, nhận dữ liệu, v.v. - Ở AppDelegate, những điều chúng ta thường viết mã ứng dụng cho iOS
12 (trở xuống) là:
o Thiết lập trình điều khiển xem đầu tiên của ứng dụng (được gọi là trình điều khiển xem gốc), func (_: didFinishLaunchingWithOptions :) là func đầu tiên mà hệ điều hành gọi khi khởi chạy ứng dụng.
o Định cấu hình cài đặt ứng dụng và các thành phần khởi động. o Đăng kí trình xử lý thơng báo.
o Trả lời các sự kiện trong vòng đời của ứng dụng, chẳng hạn như ứng dụng chạy background, foreground hoặc thoát khỏi ứng dụng.
o Nhưng bây giờ chúng ta không cần phải quá quan tâm
ở AppDelegate nữa, bởi vì mơi trường hoạt động chính của chúng ta ở SceneDelegate.
o Từ iOS 13 trở lên, SceneDelegate đảm nhận một số vai trò đại biểu của ứng dụng. Quan trọng nhất, khái niệm về UIWindow (cửa sổ) được thay thế bằng UIScene (bối cảnh). Một ứng dụng có thể có nhiều Scene và một Scene sẽ đóng vai trị làm nền cho giao diện và nội dung ứng dụng. Vì vậy, SceneDelegate chịu trách nhiệm về những gì được hiển thị trên màn hình trong thuật ngữ của giao diện người dùng và dữ liệu.
o Người dùng cũng có thể tạo một bản sao của một Scene, chạy hiệu quả nhiều phiên bản của một ứng dụng cùng một lúc.
- SceneDelegate những điều chúng ta cần biết là:
o Một dự án iOS mới hiện có lớp SceneDelegate, được tạo tự động, bao gồm các sự kiện vòng đời quen thuộc như hoạt động, ngắt kết nối, v.v.
o Class AppDelegate có 2 chức năng mới liên quan đến các phiên Scene, được gọi là
application(:configurationForConnecting:options:) và application(:didDiscardSceneSessions:).
o Danh sách thuộc tính info.plist nhận bản
khai Sceneapplication(Application Scene Manifest), liệt kê các Scene là một phần của ứng dụng này, bao gồm
tên class, delegate và Storyboard của chúng.
o Thiết lập trình điều khiển xem đầu tiên của ứng dụng (được gọi là trình điều khiển xem gốc), tương tự AppDelegate là (:
didFinishLaunchingWithOptions :) thì ở đây chúng ta có
scene(:willConnectTo:options:), là chức năng đầu tiên mà hệ điều hành gọi khi khởi chạy ứng dụng.
- Trong SceneDelegate cịn có những chức năng sau:
o sceneDidDisconnect (_ :) được gọi khi một Scene bị ngắt kết nối khỏi ứng dụng (tắt app).
o sceneDidBecomeActive (_ :) được gọi khi người dùng bắt đầu tương tác với một Scene, tức là lúc quay trở lại App từ một ứng dụng khác hoặc lúc app xuất hiện lần đầu.
o sceneWillResignActive (_ :) được gọi khi người dùng ngừng tương tác với một Scene, tức là chuyển sang Scene khác.
o sceneWillEntryForeground (_ :) được gọi khi một Scene đi
Chương 6: ỨNG DỤNG iOS
o sceneDidEntryBackground (_ :) được gọi khi
một Scene vào background, tức là ứng dụng được thu nhỏ nhưng vẫn đang chạy ở background.
6.1.3.2. Một số bộ phận khác của SwiftUI
- Assets.xcassets đây chính là nơi chứa ảnh của Project. - LaunchScreen.xib là màn hình chờ khi khởi động App. - Trong giao diện ContenView ta thấy 2 thành phần
gồm ContentView và ContentView_Previews:
o ContentView chính là nơi ta tạo giao diện bằng code của mình.
o ContentView_Previews chính là thứ tạo nên sự đồng bộ trực tiếp giữa Code và Design.
- Khởi chạy màn hình Preview nếu chúng ta muốn vừa code vừa xem sự thay đổi UI vừa được thêm vào bằng code một cách trực tiếp.
- Bên trong ContentView có biến body: some View đây chính là Scene chính của mỗi View, các thành phần bên trong của chúng đều phải tuân theo một Protocol chung là View.
6.1.4. Ưu điểm của SwiftUI
- Một số ưu điểm để SwiftUI trở thành lí do nhóm lựa chọn xây dựng giao diện:
o Mang lại sự đơn giản hoá trong quá trình code nhờ vào thiết kế theo phong cách declarative.
o Tốc độ xây dựng ứng dụng nhanh hơn so với sử dụng UIKit
o Có thể trộn cả UIKit và SwiftUI với nhau đưa ra một sản phẩm xây dựng trên ưu thế của cả 2 framework
o Cung cấp khung hình giao diện trực tiếp của design cho người dùng viết code mà không cần phải khởi chạy Simulator hoặc Device để kiểm tra, xem lại kết quả như trước.
o Khơng cịn InterfaceBuilder, nó được thay thế bởi Canvas khi code sẽ được thêm tự động nếu chúng ta kéo vào màn hình Preview.
o Khơng cịn phải gặp các sự cố crash App khi quên kéo IBOutlet. o Khơng cịn AutoLayout và các vấn đề liên quan đến nó,
AutoLayout được thay thế bằng các bố cục VStack, ZStack, HStack, Groups, Lists và những thử khác. Do khơng có AutoLayout nên bố cục ln cần được khởi tạo trước, bởi vì nó khơng sử dụng Storyboard nên nó tạo thuận lợi cho làm việc nhóm đối với việc quản lý code. (TOMOSIA, 2021)
6.1.5. Nhược điểm của SwiftUI
- Một số nhược điểm của SwiftUI:
o Không hỗ trợ các phiên bản iOS thấp hơn iOS 13. Tuy nhiên, số lượng người sử dụng iOS 13 trở lên đã chiếm hơn 80% trong tháng 06/2020 (theo thống kê từ Apple).
o Cộng đồng SwiftUI chưa lớn mạnh.
o Không cho phép kiểm tra phân cấp ContentView_Previews.
6.2. Đặc tả yêu cầu phần mềm 6.2.1. Mơ hình Usecase 6.2.1. Mơ hình Usecase
6.2.1.1. Bảng Actor
STT Chức năng chính Guest User Admin
1 Sign in X
2 Sign up X
3 Sign out X X
4 Couting Object X X X
5 Propose template X X
6 Manage Count History X X X
7 Manage Template List X
8 Add Template X
Bảng 6.1. Bảng Actor
6.2.1.2. Bảng Usecase
STT Chức năng chính Guest User Admin
1 Sign in X
2 Sign up X
3 Sign out X X
4 Couting Object X X X
5 Propose template X X
6 Manage Count History X X X
7 Manage Template List X
Chương 6: ỨNG DỤNG iOS Bảng 6.2. Bảng Use case 6.2.1.3. Usecase Diagram Hình 6.1. Usecase Diagram 6.2.2. Database Diagram Hình 6.2. Database Diagram
6.3. Tổng quan nguyên lý hoạt động
Người dùng có thể vào chọn template muốn đếm, sau đó chọn hình ảnh từ ảnh chụp trực tiếp từ camera hoặc hình ảnh có sẵn trong thư viện. Bấm đếm, ứng dụng sẽ gửi hình ảnh đó lên server và hiển thị tiến độ thực hiện. Sau khi nhận được kết quả sẽ hiển thị kết quả và lưu lại lịch sử.
6.4.1. Lựa chọn template cần đếm:
Với chức năng lựa chọn template cần đếm, người dùng sẽ thực hiện chức năng này ở Home Screen. Danh sách template được biểu diễn dưới dạng List, 1 item Template sẽ bao gồm Template Image và Template Description cung cấp đầy đủ thông tin cho người dùng sử dụng. Nếu template người dùng muốn sử dụng khơng có ở Template List, người dùng có thể click chọn Propose Template Button để chuyển hướng đến Propose Template Screen để đề xuất template mong muốn.
Hình 6.3 Các thành phần chính của Home Screen 6.4.2. Lựa chọn hình ảnh và đếm: 6.4.2. Lựa chọn hình ảnh và đếm:
Về việc lựa chọn hình ảnh để đếm, người dùng có 2 lựa chọn: chọn ảnh từ thư viện (Select from Library) và dùng ảnh chụp từ camera (Take photo). Khi ấn vào bất kì template nào ở Home Screen, người dùng sẽ được chuyển đến Count Screen, Template Information sẽ hiển thị thông tin về template mà người dùng vừa chọn, ấn vào Select Photo Button để bắt đầu thực hiện chọn ảnh để đếm.
Chương 6: ỨNG DỤNG iOS
Hình 6.4 Các thành phần chính của Count Screen
Hình 6.5 Count Screen sau khi người dùng ấn Select Button
Sau khi thực hiện việc chọn ảnh thành công, ứng dụng sẽ chuyển đến Selected Photo Screen là một màn hình interactive của Count Screen. Ở màn hình này, ứng dụng sẽ cho phép người dùng tuỳ chọn độ chính xác của kết quả phù hợp thơng qua Score Slider (có giá trị từ 0-1 ứng với 0%-100%, 0.95 (95%)) là giá trị Score mặc định), ngồi ra cịn có Confident Checker cho phép người dùng lựa chọn việc confident có hiển thị trên ảnh kết quả hay khơng. Để tiến hành chức năng đếm trên ảnh vừa được chọn, người dùng click chọn Count Button.
Hình 6.6 Các thành phần của Selected Photo Screen
Sau khi thực hiện chức năng Đếm thành công, hệ thống sẽ trả về kết quả cho người dùng trong vòng 10 giây (thời gian đếm). Result Image sẽ biểu diễn kết quả dưới dạng hình ảnh, bounding box sẽ khoanh lại những vật thể mà thuật toán có thể phát hiện được, bên dưới hình ảnh sẽ là kết quả được biểu diễn dưới dạng Text bao gồm tổng số vật thể đếm được (Number of Object), thời gian thực thi (Counting Time) và đánh giá của người dùng (Rating).
Hình 6.7 Các thành phần của Count Result Screen 6.4.3. Lưu và hiển thị lịch sử: 6.4.3. Lưu và hiển thị lịch sử:
Sau khi thực hiện chức năng đếm, bên dưới Result Image sẽ có Save button cho phép người dùng thực hiện chức năng lưu kết quả. Các kết quả đếm sẽ được hiển thị ở Count History Screen dưới dạng List.
Chương 6: ỨNG DỤNG iOS
Hình 6.8 Các thành phần chính của History Screen 6.4.4. Đề xuất template mới: 6.4.4. Đề xuất template mới:
Việc người dùng muốn sử dụng ứng dụng để đếm vật thể nhưng lại khơng có sẵn template cho người dùng là một bất lợi trong quá trình sử dụng của họ, tuy nhiên, với mức độ bao quát cũng như mất nhiều thời gian để thu thập dữ liệu và hạn chế về nhân cơng, kĩ thuật. Nhóm đã đưa ra giải pháp ở mức chấp nhận được cho vấn đề này là cho phép người dùng có thể tự đề xuất template mà họ mong muốn, cho mỗi template mà người dùng mong muốn thêm phải đề xuất ít nhất 5 hình ảnh về template đó và mơ tả chi tiết để nhóm có thể phát triển thực tế trên ứng dụng. Người dùng có thể di chuyển đến Propose Template Screen thơng qua Tab Menu hoặc Propose Button ở Home Screen để thực hiện chức năng này.
6.4.5. Thêm, sửa, xoá template (Admin):
Sau khi nhận được đề xuất từ người dùng, về mặt thêm template nhóm hiện đang chỉ thực hiện trên phương diện thủ công, chưa cho phép người dùng tương tác hoàn toàn với model cũng như việc training data. Với những template được người dùng đề xuất, nhóm sẽ chọn lọc và ưu tiên phát triển những template hợp lí, có mức độ ứng dụng cao, khả thi cho việc xây dựng trên ứng dụng hiện tại. Tiếp đến, thơng qua người dùng và tìm kiếm trên internet, nhóm sẽ tạo dataset cho object mà người dùng mong muốn tối thiểu 2000 objects với mật độ >10 objects/hình sau đó tiến hành training dữ liệu tạo ra model. Với đánh giá các model có mức độ chính xác cao trên test set thì nhóm sẽ bắt đầu deploy model đó lên server và bắt đầu áp dụng thực tế trên ứng dụng. Admin sẽ là người dùng cuối thực hiện việc Add Template thông qua Add Template Screen, nhập đầy đủ thông tin bao gồm Name Field (tên của template), Drive ID Field (đường dẫn đến drive chứa model) và Description Field (mô tả cho template), chọn Select Photo Button để thêm ảnh đại diện cho template.
Hình 6.10 Các thành phần chính của Add Template Screen 6.4.6. Đánh giá sau mỗi lần đếm 6.4.6. Đánh giá sau mỗi lần đếm
Ở màn hình Count Screen, sau mỗi lần đếm và đưa ra kết quả, người dùng có thể tương tác với kết quả đó thơng qua mục Rating nằm bên dưới kết quả. Nếu một template trong ứng dụng bị đánh giá không tốt quá nhiều lần (dưới 3 sao) thì nhóm sẽ tiến hành đánh giá nhận xét từ phía người dùng và retrain model lại nếu model thực sự chưa tốt, chưa đáp ứng được nhu cầu thực tế.
Chương 6: ỨNG DỤNG iOS
Hình 6.11 Màn hình Count Result Screen 6.5. Prototype 6.5. Prototype
6.5.1. Screenflow
Hình 6.12 Application’s Screenflow
6.5.2. Danh sách các màn hình
No Screen Name Description
SC02 Count Screen Màn hình thực hiện chức năng đếm vật thể
SC03 SelectPhotoScreen Màn hình hiển thị thơng báo khi người dùng ấn Select Photo Button
SC04 SelectedPhotoScreen Màn hình sau khi người dùng chọn ảnh để thực hiện chức năng đếm vật thể
SC05 ChangedPhotoScreen Màn hình sau khi người dùng thay đổi ảnh đã chọn, khi đó background app sẽ thay đổi tuỳ thuộc vào hình ảnh
SC06 Count Result Screen Màn hình hiển thị kết quả đếm vật thể
SC07 Share Result Screen Màn hình cho phép người dùng thực hiện thao tác chia sẻ kết quả vừa nhận được
SC08 Tap Image Screen Màn hình sau khi người dùng ấn vào hình ảnh thể hiện kết quả
SC09 Zoom Image Screen Màn hình sau khi người dùng phóng to ảnh kết quả đếm vật thể
SC10 Guest Tab Screen Màn hình hiển thị khi người dùng chưa đăng nhập ấn vào thanh Tab menu
SC11 Admin Tab Screen Màn hình hiển thị khi admin ấn vào thanh Tab menu
SC12 User Tab Screen Màn hình người dùng đã đăng nhập ấn vào thanh Tab menu
SC13 Login Screen Màn hình cho phép người dùng thực hiện chức năng đăng nhập
SC14 Register Screen Màn hình cho phép người dùng thực hiện chức năng đăng kí
SC15 Template List Screen (Admin) Màn hình hiển thị danh sách template hiện có của ứng dụng
SC16 Remove Template Screen (Admin) Màn hình hiển thị thao tác Remove cho phép Admin xoá template
Chương 6: ỨNG DỤNG iOS
SC17 Add Template Screen (Admin) Màn hình cho phép Admin thực hiện chức năng thêm template
SC18 Template Photo Added Screen (Admin)
Màn hình sau khi Admin thêm ảnh cho template
SC19 Propose Template Screen (User) Màn hình cho phép người dùng đề xuất Template
SC20 Object Photo Added Screen (User) Màn hình sau khi người dùng thêm ảnh cho object
SC21 Count History Screen (Admin + User)
Màn hình hiển thị lịch sử đếm
SC22 Remove History Screen (Admin) Màn hình cho phép Admin thực hiện thao tác xoá lịch sử.
Bảng 6.1 Danh sách các màn hình 6.6. Đặc tả các màn hình 6.6. Đặc tả các màn hình