# Membuat Keyboard Interaktif dengan Hana - Hana | Semua yang Perlu Anda Ketahui - Spline Academy (https://spline.design/id/academy/tutorials/build-an-interactive-keyboard-with-hana)

> Halo! 👋

1. [Academy](https://spline.design/id/academy)
2. [Kursus](https://spline.design/id/academy/collections)
3. [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/id/academy/collections/hana-everything-you-need-to-know)
4. Membuat Keyboard Interaktif dengan Hana

# Membuat Keyboard Interaktif dengan Hana

Pelajaran 10 dari 15HanaPemula9 mnt

Halo! 👋

Dalam tutorial ini, Anda akan belajar membuat keyboard interaktif yang 100% dibuat di Hana. Kita akan membahas cara menambahkan bayangan untuk memberi kedalaman pada desain dan cara menerapkan key event agar bisa berinteraksi dengan scene memakai keyboard sungguhan. Desain ini sangat fleksibel dan bisa dipakai dengan berbagai cara. Mari kita mulai!

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

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=0s)
2. [0:22Menambahkan frame dasar](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=22s)
3. [0:34Membuat dasar keyboard](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=34s)
4. [1:14Menambahkan bayangan pada dasar keyboard](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=74s)
5. [1:37Membuat tombol huruf dan angka](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=97s)
6. [3:31Membuat tombol Enter](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=211s)
7. [3:45Menambahkan drop shadow pada angka dan huruf](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=225s)
8. [4:07Menambahkan event penekanan tombol](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=247s)
9. [6:57Membangun interaksi layar](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=417s)
10. [8:50Desain 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 terkait

- [Interactive KeyboardTemplate](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)

## Ikhtisar

- Hana
- 9 mnt
- Pemula

## Berikutnya

[Cara Menganimasikan di Sepanjang Lintasan dengan Hana dan Spline7 mntPemula](https://spline.design/id/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)[Lanjutkan](https://spline.design/id/academy/collections/hana-everything-you-need-to-know/how-to-animate-along-a-path-with-hana-and-spline)

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

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

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

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

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

#### Kontak

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

© 2026 - Spline, Inc.