APP PHÂN LOẠI HÀNG THEO màu sắc 2, có CODE

Những công việc sáng tạo, cho ra đời các ứng dụng có tích hợp đầy đủ những chức năng phục vụ cho các ngành nghề yêu cầu truy suất dữ liệu,các ngành yêu cầu nhập/ xuất hang hóa, các ngành

, CÓ CODE

ii

CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI 1

1.1 G IỚI THIỆU ĐỀ TÀI 1

1.2 M ỤC ĐÍCH NGHIÊN CỨU 1

1.3 ĐỐI TƯỢNG NGHIÊN CỨU 1

1.4 P HẠM VI NGHIÊN CỨU 2

1.5 DỰ KIẾN KẾT QUẢ 2

CHƯƠNG 2 CƠ SỞ LÍ THUYẾT 2

2.1 T ÌM HIỂU VỀ XỬ LÍ ẢNH MÀU RGB 2

2.1.1 Khái niệm ảnh số 2

2.1.2 Hệ màu RGB 3

2.2 ỨNG DỤNG CỦA HỆ MÀU RGB: 4

2.2.1 Độ phủ màu của các hệ màu RGB thương mại hiện nay 5

2.3 T ÌM HIỂU VỀ W EBCAM 5

2.3.1 Webcam là gì ? 5

2.3.2 Ứng dụng của webcam 9

2.3 TÌM HIỂU VỀ NODE RED 9

2.3.1 Node red cơ bản 9

2.3.2 Chức năng các module trong Node-red : 11

2.4 TÌM HIỂU VỀ GOOGLESHEETS 12

2.4.1 Giới thiệu 12

2.4.2 Ưu điểm của GoogleSheets so với các trình nhập liệu đang có trên thị trường 12

2.5 T ÌM HIỂU VỀ A PPSHEET 13

iii

2.4.3 Ứng dụng 14

CHƯƠNG 3 THIẾT KẾ VÀ THI CÔNG 15

3.1 S Ơ ĐỒ KHỐI CỦA HỆ THỐNG 15

3.2 T HIẾT KẾ GIAO DIỆN 15

3.2.1 Node red 15

3.2.2 Node-red Dashboard 19

3.2.3 AppSheets 21

3.2.4 MongoDB cloud 27

CHƯƠNG 4 GIẢI THUẬT VÀ ĐIỀU KHIỂN 36

4.1 HOẠT ĐỘNG CỦA HỆ THỐNG 36

4.2 L ƯU ĐỒ GIẢI THUẬT 36

CHƯƠNG 5 HOẠT ĐỘNG THỰC TẾ 37

5.1 T IẾN TRÌNH THỰC NGHIỆM : 37

5.2 K ẾT LUẬN THỰC NGHIỆM 42

CHƯƠNG 6 KẾT LUẬN 42

6.1 Ư U ĐIỂM CHUNG GIỮA A PP S HEET VÀ M ONGO DB 42

6.2 NHƯỢC ĐIỂM CHUNG GIỮA APPSHEET VÀ MONGODB 43

6.3 Đ IỂM KHÁC NHAU GIỮA A PP S HEET VÀ M ONGO DB 43

6.4 H ƯỚNG PHÁT TRIỂN 43

TÀI LIỆU THAM KHẢO 44

iv

HÌNH 2.1 ĐỘ CHÍNH XÁC MÀU SẮC CỦA CÁC LOẠI ẢNH 3

HÌNH 2.2 MÀU RGB 3

HÌNH 2.3 BẢNG MÃ MÀU RGB 4

HÌNH 2.3 BẢNG MÃ MÀU RGB THƯƠNG MẠI 5

HÌNH 2.4 HÌNH ẢNH WEBCAM 6

HÌNH 2.5 CẢM BIẾN THU NHẬN HÌNH ẢNH 7

HÌNH 2.6 HÌNH ẢNH MÔ CẢ CẤU TẠO CỦA 1 WEBCAM CƠ BẢN 8

HÌNH 2.7 ỨNG DỤNG CỦA WEBCAM 9

HÌNH 2.9 GIAO DIỆN CỦA NODE-RED 10

