DevCoach 172: Flutter | Tingkatkan Pengalaman Pengguna dengan Lokalisasi dan Aksesibilitas

Transcript

1. Tingkatkan Pengalaman Pengguna dengan Lokalisasi dan Aksesibilitas Achmad Ilham Imanuddin Curriculum Developer Multi-platform Flutter
2. Pokok Pembahasan • Berkenalan dengan Localization dan Accessibility • Mengulik Proses Localization pada Flutter • Membedah Proses Accessibility pada Flutter • Bersahabat dengan Localization dan Accessibility Multi-platform Flutter
3. Background
4. Cross-platform mobile frameworks used by software developers worldwide from 2019 to 2023 Worldwide Software Developer Working Hours - Statista
5. Developer Keynote (Google I/O '22)
6. Bagaimana aplikasi kita bisa beradaptasi dengan pengguna yang sangat beragam?
8. Localization Accessibility
9. Localization Localization (l10n) atau lokalisasi merupakan upaya adaptasi keseluruhan elemen pada aplikasi. Hal ini bertujuan agar aplikasi dapat menyesuaikan kebutuhan budaya serta bahasa untuk suatu target pasar.
10. Mengapa perlu adanya sistem localization dalam sebuah aplikasi?
11. Keuntungan Menerapkan Sistem Localization 1. Meningkatkan jumlah pengguna atau unduhan. 2. Memberikan nilai lebih terhadap tampilan. 3. Meningkatkan revenue.
12. Element yang perlu diperhatikan • Teks, seperti instruksi pengguna, syarat dan ketentuan, kebijakan privasi, dan lainnya. • Format angka, seperti keuangan, tanggal, format angka, dan plural. • Desain atau layout, seperti ukuran aplikasi yang adaptif terhadap bahasa right-to-left RTL atau sebaliknya. • Aset gambar, warna, icon, dan emoji yang memiliki kultural dan budaya dari negara terkait. • Audio, seperti musik, dan efek suara. • Dan masih banyak lainnya.
13. Element yang perlu disesuaikan • Teks, seperti instruksi pengguna, syarat dan ketentuan, kebijakan privasi, dan lainnya. • Format angka, seperti keuangan, tanggal, format angka, dan plural. • Desain atau layout, seperti ukuran aplikasi yang adaptif terhadap bahasa right-to-left RTL atau sebaliknya. • Aset gambar, warna, icon, dan emoji yang memiliki kultural dan budaya dari negara terkait. • Audio, seperti musik, dan efek suara. • Dan masih banyak lainnya.
14. Hal yang perlu diperhatikan • Penggunaan bahasa lokal • Ukuran teks akan menyusut atau bertambah • Mendukung bahasa RTL (right-to-left) • Hindari format angka secara hardcoded • Menghargai budaya negara lain
15. Accessibility Accessibility (a11y) merupakan kemampuan untuk mendapatkan sesuatu dengan mudah. Ketika dikaitkan dengan pengembang aplikasi, aksesibilitas merupakan upaya aplikasi dapat memberikan informasi dengan mudah ke semua pengguna.
16. 16% dari populasi global mengalami disabilitas Disability - WHO
17. 16% dari populasi global setara dengan 1,3 miliar orang Disability - WHO
18. Apakah 16% populasi dunia kita biarkan tanpa menggunakan aplikasi?
19. Beberapa karakteristik disabilitas yang terbantu dengan adanya aksesibilitas. 1. Visual 2. Pendengaran 3. Mobilitas 4. Pengetahuan
20. Bagaimana caranya kita menerapkan localization dan accessibility di Flutter?
21. Mengulik Proses Localization pada Flutter
22. Localization pada Flutter Aplikasi Flutter menyediakan lokalisasi dengan bahasa Inggris sebagai bahasa default. Untuk menambahkan bahasa lain, aplikasi memerlukan tambahan dependency khusus.
23. Localization pada Flutter Tambahan dua dependencies. • flutter_localizations: build-in dari Flutter SDK. • intl: mendukung lokalisasi, penerjemahan bahasa, plural, jenis kelamin, format angka, dan arah teks.
24. Localization pada Flutter Tambahkan konfigurasi lainnya. • Flag generate: membuat kelas baru yang berisi terjemahan lokalisasi.
25. Localization pada Flutter • Memanfaatkan berkas ARB Application Resource Bundle) berekstensi .arb. • Berkas berisi pesan terjemahan dari lokalisasi teks.
26. Localization pada Flutter • Memanfaatkan berkas ARB Application Resource Bundle) berekstensi .arb. • Berkas berisi pesan terjemahan dari lokalisasi teks. • Tambahkan berkas baru untuk terjemahan dalam bahasa lainnya.
27. Localization pada Flutter Tambahkan konfigurasi l10n. • Berkas l10n.yaml pada direktori utama project Flutter.
28. Localization pada Flutter • Lakukan clean dan build project. • Ada folder hasil generate di direktori .dart_tool/flutter_gen/gen_l10n. • Isi dari folder tersebut adalah hasil rekonstruksi pesan berupa katalog.
29. Localization pada Flutter Tambahkan dua parameter di MaterialApp atau CupertinoApp. • localizationsDelegates: sistem yang memproduksi kumpulan nilai lokalisasi. • supportedLocales: daftar lokal yang akan mendukung aplikasi.
30. Localization pada Flutter Terapkan lokalisasi pada widget. • Gunakan AppLocalization.of(context) diikuti dengan nama key atau variabelnya.
31. Localization Accessibility ✅
32. Membedah Proses Accessibility pada Flutter
33. Aspek aksesibilitas pada Flutter • Font Besar • Kontras yang cukup • Screen reader
34. Aspek aksesibilitas pada Flutter • Font Besar • Kontras yang cukup • Screen reader Pengaturan font secara default Pengaturan font paling besar
35. Aspek aksesibilitas pada Flutter • Font Besar • Kontras yang cukup • Screen reader
36. Aspek aksesibilitas pada Flutter • Font Besar • Kontras yang cukup • Screen reader ◦ Android - Talkback ◦ iOS dan macOS - VoiceOver ◦ Windows - Narrator ◦ Linux - Orca ◦ Web - mengikuti platform
37. Aspek Aksesibilitas pada Flutter • Font Besar • Kontras yang cukup • Screen reader Sudah didukung oleh perangkat. Kita dapat mengaturnya melalui tampilan widget. Bisa diatur melalui kode aplikasi.
38. Accessibility pada Widget • Semantics • MergeSemantics • ExcludeSemantics
39. Accessibility pada Widget • Semantics • MergeSemantics • ExcludeSemantics
40. Accessibility pada Widget • Semantics • MergeSemantics • ExcludeSemantics
41. Accessibility pada Widget • Semantics • MergeSemantics • ExcludeSemantics
42. Accessibility pada Widget • Semantics • MergeSemantics • ExcludeSemantics
43. Accessibility pada Widget Cara mengaktifkan semantic debugger. • Tambahkan parameter showSemanticsDebugger pada MaterialApp atau CupertinoApp.
44. Localization Accessibility ✅ ✅
45. ~ Letʼs code ~
46. Thank You Data Science
47. Feedback! Hadiah: • 1 Token Langganan Academy 30 Hari)* *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback