Cara Mudah Membuat Aplikasi iOS yang Mendukung Berbagai Bahasa Pengguna pada UIkit dan SwiftUI Menggunakan String Catalog
Sebuah aplikasi pasti ingin digunakan oleh banyak orang dan bisa dijangkau pengguna di berbagai negara dan wilayah. Salah satu strategi yang bisa mendukung itu semua adalah dengan membuat aplikasi yang mendukung berbagai bahasa. Hal tersebut penting karena pengguna akan merasa nyaman dan mudah dalam menggunakan aplikasi.
Localization is the process of translating and adapting your app into multiple languages and regions. ~ Apple Localization Documentation
Ada berbagai cara yang bisa dilakukan agar aplikasi iOS yang kita buat bisa mendukung berbagai bahasa atau yang biasa disebut lokalisasi. Diantaranya adalah
- Strings: Cara ini bisa dilakukan untuk lokalisasi string atau text. Di dalamnya terdapat key dan value yang digunakan untuk mendapatkan text hasil lokalisasinya. Namun kekurangan cara ini adalah tidak mendukung plural dan tidak terdapat graphic user interface (GUI) sehingga akan sangat mungkin terjadi kesalahan. Kesalahan yang biasa terjadi adalah ada text yang belum diubah dalam berbagai bahasa.
- Stringsdict: Cara ini digunakan untuk lokalisasi text plural. Sama seperti String, Stringdict juga tidak di dukung oleh GUI yang memadai, sehingga sangat rentan terjadi kesalahan.
- String Catalog: Cara ini merupakan rekomendasi dari Apple untuk melalukan lokalisasi di iOS. Diperkenalkan pada WWDC 2023 namun membutuhkan XCode 15 ke atas.
Pada tutorial kali ini kita akan menggunakan String Catalog dan akan kita bahas lebih mendetail. Jadi seduh kopi dulu, tarik nafas panjang, biar belajar makin semangat 😁
String Catalog
String Catalog merupakan pengganti dari String dan Stringdict, datang dengan format baru, dilengkapi GUI dan workflow. Dengan String Catalog kita bisa melakukan lokalisasi text dan plural dengan lebih mudah.
Kelebihan yang dimiliki String Catalog diantaranya adalah
- Dilengkapi dengan GUI yang memadai. Kita bisa mengganti terjemahan melalui GUI atau visual yang disediakan, melihat persentase berapa banyak text yang telah diterjemahkan. Di GUI tersebut kita juga bisa menambahkan komentar untuk memperjelas konteks dari text yang diterjemahkan.
- Workflow yang lebih jelas. Dengan GUI yang disediakan XCode kita bisa melihat dan mengganti status dari terjemahan suatu text. Status yang tersedia diantaranya adalah New, Need Review, Reviewed, dan Stale. Sehingga kita bisa tahu apabila terdapat penambahan atau perubahan text baru atau ada text yang perlu di review ulang.
- Digunakan untuk menerjemahkan text dan plural. Di plural sendiri kita bisa menerjemahkan berdasarkan jumlah (zero, one, dan other) atau berdasarkan platform (iOS, macOS, watchOS).
- Bisa melakukan export dan import asset text lokalisasi dengan mudah. Fitur ini sangat berguna apabila text yang ingin diterjemahkan banyak dan membutuhkan jasa penerjemah. Kita tinggal mengirim file hasil export lokalisasi ke penerjemah, penerjemah langsung menerjemahkan di file tersebut, dan kita import file hasil terjemahan ke projek iOS kita. Hasilnya text terjemahan akan terisi otomatis. Mudah bukan? 😄 Kita sebagai developer iOS tidak perlu lagi repot-repot untuk mengisi text satu-satu.
Implementasi String Catalog pada UIKit
- Buat satu projek baru dengan interface storyboard.
2. Tambahkan 3 label di storyboard sebagai sample hasil terjemahan. Atur semua constraints-nya sehingga tampilannya akan nampak seperti dibawah ini.
3. Tambahkan String Catalog file di projek dengan cara Klik File -> New file -> Pilih String Catalog -> Next -> Create. File dengan format .xcstrings dengan default lokalisasinya Bahasa Inggris akan dibuat apabila proses ini berhasil.
4. Tambahkan text lokalisasi di GUI String Catalog untuk Bahasa Inggris.
Selanjutnya muncul pertanyaan apa sih yang dimaksud dengan %@, %lld dan %.1f ?
%@, %lld dan %.1f disebut dengan String Format Specifier. Secara mudah bisa di pahami %@, %lld dan %.1f akan di digantikan oleh string dengan format tertentu.
%@: String
%lld: Integer
%.1f: Float dengan 1 angka dibelakang koma.
Untuk lebih lengkapnya anda bisa mengunjungi link ini.
5. Tambahkan kondisi plural di string catalog. Caranya dengan klik kanan di key -> Vary by Plural -> Pilih Argument 1. Ulangi cara tersebut untuk memilih argument 2.
Setelah itu tambahkan Pluralnya, seperti gambar dibawah ini.
Karena Bahasa Inggris mendukung plural maka akan muncul one dan other. One berarti singular, other berarti plural.
6. Untuk menambahkan target lokalisasi lainnya kamu bisa menekan button + di bagian bawah -> pilih negara
7. Tambahkan terjemahan dan kondisi plural untuk Bahasa Indonesia. Caranya sama dengan langkah 5. Karena Bahasa Indonesia tidak mendukung plural maka pilihan yang muncul hanya ada other.
8. Di ViewController tambahkan IBOutlet untuk 3 label, sambungkan dengan storyboard dan assign text lokalisasinya ke dalam label tersebut.
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var message1Label: UILabel!
@IBOutlet weak var message2Label: UILabel!
@IBOutlet weak var message3Label: UILabel!
let name = "Galang"
let applicationCount = 6
let yearExperience = 3.5
override func viewDidLoad() {
super.viewDidLoad()
message1Label.text = String(localized: "Hello, world! My name is \(name)")
message2Label.text = String(localized: "I love coding")
message3Label.text = String(localized: "After \(yearExperience, specifier: "%.1f") year(s) experience, i have released \(applicationCount) application(s)")
}
}9. Untuk mencoba lokalisasi berjalan atau tidak, kita bisa melakukan simulasi dengan mengganti pengaturan bahasa schema.
10. Selesai dan coba jalankan aplikasinya.
Implementasi String Catalog pada SwiftUI
Di SwiftUI implementasinya akan lebih mudah dibandingkan dengan UIKit.
- Buat satu projek baru dengan interface Swift UI.
2. Pada ContentView, buat 3 Text di dalam body sebagai sample dari terjemahan.
import SwiftUI
struct ContentView: View {
let name = "Galang"
let applicationCount = 6
let yearExperience: Double = 3.5
var body: some View {
VStack(alignment: .leading, spacing: 20) {
Text("Hello, world! My name is \(name)")
Text("I love coding")
Text("After \(yearExperience, specifier: "%.1f") year(s) experience, i have released \(applicationCount) application(s)")
}
.padding()
}
}
#Preview {
ContentView()
}3. Tambahkan String Catalog file di projek dengan cara Klik File -> New file -> pilih String Catalog -> New (Sama seperti langkah 3 pada UIKit).
4. Build projeknya dan terjemahan dalam Bahasa Inggris akan langsung otomatis terisi. The magic of Swift UI 😁
5. Tambahkan kondisi plural untuk Bahasa Inggris (Sama seperti langkah 5 pada UIKit).
6. Untuk menambahkan target lokalisasi lainnya kamu bisa menekan button + di bagian bawah -> pilih negara (Sama seperti langkah 6 pada UIKit).
7. Tambahkan terjemahan dan kondisi plural untuk Bahasa Indonesia (Sama seperti langkah 7 pada UIKit).
8. Untuk mencoba lokalisasi berjalan atau tidak, kita bisa melakukan simulasi dengan mengganti pengaturan bahasa schema (Sama seperti langkah 9 pada UIKit).
9. Selesai dan cukup lihat hasilnya di preview.
Bonus Part : Migrasi dari Legacy String ke String Catalog
Untuk melakukan migrasi dari projek yang sebelumnya menggunakan String ke String Catalog, kita tidak perlu menaikan target iOS ke lebih tinggi. XCode sudah mendukung migrasi ke String Catalog dengan cukup mudah. Kita juga tidak perlu memindahkan textnya manual. Langkah-langkahnya sebagai berikut:
- Klik kanan pada String lokalisasi -> Pilih migrasi ke String Catalog -> Pilih Migrasi.
2. Selesai migrasi, file String kita akan diganti menjadi XCStrings yang menandakan proses migrasi berhasil.
Terimakasih untuk team Apple yang telah membuat proses migrasi jadi lebih mudah😊
Selamat anda telah menyelesaikan tutorial String Catalog. Cukup mudah bukan? Apakah kita harus menggunakan String Catalog untuk lokalisasi di projek iOS yang kita buat? Menurut saya kalo kita buat projek baru sebaiknya langsung menggunakan String Catalog, karena Apple merekomendasikan menggunakan String Catalog. Kita juga tidak tahu di masa depan Apple akan mewajibkan menggunakan String Catalog atau tidak.
Apakah projek yang sebelumnya menggunakan String harus di migrasi ke String Catalog? Menurut saya tidak harus, karena kita juga harus melihat berdasarkan kebutuhan. Tetapi dengan segala kelebihan String Catalog saya merekomendasikan untuk menggunakan String Catalog.
Terimakasih sudah membaca tutorial ini sampai akhir.
Jangan lupa clap dan follow kalau atrikel ini bermanfaat ya hehe :) Sampai ketemu di artikel berikutnya!
Resources:
