Mustafa Suleiman

لا مشكلة في السؤال، للحصول على شهادة إتمام الدورة ستحتاج إلى أن فهم الدورة بشكل وافي، وأيضًا رفع المشاريع التي تم تنفيذها خلال الدورة على GitHub لإرسالها للمراجعة.
وهم:
بناء واجهة مستخدم تشبه موقع YouTube بناء صفحات هبوط وتشمل: صفحة قريبًا الانطلاق صفحة شركة صفحة تطبيق جوال صفحة شخصية تطوير متجر إلكتروني تطوير موقع شركة تطوير لوحة تحكم بناء مواقع ثابتة باستخدم Hugo تطوير موقع أخباري وتستطيع التقدم للإمتحان بمجرد إتمام 4 مسارات أي الحد الأدنى هو عند مسار تطوير متجر إلكتروني، ولكن الأفضل هو إنهاء الدورة بالكامل ولا تستعجل.
وأسلوب الإمتحان هو مكالمة صوتية لمدة 30 دقيقة مع أحد المدربين لسؤالك حول الدورة وعن مدى فهمك والأمور التي نفذتها أنت، وبعد ذلك سيتم تحديد مشروع لك لنفيذه لمدة تتراوح ما بين أسبوع إلى أسبوعين ثم مكالمة صوتية أخرى لمدة 30 دقيقة لمناقشة المشروع.
ولا تقلق تستطيع التقدم للإمتحان مرة أخرى، ولكن حاول الاستعداد جيدًا توفيرًا لوقتك للنجاح من المرة الأولى.
وقد تم شرح ذلك بشكل وافي في النقاشات التالية وبمزيد من التفاصيل وطريقة التقدم للإمتحان:
وبخصوص العمل على مواقع العمل الحر مثل خمسات ومستقل، فطبعًا تستطيع ذلك بمجرد قدرتك على تنفيذ مشروع بمفردك بواسطة HTML,CSS,JS و مكتبة jQuery وأي مشروع يتطلب تلك المهارات تستطيع تقديم عرض عليه.
لكن نصيحتي إليك هي بقراءة النقاش التالي لتفهم طبيعة سوق العمل:
وبخصوص طريقة التعلم الصحيحة أنصحك بقراءة النقاش التالي:
 

في تطبيقات Laravel، توجد طرق مختلفة للتوجيه (Routing) للوصول إلى مسارات محددة في التطبيق، وتستخدم هذه الطرق لتعريف العمليات المتاحة لتطبيقك، مثل إنشاء سجل جديد، تحديث سجل موجود، استرجاع سجل معين، أو حذف سجل. تساعدك هذه الطرق في تنظيم وترتيب واجهة تطبيقك.
فيما يلي شرح لبعض الطرق الشائعة في Laravel والغرض منها ومتى يتم استخدامها:
1- POST
الغرض: تستخدم لإرسال طلب لإنشاء مورد جديد. مثال: إرسال طلب لإنشاء مستخدم جديد في تطبيقك. Route::post('/users', 'UserController@store');  
// UserController.php public function store(Request $request) { // استلام البيانات المطلوبة لإنشاء المستخدم من الطلب $userData = $request->only(['name', 'email', 'password']); // قم بإنشاء المستخدم وحفظه في قاعدة البيانات $user = User::create($userData); // استعادة الاستجابة ببيانات المستخدم المنشأ return response()->json($user, 201); } 2- GET
الغرض: تستخدم لاسترجاع معلومات محددة من المورد. مثال: استرجاع بيانات المستخدم الذي يحمل معرّف معين. Route::get('/users/{id}', 'UserController@show');  
// UserController.php public function show($id) { // البحث عن المستخدم المرتبط بالمعرّف المحدد $user = User::findOrFail($id); // استعادة الاستجابة ببيانات المستخدم return response()->json($user); } 3- PUT/PATCH
الغرض: تستخدم لتحديث مورد محدد. مثال: تحديث بيانات المستخدم الذي يحمل معرّف معين. وتستطيع استخدام PUT لتحديث جميع البيانات في المورد، بينما يمكن استخدام PATCH لتحديث جزء من البيانات فقط.
Route::put('/users/{id}', 'UserController@update'); أو
Route::patch('/users/{id}', 'UserController@update');  
// UserController.php public function update(Request $request, $id) { // استلام البيانات المطلوبة لتحديث المستخدم من الطلب $userData = $request->only(['name', 'email']); // البحث عن المستخدم المرتبط بالمعرّف المحدد $user = User::findOrFail($id); // تحديث بيانات المستخدم $user->update($userData); // استعادة الاستجابة ببيانات المستخدم المحدثة return response()->json($user); } 4- DELETE
الغرض: تستخدم لحذف مورد محدد. مثال: حذف مستخدم معين من قاعدة البيانات. الطرق الأربعة السابقة (POST، GET، PUT/PATCH، DELETE) تُعد الأكثر شيوعًا في RESTful API وتطبيقات الويب، وتستخدم في بناءً عمليات CRUD (Create، Read، Update، Delete) المتعارف عليها في تطوير البرمجيات.
Route::delete('/users/{id}', 'UserController@destroy');  المسار  هو "/users/{id}" للوصول إلى الدالة "destroy" في "UserController"، والتي تتولى حذف المستخدم المرتبط بالمعرف الممرر كمتغير في المسار.
ثم يمكنك تنفيذ هذا المسار عن طريق استخدام طريقة DELETE في نموذج الاستدعاء عبر الشبكة.
مثلاً،  باستخدام إطار العمل Axios في JavaScript، يمكننا استخدام الرمز التالي لحذف المستخدم:
axios.delete('/users/1') .then(response => { console.log('تم حذف المستخدم بنجاح'); }) .catch(error => { console.error('حدث خطأ أثناء حذف المستخدم'); }); وهناك العديد من الطرق الأخرى التي يمكن استخدامها في توجيه Laravel، إليك بعض الأمثلة الإضافية:
OPTIONS
الغرض: يُستخدم لاستعلام الخيارات المدعومة لمسار محدد. مثال: استعلام الخيارات المدعومة لمسار معين للاحتفاظ بمعلومات الخيارات المتاحة. Route::options('/users', 'UserController@options'); يتم تعيين المسار "/users" للوصول إلى الدالة "options" في "UserController" التي تستعرض الخيارات المدعومة لمسار المستخدم.
HEAD
الغرض: يُستخدم لاستعلام رأس الاستجابة فقط دون استرجاع البيانات الفعلية. مثال: التحقق من توفر المورد دون استعادة بياناته. Route::head('/users/{id}', 'UserController@head'); تم وضع المسار "/users/{id}" للوصول إلى الدالة "head" في "UserController" التي تعيد فقط رأس الاستجابة دون استرداد بيانات المستخدم.

