كل الأنشطة

حليت مشكلة المشكلة كانت غريبة هي بسبب GitHub حيث في مستودع قمت برفعه قبل رفع على ريندر وبذالك الاكواد في جيت هب كانت localhost

اختبر المشروع على حاسوبك إذن، وقم بتبديل رابط قاعدة البيانات برابط atlas وقم بمحاولة تسجيل حساب جديد، هل يتم الأمر بشكل سليم؟

تمام حليت مشكلة

الخادم يعمل، في حال لا يعمل، فستحصل على رسالة خطأ عند زيارة الرابط: https://pinterest-clone-3ans.onrender.com هل قمت بتعيين قيم لمتغيرات البيئة بشكل صحيح على الاستضافة؟ وبالأخص رابط قاعدة البيانات على Atlas

لا توجد اي مشاكل في Logs ومع ذالك خادم لا يعمل

الخادم يعمل لا مشكلة فهو يعرض رسالة hell bun عند زيارة الرابط، قمت بمحاولة التسجيل فحدث خطأ، ما هي الأخطاء التي تظهر في الـ logs على الاستضافة؟

انا انتهيت من مشروعي Fullstack بستخدام Bun.js Express react ورفعت مشروع على render واخدت رابط وحطيته ب fetch API وفي cors قبل رفع على ريندر انا حاطت رابط مشروع وMongoDB atlas IP عالمي ورفعت مشروع على نتليفاي بعد بنائه ولم يعمل خادم رابط خادم https://pinterest-clone-3ans.onrender.com رابط مشروع https://www-pinterest-clone.netlify.app/ import { useEffect, useState } from "react"; import toast from "react-hot-toast"; import "./profile.css"; import { FaDeleteLeft, FaPenClip } from "react-icons/fa6"; import { useNavigate } from "react-router-dom"; interface Image { _id: string; title: string; description: string; imageUrl: string; } const Profile = () => { const [images, setImages] = useState<Image[]>([]); const [loading, setLoading] = useState(false); const [modalOpen, setModalOpen] = useState(false); const [editingImage, setEditingImage] = useState<Image | null>(null); const [newTitle, setNewTitle] = useState(""); const [newDescription, setNewDescription] = useState(""); const [newFile, setNewFile] = useState<File | null>(null); const navigate = useNavigate(); const token = localStorage.getItem("token"); useEffect(() => { const token = localStorage.getItem("token"); if (!token) { toast.error("You must log in first"); navigate("/login"); return; } }); const fetchImages = async () => { if (!token) return; setLoading(true); try { const res = await fetch("https://pinterest-clone-3ans.onrender.com/api/image/imageme", { credentials: "include", method: "GET", headers: { Authorization: `Bearer ${token}` }, }); const data = await res.json(); setImages(data); } catch (err) { console.error(err); toast.error("Failed to load images"); } finally { setLoading(false); } }; useEffect(() => { fetchImages(); }, []); const handleDelete = async (id: string) => { if (!token) return; try { const res = await fetch(`https://pinterest-clone-3ans.onrender.com/api/image/${id}`, { credentials: "include", method: "DELETE", headers: { Authorization: `Bearer ${token}` }, }); const data = await res.json(); if (res.ok) { toast.success(data.success); setImages(images.filter((img) => img._id !== id)); } else toast.error(data.error); } catch (err) { console.error(err); toast.error("Failed to delete image"); } }; const openEditModal = (img: Image) => { setEditingImage(img); setNewTitle(img.title); setNewDescription(img.description); setModalOpen(true); }; const handleUpdate = async () => { if (!token || !editingImage) return; try { const res = await fetch( `https://pinterest-clone-3ans.onrender.com/api/image/${editingImage._id}`, { credentials: "include", method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify({ title: newTitle, description: newDescription, }), } ); const data = await res.json(); if (res.ok) { toast.success(data.success); fetchImages(); setModalOpen(false); setNewTitle(""); setNewDescription(""); } else toast.error(data.error); } catch (err) { console.error(err); toast.error("Failed to update image"); } }; const handleUpload = async () => { if (!token || !newTitle || !newDescription || !newFile) { return toast.error("All fields are required for upload"); } if (newDescription.length > 60) { return toast.error("Maximum description: 60 characters"); } const formData = new FormData(); formData.append("title", newTitle); formData.append("description", newDescription); formData.append("image", newFile); try { const res = await fetch("https://pinterest-clone-3ans.onrender.com/api/image/upload", { credentials: "include", method: "POST", headers: { Authorization: `Bearer ${token}` }, body: formData, }); const data = await res.json(); if (res.ok) { toast.success(data.success); fetchImages(); setNewTitle(""); setNewDescription(""); setNewFile(null); } else toast.error(data.error); } catch (err) { console.error(err); toast.error("Failed to upload image"); } }; return ( <div className="profile-page"> <h2>Your Images</h2> <div className="upload-section"> <input type="text" placeholder="Title" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} /> <input type="text" placeholder="Description" value={newDescription} onChange={(e) => setNewDescription(e.target.value)} /> <input type="file" onChange={(e) => setNewFile(e.target.files?.[0] || null)} /> <button onClick={handleUpload}>Upload Image</button> </div> {loading && <p className="no-images">Loading...</p>} {images.length === 0 && !loading && ( <p className="no-images">No images uploaded yet.</p> )} <div className="image-grid"> {images.map((img) => ( <div key={img._id} className="image-card"> <img src={img.imageUrl} alt={img.title} /> <h3>{img.title}</h3> <p>{img.description}</p> <div className="image-actions"> <button onClick={() => openEditModal(img)}> <FaPenClip /> Edit </button> <button onClick={() => handleDelete(img._id)}> <FaDeleteLeft /> Delete </button> </div> </div> ))} </div> {modalOpen && editingImage && ( <div className="modal"> <div className="modal-content"> <h3>Edit Image</h3> <input type="text" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} /> <input type="text" value={newDescription} onChange={(e) => setNewDescription(e.target.value)} /> <div className="modal-actions"> <button onClick={handleUpdate}>Save</button> <button onClick={() => setModalOpen(false)}>Cancel</button> </div> </div> </div> )} </div> ); }; export default Profile; import express from 'express'; import dotenv from 'dotenv'; import cors from 'cors'; import { connectDB } from './utils/db'; import userRouter from './routes/user.routes'; import imageRouter from './routes/image.routes'; dotenv.config(); const app = express(); const port = process.env.PORT || 3000; connectDB(); app.use(cors({ origin: 'https://www-pinterest-clone.netlify.app', credentials: true, })); app.use(express.json()); app.get('/', (req, res) => { res.send('Hello Bun!'); }); app.use('/api/auth', userRouter); app.use('/api/image', imageRouter); app.listen(port, () => { console.log(`Server is running on port ${port}`); });

