لوحة المتصدرين

سي ام سي بلس بلس ؟

مرحباً لدي خبرة جيدة في العمل على وورد بريس ولكن احتاج لمعرفة بعض التفاصيل اذا اردت اضافة كود html ومعه JS ما هي افضل طريقة لادراجه ؟ هل الافضل اضافة html element كقطعة ضمن المحرر أو اضافته ضمن محرر الملفات , بشكل عام اريد تزويدي بفكرة عن كيفية التعامل مع محرر ملفات الووردبريس شاكر لكم

السلام عليكم. لجلب البيانات من قاعدة البيانات قمت بالكود التالي useEffect(() => { const getUser = async() => { await axios.get('/api/auth') .then(res => console.log(res.data)) .catch(err => console.log(err, "err")) } getUser() }, []) package.json "proxy": "http://127.0.0.1:3001" في جهة الخادم authCtr.js const getCurrentUser = async(req, res) => { try { const user = await User.findById(req.user.id).select('-password'); res.json(user) } catch (error) { console.log(error) res.status(500).send("Server error"); } } authRoute.js // /api/auth router.get('/', protect, getCurrentUser) server.js app.use('/api/auth', require('./routes/authRoute')) الدالة protect const jwt = require("jsonwebtoken") const protect = (req, res, next) => { // Get token from header const token = req.header('x-auth-token') // Check if no token if (!token) { return res.status(401).json({msg: 'No token, authorization denied!'}) } // Verify token try { const decoded = jwt.verify(token, process.env.JWT_SECRET) req.user = decoded.user next() } catch (err) { res.status(401).json({msg: 'Token is not valid'}) } } module.exports = protect عند إستخدام postman لا توجد مشاكل لكن في طرف العميل تظهر رسالة الخطأ التالية شكرا على المساعدة

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

لو مثلا اريد ان ابرمج موقع و انا فرونت اند و لست باك اند واريد ان اضع وسائل الدفع يدفع منها الزائر ما سبيل الى ذلك دون الاستعانة بل باك اند وايضا هل استطيع انا ابرمج متجر الكتروني متكامل دون الاستعانة بباك اند ونشره عا الانترنت

السلام عليكم ورحمه الله وبركاته في الفيديو المرفق عندما اضغط على الايقونة او link كلٍ على حدة الpanel تفتح و تغلق بشكل طبيعي لكن عندما انتقل الى link او ايقونة اخرى فتحتاج double click او ضغطتين حتى تفتح ما حل هذه المشكلة؟ CCED - Google Chrome 2023-09-18 17-16-48.mp4

ازاي اقدر احط فيديو في موقع React واخفي عنصر ال video src زي نظام اكادميه حاسوب في الفيديوهات ولو فيه طريقه مع الصور برده عشان امنع المستخدم من تنزيل الفيديو

تم الحديث عن ذلك بشكل مفصل في النقاش التالي: وبإختصار قم بتخزين الفيديوهات والصور على خوادم آمنة ومحمية مثل Vimeo ويمكنك استخدام خدمات التخزين السحابي مثل Amazon S3 أو Google Cloud Storage وضبط الصلاحيات بحيث يكون الوصول إلى الملفات مقيدًا. وتستطيع تشفير ملفات الفيديو باستخدام تقنيات التشفير المتاحة في خوادم الوسائط الخاصة بك أو استخدام DRM (إدارة الحقوق الرقمية) للفيديوهات إذا كان ذلك ضروريًا.

