كل الأنشطة

المشكلة لديك هنا في هذا الجزء : حيث أنك تستخدم الدالة scrollBy وهذه الدالة تقوم بالتمرير بمقدار ما تريده وهنا أنت تقوم بكتابة 0 و 0 لهذا لا يتم التمرير مطلقا. أما ما تريد تنفيذه هو التمرير إلى أعلى أى الدالة scrollTo وليس scrollBy هكذا : window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })

إن هذا الأمر بالفعل صعب وليس جميع الأشخاص لديهم تلك الموهبة وهي التصميم وتخيل وبناء التصميمات من البداية فهي موهبة مثل الرسم وغيرها ويجب تنميتها لتكون جيد في هذا الأمر. ويجب عليك معرفة أن وظيفتك ليس إنشاء تلك التصميمات بل وظيفتك هي تحويل التصميم إلى كود front end فهذه هي وظيفة ال front end أما التصميم فهو وظيفة المصمم designer و ال UX UI . لهذا إذا كنت تريد إنشاء التصاميم فتستحتاج إلى تعلم ال UX UI والأدوات الخاصة به ويمكنك قراءة التالي لمزيد من التفاصيل :

هذا أمر طبيعي ومشكلة عدم وجود تصميم جاهز لتحويله إلى كود هي أمر عادي يواجهه كثير من مطوري الواجهات الأمامية والحل ببساطة هو أن تبدأ بالتعلّم من تصاميم جاهزة موجودة على مواقع مثل Dribbble وBehance حيث يمكنك استخدامها كمصدر إلهام لفهم بناء التصاميم وكيفية تحويلها إلى مشاريعك. فلا تنتظر أن يكون لديك تصميم مثالي قبل أن تبدأ بل استخدم أطر عمل مثل Bootstrap أو Tailwind CSS لتساعدك على بناء واجهات سريعة ومحترفة ومع الوقت والتمرن ستكتسب مهارات التصميم تدريجيا الأهم حاليا هو أن تبدأ بتجربة وتحويل أفكار بسيطة إلى كود وتطور محفظة مشاريعك خطوة بخطوة، لأن الخبرة تُبنى بالممارسة وليست بالانتظار. كما أن محفظة الأعمال الاحترافية هي التي تبدأ من الصفر إلى الاحتراف مع تحديثها كل مرة بناء على خبراتك وتجاربك، فكلما زادت خبرتك ستستغني عن المشاريع الصغيرة التي قمت بها في بداياتك وهكذا.

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Route, Routes } from "react-router-dom"; import BtmHeader from "./Components/BtmHeader"; import TopHeader from "./Components/TopHeader"; import React from "react"; import Home from "./Page/Home"; import Footer from "./Components/Footer"; import ProductDetails from "./Page/ProductDetails"; import Cart from "./Page/Cart"; import { Toaster } from "react-hot-toast"; import Category from "./Page/Category"; import Favorite from "./Page/Favorite"; import SearchResults from "./Page/SearchResults"; import Login from "./Page/Login"; import Register from "./Page/Register"; import Buying from "./Page/Buying"; import Blog from "./Page/Blog"; import Blog1 from "./Page/BlogsPage/Blog1"; import Blog2 from "./Page/BlogsPage/Blog2"; import Blog3 from "./Page/BlogsPage/Blog3"; import Blog4 from "./Page/BlogsPage/Blog4"; import Blog5 from "./Page/BlogsPage/Blog5"; import Blog6 from "./Page/BlogsPage/Blog6"; import Blog7 from "./Page/BlogsPage/Blog7"; import Blog8 from "./Page/BlogsPage/Blog8"; import Blog9 from "./Page/BlogsPage/Blog9"; import Blog10 from "./Page/BlogsPage/Blog10"; import Blog11 from "./Page/BlogsPage/Blog11"; import Blog12 from "./Page/BlogsPage/Blog12"; import About from "./Page/About"; import Services from "./Page/Services"; import Scroll from "./Components/Scroll"; function App() { return (_jsxs(React.Fragment, { children: [_jsx(Scroll, {}), _jsx(Toaster, { position: "bottom-right", toastOptions: { style: { background: "#fff", padding: "15px", borderRadius: "20px", }, } }), _jsxs("header", { children: [_jsx(TopHeader, {}), _jsx(BtmHeader, {})] }), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Home, {}) }), _jsx(Route, { path: "/product/:id", element: _jsx(ProductDetails, {}) }), _jsx(Route, { path: "/cart", element: _jsx(Cart, {}) }), _jsx(Route, { path: "/category/:category", element: _jsx(Category, {}) }), _jsx(Route, { path: "/favorite", element: _jsx(Favorite, {}) }), _jsx(Route, { path: "/search", element: _jsx(SearchResults, {}) }), _jsx(Route, { path: "/login", element: _jsx(Login, {}) }), _jsx(Route, { path: "/signup", element: _jsx(Register, {}) }), _jsx(Route, { path: "/buying", element: _jsx(Buying, {}) }), _jsx(Route, { path: "/about", element: _jsx(About, {}) }), _jsx(Route, { path: "/services", element: _jsx(Services, {}) }), _jsx(Route, { path: "/blog", element: _jsx(Blog, {}) }), _jsx(Route, { path: "/blog1", element: _jsx(Blog1, {}) }), _jsx(Route, { path: "/blog2", element: _jsx(Blog2, {}) }), _jsx(Route, { path: "/blog3", element: _jsx(Blog3, {}) }), _jsx(Route, { path: "/blog4", element: _jsx(Blog4, {}) }), _jsx(Route, { path: "/blog5", element: _jsx(Blog5, {}) }), _jsx(Route, { path: "/blog6", element: _jsx(Blog6, {}) }), _jsx(Route, { path: "/blog7", element: _jsx(Blog7, {}) }), _jsx(Route, { path: "/blog8", element: _jsx(Blog8, {}) }), _jsx(Route, { path: "/blog9", element: _jsx(Blog9, {}) }), _jsx(Route, { path: "/blog10", element: _jsx(Blog10, {}) }), _jsx(Route, { path: "/blog11", element: _jsx(Blog11, {}) }), _jsx(Route, { path: "/blog12", element: _jsx(Blog12, {}) })] }), _jsx(Footer, {})] })); } export default App; // App.js import { Route, Routes } from "react-router-dom"; import BtmHeader from "./Components/BtmHeader"; import TopHeader from "./Components/TopHeader"; import React from "react"; import Home from "./Page/Home"; import Footer from "./Components/Footer"; import ProductDetails from "./Page/ProductDetails"; import Cart from "./Page/Cart"; import { Toaster } from "react-hot-toast"; import Category from "./Page/Category"; import Favorite from "./Page/Favorite"; import SearchResults from "./Page/SearchResults"; import Login from "./Page/Login"; import Register from "./Page/Register"; import Buying from "./Page/Buying"; import Blog from "./Page/Blog"; import Blog1 from "./Page/BlogsPage/Blog1"; import Blog2 from "./Page/BlogsPage/Blog2"; import Blog3 from "./Page/BlogsPage/Blog3"; import Blog4 from "./Page/BlogsPage/Blog4"; import Blog5 from "./Page/BlogsPage/Blog5"; import Blog6 from "./Page/BlogsPage/Blog6"; import Blog7 from "./Page/BlogsPage/Blog7"; import Blog8 from "./Page/BlogsPage/Blog8"; import Blog9 from "./Page/BlogsPage/Blog9"; import Blog10 from "./Page/BlogsPage/Blog10"; import Blog11 from "./Page/BlogsPage/Blog11"; import Blog12 from "./Page/BlogsPage/Blog12"; import About from "./Page/About"; import Services from "./Page/Services"; import Scroll from "./Components/Scroll"; function App() { return ( <React.Fragment> <Toaster position="bottom-right" toastOptions={{ style: { background: "#fff", padding: "15px", borderRadius: "20px", }, }} /> <header> <TopHeader /> <BtmHeader /> </header> <Scroll /> <Routes> <Route path="/" element={<Home />} /> <Route path="/product/:id" element={<ProductDetails />} /> <Route path="/cart" element={<Cart />} /> <Route path="/category/:category" element={<Category />} /> <Route path="/favorite" element={<Favorite />} /> <Route path="/search" element={<SearchResults />} /> <Route path="/login" element={<Login />} /> <Route path="/signup" element={<Register />} /> <Route path="/buying" element={<Buying />} /> <Route path="/about" element={<About />} /> <Route path="/services" element={<Services />} /> {/* Blog Pages Routes */} <Route path="/blog" element={<Blog />} /> <Route path="/blog1" element={<Blog1 />} /> <Route path="/blog2" element={<Blog2 />} /> <Route path="/blog3" element={<Blog3 />} /> <Route path="/blog4" element={<Blog4 />} /> <Route path="/blog5" element={<Blog5 />} /> <Route path="/blog6" element={<Blog6 />} /> <Route path="/blog7" element={<Blog7 />} /> <Route path="/blog8" element={<Blog8 />} /> <Route path="/blog9" element={<Blog9 />} /> <Route path="/blog10" element={<Blog10 />} /> <Route path="/blog11" element={<Blog11 />} /> <Route path="/blog12" element={<Blog12 />} /> </Routes> <Footer /> </React.Fragment> ); } export default App; //App.tsx import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const Scroll = () => { const pathname = useLocation(); useEffect(() => { window.scrollBy({ top: 0, left: 0, behavior: 'smooth' }); }, [pathname]); return null; }; export default Scroll; // Scroll.js import { useEffect } from 'react' import { useLocation } from 'react-router-dom' const Scroll = () => { const pathname = useLocation(); useEffect(() => { window.scrollBy({ top: 0, left: 0, behavior: 'smooth' }) },[pathname]) return null; } export default Scroll // Scroll.tsx ال scroll لايعمل من مفترض عند دخول الى اي صفحة يرفع سكرول الى اعلى كي يرى صفحة وليس footer

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

للأسف لا يمكن فهو شرط أساسي لتحويل التطبيق إلى وضع الإنتاج (Live Mode) وتمكين النشر العام والفيسبوك يفرض هذا الشرط لضمان الأمان والموثوقية، ولا يوجد بديل رسمي يسمح بتجاوز هذا المتطلب للنشر العام عبر API للنشر بدون هذا التحقق، تظهر المنشورات فقط للمسؤولين في وضع التطوير يمكنك التحقق من ذلك من هنا: https://developers.facebook.com/docs/development/release/business-verification

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

عندما يكون التطبيق في وضع التطوير (Dev Mode) فإن كل المنشورات التي يتم إنشاؤها عبر ال API تكون مرئية فقط للمسؤولين المشاركين في التطبيق أي لك أنت فقط أو للمسؤولين الذين لهم دور في التطبيق ولا تظهر هذه المنشورات للجمهور العام أو أي شخص غير مسؤول في التطبيق. وهذه الخاصية تفرضها منصة فيسبوك لضمان أمان التجارب التطويرية وعدم نشر محتوى غير مراقب للجمهور. لذا لكي تجعل المنشورات تظهر للعامة يجب عليك تحويل التطبيق من وضع التطوير إلى وضع الإنتاج (Live Mode) وللقيام بذلك يتوجب عليك إجراء التحقق من النشاط التجاري (Business Verification) وهي عملية تطلب فيها Facebook مستندات تثبت صحة النشاط التجاري المرتبط بالتطبيق مثل رخصة تجارية أو أوراق رسمية وفي حالة عدم وجود نشاط تجاري رسمي، وكونك فردا وليس لديك شركة أو نشاط تجاري، فإن فيسبوك لا يسمح لك بتجاوز هذا الإجراء، مما يعني عدم القدرة على نشر منشورات عامة عبر API في وضع الإنتاج بدون هذا التحقق.

