AngularJS - Penyelarasan Antarabangsa

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan melangkah ke dalam dunia menarik penyelarasan antarabangsa dalam AngularJS. Sebagai guru sains komputer tetangga yang ramah, saya di sini untuk memandu anda melalui topik yang menarik ini. Jadi, ambil minuman kesukaan anda, betahkan diri, dan mari kita masuk ke dalamnya!

AngularJS - Internationalization

Apa Itu Penyelarasan Antarabangsa?

Sebelum kita mulai mengoding, mari kita memahami apa yang dimaksudkan oleh penyelarasan antarabangsa. Bayangkan anda menciptakan website yang fantastik, tetapi hanya dalam Bahasa Inggeris. Apa bila anda ingin orang dari negara lain menggunakannya? Itu adalah tempat penyelarasan antarabangsa memasuki gambar! Itu seperti memberikan website anda paspor untuk mengembara di seluruh dunia.

Penyelarasan antarabangsa ( biasanya disingkat sebagai i18n - ada 18 huruf antara 'i' dan 'n') adalah proses desain aplikasi anda supaya dapat diadaptasi ke berbagai bahasa dan wilayah tanpa perubahan teknik.

Mengapa Penyelarasan Antarabangsa Penting?

Pikirkan seperti ini: jika anda memiliki kedai es krim, anda hanya akan menjual satu rasa? Tentu saja tidak! Anda akan ingin memenuhi berbagai rasa. Hal yang sama berlaku untuk website. Dengan penyesuaian antarabangsa aplikasi AngularJS anda, anda membuatnya dapat diakses dan user-friendly bagi orang di seluruh dunia. Itu seperti melayani es krim digital dalam setiap rasa!

Sekarang, mari kita lipatkan lengan dan lihat bagaimana AngularJS membuat penyelarasan antarabangsa mudah.

Menyiapkan AngularJS untuk Penyelarasan Antarabangsa

Pertama-tama, kita perlu mengatur aplikasi AngularJS kita untuk menangani penyelarasan antarabangsa. Kita akan menggunakan pustaka angular-translate, yang seperti tongkat sihir untuk menerjemahkan aplikasi kita.

Berikut cara kita mengaturnya:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
<div ng-controller="TranslateController">
<!-- Isi aplikasi kita akan berada di sini -->
</div>
<script src="app.js"></script>
</body>
</html>

Dalam file app.js kita, kita akan mengatur modul AngularJS kita dan mengonfigur penyedia terjemahan:

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
// Konfigurasi akan berada di sini
}]);

app.controller('TranslateController', function($scope, $translate) {
// Logika kontroler akan berada di sini
});

Contoh Menggunakan Lokal Denmark

Sekarang, mari kita buat contoh sederhana di mana kita akan menerjemahkan aplikasi kita ke Denmark. Mengapa Denmark, Anda bertanya? Well, mengapa tidak! Dan, saya pernah punya murid yang gila dengan kue Denmark, jadi ini untukmu, Lars!

Mari kita perbarui app.js kita:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

Apa yang terjadi di sini:

Kita menentukan terjemahan untuk Bahasa Inggeris ('en') dan Denmark ('da').
Kita mengatur Bahasa Inggeris sebagai bahasa yang disukai.
Kita membuat fungsi changeLanguage dalam kontroler kita untuk beralih bahasa.

Sekarang, mari kita perbarui HTML kita:

<div ng-controller="TranslateController">
<h2>{{ 'TITLE' | translate }}</h2>
<p>{{ 'FOO' | translate }}</p>
<button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
<button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

Output

Ketika anda menjalankan kode ini, anda akan melihat:

Judul yang mengatakan "Hello"
Paragraf yang mengatakan "This is a paragraph."
Dua tombol yang diberi label "English" dan "Danish"

Klik tombol "Danish", dan voila! Aplikasi anda sekarang berbicara dalam Denmark:

Judul berubah menjadi "Hej"
Paragraf mengatakan "Dette er et afsnit."
Tombol sekarang diberi label "Engelsk" dan "Dansk"

Itu seperti magi, bukan itu? Tetapi ingat, itu bukan magi - itu adalah kekuatan AngularJS dan keterampilan coding anda!

Contoh Menggunakan Lokal Browser

Sekarang, mari kita tingkatkan lagi. Apa bila kita ingin aplikasi kita secara otomatis menggunakan bahasa browser pengguna? Itu seperti memiliki website yang berbicara dalam bahasa anda sebelum anda bahkan meminta!

Mari kita modifikasi app.js kita:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.useLocalStorage();
$translateProvider.fallbackLanguage('en');
$translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
'en*': 'en',
'da*': 'da'
});
$translateProvider.determinePreferredLanguage();
}]);

Apa yang baru di sini?

Kita menggunakan penyimpanan lokal untuk mengingat preferensi bahasa pengguna.
Kita mengatur Bahasa Inggeris sebagai bahasa cadangan.
Kita mendaftarkan kunci bahasa yang tersedia.
Kita menggunakan determinePreferredLanguage() untuk secara otomatis mendeteksi bahasa yang disukai browser.

Output

Sekarang, ketika pengguna mengunjungi website anda:

Jika bahasa browser mereka diatur ke Denmark, mereka akan melihat versi Denmark.
Jika diatur ke bahasa lain, mereka akan melihat versi Bahasa Inggeris (fallback kita).
Bahasa yang dipilih akan diingat untuk kunjungan berikutnya.

Itu seperti website anda adalah kameleon, menyesuaikan diri dengan setiap lingkungan pengguna!

Kesimpulan

Dan begitu juga, teman-teman! Kita telah menjadikan aplikasi AngularJS kita menjadi fenomena multibahasa. Ingat, penyelarasan antarabangsa tidak hanya tentang terjemahan - itu tentang menciptakan pengalaman yang ramah bagi pengguna di seluruh dunia.

Sekarang, sebagai anda terus menjalani perjalanan coding anda, selalu ingat tentang pengguna anda. Apakah mereka berada di Kopenhagen atau California, aplikasi anda sekarang dapat menyapa mereka dalam bahasa yang mereka pahami.

Terus latih, tetap bersemangat, dan siapa tahu? Mungkin suatu hari anda akan menciptakan aplikasi yang berbicara dalam lebih banyak bahasa daripada C-3PO! Sampai jumpa lagi, coding yang bahagia!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Direktif Khas

Tutorial Seterusnya:

AngularJS - Aplikasi ToDo