تهيئة التطبيق: اللغة العربية، والخطوط، والألوان

الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،

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

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

افتح الملف app.vue وقم بتعديل الكود ليكون بالشكل التالي:

<template>
  <div>
    <!-- <NuxtWelcome /> -->
     <h2>مرحبا بالعالم !</h2>
  </div>
</template>

بعد الحفظ، ستظهر الرسالة "مرحبا بالعالم!" بدلاً من الشاشة الترحيبية.

يُفضل دائما تفعيل خيار الحفظ التلقائي في VS Code لتوفير الوقت من خلال قائمة File واختيار Auto Save.

دعم اللغة العربية

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

أيضا يجب الانتباه لتنسيق العناصر مثل القوائم والصور، بحيث تتماشى مع تجربة المستخدم العربي وتجعل الواجهة مُتَّسقة وسهلة القراءة.

ولضبط اتجاه النص في التطبيق بشكل عام، نقوم باضافة الكود التالي لملف app.vue

<script lang="ts" setup>
useHead({
  htmlAttrs: {
    lang: 'ar',
    dir: 'rtl',
  },
});
</script>

وظيفة الكود السابق التعديل على وسم HTML الرئيسي في التطبيق وجعل اللغة المستخدمة lang هى العربية ar، واتجاه النص dir من اليمين إلى اليسار rtl وهى اختصار right to left.

للتأكد من هذا التغيير في المتصفح - إذا كنت تستخدم جوجل كروم مثلا - اضغط الاختصار ctrl + u وستلاحظ تغير وسم HTML في أعلى الصفحة ليصبح مشابه للشكل التالي

<html  lang="ar" dir="rtl">

لاحظ عند معاينة المتصفح أن النص (مرحبا بالعالم !) أصبح على يمين الشاشة.

قبل تكملة الجزء التالي، يرجى الإطلاع على المقال (أنسب مكتبة UI يمكنك استخدامها مع Nuxt) وتحديدا الجزء الخاص بشرح تنصيب "Vuetify" مع "Nuxt".

بعد تثبيت Vuetify، يمكنك تخصيص واجهة التطبيق بإنشاء شريط علوي (app bar).

قم بتحديث ملف app.vue ليصبح بالشكل التالي:

<template>
  <v-layout>
    <v-app-bar :elevation="2">
      <v-app-bar-title>تطبيق المنتجات</v-app-bar-title>
      <template v-slot:append>
        <v-btn icon="mdi-dots-vertical"></v-btn>
      </template>
    </v-app-bar>
  </v-layout>
</template>

لتأكيد دعم Vuetify للغة العربية، أنشئ ملف vuetify.config.ts وأضف الإعدادات التالية:

import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration';

export default defineVuetifyConfiguration({
  locale: {
    locale: 'ar',
    fallback: 'en',
  },
  localeMessages: ['ar', 'en'],
});

ثم في nuxt.config.ts، اضبط إعدادات Vuetify على النحو التالي:

vuetify: {
    vuetifyOptions: './vuetify.config.ts',
},

عند معاينة التطبيق، ستظهر النصوص والواجهة في الاتجاه الصحيح (من اليمين إلى اليسار) بفضل الإعدادات الجديدة.

الخطوط

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

في التطبيقات التي تدعم اللغة العربية، يجب اختيار خطوط تدعم الأحرف العربية بشكل مثالي وتتيح عرضها بوضوح واتجاه صحيح، مما يساعد في تحسين تجربة المستخدم وضمان تفاعله مع التطبيق بسلاسة وراحة.

بالنسبة للعناوين، أفضّل استخدام الخطوط Noto Kufi Arabic أو Cairo لتميزها بالأناقة والوضوح. أما للفقرات، فإنني أرى أن Noto Naskh Arabic هو الأنسب لإضفاء سلاسة على النصوص الطويلة ودعم القراءة المتواصلة.

هذه الخطوط متوفرة بشكل مجاني ضمن خطوط جوجل.

لاستخدام الخطوط السابقة فقط اكتب الأمر التالي

npx nuxi@latest module add fonts

يستخدم الأمر السابق لتثبيت موديول nuxt/fonts في التطبيق، مما يُتيح لك دمج إدارة الخطوط بسهولة.

يقدم موديول nuxt/fonts تجربة سلسة بدون إعدادات مسبقة، حيث يدعم مزودات خطوط جاهزة مثل Google و Adobe، مع إمكانية إضافة مزودات مخصصة للمزيد من التحكم.

يدعم أيضًا تنزيل الخطوط للاستخدام المحلي (local)، وتخزين مؤقت للخطوط أثناء بناء وتطوير التطبيق، مما يسهم في تسريع عملية التحميل وتعزيز الكفاءة.

يمكنك تغيير الخط في التطبيق لجميع النصوص في الصفحة، قم بتعديل ملف app.vue واضف الكود التالي في نهاية الملف

<style>
body {
  font-family: 'Cairo', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
</style>

لاحظ تغيير الخط لكلمة "تطبيق المنتجات" في الشريط العلوي، إلى الخط Cairo.

قد تحتاج عند هذه الخطوة، عمل تشغيل جديد للتطبيق من الأمر

npm run dev

وبشكل عام، يفضل دائما إعادة تشغيل التطبيق عند اضافة موديول أو حزمة (Package) جديدة.

اختيار الألوان

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

يعتبر Vuetify إطار عمل متكامل يقدم للمطورين مكتبة واسعة من المكونات والأدوات المرنة لأجل تصميم واجهات مميزة وقابلة للتخصيص، كما يتيح إدارة الألوان بشكل سهل وفعال، مما يسمح بتحديد ألوان رئيسية وثانوية تتماشى مع هوية التطبيق وتعكس طابعه.

ما يميز Vuetify أنه مبني على نظام Google Material Design، حيث يستند إلى مكتبة ألوان معتمدة تضمن تناسق الألوان وسهولة الاستخدام، مما يجعل تجربة التصميم أكثر تناغمًا واستجابة لمعايير التصميم الحديث.

يمكنك معرفة المزيد عن Google Material Design من خلال مقالي السابق (التصميم المادي … المزايا والعيوب)

لتغيير اللون الرئيسي في التطبيق قم بتعديل ملف vuetify.config.ts السابق ليصبح بالشكل التالي

import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration';

export default defineVuetifyConfiguration({
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1A237E', // primary color
        },
      },
    },
  },
  locale: {
    locale: 'ar',
    fallback: 'en',
  },
  localeMessages: ['ar', 'en'],
});

ثم قم بتعديل كود الشريط العلوي في ملف app.vue ليصبح بالشكل التالي

<v-app-bar :elevation="2" color="primary"> <!-- add color prop -->
      <v-app-bar-title>تطبيق المنتجات</v-app-bar-title>
      <template v-slot:append>
        <v-btn icon="mdi-dots-vertical"></v-btn>
      </template>
</v-app-bar>

لاحظ إضافة color بقيمة primary

يفترض أن يتحول الشريط العلوي إلى اللون الأزرق في التطبيق.

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

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

تابع السلسلة لاستكمال رحلتك نحو بناء تطبيق متكامل من الصفر!

بإمكانك الوصول إلى الكود الكامل للتطبيق على GitHub عبر رابط المشروع هنا.

وفقنى الله وإياك إلى ما يحبه ويرضاه ،،

نبذة تعريفية

تابعنى على

تهيئة التطبيق: اللغة العربية، والخطوط، والألوان | جـ2

دعم اللغة العربية

الخطوط

اختيار الألوان