(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

TRUNG TÂM ĐÀO TẠO ELEARINGBÁO CÁO GIỮA KỲ CHUYÊN ĐỀ KẾT THÚC CHUYÊN NGÀNHCHUYÊ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Ý,

Trang 1

TRUNG TÂM ĐÀO TẠO ELEARING

BÁO CÁO GIỮA KỲ

CHUYÊN ĐỀ KẾT THÚC CHUYÊN NGÀNHCHUYÊ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

Trang 2

thiết bị của Nhà thông minh (Smart Home) trên 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ộichi nhánh Đà Nẵng nói chung và các thầy cô bộ môn trong khoa công nghệ thông tinnói riêng đã tạo điều kiện cho em cơ hội thực hành, tiếp xúc để em có thể tránh đượcnhững vướng mắc và bỡ ngỡ trong môi trường công việc thời gian tới

Em xin chân thành cảm ơn Nhờ sự giúp đỡ tận tình và những chỉ bảo củaThầy từ lúc bắt đầu cho tới lúc kết thúc chuyên ngành mà em đã hoàn thành đúng thờihạn quy định và tích lũy được cho mình một lượng nền tảng kiến thức quý báu.Mặc dù đã cố gắng hoàn thành đề tài tốt nhất nhưng do thời gian và kiến thứccòn có hạn nên em sẽ không thể tránh khỏi những thiếu sót nhất định, rất mong nhậnđược sự cảm thông, chia sẻ và tận tình đóng góp chỉ bảo của quý thầy cô

Đà Nẵng, ngày 20 tháng 7 năm 2022

Sinh viên

TRẦN ĐỨC HÙNG

Trang 3

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

CÁN BỘ HƯỚNG DẪN

Trang 4

NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Trang 5

LỜI MỞ ĐẦU

Cùng với sự phát triển mạnh mẽ của công nghệ, sự thay đổi của thời đại, xã hội hiệnnay đã gắn kết không thể tách rời với các ứng dụng CNTT ngày càng tràn ngập và đangkhông ngừng nở rộ Ban đầu là môi trường internet đơn giản với các thuật ngữ như blog,chat, yahoo, 360, game…thế giới dần thay đổi với những sự xuất hiện của đa dạng truy cậpnhư mạng xã hội, tìm kiếm, website, app, chính phủ điện tử, số hóa dữ liệu, chuyển đổi số…

và đang ngày càng đa dạng về các phương thức kết nối internet từ cáp

đồng trục, cáp quang, wifi và giờ là thời đại của 4G, 5G, kết nối vệ tinh Ngành CNTT đã và đang chinh phục thế giới theo cách riêng của nó, và nhân lực của ngành CNTT cũng ngày một phát triển nhanh chóng, đa dạng cả

về số lượng, chất lượng và lĩnh vực.

Đi vào một khía cạnh nhỏ của CNTT hiện đại, một sản phẩm không thể thiếu mà cóthể dùng từ thiết yếu để mô tả về nó chính là app (ứng dụng di động) cho phép người dùngtrở nên gần gũi, thông dụng và thường xuyên sử dụng mỗi ngày mỗi giờ với CNTT Hiện nay,app đã trở nên thông dụng trong sinh hoạt thường ngày chứ không còn đơn thuần là mộtứng dụng của tổ chức, doanh nghiệp sử dụng Người dùng đang ngày càng đông hơn,rộnghơn, và mức độ sử dụng, mức độ yêu cầu đối với các ứng dụng cũng trở

nên ngày một đa dạng hơn.

Mỗi công việc, sinh hoạt hay giải trí ngày nay cũng đã bắt đầu trở nên quen thuộc vớicác app, ví dụ như giao dịch ngân hàng, giao dịch mua bán online và offline, học hành, hộihọp, tin tức, giải trí… đều có app và gần như mỗi doanh nghiệp đều có thể sở hữu ít nhất là

1 app để cập nhật với xu thế thời đại Trong đó, một ứng dụng đang ngày càng được nhiềungười quan tâm và sử dụng đó là ứng dụng Nhà thông minh Smart Home, một ứng dụnggiúp người dung dễ dàng theo dõi, thống kê, điều khiển, sử dụng các thiết bị trong ngôi nhàcủa mình bằng cách tận dụng sức mạnh CNTT tích hợp trong 1 ứng dụng duy nhất, giúp mọiviệc trở nên đơn giản, dễ dàng hơn Đây cũng là đề tài

mà em sẽ thực hiện trong Chuyên đề kết thúc chuyên ngành này.

Trang 6

Trong quá trình xây dựng, do yêu cầu của đề bài, cũng như hạn chế về mặt thời gian, chuyên đề của em sẽ hướng đến Công nghệ đa phương tiện, và 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) và thực hiện prototying cho các 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õ được ý đồ của nhà thiết kế, từ đó sẽ