1- الحل البديهي هو استخدام تقنية pagination لعرض المنتجات بشكل متتالي، وتسمح لك بتقسيم المنتجات إلى صفحات، بحيث يتم تحميل كل صفحة عند الحاجة إليها، وتستطيع استخدام تقنية pagination مع أي قاعدة بيانات، بما في ذلك MongoDB. وإليك مثال على كيفية استخدام تقنية pagination لعرض المنتجات في Node.js: const express = require("express"); const mongodb = require("mongodb"); const app = express(); // Connect to the database const db = mongodb.connect("mongodb://localhost:27017/products"); // Get all products const products = db.collection("products").find().toArray(); // Create a paginator const paginator = new Paginator(products, 10); // Get the next page of products const nextPage = paginator.next(); // Render the products app.get("/products", (req, res) => { res.send(nextPage); }); app.listen(3000); 2- هناك خيار آخر وهو استخدام cursors لعرض المنتجات بشكل متتالي، وتسمح لك تلك التقنية بتصفح مجموعة من البيانات دون تحميلها بالكامل في الذاكرة، وبالطبع تستطيع استخدام cursors مع MongoDB. مثال: const express = require("express"); const mongodb = require("mongodb"); const app = express(); // Connect to the database const db = mongodb.connect("mongodb://localhost:27017/products"); // Get all products const cursor = db.collection("products").find(); // Iterate over the products cursor.forEach((product) => { console.log(product); }); app.listen(3000); ويمكنك استخدام تقنية cursors لعرض المنتجات بشكل متتالي عن طريق استخدام دالة next() للتقدم إلى المنتج التالي. 3- وكحل آخر استخدم sharding لتوزيع البيانات على عدة خوادم، و سيساعد ذلك في تقليل وقت جلب البيانات من قاعدة البيانات. مثال: const express = require("express"); const mongodb = require("mongodb"); const app = express(); // Connect to the database const db = mongodb.connect("mongodb://localhost:27017/products"); // Shard the database const sharding = new Sharding(db); // Get all products const products = sharding.collection("products").find().toArray(); // Render the products app.get("/products", (req, res) => { res.send(products); }); app.listen(3000); والفكرية هي تقسيم مجموعة البيانات إلى عدة أجزاء يتم تخزينها على خوادم مختلفة، مما يساعد في تقليل وقت جلب البيانات من قاعدة البيانات. بالإضافة إلى تحسين أداء قاعدة البيانات عن طريق تحسين خوارزميات البحث والفرز وتحسين بنية البيانات.

useEffect(() => { console.log("Hello World") }, []) عندما اقوم بفتح الكونسل ارى انه قد كرر الجملة مرتين وكذلك const [name, SetName] = useState("Ali"); useEffect(() => { console.log("Hello World") }, [name]) اليس من المفترض ان يتم تنفيذ الامر عن تحديث المتغير لماذا يقوم بتنفيذ الامر مرتين عند تشغيل الموقع

تقصد في المرة الأولى عند فتح التطبيق بدون أي تحديث للحالة state أو الإعتماديات الخاصة بالخطاف useEffect؟ في حال كان الأمر كذلك، فهو بسبب وضع StrictMode وما يفعله هو 3 أشياء أثناء تطوير المشروع: يعيد عرض مكوناتك مرة أخرى Re-renders للعثور على الأخطاء الناتجة عن إعادة العرض غير النقي (التأثيرات الجانبية). يعيد تشغيل تأثيرات مكوناتك مرة أخرى للعثور على الأخطاء الناجمة عن عدم وجود دالة تنظيف مناسبة. يتحقق من مكوناتك مما إذا كان يتم استخدام واجهات برمجة التطبيقات القديمة deprecated APIs. وبالتالي يتم طباعة الرسالة مرتين في الكونسول، ومن المفترض أن تجد ذلك الوضوع مفعل في مشروعك في ملف index.js أو app.js كالتالي: const root = ReactDOM.createRoot( document.getElementById('root'), ); root.render( <React.StrictMode> <App /> </React.StrictMode>, ); وفي حال تعطيله قم بإزالة StrictMode ليصبح الكود كالتالي: const root = ReactDOM.createRoot( document.getElementById('root'), ); root.render( <App />, );

عذرا أخي hsoub (2).zip أعتذر مجددا

أرجو إرفاق مجلد المشروع لتفقد المشكلة.

هل حاولت إضافة رمز التوثيق إلى الطلب؟ عن طريق إضافة حقل Authorization كالتالي: useEffect(() => { const getUser = async() => { const token = localStorage.getItem("token"); const headers = { "Authorization": `Bearer ${token}` }; await axios.get('/api/auth', { headers }) .then(res => console.log(res.data)) .catch(err => console.log(err, "err")) } getUser() }, []) أيضًا تأكد من التالي: العنوان الموجه (proxy) في ملف package.json الخاص بمشروع ReactJS يشير إلى الخادم الصحيح أي التأكد من أن الخادم Node.js يعمل على الميناء 3001 وأن العنوان الذي تم تحديده في package.json هو الصحيح. الخادم Node.js يقوم بالتصريح بشكل صحيح بالمسار '/api/auth'، وهذا مهم لأنه يجب أن يتطابق مع المسار الذي تم استدعاءه من مشروع ReactJS. تأكد من أن الرمز المرسل في رأس الطلب من مشروع ReactJS (x-auth-token) هو الرمز الصحيح ويتطابق مع الرمز الذي تم إنشاؤه عند تسجيل الدخول. قم بتصحيح أي مشكلات محتملة في وظيفة protect وتأكد من أنها تقوم بإصدار رمز المصادقة (Token) بشكل صحيح وأنها تستجيب للطلبات بالشكل الصحيح.

تفعيل البيئه الافتراضيه المكتبات المثبته على النظام الافتراضي مع العلم لم اقم بتثبيت اي مكتبه بعد

CCED - Google Chrome 2023-09-19 14-13-07.mp4 شكرا لكما عبد الباسط و سمير عبود على مساعدتي و على التعليق قمت بعمل متغير لحفظ ال active panel حتى تفتح و تغلق بشكل جيد ولا تسبب مشكلة عند تبديل الروابط حيث انها لا تغلق حتى اضغط مرتين لكن تبقى امر بسيط و هو اريد عندما اغير من link الى link آخر اريد اضفاء transition الاغلاق و الفتح حيث انني لم استطع تنفيذها اي اريد مثلما اضغط و اغلق الpanel لوحده (حيث تظهر الpanel من خارج الجانب الايسر الى الجانب الايمن) اريد هذا الtransiton عندما انتقل من رابط الى رابط و الpanel مفتوحة @سمير عبود @عبدالباسط ابراهيم

اعتذر عن فهم السؤال بطريقة سهله ... يمكن استخدام الاتي لتحقيق المطلوب {% if user.is_authenticated %} <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" ariahaspopup="true" aria-expanded="false"> {{ user.username }} <span class="caret"></span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="{% url 'profile' %}">profile</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">language</a> <ul class="dropdown-menu"> <a class="dropdown-item" href="#">Item 1</a> <a class="dropdown-item" href="#">Item 2</a> </ul> </div> <a class="dropdown-item" href="{% url 'logout' %}">logout</a> </div> </div> {% else %} <div class="col-lg-6 d-flex align-items-center justify-content-end"> <a class="btn btn-dark py-2 px-4 d-none d-lg-block" href="#">{% trans 'Join Now' %}</a> <a class="btn btn-outline-primary py-2 px-4 ml-2 d-none d-lg-block" href="{% url 'login' %}">{% trans 'Login' %}</a> </div> {% endif %} تم استخدام الصنف "dropdown-submenu" لإنشاء العناصر الفرعية للقائمة المنسدلة, يتم ضبط هذه العناصر كعناصر فرعية متداخلة داخل عنصر فرعي آخر. تأكد من تضمين ملفات Bootstrap و javascript Bootstrap اللازمة وتوفيرها في المسار الصحيح. وهذه الصورة توضح الذي طلبته

أعتقد أن السبب في هذا السلوك هو استخدام ال toggle في الجزء الثاني من ال addEventListener لذلك حاول تغيير الدالة toggle إلى classList.add وقم بحفظ التعديلات والإطلاع على النتيجة وإن لم تعمل كما تريد يفضل رفع ملفات المشروع

أعتقد أنك تتحدث عن الحالة التي يكون فيها أحد ال panels مفتوح، فتضطر إلى الضغط مرتين في أول مرة يتم إغلاق ال panel المفتوح و في المرة الثانية لفتح ال panel المعني. في هذه الحالة تحتاج عند الضغط ضمان غلق كل ال panels ما عدا العُنصر المعني تتركه على حالته و تقوم بتبديل حالته بوحده إن كان ظاهر تُخفيه إن كان مخفي تُظهره، لست مُلم بكافة العناصر التي لديك في الهيكلية لذلك المثال البسيط التالي مشابه للحالة التي تريد تطبيقها: Html: <ul> <li class="link" data-href="para1">Link 1</li> <li class="link" data-href="para2">Link 2</li> <li class="link" data-href="para3">Link 3</li> </ul> <div class="content"> <p class="para d-none" id="para1">Content 1</p> <p class="para d-none" id="para2">Content 2</p> <p class="para d-none" id="para3">Content 3</p> </div> لدي 3 عناصر li و 3 عناصر p و كل عُنصر li مرتبط مع فقرة، إفتراضياً كل الفقرات مخفية، عند الضغط على li يتم إظهار و إخفاء عُنصر الفقرة المرتبط به و هذا كود الجافاسكربت: var links = document.querySelectorAll('.link') links.forEach(function(link) { link.addEventListener('click', function(event) { var targetElId = this.getAttribute('data-href') var relatedPara = document.getElementById(targetElId) // ensure hide all paragraph except the current one document.querySelectorAll('.para').forEach(function(p) { if(p.getAttribute('id') != targetElId) { p.classList.add('d-none') } }) // toggle related paragraph relatedPara.classList.toggle('d-none') }) }) المثال موجود على Codepen للتجربة: https://codepen.io/SamirAbboud/full/ExGbgBK

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

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

اختيار استخدام لغة "C" أو "C++" يعتمد على حاجتك ومتطلبات المشروع الذي تعمل عليه. إليك بعض النقاط التي يمكن أن تساعدك في اتخاذ القرار: عند استخدام لغة البرمجة C أنظمة التشغيل: تم إنشاء لغة C للاستخدام مع نظام التشغيل UNIX، ولا تزال مفيدة في مجال أنظمة التشغيل حتى اليوم. لذلك، يعتبر تعلم لغة C خيارًا جيدًا إذا كنت ترغب في تعلم أنظمة التشغيل وتجربة العمل على طبقة نظام التشغيل. تعتمد لينكس بشكل كبير على لغة C، وقد يتطلب تعلم برمجة لينكس معرفة بلغة C. تعتبر لغة C خيارًا شائعًا للاستخدام في الأجهزة المدمجة. حيث يحتاج الأجهزة المدمجة إلى نظام حوسبة محدد الغرض للعمل كوحدة مستقلة. النواة والمشغلات (Drivers): باعتبارها لغة متوسطة المستوى، تعتبر لغة C خيارًا رائدًا للاستخدام في البرمجة على مستوى منخفض لكتابة النصوص البرمجية للنواة والمشغلات. وهذا ليس مفاجئًا نظرًا لأن النواة والمشغلات يعملان على جوانب من النظام. بالمقارنة مع C++, تعتبر لغة C أبسط وأسرع لغة برمجة. اللغة C هي تقليدية ولا تدعم الفصائل والكائنات، مما يعني أنها تحتوي على وظائف أقل من C++. وهذا يتيح لك قضاء وقت أطول في التركيز على ما يمكنك القيام به باستخدام مكتبات C، خاصة على مستوى نظام التشغيل. مع وجود C++ الذي يستند إلى لغة C، سيجعل تعلم اللغة C تعلم اللغة C++ أسهل في المستقبل. كان C++ يعرف في الأصل بـ "C مع فصائل". عند استخدام لغة البرمجة C++: الألعاب: تعتبر C++ قوة سائدة في ألعاب الفيديو. إنها أقرب إلى الأجهزة بالمقارنة مع معظم اللغات الأخرى و، نتيجة لذلك، يمكنها التلاعب بالموارد بسهولة. تبرز C++ في السرعة، مما يتيح لها التغلب على تعقيدات الألعاب ثلاثية الأبعاد والشبكات المتعددة الطبقات. الرسومات: تتميز اللغة أيضًا في مجال الرسومات ورؤية الحاسوب. نظرًا لأن هذه المهام تتطلب قوة حسابية كبيرة، فإن C++ هي الخيار الأفضل للبرمجة. يمكنها توفير السرعة والكفاءة اللازمة لعرض الرسومات على الشاشة. متصفحات الويب: تستخدم C++ على نطاق واسع في العديد من متصفحات الويب الحديثة مثل Chrome وFirefox وSafari. تعتمد متصفحات الويب على اللغة بشكل خاص لمحركات العرض الخاصة بها. توفر C++ السرعة التي تحتاجها متصفحات الويب لعرض المحتوى بسرعة كافية. أسباب أخرى لاستخدام C++: بالمقارنة مع C، يحتوي C++ على مكتبات ووظائف أكثر بكثير يمكن استخدامها. إذا كنت تعمل على برمجيات معقدة، فإن C++ هي الخيار الأفضل لأن لديك المزيد من المكتبات التي يمكنك الاعتماد عليها.

لغة سي بلس بلس (C++) لها أهمية كبيرة في مجالي الـAI وأمن المعلومات للأسباب التالية: تتميز C++ بالسرعة بفضل أنها لغة مختلطة تدعم البرمجة المتعددة والوصول المباشر للمعالج. مما يجعلها مثالية لتطبيقات AI مثل deep learning. ميزة مهمة في مجال أمن المعلومات حيث تستخدم C++ في برمجة نظم التشغيل وتطبيقات أمنية حرجة. توفر مكتبات قوية مثل OpenCV (للرؤية الحاسوبية) وCaffe وTensorFlow (للـAI) تعزز من قدراتها. ولكن ربما تجد python منتشره بشكل أكبر في ال AI أو أمن المعلومات وذلك لأنه ليس هناك حاجة للغة قوية لبرمجة الذكاء الاصطناعي. يستخدم معظم المطورين مكتبات مثل Keras وTorch وCaffe وWatson وTensorFlow وغيرها. تلك المكتبات على مستوى منخفض مُحسنة بشكل كبير وتتعامل مع جميع المهام الصعبة. تم بناؤها باستخدام لغات عالية الأداء مثل C و C++. بينما البايثون مستخدمة فقط للمهام على مستوى عالٍ مثل وصف طبقات الشبكة العصبية، وتحميل البيانات، وتشغيل المعالجة، وعرض النتائج. استخدام C++ للمهام على مستوى عالٍ بدلاً من البايثون لن يوفر تحسينًا في الأداء يذكر، ولكن سيكون أصعب بالنسبة لغير المطورين حيث يتطلب الاهتمام بإدارة الذاكرة. بالإضافة إلى ذلك، قد لا يكون لدى العديد من أشخاص الذكاء الاصطناعي خلفية قوية في البرمجة أو علوم الحاسوب. مثال آخر مماثل هو تطوير الألعاب، حيث يتم برمجة المحرك باستخدام C/C++، وغالبًا ما يتم كتابة منطق اللعبة بلغة ذات مستوى أعلى. بالنسبة للسؤال لماذا توجد لغة سريعة عن غيرها مثل ++c ؟ يمكنك قراءة الإجابات التالية

لغة C++ لها أهمية كبيرة في مجالي الذكاء الاصطناعي (AI) وأمن المعلومات (Information Security) على النحو التالي:- لغة C++ معروفة بأدائها العالي، وهذا يجعلها مثالية لتطبيقات AI التي تتطلب معالجة كبيرة للبيانات والحسابات المعقدة. في AI، تحتاج النماذج العميقة والخوارزميات المعقدة إلى أداء عالي لمعالجة مجموعات البيانات الكبيرة والتعامل مع العمليات الحسابية المعقدة بفعالية. C++ تسمح للمطورين بالتحكم الكامل في إدارة الذاكرة، مما يسمح بتحسين أداء تطبيقات AI وضمان عدم وجود تسريبات ذاكرة أو مشاكل أمان. هناك العديد من المكتبات والإطارات (Frameworks) المتاحة باللغة C++ التي تمكن مطوري AI من بناء وتطوير نماذج AI متقدمة بسهولة، مثل OpenCV و TensorFlow. C++ توفر مستوى عالي من السيطرة على تعامل المعلومات والبيانات، وهذا مهم في مجال أمن المعلومات حيث يجب ضمان عدم تسريب المعلومات أو استخدامها بطرق غير مصرح بها. في مجال AI وأمن المعلومات، قد تكون هناك حاجة لأداء عالي واستخدام المعالجة الموازية والبرمجة منخفضة المستوى، وهذا يعتبر نقطة قوة لـ C++. بالنسبة لمقارنة C++ بـ Python في مجال AI وأمن المعلومات، يمكن القول أنهما يتممان بعضهما البعض بدلاً من منافسة. Python تستخدم على نطاق واسع في تطوير تطبيقات AI بسبب سهولة الاستخدام والتعلم، ولكن C++ تأتي بفوائد أداء أعلى وتحكم أعمق في الموارد والذاكرة. أما بالنسبة لسرعة C++، فهذا يعود إلى تصميمها وطريقة تنفيذها. إنها تتيح للمطورين التحكم الكامل في الذاكرة وتقديم تعليمات برمجية على مستوى منخفض، مما يسمح بتحسين الأداء وتحقيق سرعة أعلى في التنفيذ.

كحل و توجه بسيط تستطيع إنشاء حقل (is_admin) في جدول المستخدمين لتمييز المُستخدم العادي عن المستخدم المُشرف، تقوم بتحديد الحقل بالقيمة 0 إفتراضياً و هذا يعني أنه مستخدم عادي و عندما تكون قيمة الحقل 1 مثلاً فذلك يعني أن المُستخدم مُشرف. تُنشئ صفحة لا يستطيع الوصول لها إلا المشرفين، و تضمن ذلك من خلال الحقل is_admin، تجلب كافة المنشورات و تعرضها في الصفحة. بخصوص المنشورات أيضاً تضع حقل approved في جدول المنشورات و تضع له قيمة إفتراضية 0 أي غير مقبول، و عند تعديل الحقل إلى 1 يُصبح مقبول، و تقوم بإتاحة ذلك في صفحة الأدمن التي أنشأتها، و تضيف الوظائف التي تريدها كالتعديل و الحذف و ما إلى ذلك. في صفحة عرض المنشورات العامة تقوم فقط بعرض المنشورات المقبولة (أي المنشورات التي تملك القيمة 1 في الحقل approved) تقوم بربط نموذج المنشورات بنموذج المستخدمين عبر علاقة من خلال مفتاح ثانوي user_id في جدول المنشورات. هذا بشكل مُختصر، إن أردت يُمكنك الإستفسار أكثر عن النقاط التي لم تفهمها و سنوضحها لك.

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

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

من أجل مساعدتك بشكل أفضل، يرجى تقديم مزيد من التفاصيل حول الخطأ الذي تواجهه أثناء محاولة تثبيت مكتبة في مشروع React Native. يمكنك تقديم المعلومات التالية: 1. الأمر الذي تستخدمه لتثبيت المكتبة. 2. رسالة الخطأ التي تظهر عند محاولة التثبيت. 3. نسخة مشروع React Native الذي تعمل عليه (مثل React Native 0.63، 0.64، إلخ). 4. نوع نظام التشغيل الذي تستخدمه (Windows، macOS، Linux). 5. أي معلومات إضافية قد تعتقد أنها ذات صلة. هناك بعض الخطوات العامة التي يمكن أن تساعد في حل مشكلة تثبيت المكتبات في مشروع React Native عندما تواجه مشاكل. إليك بعض الخطوات التي يمكنك اتخاذها: 1. تحديث npm أو Yarn: تأكد من أن لديك أحدث إصدار من npm أو Yarn. يمكنك تحديث npm باستخدام الأمر npm install -g npm وتحديث Yarn باستخدام npm install -g yarn 2. حذف مجلد node_modules وملف package-lock.json (أو yarn.lock): ومن ثم قم بتشغيل الأمر `npm install` أو `yarn` مرة أخرى لإعادة تثبيت المكتبات. 3. استخدام بروكسي أو VPN: في بعض الحالات، قد يكون هناك قيود على الاتصال بمستودعات npm أو Yarn. يمكنك استخدام بروكسي أو VPN لتجاوز هذه القيود. 4. التحقق من مشكلات الشبكة: تأكد من أن لديك اتصال إنترنت جيد وأن ليس هناك مشاكل تمنع التنزيل. 5. التحقق من تحديثات المكتبة: تأكد من أن المكتبة التي تحاول تثبيتها متوافقة مع إصدار مشروع React Native الذي تستخدمه.

أشرت أن تثبيتك لأي مكتبة ينتهي بخطأ وهذا أمر له إحتمالات عديدة نذكر منها: أنت تكتب أمر تثبيت خاطيء فيظهر لك أن الأمر غير معرف comand not found أن تكتب الأمر الصحيح لكنك لست في مسار المشروع الرئيسي حيث يتواجد ملف package.json التي يتم تعريف الحزم فيه. أن يكون ملف package.json تالفاً أو يحتوي على أخطاء في ال syntax وهو أمر شائع الحدوث وعند محاولة تنفيذ أمر التثبيت يظهر لك syntax error.

ما هو الخطأ الذي يظهر لك، يجب تحديد الخطأ لحل المشكلة، وربما لديك تعارض في إصدارات الحزم conflict peer dependencies ولحل المشكلة، عليك باستخدام مؤشر أو --legacy-peer-deps عند التثبيت أي كالتالي: npm i --legacy-peer-deps والسبب أنه بعض الأحيان، يكون من الصعب تثبيت حزم معينة بسبب تبعيات النظائر القديمة، وقد يحدث ذلك عندما تكون الحزمة الأصلية معتمدة على نسخة محددة من حزمة، ولكن نسخة أحدث من تلك الحزمة مثبتة بالفعل ويتعارض ذلك مع التبعية. ومن الأفضل استخدام الحزم المتوافقة مع بعضها، من خلال تحديث الحزم من خلال تشغيل حزمة npm-check-updates بالأمر التالي: npx npm-check-updates وسيتم تحديث إصدارات الحزم في ملف package.json والآن عليك بالتثبيت من خلال الأمر npm i. ولكن انتبه إلى أن تحديث الحزم إلى آخر إصدار قد يتعارض مع الكود الخاص بمشروعك في حال كانت الإصدارات الجديدة تتطلب تعديل على الكود.

كلًا من NPM و PNPM يقوم بإدارة وتحميل الحزم الخاصة بـ Node.js ولكن بطرق مختلفة، فبداية من الإصدار 3 في NPM أصبح يتم تحميل الحزم وتخزينها في مجلد node_modules على شكل flattened dependency tree أي أن كل حزمة يكون لها مجلد خاص بها منفصل عن باقي الحزم بالكامل، وبالتالي يمكن لأكثر من مكتبة أن تستعمل نفس الحزمة بدون الحاجة لتحميل الحزمة مرتين (مرة لكل مكتبة) في المشروع الواحد، وبالتالي هذا الأمر يوفر في المساحة المستخدمه لتخزين الحزم والمكتبات في المشروع، ولكن بالنسبة لمشروع آخر فيجب أن يتم تحميل الحزم مرة أخرى وتخزينها في مجلد node_modules جديد خاص بالمشروع الثاني، وهذا الأمر يسبب في بطء عملية تحميل وتثبيت الحزم وخصوصًا إن كنت تعمل على مشاريع متعددة. على الجانب الآخر يستعمل PNPM طريقة مختلفة لتثبيت الحزم، حيث يتم تثبيت الحزم والمكتبات في مكان عام (على القرص C على سبيل المثال) ثم يتم عمل إختصار (hard linking and symbolic linking) لمجلد الحزمة في مجلد node_modules الخاص بالمشروع، وبالتالي لا يتم تحميل وتثبيت الحزمة إلا مرة واحدة ثم يتم إستعمالها في كل المشاريع المختلفة بدون مشكلة. هنا مثال لكيف سيبدو مجلد node_modules في حالة تم إستعمال PNPM، حيث ستجد أن المجلد الخاص بكل حزمة يشير إلى مجلد بنفس الاسم ولكن في مكان مختلف (داخل مجلد التثبيت العام والذي يشار إليه في الشكل التالي بـ <store>): node_modules └── .pnpm ├── bar@1.0.0 │ └── node_modules │ └── bar -> <store>/bar │ ├── index.js │ └── package.json └── foo@1.0.0 └── node_modules └── foo -> <store>/foo ├── index.js └── package.json يمكنك تثبيت PNPM من خلال الأمر التالي: npm install -g pnpm ويمكنك أن تستخدمه لتثبيت الحزم أو حذفها أو تحديثها من خلال الأوامر: pnpm add <pkg> pnpm remove <pkg> pnpm up <pkg>

مجلد المشروع لا يوجد به مجلد الخادم، بل مجلد الـ client مكرر مرتين ولكن بداخل مجلد server