(Tiểu luận) đề tài thiết kế giao diện và trải nghiệm người dùng cho ứng dụng quản lý, điểu khiển nhà thông mình (smart home) trên hệ điều hành android

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI TRUNG TÂM ĐÀO TẠO ELEARING BÁO CÁO GIỮA KỲ CHUYÊN ĐỀ KẾT THÚC CHUYÊN NGÀNH CHUYÊN NGHÀNH CÔNG NGHỆ ĐA PHƯƠNG TIỆN ĐỀ TÀI THIẾT KẾ GIAO DIỆN VÀ TRẢI NGHIỆM NGƯỜI DÙNG CHO ỨNG DỤNG QUẢN LÝ, ĐIỂU KHIỂN NHÀ THƠNG MÌNH (SMART HOME) TRÊN HỆ ĐIỀU HÀNH ANDROID SVTH: TRẦN ĐỨC HÙNG GVHD: ThS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android LỜI CÁM ƠN Em xin chân thành gửi lời cám ơn đến quý thầy cô trường Đại học mở Hà Nội chi nhánh Đà Nẵng nói chung thầy cô môn khoa công nghệ thơng tin nói riêng tạo điều kiện cho em hội thực hành, tiếp xúc để em tránh vướng mắc bỡ ngỡ môi trường công việc thời gian tới Em xin chân thành cảm ơn Nhờ giúp đỡ tận tình bảo Thầy từ lúc bắt đầu lúc kết thúc chuyên ngành mà em hoàn thành thời hạn quy định tích lũy cho lượng tảng kiến thức quý báu Mặc dù cố gắng hoàn thành đề tài tốt thời gian kiến thức cịn có hạn nên em tránh khỏi thiếu sót định, mong nhận cảm thơng, chia sẻ tận tình đóng góp bảo quý thầy cô Đà Nẵng, ngày 20 tháng năm 2022 Sinh viên TRẦN ĐỨC HÙNG SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Đà Nẵng, ngày 28 tháng năm 2022 CÁN BỘ HƯỚNG DẪN SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Đà Nẵng, ngày 28 tháng năm 2022 Cán hướng dẫn Cán hướng dẫn (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android LỜI MỞ ĐẦU Cùng với phát triển mạnh mẽ công nghệ, thay đổi thời đại, xã hội gắn kết tách rời với ứng dụng CNTT ngày tràn ngập không ngừng nở rộ Ban đầu môi trường internet đơn giản với thuật ngữ blog, chat, yahoo, 360, game…thế giới dần thay đổi với xuất đa dạng truy cập mạng xã hội, tìm kiếm, website, app, phủ điện tử, số hóa liệu, chuyển đổi số… ngày đa dạng phương thức kết nối internet từ cáp đồng trục, cáp quang, wifi thời đại 4G, 5G, kết nối vệ tinh Ngành CNTT chinh phục giới theo cách riêng nó, nhân lực ngành CNTT ngày phát triển nhanh chóng, đa dạng số lượng, chất lượng lĩnh vực Đi vào khía cạnh nhỏ CNTT đại, sản phẩm khơng thể thiếu mà dùng từ thiết yếu để mơ tả app (ứng dụng di động) cho phép người dùng trở nên gần gũi, thông dụng thường xuyên sử dụng ngày với CNTT Hiện nay, app trở nên thông dụng sinh hoạt thường ngày khơng cịn đơn ứng dụng tổ chức, doanh nghiệp sử dụng Người dùng ngày đông hơn,rộng hơn, mức độ sử dụng, mức độ yêu cầu ứng dụng trở nên ngày đa dạng Mỗi công việc, sinh hoạt hay giải trí ngày bắt đầu trở nên quen thuộc với app, ví dụ giao dịch ngân hàng, giao dịch mua bán online offline, học hành, hội họp, tin tức, giải trí… có app gần doanh nghiệp sở hữu app để cập nhật với xu thời đại Trong đó, ứng dụng ngày nhiều người quan tâm sử dụng ứng dụng Nhà thơng minh Smart Home, ứng dụng giúp người dung dễ dàng theo dõi, thống kê, điều khiển, sử dụng thiết bị ngơi nhà cách tận dụng sức mạnh CNTT tích hợp ứng dụng nhất, giúp việc trở nên đơn giản, dễ dàng Đây đề tài mà em thực Chuyên đề kết thúc chuyên ngành SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android Trong trình xây dựng, yêu cầu đề bài, hạn chế mặt thời gian, chuyên đề em hướng đến Công nghệ đa phương tiện, dừng lại mức độ thiết kế wireframe, thiết kế giao diện, trải nghiệm người dùng (Ui/Ux design) thực prototying cho thiết kế nhằm định hướng trước cho ứng dụng, giúp người lập trình nắm rõ ý đồ nhà thiết kế, từ dễ dàng việc kết hợp thiết kế lập trình, góp phần tạo sản phẩm hoàn thiện Bài chuyên đề khơng tránh khỏi sai sót kính mong thầy bạn đóng góp ý kiến xây dựng để chun đề hồn thiện CHƯƠNG 1: TỔNG QUAN MƠ TẢ ĐỀ TÀI: 1.1 Mơ tả: Nhà thơng minh thuật ngữ khơng cịn q xa lạ giới đại Ngày nay, nhà thông minh thi cơng khơng cịn q khó khăn tốn trước thay đổi thiết bị CNTT đại (high-tech) cạnh tranh khốc liệt đơn vị thiết kế, sản xuất tích hợp thiết bị nhà thơng minh Các thiết bị đa dạng hơn, đại hơn, kết nối tốt có dây khơng dây, quan trọng rẻ nhiều Từ đó, cạnh tranh lớn khơng nằm thiết bị điều khiển, thiết bị kết nối công nghệ nữa, mà chuyển hướng sang ứng dụng điều khiển Ứng dụng có kết nối mạnh mẽ, có tính thân thiện, dễ sử dụng, dễ kết nối đồng với đa dạng chủng loại thiết bị có ưu sử dụng nhiều Ứng dụng di động (app) phải có đầy đủ chức năng, đa dạng kết nối, đa dạng cấu hình dễ dàng cài đặt lên thiết bị di động, từ dễ dàng tiếp cận chinh phục người dung hơn.Việc sử dụng điện thoại di động ngày dần thay cho thứ Nếu trước người dùng mong muốn thay cho tốn (từ ứng dụng ngân hàng quét QR toán, chạm để toán …), định danh cá nhân (ID sức khỏe, ID hộ chiếu vacxin ), điều khiển xe ô tô, xe máy (kết nối oto auto android, kết nối smart key xe máy ) cịn nhiều thứ khác… Thì ngày nay, người dung cịn muốn thay cho tất remote từ tivi, máy lạnh, máy quạt, đèn, nước nóng SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android lạnh, máy lọc nước, lọc khơng khí, độ ẩm nhà… Họ muốn all in one điện thoại đủ, lý mà ứng dụng Smart Home đời 1.2 Đặc tả đề tài: Ứng dụng Smart home có nhiệm vụ theo dõi, thống kê, điều khiển tất thiết bị thơng nhà phương thức quản trị điều khiển thông qua kết nối không dây, lệnh cho thiết bị, quy định hoạt động giấc, thống kê báo cáo cho người sở hữu… nói chung nhiệm vụ giống quản gia tận tụy cho nhà Ứng dụng quản lý thông qua việc phân cấp người dung, tạo tài khoản có mức độ sử dụng khác nhau, mức phân quyền khác để phân bổ quyền hạn quản lý đồng cho cấp người dùng Bên cạnh phân quyền, ứng dụng quản lý nhà dựa vào loại thiết bị kết nối kết nối theo phân khu, phân biệt theo khu vực đặc thù nhà để dễ dàng phân loại quản lý (ví dụ Phịng khách, Phịng bếp, Phịng ăn, Phịng giải trí, Phịng ngủ master, Phịng ngủ trẻ con, Phịng ngủ người cao tuổi….) Ứng dụng có khả quản lý theo chủng loại thiết bị (đèn sân vườn, đèn ngủ, đèn chiếu sáng, đèn pha…), điều khiển theo tính loại thiết bị (độ sáng đèn, nhiệt độ điều hòa, nhiệt độ nước nóng lạnh, thời gian sử dụng quạt, chế độ nấu bếp, chế độ hút bụi, quét lau robot hút bụi, sạc điện oto xe máy….) Hẹn chức đáng lưu tâm để tiết kiệm lượng, tự động bật tắt theo khung cố định mà không làm phiển chủ nhà, hay lập kế hoạch hành động cho robot hút bụi, chủ động điều phối nguồn điện cho lượng mặt trời, thiết lập chế độ nhiệt độ nước theo khung cho máy nước nóng lạnh… Bên cạnh đó, có nhiệm vụ thống kê mức sử dụng lượng nhà theo giờ, ngày, tháng, năm… tự động lưu trữ, trích xuất báo cáo cần thiết MỤC TIÊU – HƯỚNG GIẢI QUYẾT VÀ KẾ HOẠCH THỰC HIỆN 2.1 Mục tiêu cần đạt được: Cần phải thiết kế cài đặt ứng dụng có chức sau: 2.1.1 Quản lý danh mục nhà theo tài khoản phòng nhà SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android 2.1.2 Quản lý thiết bị theo nhiều loại khác vào nhà 2.1.3 Điều khiển thiết bị theo tính loại 2.1.4 Hẹn cảnh báo 2.1.5 Theo dõi tổng quan thông tin thiết bị theo nhà/phòng 2.2 HƯỚNG GIẢI QUYẾT VÀ KẾ HOẠCH THỰC HIỆN: 2.2.1 Hướng giải quyết: - Research ứng dụng liên quan cách kết hợp - Thiết kế wireframe để định hướng người dung, tính tốn trải nghiệm người dùng lên hàng đầu để gia tang thân thiện, dễ sử dụng cho ứng dụng - Thiết kế ứng dụng: phần mềm Adobe Experience Design ( adobe XD) - Thiết kế prototype animation cho object, trang hiệu ứng - Viết báo cáo công việc thực theo mẫu qui định ➢ MÔI TRƯỜNG CÀI ĐẶT: Để thực yêu cầu phải cần có phần mềm giả lập sư dụng để thiết kế, chạy kết nối với điện thoại android để test trình diễn, kiểm tra thuộc tính tương tác, mức độ thân thiện trải nghiệm người dung thiết bị di động - Phần mềm thiết kế: Adobe Experience Design ( Adobe XD) - Môi trường giả lập: Adobe Environment ( cloud) 2.2.2 Kế hoạch thực hiện: Thời gian thực chương trình 12 tuần với kế hoạch sau: Thời gian Cơng việc Tuần Tìm hiểu đề tài Tuần 2-3 Thiết kế wireframe Tuần Hiệu chỉnh wireframe lên thiết kế Tuần 510 Thiết kế Ui/Ux hoàn thiện Tuần 11 Tuần 12 SVTH: TRẦN ĐỨC HÙNG Viết báo cáo Hiệu chỉnh hoàn tất GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG I Adobe XD gì? Adobe XD (cịn gọi Adobe Experience Design) công cụ chuyên hỗ trợ thiết kế website ứng dụng phát triển Adobe Inc Adobe XD phần mềm hữu ích hỗ trợ cho người dùng việc thiết kế tạo nguyên mẫu cho nhiều ứng dụng khác Nói cách đơn giản phần mềm hỗ trợ quan trọng người dùng việc thiết kế UX/UI II Lợi ích sử dụng Adobe XD • Bạn hiểu thêm quy trình xây dựng Wireframe • Tạo thiết kế giao diện cho người dùng App Mobile/Web/Landing Page nhanh chóng • Giao diện Adobe XD cơng cụ, giúp người dùng dễ dàng tìm thấy cơng cụ khác lúc thao tác phần mềm khác nên bạn sử dụng bạn người khơng chun • Cùng lúc mở nhiều artboard (bản vẽ) cho nhiều giao diện hình đáp ứng nhu cầu bạn việc thiết kế • Nếu bạn coder sử dụng hiểu rõ X-Code việc chuyển hướng qua Adobe XD đơn giản phần mềm có giao diện tương tự điều hướng với phần mềm X-Code (cơng cụ lập trình iOS) SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android • Sau hồn thành thiết kế, bạn chia sẻ trực tuyến với người tiện lợi III Những tính bật phần mềm Adobe XD Published prototype for feedback Với tính này, bạn tạo chia sẻ liên kết đến cho khách hàng bạn để họ xem nhận xét, thêm ý kiến sản phẩm nhanh chóng, lúc cần chỉnh sửa vô tiện lợi Published prototype for feedback Bộ dụng cụ UX Với dụng cụ UX, bạn dễ dàng tạo ứng dụng gốc cho tảng khác Từ đó, bạn truy cập vào phần tử giao diện người dùng chuẩn, tìm thấy với tảng hình dung ứng dụng bạn trơng mơi trường gốc SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android Prototype Sao chép yếu tố thiết kế từ bề mặt vẽ Với Adobe XD, ngồi việc bạn tạo thiết kế cho tất hình thiết bị có thị trường phần mềm cho phép bạn chép yếu tố thiết kế từ bề mặt vẽ nhanh chóng, phục vụ theo mong muốn bạn nhanh chóng SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android Sao chép yếu tố thiết kế từ bề mặt vẽ Xuất nội dung Sau hoàn thành thiết kế Adobe XD, phần mềm tự động cung cấp phiên 2x 3x mà thiết bị iOS Android yêu cầu, tùy thuộc vào tùy chọn xuất bạn miễn bạn sử dụng đối tượng vector, bạn thiết kế theo tỷ lệ 1:1 SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android Xuất nội dung SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android CHƯƠNG 4: DEMO ỨNG DỤNG SMART HOME APP SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android Hình 1: Demo giao diện ứng dụng SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG Thiết kế giao diện trải nghiệm người dùng cho ứng dụng Quản lý, điều khiển thiết bị Nhà thông minh (Smart Home) hệ điều hành Android Hình 2: Trang chủ SVTH: TRẦN ĐỨC HÙNG GVHD: TS LÊ HỮU DŨNG