dễ dàng trong việc kết hợp giữa thiết kế và lập trình, góp phần tạo ra sản phẩm hoàn thiện Bài chuyên đề sẽ không tránh khỏi sai sót kính mong các thầy cô và các bạn đóng góp ý kiến xây dựng để chuyên đề có thể hoàn thiện hơn.

kế, sản xuất và tích hợp thiết bị nhà thông minh Các thiết bị hiện nay đã đa dạng hơn, hiệnđại hơn, kết nối tốt hơn cả có dây và không dây, và quan trọng nhất là rẻ hơn rất nhiều Từ

đó, sự cạnh tranh lớn nhất hiện nay đã không còn nằm ở thiết bị điều khiển, thiết bị kết nối vàcông nghệ nữa, mà sẽ chuyển hướng sang ứng dụng điều khiển Ứng dụng nào có kết nốimạnh mẽ, có tính thân thiện, dễ sử dụng, dễ kết nối và đồng bộ

với đa dạng chủng loại thiết bị sẽ có ưu thế hơn và được sử dụng nhiều hơn.Ứng dụng di động (app) sẽ phải có đầy đủ chức năng, đa dạng kết nối, đa dạng cấuhình và dễ dàng cài đặt lên mọi thiết bị di động, từ đó dễ dàng tiếp cận và chinh phục ngườidung hơn.Việc sử dụng điện thoại di động ngày nay đang dần thay thế cho mọi thứ Nếutrước đây người dùng mong muốn nó thay thế cho thanh toán (từ ứng dụng ngân hàng cóthể quét QR thanh toán, hoặc chạm để thanh 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 như auto android, kết nối smart key

xe máy ) và còn nhiều thứ khác… Thì ngày nay, người dung còn muốn nó thay thế cho tất

cả các remote từ tivi, máy lạnh, máy quạt, đèn, nước nóng

Trang 7

lạnh, máy lọc nước, lọc không khí, độ ẩm trong nhà… Họ muốn all in one trong chiếcđiện thoại là đủ, đó là lý do mà các ứng dụng Smart Home ra đời

1.2 Đặc tả đề tài:

Ứng dụng Smart home sẽ có nhiệm vụ theo dõi, thống kê, điều khiển tất

cả các thiết bị thông mình trong ngôi nhà bằng phương thức quản trị và điều khiển thông qua các kết nối không dây, ra lệnh cho các thiết bị, quy định hoạt động và giờ giấc, thống kê và báo cáo cho người sở hữu… nói chung nhiệm vụ giống như một quản gia tận tụy cho ngôi nhà.

Ứng dụng sẽ quản lý thông qua việc phân cấp người dung, tạo ra các tài khoản có các mức độ sử dụng khác nhau, mức phân quyền khác nhau để phân

bổ quyền hạn và quản lý đồng bộ cho các cấp người dùng.

Bên cạnh phân quyền, ứng dụng sẽ quản lý ngôi nhà dựa vào các loại thiết bịđược kết nối bằng kết nối theo phân khu, phân biệt theo từng khu vực đặc thù trongnhà để dễ dàng phân loại và 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ũng có khả năng 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 năng của từng loại thiết bị(độ sáng của đè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 của bếp, chế độ hút bụi, quét lau của robot hút bụi, sạc điện oto xe máy….)

Hẹn giờ là một chức năng đáng lưu tâm để tiết kiệm năng lượng, tự động bật tắt theokhung giờ cố định mà không làm phiển chủ ngôi nhà, hay lập kế hoạch hành động cho robothút bụi, chủ động điều phối nguồn điện cho tấm năng lượng mặt trời, thiết lập chế độ và nhiệt

độ nước theo khung giờ cho máy nước nóng lạnh… Bên cạnh đó, nó sẽ

có nhiệm vụ thống kê mức sử dụng năng lượng trong nhà theo giờ, ngày, tháng, năm… và tự động lưu trữ, trích xuất báo cáo khi cần thiết.

2 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ế và cài đặt một ứng dụng có các chức năng sau: 2.1.1 Quản lý danh mục nhà theo tài khoản và phòng trong nhà

Trang 8

2.1.2 Quản lý thiết bị theo nhiều loại khác nhau vào 1 nhà

2.1.3 Điều khiển các thiết bị theo tính năng của từng loại

