Hình 3 Biểu đồ sự tương tác của tác nhân với thành phần khác2.3.2 Đặc tả mô hình use case2.3.2.1 Người sử dụng thay đổi định dạng ảnh:Mô tả: Người dùng truy cập trang web để thực hiện ch
Giới thiệu
Các giải pháp đã có
Hiện nay, đã có rất nhiều trang web phục vụ công việc chuyển đổi định dạng ảnh ví dụ như trang web Convertio hay Onlineconvertfree, Online converter với tốc độ xử lý nhanh chóng, đơn giản và dễ sử dụng.
Tuy nhiên, không vì vậy mà các trang web này không mang những hạn chế như việc không có tích hợp thêm các chức năng chỉnh sửa hình ảnh hay đảm bảo chất lượng hình ảnh được trả về.
Từ đó, chúng tôi thấy rằng trong lĩnh vực chuyển đổi định dạng hình
Giải pháp đề xuất
Về giải pháp để hỗ trợ người dùng, chúng tôi xây dựng một ứng dụng web vừa có thể chuyển đổi định dạng hình ảnh mà vừa có thể chỉnh sửa hình ảnh từ những chức năng cổ điển cho tới hiện đại để phục vụ cho người dùng một cách hoàn hảo và tối ưu nhất có thể.
Thiết kế và triển khai
Các yêu cầu chức năng
2.1.1 Chọn và tải lên hình ảnh.
Người dùng có thể chọn chọn và tải lên hình ảnh từ thiết bị của họ với những định dạng ảnh khác nhau mà trang web có thể hỗ trợ được để chuyển đổi
2.1.2 Chọn định dạng đầu ra
Người dùng cần có khả năng chọn định dạng hình ảnh đầu ra mà họ muốn chuyển đổi Điều này có thể bao gồm các định dạng phổ biến như JPEG, PNG, GIF, TIFF, BMP, v.v.
Sau khi người dùng đã chọn hình ảnh và định dạng đầu ra, họ cần có khả năng bắt đầu quá trình chuyển đổi.
2.1.4 Tải xuống hình ảnh đã chuyển đổi
Sau khi hình ảnh đã được chuyển đổi, người dùng cần có khả năng tải xuống hình ảnh đã chuyển đổi.
Các ràng buộc (Constraints)
2.2.1 Các ràng buộc về triển khai
Tương thích trình duyệt: Ứng dụng web cần phải hoạt động đúng trên nhiều trình duyệt khác nhau, bao gồm nhưng không giới hạn ở Chrome, Firefox, Safari và Edge.
Khả năng mở rộng: Ứng dụng cần được thiết kế để có thể mở rộng và xử lý tăng lượng người dùng hoặc yêu cầu chuyển đổi hình ảnh trong tương lai.
Bảo mật: Ứng dụng cần tuân thủ các quy định về bảo mật, đảm bảo rằng hình ảnh người dùng tải lên được bảo vệ an toàn và không bị sử dụng cho mục đích khác mà không có sự đồng ý của người dùng.
2.2.2 Các ràng buộc kinh tế
Chi phí phát triển: Chi phí liên quan đến việc phát triển ứng dụng, bao gồm chi phí cho nhân sự, công cụ và công nghệ, và thời gian phát triển.
Chi phí duy trì: Chi phí liên quan đến việc duy trì và cập nhật ứng dụng, bao gồm chi phí cho máy chủ, bảo mật, và cập nhật tính năng.
2.2.3 Các ràng buộc về đạo đức
Quyền riêng tư người dùng: Ứng dụng cần tuân thủ các quy định về quyền riêng tư, đảm bảo rằng hình ảnh người dùng tải lên được bảo vệ an toàn và không bị sử dụng cho mục đích khác mà không có sự đồng ý của người dùng.
Sử dụng công nghệ một cách có trách nhiệm: Ứng dụng cần được phát triển và sử dụng một cách có trách nhiệm, không gây hại cho người dùng hoặc cộng đồng.
Mô hình hệ thống / Thiết kế giải pháp
2.3.1 Các kịch bản của hệ thống
Hình 1 Biểu đồ về tác nhân và sự phụ thuộc giữa các tác nhân
Hình 3 Biểu đồ sự tương tác của tác nhân với thành phần khác
2.3.2 Đặc tả mô hình use case
2.3.2.1 Người sử dụng thay đổi định dạng ảnh:
Mô tả: Người dùng truy cập trang web để thực hiện chuyển đổi định dạng hình ảnh sang các định dạng khác.
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng truy cập vào trang web và đây là chức năng mặc định có sẵn Không cần chọn thêm chức năng nào nếu không cần thiết.
Tiền điều kiện: Người dùng gửi ảnh vào form của trang web và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện: Người dùng nhận ảnh sau khi chuyển đổi thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn ảnh để đưa vào form nhận ảnh Sau đó chọn định dạng muốn chuyển đổi và chất lượng hình ảnh sau khi chuyển đổi Sau đó bấm nút convert.
3 Hệ thống nhận ảnh và xử lý ảnh, sau khi xử lý xong sẽ thông báo cho người dùng
4 Người dùng nhận lại ảnh sau khi bấm nút download.
Luồng thay thế: không có.
1 Hệ thống báo lỗi nếu tệp tin người dùng gửi vào là không hợp lệ
2 Thông báo lỗi nếu người dùng không đợi trang chuyển đổi xong mà bấm nút download luôn.
Yêu cầu phi chức năng: không có.
Hình 4 Sơ đồ quá trình hoạt động chuyển đổi định dạng ảnh
2.3.2.2 Người sử dụng thay đổi kích cỡ hình ảnh:
Mô tả: Người dùng thay đổi kích cỡ hình ảnh thông qua chức năng “Size”. Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng chọn kích hoạt chức năng Size thông qua nút bấm.
Tiền điều kiện: Hình ảnh phải được gửi vào form và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện:Hình ảnh được thay đổi kích thước thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn chức năng Size trên thanh menu Thêm các thông số chiều ngang, chiều dọc (ô Width, Height) Hoặc chọn tỉ lệ (ô Scale).
3 Hệ thống tiếp nhận yêu cầu và thay đổi hình ảnh theo kích cỡ mong muốn Sau khi chuyển đổi xong sẽ có thông báo.
4 Người dùng nhận lại ảnh thông qua nút bấm download.
Luồng thay thế: Không có.
1 Trường hợp người dùng chỉ bật chức năng này mà không nhập vào, hệ thống sẽ hiểu đó là giữ nguyên định dạng ban đầu của hình ảnh.
2 Trường hợp người nhập vào trường này thông tin không hợp lệ, hệ thống cũng sẽ giữ nguyên định dạng ban đầu của hình ảnh.
Yêu cầu phi chức năng: Không có.
Hình 5 Sơ đồ quá trình thay đổi kích thước hình ảnh
2.3.2.3 Người sử dụng biến đổi hình ảnh:
Mô tả: Người dùng thay đổi xoay, lật hình ảnh thông qua chức năng
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng chọn kích hoạt chức năng Transform thông qua nút bấm.
Tiền điều kiện: Hình ảnh phải được gửi vào form và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện:Hình ảnh được thay đổi thành công theo nhu cầu người dùng.Các luồng sự kiện:
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn chức năng Transform trên thanh menu Thêm các thông số về mức xoay (Rotate), hoặc chọn lật hình ảnh (flip), và có thể chọn cả 2.
3 Hệ thống tiếp nhận yêu cầu và thay đổi hình ảnh theo chỉ số mong muốn Sau khi chuyển đổi xong sẽ có thông báo.
4 Người dùng nhận lại ảnh thông qua nút bấm download.
Luồng thay thế: Không có.
1 Trường hợp người dùng chỉ bật chức năng này mà không nhập (trường Rotate), hệ thống sẽ hiểu đó là giữ nguyên định dạng ban đầu của hình ảnh.
2 Trường hợp người nhập vào trường Rotate thông tin không hợp lệ, hệ thống cũng sẽ giữ nguyên định dạng ban đầu của hình ảnh.
Yêu cầu phi chức năng: Không có.
Hình 6 Sơ đồ quá trình người dùng sử dụng chức năng transform
2.3.2.4 Người sử dụng dùng chức năng cắt hình ảnh:
Mô tả: Người dùng thay đổi kích cỡ hình ảnh thông qua chức năng “Trim”.
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng chọn kích hoạt chức năng Trim thông qua nút bấm.
Tiền điều kiện: Hình ảnh phải được gửi vào form và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện:Hình ảnh được thay đổi kích thước thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn chức năng Trim trên thanh menu Thêm các thông số chiều ngang, chiều dọc (ô Width, Height), các thông số PositionX, PositionY.
3 Hệ thống tiếp nhận yêu cầu và cắt hình ảnh theo kích cỡ mong muốn Sau khi chuyển đổi xong sẽ có thông báo.
4 Người dùng nhận lại ảnh thông qua nút bấm download.
Luồng thay thế: Không có.
1 Trường hợp người dùng chỉ bật chức năng này mà không nhập vào, hệ thống sẽ hiểu đó là giữ nguyên định dạng ban đầu của hình ảnh.
2 Trường hợp người nhập vào trường này thông tin không hợp lệ, hệ thống cũng sẽ giữ nguyên định dạng ban đầu của hình ảnh.
Yêu cầu phi chức năng: Không có.
Hình 7 Sơ đồ quá trình cắt hình ảnh
2.3.2.5 Người sử dụng thay đổi tên hình ảnh:
Mô tả: Người dùng thay đổi tên tệp tin hình ảnh thông qua chức năng
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng chọn kích hoạt chức năng Rename thông qua nút bấm.
Tiền điều kiện: Hình ảnh phải được gửi vào form và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện:Hình ảnh được thay đổi tên thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn chức năng Rename trên thanh menu Nhập tên muốn thay đổi cho file.
3 Hệ thống tiếp nhận yêu cầu và thay đổi tên hình ảnh mà người dùng mong muốn Sau khi chuyển đổi xong sẽ có thông báo.
4 Người dùng nhận lại ảnh thông qua nút bấm download.
Luồng thay thế: Không có.
1 Trường hợp người dùng chỉ bật chức năng này mà không nhập vào, hệ thống sẽ hiểu đó là giữ nguyên tên ban đầu của hình ảnh.
2 Trường hợp người nhập vào trường này thông tin không hợp lệ, hệ thống cũng sẽ giữ nguyên tên ban đầu của hình ảnh.
Yêu cầu phi chức năng: Không có.
Hình 8 Sơ đồ quá trình hình ảnh được đổi tên
2.3.2.6 Người sử dụng xóa phông nền hình ảnh:
Mô tả: Người dùng xóa phông nền thông qua chức năng “Remove background”.
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng chọn kích hoạt chức năng Remove background thông qua nút bấm.
Tiền điều kiện: Hình ảnh phải được gửi vào form và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện:Hình ảnh được thay đổi kích thước thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form
2 Người dùng chọn chức năng Remove background trên thanh menu
3 Hệ thống tiếp nhận yêu cầu và xóa phông nền theo yêu cầu Sau khi chuyển đổi xong sẽ có thông báo.
4 Người dùng nhận lại ảnh thông qua nút bấm download.
Luồng thay thế: Không có.
1 Trường hợp một số định dạng ảnh lạ, chương trình sẽ không được thực thi.
Yêu cầu phi chức năng: Không có.
Hình 9 Sơ đồ quá trình người sử dụng chức năng Remove background
2.3.2.7 Người sử dụng thay màu sắc hình ảnh:
Mô tả: Người dùng thay đổi màu sắc, tính trong suốt, độ sáng, độ mờ của hình ảnh thông qua chức năng “Color”.
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng chọn kích hoạt chức năng Color thông qua nút bấm.
Tiền điều kiện: Hình ảnh phải được gửi vào form và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện:Hình ảnh được thay đổi thành công theo nhu cầu của người dùng
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn chức năng Color trên thanh menu Lựa chọn các yêu cầu: Độ sáng (Brightness) mặc định là 1, độ tương phản (Contrast) mặc định là 1 Độ mờ (Opacity) mặc định là 1 Chọn thêm chức năng Greyscale hoặc Invert, hay nhập thông số cho Blur tùy nhu cầu sử dụng.
3 Hệ thống tiếp nhận yêu cầu và thay đổi hình ảnh theo kích cỡ mong muốn Sau khi chuyển đổi xong sẽ có thông báo.
4 Người dùng nhận lại ảnh thông qua nút bấm download.
Luồng thay thế: Không có.
1 Trường hợp người dùng chỉ bật chức năng này mà không nhập vào, hệ thống sẽ hiểu đó là giữ nguyên định dạng ban đầu của hình ảnh.
2 Trường hợp người nhập vào trường này thông tin không hợp lệ, hệ thống cũng sẽ giữ nguyên định dạng ban đầu của hình ảnh.
Yêu cầu phi chức năng: Không có.
Hình 10 Sơ đồ quá trình khi người dùng thực hiện chức năng Color
2.3.2.8 Người sử dụng thêm hiệu ứng cho hình ảnh:
Mô tả: Người dùng thêm hiệu ứng cho hình ảnh thông qua chức năng
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng chọn kích hoạt chức năng Effect thông qua nút bấm.
Tiền điều kiện: Hình ảnh phải được gửi vào form và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện:Hình ảnh được thêm hiệu ứng thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn chức năng Effect trên thanh menu Người dùng có thể sử dụng hiệu ứng Sepia hoặc nhập vào trường Poster size.
3 Hệ thống tiếp nhận yêu cầu và thêm hiệu ứng mong muốn Sau khi chuyển đổi xong sẽ có thông báo.
4 Người dùng nhận lại ảnh thông qua nút bấm download.
Luồng thay thế: Không có.
5 Trường hợp người dùng chỉ bật chức năng này mà không nhập vào, hệ thống sẽ hiểu đó là giữ nguyên định dạng ban đầu của hình ảnh.
6 Trường hợp người nhập vào trường này thông tin không hợp lệ, hệ thống cũng sẽ giữ nguyên định dạng ban đầu của hình ảnh.
Yêu cầu phi chức năng: Không có.
Hình 11 Sơ đồ quá trình cho sử dụng chức năng effect
2.3.2.9 Người sử dụng thay đổi định dạng ảnh kết hợp với nhiều chỉnh sửa khác nhau
Mô tả: Người dùng truy cập trang web để thực hiện chuyển đổi định dạng hình ảnh sang các định dạng khác và các chỉnh sửa liên quan đến hình ảnh.
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng truy cập vào trang web và chức năng chuyển đổi là chức năng mặc định có sẵn Người dùng chọn thêm các chức năng chỉnh sửa hình ảnh theo nhu cầu.
Tiền điều kiện: Người dùng gửi ảnh cần chuyển đổi thông qua giao diện và thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện: Người dùng nhận ảnh sau khi chuyển đổi thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng chọn ảnh để đưa vào form nhận ảnh Chọn các chức năng theo nhu cầu và nhập thông số mong muốn vào trong các trường tương ứng Sau đó bấm nút convert.
3 Hệ thống nhận ảnh và xử lý ảnh, sau khi xử lý xong sẽ thông báo cho người dùng
4 Người dùng nhận lại ảnh sau khi bấm nút download.
Luồng thay thế: không có.
1 Hệ thống báo lỗi nếu tệp tin người dùng gửi vào là không hợp lệ.
2 Thông báo lỗi nếu người dùng không đợi trang chuyển đổi xong mà bấm nút download luôn.
3 Thông báo lỗi cho người dùng nếu các trường thông tin nhập sai hoặc không hợp lệ.
Yêu cầu phi chức năng: không có.
Hình 12 Sơ đồ quá trình chuyển đổi hình ảnh kết hợp nhiều chức năng
2.3.2.10 Người sử dụng thay đổi giao diện trang web:
Mô tả: Người dùng thay đổi giao diện trang web thông qua nút bấm cài đặt Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng kích hoạt nút bấm hình bánh răng.
Tiền điều kiện: Thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện: Giao diện trang web thay đổi thành công.
1 Người dùng truy cập vào website, gửi hình ảnh cần chuyển đổi vào form.
2 Người dùng click vào nút bánh răng ở thanh menu và lựa chọn giao diện muốn sử dụng
3 Hệ thống tiếp nhận yêu cầu và thay đổi giao diện theo ý của người dùng.
4 Giao diện thay đổi theo ý của người dùng.
Luồng thay thế: Không có.
Luồng ngoại lệ: Không có
Yêu cầu phi chức năng: Không có.
2.3.2.11 Người sử dụng thay đổi ngôn ngữ trang web:
Mô tả: Người dùng thay đổi ngôn ngữ trang web thông qua nút bấm cài đặt
Các tác nhân: Người dùng, hệ thống. Điều kiện kích hoạt: Người dùng kích hoạt nút bấm hình bánh răng.
Tiền điều kiện: Thiết bị của người dùng cần phải kết nối Internet trong suốt quá trình sử dụng.
Hậu điều kiện: Ngôn ngữ trang web thay đổi thành công.
3 Hệ thống tiếp nhận yêu cầu và thay đổi ngôn ngữ theo ý của người dùng.
4 Ngôn ngữ trang web thay đổi theo ý của người dùng.
Luồng thay thế: Không có.
Luồng ngoại lệ: Không có
Yêu cầu phi chức năng: Không có.
2.3.3 Phân tích hệ thống trang web.
Trang web được xây dựng trên cấu trúc MVC, tổ chức mã nguồn của một ứng dụng Đây là một pháp giúp phân tách logic ứng dụng thành ba thành phần chính là M: Model: Đại diện cho dữ liệu và logic xử lý dữ liệu V: View: Đại diện cho giao diện người dùng và hiển thị thông tin từ Model cho người dùng C: Controller làm trung gian giữa Model và View.
Trong trang web của chúng tôi, View được thực hiện bởi các công cụHTML và CSS kết hợp JavaScript Phần Model và Controller được xử lýNode.js, một môi trường thực hiện các đoạn mã JavaScript.
2.3.3.1 Key abstraction: Image Định nghĩa: là hình ảnh mà người dùng gửi vào với mục đích chuyển đổi và chỉnh sửa Cơ chế phân tích bao gồm: Persistency, Security.
2.3.4 Các biểu đồ tuần tự
2.3.4.1 Biểu đồ tuần tự quá trình chuyển đổi hình ảnh
Hình 13 Biểu đồ tuần tự quá trình chuyển đổi hình ảnh
2.3.4.2 Biểu đồ tuần tự quá trình thay đổi kích thước hình ảnh
Hình 15 Biểu đồ tuần tự quá trình biến đổi hình ảnh
2.3.4.4 Biểu đồ tuần tự quá trình đổi tên hình ảnh
Hình 16 Biểu đồ tuần tự quá trình đổi tên hình ảnh
2.3.4.5 Biểu đồ tuần tự quá trình xóa phông nền hình ảnh
Hình 17 Biểu đồ tuần tự quá trình xóa phông nền hình ảnh
2.3.4.6 Biểu đồ tuần tự quá trình thêm màu cho hình ảnh
Hình 19 Biểu đồ tuần tự quá trình thêm hiệu ứng
2.3.4.8 Biểu đồ tuần tự quá trình cắt hình ảnh
Hình 20 Biểu đồ tuần tự quá trình cắt hình ảnh
2.3.4.9 Biểu đồ tuần tự quá trình nhận hình ảnh từ người dùng
Hình 21 Biểu đồ tuần tự quá trình tải lên hình ảnh
2.3.4.10 Biểu đồ tuần tự quá trình người dùng tải xuống hình ảnh
Hình 22 Biểu đồ tuần tự quá trình tải xuống hình ảnh
Hình 23 Biểu đồ tuần tự quá trình thay đổi giao diện, ngôn ngữ
2.3.4.12 Biểu đồ tuần tự quá trình tổng quan chuyển đổi kết hợp chỉnh sửa hình ảnh
Hình 24 Biểu đồ tuần tự chi tiết toàn bộ quá trình chuyển đổi
2.3.5 Các biểu đồ phân lớp
2.3.5.1 Biểu đồ phân lớp các chức năng chuyển đổi ảnh
Hình 26 Biểu đồ phân lớp chức năng thay đổi giao diện
2.3.6 Các giao diện sau khi hoàn thành
Sau khi hoàn thành, trang web của chúng tôi cơ bản đạt được các mục tiêu đề ra, giao diện được thiết kế phù hợp với cả điện thoại lẫn máy tính xách tay Các chức năng được xây dựng hoàn thiện Trang web hiện đang hoạt động trên đường dẫn: https://covert-image.onrender.com/
2.3.6.1 Giao diện chính khi người dùng truy cập trang web
2.3.6.2 Giao diện khi người dùng bật/tắt các chức năng chỉnh sửa
Hình 28: Giao diện khi bật các chức năng
Hình 29 Giao diện khi người dùng gửi hình ảnh
2.3.6.4 Giao diện thông báo khi người dùng chuyển đổi hoàn tất
Hình 30: Giao diện khi người dùng chuyển đổi hoàn tất
2.3.6.5 Giao diện khi người dùng gặp lỗi download
Người dùng sẽ gặp thông báo này nếu gặp cái lỗi tải xuống ví dụ như:Không gửi hình ảnh nhưng vẫn nhấn tải xuống, không đợi hình ảnh chuyển đổi hoàn tất, lỗi mạng.
Hình 31 Giao diện khi người dùng gặp lỗi download
2.3.6.6 Giao diện cho người sử dụng điện thoại
Giao diện điện thoại được xây dựng với tính chất dễ sử dụng, trực quan như phiên bản máy tính, về các chức năng cũng mang đầy đủ các chức năng phiên bản máy tính. dạng png sang webp, với chất lượng (Quality) là 100% , và đây là kết quả:
Hình 33 Hình ảnh ban đầu định dạng png
Hình 34 Hình ảnh sau khi chuyển đổi sang webp, phải dùng trình duyệt để xem
Kết quả: Hình ảnh được chuyển đổi với chất lượng tốt, tốc độ thực hiện nhanh chóng.
2.3.7.2 Kiểm thử các chức năng chỉnh sửa:
Mục tiêu: Kiểm tra tính chính xác của các chức năng chỉnh sửa: Size,
Dữ liệu đầu vào: Hình ảnh định dạng PNG, được chỉnh sửa thay đổi kích thước chiều ngang (width): 400, chiều dọc (height): 200, scale: 1, chức năng biến đổi thực hiện xoay 30 O C, lật: không (NO), thay đổi tên của tấm ảnh từ tiger thành a_little_tiger, thêm hiệu ứng Sepia Kết quả kiểm thử:
Mục tiêu: Kiểm thử các chức năng: Cắt (Trim), xóa phông nền
(Remove Background), chỉnh màu (Color)
Dữ liệu được gửi vào: Chức năng cắt (Trim): width: 300, height: 100,
PositionX: 20, PositionY: 40, thêm chức năng Xóa phông nền, chức năng tùy chỉnh màu sắc với thông số: Brightness: 1.5, Contrast: 1.5, Opacity: 1.5 Kết quả:
Hình 38 Hình ảnh sau khi thực hiện chuyển đổi
Tổng kết: Hình ảnh được thực hiện thành công với đầy đủ hiệu ứng và yêu cầu Thời gian thực hiện khoảng 1 giây.
Hình 37 Hình ảnh ban đầu
2.3.7.4 Kiểm thử chức năng xử lý lỗi:
Mục tiêu: Nhằm phục vụ người sử dụng tốt hơn, xử lý các trường hợp bấm không đúng.
Trường hợp 1: bấm nút Convert khi chưa gửi ảnh:
Hình 39 Thông báo được gửi khi xảy ra lỗi
Trường hợp 2: Bấm nút Download khi chưa bấm nút convert, chưa thêm dữ liệu:
Hình 40 Thông báo được gửi khi xảy ra lỗi
Trang web sẽ nhảy sang một trang mới và thông báo không tìm kiếm
Một số thành phần khác của đồ án
Kế hoạch dự án
Mô tả chi tiết kế hoạch, phân công công việc của từng thành viên Có kèm biểu đồ Grantt Chart (biểu đồ găng).
Table 1 Bảng Phân Công Công Việc Theo Tiến Độ
Trưởng nhóm Phụ trách thiết kế Hỗ trợ xây dựng
Milestone Nội dung công việc
Tìm kiếm tài liệu, template 30% 30% 40%
Xây dựng các chức năng chuyển đổi 85% 15%
Thiết kế slide thuyết trình 100%
(Chú ý: Đầu việc có nhiều bạn thực hiện được thể hiện là người phụ trách chính bằng cách bôi đậm tỉ lệ %.)
Đảm bảo thực hiện đúng làm việc nhóm
Về tổng quan, nhóm đã tiến hành quá trình làm việc nhóm có hiệu suất cao và đã đạt được tính đúng khi làm việc nhóm theo như yêu cầu của giáo viên hướng dẫn đề ra Sự phân công việc đúng đắn, giao tiếp hiệu quả, tinh thần làm việc nhóm tích cực và khả năng đối phó với thách thức đã đóng góp vào việc đạt kết quả tích cực trong dự án.
Về phân công công việc: Nhóm thực hiện phân công công việc công bằng và linh hoạt Mỗi thành viên đều được chọn để đảm nhận một vai trò cụ thể dựa trên kỹ năng, ưu điểm, nhược điểm, kinh nghiệm xử lý vấn đề Việc họp định kỳ hàng tuần nhằm việc báo cáo tiến độ, cập nhật công việc và đảm bảo mọi thành viên trong nhóm đều đang tiếp tục hoàn thiện công việc.
Về việc giao tiếp giữa các thành viên: Nhóm thực hiện giao tiếp hiệu quả thông qua nhiều phương pháp khác nhau từ tin nhắn, họp online, họp offline. Các cuộc họp được trình bày vào mỗi thứ 6 hoặc chủ nhật hàng tuần với sự tham gia của giáo viên hướng dẫn và trình bày báo cáo tiến độ công việc Tin nhắn công việc được thực hiện qua nhóm trên Zalo và các tin nhắn trao đổi cá nhân Các cuộc họp offline, online được tổ chức nhằm mục tiêu thảo luận, củng cố các vấn đề cần trao đổi.
Về tinh thần làm việc nhóm giữa các thành viên: Tinh thần làm việc nhóm là yếu tố quan trọng giúp cho dự án được hoàn thiện Các thành viên đã xây dựng được tinh thầy đồng đội tích cực, luôn hỗ trợ đồng đội khi gặp khó khăn và khích lệ đưa ra các ý tưởng cải thiện vấn đề, giải quyết các xung đột một cách xây dựng, tiếp nhận các ý tưởng đúng, loại bỏ các ý tưởng chưa đúng.
Về đối phó các thách thức: Trong quá trình xây dựng, nhóm hẳn đã phải đối
Quyền riêng tư người dùng: Ứng dụng đã được thiết kế tuân thủ các quy định về quyền riêng tư, đảm bảo rằng hình ảnh người dùng tải lên được bảo vệ an toàn và không bị sử dụng cho mục đích khác mà không có sự đồng ý của người dùng.
Sử dụng công nghệ một cách có trách nhiệm: Ứng dụng được chúng tôi xây dựng được phát triển và sử dụng một cách có trách nhiệm, không gây hại cho người dùng hoặc cộng đồng.
Giao tiếp chuyên nghiệp: Cơ bản trong nhóm đã đạt được sự chuyên nghiệp khi giao tiếp với nhau, các vấn đề được truyền đạt sao cho các thành viên trong nhóm đều hiểu và thực hiện Tuy nhiên vẫn có những tình huống chưa chuẩn bị dẫn đến việc truyền đạt thông tin bị mất nhiều thời gian.
Giải quyết xung đột: Các xung đột xảy ra trong nhóm đều được giải quyết sao cho chuyên nghiệp nhất và không để lại vết gợn sau khi kết thúc xung đột.
Với việc tuân thủ các quy tắc chung về đạo đức, quyền hạn người sử dụng, chúng tôi tự tin ứng dụng Web của chúng tôi mang tới tác động tích cực cho xã hội, đóng góp cho sự phát triển của xã hội.
3.5 Kế hoạch cho kiến thức mới và chiến lược học tập Để chuẩn bị cho các kiến thức mới và chúng tôi đã xây dựng chiến lược học tập rõ ràng cho nó Mà ở đây, kiến thức mới cụ thể là lập trình và làm việc với Node.js. Đầu tiên, cả nhóm xác định nhu cầu học của nhóm và xác định rõ ràng mục tiêu kiến thức mới cần đạt được trong ngữ cảnh của dự án Ở đây, đối với ngôn ngữ lập trình này, chúng tôi quyết định học tập JavaScript cơ bản trong một tuần đầu sau đó đi sâu vào học tập với Node.js trong suốt thời gian sau đó của dự án. Để phục vụ cho việc học tập nhanh chóng, hiệu quả, chúng tôi lựa chọn các tài liệu có sẵn trên Internet, với các trang học thuật như FreeCodeCamp, W3School, các video được tải lên qua Youtube, và sự hỗ trợ từ các AI như chatGPT, Bing chat, Leo, hay Bard.
Chúng tôi xác định cho bản thân các kế hoạch học tập của từng cá nhân phụ thuộc vào công việc mà họ thực hiện Từ đó, mỗi thành viên có kế hoạch học tập riêng và xây dựng lộ trình học tập riêng.
Về chiến lược học tập, các thành viên trong nhóm kết hợp nhiều phương thức, từ việc học hỏi trong nhóm bằng cách thảo luận và chia sẻ kiến thức, cuộc thảo luận nhóm giúp mọi người hiểu rõ hơn và tận dụng kiến thức của nhau Mặt khác, các thành viên tận dụng Internet để học tập từ các kiến thức vô cùng khổng lồ Cuối cùng, các thành viên tổ chức kế hoạch tự học với các kiến thức cần thiết cho phần của mình thực hiện. được ứng dụng Web chuyển đổi định dạng ảnh với giao diện trực quan, dễ sử dụng, thân thiện với người sử dụng.
Sau khi hoàn thành đề tài, bản thân chúng tôi cũng đã học tập được thêm các kỹ năng mới và củng cố các kỹ năng đã có sẵn, mở rộng thêm kiến thức chuyên ngành.
Sản phẩm mặc dù hoàn thiện, nhưng hẳn cũng có những điểm còn chưa tốt, chưa hợp lý, rất mong nhận được sự thông cảm và chúng tôi rất vui khi được nghe các ý kiến phản hồi từ người dùng để có thể tiếp tục phát triển ứng dụng Web sao cho hoàn thiện và tốt hơn.
4.2 Định hướng cho tương lai
Nhằm phục vụ người dùng tốt hơn, chúng tôi sẽ tiếp tục phát triển phần mềm theo hướng đa năng hơn: ngoài khả năng chỉnh sửa và chuyển đổi file hình ảnh, chúng tôi sẽ mở rộng ra là video hay văn bản.
Chúng tôi sẽ tiếp tục cải thiện chất lượng hình ảnh đầu ra, và thêm nhiều định dạng có thể chuyển đổi hơn
Link đường dẫn trang web sản phẩm: https://covert-image.onrender.com/
Link đường dẫn source code lưu trên github:
Tác động xã hội
Với việc tuân thủ các quy tắc chung về đạo đức, quyền hạn người sử dụng, chúng tôi tự tin ứng dụng Web của chúng tôi mang tới tác động tích cực cho xã hội, đóng góp cho sự phát triển của xã hội.
Kế hoạch cho kiến thức mới và chiến lược học tập
Để chuẩn bị cho các kiến thức mới và chúng tôi đã xây dựng chiến lược học tập rõ ràng cho nó Mà ở đây, kiến thức mới cụ thể là lập trình và làm việc với Node.js. Đầu tiên, cả nhóm xác định nhu cầu học của nhóm và xác định rõ ràng mục tiêu kiến thức mới cần đạt được trong ngữ cảnh của dự án Ở đây, đối với ngôn ngữ lập trình này, chúng tôi quyết định học tập JavaScript cơ bản trong một tuần đầu sau đó đi sâu vào học tập với Node.js trong suốt thời gian sau đó của dự án. Để phục vụ cho việc học tập nhanh chóng, hiệu quả, chúng tôi lựa chọn các tài liệu có sẵn trên Internet, với các trang học thuật như FreeCodeCamp, W3School, các video được tải lên qua Youtube, và sự hỗ trợ từ các AI như chatGPT, Bing chat, Leo, hay Bard.
Chúng tôi xác định cho bản thân các kế hoạch học tập của từng cá nhân phụ thuộc vào công việc mà họ thực hiện Từ đó, mỗi thành viên có kế hoạch học tập riêng và xây dựng lộ trình học tập riêng.
Về chiến lược học tập, các thành viên trong nhóm kết hợp nhiều phương thức, từ việc học hỏi trong nhóm bằng cách thảo luận và chia sẻ kiến thức, cuộc thảo luận nhóm giúp mọi người hiểu rõ hơn và tận dụng kiến thức của nhau Mặt khác, các thành viên tận dụng Internet để học tập từ các kiến thức vô cùng khổng lồ Cuối cùng, các thành viên tổ chức kế hoạch tự học với các kiến thức cần thiết cho phần của mình thực hiện. được ứng dụng Web chuyển đổi định dạng ảnh với giao diện trực quan, dễ sử dụng, thân thiện với người sử dụng.
Sau khi hoàn thành đề tài, bản thân chúng tôi cũng đã học tập được thêm các kỹ năng mới và củng cố các kỹ năng đã có sẵn, mở rộng thêm kiến thức chuyên ngành.
Sản phẩm mặc dù hoàn thiện, nhưng hẳn cũng có những điểm còn chưa tốt, chưa hợp lý, rất mong nhận được sự thông cảm và chúng tôi rất vui khi được nghe các ý kiến phản hồi từ người dùng để có thể tiếp tục phát triển ứng dụng Web sao cho hoàn thiện và tốt hơn.
4.2 Định hướng cho tương lai
Nhằm phục vụ người dùng tốt hơn, chúng tôi sẽ tiếp tục phát triển phần mềm theo hướng đa năng hơn: ngoài khả năng chỉnh sửa và chuyển đổi file hình ảnh, chúng tôi sẽ mở rộng ra là video hay văn bản.
Chúng tôi sẽ tiếp tục cải thiện chất lượng hình ảnh đầu ra, và thêm nhiều định dạng có thể chuyển đổi hơn
Link đường dẫn trang web sản phẩm: https://covert-image.onrender.com/
Link đường dẫn source code lưu trên github:
Tổng kết
Định hướng cho tương lai
Nhằm phục vụ người dùng tốt hơn, chúng tôi sẽ tiếp tục phát triển phần mềm theo hướng đa năng hơn: ngoài khả năng chỉnh sửa và chuyển đổi file hình ảnh, chúng tôi sẽ mở rộng ra là video hay văn bản.
Chúng tôi sẽ tiếp tục cải thiện chất lượng hình ảnh đầu ra, và thêm nhiều định dạng có thể chuyển đổi hơn
Link đường dẫn trang web sản phẩm: https://covert-image.onrender.com/
Link đường dẫn source code lưu trên github:
