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 khi sử dụng các ứng dụng mà họ chưa từng cài đặt. Một cuốn hướng dẫn bằng PDF là một giải pháp tồi vì chẳng ai đọc chúng cả.

Tôi đã xây dựng một công cụ cho phép người dùng tương tác với các ảnh chụp màn hình ứng dụng thực tế ngay trong trình duyệt. Cảm giác giống như đang sử dụng điện thoại thật vậy. Bạn nhấp vào một nút trên ảnh chụp màn hình, và màn hình tiếp theo sẽ xuất hiện.

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. Tôi tránh sử dụng các thư viện bên ngoài để giữ cho ứng dụng nhẹ nhàng.

Bí quyết nằm ở việc sử dụng các điểm nóng (hotspots) dựa trên tỷ lệ phần trăm. Thay vì sử dụng pixel cố định, tôi xác định các vùng có thể nhấp bằng cách sử dụng tọa độ từ 0 đến 100. Điều này giúp các nút luôn được căn chỉnh chính xác ngay cả khi kích thước cửa sổ thay đổi.

Hệ thống sử dụng một máy trạng thái (state machine) đơn giản. Mỗi màn hình bao gồm:

  • Một ID hình ảnh
  • Một danh sách các điểm nóng (hotspots)
  • Một đích đến mục tiêu

Các công cụ tôi đã xây dựng

Việc đo tọa độ bằng mắt thường 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 một ảnh chụp màn hình lên canvas.
  • Kéo chuột để vẽ một hình chữ nhật.
  • Trình chỉnh sửa sẽ tự động tính toán tọa độ phần trăm.
  • Liên kết vùng đó với một màn hình khác thông qua menu thả xuống (dropdown).
  • Xuất đối tượng cuối cùng trực tiếp vào mã nguồn của bạn.

Để hỗ trợ người dùng, tôi đã thêm hiệu ứng ánh sáng xanh lam nhấp nháy vào các vùng có thể nhấp. Điều này cho thấy 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

  1. Bảo mật Firebase: Đừng tự xây dựng các URL lưu trữ một cách thủ công. Hãy sử dụng phương thức getDownloadURL từ SDK. Phương thức này bao gồm cả mã xác thực (auth token) cần thiết. Nếu không có nó, hình ảnh sẽ không tải được mà không hiển thị lỗi nào.

  2. Sửa lỗi bố cục: Trong bố cục flex column, hãy thiết lập chiều cao rõ ràng cho phần tử cha. Đặt min-height thành 0 cho các phần tử con. Điều này giúp ngăn chặn tình trạng sụp đổ bố cục và các vấn đề tràn nội dung (overflow).

  3. Co giãn: Sử dụng thuộc tính transform: scale trong CSS. Điều này cho phép hình ảnh và các điểm nóng cùng thay đổi kích thước. Nó giữ cho mọi thứ luôn đúng tỷ lệ bất kể kích thước màn hình.

  4. Tốc độ: Việc tải từng URL một sẽ gây ra độ trễ. Tôi đã triển khai một bộ nhớ đệm trong bộ nhớ (in-memory cache) và một hàm tải trước (preload) chạy ngầm. Tất cả hình ảnh được tải song song khi cửa sổ modal mở ra. Điều này giúp việc điều hướng mang lại cảm giác tức thì.

Kết quả

  • 20 màn hình với khả năng điều hướng đầy đủ.
  • 52 điểm nóng tương tác.
  • Không có thanh cuộn nhờ vào tính năng tự động co giãn (auto-scaling).
  • Chuyển cảnh tức thì thông qua việc tải trước (preloading).

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