# Xây dựng bàn phím tương tác với Hana - Spline Academy (https://spline.design/vi/academy/tutorials/build-an-interactive-keyboard-with-hana)

> Xin chào! 👋

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Xây dựng bàn phím tương tác với Hana

# Xây dựng bàn phím tương tác với Hana

HanaCơ bản9 phút

Xin chào! 👋

Trong hướng dẫn này, bạn sẽ học cách tạo một bàn phím tương tác được làm 100% trong Hana. Chúng ta sẽ tìm hiểu cách thêm bóng đổ để tạo chiều sâu cho thiết kế và cách áp dụng sự kiện phím để tương tác với cảnh bằng chính bàn phím thật của bạn. Thiết kế này rất linh hoạt và có thể dùng theo nhiều cách khác nhau. Cùng bắt đầu nhé!

Remix bản demo này tại đây: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=0s)
2. [0:22Thêm frame cơ sở](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=22s)
3. [0:34Tạo phần đế bàn phím](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=34s)
4. [1:14Thêm bóng đổ cho đế bàn phím](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=74s)
5. [1:37Tạo phím chữ và phím số](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=97s)
6. [3:31Tạo phím Enter](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=211s)
7. [3:45Thêm drop shadow cho số và chữ](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=225s)
8. [4:07Thêm sự kiện nhấn phím](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=247s)
9. [6:57Xây dựng tương tác màn hình](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=417s)
10. [8:50Thiết kế hoàn chỉnh](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=530s)
11. [9:04Kết thúc](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=544s)

## Tài nguyên liên quan

- [Interactive KeyboardMẫu](https://app.spline.design/academy/tutorials/build-an-interactive-keyboard-with-hana?redirect-duplicate-template-uuid=f3103f23-97e2-4ee8-807c-8c73bc5ae38a&is-2d-file=true)
- [Designing in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Tổng quan

- Hana
- 9 phút
- Cơ bản

## Thuộc

- [Hana | Mọi điều bạn cần biết](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/build-an-interactive-keyboard-with-hana)

## Hướng dẫn liên quan

[Tất cả hướng dẫn](https://spline.design/vi/academy/tutorials)

[Cách xây dựng quả cầu 3D phản hồi với chuyển động và tương tácSpline 3DTrung cấp7 phút](https://spline.design/vi/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Tạo thiết kế tương tác phản hồi theo chuột với HanaHanaCơ bản6 phút](https://spline.design/vi/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[Cách tạo trực quan hóa dữ liệu 3D trong Spline bằng biến và API thời gian thựcSpline 3DNâng cao15 phút](https://spline.design/vi/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[Spline](https://spline.design/vi)

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

- [Web](https://spline.design/vi/web)
- [iOS](https://spline.design/vi/ios)
- [Android](https://spline.design/vi/android)

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.