القائمة الرئيسية

الصفحات

كيفية إضافة الترجمة إلى تطبيق Vue.js باستخدام vue-i18n و Localazy

 كيفية إضافة الترجمة إلى تطبيق Vue.js باستخدام vue-i18n و Localazy

يمكن أن يكون توطين أي نوع من التطبيقات ، سواء أكان تطبيق ويب أو جوال أو سطح مكتب ، مملاً ومزعجًا. في هذه المقالة ، سأوضح لك كيف يمكنك التعامل مع ذلك بسهولة باستخدام Localazy و vue-18n بطريقة تجعلك تقضي وقتك بفعالية وتستمتع بالفعل بعملية الأقلمة.

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

tldr;

                                                                                                            اشترك في Localazy
    إنشاء تطبيق مع اللغة الإنجليزية كلغة مصدر وتمكين خيار استخدام ترجمات المجتمع (ShareTM) ،
    حدد خيار تكامل Vue.js وقم بتثبيت Localazy CLI ،
    تثبيت وتكوين vue-i18n
    أنشئ localazy.json في الجذر والصق التهيئة وعدّلها
    إنشاء مجلد locales وفيه إنشاء en.json. أضف أي زوج ترجمة وقيمة ، على سبيل المثال
    تشغيل تحميل localazy ،
    في Localazy ، أضف أي لغة. ثم راجعه واقبل العبارات المقترحة ،
    قم بتشغيل تنزيل localazy والتحقق من مجلد locales للغة الجديدة ،
    تشغيل التطبيق npm تشغيل الخدمة

    English
    • sign up for Localazy,
    • create an app with English as source language and Use community translations (ShareTM) option enabled,
    • select Vue.js integration option and install Localazy CLI,
    • install and configure vue-i18n
    • create 
      localazy.json
       in root and paste in and modify the configuration
    • create 
      locales
       folder and in it create 
      en.json
      . Add any translation key-value pair, e.g.
    • run 
      localazy upload
      ,
    • in Localazy, add any language. Then review it and accept the suggested phrases,
    • run 
      localazy download
       and check 
      locales
       folder for the new locale,
    • run the app 
      npm run serve
    التسجيل وإنشاء التطبيق
    في البداية:، دعنا ننشئ حسابًا جديدًا على Localazy وننشئ تطبيقًا جديدًا. في هذه المقالة ، سنستخدم اللغة الإنجليزية كلغة المصدر ، ولكن يمكنك عمومًا اختيار أي لغة أخرى. تأكد من تمكين خيار استخدام ترجمات المجتمع (ShareTM). ShareTM هي ذاكرة الترجمة عالية الدقة التي ذكرتها. بفضل ذلك ، تمتلك معظم التطبيقات الجديدة ما يصل إلى 50٪ من سلاسلها المتاحة تلقائيًا للترجمة إلى أكثر من 80 لغة.


    تابع لإنشاء التطبيق. بعد ذلك ، حدد Vue.js على شاشة التكامل. سنستخدم أداة CLI القوية لإدارة تحميل وتنزيل العبارات. التثبيت متاح لأنظمة Linux و MacOS و Windows. لاحظ مفاتيح القراءة والكتابة في الخطوة 2. سنحتاجها قريبًا
    English
    First of all, let’s set up a new account on Localazy and create a new application. In this article, we’ll use English as the source language, but you can generally choose any other. Make sure that the Use community translations (ShareTM) option is enabled. ShareTM is the highly accurate translation memory I mentioned. Thanks to it, most of the new applications have as much as 50 % of their strings automatically available for translation into 80+ languages.
    Proceed to create the app. Afterward, select Vue.js on the integration screen. We’ll use the powerful CLI tool to manage the upload and download of phrases. Installation is available for Linux, MacOS and Windows. Note the read and write keys in step 2. We’ll need it shortly
    قم بإعداد مشروع Vue إذا كنت لا ترغب في اتباع الدليل التفصيلي هنا ، يمكنك إلقاء نظرة على الريبو النهائي. خلاف ذلك ، ابق قليلا واستمع. أنشئ مشروع Vue جديدًا باستخدام vue create vue-i18n-example (إذا لم يكن لديك Vue CLI مثبتًا ، فقم بتشغيل npm install -g @ vue / cli) واستخدم الإعداد المسبق Vue 2. بمجرد تثبيت كل شيء ، أضف vue-i18n.

    Set up Vue project
    If you don’t want to follow the step-by-step guide here, you can take a look at the finished repo. Otherwise, stay awhile and listen.

    Create a new Vue project with vue create vue-i18n-example (if you don’t have Vue CLI installed, run npm install -g @vue/cli) and use
    Vue 2 preset. Once everything is installed, add vue-i18n

    npm install vue-i18n

    حان الوقت الآن لإضافة التكامل مع Localazy. أنشئ localazy.json في المجلد الجذر والصق التكوين التالي. استخدم مفاتيح الكتابة والقراءة من الخطوة 2 من صفحة دليل التكامل.


    Now it’s time to add integration with Localazy. Create localazy.json in the root folder and paste the following configuration. Use the write and read keys from the step 2 of the integration guide page.

    {
        "writeKey": "your-write-key",
        "readKey": "your-read-key",
    
        "upload": {  
          "type": "json",
          "files": "src/assets/locales/en.json"         
        },
        
        "download": {
          "files": "src/assets/locales/${lang}.json"
        }
    }

    بالإضافة إلى ذلك ، قم بإنشاء مجلد src / الأصول / locales وملف en.json بالداخل. نظرًا لأننا حددنا اللغة الإنجليزية لتكون لغة المصدر ، فسيحتوي هذا الملف على عبارات المصدر لتطبيقنا. يمكنك ملء أي زوج مفتاح ذي قيمة تريده. سأضيف هذا.

    Additionally, create 
    src/assets/locales
     folder and 
    en.json
     file inside. Since we’ve set English to be the source language, this file will contain the source phrases for our application. You can fill in any key-value pair you like. I’ll add this.

    {
      "hello": "Hello, my friend",
      "stay_awhile_and_listen": "Stay awhile and listen"
    }

    في هذه المرحلة ، يكون التطبيق جاهزًا لإدارة الترجمة بواسطة Localazy. قبل تحميل المجموعة الأولى من السلاسل ، دعنا نجهز سيناريو اختبار باستخدام vue-i18n لإزالته من لوحاتنا. قم أولاً بتعديل main.js

    At this point, the application is ready to have localization managed by Localazy. Before we upload the first bunch of strings, let’s prepare a test scenario with vue-i18n to get it off our plates.
    First modify main.js

    import Vue from 'vue'
    import App from './App.vue'
    import VueI18n from "vue-i18n";
    import en from "../src/assets/locales/en.json";
    
    const messages = {
        en,
    }
    
    Vue.use(VueI18n);
    const i18n = new VueI18n({
        locale: 'en',
        messages
    })
    
    
    Vue.config.productionTip = false
    
    new Vue({
      i18n,
      render: h => h(App),
    }).$mount('#app')


    And then 
    App.vue

    <template>
      <div id="app">
        <h1>{{$t('hello')}}</h1>
        <h2>{{$t('stay_awhile_and_listen')}}</h2>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    When you run npm run serve, you should see the two English phrases. Nothing fancy so far.
    Uploading and downloading phrases
    Let’s upload the English file to Localazy. From the root folder, run the 
    following command
    
    عند تشغيل npm run serve ، يجب أن تشاهد الجملتين الإنجليزية. لا شيء يتوهم حتى الآن.
    
    تحميل وتنزيل العبارات
    لنقم بتحميل الملف الإنجليزي إلى Localazy. من المجلد الجذر ، قم بتشغيل الأمر التالي

    localazy upload -s

    The -s argument stands for simulate. It is a good practice to test out the configuration without uploading anything to assure that nothing unexpected happens (such as some of the key-value pairs are incorrectly matched and override each other). The output should be something along these lines, depending on the CLI version

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

    Localazy CLI, v1.1.9
    Advanced file uploader/downloader for the Localazy translation platform.
    
    Read more information at https://localazy.com/docs/cli
    
    Uploading...
      - deprecate missing: false
      - import as new: false
      - app version: 0
      - groups: (default only)
      - folder: .
    
    Processing files...
    
    ./src/assets/locales/en.json
      (file=file.json, lang=inherited, type=json)
    
    Verifying...
    
    Validating...
    
    Done.
    كل شيء سار على ما يرام وتم مطابقة ملفنا باللغة الإنجليزية. هذه المرة دعونا نحمّله بشكل حقيقي

    localazy upload

    قم بتحديث صفحة التطبيق وسترى اللغة الإنجليزية في القائمة. افتح علامة التبويب إضافة لغات وستجد هناك لغتين مع معلومات حول النسبة المئوية للترجمات الآلية. من الممكن أن ترى إما 50٪ أو 100٪. تتحسن المطابقة التلقائية مع ShareTM طوال الوقت ومن المحتمل أنه بفضل هذه المقالة ستتم ترجمة جميع العبارات تلقائيًا. كم ذلك رائع

    One way or another, look up German and add it to your app. You’ll see there is a review button. Every time ShareTM provides a translation suggestion it will have candidate status. This means that it will be ready for review and any reviewer can either approve it or decline. Go ahead and approve the suggested phrase(s).
    بطريقة أو بأخرى ، ابحث عن اللغة الألمانية وأضفها إلى تطبيقك. سترى زر مراجعة. في كل مرة تقدم ShareTM اقتراح ترجمة سيكون لها حالة مرشح. هذا يعني أنه سيكون جاهزًا للمراجعة ويمكن لأي مراجع إما الموافقة عليه أو الرفض. تفضل بالموافقة على العبارة (العبارات) المقترحة.

    In case that the ShareTM did not translate 100 % of phrases, come back to the languages list and notice that the review button now reads translate. Localazy recognizes that there is nothing to review but still something to translate, so it offers you the next most likely action in one click. Translate the other phrase (you may use a suggested phrase on the translation page). This time you do not need to go through the review process since you are a trusted translator as owner by default, so the translation is immediately approved.
    في حالة عدم قيام ShareTM بترجمة 100٪ من العبارات ، ارجع إلى قائمة اللغات ولاحظ أن زر المراجعة الآن يقرأ الترجمة. يدرك Localazy أنه لا يوجد شيء للمراجعة ولكن لا يزال هناك شيء للترجمة ، لذلك فهو يقدم لك الإجراء التالي الأكثر احتمالاً بنقرة واحدة. ترجم العبارة الأخرى (يمكنك استخدام عبارة مقترحة في صفحة الترجمة). لن تحتاج هذه المرة إلى متابعة عملية المراجعة نظرًا لأنك مترجم موثوق به كمالك افتراضي ، لذلك تتم الموافقة على الترجمة على الفور
    It’s time to go back to the Vue project.
    localazy download
    With this command, you’ll download all the newly accepted phrases and newly added languages. In the locales folder, we can see there is newly de.json.

    The last thing to be done is to update main.js and add the German locale resource file.
    باستخدام هذا الأمر ، ستقوم بتنزيل جميع العبارات المقبولة حديثًا واللغات المضافة حديثًا. في مجلد locales ، يمكننا رؤية وجود de.json حديثًا.

    آخر شيء يجب القيام به هو تحديث main.js وإضافة ملف موارد اللغة الألمانية.

    import Vue from 'vue'
    import App from './App.vue'
    import VueI18n from "vue-i18n";
    import en from "../src/assets/locales/en.json";
    import de from "../src/assets/locales/de.json";
    
    
    const messages = {
        en,
        de
    }
    
    Vue.use(VueI18n);
    const i18n = new VueI18n({
        locale: 'de',
        messages
    })
    
    
    Vue.config.productionTip = false
    
    new Vue({
      i18n,
      render: h => h(App),
    }).$mount('#app')

    Now when you run the app again, you’ll see that the phrases were correctly translated to German.
    الآن عند تشغيل التطبيق مرة أخرى ، سترى أن العبارات تمت ترجمتها بشكل صحيح إلى الألمانية.
    Closing words
    I hope you’ve enjoyed this short intro into Localazy with vue-i18n. If you’d like to get closer to us, join us on Discord.

    Previously published at https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy
    كلمات ختامية
    أتمنى أن تكون قد استمتعت بهذه المقدمة القصيرة عن Localazy مع vue-i18n. إذا كنت ترغب في الاقتراب منا ، انضم إلينا على Discord.

    نُشر سابقًا على https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy
    هل اعجبك الموضوع :

    تعليقات