في GitHub، تُستخدم تعابير "master" و "main" للإشارة إلى الفرع الافتراضي الرئيسي لمستودع Git.
والفرق بينهما هو فقط في الاسم وليس في الوظيفة أو الأداء.
فقديمًا، كان اسم الفرع الافتراضي في GitHub هو "master"، وهذا الاسم استُخدم للإشارة إلى الفرع الرئيسي الذي يحتوي على النسخة الرئيسية من المشروع. ومع ذلك، بدأت GitHub في اعتماد مصطلح "main" بدلاً من "master" بسبب القلق المتزايد حول المصطلح "master" وتأثيره اللاحق على العنصرية والتمييز العنصري.
لذا، لجعل GitHub أكثر شمولًا ومتعدد الثقافات، قامت GitHub بتغيير اسم الفرع الافتراضي من "master" إلى "main". ومع ذلك، لا يزال بإمكان المستخدمين استخدام اسم "master" إذا كانوا يفضلون ذلك.
أي أن استخدام "master" أو "main" في GitHub يعتبر مسألة تفضيل شخصي، ولا يؤثر ذلك على أداء مستودع Git أو إمكانياته.
ولتحويل اسم الفرع الافتراضي في مستودع Git من "master" إلى "main" أو العكس، يمكنك اتباع الخطوات التالية:
قم بفتح مستودع Git الذي ترغب في تغيير اسم الفرع الافتراضي فيه على GitHub. انتقل إلى صفحة الإعدادات (Settings) للمستودع. ابحث عن قسم يسمى "Branches" أو "Default Branch"، وسيعرض الفرع الافتراضي الحالي (مثل "master" أو "main"). انقر على الزر أو الرابط المرتبط بتغيير الفرع الافتراضي. ستظهر لك قائمة تحتوي على الفروع المتاحة في المستودع، حدد الفرع الجديد الذي ترغب في جعله الافتراضي (مثل "master" أو "main"). قد يُطلب منك تأكيد التغيير وإدخال كلمة مرورك. بعد التأكيد، ستتم عملية تحويل الفرع الافتراضي، وسيتم استخدام الفرع الجديد في المستقبل. يرجى ملاحظة أن تحويل اسم الفرع الافتراضي على GitHub لا يؤثر على تاريخ أو تاريخ الالتزامات الموجودة في المستودع، وهو مجرد تغيير في الاسم المستخدم للفرع الافتراضي.

الأمر يتوقف على الوقت المتاح لك وعلى مستواك في البرمجة والدراية بمفاهيم مجال الحاسوب والويب.
لذلك إذا كان لديك الوقت الكافي، فعليك بتعلم مسار علوم الحاسوب بالكامل، فالأمر يستحق فعلاً وقد تم شرح السبب في النقاشات التالية:
وإذا كان ليس لديك وقتٍ كاف أو تريد الحصول على وظيفة في اقرب وقت، فتستطيع دراسة أساسيات جافاسكريبت فقط مع تنفيذ مشروع للتطبيق على ما تعلمته، وبدون تطبيق ما تعلمته على مشروع فأنت لم تتعلم شيئًا بكل صراحة.
لكن قبل تعلم جافاسكريبت أنت بحاجة إلى تعلم أساسيات HTML وCSS وأنت بحاجة إلى تعلمها بلا شك سواء كنت مطور واجهات أمامية أو خلفية.
لذلك في رأي الإنتقال مباشرًة الباك إند بدون نظرة واسعة حول مفهوم الويب وبناء مشروع في الواجهة الأمامية وتعلم الأساسيات فقط به، سيصعب عملية التعلم كثيرًا عليك.
الأمر الذي يعود بنا إلى ضرورة تعلم الأساسيات وهو ما توفره دورة علوم الحاسوب، أردت فقط توضيح أنك ستسير في دائرة مفرغة في حالة تخطي الأساسيات.
ودائمًا ستعود لتعلمها، فلما لا تبدأ بداية صحيحة والدورة ليست كبيرة، وبعد الإنتهاء منها ستسطيع تعلم PHP ولارافيل بسهولة أكبر حيث أنك ستكون قد تجهزت وعقلك استوعب المفاهيم البرمجية وامتلكت نظرة شاملة عن الويب وأنظمة التشغيل والتفكير المنطقي الصحيح.
فمسارات دورة علوم الحاسب هي:
أساسيات البرمجة أنظمة التشغيل ونظام لينكس قواعد البيانات إلى عالم الويب البرمجة كائنية التوجه الخوارزميات وبنى المعطيات أنماط التصميم أساسيات هندسة البرمجيات ومسارات دورة PHP هي: 
أساسيات إطار العمل Laravel بناء شبكة تواصل اجتماعي تشبه إنستغرام إنشاء RESTful API باستخدام Laravel متجر إلكتروني لبيع الكتب تطوير نظام إدارة محتوى تطبيق لتقييم الأماكن على الخرائط تطبيق مشاركة فيدوهات تطوير موقع إعلانات مبوبة تطوير قوالب ووردبريس تطوير قالب ووردبريس أخباري تطوير متجر إلكتروني في ووردبريس عبر ووكومرس وكما ترى بدخولك مباشرًة إلى دورة PHP أنت تتخطى الكثير من الأساسيات وستحتاج إلى العودة لتعلمها أو ستواجه بطيء في عملية التعلم في حال عدم العودة.
 

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

