عمر قره محمد

يبدو انك لم تقم بفتح الملف الحاوي على المشروع باستخدام vs. قم بفتح المجلد الحاوي على المشروع كالتالي : ثم اختر المجلد الحاوي على المشروع. وبعدها جرب الامر : npm start

يمكن لشخص واحد فقط بناء موقع الكتروني متكامل، وذلك باستخدام منصات الـ CMS (content management system) مثل woocommerce و shopify ..إلخ ومن المنصات العربية يوجد سلة وغيرها ويمكنك بناء هذه المتاجر حتى بدون ان تملك اي خبرة في مجال تطوير الويب. حيث تقوم هذه المنصات بالتكفل بالـ backend وتسهل عليك بناء الـ frontend كثيراً وهي تساعد بعملية الدفع وغيرها من متطلبات المتجر الالكتروني. وهذا المقال مهم في هذه الناحية : دليلك لاختيار أفضل منصات التجارة الإلكترونية وقد يفيدك النقاش التالي : أما بالنسبة لبناء المتجر الالكتروني من الصفر وبدون استخدام CMS فهذا يحتاج لفريق كامل أو على الاقل يحتاج إلى مطور full stack خبير. لأنه يحتاج منك ان تعرف بالـ frontend و الـ backend وان تملك خبرة في مجال الحماية وخبرة في التعامل مع شركات الدفع الالكتروني والربط مع المواقع.

المهارات الكافية لإصلاح الاخطاء البسيطة التي قد يقع فيها المصمم، أو تعديل التصميم بشكل معين حتى تجعل الصفحة اكثر سرعة (مثل حذف صورة معينة من التصميم ..إلخ ). واعتقد انه يكفي تعلم الاساسيات فقط. قد فيدك الاطلاع على النقاش التالي : https://io.hsoub.com/Advice/114009-ما-الفرق-بين-أن-تصبح-مصمم-ويب-أو-مصمم-تجربة-مستخدم-وأيهما-أفضل

يمكنك الوصول إليها من هذا الرابط :

اغلب الشركات تملك designer و frontend developer، حيث يأتيك ملف الـ xd أو غيره من برامج التصميم وتكون مهمتك هي تحويله إلى اكواد. ولكن في حالات كثيرة قد يتم اعطاء بعض مهام الـ designer للـ frontend developer، ويجب على الـ frontend developer أن يمتلك بعض المهارات في التصميم حتى وإن لم يكن سيعمل كـ designer. أما في مجال العمل الحر فأغلب الاعمال تتطلب منك ان تكون designer و frontend developer، وحتى backend developer في اغلب الحالات.

نعم يوجد في الدورة شرح كافي عن كيفية رفع الموقع على GitHub ولكن ذلك لا يمنع من التعلم اكثر عن GitHub اثناء دراسة الدورة. فمن المهم ان تملك مهارات جيدة في التعامل مع git و GitHub. ولقد قمت اكثر من مرة بشرح كيفية رفع الموقع على GitHub بالتفصيل في نقاشات سابقة ويمكنك الاطلاع عليها من هنا : وهذه المقالة الاولى من سلسلة مقالات تشرح الـ git بشكل شامل :

في البداية إن المقارنة بين JavaScript و Flutter هي مقارنة خاطئة وذلك لأن Flutter هي بيئة عمل بينما JavaScript هي لغة برمجة. والمقارنة الصحيحة هي بين JavaScript و Dart أو React Nativeو Flutter. حيث ان Dart هي لغة البرمجة و Flutter هي بيئة العمل الخاصة . تقريباً ولكن مع وجود فروقات بالتأكيد. هنالك العديد من الاسباب لذلك، منها تقنية ومنها ما يتعلق بسياسات الشركات، وكذلك ميزات اللغات عن بعضها البعض وطبيعة التطبيقات التي تعمل عليها الشركة وقد يلعب فريق العمل دوراً كذلك، فمثلاً إن كان مطوروا الـ backend لديك يتقنون node سترغب اكثر باستخدام React Native. اطلع على :

نستخدم getElementsByClassName عندما نريد التعامل مع مجموعة من العناصر بنفس الطريقة مثل التعامل مع مجموعة من الازرار لها نفس الوظيفة في صفحة الويب. بينما الـ getElementById نستخدمها للتعامل مع عنصر واحد له وظيفة واحدة محددة فقط. والفرق بين الاثنين هو أن الـ getElementsByClassName تعيد مصفوفة تحتوي كل العناصر التي تملك الـ class المعطى بينما الـ getElementById تعيد عنصر واحد فقط. للإيضاح اكثر إليك لاحظ السؤال التالي : إذا كان لدينا 4 عناصر من النوع section ونريد تغيير المحتوى الخاص بهم باستخدام js فأي من الوظيفتين السابقتين يجب ان نستخدم ؟. الجواب هو الوظيفة getElementsByClassName. اطلع على getElementsByClassName من موسوعة حسوب اطلع على getElementById من موسوعة حسوب تعرف اكثر عن الكائن المستند Dom ووظائفه من خلال المقالة التالية :

