Najah Alsaker

التجريد ( Abstraction ) هو أسلوب مهم جداً يستخدم لتسهيل كتابة الأوامر على المبرمجين, فهو يجعلك قادراً على تنفيذ ما تريد دون الحاجة إلى معرفة كافة التفاصيل التي تم فيها تنفيذ ذلك. والان بعد ان قمنا بتعريفه ما هو دعنا نتحدث عن شروطه : الكلاس الذي يحتوي على دوال مجردة لا يمكن إنشاء كائنات منه لأنه في حال استدعاء الدالة لم يتم تعريفها منه فإن هذا سيسبب مشكلة. الكلاس الذي يرث دوال مجردة و لا يقوم بإعادة كتابة محتواها أيضاً لا يمكن إنشاء كائنات منه لذات السبب. الدوال الثابتة التي نوعها static لا يمكن تعريفها كدوال مجردة لأنها أصلاً تستخدم من الكلاس الأساسي. أسلوب التجريد يتطلب استخدام الكلمتين virtual و override اللتين تم إضافتهما ابتداءاً من الإصدار C++ 11 لهذا تأكد أنك تستخدم هذا الإصدار أو الإصدارات الأحدث حتى تستطيع تطبيقه. دعنا الان نأخد مثال عن طريقة عمله : #include <iostream> using namespace std; // func يحتوي على دالة مجردة إسمها Base هنا قمنا بتعريف كلاس إسمه class Base { public: virtual void func() = 0; }; // func و فيه قمنا بتعريف الدالة المجردة Base يرث من الكلاس Derived هنا قمنا بتعريف محتوى الكلاس class Derived : public Base { public: void func() override { cout << "Derived class overridden behaviour \n"; } }; // main() هنا قمنا بتعريف الدالة int main() { // d إسمه Derived هنا قمنا بإنشاء كائن من الكلاس Derived d; // Derived و التي تم تعريفها في الكلاس d من الكائن func() هنا قمنا باستدعاء الدالة d.func(); return 0; } في هذا المثال قمنا بتعريف كلاس إسمه Base يحتوي على دالة مجردة إسمها func. بعدها قمنا بتعريف كلاس إسمه Derived يرث من الكلاس Base و قمنا فيه بإعادة تعريف الدالة func. في الأخير قمنا بإنشاء كائن من الكلاس Derived و من ثم استدعاء الدالة func() الموجودة فيه. بعد تطبيق الكود وتشغيله ستحصل على النتيجة التالية : ساعيد لك نفس المثال السابق و لكننا سنحاول إنشاء كائن من الكلاس الأب الذي يحتوي على الدالة المجردة لتنبيهك من الخطأ الذي قد يظهر لك في حال فعلت ذلك. انظر هنا قمت بتعديل هذان السطران من الكود Derived d; d.func(); ليصبحو هكذا Base b; b.func(); وهذا هو الكود النهائي بعد التعديلات #include <iostream> using namespace std; // func يحتوي على دالة مجردة إسمها Base هنا قمنا بتعريف كلاس إسمه class Base { public: virtual void func() = 0; }; // func و فيه قمنا بتعريف الدالة المجردة Base يرث من الكلاس Derived هنا قمنا بتعريف محتوى الكلاس class Derived : public Base { public: void func() override { cout << "Derived class overridden behaviour \n"; } }; // main() هنا قمنا بتعريف الدالة int main() { // b إسمه Base هنا قمنا بإنشاء كائن من الكلاس Base b; // هذا السطر الذي قمت بتعديلها // Base و التي تم تعريفها في الكلاس b من الكائن func() هنا قمنا باستدعاء الدالة b.func(); // وهذا السطر ايضا return 0; } سنحصل على النتيجة التالية عند التشغيل. error: cannot declare variable 'b' to be of abstract type 'Base' because the following virtual functions are pure within 'Base': 'virtual void Base::func()' لاحظ أن الخطأ فعلياً حدث بسبب هذه السطر Base b; حيث أن المترجم قال بأنه لا يمكن إنشاء كائن من الكلاس Base لأنه يحتوي على دالة مجردة ( Pure Virtual Function ) ثم كتب لنا إسم الدالة المجردة أيضاً. ارجو ان يكون تم توضيح الفكرة بالتفصيل بالتوفيق لك

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