تتم عملية نقل الصوت والفيديو في تطبيقات المحادثة مثل الواتساب عبر استخدام تقنية Protocol (IP)، وتتضمن هذه التقنية تحويل الصوت والفيديو إلى تنسيق رقمي يمكن نقله عبر الانترنت، وذلك باستخدام تقنيات الضغط والتشفير لتحسين جودة الصوت والفيديو وتأمينه.
وعندما يرسل أحد المستخدمين مقطع فيديو أو صوت عبر التطبيق، يتم تحويله إلى تنسيق رقمي و تقسيمه إلى عدة حزم صغيرة، و إرسال هذه الحزم عبر الانترنت إلى المستلم.
وبعد ذلك، جمع هذه الحزم مرة أخرى وتحويلها إلى مقطع فيديو أو صوت وعرضها أو تشغيلها على جهاز المستلم.
ويستخدم كل من Protocol (IP) و WebRTC في تطبيقات المحادثة ونقل الصوت والفيديو.
 Protocol (IP) كبروتوكول رئيسي لنقل البيانات عبر الإنترنت بشكل عام، ويعتمد على تجزئة البيانات إلى حزم ونقلها من خلال الشبكة. ويستخدم في تطبيقات المحادثة كأساس لنقل الصوت والفيديو من جهاز المرسل إلى جهاز المستقبل.
أما WebRTC فهو تقنية حديثة ومفتوحة المصدر تم تطويرها خصيصاً لنقل الصوت والفيديو والبيانات الحية في الوقت الحقيقي عبر الإنترنت.
ويتضمن WebRTC بروتوكولات مخصصة للصوت والفيديو والشات وتقنيات الضغط والتشفير وغيرها لتحسين جودة الاتصال وتأمينه. ويستخدم WebRTC في العديد من تطبيقات المحادثة عبر الإنترنت والتطبيقات الأخرى التي تحتاج إلى نقل الصوت والفيديو عبر الإنترنت بشكل سريع وآمن.
وتستطيع إنشاء تطبيق محادثة صوتية باستخدام بايثون باستخدام بعض المكتبات المتاحة، مثل:
PyAudio: مكتبة بايثون للعمل مع الصوت، وتتيح لك إمكانية تسجيل وتشغيل الصوت على نظام التشغيل الخاص بك. Socket: مكتبة بايثون للتواصل بين العملاء والخوادم باستخدام TCP/IP. PyQT: مكتبة بايثون لإنشاء واجهات المستخدم الرسومية (GUI)، والتي يمكن استخدامها لإنشاء واجهة المستخدم لتطبيق المحادثة الصوتية. ومن الخطوات التي يمكن اتباعها لإنشاء تطبيق محادثة صوتية باستخدام بايثون:
تسجيل الصوت باستخدام مكتبة PyAudio. إنشاء واجهة المستخدم باستخدام مكتبة PyQT. التواصل بين العميل والخادم باستخدام مكتبة Socket. نقل بيانات الصوت بين العميل والخادم عبر الاتصال الشبكي باستخدام بروتوكولات الإنترنت مثل TCP/IP أو UDP. تشفير وفك تشفير الصوت باستخدام تقنيات التشفير المناسبة. تشغيل الصوت على العميل باستخدام مكتبة PyAudio. إنشاء موقع يتضمن مقاطع فيديو أو صوت
تستطيع استخدام لغة البايثون في إنشاء موقع مثل هذا، بالإضافة إلى العديد من التقنيات الأخرى مثل HTML وCSS وJavaScript و Django framework لإدارة الموقع.
وإليك مثال، أنت قمت بإنشاء مشروع دجانغو، عليك بفعل التالي:
 تحديد نموذج Django الذي سيستخدم لتمثيل الفيديو أو الصوت. يمكن إنشاء نموذج بسيط كالتالي:
from django.db import models class Video(models.Model): title = models.CharField(max_length=200) video_file = models.FileField(upload_to='videos/') حيث تم تحديد نموذج Video الذي يحتوي على اسم الفيديو وملف الفيديو.
بعد تحديد نموذج الفيديو، يجب إنشاء عرض (View) Django الذي يعرض الفيديو. وتستطيع إنشاء عرض بسيط باستخدام الكود التالي:
from django.shortcuts import render def video(request, video_id): video = Video.objects.get(id=video_id) return render(request, 'video.html', {'video': video}) يتم تحديد العرض "video" الذي يستخدم نموذج Video ويسترد الفيديو الذي يحمل نفس معرف video_id.
ويجب إنشاء قالب (Template) Django الذي يستخدم لعرض الفيديو.
حيث تستطيع إنشاء قالب بسيط باستخدام HTML و Django Template Language، و استخدام HTML5 Video Tag لعرض الفيديو.
<html> <head> <title>{{ video.title }}</title> </head> <body> <h1>{{ video.title }}</h1> <video controls> <source src="{{ video.video_file.url }}" type="video/mp4"> </video> </body> </html وهناك العديد من المكتبات التي يمكن استخدامها مع Django لإضافة الوسائط مثل الفيديو والصوت والصور.
بالنسبة للفيديو والصوت، تستطيع استخدام مكتبات مثل Django-ffmpeg و Django-Video-Encoder لمعالجة وتشفير الوسائط المتحركة.
أيضًا يمكن استخدام مكتبات مثل Pillow و Django-imagekit لمعالجة الصور.
وهناك مكتبات JavaScript مثل Plyr و Video.js و WaveSurfer.js لتشغيل الفيديو والصوت وتحريرهم في صفحات الويب.
 