جرب الامر : npm i @craco/craco@6.4.3

افعل كما يظهر لك في نص رسالة الخطأ : npm update react-scripts والافضل هو استخدام : npm i @craco/craco@6 اي تعديل اصدار المكتبة الجديدة بدلاً من تغير اصدار مكاتب react

تستطيع حل المشكلة بكتابة امر التنزيل بالشكل : npm install --legacy-peer-deps @craco/craco أو بالشكل : npm install --force @craco/craco لتجاوز المشكلة. والحل السابق يظهر في رسالة المشكلة التي ظهرت لك لو ركزت قليلاً. وهنالك حل ثالث وهو ان تقوم باستخدام اصدار اقدم من @craco/craco كأن تستخدم 6 بدلاً من 7 : npm i @craco/craco@6

لم افهم مشكلتك تماما، قم بشرح المشكلة بوضوح وكذلك قم بمشاركة الكود.

المشكلة انه لا يوجد إلا عنصر واحد يحمل الكلاس المسمى descrition وبالتالي فإن الكود التالي : let allparagraphs = document.getElementsByClassName("descrition") سيعيد مصفوفة تحتوي عنصر واحد. وهذا يعني أن الكود التالي : allparagraphs[1].innerHTML سيعيد undefined لأنه لا يوجد اي عنصر في الترتيب 1 في المصفوفة allparagraphs. وهذا يعود لكون الترتيب في المصفوفات في JS يبدأ من الصفر ولأنه لا يوجد إلا عنصر واحد في المصفوفة والذي ترتيبه 0 فسيكون الترتيب 1 فارغاً وسعيد الكود السابق القيمة undefined. ولحل المشكلة هنالك طريقتين : أن تضيف عنصر ثاني يحمل الكلاس descrition فيصبح كود الـ html كالتالي : <h1 id="title"></h1> <p class="content"></p> <p class="descrition"></p> <p class="descrition"></p> او تحضر العنصر صاحب الترتيب 0 بدلاً من الترتيب 1 : // allparagraphs[1].innerHTML = "This is the second Paragraph" نحذف هذا allparagraphs[0].innerHTML = "This is the second Paragraph" // ونضيف هذا

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

جرب جعل الـ state بشكل array مثل : const [selected, setSelected] = useState([]); وتقوم بإضافة كل الـ index إليه كالتالي : const handleClick = (id) => { // نفحص إن كانت الحالة تحتوي على العنصر وعندها نقوم بحذف العنصر if(selected.includes(id)) setSelected(selected.filter(item=> item !== id)) // إذا لم تكن تحتوي على العنصر فنقوم بإضافته else setSelected([...selected , id]) } وهكذا يصبح الـ selected هو عبارة عن مصفوفة العناصر المحددة، وتعدل كود الـ jsx للشكل : <div className = { selected.includes(i) ? "seat selected" : "seat"} key={i} onClick = {()=>handleClick(i)} ></div>

يمكنك فعل ذلك باستخدام الـ dom كالتالي : <div className = {index === i ? "seat selected" : "seat"} key={i} onClick = {e=> { const bg = e.target.style.background; if(bg === "red") e.target.style.background = "gray"; else e.target.style.background = "red"; }}> </div> ولست بحاجة لاستخدام الـ hooks هنا. والوظيفة السابقة تتحقق من لون العنصر، فإذا كان احمر تقوم بتحويله إلى رمادي وإن كان رمادي تعيده إلى اللون الاحمر.

هل يمكنك ايضاح سؤالك بشكل افضل.

لا يوجد شرح في دروة تطوير التطبيقات باستخدام لغة JavaScript شرح لـ tailwindcss واستخدامه مع react. وذلك لأن الدورة تركز على الاساسيات بينما استخدام tailwindcss مع react سيزيد من تعقيد الدورة وهو موضوع متقدم يمكنك تعلمه بعد الانتهاء من مسار react في الدورة. وقد يفيدك النقاش التالي في اخذ فكرة عن العملية : كذلك يمكنك تقديم طلب لإضافة شرح لهذه النقطة إلى الدعم من هنا

انشئ كود html كالتالي : <!-- الحاوية الكبيرة والتي تحتوي على السليدر --> <div class="slideshow-container"> <!-- صور بالحجم الكامل مع رقم و نص --> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img1.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img2.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img3.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <!-- ازرار السليدر --> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <!-- النقاط التنقل التي تظهر في منتصف السليدر --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> كود الـ css : * {box-sizing:border-box} /* تنسيق الحاوية */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* اخفاء الصور بالحالة الافتراضية */ .mySlides { display: none; } /* تنسيقات زر السابق والتالي */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* تنسيق موضع زر التالي */ .next { right: 0; border-radius: 3px 0 0 3px; } /* على ازرار التنقل hover التنسيقات الخاصة بالـ */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* تنسيق النص الموجود بالسلايدات */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* تنسيق الارقام الموجودة بالسلايدات */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* تنسيق نقاط التنقل الموجودة في منتصف السلايدر */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* الانميشن الخاص بحركة السليدر */ .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } اكواد الـ js : let slideIndex = 1; showSlides(slideIndex); // التحكم بازرار السابق والتالي function plusSlides(n) { showSlides(slideIndex += n); } // التحكم بنقاط التنقل الموجودة في المنتصف function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } وهذا مثال حي عن الـ slider الذي قمت بمشاركة الكود الخاص به معك : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

