في العالم الرقمي المتوسع اليوم، يهدف مطورو الويب إلى التواصل مع جمهور عالمي. تتمثل الإستراتيجية الرئيسية لتحقيق ذلك في تحويل تطبيق Angular الخاص بك إلى تجربة متعددة اللغات. مرحبًا بك في التدويل (i18n)، حيث يمكن لتطبيقك التواصل مع المستخدمين بلغاتهم الأصلية، بغض النظر عن مكان وجودهم. في هذه المدونة، سنتعمق في دمج i18n في مشروعك Angular، مما يضمن إمكانية الوصول إلى تطبيقك وسهولة استخدامه للأشخاص في جميع أنحاء العالم.

مقدمة للتدويل (i18n) باللغة الزاوي

تخيل تطبيق الويب الخاص بك كجسر يربط المستخدمين من جميع أنحاء العالم. لإنشاء تجربة مرحبة وسهلة الاستخدام للجميع، من الضروري التواصل بلغتهم. يعد التدويل (i18n) هو المفتاح لجعل تطبيقك قابلاً للتكيف مع مختلف اللغات والمناطق. تقدم Angular أدوات وميزات قوية لمساعدتك في تحقيق ذلك.

إعداد مشروع Angular جديد

قبل أن نبدأ رحلتنا إلى i18n، فلنقم بإنشاء مشروع Angular جديد.

ng new i18n-app

يمكنك استخدام الأمر التالي لبدء مشروع Angular جديد باستخدام Angular CLI. أثناء عملية الإعداد، يمكنك تكوين مشروعك، بما في ذلك خيارات مثل تمكين التوجيه الزاوي واختيار تنسيق ورقة الأنماط (على سبيل المثال، CSS، SCSS). تأكد من تحديد الإعدادات التي تتوافق مع متطلبات مشروعك.

تثبيت وتكوين أدوات i18n الخاصة بـ Angular

1. لبدء رحلتنا إلى i18n، سنحتاج إلى الأدوات المناسبة. سنقوم بتثبيت وإعداد أدوات i18n الخاصة بـ Angular لجعل تطبيقنا متعدد اللغات.

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

1. بمجرد تثبيت ngx-translate، يمكننا استيراده إلى وحدة Angular أو Config وإعداد خدمة الترجمة:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

إذا كنت تستخدم ملف app.config، فما عليك سوى استبدال NgModule بالكود التالي:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

في هذا الكود، نقوم باستيراد وحدات ngx-translate الضرورية وتكوين محمل الترجمة باستخدام وظيفة HttpLoaderFactory. تستخدم وظيفة HttpLoaderFactory وحدة HttpClient لتحميل ملفات الترجمة بشكل غير متزامن من الخادم.

إنشاء ملفات الترجمة

بمجرد إعداد خدمة الترجمة، يمكننا إنشاء ملفات ترجمة لكل لغة نريد دعمها. ملفات الترجمة هي ملفات JSON التي تعين المفاتيح للسلاسل المترجمة.

قم بإنشاء ملفات برمز اللغة اللازم كاسم وأضف الترجمات إليها.

على سبيل المثال، إليك ملف ترجمة باللغة الإنجليزية:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

وهذا ملف الترجمة الألمانية:

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

هذه هي بنية المجلد وأسماء الملفات.

ملاحظة: تستخدم ملفات الترجمة نفس المفاتيح ولكن بقيم مختلفة لكل لغة. وهذا يبسط التبديل بين اللغات في تطبيقنا دون تعديل الكود.

استخدام الترجمات في القوالب

بعد أن أصبحت ملفات الترجمة لدينا جاهزة، يمكننا الآن دمجها في قوالب Angular الخاصة بنا. الخطوة الأولى هي إدخال خدمة الترجمة في المكون الخاص بنا:

App.component.ts :

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

في هذا الكود، نقوم بإدخال TranslateService في المكون الخاص بنا ونقوم بتعيين اللغة الإنجليزية كلغة افتراضية. نحدد أيضًا طريقة ترجمة اللغة التي تسمح لنا بتغيير لغة التطبيق.

إنشاء مكون لترجمة اللغة

ng g c LanguageTranslation

بعد إنشاء المكون، يمكننا الاستفادة من خدمة الترجمة للترجمة بين لغات متعددة.

LanguageTranslation.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

LanguageTranslation.component.html

{{ "title" | translate }}


    English
    German

في هذا الكود، نقوم بإنشاء LanguageTranslationComponent الذي يقوم بإدخال TranslateService ويوفر زرين للتبديل بين اللغتين الإنجليزية والألمانية. عند النقر على زر ما، نستدعي طريقة TranslateLanguage في TranslateService مع رمز اللغة المناسب.

ملاحظة: عند استخدام this.translate.use('DE')، تأكد من استخدام رمز اللغة الصحيح لأنه حساس لحالة الأحرف وتأكد من دقة اسم الملف.

خاتمة:

يعد التدويل عنصرًا أساسيًا في تطوير البرامج الحديثة، وتوفر Angular أدوات قوية لإنشاء تطبيقات متعددة اللغات. مع مكتبة ngx-translate، يصبح تطبيق i18n في Angular أبسط وأكثر قابلية للتكيف.

في هذه المقالة، تناولنا كيفية استخدام ngx-translate لإنشاء ملفات الترجمة وتطبيق الترجمات في القوالب وتبديل اللغات داخل تطبيق Angular. ومن خلال اتباع هذه الإرشادات، يمكنك بسهولة إنشاء تطبيق متعدد اللغات يمكن للمستخدمين في جميع أنحاء العالم الوصول إليه.

شكرًا لك!

لا تتردد في ترك التعليقات إذا كان لديك أي أسئلة