Mustafa Suleiman

الأمر يتوقف على الوقت المتاح لك وعلى مستواك في البرمجة والدراية بمفاهيم مجال الحاسوب والويب.
لذلك إذا كان لديك الوقت الكافي، فعليك بتعلم مسار علوم الحاسوب بالكامل، فالأمر يستحق فعلاً وقد تم شرح السبب في النقاشات التالية:
وإذا كان ليس لديك وقتٍ كاف أو تريد الحصول على وظيفة في اقرب وقت، فتستطيع دراسة أساسيات جافاسكريبت فقط مع تنفيذ مشروع للتطبيق على ما تعلمته، وبدون تطبيق ما تعلمته على مشروع فأنت لم تتعلم شيئًا بكل صراحة.
لكن قبل تعلم جافاسكريبت أنت بحاجة إلى تعلم أساسيات 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".

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

من أسهل وأفضل الاستضافات التي توفر باقات مجانية هي:
https://railway.app
ويمكنك استخدام منفذ الأوامر CLI الخاص بها للتعامل مع الاستضافة.
وأيضًا هناك استضافات أخرى لكن ليس أفضل منها، وأنصحك بقراءة النقاشات التالية:
وبخصوص الدورة فقد تم شرح استضافة Heroku لكونها أفضل استضافة كانت متوفرة، لكن حاليًا لم تعد مجانية وسيتم تحديث الشرح في التحديثات القادمة لاستضافة أخرى.

باستخدام نفس الطريقة: 
على سبيل المثال، إذا كان هناك عنصر script مع src="../js/file1.js"، يمكن تغيير مساره عند الضغط على الزر كما يلي:
button.onclick = function() { const scriptElement = document.querySelector("script[src='../js/file1.js']"); scriptElement.src = "../js/file2.js"; }  الكود سيحدث تغييرًا في مسار العنصر script الذي يحتوي على المسار القديم "../js/file1.js"، وسيتم تغييره إلى المسار الجديد "../js/file2.js".
ويرجى الانتباه إلى أنه إذا كانت هناك وظيفة محددة تعمل بالفعل في الملف القديم، فلن يتم استدعاؤها بعد تغيير مسار العنصر script، لذلك قد تحتاج إلى إعادة تحميل الصفحة لتشغيل الوظيفة المحدثة.
ويمكنك أيضًا استخدام طريقة أحدث وهي باستخدام addEventListener للزر بدلاً من onclick.