Mustafa Suleiman

الأمر ليس علاقة بشهادتك إطلاقًا، بالتأكيد الشهادة لها عامل مؤثر فلك الأفضلية في حال كنت متميز في مجالك ولديك شهادة جامعية به أيضًا. ولكن حاليًا نسبة كبيرة من العاملين في مجال البرمجة لم يتدارسوا بكلية خاصة بالبرمجة مطلقًا، بل هم خريجين جامعات أخرى. والمهم هو الإلتزام بمسار تعليمي جيد لفترة 6 شهور على الأقل وحتى سنة، تبعًا للوقت الذي ستخصصه للتعلم ومدى اجتهادك وصبرك، فالمجال بحاجة إلى صبر وعزيمة بلا شك، وإلا كان الجميع أصبحوا مبرمجين أو متخصصين في الشبكات. لا تضع تركيزك أبدًا على الشهادات، بل اسعى بجد واجتهاد نحو تحصيل المهارات المطلوبة في الوظيفة التي تريد العمل بها، وسيتم قبولك بلا شك، يجب إمتلاك المهارات وأيضًا التطبيق لتكوين معرض أعمال يثبت أنك قادر على تنفيذ المطلوب. عليك بتحديد ما الذي تريده، هل تريد التخصص في مجال الشبكات والـ IT أم تريد التخصص في أحد مجالات البرمجة؟ ثم البحث عن مسار تعليمي سواء مجاني أو مدفوع، ولديك يوتيوب ولديك دورات في أكاديمية حسوب ألقي نظرة عليها إذا كانت ستفيدك. وعامة النقاشات والمقالات التالية ستساعدك كثيرًا، وتم فيها ذكر مسارات برمجية ومنها دورات في أكاديمية حسوب:

إذا فهمت سؤالك بشكل صحيح أنت تريد شرح كل من الـ Relational Schema و ERD (Entity-Relationship Diagram) وتوضيح الاختلافات بينهما، صحيح؟ Relational Schema ببساطة هو تصميم قاعدة البيانات المرتبطة بالنموذج العلائقي (Relational Model)، ويوفر الـ Schema هيكلية لقاعدة البيانات، ويصف الجداول (Tables) الموجودة في القاعدة بما في ذلك العلاقات بين الجداول والعمود (Column) الموجود في كل جدول والقيود (Constraints) المفروضة على البيانات. Entity-Relationship Diagram (ERD) نموذج يستخدم لتصميم وتصور قاعدة البيانات. يستخدم ERD مجموعة من المفاهيم لوصف الكيانات (Entities) والعلاقات (Relationships) بينها والسمات (Attributes) المرتبطة بكل كيان، وتستخدم رموز معينة مثل المستطيلات والخطوط والماسات لتوضيح الكيانات والعلاقات والسمات. الاختلافات بين الـ Relational Schema و ERD: الـ Relational Schema هو تصميم قاعدة البيانات على مستوى متقدم ومفصل، بينما ERD يقدم صورة أعمق وأكثر تجريدًا لقاعدة البيانات. الـ Relational Schema يركز بشكل رئيسي على هيكلية قاعدة البيانات والعلاقات بين الجداول والقيود، بينما ERD يركز على وصف الكيانات والعلاقات بينها والسمات المرتبطة بكل كيان. الـ Relational Schema يوفر مستوى تجريدي أقل، حيث يصف الجداول والعمود بشكل محدد ومفصل، بينما ERD يوفر مستوى تجريدي أعلى يسمح بتصور عام لقاعدة البيانات. الـ Relational Schema غالبًا ما يتم تعبئته في شكل جداول وقوائم، بينما ERD يستخدم رموز رسومية لتوضيح الكيانات والعلاقات بينها. ولاحظ أن الـ Relational Schema و ERD هما أحد أدوات تصميم قاعدة البيانات، يستخدمان معًا غالبًا لتوضيح وتصميم قاعدة البيانات. أمثلة عملية Relational Schema فلنفترض أن لدينا قاعدة بيانات بسيطة لنظام إدارة المبيعات، فتستطيع الإعتماد على Relational Schema لتوضيح هيكل القاعدة والجداول والعلاقات بينها بالتفصيل. Customers (CustomerID, FirstName, LastName, Email) Orders (OrderID, CustomerID, OrderDate, TotalAmount) OrderItems (OrderItemID, OrderID, ProductID, Quantity) Products (ProductID, ProductName, Price) وكما ترى لدينا أربع جداول: Customers (العملاء) و Orders (الطلبات) و OrderItems (عناصر الطلب) و Products (المنتجات). العمود المشترك بين جداول Customers و Orders هو CustomerID، وبين جداول Orders و OrderItems هو OrderID، وبين جداول OrderItems و Products هو ProductID. وتوضح هذه العلاقات كيفية ربط الجداول ببعضها البعض. Entity-Relationship Diagram (ERD) 1- الكيانات (Entities): العملاء (Customers): يمثل المشترين الذين يقومون بالطلبات. الطلبات (Orders): يمثل الطلبات التي يقوم العملاء بإجرائها. المنتجات (Products): يمثل المنتجات المتاحة للشراء. 2- العلاقات (Relationships): العلاقة بين العملاء والطلبات: يمكن لعميل واحد أن يقوم بعدة طلبات، وهذا ما يعكسه الخط المتصل بين الكيانين "Customers" و "Orders". العلاقة بين الطلبات والمنتجات: يمكن لكل طلب أن يحتوي على عدة منتجات، وهذا ما يعكسه الخط المتصل بين الكيانين "Orders" و "Products". 3- السمات (Attributes): لكل كيان في النموذج، يوجد سمات محددة. على سبيل المثال، العملاء يحتوون على السمات: CustomerID وFirstName وLastName وEmail، والطلبات يحتون على السمات: OrderID وOrderDate وTotalAmount، والمنتجات يحتون على السمات: ProductID وProductName وPrice.

