Implementasi Localize di iOS – FoodPin Apps

Pada postingan kali ini kita akan membahas tentang localization. Saat ini AppStore sudah tersedia untuk 150 negara yang ada didunia, dimana tiap negara biasanya memiliki bahasa yang berbeda-beda. Untuk mendapatkan user yang banyak dari aplikasi yang kita kembangkan, tentu salah satu solusinya adalah menyediakan aplikasi yang mudah untuk dimengerti di negara yang kita pasarkan.

Nah oleh karena itu aplikasi harus memuat banyak bahasa, dimana fitur ini dinamakan dengan localization, dan dalam Xcode sudah di built-in fitur localization ini

Implementasi Localize di iOS

TranslateMungkin Anda pernah mendengar tentang localization di pembahasan lainnya dimana ini biasanya ditujukan sebagai proses penerjamahan sebuah konten. Nah dalam pengembangan iOS, hal tersebut dinamakan dengan Internationalization dimana ini sebagai main function untuk membuat local apps. Salah satu contohnya, misalnya di beberapa negara menggunakan tanda . (*titik) sebagai pemisah nilai harga misalnya $1.800.000, tapi banyak juga negara lain yang menggunakan (*koma) sebagai pemisahnya misalnya $1,800,000. Nah Internationalization lah yang bertugas untuk mengaturnya.

Nah localization itu sendiri adalah proses adaptasi localization pada aplikasi, dimana hal ini akan melibatkan konten teks, audio, dan video untuk diterjemahkan.

Nah pada pembahasan kali ini kita akan coba mengimplementasikannya pada aplikasi FoodPin dan menyediakan menjadi dua bahasa, yaitu cina dan jerman.


 

Mengimplementasikan Internationalization

Pertama kali mari kita bahas semua konten teks yang ada di sourcecode yang akan ditampilkan kepada user. Seperti yang terlihat pada sourcecode, kita masih menggunakan bahasa statis dalam sourcecode. Untuk itu kita perlu menampungnya kedalam variabel string agar mudah di terjemahkan menggunakan localization seperti yang terlihat pada gambar dibawah ini:

Contoh text user-facing
Contoh text user-facing

Nah variabel yang akan kita ubah menggunakan macro yang dinamakan dengan NSLocalizedString. Dengan makro ini kita menjadi mudah untuk menerjemahkan konten teks yang ada di aplikasi, dimana didalamnya terdapat dua kata kunci yaitu: key sebagai tanda teks yang akan diterjemahkan, dan comment sebagai deksripsi dari konten yang diterjemahkan.

Nah jika sebelumnya class RestaurantTableViewController terlihat seperti code dibawah:

Maka ganti code tersebut menjadi seperti code dibawah ini untuk mengimplementasikan macronya:

Xcode nantinya akan menyimpan localized string kedalam file Localizable.string.file. Dimana ini berfungsi untuk mendeteksi bahasa default yang digunakan oleh user pada devicenya. Contohnya user kita menggunakan bahasa jerman pada devicenya, maka aplikasi akan otomatis mendeteksi bahasa jerman sebagai bahasa yang akan digunakan aplikasi.

Nah selain tipe teks yang ada di konten aplikasi, kita juga harus wajib menerjemahkan teks yang ada di label (contohnya tombol). Karena tentunya aplikasi dengan bahasa setengah2 dinamakan aplikasi rujak toh, hehehe :D.


Membahas lebih dalam tentang Localization

Di Xcode memliki fitur export baru untuk melakukan proses translasi, fitur eksport ini secara otomatis akan menerjemahkan semua variabel localization yang ada di sourcecode dan juga yang ada di file Interface Builder (storyboard), dimana hasil export berupa string tersebut disimpan kedalam file XLIFF adalah singkatan dari XML Localization Interchange File yang merupakan format file global yang digunakan untuk localization.

Export Localization
Export Localization