المشكلة الرئيسية انك تقوم بتشفير كلمة السر مرتين، المرة الاولى في الـ route المسمى register والثانية ضمن الوظيفة create نفسها حيث انك قمت بإعداد الـ module لتقوم بالتشفير بشكل تلقائي وذلك في الملف User.js. وهذا هو الكود الخاص بك بعد التعديل ولقد اشرت إلى الاكواد التي عدلتها : // signup post router.post("/register", async (req, res) => { try { // hash password // create انت تقوم بالفعل بتشفير كلمة المرور قبل الحفظ في الوظيفة // req.body.password = await bcrypt.hash( خطا // req.body.password, خطا // await bcrypt.genSalt(10)); خطا // generate te user const user = await User.create(req.body) // response res.json({ status: "User Created" }); } catch (error) { res.status(400).json({ error }); console.log(error) } }) // login post router.post("/login", async (req, res) => { try { // console.log(email + "0"); // خطا، تقوم باستخدام المتغير قبل تعريفه // const {email} = req.body.email خطا // const { password } = req.body.password خطا const email = req.body.email // معدل const password = req.body.password // معدل // get the user const user = await User.findOne({ email }) console.log(email + "1"); if (user) { console.log(password, user.password) const passwordCheck = await bcrypt.compare(password, user.password) console.log(email + "2"); if (passwordCheck) { const payload = { email } const token = jwt.sign(payload, process.env.JWT_SECRET) console.log(email + "3"); res .cookie("token", token, { httpOnly: true }) .json({ payload, status: "logged in" }); console.log(email + "4"); } else { // res.status(400).json(error) // error خطا، لا يوجد متغير بهذا الاسم res.status(400).json({ error: "wrong password!" }) // معدل console.log(email + "5"); } console.log(email + "6"); } else { res.status(400).json({ error: "User does not exist!" }) } } catch (error) { res.status(400).json({ error }); } })

هل يمكنك مشاركة ملفات المشروع حتى اتمنك من تجريب الكود.

نعم هي كافية بدرجة كبيرة بالنسبة لـ JavaScript ويمكنك الاعتماد عليها تماما إن كنت تريد موسوعة عربية وهي الافضل في الساحة العربية. والموسوعة في تطور مستمر ويتم تحديثها باستمرار. نعم بالفعل يوجد مثل هذه الدورات والكورسات ويمكنك الوصول إليها عبر الانترنت وإن كنت شخصياً افضل قراءة التوثيق المقدم من support.google وهو يتوفر باللغة العربية. يمكنك الوصول إليه من هنا وإذا كنت تحاول الوصول إلى شرح لفكرة معينة من الدورة فيمكنك البحث في محرك البحث الخاص بالأكاديمية نفسها وقد تجد مقالاً او اكثر يتحدث عن الفكرة التي تحاول فهمها وهذه مجموعة من المقالات الموجودة بالفعل على الأكاديمية والتي تناقش المفاهيم التي ذكرتها أما بالنسبة للمواضيع التي تحدثت عنها فهذه بعض المقالات التي قد تفيدك فيها : وبالنسبة للـ inheritance و الـ Prototype :