HÌNH 2.9 PHƯƠNG PHÁP KÉO THẢ CỦA NODE-RED 10

HÌNH 2.8 THẺ CHỨC NĂNG KHÁC CỦA NODE RED 11

HÌNH 2.9 TỔNG QUAN VỀ GOOGLESHEETS 12

HÌNH 2.10 LIÊN KẾT DỮ LIỆU APPSHEET VÀ CÁC DATABASE 13

HÌNH 3.1 SƠ ĐỒ KHỐI HỆ THỐNG 15

HÌNH 3.2 THIẾT KẾ GIAO DIỆN NODE RED 16

HÌNH 3.3 NODE-RED DASHBOARD 1 19

HÌNH 3.4 NODE-RED DASHBOARD 2 19

HÌNH 3.5 NODE-RED DASHBOARD 3 20

HÌNH 3.6 TẠO TRANG TÍNH SẢN PHẨM ĐÃ QUÉT 21

HÌNH 3.6 TẠO TRANG TÍNH THỐNG KÊ 21

v

HÌNH 3.10 TẠO APPSHEET 2 23

HÌNH 3.11 TẠO APPSHEET 3 24

HÌNH 3.12 TẠO APPSHEET 4 25

HÌNH 3.13 TẠO APPSHEET 5 25

HÌNH 3.14 TẠO GIAO DIỆN HIỂN THỊ CHO APPSHEET 1 26

HÌNH 3.15 TẠO GIAO DIỆN HIỂN THỊ CHO APPSHEET 2 27

HÌNH 3.16 THIẾT LẬP USERNAME VÀ PASSWORD 27

HÌNH 3.16 TẠO DATABASE 1 28

HÌNH 3.17 TẠO DATABASE 2 28

HÌNH 3.18 TẠO DATABASE 2 29

HÌNH 3.19 TẠO DASHBOARD VÀ TẠO BIỂU ĐỒ 29

HÌNH 3.20 BIỂU ĐỒ THỐNG KÊ 30

HÌNH 3.21 CHỌN DATA SOURCE VÀ CÀI ĐẶT CHO BIỂU ĐỒ 1 30

HÌNH 3.22 CHỌN DATA SOURCE VÀ CÀI ĐẶT CHO BIỂU ĐỒ 2 31

HÌNH 3.23 CẤU HÌNH THỜI GIAN CẬP NHẬT CÁC CHART 31

HÌNH 3.24 CHỈNH SỬA IP TRUY CẬP 32

HÌNH 3.25 CHIA SẺ QUYỀN TRUY CẬP CÁC CHART 33

HÌNH 3.26 CHIA SẺ QUYỀN TRUY CẬP CÁC CHART 33

HÌNH 3.27 THÊM USER THAM GIA 34

HÌNH 3.28 CÁC LỰA CHỌN PHÂN QUYỀN CHO USER 34

vi

HÌNH 5.2 THÔNG TIN SẢN PHẨM 37

HÌNH 5.3 DỮ LIỆU NHẬP VÀO TRÊN GOOGLESHEETS 38

HÌNH 5.4 DỮ LIỆU NHẬP VÀO BÊN MONGODB 38

HÌNH 5.5 DỮ LIỆU ĐƯỢC ĐƯA LÊN APPSHEETS 39

HÌNH 5.6 CHART DỮ LIỆU MONGODB 40

HÌNH 5.7 CHART DỮ LIỆU APPSHEETS 40

HÌNH 5.7 XÓA DỮ LIỆU GOOGLESHEET HOẶC MONGODB 41

HÌNH 5.8 XÓA DỮ LIỆU MONGODB THỜI GIAN MONG MUỐN 41

HÌNH 5.9 XÓA DỮ LIỆU MONGODB THEO TRƯỜNG MÀU SẮC 42

vii

Chương 1 Tổng quan đề tài 1.1 Giới thiệu đề tài

Việc chuyển đổi số trong đời sống hằng ngày, trong công nghiệp đang là một vấn đề đang được quan tâm rất nhiều, nhất là trong thời kì dịch bệnh Covid-19 như hiện nay hiệnnay, tất cả đều thông qua hệ thống truyền tải dữ liệu trực tuyến Những công việc sáng tạo, cho ra đời các ứng dụng có tích hợp đầy đủ những chức năng phục vụ cho các ngành nghề yêu cầu truy suất dữ liệu,các ngành yêu cầu nhập/ xuất hang hóa, các ngành thu thập