2.1.4 Hẹn giờ và 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 các ứng dụng liên quan và cách kết hợp.

- Thiết kế wireframe để định hướng người dung, tính toán trải nghiệm người dùng lên hàng đầu để gia tang sự thân thiện, dễ sử dụng cho ứng dụng

- Thiết kế ứng dụng: trên phần mềm Adobe Experience Design ( adobe XD)

- Thiết kế prototype và animation cho các object, các trang và các hiệu ứng

- Viết một bài báo cáo về công việc đã thực hiện theo mẫu qui định.

Để thực hiện được yêu cầu phải cần có một phần mềm giả lập được sư dụng để thiết

kế, chạy và kết nối với điện thoại android để test và trình diễn, kiểm tra các thuộc tính tươngtác, mức độ thân thiện và trải nghiệm người dung trên 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 hiện chương trình là 12 tuần với kế hoạch như sau:

Thời gian Tuần 1 Tuần 2-3 Tuần 4Tuần 5-10Tuần 11 Tuần 12

Công việc Tìm hiểu đề tài Thiết kế wireframeHiệu chỉnh wireframe và lên thiết kếThiết kế Ui/Ux hoàn thiện Viết báo cáo

Hiệu chỉnh và hoàn tất

Trang 9

CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG

I Adobe XD là gì?

Adobe XD (còn được gọi là Adobe Experience Design) là một công cụ

chuyên hỗ trợ về thiết kế website và ứng dụng được phát triển bởi Adobe Inc Adobe XD một phần mềm rất hữu ích và hỗ trợ cho những người dùng trong việc thiết kế cũng như tạo nguyên mẫu cho nhiều ứng dụng khác nhau Nói một cách đơn giản thì đây là một phần mềm hỗ trợ rất quan trọng người dùng trong việc thiết kế UX /UI

II Lợi ích khi sử dụng Adobe XD

• Bạn có thể hiểu thêm được quy trình về xây dựng Wireframe.

• Tạo và thiết kế giao diện cho người dùng về App Mobile/Web/Landing Page nhanh chóng.

• Giao diện Adobe XD ít công cụ, giúp người dùng dễ dàng tìm thấy các công cụ khác trong lúc thao tác hơn những phần mềm khác nên bạn có thể sử dụng

cả khi bạn là một người không chuyên.

• Cùng lúc mở nhiều artboard (bản vẽ) cho nhiều giao diện màn hình đáp ứng nhu cầu của bạn việc thiết kế.

• Nếu bạn là một coder hoặc đã từng sử dụng và hiểu rõ về X-Code thì việc chuyển hướng qua Adobe XD rất đơn giản bởi phần mềm này có giao diện khá tương tự vàđiều hướng với phần mềm X-Code (công cụ lập trình iOS)

Trang 10

• Sau khi đã hoàn thành thiết kế, bạn có thể chia sẻ trực tuyến với mọi người tiện lợi.

III Những tính năng nổi bật của phần mềm Adobe XD

1 Published prototype for feedback

Với tính năng này, bạn có thể tạo hoặc chia sẻ liên kết đến cho khách hàng của bạn để họ có thể xem và nhận xét, thêm ý kiến về sản phẩm nhanh chóng, lúc này nếu cần chỉnh sửa cũng vô cùng tiện lợi hơn.

Published prototype for feedback

2 Bộ dụng cụ UX

Với bộ dụng cụ UX, bạn có thể dễ dàng tạo ra các ứng dụng gốc cho các nền tảng khác Từ đó, bạn có thể truy cập vào các phần tử giao diện người dùng chuẩn, được tìm thấy với từng nền tảng và hình dung ra được ứng dụng của bạn trông như thế nào trong môi trường gốc của nó.

Trang 11

Bộ dụng cụ UX

3 Repeat Grid

Repeat Grid rất được nhiều người sử dụng Adobe XD ưa thích, bởi bạn có thể tạo một hoặc nhiều đối tượng trong một lần, sau đó click chuột chọn các đối tượng đồng thời kích hoạt Repeat Grid Và lúc này, bạn có thể lặp lại những đối tượng ngay trên cả 2 trục x và y.

Hơn nữa, bạn còn có thể điều chỉnh giao diện của các đối tượng hoặc khoảng cách giữa các đối tượng dưới dạng nhóm hoặc riêng lẻ.

Trang 12

Repeat Grid

4 Các biểu tượng

Trong Adobe XD, khi các biểu tượng đều hoạt động trên nhiều artboard trong lúc bạn đang sử dụng nhiều đối tượng thì bạn có thể biến đối tượng đó thành một biểu tượng Mọi thay đổi được áp dụng cho đối tượng sẽ được phản ánh