في البداية دعني اشرح لك ماهي خوارزميات البحث في javaScript : تُستخدم خوارزميات البحث لاسترداد بعض المعلومات المخزنة في بنية البيانات، على سبيل المثال، يمكننا البحث في مصفوفة بنية البيانات عن القيمة (8) بعض المعلومات، وعادةً ستعرض خوارزمية البحث موضع القيمة التي تم العثور عليها، أو إذا لم يتم العثور عليها، فستعيد (-1)، فيما يلي أهم خوارزميات البحث: .البحث الخطي Linear Search : البحث الخطي هو خوارزمية بحث شائعة جدًا؛ يتم تنفيذها باستخدام طرق (JavaScript) المضمنة في (() indexOf()، includes، و()find، و() findIndex)، كما يعد البحث الخطي أيضًا مباشرًا جدًا وسهل التنفيذ، حيث أنه ما عليك سوى إجراء حلقة حول كل عنصر في المصفوفة والتوقف إذا كان هذا العنصر يساوي القيمة المستهدفة، ثم قم بإرجاع فهرس هذا العنصر. البحث الثنائي Binary Search : يمكن استخدام البحث الثنائي للبحث عن القيم في مصفوفات (SORTED) فقط، مثل [1 ، 2 ، 3 ، 6 ، 9]، ومن الأفضل أداء البحث الخطي عن أي شيء آخر غير المصفوفات الصغيرة أقل من (10) عناصر، حيث يكون أكثر أداءً من البحث الخطي عندما تكون المصفوفة التي تم فرزها كبيرة، وتحدث أفضل حالة تعقيد للبحث الثنائي عندما تكون القيمة التي نبحث عنها في منتصف المصفوفة، ستكون هناك حاجة إلى مقارنة واحدة فقط، بغض النظر عن حجم المصفوفة، لذلك في أحسن الأحوال يتم تشغيل (Binary Search) في وقت ثابت يعني (O (1)). ويمكنك التعمق في خوارزميات البحث اكثر عن طريق قراءة هذه المقالات وايضا يمكنك التسجيل في دورة javaScript الخاصة باكادمية حسوب لفهم كل ما يتعلق بهذه اللغة https://academy.hsoub.com/learn/javascript-application-development/