نعتذر لكِ عن أي إنزعاج أثناء تواجدك بالأكاديمية، قمت بتفقد الأمر ومنصة الأكاديمية تعمل بشكل سليم وسريع. هل لديكِ إضافة مانع إعلانات في المتصفح لديكِ؟ أحيانًا تسبب مثل تلك الإضافات مشاكل لمشغل الفيديو بالأكاديمية لسبب ما، لذا استثني الأكاديمية من المواقع التي تعمل عليها الإضافة، بمعنى ضعي الموقع في قائمة white list. أيضًا هل الإنترنت لديكِ مستقر؟ فربما يوجد مشكلة به، للتأكد في حال المشكلة تظهر على الهاتف أيضًا إذن المشكلة من شبكة الإنترنت لديك، حاولي تعديل إعدادات الـ DNS للشبكة لديكِ إلى جوجل أو Cloudflare والأداة التالية جيدة حمليها واختاري من القائمة الـ dns ثم apply https://dnsjumper.net أو ربما المشكلة في المتصفح، حاولي تحديثه أو استخدمي متصفح آخر.

للأسف الموقع سيء جداً وبطيء ويحتاج كل شوي احذف الكوكيز والكاش عشان يفتح اضافه لذلك المشكله ظاهره أمامكم أرجو الحل في اسرع وقت ، يضيع وقتي وانا كل شوي اسوي refresh

هذا السؤال تمت الإجابة عليه من قبل، أرجو مراجعة الأجوبة من هنا:

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

الرجاء التواصل مع مركز المساعدة واخبارهم انك تريد ان تختبر يمكنك الوصول اليه عن طريق الرابط : https://support.academy.hsoub.com/conversations كما انه قد يتاخر الرد بضعة ايام حيث يوجد ضغط على مركز المساعدة.

يمكنك التقدم إلى امتحان الدورة، من خلال التواصل مع مركز المساعدة وسيتم إخبارك بالخطوات التي يجب عليك القيام بها

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

لقد انهيت المطلوب لدخول الإمتحان . كيف أتقدم لآدء الإمتحان؟

الواجهة الخلفية ليست بتلك السهولة بل معقدة أكثر من الواجهة الأمامية، الفكرة أنك لا تتعامل مع تصميم والألوان بل منطق برمجي فقط، وبالطبع ليس دائمًا فهناك مشاريع الواجهة الأمامية بها معقدة أكثر. ولا تتنقل بين اللغات والتقنيات بشكل عشوائي، في البداية يجب الإلتزام بمسار مُحدد ولا مشكلة في تغيير التخصص حيث أنك في مرحلة استكشاف لمجال البرمجة، ويجب الآن التعمق في تخصص محدد لاكتساب خبرة به لدخول سوق العمل. حاليًا المطلوب أكثر هو Full-Stack، وتستطيع التغلب على مشكلة الضعف في الواجهة الأمامية من خلال استخدام إطار عمل مثل Tailwind ومكونات جاهزة من خلال shadcn لكن بالطبع يشترط تعلم الأساسيات HTML, CSS, JS والوصول لمستوى متوسط على الأقل بهم.

