4.3.3.1. Các bước thực hiện để truy cập vào webserver
Bước 1: Mở phần mềm giúp tạo máy chủ trên máy (Localhost). Sử dụng phần
mềm Xampp.
Hình 4.7: Giao diện chính của phần mềm Xampp
Sau khi mở ứng dụng Xampp lên, tiếp đến ta sẽ Start 2 module đó là module Apache vs module MySQL để khởi động Webserver Apache và MySQL Server lên thì mới chạy được máy chủ localhost và được thể hiện qua hình 4.7.
Click chọn để khởi động
Hình 4.8: Khởi động Apache và MySQL
Sau khi nhấn start thì ta thấy 2 module đã chuyển sang nền xanh, điều đó cho thấy máy chủ và dữ liệu đã sẵn sàng hoạt động, hình 4.8 thể hiện điều đó.
Bước 2: Di chuyển đến thư mục chứa toàn bộ dữ liệu của WebSever đã được
lập trình và tiến hành các lệnh để cho phép chạy web và quản lí sự thay đổi và thao tác trên web server.
Để sử dụng Git Bash ở một folder nào đó thì ta vào folder đó và click chuột phải rồi chọn Git Bash Here như hình 4.9.
Đã khỏi động
Hình 4.9: Chọn Git Bash Here.
Hình 4.10: Nhập lệnh trong Git Bash
Tiếp đến ta nhập lệnh cho phép kết nối với máy chủ thông qua lệnh : $ npm start. Để có thể xuất file excel thì phải nhập câu lệnh $ npm I excel4node trước khi chạy server thì mới có thể xuất ra file excel sau mỗi lần thêm hoặc chỉnh sửa thông tin của thẻ được thể hiện ở hình 4.10.
Chọn Git Bash Here
Hình 4.11: Sau khi nhập lệnh khởi động.
Khi nhập lệnh cho phép khởi động, ứng dụng sẽ trả về các lệnh cho ta biết đã sẵn sàng hoạt động và sẽ có hiệu lực trên port *:3000 của máy chủ như trên hình 4.11.
Bước 3: Mở một trình duyệt web bất kì và gõ đường link: localhost:3000 thì sẽ hiển thị giao diện đăng nhập như hình 4.12.
Hình 4.12: Giao diện đăng nhập.
Sẵn sàng hoạt động trên port 3000
Nhập tài khoản
Nên sử dụng trình duyệt web google chrome để web hoạt động nhanh nhất.
Bước 4: Tiến hành đăng nhập để được vào giao diện chính của trang web. Sau khi nhập tài khoản và mật khẩu đúng sẽ được vào phần giao diện chính được mô tả ở hình 4.13.
Hình 4.13: Giao diện chính của webserver.
Để truy cập được ta cần có các tài khoản được tạo thông qua database. Để tạo tài khoản thì ta cần truy cập vào đường dẫn: 127.0.0.1 phpMyAdmin hoặc truy cập vào đường dẫn:
http://localhost/phpmyadmin/sql.php?server=1&db=phpmyadmin&table=admi n&pos=0
Hình 4.14: Giao diện quản lí.
Ở phần này, toàn bộ dữ liệu thông tin về tài khoản được lưu trữ ở mục rfid, để tạo tài khoản ta cần truy cập đến đến mục admin. Hình 4.15 thể hiện giao diện đó.
Hình 4.15: Giao diện tạo tài khoản đăng nhập.
Tiếp đó ta click vào phần SQL để hiển thị ra phần đăng kí tài khoản và click vào ô INSERT để thêm tài khoản. Ta nhập các thông tin của username và password
Chọn SQL
vào các trường value-1 và value-2. Sau đó tài khoản sẽ được tạo khi ta click vào ô Go. Hình 4.16 thể hiện giao diện điền và lưu thông tin.
Hình 4.16: Điền thông tin và lưu.
a. Sử dụng file excel
Để tiết kiệm chi phí khi sử dụng hệ thống, mỗi thẻ tag đều có khả năng tái sử dụng thay vì vứt bỏ. Mục đích sử dụng file excel là để lưu lại các thông tin đã tạo cho mỗi thẻ. Khi xóa thẻ thì thông tin trên thẻ sẽ mất và file excel sẽ lưu trữ lại các thông tin đó để khi người dùng muốn truy xuất lại thông tin thì có thể xem lại dễ dàng. File excel được lưu cùng với thư mục của server. File excel sẽ được lưu sau mỗi lần “Add” thêm thẻ trên web server. Để sử dụng chỉ cần click vào thư mục chứa file excel đó và mở lên. Sau mỗi lần thêm thẻ cần phải thoát khỏi file excel, nếu không hệ thống sẽ không lưu thông tin và mọi hoạt động sẽ bị gián đoạn. Khi ngừng hệ thống thì phải lưu trữ lại file excel vào một thư mục nào đó tùy theo người sử dụng vì khi khởi tạo lại server phải tạo một file excel mới nên các thông tin cũ bị mất.
b. Cách sử dụng toàn bộ hệ thống Cách sử dụng hệ thống được chia thành 3 phần: Phần 1: Sử dụng thiết bị. Click ô Insert Nhập thông tin Lưu
Phần 2: Nhập, chỉnh sửa, xóa thông tin của thẻ ( sử dụng trên máy tính). Phần 3: Hiển thị thông tin trên App Android (sử dụng cho điện thoại). Dưới đây là chi tiết mỗi phần:
Phần 1: Sử dụng thiết bị:
Bước 1: Bật công tắc lên trạng ON để khởi động thiết bị, OFF để tắt thiết bị. Bước 2: Tự động truy cập vào hệ thống wifi được thiết lập sẵn của thiết bị. Bước 3: Quét thẻ vào vị trí thích hợp.
Bược 4: Thông tin sẽ được hiển thị trên Oled. Bước 5: Tiến hành xạc pin nếu thiết bị tắt đột ngột.
Phần 2: Nhập, chỉnh sửa, xóa thông tin của thẻ ( sử dụng trên máy tính):
Bước 1: Truy cập vào hệ thống wifi được thiết lập sẵn của thiết bị.
Bước 2: Truy cập đến địa chỉ nội bộ là: http://localhost:3000/, sau đó tiến hành nhập tài khoản và mật khẩu.
Bước 3: Quét vòng đeo có chứa thẻ tag vào đầu đọc RFID, trên web sẽ hiển thị ID của thẻ. Khi đó ta có thể thao tác trên mỗi ID đó.
Bước 4: Muốn thêm thông tin cho thẻ mới, ta nhấn vào nút Add. Muốn xóa, ta nhấn vào nút Remove còn khi muốn chỉnh sửa, ta nhấn vào ô Edit và tìm kiếm thông tin thì chỉ cần nhập các thông tin vào thanh tìm kiếm.
Bước 5: Truy cập vào thư mục Server để tìm và mở file excel.
Phần 3: Hiển thị thông tin trên App Android (sử dụng cho điện thoại):
Bước 1: Truy cập vào hệ thống wifi được thiết lập sẵn của thiết bị. Bước 2: Mở ứng dụng lên và tiến hành nhập tài khoản và mật khẩu. Bước 3: Tự động kiểm tra sự thay đổi ID của thẻ được quét.
Bước 4: Nếu thẻ đã có thông tin thì sẽ hiển thị trên màn hình của điện thoại. Bước 5: Nếu hệ thống ngưng hoạt động thì phải tắt và khởi động lại.
Chương 5. KẾT QUẢ - NHẬN XÉT - ĐÁNH GIÁ
5.1. KẾT QUẢ
Sau một khoảng thời gian tìm hiểu, nghiên cứu các tài liệu chuyên ngành, các tài liệu trực tuyến trên Internet bằng tiếng Việt và tiếng Anh, từ đó tổng hợp lại các kiến thức đã học và cùng với sự hướng dẫn của thầy Võ Đức Dũng, nhóm chúng em đã hoàn thành được đồ án tốt nghiệp với tên đề tài là: “Thiết kế và thi công được hệ thống nhận diện mẹ và bé sơ sinh sử dụng công nghệ RFID kết nối với App trên
Smart phone và lưu trữ trên Webserver”. Cũng thông qua đề tài này, nhóm đã có
thêm nhiều kiến thức như:
- Tìm hiều thêm được các kiến thức cơ bản của công nghệ mã vạch RFID, nguyên lí hoạt động cũng như ứng dụng của công nghệ đó.
- Hiểu biết được các kiến thức về webserver.
- Hiểu sâu hơn về việc sử dụng module Wifi kết nối với module RFID.
- Nghiên cứu biết được cấu tạo cũng như cách sử dụng các loại thẻ tag và lựa chọn loại thẻ tag phù hợp phục vụ cho mục tiêu của đồ án.
- Biết được cách sử dụng các linh kiện dạng dán nhỏ gọn giúp tối ưu hóa kích thước của mạch.
- Biết sử dụng phần mềm Visuo Studio Code phục vụ cho việc lập trình Web. - Biêt thêm một ngôn ngữ lập trình mới là Java Script và các ngôn ngữ khác để
tạo lập một trang web như htlm, css, phần mềm Git hub quản lý thao tác trên web, phần mềm Xampp giúp tạo máy chủ.
- Biết được các cách kết nối cũng như các kiến thức về việc truy xuất dữ liệu từ database đến điện thoại và máy tính.
- Biết cách tạo một máy chủ ảo trên máy tính.
- Biết cách sử dụng phần mềm Android Studio để thiết kế và lập trình ứng dụng để hiển thị thông tin trên smartphone.
- Sử dụng phần mềm Solid Work để vẽ hộp đựng cho thiết bị.
Sau quá trình nghiên cứu, thi công đề tài “Thiết kế và thi công được hệ thống nhận diện mẹ và bé sơ sinh sử dụng công nghệ RFID kết nối với App trên Smart phone và lưu trữ trên Webserver” nhóm đã đạt được các kết quả như sau:
a. Kết quả hoàn thiện của hệ thống - Mạch hoàn thiện
Hình 5.1: Mặt trên của mạch.
Hình 5.1 mô tả chi tiết vị trí của các linh kiện của mạch được bố trí như hình vẽ. Gồm có vị trí chân cắm của module RFID, Oled, vị trí cắm sạc, domino để gắn nguồn và nút nhấn reset.
- Phần thiết bị:
Hình 5.2 mô tả mặt trước và mặt phía trên của thiết bị, ở mặt trước, có Oled dùng để hiển thị các thông tin thiết yếu để người dùng biết được thiết bị có hoạt động hay chưa, các thẻ đã có chứa thông tin hay đã kết nối đến server hay chưa.
Ở mặt phía trước của thiết bị, có một lỗ cắm, vị trí đó là để cắm sạc pin cho thiết bị. Vị trí chân cắm modlue RFID Công tắc và nút nhấn Nguồn pin Mạch giảm điện áp Vị trí chân cắm để nạp code Vị trí chân cắm Oled Vị trí cắm sạc
Hình 5.2: Mặt trên và mặt trước của thiết bị khi đóng hộp.
Hình 5.3: Mặt bên trái và bên phải của thiết bị khi đóng hộp.
Mặt bên trái của thiết bị có một công tắc On/Off để khởi động/ngắt thiết bị như trên hình 5.3, công tắc đang ở chế độ off, để hoạt động thì công tắc cần gạt lên mức on và mặt bên phải là khu vực để quét vòng tay có thẻ tag.
Mặt trên của thiết
bị, nơi gắn Oled Lỗ cắm sạc
Công tắc On/Off
- Phần App trên điện thoại
Hình 5.4: Hình ảnh của App RFID Monitor
Hình 5.4 mô tả hình ảnh của App được cài đặt trên điện thoại Smart Phone sử dụng hệ điều hành Android.
Hình 5.5: Giao diện đăng nhập của APP và tiến hành nhập tài khoản.
Khi mở app lên thì sẽ hiển thị giao diện đăng nhập. Sau đó là nhập tài khoản đã được khởi tạo ở thư mục rfid trên server. Nếu đúng tài khoản sẽ vào giao diện chính, còn sai tài khoản thì phải đăng nhập lại. Ở hình 5.5, nhóm đã sử dụng tài khoản được tạo sẵn với “Username” là “vonguyengiap” và “Password” là “khongcogiap”.
Tiếp đến là hình 5.6 thể hiện giao diện chính của app khi đã đăng nhập thành công.
Nơi nhập tài khoản và mật
Hình 5.6: Giao diện chính khi đăng nhập thành công.
Sau khi đăng nhập thành công và hiển thị các thông tin cơ bản trên web gồm: hình ảnh, ID, Name, Age, Gender, Address, Phone. Nếu chưa có dũ liệu, tất cả các thông tin là dữ liệu trống và được sẽ được hiển thị là Empty Data.
- Phần web
Hình 5.7 thể hiện giao diện chính của web được nhóm thiết kế báo gồm các thành phần chính như:
Nút nhấn “Add” để thêm thông tin.
“ID” để hiện lên mã ID của thẻ khi được quét,
Nút nhấn “Edit” và “Remove” dùng để chỉnh sửa thông tin hoặc xóa thông tin.
Thanh tìm kiếm lại thông tin.
Bảng hiển thị các thông tin lên giao diện chính của web.
Nơi hiển thị ảnh của bệnh nhân
Nơi hiển thị thông tin của bệnh nhân. Do chưa có thông tin nên
tất cả đều hiển thị là Empty Data ID của thẻ Tên Tuổi Giới tính Địa chỉ Số điện thoại
Hình 5.7: Giao diện chính của web
- Vòng đeo cho bé được thể hiện ở hình 5.8.
Hình 5.8: Vòng đeo cho bé. ID của thẻ Add thêm thẻ Nút Edit và nút Remove Vòng đeo Thẻ tag dạng dán Bảng thông tin Thanh tìm kiếm thông tin
Vòng đeo tay được thiết kế thủ công giống như hình dạng của một chiếc đồng hồ đeo tay, phía trước mặt là thẻ tag RFID dạng dán. Vòng tay được sử dụng vải 100% cotton được các bác sĩ khuyến khích sử dụng vì loại vải này mềm mại, có khả năng thấm hút mồ hôi tốt nhất, thông thoáng, không chứa nhiều chất hóa học.
b. Hoạt động của hệ thống
Hình 5.9: Oled hiển thị khi mở nút nguồn.
Hình 5.9 thể hiện hình ảnh của Oled khi mở công tắc lên mức On, mạch sẽ hoạt động, ESP sẽ kết nối đến wifi và màn hình Oled hiển thị dòng chữ ID Scaner nếu mạch đã kết nối đến được server và chờ quét thẻ.
Nếu chưa tìm thấy server, Oled sẽ hiển thị: “Server not found”, điều đó có nghĩa là hệ thống chưa khởi động server cho nên không thể hoạt động được.
Hình 5.10 thể hiện việc quét thẻ vào đầu đọc của thiết bị, kế đến là hình ảnh hiển thị của Oled hiển thị ID của thẻ vừa được quét.
Oled hiển thị quét ID thẻ
Hình 5.10: Quẹt thẻ tag vào phần đọc thẻ của module RFID.
Khi quẹt thẻ vào phần bên trái của thiết bị, nơi chứa module RFID. Khi đó, Oled sẽ hiện lên ID của thẻ, do thẻ mới chưa có thông tin nên xuất hiện dòng chữ : “ID not EXIST!”.
Tiếp đến ta thêm thông tin cho mỗi ID thẻ ở trên web được thể hiện ở hình 5.11.
Hình 5.11: Giao diện của web nhận ID của thẻ vừa được quét.
Khi quét thẻ thì ID thẻ sẽ thị ra ở phần ID và cho ta biết ID của thẻ hiện tại là AAC7ADAD. Tiếp đến ta sẽ thêm thông tin cho mỗi ID đó, nếu ID đã có sẵn thông tin, hệ thống sẽ thông báo “Thẻ đã có sẵn, vui lòng quét thẻ mới!!”, ngược lại sẽ hiển thị giao diện như hình 5.12.
Tiến hành quét thẻ vào vị trí của đầu
đọc thẻ
Sau khi quét ID, thẻ chưa có thông tin
ID sau khi quét qua thiết bị được hiển thị trên web
Hình 5.12: Giao diện khi nhấn nút Add.
Giao diện gồm những thông tin yêu cầu người nhập phải điền vào là: tên, tuổi, giới tính, địa chỉ, điện thoại và thư mục chọn hình ảnh.
Hình 5.13: Nhập thông tin.
Hình 5.13 thể hiện việc tiến hành nhập các thông tin theo yêu cầu của giao diện, tiếp đến ta bấm Okay sẽ lưu các thông tin mà ta sẽ nhập. Nếu hình ảnh chưa được thêm, giao diện web sẽ hiển thị như hình 5.14.
Giao diện nhập thông tin Các thông tin đã được nhập
Hình 5.14: Khi chưa có ảnh.
Phần AVARTA sẽ chỉ hiển thị khung ảnh mặc định khi chưa có ảnh được thêm vào như hình 5.14.
Hình 5.15: Sửa thông tin qua nút Edit.
Khi ta muốn sửa đổi thông tin tương ứng với mỗi ID, ta chỉ cần rê chuột đến nút Edit tương ứng với mỗi hàng chứa ID cần sửa, hình 5.15 cho ta thấy giao diện chỉnh sửa đó. Tiếp đến ta tiến hành sửa lại các thông tin nếu cần thiết. Cụ thể với trường hợp này, nhóm sẽ thay đổi hình ảnh cho ID vừa thêm, để thêm hình ta chọn vào ô Choose File.
Hình 5.16: Thư mục lưu trữ hình ảnh.
Giao diện sửa thông tin khi nhấn nút Edit Chọn hình Chọn ảnh để thêm Ảnh chưa được thêm
Hình 5.16 hiển thị thư mục chứa hình ảnh, tiếp đến ta chọn một hình ảnh phù hợp và chọn Open, nếu chưa có ảnh phù hợp để thêm thì chọn Cancel để hủy.
Hình 5.17: Đã thêm ảnh thành công.
Hình 5.17 hiển thị giao diện web khi đã thực hiện xong chức năng thêm ảnh, với mỗi avatar đều có thể phóng to để thuận lợi cho việc quan sát, chỉ cần click vào hình ảnh muốn phóng to và nó sẽ hiển thị lên.
Mỗi lần chỉ hiển thị được 1 hình ảnh như hình 5.18. Khi không muốn xem ảnh nữa chỉ cần click ra khỏi vùng chứa của ảnh hiển thị và sẽ trở về giao diện chính.
Hình 5.18: Phóng to ảnh.
Tiếp đến là phần tìm kiếm thông tin trên web. Các thông tin có thể tìm kiếm chỉ