يمكنك فعل ذلك كالتالي : قم بإنشاء مجلد جديد من اجل المشروع وليكن اسمه sqlite وقم بفتح المجلد باستخدام vs code. بعد ذلك قم بكتابة الأمر : git init -y من اجل انشاء مشروع node جديد وبعد ذلك قم بتنزيل الحزم الضرورية : npm install express body-parser sqlite3 نقوم بعد ذلك بإنشاء مجلد جديد داخل المجلد sqlite ونسيمه public وهو الذي سيحتوي على ملف الـ html الخاص بنا. نقوم بإنشاء ملف index.js وهو الذي سيحتوي الكود الخاص بالخادم كالتالي : // استدعاء ملفات الخادم var express = require("express") var app = express() const path = require("path") // منفذ الخادم var HTTP_PORT = 3000 // تشغيل الخادم app.listen(HTTP_PORT, () => { console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT)) }); // متاحاً public اعداد الخادم لكي يجعل المجلد app.use(express.static(path.join(__dirname, 'public'))) // **************************************** // الكود الخاص بقاعدة البيانات // **************************************** // استدعاء ملفات قاعدة البيانات var sqlite3 = require('sqlite3').verbose() // مسار قاعدة البيانات const DB_SOURCE = "db.sqlite" // انشاء قاعدة البيانات let db = new sqlite3.Database(DB_SOURCE, (err) => { if (err) { // في حال فشلت العملية console.error(err.message) throw err } else { console.log('تم الاتصال بقاعدة البيانات بنجاح') db.run(`CREATE TABLE users ( id INTEGER PRIMARY KEY AUTOINCREMENT, name text, email text UNIQUE, password text, CONSTRAINT email_unique UNIQUE (email) )`, (err) => { if (err) { console.log("الحقل منشئ بالفعل"); } else { console.log("تم انشاء الحقل بنجاح"); } }); } }); // استدعاء ملفات مفسر الطلبات var bodyParser = require('body-parser') // application/x-www-form-urlencoded من اجل قبول الطلبات من النوع app.use(bodyParser.urlencoded({ extended: false })) // application/json من اجل قبول الطلبات من النوع app.use(bodyParser.json()) // المسار الخاص بحفظ مستخدم جديد app.post("/users", (req, res, next) => { // احضار البيانات من الطلب const { name, email, password } = req.body; // اضافة البيانات إلى قاعدة البيانات db.run('INSERT INTO users (name, email, password) VALUES (?,?,?)', [name, email, password], (error, result) => { if (error) { res.send("مشكلة في حفظ البيانات على الخادم") console.log("مشكلة في حفظ البيانات على الخادم\nرسالة المشكلة :\n", error); } else res.send("تم حفظ المستخدم بنجاح") }) }); // المسار الخاص بإحضار البيانات app.get("/users", (req, res, next) => { // متغير فارغ فلنسا بحاجة لإضافة خواص في هذا المثال var params = []; // احضار المستخدمين من قاعدة البيانات db.all("select * from users", params, (error, rows) => { if (error) { res.send("مشكلة في احضار البيانات من الخادم") console.log("مشكلة في احضار البيانات من الخادم\nرسالة المشكلة :\n", error); } else res.json(rows) }); }); // الاستجابة الافتراضية app.use(function (req, res) { res.status(404); }); ثم نقوم بإنشاء ملف index.html داخل مجلد الـ public ونكتب فيه الكود التالي : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>example</title> </head> <body> <form onsubmit="handleSubmit(event)"> <div><label for="name">ادخل اسم المستخدم</label> <input type="text" id="name" placeholder="ادخل اسم المستخدم"> </div> <div><label for="email">ادخل البريد الالكتروني</label> <input type="email" id="email" placeholder="ادخل البريد الالكتروني"> </div> <div><label for="password">ادخل كلمة السر</label> <input type="password" id="password" placeholder="ادخل كلمة السر"> </div> <button type="submit">تسجيل</button> </form> <!-- رابط المستخدمين المسجلين --> <a href="/users">الاطلاع على المستخدمين المسجلين</a> <script> // الوظيفة الخاصة بإرسال البيانات إلى الخادم function handleSubmit(e) { // احضار القيم الخاصة بالنموذج const name = document.getElementById("name").value; const email = document.getElementById("email").value; const password = document.getElementById("password").value; // الغاء التصرف الافتراضي للنموذج e.preventDefault() // إرسال الطلب إلى الخادم fetch("/users", { // نوع الطلب method: "POST", // اعداد نوع البيانات والذي يتم إرساله في رأس الطلب headers: { "Content-Type": "application/json", // 'Content-Type': 'application/x-www-form-urlencoded', }, // حفن البيانات في جسم الطلب body: JSON.stringify({ name, email, password }), }).then(result => console.log(result))// طباعة الاستجابة التي سنحصل عليها .catch(error => console.log(error)) // طباعة الاخطاء في حال ورودها } </script> </body> </html> ملفات المشروع بالكامل : sqlLite.zip

هذا يعني انك لم تقوم برفع المشروع بالشكل الصحيح. قم بحذف ملف الـ .git من ملفات المشروع الخاص بك ثم تأكد من انك في المسار الصحيح و جرب كتابة الاوامر التالية بالترتيب : git init git add . git commit -m "first commet" git remote add origin url حيث تضع الطراب الموجود في GitHub بدلاً من الـ url :

شارك ملفات المشروع حتى نستطيع اللاطلاع على سبب المشكلة.