أنا أحاول عمل سكربت بايثون يقوم بالنشر على صفحتي العامة (وليس الشخصية) ولكن عندي مشكلة مع منصة Graph API حيث أن النشر لا يظهر سوى لي أنا فقط أما الباقيين فلا يظهر لهم، الكود صحيح وسليم ولكن المشكلة مع المنصة نفسها وعندما بحثت وجدت أن المشكلة ترجع إلى أن المنشورات لتظهر أمام باقي الناس يجب أن يكون التطبيق في وضع live وهو مايتطلب تأكيد لهوية النشاط التجاري وأنا لا أملك واحدا ولكنه يفرض علي ذلك وأن أرفع له المستندات الخاصة بالنشاط التجاري

شكرا لك @محمد_عاطف في الواقع أرى أن الحل الأنسب هو تعديل الواجهة الخلفية ليصبح بهذه الطريقة export const verifyAccount = asyncHandler(async(req, res) => { const { userId, token } = req.params // Check if user exist const user = await User.findById(userId) if (!user) { return res.status(400).json({ message: "Invalid Verification Link" }) } const verificationToken = await VerificationToken.findOne({ userId: user._id, token: token, }) if (!verificationToken) { if (user.isAccountVerified) { return res.status(200).json({ message: "Your Account is Already Verified!" }); } return res.status(400).json({ message: "Invalid Link" }); } user.isAccountVerified = true await user.save() await VerificationToken.deleteMany({ userId: user._id }); res.status(200).json({ message: "Your Account is Verified!" }) }) ففي حالتي أنا بالرغم user.isAccountVerified و !verificationToken فيظهر مكون الخطأ والسبب يعود لـ tanstack query مثلما تفضلتم بالشرح لذلك إعتمدت على تغيير منطق الواجهة الخلفية والمحافظة على الواجهة الأمامية كما هي والسبب هو التوافق مع TanStack Query والمحافظة على frontend بسيط يعتمد على TanStack Query (isLoading, isError, data) بالإضافة إلى ضمان تجربة متكاملة بين التطوير واإنتاج. شكرا جزيلا مجددا

إذا نظرت إلى ال console ستجد أنه يتم طباعة وتنفيذ ال API الخاص بالتحقق مرتين وهذا هو سبب المشكلة الرئيسية . ففي أول مرة يتم تنفيذ المكون يتم إرسال التحقق مما يسبب نجاح العملية ولكن مع الإرسال الثاني يظهر الخطأ لأن بالفعل المستخدم تم التحقق من حسابه وتم حذف رمز ال token من قاعدة البيانات. وهذه المشكلة بسبب انك تعمل في وضع React الصارم (React.StrictMode) أثناء التطوير. حيث في وضع التطوير (Development Mode) يقوم React.StrictMode بعرض كل مكون مرتين (mount -> unmount -> mount) بشكل متعمد والهدف من ذلك هو مساعدتك في اكتشاف الأخطاء والآثار الجانبية (Side Effects) غير المرغوب فيها في الكود الخاص بك. ولذلك يوجد عدة حلول لديك : أولا يمكنك حذف الوضع الصارم من ملف frontend\src\main.jsx . ثانيا يمكنك حاليا عدم حذف ال token من قاعدة البيانات وذلك في وضع التطوير أما في وضع النشر production يمكنك حذفه . ثالثا يمكنك إستخدام useRef هكذا : import React, { useEffect, useRef } from "react"; import { Link, useParams } from "react-router-dom"; import { useVerifyEmail } from "../lib/queries/auth.queries"; import { AiOutlineCheckCircle, AiOutlineWarning } from "react-icons/ai"; import Spinner from "../components/loaders/Spinner"; const VerifyEmail = () => { const { userId, token } = useParams(); const { mutate, data, isError, isPending } = useVerifyEmail(); const effectRan = useRef(false); useEffect(() => { if (effectRan.current === false) { if (userId && token) { mutate({ userId, token }); } } return () => { effectRan.current = true; }; }, []); if (!effectRan.current) { return <Spinner />; } return ( <section className="flex items-center justify-center min-h-[calc(100vh-2rem)] px-4"> <div className="w-full max-w-md bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-md p-6 text-center transition-all duration-300"> {isError ? ( <> <AiOutlineWarning className="text-red-500 dark:text-red-400 text-6xl mx-auto animate-pulse mb-4" /> <h1 className="text-xl font-semibold text-gray-800 dark:text-white"> Error Verifying Email </h1> <p className="text-sm text-gray-600 dark:text-gray-300 mt-2"> Please check your verification link or request a new one. </p> </> ) : ( <> <AiOutlineCheckCircle className="text-teal-600 dark:text-teal-400 text-6xl mx-auto animate-bounce mb-4" /> <h1 className="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white mb-2"> {data?.message || "Email Verified Successfully!"} </h1> <Link to="/login" className="inline-block bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300" > Login </Link> </> )} </div> </section> ); }; export default VerifyEmail;

الإجابة هى يجب أن نقوم بتطبيق ال Scaling على العمود (w) فقط. فالهدف الأساسي من عملية ال Scaling مثل Standardization أو Normalization هو جعل جميع أعمدة البيانات Features في نطاق متقارب للقيم وهذا يمنع أي عمود من التأثير بشكل مفرط على أداء النموذج لمجرد أن قيمه العددية أكبر من قيم الأعمدة الأخرى. وبما أنكِ ذكرتِ أن جميع الأعمدة تم تطبيعها بالفعل ما عدا العمود (w) فهذا يعني أنها بالفعل في نطاق متقارب. لذلك: لا حاجة لإعادة المعالجة وتطبيق الـ Scaling مرة أخرى على الأعمدة التي تم تطبيعها بالفعل فهي خطوة غير ضرورية وقد تؤدي إلى نتائج غير متوقعة أو تفسد التوزيع الأصلي للبيانات الذي نتج عن التطبيع الأول. وبتطبيق الـ Scaling على العمود (w) وحده فإنكِ تجعلينه متناسق مع بقية الأعمدة وهذا هو الهدف الأساسي من العملية.

هذا لأنك يجب أن تقوم بتنفيذ أمر تحويل الملفات إلى js كما وضحت لك في البداية . يمكنك تنفيذ الأمر التالي وهذا الأمر سيقوم بمشاهدة التعديلات وتحويلها مباشرة : tsc -b -w

عندما يكون لدينا مجموعة بيانات بعدة أعمدة مطبعة مسبقا وعمود واحد w غير مطبع يجب تطبيق ال Scaling على العمود w فقط وليس على جميع الأعمدة. والسبب هو أن إعادة تطبيق ال Scaling على الأعمدة المطبعة مسبقا سيؤدي إلى تشويه توزيعها الحالي وقد يخل بالعلاقات الإحصائية المطلوبة، بينما تطبيقه على العمود w فقط سيجعل جميع الأعمدة في نفس المقياس المطلوب للنموذج. الممارسة الصحيحة هي تطبيق ال StandardScaler أو MinMaxScaler على العمود w منفردا أو استخدام ColumnTransformer في scikit-learn لتحديد الأعمدة المراد معالجتها بدقة.

نحليت مشكلة لكن متصفح لا يقبل اي تعديلات كيف يمكن حل ذالك يعني اي اضفة ضفتها لا يظهر

إذا كان لدي مجموعة بيانات تحوي عدة أعمدة وكانت كلها تم تطبيعها عدا عمود واحد (w) هل عندما أطبق Scaling أطبق على جميع الأعمدة أو العمود (w) فقط؟

لاحظ انك في ال session storage وليس local storage يرجى اتباع الخطوات في الصورة السابقة

Applıcatıon فارغ ولا يوجد قيم وايضا يوجد مشكلة في كونسول

المشروع يعمل المشكلة لديك في التخزين المحلي يجب حذفه كما أخبرتك . يجب الذهاب إلى تبويبة application في ادوات المطور وحذفه من خلال الزر التالي :

بعد تثبيت الامر tsc -b اصبح امر اسوء حيث صفحة مفضلة اصبحت صفحة بيضاء وايضاً مكون scroll لايعمل قبل رفعت مشروع لكن رجعت لتعديله اصبح متصفح لا يقبل اي تعديلات اظن مشكلة من Cashed ان كانت مشكلة كذالك كيف يمكنني حذفه لحفظ تغييرات جديدة amazon-store.zip

ما هي الأوامر التي تقوم بها لتشغيل المشروع ؟ حاليا المشكلة نعم لا تظهر الصور ولكن لو قمت بتنفيذ أمر tsc -b ستجد أن المشكلة قد تم حلها ولكن يجب أن يتم حذف التخزين المحلي أولا . لهذا يجب تنفيذ الأمر التالي هكذا لتحويل ملفات tsx بعد تعديلها إلى ملفات js: tsc -b

توجد مشكلة في صفحةFavorite.tsx حيث منتجات المفضلة لا يتم عرض الصور ومع اني متأكد اني مررت لها صور في interface وحذف تخزين محلي ورجعت حفظتو ومشكلة مستمرة amazon-store.zip

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