# Xây dựng bàn phím tương tác với Hana - Hana | Mọi điều bạn cần biết - 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. [Khóa học](https://spline.design/vi/academy/collections)
3. [Hana | Mọi điều bạn cần biết](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know)
4. 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

Bài 10 / 15HanaCơ 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

## Tiếp theo

[Cách tạo hoạt ảnh theo đường dẫn với Hana và Spline7 phútCơ bản](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)[Tiếp tục](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)

[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.