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

> Halo! 👋

1. [Academy](https://spline.design/id/academy)
2. [Tutorial](https://spline.design/id/academy/tutorials)
3. Membuat Keyboard Interaktif dengan Hana

# Membuat Keyboard Interaktif dengan Hana

HanaPemula9 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

## Bagian dari

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

## Tutorial terkait

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

[Cara Membuat Bola 3D Reaktif dengan Gerakan dan InteraksiSpline 3DMenengah7 mnt](https://spline.design/id/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Membuat Desain Interaktif yang Bereaksi terhadap Mouse dengan HanaHanaPemula6 mnt](https://spline.design/id/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[Cara Membuat Visualisasi Data 3D di Spline dengan Variabel dan API Real-TimeSpline 3DLanjutan15 mnt](https://spline.design/id/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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