ở bất kỳ nơi nào mà nó được sử dụng nằm trong thiết kế của bạn.

Trang 13

Các biểu tượng

5 Thư viện Creative Cloud

Với tính năng này, bạn có thể chia sẻ các nội dung như ký tự, hình ảnh, màu sắc và những nội dung khác theo mong muốn của bạn để tạo nội dung cho các dự án Adobe XD của mình tiết kiệm được nhiều thời gian hơn.

Trang 14

Thư viện Creative Cloud

6 Prototype

Đây là một tính năng xem trước bản vẽ thiết kế web của bạn vô cùng tiện lợi, lúc này bạn sẽ có thể xem được sự hoạt động của các ứng dụng hoặc tạo liên kết giữa các artboard và những đối tượng đại diện cho màn hình trong ứng dụng

Trang 15

Prototype

7 Sao chép các yếu tố thiết kế từ những bề mặt đã vẽ

Với Adobe XD, ngoài việc bạn có thể tạo thiết kế cho tất cả các màn hình và thiết bị đang cótrên thị trường thì phần mềm còn cho phép bạn sao chép các yếu tố thiết kế từ những bề mặt đã vẽ nhanh chóng, phục vụ theo mong muốn của bạn nhanh chóng hơn

Trang 16

Sao chép các yếu tố thiết kế từ những bề mặt đã vẽ

8 Xuất nội dung

Sau khi hoàn thành bản thiết kế trên Adobe XD, phần mềm sẽ tự động cung cấp cácphiên bản 2x và 3x mà các thiết bị iOS và Android yêu cầu, tùy thuộc vào tùy chọnxuất của bạn và miễn là bạn sử dụng các đối tượng vector, bạn có thể thiết kế theo tỷ lệ1:1.

Trang 17

Xuất nội dung

Trang 18

CHƯƠNG 4: DEMO ỨNG DỤNG SMART HOME APP

Trang 19

Hình 1: Demo giao diện chính của ứng dụng

Trang 20

Hình 2: Trang chủ

Trang 21

Hình 3: Tìm kiếm và nhập thiết bị

Trang 22

Hình 4: Quản lý thiết bị

Trang 23

Hình 5: Quản lý tiêu thụ năng lượng

Trang 24

Hình 6: Quản lý hẹn giờ cho đèn sân vườn

Trang 25

Hình 7: Quản lý điều khiển Phòng khách

Trang 26

Hình 8: Quản lý điều khiển Phòng ngủ

Trang 27

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

- Thời gian nhận và thực hiện dự án không nhiều nên còn rất nhiều hạn chế

- Sử dụng một phần mềm khác hoàn toàn trong thiết kế và tư duy hoàn toàn khác với lối tư duy của lập trình đã học.

- Do chưa có kinh nghiệm về thiết kế một ứng dụng nên còn rất khó khăn khi triểnkhai công việc.

1.2 Kết quả đạt được:

Qua thời gian nghiên cứu và học tập, nhìn chung dự án đã hoàn thành các mục tiêu, nhiệm vụ đề ra của một ứng dụng di động, với các chức năng như phân tích thiết kế đã mô tả như ở trên.

Xây dựng được một Ui/Ux ứng dụng hoàn chỉnh có khả năng áp dụng vào thựctế.

Trang 28

- Cập nhật thêm các loại thiết bị, các kiểu kết nối và các chức năng mới cho ứngdụng

Trang 29

TÀI LIỆU THAM KHẢO

1 Giáo trình tự học Ui/Ux design từ các Ebook trên Internet.

2 The Design of Everyday Things (Dana Yatsenko)

3 Thiết Kế Lấy Người Dùng Làm Trung Tâm (Don Norman)

4 UX WRITING - Quyền Năng Tối Thượng Của Nội Dung Tương Tác (Khúc

5 Group Vietnam UX/UI Designers ( Facebook)

6 Cộng đồng UI/UX Design Vietnam (Facebook)

Tiêu đề	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 Minh (Smart Home) Trên Hệ Điều Hành Android
Tác giả	Trần Đức Hùng
Người hướng dẫn	ThS. Lê Hữu Dũng
Trường học	Trường Đại Học Mở Hà Nội
Chuyên ngành	Công Nghệ Đa Phương Tiện
Thể loại	Báo cáo giữa kỳ
Năm xuất bản	2022
Thành phố	Đà Nẵng

Định dạng
Số trang	29
Dung lượng	490,65 KB