اسم المكون في الكود لديك كان register، ولكنه يجب أن يكون Register مع حرف البداية كبيرًا، ويجب غلق العناصر بشكل صحيح وهم <label> و</label> و<input> و</input> و <form> و </form>. وعليك بتحديد السمات htmlFor بدلاً من for لوصف العلاقة بين العنصر label وحقل الإدخال. حيث أن في HTML، يتم استخدام السمة "for" لربط عنصر label بعنصر input المقابل، ولكن يجب استخدام "htmlFor" بدلاً من "for" عند كتابة JSX في React. والسبب يعود إلى أن "for" هو كلمة محجوزة في JavaScript، لذا تم استخدام "htmlFor" بدلاً منها في JSX لتجنب التعارض. أيضًا تصحيح الأسماء للحقول input لتكون name بدلاً من Name، فاسم الخاصية بحرف صغير وليس كبير في HTML. وأخيرًا تصحيح العنصر input باسم معرف exampleInputPassword1 وتغيير اسمه إلى exampleInputPassword2 ليتوافق مع العلامة المقابلة له في label. وإليك الكود بعد التعديل: import React from 'react'; export default function Register() { return ( <div className="container mt-5 pt-5"> <form className='w-50 m-auto text-center'> <div className="mb-3"> <label htmlFor="exampleInputEmail1" className="form-label">Email address</label> <input type="email" className="form-control" id="exampleInputEmail1" name="email" /> </div> <div className="mb-3"> <label htmlFor="exampleInputName" className="form-label">Name</label> <input type="text" className="form-control" id="exampleInputName" name="name" /> </div> <div className="mb-3"> <label htmlFor="exampleInputPassword1" className="form-label">Password</label> <input type="password" className="form-control" id="exampleInputPassword1" name="password" /> </div> <div className="mb-3"> <label htmlFor="exampleInputPassword2" className="form-label">Confirm Password</label> <input type="password" className="form-control" id="exampleInputPassword2" name="confirmPassword" /> </div> <button type="submit" className="btn btn-primary">Submit</button> </form> </div> ); }

هناك عدة أخطاء في الكود، وإليك الكود بعد التعديل: import React from 'react'; import { RouterProvider } from 'react-router-dom'; import Layout from './Layout'; import Home from './Home'; import Navbar from './Navbar'; import Login from './Login'; import Register from './Register'; import Movies from './Movies'; import Footer from './Footer'; import NotFound from './NotFound'; const routes = [ { path: '', element: <Layout />, children: [ { path: '/', element: <Home /> }, { path: '/navbar', element: <Navbar /> }, { path: '/login', element: <Login /> }, { path: '/register', element: <Register /> }, { path: '/movies', element: <Movies /> }, { path: '/footer', element: <Footer /> }, { path: '*', element: <NotFound /> } ]} ]; const App = () => { return ( <> <RouterProvider router={routes} /> </> ); } export default App; اولاً قمت باستيراد المكونات اللازمة بشكل صحيح من خلال استخدام عبارة import، ولاحظ أنه يجب استيراد كل مكون منفصل عن طريق تحديد المسار الصحيح لكل ملف. وتحديد أسماء المكونات بشكل صحيح وفقًا للاستيراد الصحيح لكل مكون. وانتبه إلى أنه تم استخدام علامة زوجية غير صحيحة <layout/>، والعلامة الزوجية الصحيحة هي <Layout />، وذلك بتحديد الحرف الأول كبيرًا للتأكيد على أنها مكون. ثم قمت بتحديد الخصائص الصحيحة لكل مسار في الكائن routes، باستخدام خاصية path لتحديد العنوان المرتبط بكل مكون، وخاصية element لتعيين المكون المرتبط بهذا العنوان. وفي النهاية تعديل عنوان التصدير النهائي للتطبيق من app إلى App ليتم توافقه مع الاستيراد في الملف الرئيسي الآخر.

