Mustafa Suleiman

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

في البداية أنت تحاول استدعاء localStorage.getItem('data') للحصول على القيمة المخزنة في الـ localStorage تحت المفتاح "data"، ثم التحقق مما إذا كانت القيمة معرفة بالفعل أم لا باستخدام الشرط localStorage.getItem('data') !== undefined. وإذا كانت القيمة غير معرفة (أي undefined)، فسيتم تعيين قيمة افتراضية فارغة [] للـ data. لكن، قبل تعيين القيمة للـ data، ما يتم هو تحليل القيمة المسترجعة من localStorage كصيغة JSON باستخدام JSON.parse(localStorage.getItem('data')). فإذا كانت القيمة المسترجعة غير صالحة كـ JSON، فيتم إطلاق خطأ بصيغة: SyntaxError: Unexpected token u in JSON at position 0 أو SyntaxError: Unexpected token < in JSON at position 0. ولتجنب حدوذ ذلك عليك بالتحقق من صحة القيمة المسترجعة من localStorage قبل تحليلها كـ JSON. باستخدام الدالة JSON.parse() داخل عبارة try-catch للتعامل مع أي أخطاء تحليل الصيغة، هناك طرق مختلفة لمعالجة المشكلة، ومنها الحل التالي: let initialData = []; const [data, setData] = useState(initialData); const storedData = localStorage.getItem('data'); try { if (storedData) { initialData = JSON.parse(storedData); } } catch (error) { console.error('Error parsing stored data:', error); } وقمت بتخزين القيمة المسترجعة من localStorage في متغير storedData. ثم استخدام عبارة try-catch لمحاولة تحليل الصيغة باستخدام JSON.parse() وتعيين القيمة إلى initialData في حال نجح التحليل، وإذا حدث أي خطأ أثناء التحليل، فسيتم طباعة رسالة الخطأ في وحدة التحكم ويتم تعيين القيمة الافتراضية [] لـ initialData. أخيرًا، تعيين القيمة النهائية للـ data باستخدام useState(initialData).

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

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

عند استخدام React.js و React Native، فإنك لن تحتاج إلى التعامل مباشرة مع DOM و BOM بنفس الطريقة التقليدية. وفي React.js، يستخدم Virtual DOM (DOM افتراضي) لتمثيل الهيكل الشجري للعناصر المرئية في التطبيق، وتقوم React بإدارة تحديثات الـ DOM بشكل فعال ويقوم بإعادة رسم المكونات فقط عند الحاجة، مما يوفر أداءً محسّنًا، لذلك، لا تحتاج إلى التعامل مباشرة مع DOM الحقيقي في معظم الحالات عند استخدام React.js. ومن الأفضل لك فهم الـ DOM بشكل جيد، وإلا ستعاني في فهم ما يحدث، أو البعض يتغاضى عن ذلك ويستخدم التنقية بدون فهم، وأنا لا أنصحك بذلك أبدًا. بالنسبة لـ React Native، فهي تتيح لك بناء تطبيقات محمولة باستخدام JavaScript وتقوم بترجمة الكود إلى عناصر واجهة المستخدم الأصلية للمنصة التي تعمل عليها التطبيق، وبناء وتنسيق العناصر المرئية بدلاً من التعامل المباشر مع DOM و BOM. لكن فهم أساسيات DOM و BOM لا غنى عنه إذا أردت أن تصبح مطور ويب جيد وليس مستخدم للتقنيات فقط، ونصيحتي إليك هي بالتركيز على تعلم الأساسيات في أي شيء ثم انتقل لتعلم التقنيات مثل React وغيرها.

مشاهدة دورات أكاديمية حسوب بدون إنترنت أي offline عن طريق تحميلها، غير متاح حاليًا وربما يتم إتاحة ذلك مستقبلاً، وبإمكانك مشاهدة الفيديوهات على دقة أقل تتناسب مع سرعة الإنترنت لديك مثل 540p أو أقل بدلاً من 1080p. وأرجو أن تتفهم السبب وراء عدم توفر إمكانية تحميل الفيديوهات، فإذا سمحنا بتحميل الفيديوهات، سيتمكن الجميع من الوصول إلى الدورات بسهولة، وقد بذل فريق المدربين مجهودًا كبيرًا في إعداد وتوفير هذه الدورات لك، ويتم تحديثها كل 3 او 6 أشهر حسب الحاجة وتستطيع الوصول للتحديثات مدى الحياة، بالإضافة إلى الدعم من عدة مدربين للإجابة على أسئلتك ومساعدتك في أي وقت. وهناك أيضًا الشهادات والاختبارات والدورات الأخرى التي يتم توفيرها لك لمساعدتك في استكمال مسارك البرمجي الذي اخترته. والسبب الرئيسي وراء عدم السماح بتحميل الدورات لمشاهدتها بدون اتصال هو أن معظم منصات التعليم الإلكتروني تعتمد على نموذج البث المباشر لتوفير المحتوى التعليمي، وتخزين محتوى الفيديو والمواد التعليمية على خوادم الشركة المزودة للخدمة التعليمية، ويمكن الوصول إليها فقط عبر الإنترنت. وهناك سبب آخر أيضًا، وهو أن توفير المواد التعليمية بشكل مجاني قد يكون له تأثير سلبي أكثر من نفعه، فمن يسعى للتعلم ويعتز بالتحصيل العلمي يكون مستعدًا لبذل بعض الجهد والتكلفة للحصول على المواد التعليمية القيمة التي تؤهله لتحقيق أهدافه، أما من لا يبدي الاجتهاد ولا يهتم بجدية التعلم، فمن المرجح أنه لن يقوم بذلك، ولكن أنت لست كذلك، فأنت مستعد للجهد والالتزام.