الكود يبدو صحيحًا، ولكن يمكن أن يكون هناك سبب آخر لظهور الخطأ يُمكنك محاولة تعديل errorHandler للتحقق من ذلك باضافة هذا السطر للكود : if (res.headersSent) { return next(err); } وهذا السطر للتحقق من عدم ارسال ال headers مرتين ومنع حدوث الخطأ التي اشرت لك به حيث يقوم ب التأكد اذا تم بالفعل إرسال headers، وتجاهل الاستجابة والمرور إلى الوسيط التالي سيصبح الكود كالتالي : const notFound = (req, res, next) => { const error = new Error(`Not Found - ${req.originalUrl}`); res.status(404); next(error); }; const errorHandler = (err, req, res, next) => { let statusCode = res.statusCode === 200 ? 500 : res.statusCode; let message = err.message; //قمت باضافته هنا if (res.headersSent) { return next(err); } // NOTE: checking for invalid ObjectId moved to it's own middleware // See README for further info. res.status(statusCode).json({ message: message, stack: process.env.NODE_ENV === "production" ? null : err.stack, }); }; export { notFound, errorHandler }; ارجو اخباري بالنتيجة وان لم تنجح الرجاء ارفاق ملفات المشروع لمساعدتك بشكل افضل وبالتوفيق لك

نعم، يمكنك صناعة بوت داخل تطبيق واتساب باستخدام Python , وهذه بعض المكتبات : Twilio: توفر واجهة برمجية لإرسال واستقبال الرسائل عبر واتساب بشكل أوتوماتيكي، وهي سهلة الاستخدام. Selenium: تستخدم للتحكم في متصفح الويب بشكل برمجي، يمكن استخدامها لفتح واتساب وإرسال الرسائل تلقائيًا، لكنها تتطلب فهمًا جيدًا لعمليات التحكم بالمتصفح. Pywhatkit: تُستخدم لإرسال رسائل واتساب من Python، ولكنها لا توفر واجهة للاستجابة التلقائية للرسائل. Yowsup: مكتبة تعمل على بروتوكول واتساب وتسمح بإرسال واستقبال الرسائل، لكنها تتطلب بعض الإعدادات المعقدة. Chat-API: توفر واجهة برمجية بسيطة لإرسال واستقبال الرسائل عبر واتساب، وتقدم خطط مجانية وباقات مدفوعة. Wati : توفر واجهة برمجية لبناء بوتات على واتساب بشكل مباشر، وتقدم ميزات متقدمة مثل الاستجابة التلقائية والتحكم بالرسائل. اما بالنسبة للقسم الثاني من سؤالك هل تقصد API Key ؟ ان كان كذلك فحتى الآن، ليس هناك معلومات مؤكدة تفيد بأن شركة Meta توفر API Key لتحكم بالبوتات على واتساب. ولكن هناك شيء يدعى WhatsApp Business API , يمكنك الحصول عليه من خلال انشاء حساب على Twilio ويمكنك اتباع الخطوات التالية لتحقيق ذلك https://www.pragnakalp.com/create-whatsapp-bot-with-twilio-using-python-tutorial-with-examples/

مالفرق بين رفع مع موقعي عل github عندما تقوم برفع موقعك على GitHub، فإنك تستخدم GitHub Pages أو مستودع GitHub لعرض موقعك على الويب. يمكن أن يكون هذا مفيدًا لتطوير الموقع ومشاركته مع الآخرين، ولكنه ليس استضافة موقع كاملة. بالاضافة الى ان استضافة ال github تدعم فقط ملفات ال frontend ولا يمكن رفع ملفات ال backend عليها اي انه لا يحتوي على Server-side Backend اختيار استضافه ووضع دومين ورفعه علي الانترنت عندما تختار استضافة لموقعك، فإنك تستأجر مساحة على خادم الويب لعرض موقعك على الإنترنت. بالإضافة إلى ذلك، يمكنك شراء دومين (عنوان الويب الخاص بك مثل www.example.com) وربطه بموقعك.وبالتالي يمكنك رفع موقعك كاملا ان كان به ملفات backend او frontend حيث انه حين يطلب مني احدهم موقع لعمل SEO هل يمكنني اعطاءه لنك live لموقع عل github! بالنسبة لسؤال SEO، يمكنك توفير رابط live لموقعك على GitHub ان كان فقط الغرض منه عرض الواجهة الامامية فقط وتم تصميمه بتقنية ال frontend . اما ان كان مشروعك كبير وبه front و back ايضا فمن المفضل استخدام استضافة ودومين حقيقيين كما يمكنك مراجعة الروابط التالية لمعرفة طريقة رفع الملفات بالطريقتين

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

وهذا هو الكود بعد ان قمت بعمل التحسينات عليه قمت بعمل الtable واحد فقط داخل عنصر ال form وكل ما احتجت الى النزول الى سطر جديد داخل الجدول وضعت العنصر tr عوضا عن اضافة table مرة اخرى كما فعلت انت اقصد هذا الكود <table> <label for="description">description</label> </table> <table> <textarea name="description" id="description" cols="30" rows="10"></textarea> </table> <table> <label for="agree">Agree</label> </table> <table> <input type="checkbox" id="agree" name="agree"> <label for="agree">I agree to terms and conditions</label> </table> <table><input type="submit" value="Reistar"> </table> <td><input type="button" value="clear"> </td> قمت بتعديله ليصبح هكذا <tr> <td> <label for="description">description</label> </td> <td> <textarea name="description" id="description" cols="30" rows="10"></textarea> </td> </tr> <tr> <td> <label for="agree">Agree</label> </td> <td> <input type="checkbox" id="agree" name="agree"> <label for="agree">I agree to terms and conditions</label> </td> </tr> <tr> <td> <input type="submit" value="Register"> </td> <td> <input type="button" value="Clear"> </td> </tr> ارجو انه تم توضيح الفكرة لديك وهذا هو الكود الجديد المعدل ارجو منك مقارنته بالكود السابق الخاص بك لتفهم طريقة سير الامور اكثر <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>فورم تسجيل</h1> <form> <table> <tr> <td> <label for="username">username</label> </td> <td> <input type="text" id="username" name="username"><br> </td> </tr> <tr> <td> <label for="pwd">password</label> </td> <td><input type="password" id="pwd" name="pwd"></td> </tr> <tr> <td> <label>Register plan</label> </td> <td> <div> <input type="radio" id="starter" name="plan" value="starter"> <label for="starter">starter</label> </div> <div> <input type="radio" id="business" name="plan" value="business"> <label for="business">Business</label> </div> <div> <input type="radio" id="premium" name="plan" value="premium"> <label for="premium">premium</label> </div> </td> </tr> <tr> <td> <label for="description">description</label> </td> <td> <textarea name="description" id="description" cols="30" rows="10"></textarea> </td> </tr> <tr> <td> <label for="agree">Agree</label> </td> <td> <input type="checkbox" id="agree" name="agree"> <label for="agree">I agree to terms and conditions</label> </td> </tr> <tr> <td> <input type="submit" value="Register"> </td> <td> <input type="button" value="Clear"> </td> </tr> </table> </form> </body> </html> بالتوفيق لك

عندما نستخدم النوع radio يجب ان تكون الخاصية name تحمل ذات الاسم حتى يتم اختيار خيار واحد فقط وانت هنا لديك خطأ في طريقة كتابة الاسماء <div> <input type="radio" id="starter" name="plan" value="starter"> <label for="starter">starter</label> </div> <div> <!-- plan المفروض ان تكون --> <!--palan وليس--> <input type="radio" id="business" name="palan" value="business"> <label for="business">Business</label> </div> <div> <!--وهنا ايضا ذات الخطأ--> <input type="radio" id="premium" name="palan" value="premium"> <label for="premium">premium</label> </div> قم بتعديله ليصبح الكود كالتالي : <div> <input type="radio" id="starter" name="plan" value="starter"> <label for="starter">starter</label> </div> <div> <input type="radio" id="business" name="plan" value="business"> <label for="business">Business</label> </div> <div> <input type="radio" id="premium" name="plan" value="premium"> <label for="premium">premium</label> </div> الأن سيعمل بشكل صحيح ان العنصر <table > يقوم بالنزول الى سطر جديد ثم يبدا بعرض عناصره العنصر tr (table row) : هو معناها سطر الجدول اي عند كل مرة نكتب tr ينزل الى سطر جديد لذلك اختلطت في ما بينهما اما هما عنصران مختلفان تمام حتى ولو ادو اي نفس النتيجة بحيث ان ال tr هو عنصر من عناصر الجدول table دعني اشرح لك كيفية تركيبة الجدول بالتفصيل <table> <tr> <!--السطر الاول الخاص بالجدول--> <td>العنصر الاول من السطر الاول</td> <td>العنصر الثاني من السطر الاول</td> <td>العنصر الثالث من السطر الاول</td> </tr> <tr><!--السطر الثاني الخاص بالجدول--> <td>العنصر الاول من السطر الثاني</td> <td>العنصر الثاني من السطر الثاني</td> <td>العنصر الثالث من السطر الثالث </td> </tr> </table> <table> وهو وسم الجدول الاساسي <tr> تعني سطر جديد للجدول <td> تعني table date اي البيانات المراد ادخالها داخل الجدول وهذه الصورة توضوح لك طريقة عمل الكود السابق بالتفصيل لذلك قم باستبدال العناصر بالترتيب الصحيح الذي اعطيتك اياه

الدومين لا علاقة له بالاستضافة يجب عليك في البداية فهم بعض المصطلحات الاساسية ثم القيام برفع المشروع الدومين (Domain) : هو العنوان الذي يستخدمه الزوار للوصول إلى موقعك على الإنترنت. مثل www.example.com الاستضافة (Hosting) : وهي خدمة توفر المكان الذي تقوم به برفع ملفات موقعك وحفظها به لجعلها متاحة على الانترنت , اي يمكننا القول بأن الاستضافة في مساحة التخرين الخاصة بموقعك السيرفر (Server) : هو باختصار جهاز صلة الوصل بين العميل والاستضافة اي يقوم باستقبال طلب العميل ومعالجته ثم احضار الملفات المناسبة من الاستضافة مثلا ( عند طلبك لصفحة معينة عبر متصفح الانترنت فأن السيرفر يقوم بمعالجة هذا الطلب وجلب البيانات التي طلبتها من قاعدة البيانات المخزنة على الاستضافة الخاصة بك وعرضها لك على المتصفح ) اي انه يجب عليك شراء دومين لاسم موقعك وايضا استضافة لتخزين بياناتك اما بالنسبة للسيرفر فهو خدمة مزودة من الاستضافة اي انه لا داع لشراءه والان بعد ان اصحبت على دراية وفهم شامل للمصطلحات الاساسية دعني اشرح لك الطريقة : حجز اسم النطاق (Domain Name Registration): اختر اسم نطاق فريد ومناسب لموقعك، مثل example.com، وقم بشرائه من موقع موثوق. احصل على خدمة استضافة (Web Hosting): ابحث عن خدمة استضافة توفر ميزات تناسب متطلبات موقعك، مثل السرعة و التخرين والأمان ودعم العملاء. و هذه قائمة بافضل المواقع : bluehost web.com hostgator dreamhost اختبار الموقع: تأكد من اختبار موقعك على مختلف المتصفحات والأجهزة لضمان عمله بشكل صحيح. تحسين محركات البحث (SEO): قم بتحسين موقعك ليظهر في نتائج محركات البحث بشكل جيد، عن طريق استخدام الكلمات الرئيسية المناسبة وبناء روابط خارجية. استخدام شهادة SSL: قم بتثبيت شهادة SSL على موقعك لتشفير الاتصالات وتوفير أمان إضافي للمستخدمين. نشر الموقع: بعد اكتمال تطوير الموقع واختباره، قم برفعه إلى خدمة الاستضافة الخاصة بك باستخدام FTP أو لوحة التحكم الخاصة بالاستضافة. بعد مراعات هذه النقاط بالتفصيل الان يمكنك الدخول الى احدى هذه المقالات وتطبيق الخطوات العملية لرفع الموقع :

كما ذكر لك صديقنا ان هناك مشروع للتخرج , اي يطلب منك عمل مشروع ومن ثم ارساله للاكاديمية ليتم مراجعته وان كان هنالك اشياء غير كاملة او بحاجة لبعض الاضافات فأن الاكاديمية ستعاود التواصل بك مرة اخرى لاخبارك بالتعديلات الواجب عليك القيام بها او اماكن القصور الموجودة لديك والمطلوب منك مراجعتها وعند الانتهاء من كل شيء يتم مراجعة المشروع وان كان يستوفي الشروط يتم تسليمك الشهادة ولكن قبل الامتحان العملي هناك امتحان بسيط نظري مباشر يتم به مناقشة مدى فهمك للاساسيات وهو غير صعب اطلاقا ان كنت متمكن ولديك فهم كاف للدورة التي قمت بدراستها لذلك لا داع للقلق و يمكنك الاطلاع على طريقة سير الامتحانات من هنا https://support.academy.hsoub.com/exams

كما ذكرت لك سابقا انهم يساعدون في تحسين جودة العمل ويمكنك العمل بدونهم لا مشكلة ان كان الموقع بسيط الامر يرجع اليك

لديك خطا بسيط في كتابة كلمة false وكلمة onsubmit هذه الشيفرة المعدلة document.links[0].onmouseenter = function (event) { console.log(event); event.preventDefault(); }; document.forms[0].onsubmit = function (e){ // onsubmitb كانت let userValid = false; // كانت fales let userAge = false; if (userValid == false || userAge == false){ e.preventDefault(); } }

يمكننا استخدام sass لوحدها دون الحاجة لهذه التقنيات ولكن دعني اشرح لك لماذا نستخدمهم معها وما هي اهميتهم القيام بتحويل ملفات Sass إلى CSS. NPM هو مدير حزم يسمح لك بتثبيت وإدارة حزم ال Sass المستخدمة في مشروعك، وأي حزم اخرى قد تحتاجها Webpack يقوم باعادة وتجميع ملفاتك بشكل تلقائي عن طريق مراقبة التعديلات واعادة تجميعها , حتى انه يقوم بضغط الملفات وتحسين اداء موقعك بشكل عام، استخدام Node.js، NPM، وWebpack مع Sass يوفر بيئة تطوير قوية وفعالة لإنشاء تطبيقات ويب متقدمة وسريعة الأداء. لذا لا اظن انك بغنى عنهم ان كنت تسعى لعمل تطبيق فعال

تنسيقات ال css غير مهمة كثيرا ان كنت تود العمل ك backend في لغة الجافا سكريبت ولكن ان كنت تود العمل ك full stack فانت بالفعل بحاجة لتعلم مهارات ال css العمل ك back end developer : يكون فقط بلغة البرمجة الخلفية التي تختارها ولا يكون هناك داع للتعمق بالواجهة الامامية والمطلوب منك فقط فهم بسيط لمسار سير العمل بها العمل full stack developer : والذي يعني انك مطور كامل يمكنك القيام بتطوير تطبيقات ويب بشكل كامل ومن الصفر بمفردك ويكثر الطلب على الfull stack deleoper في منصات العمل الحر الان فهمت الفرق بين العمل ك back end و ك full stack وفهمت ما المطلوب منك في كلا الوظيفتين لذلك عليك اختيار الطريق الصحيح ومعرفة المجالات التي عليك تطوير نفسك بها لتصل الى مرادك وهذه بعض المقالات لفهم المقصود اكثر

هذه اللغات تعبر عن الواجهات الامامية لجميع لغات البرمجة , اما بالنسبة ل لغة البايثون فهي لغة برمجة خلفية backend وعند البدأ بتعلمها لا ينبغي عليك احتراف هذه اللغات ولكنه ينبغي عليك ان تكون على معرفة بسيطة واساسية باساسيات هذا اللغات للتتمكن من فهم كيف يسير العمل في الواجهة الامامية والتواصل مع مبرمجين الفرونت اند اذا قمت بالعمل مع شركة او فريق عمل ام ان كنت تسعى للعمل ك full stack developer ف نعم يجب عليك احتراف هذه اللغات بالاضافة لاحترافك لغة البايثون لانه عندها ستعمل وحدك على منصات العمل الحر وستكون بحاجة للخبرة بكلا المجاليين لينتج معك تطبيق مثالي بالتوفيق لك

يمكنك اتباع هذا التعليمات من الرابط التالي

الرجاء ذكر اللغات والتقنيات التي تستخدمها بالموقع الخاص بك لمساعدتك بشكل افضل

مقالات اكاديمية حسوب جميعها باللغة العربية الفصحة ولكن يمكنك ترجمتها من خلال اضافة google translate الى متصفحك وترجمة المقالة للغة التي تريدها عبر اتباع الخطوات التالية : ادخل الى الرابط التالي https://chromewebstore.google.com/detail/ترجمة-google/aapbdbdomjkkjkaonfhkkikfgjllcleb?pli=1 وقم بتنزيل الاضافة ثم قم بالضغط على ترجمة للغة العربية بالصفحة الخاصة بالمقالة هذا اذا كنت تقصد عن مقالات اكاديمية حسوب اما ان كنت تقصد انه لديك موقع يعرض مقالات وتريد ترجمته فالرجاء تحديد اللغات التي تعمل بها لمساعدتك اكثر

يمكن ان يكون ذلك بسبب الانترنت او تعليق من الصفحة قم باعادة تحميل الصفحة والمحاولة مرة اخرى من خلال الضفط على المربع المكتوب بداخله اضف تعليق

هذه قائمة بافضل المكتبات الخاصة بالترجمة Vue I18n يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا Vuex-i18n يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا vue-i18next يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا vue-gettext يمكنك زيارة الموقع الرسمي الخاص بهذا المكتبة من هنا هذه قائمة بافضل المكتبات الخاصة بالترجمة يمكنك زيارة موقع كل منها والتعرف على خصائصها واختيار الانسب بالنسبة لك ول احتياجات موقعك واتباع الخطوات اللازمة لتضمينها وبالنسبة لي افضل واسهل مكتبة هي vue-i18n , ساعلمك كيف تقوم بتضمينها في مشروعك عبر اتباع الخطوات التالية: الخطوة الاولى : بالبداية سنقوم بتثبيت هذا الحزمة عن طريق npm npm install vue-i18n الخطوة الثانية : قم بانشاء ملف main.js وقم بتضمينها بداخله كالتالي : import Vue from 'vue'; import VueI18n from 'vue-i18n'; Vue.use(VueI18n); الخطوة الثالثة : نقوم بتحديد لغة التطبيق واللغة التي نريد العمل عليها كالتالي : export default new VueI18n({ language locale: 'en', //اللغة الافتراضية هنا fallbackLocale: 'ar', // اللغة التي تريد الترجمة اليها messages: { en: { // الترجمات الانحليزية }, ar: { // الترجمات العربية }, }, }); الخطوة الرابعة : اضافة الترجمات عن طريق انشاء مفتاح ل كل قيمة من خلال الكائن messages كالتالي : messages: { en: { greeting: 'Hello!', welcome: 'Welcome to hsoub academy .', }, ar: { greeting: 'مرحبا ', welcome: ' اهلا وسهلا بك في اكاديمية حسوب ', }, }, هذه باختصار طريقة التضمين والترجمة وان كان لديك عدد كبير من الترجمات يمكننا الترجمة في ملفات منفصلة وذلك يجعل تنظيمها وادارتها وطريقة الوصول اليها اسهل بكثير لذا دعني اعطيك هذه الطريقة اولا : قم بانشاء ملفين en.json (للغة العربية ) ar.json ( للغة الانجليزية ) ثم قم باضافة الترجمات التي تريدها بنفس الطريقة المعتادة عن طريق اضافة مفتاح واسناد قيمة له { greeting: 'مرحبا ', welcome: ' اهلا وسهلا بك في اكاديمية حسوب ', } والأن لنقم باستدعاء هذه الملفات داخل الملف الاساسي main.js كالتالي : import en from './locales/en.json' import es from './locales/es.json' واضافتها للكائن messages كالتالي messages: { en, ar } بالتوفيق لك

في البداية ساشرح لك ماهي وظيفة تطوير واجهات المستخدم التي تستخدم هذه اللغات الثلاثة ان صفحات الويب التي تقوم بزيارتها كل يوم على متصفح الانترنت مبينة بثلاث تقنيات اساسية وهم ال HTML CSS JS ولا يمكننا الاستغناء عن واحدة منهم ان اردنا ان تظهر الصفحة بشكل احترافي , واكبر مثال على ذلك هو صفحة الويب التي تشاهدها الان امامك دعني اعطيكي لمحة سريعة عن كل واحدة منهم HTML تعبر لغة ال html عن الهيكل الاساسي لبناء صفحة الويب ويمكننا اضافة النصوص والصور والفيديوهات وغيرها الكثير الى صفحتنا من خلالها عن طريق اضافة بعض الوسوم التي يمكن للمتصفح قرائتها وتفسيرها CSS تستخدم لغة ال css في انشاء تنسيقات لعناصر ال html , وهي اللغة المسؤولة عن اعطاء تصميمات لصفحات الويب ك الالوان والتنسيقات وجعلها متجاوبة مع كافة انواع الشاشات javascript تعتبر هذه اللغة حياة الموقع حيث انه يمكنك من خلالها اضافة تفاعلات للموقع الخاص بك وجعله غير ثابت او اعتيادي لم ارد ان اطل كثيرا بالشرح لأنني ساترك لك مقالات في اسفل التعليق تشرح لك بالتفصيل عن كل لغة ولكن هذا ما يحب ان تعرفه بشكل اساسي حاليا دعني اعطيك مثال عملي لانشاء عنصر ساعة كالصورة المرفقة كي تتوضح الفكرة لديك اكثر اولا ف لنبدأ بانشاء ملف index.html ونضع هذه الشيفرة بداخله <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Clock</title> <style> /* ثم باضافة شيفرة ال css هنا اسفل هذا التعليق */ </style> </head> <body> <div class="clock"> <span id="hours">00</span>: <span id="minutes">00</span>: <span id="seconds">00</span> </div> <script> // هنا ثم باضافة كود الجافا سكربت اسفل هذا التعليق </script> </body> </html> هنا قمت بكتابة وسوم html للحصول على صف يحتوي على ارقام الساعة لتظهر النتيجة كالأتي ثم دعنا الان ان نضيف شيفرة ال CSS في المكان الذي حددته لك بالكود الماضي .clock { font-family: Arial, sans-serif; font-size: 48px; color: #fff; background-color: #008CBA; width: 250px; padding: 20px; border-radius: 50px; font-weight: bold; border: 5px solid #005566; } باستخدام تنسيقات ال css تمكنت من الحصول على هذا الشكل الذي اريده ولكن لهذا الوقت ان هذا العنصر ثابت لذلك حان الوقت الان لدور الجافا سكريبت لتقوم بجعله يتحرك ويقوم باظهار الساعة الفعلية لذلك دعنا نقوم باضافة الكود التالي في المكان المخصص له الذي قمت بحديده لك سابقا function updateTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); document.getElementById('hours').textContent = hours; document.getElementById('minutes').textContent = minutes; document.getElementById('seconds').textContent = seconds; } setInterval(updateTime, 1000); updateTime(); الأن ستظهر النتيجة كالتالي مثل ما نريدها تماما اظن انك اصبحت الان على دراية كاملة بطريقة عمل كل لغة ولماذا يجب علينا استخدام الثلاثة في نفس الوقت , بامكانك تطبيق المثال العملي الذي قمت بأعطائه لك اعلم ان هذه الاكواد صعبة الفهم حاليا بالنسبة لك لكن لا مشكلة ف انا اعطيتك اياها لترى الفرق فقط , ولتطوير نفسك في هذا المجال اكثر يمكنك التسجل في دورة تطوير واجهات المستخدم التابعة لأكاديمية حسوب من هنا حيث ستتمكن من خلالها فهم هذه الاكواد وحتى انشاءها بنفسك وهذه بعض المقالات التي تشرح لك هذه اللغات الثلاث بالتفصيل HTML CSS Javascript https://wiki.hsoub.com/JavaScript بالتوفيق لك

في اغلب لغات البرمجة عندما تقوم باستخدام الحلقات ( ..... for while do/while ) اواستخدام الجمل الشرطية ( .... if else elseif) ف ان التركيبة الصحيحة للكود يجب ان تكون كالاتي : عند استخدام سطر واحد ضمن الحلقات او الشروط ف لا داعي لاستخدام الاقواس المعقوفة { } لانه سيقوم بقراءة شرط الحلقة ثم ينتقل الى او سطر فقط من جسم الحلقة ويعتبره تابع لها اما بالنسبة لباقي السطور فهي تعتبر خارج الحلقة for(الشرط) جسم الحلقة ; عند استخدام اكثر من سطر ضمن جسم الحلقات او الشروط فيجب عليك اضافة الاقواس المعقوفة { } لاخباره انه كل هذا السطور تابعة لهذه الحلقة او هذا الشرط لانه كما قلنا انه يقوم باعتبار السطر الاول فقط تابع للحلقة for(الشرط){ جسم الحلفة ; جسم الحلفة; جسم الحلقة ; } و لا مشكلة ايضا ان وضعت الاقواس المعقوفة { } عند استخدام سطر واحد بالجسم ولكنها اساسية عند استخدام اكثر من شرط

بما انني سورية واعلم عن ماذا تتحدث ف من وجهة نظري ب مجال البرمجة بالتحديد الشهادة الجامعية لا تهم كثيرا ف اكثر ما يهتمون له شركات التوظيف هو الخبرة والاحترافية بالعمل انا لست ضد فكرة الجامعة لانها تكسبك ثقافة في عدة مجالات وتطور من ذاتك ولكن بالنسبة للجامعة الافتراضية السورية بما انها تدرس على الانترنت ف انا افضل دورات اكادمية حسوب حيث انها مخصصة اكثر وتهدف الى تطويرك وتخريجك بشهادة معترفة بالاضافة للمشاريع العملية الموجود بها التي تعزز لك الخبرة وفهم البرمجة اكثر لذلك بدلا من دفع التكاليف الباهظة لتلك الجامعة وبالاخص انها ليس معترفة في كل الدول يمكنك استثمار ذلك في اكادمية حسوب وحضور الكورسات التي تشعر انها تمثلك بالبداية قم بالتسجيل بدورة تطوير واجهات المستخدم لانها البداية الاساسية للبدئ بأي لغة برمجية اخرى ومن خلال تسجيلك في اي من دورات حسوب ف سيتم فتح لك المسار الاول من جميع الدورات المتاحة في الاكادمية وبذلك ستسطيع اخذ فكرة عن جميع لغات البرمجة وكيفة العمل بها ثم الاختيار في ما بينهم لتوسيع معرفتك اكثر وتصبح Full stack developer اي مطور برمجيات شامل تستطيع العمل على تصميم كافة المواقع الاكترونية من الصفر الاحتراف ولا اظن ان هناك اي جامعة تقوم بتطويرك وتجهيزك لسوق العمل كما ستقوم اكادمية حسوب لذلك انصحك بأن لا تقم بتضييع وقتك ونقودك عليها بل ابدأ بتطوير نفسك الان باقل تكلفة ووقت ممكن بالاضافة الى ضمان لاسترداد اسثمارك من الاكادمية وتطويرك وتجهيزك لسوق العمل ملاحظة : هناك عرض في اكادمية حسوب لاخر الشهر الحالي وهو انك تسطيع التسجيل في دورتين بسعر دورة واحدة فقط لذلك كمبتدأ انصح بتسجيل الدورتين التالييتين : علوم الحاسب : لفهم الحاسب وعالم الانترنت اكثر تطوير واجهات المستخدم : وهي المفتاح الاول والاساسي لدخولك عالم البرمجة الواسع والشيق

قبل البدأ بأي مشروع في الحياة من المهم عمل دراسة له وتنظيم خطة مناسبة ليتم سير العمل عليها وذلك يفيدنا بتسهيل العمل وانشاء مشروع احترافي كامل ومنظم وبالنسبة لخطوات تحليل النظم ف باختصار شديد هي كالتالي تحديد الاهداف والمتطلبات : ويتم ذلك من خلال فهم الاساسيات والاهداف التي تتوقع من نظامك تنفيذه وعمل استبيانات للعملاء المتوقعة ليتم فهم المتطلبات التي يحتاجونها جمع المعلومات : في هذه الخطوة يتم تجميع جميع المعلومات حول المشاكل التي تواجه المستخدمين ليتم العمل عليها في الخطوة التالية تحديد المشكلة : بعد ان قمت بجمع المعلومات والاخذ بالاستبيانات ومشاكل العملاء الان عليك تحديد المشكلة الرئيسية ليتم العمل على حلها في الخطوة التالية تقديم الحلول : تقوم بهذه الخطوة بتقديم عدة اقتراحات وحلول لحل المشاكل التي تم تحديدها وكتابتها ليتم تقييمها في الخطوة التالية تقييم الحلول : هذه الخطوة تقوم بدراسة وتقييم الحلول السابقة من حيث الاسهل والافضل وايهما اكثر ملائمة لتحقيق الاهداف التي قمنا بتحديدها اختيار الحلول : بعد ان سجلنا تقييمات لكل الحلول التي اقترحناها الان سنقوم باختيار افضل حل ليتم العمل عليه في الخطوة التالي وضع خطة العمل : الان بعد ان اصبحت المشاكل واضحة امامنا وتم اختيار الحلول المناسبة يمكننا وضع خطة للعمل بناءا على هذا الاساس ومن المهم ايضا ان تضع خطة عمل بديلة ان حصل اية مشاكل او تعرقلات في الخطة الاولى تنفيذ الخطة : بالتأكيد ان وضع الخطة والتحليل ليس كافيا بدون البدء بالتنفيذ لذلك هذه اهم خطوة ان نقوم بتنفيذ خطة العمل التي وضعناها سابقا متابعة سيرة العمل : من المهم جدا متابعة سير العمل بعد تنفيذه حتى التأكد من ان الخطة تسير على ما يرام واكتشاف اية مشاكل او تحديثات قد تحدث لاحقا والسعي الدائم للتطوير حسب الظروف المحيطة والتطور الاكتروني السريع وبالتوفيق لك