Xây dựng Hướng dẫn Ứng dụng Tương tác

Các đội ngũ hỗ trợ thường gặp khó khăn với những ứng dụng mà họ chưa từng cài đặt.

Một tệp PDF kèm ảnh chụp màn hình là giải pháp tiêu chuẩn. Nhưng hầu hết mọi người đều không đọc PDF. Tôi muốn xây dựng một thứ gì đó tốt hơn. Tôi muốn một bản hướng dẫn mang lại cảm giác như đang sử dụng ứng dụng thật. Bạn nhìn thấy màn hình chính, nhấn vào một nút, và màn hình tiếp theo sẽ xuất hiện.

Tôi đã xây dựng một hướng dẫn tương tác bằng cách sử dụng các ảnh chụp màn hình thực tế và các hotspot có thể nhấp vào.

Cách thức hoạt động

Tôi sử dụng Firebase Storage để lưu trữ hình ảnh và vanilla JavaScript cho phần logic. Không sử dụng thư viện bên ngoài.

  • Mỗi màn hình là một hình ảnh đầy đủ.
  • Tôi đặt các hình chữ nhật vô hình, gọi là các hotspot, lên trên hình ảnh.
  • Các hotspot này sử dụng tỷ lệ phần trăm thay vì pixel. Điều này giúp chúng luôn được căn chỉnh chính xác khi kích thước cửa sổ thay đổi.
  • Một máy trạng thái (state machine) đơn giản sẽ xử lý việc điều hướng. Mỗi màn hình có một ID, một hình ảnh và một danh sách các hotspot.

Trình chỉnh sửa

Việc đo tọa độ bằng tay rất chậm. Tôi đã xây dựng một trình chỉnh sửa HTML độc lập để đẩy nhanh quá trình này.

  • Tải lên một ảnh chụp màn hình.
  • Kéo chuột để vẽ một hotspot.
  • Liên kết hotspot với một màn hình đích.
  • Xuất mã trực tiếp.

Lựa chọn thiết kế

Không phải màn hình nào cũng có đầy đủ các tính năng điều hướng. Để tránh gây nhầm lẫn, tôi đã thêm hiệu ứng ánh sáng xanh nhấp nháy vào các vùng có thể nhấp được. Điều này giúp người dùng biết chính xác nơi họ có thể chạm vào.

Các bài học kỹ thuật quan trọng

  • Firebase Storage: Đừng tự xây dựng URL một cách thủ công. Hãy sử dụng phương thức getDownloadURL của SDK. Phương thức này bao gồm cả mã xác thực (auth token) cần thiết để vượt qua các quy tắc bảo mật.
  • CSS Flexbox: Nếu bạn sử dụng flex: 1 trong bố cục cột (column layout), phần tử cha phải có chiều cao xác định. Hãy đặt min-height: 0 cho phần tử con để ngăn chặn tình trạng tràn (overflow).
  • Hiệu suất: Việc gọi Firebase sau mỗi lần nhấp sẽ gây ra độ trễ. Tôi đã triển khai một bộ nhớ đệm trong bộ nhớ (in-memory cache) và tải trước tất cả hình ảnh khi cửa sổ modal mở ra. Điều này giúp việc điều hướng diễn ra tức thì.
  • Khả năng mở rộng: Sử dụng thuộc tính CSS transform: scale(). Điều này đảm bảo hình ảnh và các hotspot luôn được căn chỉnh hoàn hảo bất kể kích thước màn hình.

Kết quả

  • 20 màn hình được điều hướng như một chiếc điện thoại thật.
  • 52 hotspot với các chỉ báo trực quan.
  • Tải tức thì thông qua việc tải trước và lưu bộ nhớ đệm.
  • Thiết kế đáp ứng (responsive) phù hợp với mọi kích thước modal.

Nguồn: https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e