ببساطة، عليك بدراسة الشهادات التالية فهى خاصة بمجال الشبكات، لكن عليك بالبحث عن الوظائف الخاصة بالشبكات وتعلم الشهادات المطلوبة، فبالطبع ليس المطلوب منك تعلم كل تلك الشهادة في البداية، لذلك أشرت إليك بتفقد متطلبات الوظائف والتي ستجدها على موقع مثل LinkedIn أو وظف. شهادة A+ (CompTIA A+): تعتبر تلك الشهادة بمثابة الأساس للدخول إلى مجال تكنولوجيا المعلومات. تغطي المعرفة والمهارات الأساسية في صيانة وتشخيص أجهزة الكمبيوتر وأنظمة التشغيل. شهادة N+ (CompTIA Network+): تركز على المفاهيم والمهارات الأساسية في تصميم وإدارة شبكات الكمبيوتر، بما في ذلك التكنولوجيا المتعلقة بالشبكات السلكية واللاسلكية. شهادة S+ (CompTIA Security+): تركز على أمن المعلومات وتغطي المفاهيم الأساسية للأمان السيبراني والتهديدات والحماية وإدارة المخاطر. شهادة Linux+ (CompTIA Linux+): مهمة إذا كنت ترغب في العمل على أنظمة تشغيل Linux، وتغطي المفاهيم الأساسية والمهارات في تثبيت وتكوين وإدارة أنظمة Linux. شهادة Cloud: تعنى تقنيات الحوسبة السحابية وتوفر المعرفة والمهارات اللازمة لتصميم وإدارة بيئات الحوسبة السحابية، مثل منصات مثل AWS أو Microsoft Azure. شهادة MCSA (Microsoft Certified Solutions Associate): تركز على منتجات وتقنيات مايكروسوفت، مثل أنظمة التشغيل وخوادم الشبكات والتخزين. شهادة MCSE (Microsoft Certified Solutions Expert): شهادة أخرى متقدمة لشهادة MCSA، وتركز على تصميم وتطوير حلول مايكروسوفت الشاملة. شهادة Redhat Administrator: تركز على نظام تشغيل Linux المبني على Red Hat Enterprise Linux وتعتبر مهمة للعمل كمسؤول للنظام. شهادة Unix Administrator: تركز على نظام التشغيل Unix وتوفر المعرفة والمهارات اللازمة لإدارة وصيانة نظام التشغيل هذا. شهادة Networks Administrator: تركز على إدارة وصيانة شبكات الكمبيوتر وتغطي المفاهيم والمهارات الأساسية في إعداد وتكوين الشبكات. شهادة CCNA R&S (Cisco Certified Network Associate Routing and Switching): تعتبر هذه الشهادة مهمة في مجال الشبكات وتركز على تصميم وتكوين وتشخيص شبكات سيسكو. شهادة CCNA Security: تركز على الأمان السيبراني في شبكات سيسكو وتغطي المفاهيم والتقنيات المتعلقة بالحماية والأمان. شهادة CCNA Voice: تركز على تقنيات الاتصالات الصوتية عبر الشبكات وتوفر المعرفة والمهارات اللازمة لتكوين وإدارة أنظمة الاتصالات الصوتية. شهادة CCDA (Cisco Certified Design Associate): تعتبر هذه الشهادة مهمة للمهندسين المعماريين وتركز على تصميم الشبكات المعقدة. شهادة CCNP R&S (Cisco Certified Network Professional Routing and Switching): تعتبر هذه الشهادة متقدمة وتركز على مهارات التصميم والتكوين والتشخيص لشبكات سيسكو. شهادة CCNP Security: تركز على أمن الشبكات وتوفر المهارات اللازمة لحماية شبكات سيسكو من التهديدات السيبرانية. شهادة VMware: تركز على تقنيات الـ Virtualization وتغطي المفاهيم والتقنيات المتعلقة بإنشاء وإدارة بيئات الـ Virtualization. دروس ومقالات عن CCNA من أكاديمية حسوب دروس ومقالات عن الشبكات من أكاديمية حسوب

الأمر ليس علاقة بشهادتك إطلاقًا، بالتأكيد الشهادة لها عامل مؤثر فلك الأفضلية في حال كنت متميز في مجالك ولديك شهادة جامعية به أيضًا. ولكن حاليًا نسبة كبيرة من العاملين في مجال البرمجة لم يتدارسوا بكلية خاصة بالبرمجة مطلقًا، بل هم خريجين جامعات أخرى. والمهم هو الإلتزام بمسار تعليمي جيد لفترة 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 ثم جافاسكريبت، وفائدة تعلم بايثون في البداية هو تطوير مهارة التفكير منطقي وإلمام بجوانب البرمجة من خلال لغة سهلة أي تأهيلك للدخول في عالم البرمجة. وأنت لست بحاجة إلى بايثون لتعلم مجال الويب بالتحديد، لذلك حدد ما تريد. وفي البداية حاول التركيز على التعلم بالترتيب وركز على أمر واحد لكي لا تشتت نفسك. وأنصحك بقراءة التالي: