Mustafa Suleiman

أرجو توضيح ما هي الدورة المقصودة؟

بتثبيت المكتبة من خلال الأمر: npm install react-scroll ثم استيرادها في المكون الذي تريده وليكن App.js أو مكون الشريط العلوي Navbar.js، عليك باستيراد المكونات الرئيسية من المكتبة Link و Element. حيث Link هو المكون الذي ستضغط عليه لبدء التنقل مثل رابط في القائمة، بينما Element هو المكون الذي يلتف حول القسم الذي تريد الانتقال إليه أي الوجهة. import { Link, Element } from 'react-scroll'; وكمثال بسيط: import React from 'react'; import { Link, Element } from 'react-scroll'; import './App.css'; function App() { return ( <div className="App"> <nav className="navbar"> <Link to="section1" smooth={true} duration={500} className="nav-link"> القسم الأول </Link> <Link to="section2" smooth={true} duration={500} className="nav-link"> القسم الثاني </Link> <Link to="section3" smooth={true} duration={500} className="nav-link"> القسم الثالث </Link> </nav> <Element name="section1" className="section"> <h1>القسم الأول</h1> </Element> <Element name="section2" className="section bg-grey"> <h1>القسم الثاني</h1> </Element> <Element name="section3" className="section"> <h1>القسم الثالث</h1> </Element> </div> ); } export default App;

قم بتجربة تسجيل الدخول من خلال البرنامج الخاص بالحاسوب ثم تسجيل الدخول على الهاتف ومن المفترض أن يصلك رقم التأكيد على حساب تيليجرام الخاص بك أو رسالة على الهاتف: https://desktop.telegram.org/

قم بتشغيل المشروع من خلال الأمر: npm run dev -- --host

ليس من خلال الهاتف، بل توجه للحاسوب الخاص بك وقم بتشغيل المشروع، وسيظهر لك عنوان ip في منفذ الأوامر استخدمه لتصفح المشروع من خلال الهاتف، وأبقي الخادم يعمل على الحاسوب

العنوان localhost الذي تستخدمه ذلك خاص بالخادم المحلي على حاسوبك أي من الجهاز الذي يعمل عليه الخادم الخاص بالمشروع، بينما لو أردت تصفحه من الهاتف، ستجد عنوان مختلف للوصول للمشروع عبر الشبكة لديك، ابحث في منفذ الأوامر لديك عن رقم IP يبدأ بـ 192 ثم قم بكتابته كما هو في المتصفح لديك في الهاتف لعرض المشروع

هل تلك عملية تسجيل دخول لحساب قديم لك أم تسجيل حساب جديد؟ وما هو الإيميل الذي استخدمته هل هو gmail؟

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

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

أي شيء تضعه خارج <Routes> كالـ <Navbar>سيظهر في جميع الصفحات، بالتالي يجب أن تضع مكون <Background /> داخل المسار الخاص بالصفحة الرئيسية مع مكون <Hero />، كذلك عليك تعديل المسار إلى / والذي يعني الصفحة الرئيسية: import { BrowserRouter, Routes, Route } from "react-router-dom"; return ( <> <div> <BrowserRouter> <Navbar /> <Routes> <Route path="/" element={ <> <Hero heroData={heroData[heroCount]} heroCount={heroCount} playStatus={playStatus} setHeroCount={setHeroCount} setPlayStatus={setPlayStatus} /> {/* هنا*/} <Background playStatus={playStatus} heroCount={heroCount} /> </> } /> </Routes> </BrowserRouter> </div> </> );

من الطبيعي أن تتحرك الأيقونات من مكانها لأنها تأتي أسفل العنوان، والنص الخاص بالعنوان يستحوذ على المساحة المناسبة للنص، بالتالي لحل المشكلة عليك اقتطاع الجزء الباقي من النص لكي لا يظهر على سطر جديد من خلال خاصية white-space كالتالي: .prname { font-weight: bold; font-size: 1.1rem; margin-bottom: 0.5rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } بالنسبة لتحسين التنسيقات، فإليك تصميم أفضل: body { background-color: #f0f2f5; padding: 20px; } .items-shop { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .items-shop div:not(.last) { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; } .items-shop div a { display: block; height: 200px; } .items-shop div img { width: 100%; height: 100%; object-fit: cover; } .items-shop div ul { list-style-type: none; padding: 1rem; margin: 0; font-size: 1rem; display: flex; flex-direction: column; flex-grow: 1; } .prname { font-weight: bold; font-size: 1.1rem; margin-bottom: 0.5rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pprice a { color: #007bff; font-weight: bold; text-decoration: none; } .items-shop hr { width: 100%; height: 1px; background-color: #eee; border: 0; margin: 0.5rem 0; } .paction { margin-top: auto; padding-top: 1rem; } .bottom-item { display: flex; justify-content: space-around; list-style: none; padding: 0; margin: 0; } .bottom-item li { display: flex; justify-content: center; align-items: center; height: 40px; width: 40px; background: linear-gradient(to right, rgb(51, 67, 148), rgb(68, 55, 140)); color: white; border-radius: 50%; cursor: pointer; transition: transform 0.2s; } .bottom-item li:hover { transform: scale(1.1); } وعليك إزالة الـ <br> والـ <hr> الزائدة من HTML لأنّ التنسيق السابق يُضيف هوامش من خلال margin.

المشكلة في استخدامك لـ React Router أنت بحاجة إلى إعادة دراسة الأساسيات الخاصة به سواء على اليوتيوب أو من خلال دروس كالتالي: في ملف src\App.jsx يجب حذف مكون الـ Router طالما استخدمته بالفعل في src\Components\route.jsx فلا يصح استخدامه مرتين، وكذلك هناك نسختين من المكوّن Hero يتم عرضهم في نفس الوقت، حيث نسخة يتم عرضها يدوياً داخل App.jsx وتحصل على جميع الـ props الصحيحة. ونسخة ثانية يُنشئها ملف route.jsx لأنك وضعتها كعنصر المسار “/” ولا تصلها أي props، لذلك تكون heroData = undefined عليك حذف Hero من الراوتر، وضع بدلاً منه مكون رئيسي يمرر البيانات وهو App: import { createBrowserRouter, RouterProvider } from "react-router-dom"; import App from "../App"; import About from "./About/About"; const router = createBrowserRouter([ { path: "/", element: <App /> }, { path: "/about", element: <About /> }, ]); export default function AppRoutes() { return <RouterProvider router={router} />; } ثم في ملف src\main.jsx استخدم مكون AppRoutes لعرض التطبيق: import ReactDOM from "react-dom/client"; import AppRoutes from "./Components/route"; ReactDOM.createRoot(document.getElementById("root")).render(<AppRoutes />); أرفقت لك المشروع بعد التعديل. Apple.rar

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

من حيث السهولة والبساطة، فستضع شريط التنقل مباشرة Navbar.js في المكون الرئيسي App.js لكن وضع خارج تعريف المسارات <Routes>. import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Navbar from './components/Navbar'; import './App.css'; function App() { return ( <BrowserRouter> {/* ضع شريط التنقل هنا، خارج الـ Routes */} <Navbar /> <main className="main-content"> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </main> </BrowserRouter> ); } export default App; وفي ملف components/Navbar.js استخدم مكون <Link> من react-router-dom للتنقل لتجنب إعادة تحميل الصفحة بالكامل. import React from 'react'; import { Link } from 'react-router-dom'; import './Navbar.css'; const Navbar = () => { return ( <nav className="navbar"> <div className="navbar-logo"> <Link to="/">شعار الموقع</Link> </div> <ul className="navbar-links"> <li> <Link to="/">الرئيسية</Link> </li> <li> <Link to="/about">عنّا</Link> </li> <li> <Link to="/contact">اتصل بنا</Link> </li> </ul> </nav> ); }; export default Navbar; ثم إضافة التنسيقات التالية في ملف Navbar.css وما نريده هو خاصية position: fixed لجعل الشريط ثابت، وz-index: 1000 للتأكد من أنه يظهر فوق كل المحتوى الآخر في الصفحة: .navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .navbar-logo a { color: white; text-decoration: none; font-size: 1.5rem; font-weight: bold; } .navbar-links { list-style: none; display: flex; margin: 0; padding: 0; } .navbar-links li { margin-left: 20px; } .navbar-links a { color: white; text-decoration: none; font-size: 1rem; } .navbar-links a:hover { color: #ddd; } وسيظهر مشكلة عند استخدام position: fixed، وهي خروج شريط التنقل من تدفق الصفحة الطبيعي، لأنّ المحتوى الآخر مثل Homeأو About سيبدأ من أعلى الشاشة، وسيكون مخفيًا خلف شريط التنقل. لذا ستحتاج إلى إضافة هامش علوي margin-top للحاوية الرئيسية للمحتوى. .main-content { margin-top: 80px; padding: 20px; } ولاحظ الهامش العلوي يجب أن يساوي ارتفاع شريط التنقل، فلو ارتفاع الشريط 60px، فاجعل الهامش 60px.

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

401 يعني وصول غير مُصرح، أرى api.openweather بالتالي ستحتاج إلى تسجيل حساب والحصول على مفتاح API للتمكن من الإتصال، التسجيل من هنا: https://home.openweathermap.org/users/sign_up ثم الحصول على المفتاح من هنا: https://home.openweathermap.org/api_keys ثم تضمينه في الطلب الخاص بك وإليك مثال: https://api.openweathermap.org/data/3.0/onecall?lat=33.44&lon=-94.04&exclude=hourly,daily&appid={API key} لاحظ عليك استبدال API key بالمفتاح الخاص بك، والأفضل وضعه في ملف env. ثم استيراده منه كمتغير بيئة

ملف env. في أي مشروع هو لإضافة المتغيرات البيئية الخاصة بالمشروع، وتلك المتغيرات بها معلومات حساسة لا نريد تضمينها في الكود، مثل رابط قاعدة البيانات ومفتاح الـ API للخدمات التي نستخدمها والكلمات السرية وأي معلومات لا تريد للغير الإطلاع عليها عند تصفح الكود. ويتم إضافة اسم الملف .env إلى ملف آخر اسمه .gitignore. والذي يمنع رفع الملف الذي يحتوي على الأسرار إلى GitHub، وبذلك لا يراها أي شخص آخر. كذلك تستطيع إنشاء ملف .env مختلف لكل بيئة عمل، فكل ما ستحتاجه هو تغيير قيمة المتغيرات التي به فقط، ففي بيئة التطوير سقوم باستخدام قاعدة بيانات محلية، وفي بيئة الإنتاج ستستخدم قاعدة البيانات الحقيقية على الخادم. بالنسبة لما في الملف لديك فهو VITE_APP_ID متغير بيئي خاصة بأداة التحزيم Vite، وهو مُعرف التطبيق لتكوين إعدادات التطبيق وللتمييز بين التطبيقات المختلفة وللاتصال بالخدمات الخارجية -مثل قواعد البيانات أو APIs.

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

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

الأمر سيتم من خلال CSS فقط عن طريق الـ animation والتحكم في الـ keyframes كالتالي: .animated-sale-button { transition: all 0.3s ease; background: linear-gradient(to right, #f72585, #b5179e, #7209b7, #f72585); background-size: 200% auto; animation: gradient-animation 3s linear infinite; } } @keyframes gradient-animation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } بالطبع افترضت أنّ اسم الكلاس الخاص بالزر هو animated-sale-button، ولاحظ أضفت background-size: 200% auto فذلك الجزء الأهم، لجعل صورة الخلفية أي التدرج اللوني أعرض بمرتين من الزر نفسه. ثم من خلال @keyframes gradient-animation نحدد ما تفعله الحركة، وهو تغيير موضع الخلفية background-position من 0% أي البداية إلى 100% وهي النهاية على المحور الأفقي، وبما أن حجم الخلفية 200%، فتحريكها بنسبة 100% سيُظهر الجزء المخفي من التدرج اللوني، وذلك يخلق وهم الحركة.

بشكل مُبسط المكونات الأصناف تعتمد على الكلاسات في بنيتها، لذا نلتزم بالـ Syntax الخاصة بالكلاسات في جافاسكريبت ونقوم بإنشاء الدوال الخاصة بالمكون بداخل الكلاس الخاص به، وبالتالي تصبح ميثودز وكذلك الحالة state يتم تهيئها داخل الكلاس فتصبح خواص. ما سبق يحتاج إلى استيعاب OOP في جافاسكريبت لتتمكن من فهمه ،وحاليًا أصبحت الطريقة السابقة غير مستخدمة، ومنذ سنوات تم إعتماد المكونات الوظيفية أي الـ Function Components. لكونها أسهل وأفضل بشكل مُختصر دونّ تعقيد. ستجد تفصيل هنا:

أرجو توضيح ما تريد تنفيذه، حسب ما فهمت تريد إنشاء صفحة جديدة، وفي React ذلك يتم من خلال المكونات، ثم ربط ذلك المكون بموجه router ليتم التوجيه إليه عن زيارة المسار الخاص به أو الضغط على الرابط الخاص به. بالطبع ستحتاج إلى مكتبة react-router-dom npm install react-router-dom وليكن اسم المكون About.js ونضعه في مجلد باسم pages: import React from 'react'; const About = () => { return ( <div> <p> نص تجريبي</p> </div> ); }; export default About; ثم في ملف App.js قم بإعداد التوجيه باستخدام react-router-dom. // src/App.js import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import NewPage from './pages/About'; import Home from './pages/Home'; const App = () => { return ( <Router> <div> <nav> <ul> <li> <Link to="/">الصفحة الرئيسية</Link> </li> <li> <Link to="/about">الصفحة الجديدة</Link> </li> </ul> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </div> </Router> ); }; export default App;

ما الغرض منه؟ هل لتسويق شخصي للتسويق لخدماتك الشخصية أم تسويق لموقع تجاري لبيع منتجات؟ أم تسويق لشركة معينة من أجل المنتجات أو الخدمات الخاصة بها؟ يجب تحديد الهدف لتحديد الجمهور المستهدف وعلى أساسه يتم إنشاء خطة التسويق وليس العكس، وكذلك عليك دراسة الـ creative writing وتوظيفه لتقديم فائدة للجهمور المستهدف وليس مجرد أسطر فارغة من أي قيمة، والأفضل هو أسلوب الإقناع بفائدة ما تقدمه وما سبب الدافع نحو اختيارك أنت دونّ غيرك. وستجد هنا مصادر للأساسيات لتعلم طريقة الكتابة المناسبة: مبادئ علم التسويق التسويق والمبيعات والأمر بحاجة إلى وقت وتمرين، لذا لا تتوقع أن تحترف ذلك في مدة بسيطة، أما لو لغرض شخصي فتعلم الأساسيات سيوجهك للطريق الصحيح ويجنبك تضييع وقتك.

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

لم يتم التطرق إلى ذلك الإطار، ما تم شرحه هو Flask و Django، ولن تحتاج سواهما في البداية إلا إذا أردت FastAPI لغرض معين تعلمه، وللعلم هو مستوحى بشكل كبير من Flask، بالتالي لو استوعب Flask، فسيصبح تعلم FastAPI سهل، فكلاهما إطار عمل صغير وستبدأ المشروع بشكل بسيط جدًا ثم تضيف إليه المكونات التي تحتاجها. مثلاً لتحديد المسارات، ففي Flask ستكتب: @app.route("/items/", methods=["GET"]) def get_items(): return {"items": ["item1", "item2"]} بينما في FastAPI: @app.get("/items/") def get_items(): return {"items": ["item1", "item2"]} أي كلاهما يعتمد على الـ Decorators والتي سيتم شرحها بالدورة. الفكرة من FastAPI هو أنه مناسب لو المشروع عبارة عن API لتطبيق جوال، أو واجهة أمامية حديثة مثل React/Vue، أو لخدمات أخرى، وتريد تطوير المشروع بسرعة، بمعنى يوجد واجهة أمامية منفصلة.