dữ liệu thị trường, ngành y tế, Logistics, …Ứng dụng được thiết kê trực quan, giúp người

sử dụng dễ năm bắt được số liệu mà mình cần

1.2 Mục đích nghiên cứu

Sử dụng Node red,GoogleSheets, Appsheet, MongoDB để quét màu sắc sản phẩm và nhập dữ liệu vào hệ thống liệu, từ đó hiển thị dữ liệu và lưu lại lên GoogleSheets hoặc MongoDB, từ đó xuất ra Appsheet hoặc link hiển thị các Chart cần thiết Giúp giám sát vàlưu trữ thông tin hàng hóa dễ dàng, thuận tiện trong việc truy suất dữ liệu

1.3 Đối tượng nghiên cứu

-Node red

- Ảnh màu RGB

-Xử lí ảnh màu RGB

-Giao tiếp các module trong Node-red

- Giao tiếp Webcam với Node-red

1.5 Dự kiến kết quả

Quét mã, node-red sẽ xử lý dữ liệu và nhập thông tin hàng hóa trực tiếp lên trên GoogleSheets, MongoDB Sau đó dữ liệu hiển thị dựa trên dữ liệu của GoogleSheets, MongoDB cho ra các biểu đồ Appsheet hoặc biểu đồ Online của MongoDB

Chương 2 Cơ sở lí thuyết 2.1 Tìm hiểu về xử lí ảnh màu RGB

2.1.1 Khái niệm ảnh số

Tập hợp hữu hạn các điểm ảnh dưới dạng một ma trận 2 chiều, mỗi phần tử của ma trận tương ứng với một điểm ảnh, các điểm ảnh có với mức xám phù hợp dùng để gần vớiđiểm ảnh thật Mỗi phần tử này được quy ước, gọi là một pixel (picture element)

Ảnh có thể được định nghĩa là một hàm 2 chiều f(x, y), trong đó x, y thể hiện tọa độ điểm ảnh trong không gian hoặc mặt phẳng, độ lớn của hàm f được gọi là độ sáng

(intensity) hay độ xám (gray level) của ảnh tại điểm được xét

Hệ màu RGB có thể biểu diễn dưới dạng số 24bit, 32bit,16bit,8bit,…

Hình 2.1 Độ chính xác màu sắc của các loại ảnh

2.1.2 Hệ màu RGB

Hệ màu RGB là hệ màu được kết hợp giữa 3 màu Red (Đỏ) Green (Xanh lá) và Blue (Xanh dương) Hệ màu RGB được áp dụng rất rộng rãi nhờ vào độ chính xác mà những phối màu của RGB mang lại Những tầm nền sử dụng dãy màu RGB xuất hiện rất nhiều xung quanh chúng ta: Màn hình tivi, Màn hình laptop/PC, … Bằng cách sử dụng các tổ hợp màu giữa 3 màu cơ bản, ta ra đời được một bảng màu lên đến 256 x 256 x 256 = 16.777.216 màu cho hệ màu hệ màu RGB 24 bit

Hình 2.2 Màu RGB

Hệ màu RGB 24 bit là một trong những mô hình phổ biến nhất,trong đó mỗi điểm ảnh được biểu diễn bằng 3 giá trị RGB với giả trị dao động số trong khoảng [0-255]

Hình 2.3 Bảng mã màu RGB

2.2 Ứng dụng của hệ màu RGB:

Dùng cho các sản phẩm sử dụng trên các màn hình điện tử:

 Thiết kế màu sắc web

 Giao diện(HUD)

 Make video, film,…

 Bảng quảng cáo điện tử

2.2.1 Độ phủ màu của các hệ màu RGB thương mại hiện nay

Hình 2.3 Bảng mã màu RGB thương mại