ما تقوم به غير صحيح، أنت في مرحلة التعلم لذا يجب التعمق في التقنيات المطلوبة في سوق العمل، وهي Node.js وفي وقت فراغك فيما بعد تستطيع الإطلاع على bun.js للمعرفة ليس أكثر فهي تقنية جديدة ليست ناضجة ومستخدمة بشكل كافٍ بعد. لا تقم بتعلم ما تفضله أنت بل المطلوب في سوق العمل، وإلا ستجد نفسك تعلمت مهارات غير مطلوبة ويضيع مجهودك نسبيًا، فهناك الكثير من المفاهيم المشتركة بالطبع، لكن لكل تقنية مفاهيم خاصة بها وبحاجة إلى التعمق بها واكتساب خبرة من خلال المشاريع. تعلم Bun.js بعد أن تحصل على وظيفة وتتقن Node.js.

مبارك لك مجهود تُشكر عليه، الآن تنتقل لمرحلة المراجعة والاستعداد للإختبار، هل قمت بالتطبيق العملي على الدروس؟ حيث هناك تطبيقات عملية مطلوب تسليمها، وكذلك الممارسة العملية هي الأهم عند تعلم البرمجة وليس المشاهدة. ليس المطلوب منك رفع التطبيقات العملية البسيطة، بل المشاريع العملية الكاملة، بمعنى في قسم "استخراج البيانات من الويب Web scraping" يوجد تطبيق عملي ستوظف به ما تعلمته، فذلك مطلوب منك رفعه. وفي مسار "تطبيقات عملية على النماذج النصية الكبيرة LLMs" مطلوب منك التطبيقات التي سنقوم بها في ذلك المسار. بالتالي لتجنب إدخال نفسك في متاهة مفرغة، أرجو إنشاء مجلد للدورة ثم بداخله قم بإنشاء عدّة مجلدات حيث مجلد لكل مسار في الدورة. وبداخل كل مجلد قم بوضع التطبيقات العملية التي قمنا بها في ذلك المسار. ثم رفع المجلد الرئيسي بالكامل بما يحتويه من مجلدات على مستودع GitHub وتوفير الرابط الخاص به عند التقدم للإختبار. وفي حال وجود مشروع به الكثير من الملفات والمجلدات ويحتاج إلى مجلد خاص به مثل مشروع "تخصيص نموذج لغة باستخدام LangChain و OpenAI" هنا تقوم برفع المشروع على مستودع GitHub منفصل خاص به. ويجب تعلم مهارة استخدام GIT ومنصة GitHub فهي أساسية لا غنى عنها، ستجد مصادر هنا: ولمراجعة الدورة عليك بتنفيذ مشاريع مشابهة لما قمت به بالدورة، لكن على بيانات جديدة وستجد ذلك في موقع Kaggle، ثم العودة للدروس لمراجعة نقاط الضعف التي وجدتها لديك. أي قم بمراجعة مسار مسار من خلال التطبيق العملي، وفي حال المسار نظري، لخص أهم النقاط التي تعلمتها منه، واشرح لنفسك بشكل شفهي كيف تعمل الخوارزمية مثلاً.

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

أهلا بك عبد الله، هل تقصد أنك أتممت مسارات الدورة؟ إن كان كذلك فهذا أمر جيد جدا ونهنئك على هذا الإنجاز. بخصوص ما بعد الدورة أرجو مراجعة هذه الإجابة وتحرّيها جيدا: فبعد إنتهائك من الدورة سيتعين عليك التواصل مع فريق حسوب لإجراء اختبار للحصول على شهادة اتمام الدورة أرجو مراجعتها من هنا: https://support.academy.hsoub.com/exams

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

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

يوجد طلب على المجالين، لكن النصيحة بشكل عام ضررها أكثر من نفعها، لذا يجب توضيح ظروفك من أجل الحصول على نصيحة مناسبة لك، أي ما وضعك الحالي وما هو هدفك وما هي بلدك وما مستوى اللغة لديك وهكذا. بشكل عام، من حيث سهولة دخول سوق العمل فمجال الأمن السيبراني أفضل في تلك النقطة، حيث توجد وظيفة محددة اسمها محلل مركز عمليات أمنية - SOC Analyst Tier 1 وتلك الوظيفة مصممة للمبتدئين لمراقبة التنبيهات الأمنية والتعامل معها. أيضًا في الأمن السيبراني، شهادات مثل CompTIA Security+ أو Certified Ethical Hacker (CEH) لها وزن وتأثير في الحصول على وظيفة، وحتى أهم من الدرجة الجامعية.

