{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،"}]},{"type":"blockquote","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"لمواصلة التعلم والاطلاع على المقالات السابقة ضمن هذه السلسلة، يمكنك الوصول إلى المقال السابق ("},{"type":"text","marks":[{"type":"link","attrs":{"href":"/articles/65bf3d8f789ae522f33e3fd2","target":"_self","rel":"noopener noreferrer nofollow","class":null}}],"text":"تجهيز وتنصيب بيئة العمل"},{"type":"text","text":")، حيث سيساعدك في إكمال الصورة وتطبيق المفاهيم بشكل متكامل."}]}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"في هذا الجزء من "},{"type":"text","marks":[{"type":"link","attrs":{"href":"/articles/65bf4be1789ae522f33e4069","target":"_self","rel":"noopener noreferrer nofollow","class":null}},{"type":"bold"}],"text":"السلسلة الكاملة لتعلم بناء التطبيقات"},{"type":"text","text":"، سنبدأ بإزالة الشاشة الترحيبية الافتراضية في Nuxt واستبدالها بمحتوى مخصص."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"افتح الملف "},{"type":"text","marks":[{"type":"code"}],"text":"app.vue"},{"type":"text","text":" وقم بتعديل الكود ليكون بالشكل التالي:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":""}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"بعد الحفظ، ستظهر الرسالة \""},{"type":"text","marks":[{"type":"italic"}],"text":"مرحبا بالعالم!"},{"type":"text","text":"\" بدلاً من الشاشة الترحيبية."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يُفضل دائما تفعيل خيار الحفظ التلقائي في VS Code لتوفير الوقت من خلال قائمة "},{"type":"text","marks":[{"type":"code"}],"text":"File"},{"type":"text","text":" واختيار "},{"type":"text","marks":[{"type":"code"}],"text":"Auto Save"},{"type":"text","text":"."}]},{"type":"heading","attrs":{"textAlign":"right","dir":"rtl","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"دعم اللغة العربية"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يعتمد دعم اللغة العربية في صفحات الويب على ضبط اتجاه النص (RTL) ليصبح من اليمين إلى اليسار، هذا الإعداد مهم لعرض النصوص العربية بشكل صحيح في المتصفحات والأجهزة المختلفة."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"أيضا يجب الانتباه لتنسيق العناصر مثل القوائم والصور، بحيث تتماشى مع تجربة المستخدم العربي وتجعل الواجهة مُتَّسقة وسهلة القراءة."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"ولضبط اتجاه النص في التطبيق بشكل عام، نقوم باضافة الكود التالي لملف "},{"type":"text","marks":[{"type":"code"}],"text":"app.vue"},{"type":"text","text":" "}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":""}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"وظيفة الكود السابق التعديل على وسم "},{"type":"text","marks":[{"type":"code"}],"text":"HTML"},{"type":"text","text":" الرئيسي في التطبيق وجعل اللغة المستخدمة "},{"type":"text","marks":[{"type":"code"}],"text":"lang"},{"type":"text","text":" هى العربية "},{"type":"text","marks":[{"type":"code"}],"text":"ar"},{"type":"text","text":"، واتجاه النص "},{"type":"text","marks":[{"type":"code"}],"text":"dir"},{"type":"text","text":" من اليمين إلى اليسار "},{"type":"text","marks":[{"type":"code"}],"text":"rtl"},{"type":"text","text":" وهى اختصار right to left."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"للتأكد من هذا التغيير في المتصفح - إذا كنت تستخدم جوجل كروم مثلا - اضغط الاختصار "},{"type":"text","marks":[{"type":"code"}],"text":"ctrl + u"},{"type":"text","text":" وستلاحظ تغير وسم "},{"type":"text","marks":[{"type":"code"}],"text":"HTML"},{"type":"text","text":" في أعلى الصفحة ليصبح مشابه للشكل التالي"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":""}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"لاحظ عند معاينة المتصفح أن النص ("},{"type":"text","marks":[{"type":"italic"}],"text":"مرحبا بالعالم !"},{"type":"text","text":") أصبح على يمين الشاشة. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"قبل تكملة الجزء التالي، يرجى الإطلاع على المقال ("},{"type":"text","marks":[{"type":"link","attrs":{"href":"/articles/66e56f82bb18f0ae332df6a5","target":"_self","rel":"noopener noreferrer nofollow","class":null}}],"text":"أنسب مكتبة UI يمكنك استخدامها مع Nuxt"},{"type":"text","text":") وتحديدا الجزء الخاص بشرح تنصيب \"Vuetify\" مع \"Nuxt\"."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"بعد تثبيت Vuetify، يمكنك تخصيص واجهة التطبيق بإنشاء شريط علوي ("},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://vuetifyjs.com/en/components/app-bars/#app-bars","target":"_blank","rel":"noopener noreferrer nofollow","class":null}}],"text":"app bar"},{"type":"text","text":")."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"قم بتحديث ملف app.vue ليصبح بالشكل التالي:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":""}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"لتأكيد دعم Vuetify للغة العربية، أنشئ ملف "},{"type":"text","marks":[{"type":"code"}],"text":"vuetify.config.ts"},{"type":"text","text":" وأضف الإعدادات التالية:"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration';\n\nexport default defineVuetifyConfiguration({\n locale: {\n locale: 'ar',\n fallback: 'en',\n },\n localeMessages: ['ar', 'en'],\n});"}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"ثم في "},{"type":"text","marks":[{"type":"code"}],"text":"nuxt.config.ts"},{"type":"text","text":"، اضبط إعدادات Vuetify على النحو التالي:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"vuetify: {\n vuetifyOptions: './vuetify.config.ts',\n},"}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"عند معاينة التطبيق، ستظهر النصوص والواجهة في الاتجاه الصحيح (من اليمين إلى اليسار) بفضل الإعدادات الجديدة."}]},{"type":"heading","attrs":{"textAlign":"right","dir":"rtl","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"الخطوط"}]},{"type":"paragraph","attrs":{"textAlign":"right","dir":"rtl"},"content":[{"type":"text","text":"لأجل تصميم واجهة متميزة ومتناسقة، يلعب اختيار الخطوط دورًا أساسيًا في تحسين تجربة المستخدم وإضافة لمسة جمالية تعكس هوية التطبيق. "}]},{"type":"image","attrs":{"src":"https://ramy-images.fra1.cdn.digitaloceanspaces.com/67337ca24e9c5b5b41766fc7.webp","alt":null,"title":null}},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"في التطبيقات التي تدعم اللغة العربية، يجب اختيار خطوط تدعم الأحرف العربية بشكل مثالي وتتيح عرضها بوضوح واتجاه صحيح، مما يساعد في تحسين تجربة المستخدم وضمان تفاعله مع التطبيق بسلاسة وراحة."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"بالنسبة للعناوين، أفضّل استخدام الخطوط Noto Kufi Arabic أو Cairo لتميزها بالأناقة والوضوح. أما للفقرات، فإنني أرى أن Noto Naskh Arabic هو الأنسب لإضفاء سلاسة على النصوص الطويلة ودعم القراءة المتواصلة. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"هذه الخطوط متوفرة بشكل مجاني ضمن "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://fonts.google.com","target":"_blank","rel":"noopener noreferrer nofollow","class":null}}],"text":"خطوط جوجل"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"لاستخدام الخطوط السابقة فقط اكتب الأمر التالي"}]},{"type":"codeBlock","attrs":{"language":"bash"},"content":[{"type":"text","text":"npx nuxi@latest module add fonts"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يستخدم الأمر السابق لتثبيت موديول nuxt/fonts في التطبيق، مما يُتيح لك دمج إدارة الخطوط بسهولة."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يقدم "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://fonts.nuxt.com","target":"_blank","rel":"noopener noreferrer nofollow","class":null}},{"type":"bold"}],"text":"موديول nuxt/fonts"},{"type":"text","text":" تجربة سلسة بدون إعدادات مسبقة، حيث يدعم مزودات خطوط جاهزة مثل Google و Adobe، مع إمكانية إضافة مزودات مخصصة للمزيد من التحكم."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يدعم أيضًا تنزيل الخطوط للاستخدام المحلي (local)، وتخزين مؤقت للخطوط أثناء بناء وتطوير التطبيق، مما يسهم في تسريع عملية التحميل وتعزيز الكفاءة."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يمكنك تغيير الخط في التطبيق لجميع النصوص في الصفحة، قم بتعديل ملف "},{"type":"text","marks":[{"type":"code"}],"text":"app.vue"},{"type":"text","text":" واضف الكود التالي في نهاية الملف"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":""}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"لاحظ تغيير الخط لكلمة \""},{"type":"text","marks":[{"type":"italic"}],"text":"تطبيق المنتجات"},{"type":"text","text":"\" في الشريط العلوي، إلى الخط Cairo."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"قد تحتاج عند هذه الخطوة، عمل تشغيل جديد للتطبيق من الأمر"}]},{"type":"codeBlock","attrs":{"language":"bash"},"content":[{"type":"text","text":"npm run dev"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"وبشكل عام، يفضل دائما إعادة تشغيل التطبيق عند اضافة موديول أو حزمة (Package) جديدة."}]},{"type":"heading","attrs":{"textAlign":"right","dir":"rtl","level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"اختيار الألوان"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"عند تصميم واجهات التطبيقات، تلعب الألوان دورًا محوريًا في تعزيز تجربة المستخدم وإضفاء الطابع المناسب على التصميم."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يعتبر Vuetify إطار عمل متكامل يقدم للمطورين مكتبة واسعة من المكونات والأدوات المرنة لأجل تصميم واجهات مميزة وقابلة للتخصيص، كما يتيح إدارة الألوان بشكل سهل وفعال، مما يسمح بتحديد ألوان رئيسية وثانوية تتماشى مع هوية التطبيق وتعكس طابعه."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"ما يميز Vuetify أنه مبني على نظام Google Material Design، حيث يستند إلى مكتبة ألوان معتمدة تضمن تناسق الألوان وسهولة الاستخدام، مما يجعل تجربة التصميم أكثر تناغمًا واستجابة لمعايير التصميم الحديث."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يمكنك معرفة المزيد عن Google Material Design من خلال مقالي السابق ("},{"type":"text","marks":[{"type":"link","attrs":{"href":"/articles/6604b21ee77dd47e3816678c","target":"_self","rel":"noopener noreferrer nofollow","class":null}}],"text":"التصميم المادي … المزايا والعيوب"},{"type":"text","text":")"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"لتغيير اللون الرئيسي في التطبيق قم بتعديل ملف "},{"type":"text","marks":[{"type":"code"}],"text":"vuetify.config.ts"},{"type":"text","text":" السابق ليصبح بالشكل التالي"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { defineVuetifyConfiguration } from 'vuetify-nuxt-module/custom-configuration';\n\nexport default defineVuetifyConfiguration({\n theme: {\n themes: {\n light: {\n colors: {\n primary: '#1A237E', // primary color\n },\n },\n },\n },\n locale: {\n locale: 'ar',\n fallback: 'en',\n },\n localeMessages: ['ar', 'en'],\n});"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"ثم قم بتعديل كود الشريط العلوي في ملف "},{"type":"text","marks":[{"type":"code"}],"text":"app.vue"},{"type":"text","text":" ليصبح بالشكل التالي"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":" \n تطبيق المنتجات\n \n"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"لاحظ إضافة "},{"type":"text","marks":[{"type":"code"}],"text":"color"},{"type":"text","text":" بقيمة "},{"type":"text","marks":[{"type":"code"}],"text":"primary"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"يفترض أن يتحول الشريط العلوي إلى اللون الأزرق في التطبيق."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"وهكذا نكون قد غطينا الأساسيات التي ستساعدك في إنشاء تطبيق احترافي يدعم اللغة العربية، مع استخدام خطوط مميزة وألوان تتماشى مع هوية التطبيق. "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"في المقالات القادمة - بإذن الله، نستكشف المزيد حول تخصيص المكونات واستخدام مكتبة Vuetify لإنشاء واجهات تفاعلية وأكثر احترافية، مما يجعل رحلتك في بناء التطبيقات ممتعة وغنية بالتفاصيل العملية."}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"تابع السلسلة لاستكمال رحلتك نحو بناء تطبيق متكامل من الصفر!"}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"بإمكانك الوصول إلى الكود الكامل للتطبيق على GitHub عبر "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/ramyahm2010/products-app","target":"_blank","rel":"noopener noreferrer nofollow","class":null}}],"text":"رابط المشروع هنا"},{"type":"text","text":". "}]},{"type":"paragraph","attrs":{"textAlign":"justify","dir":"rtl"},"content":[{"type":"text","text":"وفقنى الله وإياك إلى ما يحبه ويرضاه ،،"}]}]}

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