Về cơ bản, webcam có thể xem như một máy ảnh kỹ thuật số với chất lượng thấp hơn Điểm khác biệt lớn nhất ở chỗ các chức năng chính của webcam của nó sẽ do phần mềm yêu cầu quyền truy cập webcam trên máy tính điều khiển.

Hình 2.4 Hình ảnh Webcam

Nguyên lí hoạt động

Để ghi được hình ảnh, webcam sử dụng một cảm biến cảm nhận hình ảnh, thường là ccd (charge-coupled device) hoặc cmos (complementary metal-oxide semiconductor)

Hình 2.5 Cảm biến thu nhận hình ảnh

Cảm biến hình ảnh là một bộ xử lý cấu tạo bằng silicon gồm 75.000 đến 300.000 điểm ảnh Ánh sáng truyền tới những điểm ảnh này, cung cấp năng lượng và tạo ra những dòng điện Những điểm ảnh chứa dòng diện sẽ được số hóa, được nén lại và truyền tới máy tính thông qua đường truyền cổng usb của máy tính Ứng dụng yêu cầu quyền điều khiển webcam trên máy tính sẽ giải nén dữ liệu chuyển dữ liệu này tới những phần mềm

có nhu cầu sử dụng

Cấu tạo của môt webcam gắn ngoài

Hình 2.6 Hình ảnh mô cả cấu tạo của 1 webcam cơ bản

6 Đầu cắm USB vào máy tính

7 Đầu cắm Micro vào thiết bị

8 Cảm biến ánh sáng (mắt thu webcam)

Thông thường, những webcam giá rẻ,webcam có sẵn trên laptop tạo ra hình ảnh với

độ phân giải 640 x 480 pixel, nhiều loại laptop cao cấp hoặc webcam gắn ngoài có thể tạo

ra hình ảnh với độ phân giải fullHD và thậm chí 2K và phát đi hình ảnh tới phần mềm điều khiển với tốc độ 30-60 khung hình một giây (30-60fps)

2.3.2 Ứng dụng của webcam

Phục vụ nhu cầu truyền tải hình ảnh, thu nhận hình ảnh, video call ,camera an ninh,

sử dụng cho các nhu cầu bảo mật, quay phim chụp ảnh, quét mã QR hay mã vạch,

Hình 2.7 Ứng dụng của Webcam

2.3 Tìm hiểu về Node red

2.3.1 Node red cơ bản

Node red là công cụ lập trình dựa vào các module có sẵn bằng phương pháp kéo thả trực quan và đơn giản Node red cung cấp một trình soạn thảo,lập trình trực tiếp trên trìnhduyệt giúp dễ dàng kết nối các module với nhau bằng cách sử dụng các khối trong bảng công cụ (palette) có thể thực hiện bằng thao tác kéo thả các node vào vùng workspace

Hình 2.9 Giao diện của node-red

Hình 2.9 phương pháp kéo thả của node-red

2.3.2 Chức năng các module trong Node-red :

Hình 2.8 Thẻ chức năng khác của Node red

 Manage Palette : Quản lý thêm/xóa các thư viện module

 Workspace : Nơi kéo thả Node vào và kết nối với nhau tạo thành các luồng

 Sliderbar : Chứa các bảng cung cấp các số liệu và các công cụ trong quá trình chỉnh sửa

 Nút Deploy : triển khai, kết nối các luồng đã được tạo

Ta có thể tải lên các flows có sẵn trên internet thông qua tab Import hoặc lưu flows đang sử dụng hiện tại về dạng file đuôi txt hoặc json để thuận tiện việc sao lưu di chuyểnsang thiết bị khác với tab Export.Ngoài ra ta có thể thêm và tải các thư viện các Node chức năng mới cho Palette qua thẻ Manage palette

2.4 Tìm hiểu về GoogleSheets

2.4.1 Giới thiệu

Google Sheets còn được gọi là Google trang tính là một rong những sản phẩm nổi bậttrong bộ ứng dụng của Google được cung cấp hoàn toàn miễn phí, dựa trên trình duyệt

web để tạo, chỉnh sửa, chia sẻ bảng tính miễn phí, có chức năng tương tự như Microsoft Excel Google Sheets giúp trải nghiệm trang tính với rất nhiều tính năng ưu việt, thậm chí còn vượt trội hơn rất nhiều so với Excel của Microsoft Với việc nhập liệu, quản lý dữ liệu hoàn toàn online.