الطريقة الأولى باستخدام رابط مباشر يحتوي على رقم الهاتف الخاص بواتساب ورمز البلد لإرسال رسالة إلى الرقم المحدد. قم بإضافة الرمز التالي في صفحتك HTML: <a href="https://api.whatsapp.com/send?phone=رقم-الهاتف">ارسل رسالة عبر واتساب</a> وقم بتغيير "رقم-الهاتف" إلى رقم الهاتف المستهدف، مع إزالة أي أحرف غير أرقام من الرقم، وستعين عليك استخدام جافاسكريبت ليصبح الكود بالشكل التالي: <button id="sendMessageBtn">إرسال رسالة عبر واتساب</button> <script> document.getElementById("sendMessageBtn").addEventListener("click", sendMessage); function sendMessage() { const phoneNumber = "رقم-الهاتف"; const message = "مرحبًا، هذه الرسالة من صفحة الويب الخاصة بي."; const encodedMessage = encodeURIComponent(message); const whatsappURL = `https://api.whatsapp.com/send?phone=${phoneNumber}&text=${encodedMessage}`; window.open(whatsappURL); } </script> والطريقة الثانية باستخدام API واتساب لإرسال رسائل وسائط إلى رقم واتساب، ويتطلب ذلك استخدام لغة البرمجة (مثل JavaScript) للتفاعل مع API واتساب، وتستطيع الإعتماد على مكتبات مثل Twilio أو WhatsApp Business API لتنفيذ ذلك. وإليك مثال بسيط بواسطة JavaScript و Twilio لإرسال رسالة إلى رقم واتساب: <button id="sendMessageBtn">إرسال رسالة عبر واتساب</button> <script> document.getElementById("sendMessageBtn").addEventListener("click", sendWhatsAppMessage); function sendWhatsAppMessage() { const phoneNumber = "رقم-الهاتف"; const message = "مرحبًا، هذه الرسالة من صفحة الويب الخاصة بي."; // استيراد مكتبة Twilio // افتراضيًا، يجب توفير مفتاح الوصول ورقم Twilio من قبلك const twilio = require('twilio'); const accountSid = 'Your_Account_SID'; const authToken = 'Your_Auth_Token'; const client = new twilio(accountSid, authToken); client.messages.create({ body: message, from: 'Your_Twilio_Phone_Number', to: phoneNumber }) .then(() => { console.log('تم إرسال الرسالة بنجاح'); }) .catch((error) => { console.log('حدث خطأ أثناء إرسال الرسالة:', error); }); } </script>

أولاً تلك الأمور بحاجة إلى استشارة قانونية من قبل محامي أو محاسب متخصص، ولا تستمع لنصيحة أحد بنسبة 100%، حيث أن أي قرار خاطيء منك سيعرضك لمسائلة قانونية. وعامة من المفترض أنه يتم تحديد طريقة توزيع الأرباح وحساب حصة الشريك الجديد في عقد التأسيس أو في الاتفاقية التي تنظم عمل الشركة، وإذا لم يتم تضمين أي تفاصيل محددة حول حقوق الشريك الجديد في حصة الأرباح، فقد تتبع الشركة سياسة معينة تخص توزيع الأرباح للشركاء الجدد. وبناءًا على معرفتي البسيطة بتلك الأمور، فيجب أن تتبع آخر قانون صدر، وهو قانون الشركات التجارية في المملكة العربية السعودية الذي صدر في 28 يونيو 2022. ويعتبر القانون الجديد أكثر شمولية وتحديثًا من القانون السابق، وتم تصميمه ليعكس التغيرات التي تطرأ على بيئة الأعمال في المملكة العربية السعودية، فإذا كنت تتبع القانون الجديد، فتستطيع التأكد من الامتثال لأحدث المتطلبات واللوائح. بمعنى يتم توزيع أرباح الشركاء بناءً على حصصهم في رأس المال، ما لم يتم تحديد خلاف ذلك في نصوص النظام الأساسي للشركة. وهذا يعني أن حصص الشركاء في الأرباح تكون متناسبة مع حصصهم في رأس المال. فمثلاً إذا كانت هناك شركة تمتلكها ثلاثة شركاء (أ، ب، ج)، وحصة الشريك أ في الشركة تبلغ 50٪، وحصة الشريك ب تبلغ 30٪، وحصة الشريك ج تبلغ 20٪، فإن حصة الشريك أ في الأرباح ستكون 50٪، وحصة الشريك ب ستكون 30٪، وحصة الشريك ج ستكون 20٪. ويمكن أن تتضمن نصوص النظام الأساسي نسبة توزيع أرباح وخسائر مختلفة، ولكن يجب أن يكون هناك اتفاق موحد بين جميع الشركاء لإجراء تلك التغييرات. في حالة عدم وجود تحديد في نصوص النظام الأساسي، يُطبق القاعدة الافتراضية التي تفرض أن حصص الشركاء في الأرباح تكون مساوية لحصصهم في رأس المال. أيضًا يتيح القانون الجديد إمكانية توزيع أرباح غير متساوية، بشرط أن يتفق عليه الشركاء. وهذا يعني أن الشركاء يمكنهم التوصل إلى اتفاق بشأن نسبة توزيع الأرباح التي لا تكون متناسبة مع حصصهم في رأس المال، ولكن يجب أن يتم توثيق هذا الاتفاق بالكتابة وتوقيع جميع الشركاء. يُدخل القانون الجديد أيضًا تغييرات إضافية فيما يتعلق بتوزيع الأرباح، وتشمل ما يلي: يجب توزيع الأرباح مرة واحدة على الأقل في السنة. يحق للشركاء حصة في الأرباح حتى إذا لم يكونوا قد ساهموا في رأس المال. الشركاء الذين انسحبوا من الشركة ليس لهم حق في حصة في الأرباح. ولكن إذا كنت تتبع قانون الشركات الخاص بعام 2015، فيجب أن تحسب حصة الشريك الجديد في الأرباح من تاريخ انضمامه، ما لم ينص على خلاف ذلك في عقد التأسيس أو الاتفاقية. المرجع القانوني لهذا هو المادة 187 من قانون الشركات التجارية في المملكة العربية السعودية، حيث ينص أن "حصة كل شريك في الأرباح تكون متساوية لحصته في رأس المال، ما لم ينص على خلاف ذلك في عقد التأسيس". أما المرجع المالي في هذا الصدد فهو المعيار المحاسبي رقم 12 الصادر عن مجلس المعايير المحاسبية السعودي (SASB) والمتعلق بـ "الاستثمارات في الشركات التابعة والمشروعات المشتركة"، وينص المعيار رقم 12 على أن "يتم تخصيص أرباح أو خسائر الشركة التابعة أو المشروع المشترك لفترة معينة لأصحاب المشروع وفقاً لنسبة مصالحهم في المشروع". وفي حالتك، لا ينص عقد التأسيس أو الاتفاقية على أن الشريك الجديد له حق في الاستحواذ على كامل أرباح السنة. ولذلك، يجب حساب حصته في الأرباح من تاريخ انضمامه. يمكنك تقديم نسخة من المادة 187 من قانون الشركات التجارية في المملكة العربية السعودية والمعيار المحاسبي رقم 12 لدعم وجهة نظرك في هذا الأمر. من المهم التحقق من العقود والاتفاقيات المتعلقة بشركتك والتشاور مع مستشار قانوني أو محاسب متخصص للحصول على استشارة قانونية دقيقة ومرجعية قانونية محددة، والمستشار القانوني المحلي الخاص بشركتك يمكنه تقديم تفسير واضح للتشريعات والأنظمة المالية المعمول بها في السعودية وكيفية تطبيقها على حالتك الخاصة.

بخصوص مشكلة الـ margin فقد أشار إليك عبد الباسط بالحل، وبخصوص مشكلة grid system فهو ليس Grid بالضبط بل يتم إنشاء شبكة بواسطة Flex، وستجد شرح لذلك في المستند الرسمي لـ Grid system. وهو يعمل بشكل سليم، ولكن يبدوا أنك لم تستخدم الإصدار 4.5.3 من Bootstrap وهو الذي يستخدمه المدرب. ومن الأسهل لك استخدام CDN بدلاً من تحميل ملفات المكتبات، وقد قمت باستيراد كل الملفات عن طريق CDN. وقمت بحذف الـ height للصور وأبقيت الـ width فقط حيث يتم حديد الطول تلقائيًا ليتناسب مع العرض لتعرض الصورة بشكل متناسب وبأبعاد سليمة وغير ضبابية. وأيضًا وضعت row-gap بقيمة 10px على العنصر الأب row، وذلك من أجل وضع فواصل بين جميع الـ cards. وإليك الكود بعد التعديل وتستطيع استخدامه وهو يعمل لكن قم بتعديل مسار واسم الصور فقط: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Youtuby</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style></style> </head> <body class="m-5 rtl"> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top rtl"> <a class="navbar-brand" href="#index.html">يوتيوبي</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mx-lg-auto"> <li class="nav-item active"> <a class="nav-link" href="#index.html">الفيديوهات المقترحة </a> </li> <li class="nav-item"> <a class="nav-link ml-lg-3" href="#">المرفوعة حديثا</a> </li> <li class="nav-item"> <a class="nav-link px-lg-0" href="#" tabindex="-1">الفيديوهات الرائجة</a> </li> <li class="nav-item"> <a class="nav-link btn btn-primary text-white" href="#" data-toggle="modal" data-target="#loginmodal" >تسجيل الدخول</a > </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="ابحث" /> <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">ابحث</button> </form> </div> </nav> <div class="modal fade rtl" id="loginmodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">تسجيل الدخول</h5> <button type="button" class="close" data-dismiss="modal"> <span>&times;</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="email" class="col-form-label">البريد الالكتروني:</label> <input type="email" class="form-control" id="email" /> </div> <div class="form-group"> <label for="password" class="col-form-label">كلمة السر:</label> <input type="password" class="form-control" id="password" /> </div> </form> </div> <div class="modal-footer"> <a href="#">نسيت كلمة السر</a> <a href="#" class="mx-auto">انشاء حساب</a> <button type="button" class="btn btn-secondary" data-dismiss="modal">دخول</button> </div> </div> </div> </div> <div class="row" style="margin-top: 180px; row-gap: 10px"> <div class="col-lg-4"> <div class="card"> <img src="img.png" style="width: 100px" class="card-img-top" /> <div class="card-body"> <h5>this photo is nice</h5> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <img src="img.png" style="width: 100px" class="card-img-top" /> <div class="card-body"> <h5>this photo is nice</h5> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <img src="img.png" style="width: 100px" class="card-img-top" /> <div class="card-body"> <h5>this photo is nice</h5> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <img src="img.png" style="width: 100px" class="card-img-top" /> <div class="card-body"> <h5>this photo is nice</h5> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <img src="img.png" style="width: 100px" class="card-img-top" /> <div class="card-body"> <h5>this photo is nice</h5> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/js/bootstrap.bundle.js" integrity="sha512-CIx/U2r3mgLo/8//HfU4Fb0U4ldfggM0wrTHnRoawoqPFmbkUs6exrdChiPYqVllmtz6Y10rVbyDOAq7d7nZ1w==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> </body> </html> وإذا أردت استيراد أي مكتبات من خلال CDN تستطيع استخدام أحد الموقع التالية: cdnjs.com وبالنسبة للموقع السابق قم بالبحث عن المكتبة التي تريدها ثم اختر رقم الإصدار الخاص بها، ثم اضغط على زر </> لنسخ الرابط كما هو موضح في الكود السابق. ويوجد أيضًا موقع آخر وهو: jsdelivr.com وابحث عن اسم المكتبة ثم اختر رقم الإصدار ثم انسخ الرابط.

تأكد من كتابة المسار بشكل صحيح: import {Butnave} from "src/Buttons/Butnave.js"

الطريقة صحيحة وتستطيع استيراده بنفس الاسم أو بأي اسم آخر طالما أنك قمت بتصديره عن طريق export default. وسأشرح لك بالتفصيل: لتصدير مكون (component) في React، باستطاعتك استخدام تعبير export قبل تعريف المكون، وهناك عدة طرق لتصدير المكونات في React، وفيما يلي سأقدم لك ثلاث طرق شائعة. 1- تصدير المكون باستخدام export المباشر: حيث تستخدم تعبير export قبل تعريف المكون بشكل مباشر. export function MyComponent() { // اكتب رمز JSX ومنطق المكون هنا } عند استخدام هذا النمط، قم باستيراد المكون في ملف آخر باستخدام import كالتالي ويجب أن تقوم بكتابة نفس الاسم وبداخل قوس معقوف {}: import { MyComponent } from 'MyComponent'; 2- تصدير المكون باستخدام export في نهاية الملف: قم تعريف المكون كما هو، ثم استخدام تعبير export في نهاية الملف لتصدير المكون. function MyComponent() { // اكتب رمز JSX ومنطق المكون هنا } export default MyComponent; وعليك باستيراد المكون في ملف آخر باستخدام import كالتالي: import MyComponent from 'test/MyComponent'; وبالطريقة السابقة تستطيع كتابة أي اسم تريده عند الاستيراد حيث أنك قمت بتصدير المكون عن طريق export default، وحتى عند استخدام الأقواس تستطيع تغيير الاسم أيضًا: import { أي اسم هنا } from 'MyComponent'; لكن الطرق الأخرى يجب كتابة نفس الاسم وداخل أقواس. 3- تصدير المكون باستخدام export عند الحاجة: تستطيع تعريف المكون كما هو، ثم استخدام تعبير export بشكل منفصل لتصدير المكون عند الحاجة. function MyComponent() { // اكتب رمز JSX ومنطق المكون هنا } // يمكن تصدير المكون عند الحاجة باستخدام الكلمة المفتاحية export export { MyComponent }; ثم استيراد المكون في ملف آخر باستخدام import كالتالي: import { MyComponent } from 'MyComponent'; وفي كل الحالات يجب كتابة المسار الصحيح للملف الذي يحتوي على المكون الذي تريد تصديره.

عليك إذن التحدث للدعم للفني الخاص بالاستضافة لمعرفة سبب المشكلة.

قم بتسجيل الدخول إلى لوحة cPanel وستجد قسم خاص بالـ Email، وبه خيار باسم Email Deliverability. وستجد اسم الدومين الخاص بك ويجب أن يكون بجانبه حالة Valid كالتالي: وإذا كانت غير ذلك سيظهر لك حالة Problems Exist ووجود مشكلة في DKIM AND SPF أو مشكلة أخرى. وما أنت بحاجة إلى فعله هو الضغط على manage ثم ستجد زر أسفل إعدادات DKIM باسم Install the suggested Record قم بالضغط عليه. وأيضًا ستجد زر بأسفل إعدادات SPF باسم Install the suggested Record قم بالضغط عليه. وفي حال كنت تستخدم Cloudflare فعليك بوضع إعدادات الـ DKIM وهما name و Value وضعهم في حقل من نوع TXT في إعدادات الـ DNS في Cloudflare، حيث ستضغط على Add record ثم تختار حقل من نوع TXT وذلك من القائمة المنسدلة Type وستضع name في حقل name و value في حقل content ثم اضغط save وكرر نفس الأمر بالنسبة لإعدادت SPF. والآن توجه إلى صفحة Email Deliverability مرة أخرى والتي ستجد بها الدومين الخاص بموقعك، ثم بالأعلى ستجد خيار باسم list Domains اضغط عليه وفي حالة استمرار المشكلة التحقق من سجلات MX: تأكد من أن سجلات MX (Mail Exchanger) الخاصة بنطاق البريد الإلكتروني الخاص بك مكونة بشكل صحيح وتشير إلى الخادم الصحيح، وستحتاج إلى التحقق من هذا مع مزود خدمة الاستضافة الخاص بك.

لتفادي كتابة اسم الفرع بشكل خاطيء، نفذ الأمر التالي: git branch -M main وسيتم إعادة تسمية الفرع الحالي إلى main. والآن عليك بإضافة الملفات والتغييرات لتجهيزها للرفع عن طريق الأمر التالي: git add . بعد ذلك نقوم بعمل commit من خلال الأمر التالي: git commit -m "upload files" والآن أضف رابط المستودع الخاص بك عن طريق الأمر التالي: git remote add origin https://github.com/ اسم المستخدم/repoName.git وانتبه إلى أنه يجب استبدال الرابط برابط المستودع الخاص بك على GitHub. والآن لنقم بعمل دفع أو رفع للملفات والتغييرات عن طريق الأمر التالي: git push -u origin main وأنصحك بمشاهدة الفيديو التالي:

أولاً عليك تثبيت برنامج OpenSSH على نظام Manjaro الأساسي إذا لم يتم تثبيته بالفعل، حيث يُعتبر OpenSSH البرنامج الذي يتيح لك إنشاء اتصال SSH بين الأجهزة، كالتالي: افتح نافذة ترمينال في نظام Manjaro الأساسي. قم بتحديث مستودعات الحزم بتشغيل الأمر التالي: sudo pacman -Sy 3. بعد ذلك، استخدم الأمر التالي لتثبيت حزمة OpenSSH: sudo pacman -S openssh 4. سيطلب منك كلمة المرور الخاصة بك للمتابعة مع عملية التثبيت، فقم بإدخال كلمة المرور وانتظر حتى يتم تثبيت الحزمة. والآن عليك بالتأكد من أن حاويتك تعمل وقيد التشغيل على Docker، من خلال الأمر docker ps لعرض الحاويات التي تعمل حاليًا. وبعد الحصول على اسم أو رقم الحاوية التي تحتوي على Debian 11 باستخدام الأمر docker ps، قم بتنفيذ الأمر التالي للحصول على عنوان IP للحاوية: docker inspect اسم الحاوية | grep "IPAddress" وستظهر لك نتيجة تحتوي على عنوان IP للحاوية، فقم بتسجيل هذا العنوان للاستخدام في الخطوة التالية. وفي نظام Manjaro الأساسي، عليك بفتح نافذة Terminal جديدة واستخدم الأمر التالي للاتصال بحاوية Docker عبر SSH: ssh user@عنوان IP للحاوية حيث "user" هو اسم المستخدم الذي ترغب في استخدامه للاتصال بالحاوية، و"<عنوان IP للحاوية>" هو العنوان الذي حصلت عليه في الخطوة السابقة. ,إذا كنت تستخدم المستخدم الجذر في الحاوية، tعليك استخدام الأمر sudo مع الأمر SSH للوصول إلى صلاحيات الجذر: ssh root@عنوان IP للحاوية

يوجد مشكلة في حساب الهوامش (margins) أثناء إنشاء العناصر الفرعية (الأبناء) في الـ CSS. الـ width بنسبة 100٪ لا يأخذ في الاعتبار الهوامش الخاصة بالعنصر الأب. حيث تم تعيين عرض العنصر الأول باستخدام الـ 100٪، ولكن مع خصم 30 بكسل (15 بكسل من الهامش الأيسر و 15 بكسل من الهامش الأيمن الخاص بالعنصر الأب "first"). ولكن، كما ذكرت سابقًا، الهامش الخاص بالأب لا يحسب مع الـ 100٪، مما يعني أن الكود السابق يقوم بحذف 45 بكسل من العرض الكلي. لحل المشكلة، يجب طرح الـ 15 بكسل الخاصة بالعنصر الفرعي نفسه من العرض كالتالي: .first div { width: calc(100% - 15px); text-align: center; } وعند تعديل العناصر الأخرى وحذف الـ 15 بكسل الإضافية من كل عنصر، قد تلاحظ وجود 1 بكسل غير مرئي يظهر من العدم، فسبب سبب هذه المشكلة هو أن المتصفح يعامل العناصر كأنها نصوص (inline)، وليس كعناصر مستقلة (inline-block) لذلك قم بلصق العناصر بجانب بعضها كالتالي: <div class="parent"> <div class="first c"> <div>full width</div> </div> <div class="second c"> <div>1/3</div><div>1/3</div><div>1/3</div> </div> </div> وإليك كود CSS بعد تصحيحه: body { margin: 0px; padding: 0px; } .parent { width: 800px; height: 500px; background-color: rgb(236, 232, 232); position: absolute; top: 50%; margin-top: calc(500px / -2); left: 50%; margin-left: calc(800px / -2); } .parent .c { display: block; margin: 15px 0; margin-right: 15px; } .c div { height: calc((100% - (15px * 4)) / 4); text-align: center; display: inline-block; background-color: #adacac; margin-left: 15px; /* margin-right: ; */ } .first div { width: calc(100% - (15px)); text-align: center; } .second div { width: calc((100% - (15px * 3)) / 3); } .third div { width: calc((100% - (15px * 2)) / 2); } .fourth div { width: calc((100% - (15px * 4)) / 4); }

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

دالة findIndex في جافاسكريبت تُستخدم للبحث عن عنصر محدد ضمن مصفوفة (Array) وإرجاع الفهرس (index) الأول الذي يطابق الشرط المحدد، وإذا لم يتم العثور على عنصر يطابق الشرط، فإن الدالة تعيد قيمة -1 أي false. والكود item => item > 70 هو دالة سهمية (arrow function) يتم استخدامها كشرط في findIndex، وذلك الشرط يحدد أن الدالة تبحث عن عنصر في المصفوفة numbers الذي يكون قيمته أكبر من 70. فأنت استخدمت findIndex للعثور على أول عنصر في المصفوفة numbers الذي يكون قيمته أكبر من 70، وإذا تم العثور على عنصر مطابق، فإن الدالة findIndex ستعيد الفهرس (index) لهذا العنصر، وسيتم تخزينه في المتغير index. إذا لم يتم العثور على عنصر يطابق الشرط، فسيتم تعيين قيمة -1 للمتغير index. أي أن item تمثل كل عنصر في المصفوفة في كل حلقة تكرار. وهناك معاملات أخرى غير item في دالة callback في findIndex ، وللتوضيح انظر الكود التالي: const numbers = [10, 20, 30, 40, 50]; const index = numbers.findIndex((element, index, array) => { console.log(`Element: ${element}`); console.log(`Index: ${index}`); console.log(`Array: ${array}`); console.log('-------------------'); return element > 30; }); console.log(`Index of first element greater than 30: ${index}`); element: يمثل العنصر الحالي الذي يتم معالجته في المصفوفة أثناء تنفيذ findIndex(). index: يمثل الفهرس (index) للعنصر الحالي في المصفوفة أثناء تنفيذ findIndex(). array: يمثل المصفوفة التي تم استدعاء findIndex() عليها. شرح findIndex()‎ من موسوعة حسوب

حاول تبسيط الأمور ولا تعقدها على نفسك، قم باستخدام برامج لتسجيل الشاشة مثل OBS وهو مجاني لكن لا يحتوي على خاصية عمل مونتاج، بينما يوجد Camtasia studio وهو غير مجاني وهو جيد لتسجيل الشاشة وواحد من أفضل برامج تسجيل وعمل الشروحات وعمل مونتاج في نفس البرنامج. وهناك أيضًا Free cam لتسجيل الشاشة بشكل بسيط وسهل، ويحتوي على خاصية عمل مونتاج لكن بشكل بسيط وليس مثل Camtasia studio. أيضًا يوجد Ezvid وهو برنامج مجاني لتسجيل الشاشة وعمل الشروحات وعمل مونتاج بسيط مثل Free cam. وتستطيع كتابة سكريبت لما ستقوم بشرحه، أو جرب التسجيل مباشرًة لكن اكتب نقاط لما يتم شرحه في الفيديو وتحدث واشرح كل نقطة. وبخصوص شرح الجافا، فبالطبع هي مطلوبة ويتم دفع مبالغ كبيرة لمبرمجي جافا فهى لغة عملاقة، وأيضًا مؤخرًا تم الإعلان عن الإصدار 21 من جافا ويحمل تحسينات كبيرة إندهش من الكثير وهي في الطريق الصحيح لتسهيل استخدام وتعلم اللغة وتقليل كتابة الكود قليلاً. ونصيحتي إليك، قدم ما لديك طالما أنك تحاول إفادة الناس، وبشكل بسيط بدون تعقيد حتى تتمكن من الاستمرار في البداية.

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

كليهما أدوات تطوير تساعد في تنظيم وتحسين عملية تطوير تطبيقات الويب، لكن يختلفان في العديد من الجوانب ويستخدمان لأغراض مختلفة وتستطيع استخدام كلاهما في نفس المشروع. وإليك الفرق بينهما. 1- الغرض الأساسي: Gulp.js: أداة لإدارة مهام التطوير والتشغيل الأوتوماتيكي للمشروع، وتستخدم Gulp.js لتنفيذ مهام متكررة مثل تجميع الملفات وتحويلها وضغطها وتحسينها. Vite: أداة لتطوير سريعة ومباشرة تستخدم لتجربة وتطوير تطبيقات الويب بشكل فعال، وتركز Vite على توفير بيئة تطوير سريعة التحميل (dev server) مع إعادة تحميل فوري (hot reloading) لتجربة تغييرات الكود على الفور. 2- نظام البناء: Gulp.js: تعتمد على تحديد المهام (task-based) وتشغيلها بتسلسل معين، وتستخدم تدفق المهام (task stream) لتنفيذ سلسلة خطوات للتحويل والتجميع والضغط والتحسين. Vite: تعتمد على نظام البناء السريع (esbuild) والذي يوفر تجميع سريع للملفات باستخدام ES Modules، وتستخدم Vite نموذج مستند الويب (WebAssembly) لبناء الوحدات بشكل فعال. 3- الأداء: Gulp.js: تعد أداة قوية ومتعددة الاستخدامات وتعتمد على مهام تشغيل البرنامج النصي. ومع ذلك، فإنه قد يعاني من بطء في عملية التجميع والتحويل عند التعامل مع مشاريع كبيرة. Vite: أسرع بكثير في عملية البناء وتحميل المكونات على الخادم التطويري، حيث يعتمد على تجميع سريع وتجاوب فوري لتغييرات الكود. 4- تكامل المكتبات: Gulp.js: يمكن استخدام Gulp.js مع مجموعة واسعة من المكتبات والإضافات المختلفة التي تعزز إمكانيات تطوير الويب. Vite: متكاملة بشكل أفضل مع بعض المكتبات والأطر العمل الحديثة مثل Vue.js وReact وPreact والتي تستفيد من قدراته في تطوير الواجهة الأمامية. أي ببساطة، إذا كنت ترغب في أتمتة مهام مثل تصغير الحجم للكود (minification)، التجميع (compilation)، اختبار الوحدات (unit testing)، فحص الأخطاء البرمجية (linting)، ومهام مماثلة، فاستخدم Gulp.js. بينما Vite ومثيلاتها، توفر بيئة تطوير سريعة التحميل (dev server)، وهذا يعني أنه يتم تجهيز وتحميل المكونات فورًا عند التطوير، مما يسمح لك برؤية التغييرات الخاصة بك على الفور دون الحاجة إلى إعادة تحميل الصفحة، مما يوفر وقتًا قيمًا في عملية التطوير. أيضًا دعم قوي للموديولز (Modules) الحديثة مثل ES Modules، وتستطيع الاستفادة من هذا الدعم لتجميع وتحويل ملفات JavaScript بسرعة كبيرة، مما يؤدي إلى تحميل أسرع لتطبيقك. وVite وغيرها من بيئات التطوير مصممة خصيصًا للتكامل مع الأطر العمل الحديثة مثل Vue.js وReact و Preact وغيرها، وتتيح لك Vite الاستفادة من قدرات تلك الأطر العمل بشكل أفضل، مثل تجميع المكونات وتحويلها وتحميلها بشكل فعال. وبشكل خاص تعتبر Vite أحد أدوات التطوير السريعة والمباشرة التي توفر تجربة تطوير سلسة وأداءًا عاليًا، حيث تعتمد Vite على تقنيات مثل تجميع سريع باستخدام ES Modules والتحميل اللحظي للمكونات لتحقيق أداء ممتاز في تطبيقات الويب. والصحيح هو مقارنة Vite مع webpack مثلاً أو Laravel Mix وقد تم شرح ذلك هنا بشكل وافي:

اسمح لي بالتحدث بصراحة معك، إن قمت بالإكتفاء بما تقدمه لك أي دورة لن تصبح مبرمج محترف، بالطبع ستصبح قادر على تنفيذ المشاريع بعد الإنتهاء من الدورة، لكن هناك أمور أنت بحاجة إلى تعلمها خارج الدورة، فبعد الإنتهاء منها. ابحث عما ينقصك وقم بتعلمها والأفضل فعل ذلك أثناء تعلم الدورة أي ابحث فورًا عما تريده وقم بالتطبيق لتثبيت المعلومة، وستجد كم هائل من المصادر بخصوص مجال الويب على اليوتيوب، وأيضًا كما أشار لك عمر ستجد في أكاديمية حسوب قسم كامل خاصة بمقالات ودروس لغات الويب HTML, CSS, JS، وذلك في قسم مقالات البرمجة. وأيضًا يوجد موسوعة حسوب. وتستطيع السؤال هنا بعد البحث عما تريد فهمه إذا واجهت صعوبة، وأيضًا أسفل الدورة إذا كان السؤال متعلق بمحتوى الفيديو في الدورة. وقد أوضحت من قبل تلك النقطة في النقاش التالي: فمثلاً لو قمت بالبحث عن Grid في شريط البحث في الأكاديمية والتنقل بين صفحات النتائج ستجد التالي، أو تستطيع البحث على جوجل ووضع كلمة حسوب بجانب كلمة البحث مثلاً "شرح Grid حسوب":

سأوضح لك طريقة عمل الدوال CEIL و REPLACE في MySQL مع أمثلة لتفهم الأمر: 1- دالة CEIL تعمل دالة CEIL على تقريب العدد العشري إلى الأعلى (أكبر عدد صحيح) المقابل له. طريقة كتابة الدالة: CEIL(x) حيث x هو العدد الذي ترغب في تقريبه للأعلى. مثال: لنفترض أن لدينا جدول يحتوي على عمود يحتوي على الأرقام العشرية التالية: +-------+ | Value | +-------+ | 2.4 | | 3.1 | | 5.7 | +-------+ وإذا أردنا تطبيق دالة CEIL على هذا الجدول، ستكون النتيجة كالتالي: +-------+--------+ | Value | Result | +-------+--------+ | 2.4 | 3 | | 3.1 | 4 | | 5.7 | 6 | +-------+--------+ لذلك، الدالة تقوم بتقريب الأعداد العشرية للأعلى لأقرب عدد صحيح. 2- دالة REPLACE تقوم دالة REPLACE بالبحث عن واستبدال جميع حالات ظهور نص محدد داخل سلسلة النصوص. طريقة كتابة الدالة: REPLACE(str, find_string, replace_with) حيث: str: السلسلة التي ترغب في البحث واستبدال النص فيها. find_string: النص الذي ترغب في البحث عنه. replace_with: النص الذي ترغب في استبدال find_string به. مثال: لنفترض أن لدينا جدول يحتوي على عمود يحتوي على السلاسل التالية: +-------------------+ | Name | +-------------------+ | John Doe | | Jane Doe | | John Smith | +-------------------+ إذا أردنا استخدام دالة REPLACE لاستبدال "John" بـ "Adam"، ستكون النتيجة كالتالي: +-------------------+ | Name | +-------------------+ | Adam Doe | | Jane Doe | | Adam Smith | +-------------------+ لذلك، الدالة تقوم بالبحث عن النص المحدد واستبداله بالنص الجديد في جميع حالات الظهور.

أولاً حاول إعادة تعيين كلمة المرور من الرابط التالي: https://www.linkedin.com/uas/request-password-reset وإذا لم يفلح الأمر، ععليك بعمل إبلاغ هنا من خلال رابط محدد وبه استمارة للإبلاغ عن Compromised Account أي حساب LinkedIn تم تهكيره. https://www.linkedin.com/help/linkedin/ask/TS-RHA وستقوم بكتابة الاسم الأول First name من الحساب ثم الاسم الثاني Last name ثم كتابة الإيميل الخاص بالحساب، ثم رابط حسابك على لينكيدإن وتستطيع البحث عن حسابك في خانة البحث لتتمكن من إيجاد الرابط. وفي خانة التفاصيل، قم بكتابة الأمر بالتفصيل، وتستطيع الكتابة بالعربية ثم ترجمة النص على جوجل ترجمة مثلاً. والآن عليك بالإنتظار لحين الرد عليك.

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

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

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