أشارك ما أعرفه عن البرمجة، وتجارب أخرى.

إنشاء موقع متعدد اللغات باستخدام إطار العمل Laravel

تم نشرها بتاريخ 2020-06-20 في شروح ، برمجيات


Localization هي عملية تحويل ترجمة بيانات إلى لغة بلد أو منطقة أخرى، عادة مانحتاج هذه العملية لبناء تطبيقات أو صفحات ويب تدعم عدة لغات لتتناسب مع لغة المستخدم. خلال هذه المقالة سنقوم بفهم كيفية القيام بعملية تعريب صفحات والمحتوى الثابت static بإطار العمل Laravel.


تجهيز مشروع:

سأقوم بأنشاء مشروع جديد لتطبيق الخطوات عليه

Laravel  new localization-demo

ونستعرض الصفحة الرئيسية تطبيقنا عن طريق

php artisan serve



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


إحدى الطرق المعروفة للتبديل بين لغات التطبيق هي باستخدام اختصارات اللغات ISO 639-1 Code  في الرابط حتى نقوم بالترجمة على أساسه فمثلا عند اختيار اللغة العربية سيكون الرابط (www.example.com/ar/about) وعند اختيار اللغة الانجليزية (www.example.com/en/about) إذا فنحن بحاجة لتحديد هذا الاختصار في كل روابط التطبيق، ولتنفيذ هذه سنستخدم Route Groups كالتالي: 



Route::group([
    'prefix' => '{locale}',
    'where' => ['locale' => 'ar|en'],
], function () {

});



قمنا من خلاله بتحديد أنه في مجموعة routes التي سنضعها به يجب أن يبتدئ كل منها باختصار باسم اللغة prefix وقمنا بحصر الاختصارات إلى ar, en وذلك لأنني لن أقوم بترجمة محتوى الصفحات إلى لغة أخرى غيرهم  where 

لتغيير لغة التطبيق في كل مرة يقوم المستخدم بتغيير الاختصار بالرابط، نقوم بإضافة Middleware لهذه المجموعة وتغيير لتطبيق في كل مرة يمر Route به.

نقوم أولا بإضافة هذا middleware

php artisan make:middleware SetLocale

وتغيير لغة التطبيق به


class SetLocale
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        app()->setLocale($request->segment(1));
        return $next($request);
    }
}

ولا ننسى إضافته لمصفوفة routeMiddleware بالملف app/Http/Kernel.php .


protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'setlocale'  => \App\Http\Middleware\SetLocale::class,
    ];

 أخيراً نقوم بإضافته للمجموعة



Route::group([
    'prefix' => '{locale}',
    'where' => ['locale' => 'ar|en'],
    'middleware' => 'setlocale',
], function () {
});

والآن نحن بحاجة للتعديل بالصفحة الرئيسية التي توجد حاليا على الرابط (www.example.com) والذي لا يوجد به اختصار اللغة التي نريد التصفح بها.فكيف نعرض للمستخدم محتوى هذه الصفحة بدون معرفة اللغة التي اختارها.


لحل هذه يمكننا إعادة التوجيه المستخدم للرابط الصحيح الذي نريده، والذي هو (www.example.com/ar) عن طريق:


Route::get('/', function () {
    return redirect(app()->getLocale());
});

ونقوم بتحديد route  أخر داخل route group ليكون هو المسؤول عن إرجاع welcome view


Route::group([
    'prefix' => '{locale}',
    'where' => ['locale' => 'ar|en'],
    'middleware' => 'setlocale',
], function () {

    Route::get('/', function () {
        return view('welcome');
    })->name('welcome');
});


والآن لنقم بإضافة زر تغيير اللغة

    
        
    


وثم تغيير النصوص لنقوم بعرضها باستخدام laravel localization، وذلك عن طريق استخدام داول الترجمة والتي هي 

{{ __(‘text’) }}


ليقوم إطار العمل بالبحث عن النص text وعرض ما يقابله في النصوص الموجودة بالملف الترجمة التي سنضيفها تحت مجلد resources/lang، ونضيف ملف لكل لغة بنفس اسم اختصار اللغة المتعارف عليه عالميا ISO 639-1 Code 


resources/lang/ar.json

    
       {
    "home": "الرئيسية",
    "login": "تسجيل دخول",
    "register": "تسجيل",
    "laravel": "لارافل",
    "docs": "التوثيق",
    "laracasts": "لاراكاستس",
    "news": "الاخبار",
    "blog": "المدونة",
    "nova": "نوفا",
    "forge": "فورج",
    "vapor": "فايبر",
    "github": "قيت هاب"
}

    


resources/lang/en.json


{
    "home": "Home",
    "login": "Login",
    "register": "Register",
    "laravel": "Laravel",
    "docs": "docs",
    "laracasts": "Laracasts",
    "news": "News",
    "blog": "blog",
    "nova": "Nova",
    "forge": "Forge",
    "vapor": "Vapor",
    "github": "GitHub"
}

welcome.balde.php

    
        
    



لتحديد اللغة اﻹفتراضية للتطبيق أو موقع التي ستستخدم عن دخول المستخدم للموقع أول مرة، نقوم بتغيير قيمة config بملف config/app.php .


'locale' => 'ar',


هكذا تمكنا من تغيير اللغة وتصفح المحتوى مترجم بحسب اللغة المختارة، وأخيرا لضبط إتجاه الكتابة ليتناسب مع اللغة العربية (من اليمين لليسار) يمكننا وضع شرط لتحديد اتجاه html على أساسه كالتالي:

    
        
    

تعلمنا في هذه المقالة كيفية ترجمة محتوى الموقع ذات المحتوى الثابت إلى عدة لغات وكيفية التنقل والتغيير بين هذه اللغات. يمكننا إسخدام نفس هذه الطريقة مع التطبيقات ذات المحتوى المتغيير تبعاً لقاعدة البيانات، فاﻹضافة ستكون فقط في حفظ البيانات باللغات التي يدعمها الموقع بقاعدة البيانات وتوجد باكج فعالة جداً لفعل ذلك وهي Spatie Laravel translatable


Photo by Jason Leung on Unsplash



خولة الشح

تمت كتابتها بواسطة خولة الشح