Hình 2.9 Tổng quan về GoogleSheets

2.4.2 Ưu điểm của GoogleSheets so với các trình nhập liệu đang có trên thị trường

 Form nhập liệu dễ làm quen

 Kết nối các bảng tính với nhau

 Gợi ý cấu trúc câu lệnh trực tiếp

 Có rất nhiều Add-Ons thú vị trên GoogleSheets

 Hỗ trợ tốt bảo mật và chia sẻ vô cùng dễ dàng

2.5 Tìm hiểu về Appsheet

2.5.1 Giới thiệu

AppSheet là nền tảng phát triển ứng dụng của Google được cung cấp miễn phí,

AppSheet cho phép bạn nhanh chóng tạo các ứng dụng dành cho thiết bị di động và máy

tính để bàn bằng dữ liệu hiện có của mình mà không yêu cầu cần phải biết quá nhiều về lập trình dữ liệu.

AppSheet là nền tảng xây dựng phần mềm có thể chạy được trên cả máy tính và điện thoại thông minh (bao gồm cả IOS lẫn Android) AppSheet có thể sử dụng nhiều nguồn

dữ liệu đầu vào, trong đó GoogleSheets Với AppSheet ứng dụng chạy được trên điện thoại, máy tính bảng vì vậy chúng ta có thể quan sát dữ liệu từ bất cứ đâu

Hình 2.10 Liên kết dữ liệu Appsheet và các database

2.5.2 Ưu điểm và nhược điểm

Ưu điểm:

 Không cần biết viết chương trình

 Không yêu cầu hiểu biết ngôn ngữ lập trình

 Tiện lợi, đơn giản, nhanh chóng

 Có thể tải về máy tính file dữ liệu dạng Excel

 Dữ liệu được lưu trực tuyến với dung lượng 15GB miễn phí

 Bảo mật,và không sợ virut

 Chỉ cần có internet là có thể sử dụng

Nhược điểm:

 Dữ liệu cập nhật lên app bị giới hạn (5Mb-10Mb)

 Tài khoản sử dụng bị giới hạn ( cho phép 10 tài khoản đối với bản miễn phí,200 tàikhoản đối với bản trả phí $50)

 Appsheet chỉ cho phép lọc (filter) 10.000 dòng dữ liệu.

 Giới hạn về dạng kiểu xem (20-30 Table hoặc 20-30 View)

 Giới hạn về Google map và số hình ảnh (1000 vị trí địa lý trên tháng)

Hình 3.1 Sơ đồ khối hệ thống

3.2 Thiết kế giao diện

3.2.1 Node red

Thiết kế giao diện, sử dụng các module kéo thả các Node như hình:

Hình 3.2 Thiết kế giao diện Node red

Các chức năng của các module node-red cơ bản

: bật tắt webcam trên Dashboard

: Phân tích màu sắc

: chuyển dữ liệu màu sắc thành msg.payload để chuyển dữ liệu vào GoogleSheets

: hiển thị thông tin ra màn hình Dashboard.

: gộp các thông tin đầu vào lại thành một mảng hoặc 1 object

: liên kết, nhập dữ liệu với ggsheet

: liên kết, xóa dữ liệu với ggsheet

: chuyển dữ liệu màu sắc, thời gian thành msg.payload để chuyển

dữ liệu vào MongoDB

:Giá trị module function màu của sản phẩm

:giá trj function thời gian

: liên kết, chuyển dữ liệu với MongoDB

: so sánh và gán giá trị

:tạo nút nhấn trong dashboard

3.2.2 Node-red Dashboard

Giao diện hiển thị của node-red dashboard

Hình 3.3 Node-red dashboard 1

Hình 3.4 Node-red dashboard 2

Hình 3.5 Node-red dashboard 3

3.2.3 AppSheets

Bước 1: Tạo các trang tính

Nhấp vào biểu tượng “+” góc dưới cùng bên trái của Google Sheets để tạo trang tính

Ta tạo 2 trang tính: Sản phẩm đã quét, Thống kê