غالبًا يوجد تضارب بين z-index و overflow، فلديك حاوية div لها الكلاس .field تحتوي على القائمة المنسدلة select، وحاوية أخرى أسفلها التي تحتوي على قائمة المواضيع التابعة ولها الكلاس .box وقمت بتعريف ما يلي للكلاس .box: .box { position: relative; z-index: 1; } خاصية z-index: 1 تجبر الـ div على أن يرتفع طبقة واحدة فوق العناصر الأخرى التي ليس لها z-index محدد والتي تعتبر z-index: auto أو 0. بالتالي عند فتح القائمة المنسدلة select، تظهر خياراتها لكن بما أن العنصر .box الذي يقع تحتها له z-index أعلى من الحاوية التي توجد بها القائمة، فيظهر فوق خيارات القائمة ويغطيها. وقمت بالفعل بحل المشكلة من خلال: @media (min-width: 801px) { .field:focus-within { z-index: 9999; } } لرفع الـ .field إلى طبقة عليا عند التركيز على القائمة، ولكن يبدو أن Firefox لا يزال يعطي الأولوية لسياق التكديس الذي أنشأه .box أقصد خاصية z-index أيضًا التعليق الذي كتبته /* تحت السيلكت عند الفتح */ يعني أنك تريد أن يكون العنصر تحت القائمة، ولكن z-index: 1 يفعل العكس حيث يضعه فوق العناصر التي ليس لها z-index، ويجب إزالته. قم بتجربة إزالة z-index: 1 من العنصر .box، فهو ليس ضروري ويسبب المشكلة وبما أن العنصر .box يأتي بعد .field في ترتيب الـ HTML، فلن تكون هناك حاجة لإعطائه z-index ليبقى في مكانه. .box{ border:1px solid var(--line); border-radius:12px; padding:10px; max-height:340px; overflow:auto; background:var(--card); position:relative; /* z-index:1; */ }

الكود المشترك في دالة والوراثة تنبعان من نفس المبدأ الأساسي وهو Don't Repeat Yourself - DRY لكنهما ليسا نفس الشيء، بل تطبيقان مختلفان لهذا المبدأ في نموذجين برمجيين مختلفين. فالكود المشترك في البرمجة الإجرائية مثل لغة C، فكرته هي أنه لو لديك مجموعة من الأسطر التي تتكرر في دالتين أو أكثر، تستطيع وضعها في دالة مساعدة جديدة، ثم تستدعي الدالة المساعدة من كل الأماكن التي تحتاجها. أي علاقة استخدام أو استدعاء فالدالة find_parent والدالة check تستخدمان نفس منطق التنقل في الشجرة، لمشاركة منطق أو خوارزمية محددة بين عدة دوال. بينما الوراثة في البرمجة كائنية التوجه OOP مثل C++, Java, Python، فلا تشارك مجرد جزء من الكود، بل تشارك هوية وسلوك كامل، أي طريقة لإنشاء Class جديدة بناءًا على كلاس موجود، فالكلاس الجديد الابن يرث كل الخصائص أي المتغيرات والسلوكيات وهي الدوال من الكلاس الأصل الأب. لذا يوجد علاقة نوع من، فالسيارة هي نوع من المركبات، والقطة نوع من الحيوانات، أي إنشاء تسلسل هرمي بين الكائنات، حيث يرث كائن متخصص كل صفات وسلوكيات كائن أعم منه. ليس كذلك، فكتابة الكود بتلك الطريقة غير عملية، بل يستخدمون مفاهيم برمجية مثل الوراثة والمبادئ الخاصة بها مثل Method Overriding. أي إنشاء كلاس عام اسمه Enemy يحتوي على كل الخصائص والسلوكيات المشتركة بين كل الأعداء في اللعبة، ووداخل دالة die() في الكلاس Enemy الأساسي، يكتبون الكود مرة واحدة فقط، ثم لكل نوع مختلف من الأعداء، يتم إنشاء كلاس جديدة يرث من الكلاس Enemy الأساسي. وبما أن Soldier و Sniper و Guard جميعهم يرثون من Enemy، فيحصلون تلقائياً على دالة die() بنفس الكود المشترك دون الحاجة لكتابتها مرة أخرى، وعندما يموت أي منهم في اللعبة، يتم استدعاء نفس الدالة die() من الكلاس الأب، فيصدر نفس الصوت وتحدث نفس الحركة. وبالنسبة للعدو المميز كزعيم مثلاً له صوت وحركة موت مختلفة؟ يتم استخدام مبدأ تجاوز التابع Method Overriding حيث لكلاس الزعيم أن يرث من Enemy أيضًا، لكن يُعيد كتابة دالة die() الخاصة به لتنفيذ سلوك مختلف.