الطريقة التي تستخدمها لربط عدة collections في Firebase صحيحة وليست بها خطأ، ولكن، قد يصعب إدارة العديد من عمليات الربط لأكثر من 25 مجموعة.
ولتحسين الأداء، تستطيع استخدام دالة الاستعلامات المتعددة (Batched Writes) في Firebase التي تتيح لك إنشاء وتحديث وحذف العديد من المستندات في مجموعة واحدة في نفس الوقت.
وبإمكانك الاطلاع على التفاصيل الكاملة عن Batched Writes في Firebase من هنا: https://firebase.google.com/docs/firestore/manage-data/transactions#batched-writes 
أيضًا عليك بالنظر في إمكانية استخدام الرسائل الفورية (Firebase Cloud Messaging) في Firebase لتحسين الأداء وتقليل العمليات اللازمة للحصول على بيانات جديدة وإرسالها إلى التطبيق الخاص بك.
بالإضافة إلى النظر في تحسين هيكل البيانات الخاص بك في Firebase لتقليل عدد المستندات التي تحتاج إلى الوصول إليها في كل مرة.
مثلاً، دمج بعض المعلومات في مستند واحد بدلاً من إنشاء مستندات منفصلة لكل بيانات.
وإليك بعض الأفكار التي يمكن استخدامها لتحسين الكود الخاص بك:
استخدام الدوال المتعددة للحصول على بيانات متعددة بدلاً من استخدام await Future.wait، وذلك قد يحسن من الأداء ويجعل الكود أكثر وضوحًا وقابلية للصيانة، مثال: استخدام الدالة getBooksSnapshot بدلاً من await booksSnapshotFuture. تستطيع استخدام Stream للحصول على بيانات متعددة من Firebase بطريقة فعالة من حيث الأداء، من خلال إنشاء Stream واحد للحصول على جميع البيانات المطلوبة من Firebase. يمكن هيكلة قاعدة البيانات الخاصة بك بشكل أفضل لتجنب الحاجة إلى الوصول إلى عدة مجموعات للحصول على بيانات متعددة، عن طريق إنشاء مجموعات فرعية أو إضافة بيانات إضافية إلى المستندات الحالية لتجنب الحاجة إلى الوصول إلى مجموعات متعددة للحصول على بيانات متعددة.  

Firebase هي منصة شاملة تحتوي على خدمات عديدة، بما في ذلك قاعدة بيانات Realtime و Cloud Firestore، وتستطيع استخدام أي منهما بناءً على احتياجاتك.
إذا كنت تستخدم Cloud Firestore، فإنه يستخدم نموذج قاعدة بيانات NoSQL مختلف عن نموذج MySQL الذي اعتدت عليه.
حيث يتم تخزين البيانات في مستندات (documents) في مجموعات (collections) بدلاً من الجداول (tables). لكن يمكن الوصول إلى البيانات باستخدام العلاقات والاستعلامات التي تتطلبها تطبيقك.
مثلاً، يمكنك إنشاء مجموعتين، واحدة لـ"الكتب" وأخرى لـ"السنوات"، ثم ربطهما معًا باستخدام مفتاح خارجي، وهذا يمكن القيام به باستخدام المراجع (references) في Firestore.
بخصوص السؤال الثاني
من المناسب تخزين البيانات التي تريد عرضها في القوائم المنسدلة (dropdown lists) في قاعدة البيانات، حتى يمكنك تحديث هذه البيانات وإضافة عناصر جديدة دون الحاجة إلى تحديث تطبيقك.
وتستطيع تخزين هذه البيانات في مجموعة خاصة بها في قاعدة البيانات، أو يمكن استخدام Firebase Realtime Database لتخزينها كما أنه يسمح بتخزين بيانات في شكل JSON.
أي يمكنك تخزين البيانات المختلفة سواء في قاعدة البيانات أو كملفات JSON داخل تطبيقك.
ولكن إذا كانت هذه البيانات تحتوي على معلومات متغيرة بشكل مستمر أو تحتاج إلى تحديثات من الخادم، فقاعدة البيانات هي الخيار الأفضل.

1- لكي تظهر رسم بياني من Plotly.js في output في VSCode، تستطيع استخدام مكتبة "plotly-nodejs" والتي تسمح بإنشاء رسوم بيانية من Plotly.js دون الحاجة إلى فتح المتصفح.
ولتثبيت هذه المكتبة باستخدام npm، اكتب الأمر التالي:
npm install plotly-nodejs ثم يمكنك استخدام الكود التالي كمثال لإنشاء رسم بياني من Plotly.js وطباعته في output في VSCode:
const plotly = require('plotly-nodejs'); const data = [ { x: [1, 2, 3], y: [4, 5, 6], type: 'scatter' } ]; const layout = { title: 'My Plotly Chart' }; plotly.plot(data, layout).then((figure) => { console.log(figure); }).catch((err) => { console.error(err); }); 2- لا يمكن التحكم في جدول Console باستخدام أوامر Console مثل console.table لأنها تتحكم فقط في كيفية طباعة البيانات في Console.
ومع ذلك، تستطيع استخدام مكتبات Node.js مثل "cli-table" لإنشاء جداول مع تحكم كامل في التنسيق والعرض. ولتثبيت هذه المكتبة باستخدام npm، اكتب الأمر التالي:
npm install cli-table وتستطيع استخدام الكود التالي كمثال لإنشاء جدول وطباعته في output في VSCode:
const Table = require('cli-table'); const table = new Table({ head: ['Name', 'Age', 'Gender'], style: { head: ['green'], border: ['white'] } }); table.push( ['John', 30, 'Male'], ['Jane', 25, 'Female'], ['Bob', 45, 'Male'] ); console.log(table.toString());  

تستطيع استخدام حلقتي for بدلاً من ذلك، حيث تقوم الحلقة الداخلية بتخزين قيم h، v، a، والحلقة الخارجية بتخزين قيم phi. بعد ذلك، يمكن رسم الرسم البياني باستخدام المكتبة المناسبة، مثل  Plotly طالما أنك تستخدم JavaScript.
وقد تبدو بعض القيم مكررة لأنك تستخدم خطوة 0.5 في الحلقة الداخلية وبعض القيم تحتوي على مجموعة من الأرقام العشوائية الصغيرة التي يمكن أن تؤدي إلى تقريب القيمة بشكل غير دقيق.
وبالنسبة لعرض القيم كجدول ورسم بياني، تستطيع استخدام المكتبة المذكورة أعلاه أو أي مكتبة أخرى، أو ببساطة إنشاء جدول HTML يعرض القيم بطريقة منظمة وسهلة القراءة، وإنشاء رسم بياني باستخدام المكتبة التي تفضلها.
 