Untuk menggunakan fitur export, pilih project FoodPin di project navigator. Lalu pilih menu Editor>Export Fo Localization yang ada di menu bar. Ketika dipilih, lalu gunakan tipe file XLIFF untuk menyimpannya. Nantinya Xcode akan otomatis membuat file XLIFF ini, dan jika kita membukanya, kita akan melihat struktur seperti dibawah ini:

Xcode telah mengekstrak string yang telah kita inisialiasi sebelumnya menggunakan macro NSLocalizedString. Selain itu, kita juga akan menemukan struktur seperti dibawah ini pada file tersebut:

Dimana struktur tersebut otomatis digenerate oleh Xcode untuk menginisialisasi semua strin localizable termasuk label, dan tombol. Nah yang akan kita lakukan selanjutnya adalah mengecek kembali hasil terjemahan untuk memastikan kembali terjemahan sudah benar atau belum. Kita bisa menggunakan tool translate seperti Google Translate untuk memastikannya. Ganti teks hasil terjemahan yang belum maksimal, seperti yang ada di dalam tiap tag <target>, yang nantinya akan terlihat seperti file berikut:

Baris pertama dari code XML merupakan definisi dari file original dan target bahasa yang diterjemahkan. Dalam hal ini diterjemahkan menjadi bahasa Cina (Hong Kong). Nah selanjutnya strukut code untuk terjemahan bahasa jerman:


Meng-import Localization

Saya asumsikan Anda telah menerjemahkan file tersebut ke bahasa yang akan kita gunakan pada aplikasi Selanjutnya buke menu Editor dan pilih Import Localizations, ketika berhasil pilih file translation yang telah kita buat tadi. Xcode akan otomatis membuat perbandingan dari file yang kita buat dan terjemahkan dengan buatan Xcode seperti gambar dibawah ini:

Membanding Localization
Membandingkan Localization

Jika kita telah mengkonfirmasi bahwa terjemahan sudah benar, maka klik import untuk menyelesaikannya. Ketika selesai, Xcode akan menampilkan localization yang tersedia di layar project seperti gambar dibawah ini:

Menambahkan Localization Jerman dan Cina ke project Xcode
Menambahkan Localization Jerman dan Cina ke project Xcode

Sebelum kita melakukan testing aplikasi, mari kita bahas sedikit tentang dasar dari internationalization dan file localized resource. Pertama kali, coba lihat pada file Localizable.strings. File ini otomatis dibuat setelah proses import dilakukan, nah sekarang di project kita sudah ada dua versi dari Localizable.string yang bisa kita lihat pada project navigator.

File Resource untuk terjemahan Cina dan Jerman
File Resource untuk terjemahan Cina dan Jerman

Jika kita melihat kesalah satu file Localizable.string (contohnya cina), kita akan menemukan hasil terjemahan localizable string kedalam bahasa cina. Seperti yang terlihat dibawah ini:

Kita juga bisa mengedit langsung dari file Localizable.string ini jika perlu adanya perubahan, tetapi akan lebih baik jika menggunakan fitur export sebelumnya.

Nah yang terakhir yaitu dasar internationalization, seperti yang kita lihat pada gambar sebelumnya, Main.storyboard sekarang telah dipisah menjadi 3 file berbeda. Dua diantaranya merupakan hasil terjemahannya.


Testing Aplikasi

Tiba saatnya untuk kita melakukan testing aplikasi , tapi sebelumnya kita harus mengganti bahasa yang ada disimulator manjadi bahasa internasional dengan cara memilih menu General>International>Language, lalu pilih bahasa yang akan dilakukan testing seperti yang terlihat pada gambar dibawah ini:

Mengatur bahasa applikasi
Mengatur bahasa applikasi

Nah sekarang klik tombol run, jika kita telah menyeting bahasanya menjadi bahasa cina, maka seharusnya tampilan aplikasi akan terlihat seperti dibawah ini:

Aplikasi FoodPin setelah di terjemahkan
Aplikasi FoodPin setelah di terjemahkan

Cara lainnya, kita bisa menggunakan Interface Builder untuk melakukan preview aplikasi tanpa perlu menjalankannya di simulator, biar lebih cepat. Kita menggunakan fitur yang pernah dibahas sebelumnya, yaitu prevew assistant, seperti yang terlihat pada gambar dibawah ini:

Preview aplikasi localize menggunakan Preview Assistant
Preview aplikasi localize menggunakan Preview Assistant

Localizing Resource

Jika sebelumnya kita telah berhasil menerjemahkan teks kedalam bahasa yang berbeda, maka untuk gambar, audio dan video beda lagi penanganannya. Contohnya kita ingin menampilkan teks yang ada pada gambar menjadi bahasa yang berbeda seperti yang terlihat pada gambar dibawah ini:

Icon versi terjemahan
Icon versi terjemahan

Diawal project kita menggunakan assets catalog sebagai gambar icon aplikasi, tetapi sayangnya ini tidak akan bisa digunakan jika aplikasi support multi bahasa. Oleh karena itu kita membutuhkan banyak gambar untuk membuatnya support multibahasa, Anda bisa mendownload resource gambarnnya disini: https://www.dropbox.com/s/mp8nbsnx4hfld4d/chapter22-images.zip?dl=0

Setelah didownload pindahkan gambar aboutfoodpin.png ke dalam project navigator. Pastikan bahwa tipe “Copy item if needed” dalam kondisi aktif, dimana ini akan memberitahu Xcode untuk mengkopi file. Selanjutnya klik dua kali file tersebut untuk menampilkan pop-up menu, dimana kita akan menemukan tombol “Localize..”. Klik tombol tersebut untuk mengkonformasi file yang kita tambahkan kedapa project. Pilih Base dan tombol Localize untuk mengkonfirmasi seperti yang terlihad pada gambar dibawah ini:

Menenerjemahkan gambar aboutfoodpin(dot)png
Menenerjemahkan gambar aboutfoodpin(dot)png

Setelah itu, kita akan melihat pilihan Cina atau jerman pada pilihan localizationnya. Pilih kedua bahasa tersebut dan Xcode akan membuat versi baru dari aboutfoodpin.png di project navigator, seperti yang bisa dilihat pada gambar dibawah ini:

Mengkatifkan Localization Jerman dan Cina
Mengkatifkan Localization Jerman dan Cina

Nah sekarang kita telah berhasil membuat gambar local untuk masing-masing bahasa. Yang perlu kita lakukan selanjutnya adalah mengganti pemanggilan gambar pada masing-masing bahasa seperti yang terlihat pada gambar dibawah ini:

Meletakkan file path dari gambar yang sudah di terjemahkan
Meletakkan file path dari gambar yang sudah di terjemahkan
Mengcopy icon terjemahan dan menimpanya dengan icon sebelumnya
Mengcopy icon terjemahan dan menimpanya dengan icon sebelumnya

Terakhir, jangan lupa untuk mengganti gambar dari About view controller dari about menjadi aboutfoodpin.png di storyboard, karena kita sudah menghilangkan gambar assest catalog sebelumnya.

Booo yea.., sekarang waktunya untuk mengetest localized. Setelah semuanya beres, coba testing aplikasi dan ganti bahasa aplikasi menjadi bahasa cina. Dimana seharusnya akan terlihat seperti gambar dibawah ini:

Hasil terjemahan
Hasil terjemahan

Well, mungkin cukup sekian pembahasan kali ini, oya untuk sourcecode pada pembahasan kali ini bisa didownload disini: https://www.dropbox.com/s/c6vbz9v87nlitxl/FoodPinLocalization.zip?dl=0

Semoga bermanfaat ya guys, see yaa .. 😉

 

 

 

Iklan

Satu pemikiran pada “Implementasi Localize di iOS – FoodPin Apps

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s