Hình 3.6 Tạo trang tính Sản phẩm đã quét

Hình 3.6 Tạo trang tính Thống kê

Từ đây ta có thể chia sẻ quyền truy cập Googlesheet cho gmail khác, ta vào mục:

“chia sẻ” và thêm gmail người mà ta cho phép truy cập:

Hình 3.8 Phân quyền cho các user

Bước 2: Tạo Appsheet

Chọn tab Tiện ích mở rộng sau đó chọn Appsheet, Tạo ứng dụng

Hình 3.11 Tạo Appsheet 3

Bước 5: Chọn “Data” -> chọn “New table” để thêm các dữ liệu từ GoogleSheets vào.

Bước 7: Tạo giao diện UX

Chọn thẻ UX -> “New View”.Điều này sẽ giúp tạo ra các mục trên Appsheet để ta có thể thấy và thao tác nhập liệu trên đó

Hình 3.14 Tạo giao diện hiển thị cho Appsheet 1

Bước 8: Chọn kiểu hiển thị cho các mục UX vừa tạo như các hình bên dưới

Hình 3.15 Tạo giao diện hiển thị cho Appsheet 2

3.2.4 MongoDB cloud

Bước 1: Tạo tài khoản với Gmail

Bước 2: Chọn thẻ “Security” -> vào “Quickstart” để khởi tạo username và mật khẩu

Hình 3.16 Thiết lập Username và Password

Bước 3: Chọn tab “New project” để tạo dự án mới

Ta đặt Database có name là “test0” và Collection name là “ColorID”

Hình 3.18 Tạo database 2

Bước 6: Chọn tab “Chart” và chọn tab “Add Dashboard”

Hình 3.19 Tạo Dashboard và tạo biểu đồ

Bước 7: Sau đó chọn “Add Charts” và cài đặt tên cho cho các chart vừa tạo.Chọn datasourse là tên của database “test()” và collection name là “ColorID” ta vừa tạo ở trên

Hình 3.20 Biểu đồ thống kê

Bước 8: Chọn chart 1 và cấu hình chart như sau: Chart type chọn “Circula”

Hình 3.21 Chọn Data Source và cài đặt cho biểu đồ 1

Chọn chart 2, cấu hình chart như sau:

Hình 3.22 Chọn Data Source và cài đặt cho biểu đồ 2

Bước 9: cấu hình thời gian cập nhật của các chart

Vào tab “Charts” ->chọn “Refesh” -> chọn “Auto-refesh settings”-> đặt giá trị là 10s

Hình 3.23 Cấu hình thời gian cập nhật các Chart

Bước 10: cấu hình phân quyền

Share Dashboard:

Vào tab “Atlas” ->chọn “Network Access” -> Ở phần ip addres ta cấu hình như sau:

https://charts.mongodb.com/charts-project-0-wyjdu/public/dashboards/61c1eb05-Hình 3.25 Chia sẻ quyền truy cập các chart

Để phân quyền user theo gmail với các quyền như: thêm bớt dữ liệu trong collection, xóa project hoặc các user tham quan, xem được các data ta làm như sau:

Vào tab “Atlas”-> “Invite to project”

Hình 3.26 Chia sẻ quyền truy cập các chart

Thêm Gmail người được mời và phân quyền

Hình 3.27 Thêm user tham gia

Hình 3.28 các lựa chọn phân quyền cho user

User có thể được phân cho các quyền như sau:

Project Owner: đây là phân quyền cao nhất, có toàn quyền quyết định thêm bớt user, xóa dữ liệu

Project Cluster Manager: có khả năng xóa cluster, xóa user, dữ liệu nhưng không xóa được project

Project Data Access Admin: có khả năng thêm bớt user, xóa dữ liệu nhưng không xóađược owner

Project Data Access Read/Write: chỉ có khả năng chỉnh sửa dữ liệu

Project Data Access Read Only: có thể đọc được data nhưng không chỉnh sửa đượcProject Read Only: chỉ có thể xem được các thông tin bên ngoài, không truy cập đượcvào collection để xem data

Hình 3.29 Các mức độ phân quyền cho user