تم التوضيح من قبل عزيزي،  يمكنك دمج البيانات المسترجعة من الجدولين في نفس القائمة باستخدام الدالة addAll() في مكانين مختلفين في الكود.
هناك عدة طرق للقيام بذلك وهذا مثال لكيفية الدمج:
Future<void> _fetchData() async { final FirebaseFirestore firestore = FirebaseFirestore.instance; // Fetch the first query snapshot and extract the value of 'TopicState' final QuerySnapshot topicsSnapshot = await firestore .collection('topics') .where('id', isEqualTo: widget.PostID) .get(); final int topicState = topicsSnapshot.docs.isNotEmpty ? topicsSnapshot.docs.first.get('Id_Sub_Category') : null; final QuerySnapshot subCategorySnapshot = await firestore.collection('Sub_Category').where('idSubCat', isEqualTo: topicState).get(); final List<FullListWomanModel> data = []; if (topicsSnapshot.docs.isNotEmpty) { data.addAll(topicsSnapshot.docs.map((doc) => FullListWomanModel.fromJson(doc.data() as Map<String, dynamic>)).toList()); } if (subCategorySnapshot.docs.isNotEmpty) { // Loop over the documents of the Sub_Category collection and check if the document already exists in the data list to avoid duplication subCategorySnapshot.docs.forEach((doc) { final FullListWomanModel model = FullListWomanModel.fromJson(doc.data() as Map<String, dynamic>); if (!data.contains(model)) { data.add(model); } }); } setState(() { _ListDataDisplay = data; }); } الكود يقوم بإضافة جميع الوثائق التي تم العثور عليها في الجدول الثاني Sub_Category إلى القائمة data، ولكنه يتحقق أيضًا مما إذا كانت الوثيقة موجودة بالفعل في القائمة الرئيسية لتجنب التكرار والحفاظ على وجود عناصر فريدة في القائمة المدمجة النهائية.

بالإمكان ربط كود بايثون مع كود React Native باستخدام Bridge API.
ويستخدم Bridge API لإنشاء واجهات المستخدم والتعامل مع قواعد البيانات والاتصال بخدمات الويب والتحكم في التحليلات والأدوات الأخرى التي تعمل بلغة بايثون.
ويتم تنفيذ Bridge API باستخدام وظيفة "native modules" في React Native و "Python modules" في بايثون. ويجب معرفة أنه يمكن استخدام Bridge API لتوفير القدرة على إعادة استخدام برامج بايثون الموجودة بالفعل وإضافة ميزات جديدة إلى تطبيقات React Native باستخدام لغة بايثون.
مثلاً، تستطيعي استخدام بايثون لإنشاء نماذج التعلم الآلي والتفاعل معها في تطبيق React Native، وذلك من خلال مكتبة TensorFlow المتاحة في بايثون لإنشاء نماذج تعلم الآلة وتدريبها على البيانات.
وبعد ذلك نستخدم Bridge API لربط تطبيق React Native مع تلك النماذج وتوفير واجهة المستخدم اللازمة لتفاعل المستخدمين معها.
مثال بسيط على طريقة الربط بين بايثون وReact Native
في البداية، عليك بإنشاء وحدة بايثون بسيطة تُسمى "calculator.py" وضعي بها الكود التالي:
def add(a, b): return a + b الآن سنقوم بإنشاء Native Module في React Native لاستدعاء هذه الوحدة. يمكنك إنشاء ملف جديد يسمى "CalculatorModule.js" وضعي به التالي:
import { NativeModules } from 'react-native'; const { Calculator } = NativeModules; export default { add: (a, b) => { return Calculator.add(a, b); }, }; وتأكدي من تحديد اسم Native Module كـ "Calculator"، ثم يمكنك استخدام هذا Native Module في كود React Native الخاص بك.
من خلال إنشاء شاشة جديدة تُسمى "CalculatorScreen.js" كالتالي:
import React, { useState } from 'react'; import { View, Text, TextInput, Button } from 'react-native'; import Calculator from './CalculatorModule'; const CalculatorScreen = () => { const [a, setA] = useState(''); const [b, setB] = useState(''); const [result, setResult] = useState(''); const handleAdd = () => { const res = Calculator.add(Number(a), Number(b)); setResult(res.toString()); }; return ( <View> <TextInput value={a} onChangeText={setA} /> <TextInput value={b} onChangeText={setB} /> <Button title="Add" onPress={handleAdd} /> <Text>{result}</Text> </View> ); }; export default CalculatorScreen; وكما ترين يتم استدعاء Native Module "Calculator" واستخدامه في دالة "handleAdd" لجمع الأعداد المدخلة، وعرض نتيجة الجمع في عنصر "Text".
والمثال بسيط لكنه يوضح كيفية استخدام Bridge API لربط كود بايثون مع كود React Native، وبنفس المبدأ تستطيعي تطوير تطبيقات React Native متكاملة مع قواعد البيانات والتحكم في التحليلات والأدوات الأخرى.

من الأفضل تخزين البيانات في صورة Lowercase من البداية في قاعدة البيانات.، ثم البحث عنها لحل لتلك المشكلة، أي سنبحث عن البيانات بعد أن قمنا بتخزينها في صورة حروف صغيرة:
String nameCountryLower = NameContry.toLowerCase(); FirebaseFirestore.instance .collection('my_collection') .where('Country', isEqualTo: nameCountryLower) .get() .then((querySnapshot) { // يمكنك استخدام querySnapshot.docs للوصول إلى النتائج // ... }); أو استخدام أدوات أخرى للبحث في قاعدة البيانات وقد تم ذكرها في الرابط التالي:
https://firebase.google.com/docs/firestore/solutions/search
وهناك حل آخر:
من خلال تحويل الاستعلام البحثي إلى مجموعة من القيم المتغيرة (variations) والتي يتم البحث عنها جميعها في الحقل الذي يراد البحث عنه.
مثا: إذا كان البحث هو "oman" ، فسيتم تحويله إلى مجموعة ["oman"، "OMAN"، "Oman"] والتي تشمل جميع الحالات الممكنة لهذا الاستعلام بغض النظر عن حجم الأحرف.
ثم يتم إجراء استعلام "in" حيث يتم البحث عن جميع هذه القيم المتغيرة في الحقل الذي يراد البحث عنه. يدعم استعلام "in" ما يصل إلى 10 مساواة (==) بين القيم مع عامل التشغيل "OR" اللوجيكي. وبهذا يمكن الاحتفاظ بحقل واحد فقط "name" والبحث فيه باستخدام التغييرات المحتملة عليه.
List<String> variations = ["oman", "OMAN", "Oman"]; // TODO: write a function that converts the query string into this kind of Array QuerySnapshot search = await FirebaseFirestore.instance.collection("users").where("name", whereIn: variations).get(); وهنا يتم استخدام متغير القائمة (List) بدلاً من مصفوفة (Array) وكذلك الاستعلام البحثي whereIn بدلاً من "in"، وبعد ذلك يتم استخدام الدالة get() للحصول على نتائج الاستعلام.

حاول استخدام حلقة foreach() للتكرار على جميع العناصر في مصفوفة الكليات (faculties) وإنشاء قائمة منسدلة (dropdown list) تحتوي على جميع الكليات المتاحة.
و استخدام هذه القائمة المنسدلة للسماح للمستخدمين بتحديد الكلية التي يرغبون في إضافة البيانات الخاصة بهم.
اليك كود يعرض قائمة المنسدلة لجميع الكليات:
{!! Form::open(['route' => 'route_name', 'method' => 'post']) !!} {!! Form::label('Faculty', 'Select a Faculty') !!} {!! Form::select('Faculty_ID', $faculties->pluck('Faculty_Name', 'Faculty_ID')) !!} {!! Form::submit('Submit') !!} {!! Form::close() !!}  يتم فتح نموذج HTML باستخدام {!! Form::open() !!} وتحديد عنوان URL الذي يرسل إليه النموذج باستخدام مفتاح الخاصية 'route'، أيضًا تحديد طريقة الإرسال باستخدام مفتاح الخاصية 'method'.
بعد ذلك، إنشاء تسمية لعنصر الاختيار المنسدل باستخدام {!! Form::label() !!}.
ثم، إنشاء عنصر الاختيار المنسدل باستخدام {!! Form::select() !!}، حيث يتم تمرير قيمة 'Faculty_ID' كاسم لعنصر الاختيار المنسدل ومصفوفة الكليات ($faculties) كقيمة للخيارات المتاحة في عنصر الاختيار المنسدل.
واستخدام دالة pluck() لاستخراج اسم الكلية كنص من مصفوفة الكليات، وكذلك استخراج قيمة Faculty_ID كقيمة للخيارات في عنصر الاختيار المنسدل.
أخيرًا، إنشاء زر Submit باستخدام {!! Form::submit() !!}، وإغلاق النموذج باستخدام {!! Form::close() !!}.

التخصص في مجال الذكاء الاصطناعي أم دراسة البرمجة في كلية حاسبات ومعلومات
كلا المجالين ستحتاج فيهما إلى كتابة الكود، ومجال الذكاء الاصطناعي أشد تعقيدًا، وأيضًا فرص العمل متوفرة في الخارج وليس في أغلب الدول العربية، لذلك إذا كنت مستعد للسفر إلى الخارج فقم بالتخصص في مجال الـ Ai.
حيث أنه مجال واعد وله مستقبل في السنوات القادمة، فأغلب الشركات الآن تتجه إلى استخدام الـ Ai بمختلف أشكاله، وتتسابق في إطلاق الأدوات والمنصات الخاصة بها التي تستخدم الذكاء الاصطناعي.
وإذا كنت تفضل العمل في السوق المحلي أو الدول العربية، فأنصحك بدراسة البرمجة في كلية علوم الحاسب.
أي الأمر يتوقف على ظروفك الشخصية والمادية والوقت المتوفر لك.
فترة الخدمة العسكرية وتأثيرها على الوظيفة 
الأمر شر لابد منه، ولا أنصحك أبدًا بالتهرب من الخدمة العسكرية، قم بتأدية الخدمة لمدة سنة وخلال تلك السنة عليك بدراسة البرمجة والتطبيق في فترة الأجازات إذا استطعت.
وهون عليك الأمر، فالجميع مر بتلك الفترة، وأعرف البعض قد عمل بشركات وهو طالب لكن بمستوى يستحق التوظيف حيث أنه قد كان درس البرمجة لمدة عام أو عامين وقام بمشاريع، لذلك في السنة الثالثة قام بالعمل في شركة.
ثم دخل الجيش وعاد للعمل مرة أخرى بعد الإنتهاء من الخدمة.
أي لا مشكلة في العمل لكونك طالب، لكن يجب توافر المهارات المطلوبة ومعرض أعمال به 3 مشاريع حقيقية على الأقل لتتمكن من الحصول على وظيفة، أو يمكنك العمل على مواقع العمل الحر كمستقل.
لكن بعض الشركات الكبيرة تتطلب أن تكون قد أديت الخدمة وحصلت على الشهادة الجامعية لذلك ليس جميع الشركات توظف طلاب.
تطوير مستواك في البرمجة والحفاظ على العملاء
أولاً، من الصعب الحفاظ على العملاء في حالة تأدية الخدمة العسكرية، إلا إذا وافق العميل بذلك، وأثناء فترة الإجازات يمكنك العمل على المشروع الخاص به.
أي أنك لست حر نفسك أثناء فترة الخدمة العسكرية، لذلك لا تلتزم وتعطي كلمة بنسبة 100%.
أما بالنسبة لتطوير مستواك، فهناك حلان إما القراءة من خلال الكتب في المجال الخاص بك أو اللغات التي اخترتها وتعمل بها، أو مشاهدة دورات وكورسات على الهاتف المحمول أثناء أوقات فراغك في الخدمة إذا تم السماح بالهاتف والأغلب يستطيع أخذ هاتفه معه بشكل ودي.
فإذا كنت في بداية تعلم البرمجة، فهناك الكثير مما يمكن تعلمه، عليك بتحديد مسار Roadmap ورؤية ما الذي تحتاج إلى تعلمه أو زيادة مستواك به.
 

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

حاول تنفيذ الخطوات التالية لتعديل رابط الصورة في بلوجر:
قم برفع الصورة بشكل طبيعي أثناء كتابة المقالة ومن ثم الضغط على "تحرير HTML". البحث عن الرابط الذي يحتوي على "/s1600/" أو "/s220/" أو "/s400/" أو "/s72/" ، حيث تشير هذه الأرقام إلى حجم الصورة المراد عرضها.  تغيير هذه الأرقام وفقًا للحجم الذي تريد استخدامه، على سبيل المثال يمكن استخدام "/s640/" أو "/s1024/" بدلاً من "/s400/" للحصول على صورة بجودة أعلى.  حفظ التغييرات التي قمت بها وإغلاق نافذة "تحرير HTML". وأيضًا تأكد من تغيير عرض الصورة ليصبح original size أو العرض الأصلي للصورة، والأفضل هو تغيير حجم الصورة قبل رفعها لتتناسب مع حجم القالب.
باستطاعتك استخدام أداة https://squoosh.app/editor لتعديل حجم الصور من خلال الضغط على resize وأيضًا ضغم حجم الصور لتحسين سرعة الموقع وبالتالي الـ SEO.

في حالة الدفع باستخدام الدولار فلا يوجد رسوم وهو أمر غير ممكن في الباي بال "المصري"، أما في حالة الدفع بعملة الجنيه وهي عملة الفيزا المصرية الخاصة بك فسيوجد رسوم تحويل 4% ولا أعلم هل سيتم فرض رسوم من قبل الفيزا أيضًا وهي نسبة 10% أم لا،  ولذلك من الأفضل الدفع عن طريق الفيزا مباشرًة إذا أمكن.
وفي حالة تم رفض الفيزا الخاص بك عند الدفع فقم بربطها بباي بال ثم الدفع، حيث أنّ ذلك قد يحدث إذا كانت الفيزا prepaid أي مسبقة الدفع وليس debit أو credit.
وبخصوص تفعيل باي بال المصري فقد تم شرحه في النقاش التالي وذكر اسم الفيزا المناسبة، ويجب التنبيه إلى أنه لا يمكن الشراء مباشرًة من خلال رصيد باي بال "المصري" بل يجب ربطه بفيزا والشراء من خلالها:
 

مشكلتك تتمثل في الطريقة التي تتعامل بها مع حالة focus في حقل الإدخال،  فحاليًا، تستخدم focus كمؤشر لمعرفة ما إذا كان حقل الإدخال يتم التركيز عليه أم لا.
وبالتالي، عندما يتم فقدان التركيز، يتم تحديث الحالة focus بالقيمة false، مما يؤدي إلى إعادة label إلى الأسفل بغض النظر عن ما إذا كانت القيمة غير فارغة أم لا.
بدلاً من ذلك، يمكنك استخدام حالة منفصلة لمعرفة ما إذا كان حقل الإدخال غير فارغٍ. يمكنك تحديث هذه الحالة في حدث onChange لحقل الإدخال وفي حالة كانت القيمة فارغة، فإنه يمكنك تحديث حالة focus إلى القيمة false في حدث onBlur.
وإذا كانت القيمة غير فارغة، فيمكنك ترك حالة focus دون تغيير، مما يسمح بالاحتفاظ بالتسمية في الأعلى.
يمكن تحديث الكود كما يلي:
const [hasValue, setHasValue] = useState(false); const [focus, setFocus] = useState(false); const [idx, setIdx] = useState(null); const handleChange = (e) => { const { value } = e.target; setHasValue(value.length > 0); // ... أي تحديثات أخرى تريد إجراؤها عند تغيير القيمة }; const handleFocus = (id) => { setFocus(true); setIdx(id); }; const handleBlur = () => { if (!hasValue) { setFocus(false); } }; <FormInput key={wrap.id} {...wrap} value={values[wrap.name]} handleChange={handleChange} handleFocus={() => handleFocus(wrap.id)} focus={focus} idx={idx} handleBlur={handleBlur} /> المثال يتجاهل القيم الخاصة بـ values.email المذكورة في السؤال، ويستخدم بدلاً من ذلك القيمة الموجودة في e.target.value. 

هناك العديد من الأدوات التي يمكن استخدامها لاختبار صحة شيفرات HTML و CSS و JavaScript، وهي تشمل:
W3C Validator
أداة مجانية تقوم بفحص صفحة الويب لديك وتحديد أي أخطاء في الشيفرات HTML و CSS. 
JSHint
وهي أداة مجانية تساعد على فحص صحة الشيفرات الخاصة بلغة JavaScript. يمكن الوصول إليها على هذا الرابط:
CSS Lint
أداة مجانية تقوم بفحص صفحة الويب لديك وتحديد أي أخطاء في الشيفرات CSS. 
والأفضل استخدام إضافتي ESLint و Prettier لفحص صحة الشيفرات الخاصة بلغة JavaScript  وتنسيقها بشكل أفضل، وإليك بعض المعلومات حول كل منها:
ESLint: هي أداة مجانية لفحص صحة الشيفرات الخاصة بلغة JavaScript وتحديد أي أخطاء في الشيفرات، ويمكن تخصيص ESLint لتنفيذ مجموعة متنوعة من المعايير والقواعد الخاصة بالشركة أو المشروع، وتستخدم في الغالب في مشاريع الويب. Prettier: هي أداة مجانية تستخدم لتنسيق الشيفرات الخاصة بلغة JavaScript و HTML و CSS وجعلها أسهل للقراءة والصيانة، تم تصميم Prettier لتكون سهلة الاستخدام ومتوافقة مع مختلف المحررات والمشاريع. وهما متوفرتان في متجر الإضافات الخاص بمحرر VSCode.
بالنسبة لإضافة الميديا المناسبة لكود CSS لجعل الموقع مناسب على جميع الشاشات، يمكن استخدام تقنية Responsive Web Design، حيث يتم استخدام  (Media Queries) لتعديل تصميم الموقع وتكييفه مع الأحجام المختلفة للشاشات.
ويجب استخدام أدوات المطورين من جوجل كروم لفحص تجاوب الموقع، حيث يتم استخدام أداة التجاوب لإختبار الموقع الخاص بك كالتالي:

ويمكنك استخدام أدوات مثل Bootstrap و Foundation للمساعدة في تصميم موقع يستجيب للشاشات المختلفة، أو تصميم الموقع من البداية بتقنية Responsive Web Design إذا كنت لا تريد استخدام مكتبة إطار Bootstrap.
 

بالإضافة إلى الخطأ في كتابة الخاصية height،  من الأفضل استخدام max-width في تحديد حجم الصورة في كود CSS بدلاً من استخدام width العادي.
هذا لأن استخدام max-width يعني أن حجم الصورة سيكون محددًا بحيث لا يتجاوز عرض العنصر الأساسي الذي يتم عرض الصورة داخله، ولكن ارتفاع الصورة يمكن أن يتغير تلقائيًا لتحافظ على نسبة الارتفاع إلى العرض الصحيحة.
هذا يساعد على تجنب مشاكل عدم تناسق الحجم في حالة تغيير حجم الشاشة أو تصفح الموقع على أجهزة مختلفة، كما أنه يعمل على تحسين تجربة المستخدم من خلال تحسين تصميم الموقع وسرعة تحميله.
ولا حاجة لكتابة الـ height إلا في حالات محددة، حيث سيتم تحديد تلقائيًا من قبل العرض الذي قمت بتحديده أنت، وإليك مثال:
img { max-width: 50%; } تم تعيين max-width على 50%، وهو يعني أن الصورة ستتمدد أو تنكمش حسب عرض العنصر الأساسي الذي يتم عرض الصورة داخله، ولكنها لن تتجاوز 50% من عرض هذا العنصر.
على سبيل المثال، إذا كان العنصر الأساسي هو div ولديه عرض 1000 بكسل، فإن الصورة ستعرض بعرض 500 بكسل (50% من 1000 بكسل). وإذا كان العنصر الأساسي يتم تحجيمه أو تغيير حجمه بناءً على حجم الشاشة أو الجهاز المستخدم، فإن الصورة ستتكيف مع حجم العنصر الأساسي وستكون في نطاق max-width المحدد.
يجب ملاحظة أن الكود المذكور يحدد فقط max-width ولم يتم تحديد الـ height، وبالتالي، سيتم الحفاظ على نسبة الارتفاع إلى العرض الأصلي للصورة كما ذكرت لك. 

الخطأ يتعلق بشكل الرابط الذي تستخدمه في baseURL. يجب أن يكون الرابط الذي تستخدمه في baseURL مكتوب بشكل صحيح ومتوافق مع بروتوكول HTTPS.
بما أنك تستخدم خدمة MyFatoorah فإن الرابط الصحيح يجب أن يكون كالتالي تبعًا للمستندات الخاصة ببوابة الدفع:
Live API URL Except For Saudi Arabia: https://api.myfatoorah.com Live API URL for Saudi Arabia: https://api-sa.myfatoorah.com فكما تلاحظ هناك API لدولة السعودية وآخر لجميع الدول ماعدا السعودية.
ويمكنك الإطلاع على المستندات الخاصة ببوابة دفع MyFatoorah للمزيد من التفاصيل والشرح، وهو ما أنصحك بفعله دائمًا.

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

يجب توفير محتوى عالي الجودة وموثوق به والتأكد من أنه يتوافق مع معايير Google News Publisher. 
مع القيام بالخطوات التالية:
إنشاء موقع ويب يحتوي على محتوى غني وموثوق به وبشكل منتظم. توفير محتوى فريد ومتنوع يتناول موضوعات مختلفة ولا يختصر على موضوع واحد فقط. الحصول على الكثير من المراجعات والزيارات من مستخدمي الإنترنت المختلفين والمنافسين في مجال نفس مدونتك. التأكد من توافر عنوان RSS لمدونتك الذي يتم إدراجه في محتوى Google News. التسجيل في Google News Publisher Center وتعبئة جميع المعلومات المطلوبة بشكل كامل. بالنسبة لمشكلتك في Reader Revenue Manager، باستطاعتك التحقق من صفحة المساعدة الخاصة بهذه الأداة على Google News ، حيث يتم شرح كيفية إعداد واستخدام الأداة بشكل كامل.
إذا كانت المشكلة لا تزال قائمة، فيمكنك التواصل مع فريق دعم Google News للحصول على مزيد من المساعدة والدعم، أو يمكنك طرح سبب المشكلة هنا لمساعدتك.

أنت تحاول تمرير سلسلة نصية تحتوي على رمز الأيقونة كـ "Icon" للمكون "Card"، وما يجب هو تمرير الأيقونة نفسها كعنصر منفصل داخل المكون.
import { AiFillFacebook, AiFillTwitterSquare, AiFillInstagram, AiFillYoutube } from 'react-icons/ai'; function Card(props) { return ( <div> {props.Icon} </div> ); } function App() { return ( <div> <Card Icon={<AiFillFacebook size={22} />} /> <Card Icon={<AiFillTwitterSquare size={22} />} /> <Card Icon={<AiFillInstagram size={22} />} /> <Card Icon={<AiFillYoutube size={22} />} /> </div> ); }  يتم استيراد الأيقونات من مكتبة "react-icons" ويتم تمريرها كـ argument منفصل داخل المكون "Card" باستخدام الأقواس الزوجية، ثم عرض الأيقونة داخل المكون "Card" باستخدام "props.Icon".