# Bina Papan Kekunci Interaktif dengan Hana - Spline Academy (https://spline.design/ms/academy/tutorials/build-an-interactive-keyboard-with-hana)

> Hai! 👋

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Bina Papan Kekunci Interaktif dengan Hana

# Bina Papan Kekunci Interaktif dengan Hana

HanaPemula9 min

Hai! 👋

Dalam tutorial ini, anda akan belajar cara mencipta papan kekunci interaktif yang dibuat 100% dalam Hana. Kami akan melalui cara menambah bayang-bayang untuk mencipta kedalaman pada reka bentuk kita dan cara menggunakan peristiwa kekunci untuk berinteraksi dengan adegan kita menggunakan papan kekunci sebenar. Reka bentuk ini sangat fleksibel dan boleh digunakan dalam pelbagai cara. Jom kita mulakan!

Adun semula demo ini di sini: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=0s)
2. [0:22Menambah bingkai asas](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=22s)
3. [0:34Mencipta asas Papan Kekunci](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=34s)
4. [1:14Menambah bayang-bayang pada asas Papan Kekunci](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=74s)
5. [1:37Mencipta kekunci huruf dan nombor](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=97s)
6. [3:31Mencipta kekunci Enter](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=211s)
7. [3:45Menambah bayang jatuh pada nombor dan huruf](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=225s)
8. [4:07Menambah peristiwa tekanan kekunci](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=247s)
9. [6:57Membina interaksi skrin](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=417s)
10. [8:50Reka bentuk akhir](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=530s)
11. [9:04Penutup](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=544s)

## Sumber berkaitan

- [Interactive KeyboardTemplat](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 HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Gambaran keseluruhan

- Hana
- 9 min
- Pemula

## Sebahagian daripada

- [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/build-an-interactive-keyboard-with-hana)

## Tutorial berkaitan

[Semua tutorial](https://spline.design/ms/academy/tutorials)

[Cara Membina Bola 3D Reaktif dengan Gerakan dan InteraksiSpline 3DPertengahan7 min](https://spline.design/ms/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan HanaHanaPemula6 min](https://spline.design/ms/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[Cara Mencipta Visualisasi Data 3D dalam Spline Menggunakan Pemboleh Ubah dan API Masa NyataSpline 3DLanjutan15 min](https://spline.design/ms/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ms/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Penyelesaian](https://spline.design/solutions)

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

- [Terma & Syarat](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Hubungi

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

© 2026 - Spline, Inc.