Hikmat Jaafer

في سوق العمل اليوم الشركات تفضل توظيف المطوريين الذين لديهم الخبرة في كلا الاتجاهين html and css مع المكتبات ,و vanilla css html استخدام المكتبات الجاهزة يسهل تنظيم و تصميم الواجهات بشكل فعال و سريع , و لكن في بعض الأحيان قد تحتاج لاستخدام ال css بدون مكتبات لكي تحصل على واجهات مطابقة 100% للتصميم الذي وضعه المصمم.و إذا كنت تريد العمل كمطور واجهات أمامية فعليك أن تلم بشكل أساسي بال css ومن ثم تنتقل لتعلم المكتبات. و كلاهما مهم في تطوير الواجهات الأمامية و في سوق العمل.

بداية تأكد من أنك قمت بتثبيت vite , و إذا لم تقوم بتثبيتها بعد ثبتها باستخدام التعليمة npm init vite@latest ثم تأكد من أنك قمت بتنفيذ التعليمة التالية لتحميل متغيرات البيئة npm install dotenv ثم قم بإنشاء الملف التالي لتحميل متغيراات البيئة vite.config.js وقم بوضع الكود التالي ضمنه import { defineConfig } from 'vite' import reactRefresh from '@vitejs/plugin-react-refresh' import dotenv from 'dotenv' dotenv.config() export default defineConfig({ plugins: [reactRefresh()], }) الأن يمكنك استخدام المتغير الذي وضعته ضمن ملف ال .env في مشروعك بهذا الشكل const apiKey = process.env.API_KEY; قم بتنفيذ التعليمة console.log(apiKey); لتتأكد من أنك قمت باستيراد ال apiKey بشكل صحيح

يمكنك تحميل SSMA من موقع microsoft , و بعد تحميله يمكنك اتباع التعليمات التي ستظهر لك عند فتحه لتقوم بتثبيته , ثم بعد تثبيته قم بإنشاء مشروع جديد لتقوم بنقل قاعدة المعطيات عليه و من ثمقم باتباع الخطوات المذكورة سابقا

نعم يمكنك أن تستخدم SQL Server to MySQL Migration Wizard لعمل ذلك . بعد أن تقوم بتثبيته لديك , عليك أن تقوم بالاتصال ب sql server , ثم تتصل ب mysql server , ثم تختار قاعدة البيانات التي تريد تصديرها و تحدد الجداول التي تريدها , وتقوم بتحديد ال configuration و تقوم بالتصدير

مرحبا @احمد قابل هاشم ألصميدعي يحدث هذا الخطأ عندما تستغرق عملية الإضافة وقتًا أطول من فترة المهلة المحددة لإكمالها. و هناك أكثر من احتمال لوجود هذا الخطأ قد تكون المشكلة في الاتصال بقاعدة البيانات , فعليك أن تتحقق من أن خادم mongoDB الخاص بك يعمل بشكل صحيح وأن اتصال Mongoose الخاص بك قد تم إنشاؤه بنجاح. إذا كنت تقوم بعملية كبيرة أو معقدة فقد تستغرق وقتا أطول من المهلة الافتراضية , فيمكنك زيادة المهلة عن طريق إضافة خيار bufferTimeoutMS عند إنشاء اتصال Mongoose الخاص بك: mongoose.connect('your mongoDB server url', { bufferTimeoutMS: 30000, // Increase the timeout to 30 seconds }); هذه حلول عامة يمكنك تجريبها , و إذا لم تحل المشكلة يمكنك أن تشارك ملفات المشروع لفحصه ومعرفة سبب المشكلة. شكرالك

مرحباً, لحماية التطبيق الخاص بك وتنفيذ حد لمحاولات إدخال كلمة المرور الخاطئة، يمكنك اتباع الخطوات التالية في العمل على الجانب الخلفي والأمامي: الجانب الخلفي (Back-end) إنشاء قاعدة بيانات لتخزين معلومات المستخدمين، بما في ذلك الاسم وكلمة المرور وعدد المرات التي تم فيها إدخال كلمة المرور الخاطئة. عندما يقوم المستخدم بإدخال كلمة مرور خاطئة، قم بزيادة عدد المحاولات الفاشلة في قاعدة البيانات. قم بفحص عدد المحاولات الفاشلة للمستخدم بعد كل محاولة، وإذا وصلت إلى الحد المحدد (مثل ٥ مرات)، فقم بتحديث حالة المستخدم إلى "محظور" واحفظ وقت الحظر في قاعدة البيانات (مثل تاريخ ووقت الحظر). عندما يحاول المستخدم المحظور الوصول إلى الموقع، قم بفحص وقت الحظر المخزن وقارنه بالوقت الحالي. إذا انتهت فترة الحظر، قم بإزالة حالة المستخدم "المحظور" وأعد عدد المحاولات الفاشلة إلى الصفر. الجانب الأمامي (Front-end) عند إدخال كلمة المرور في واجهة المستخدم، قم بإرسالها إلى الخادم باستخدام طلب HTTP. استخدم استجابة الخادم لفحص ما إذا كانت كلمة المرور صحيحة أم لا. إذا كانت كلمة المرور خاطئة، فقم بعرض رسالة خطأ للمستخدم وتحديث عدد المحاولات الفاشلة التي تمت. عندما يتم حظر المستخدم، قم بعرض رسالة له يبلغه فيها عن حظره ومتى سينتهي الحظر. مثال عملي : بفرض لدينا تطبيق Express و React , فسوف نقوم بالتالي : من الجانب الخلفي Express : // Import required modules and set up database connection // Route to handle login requests app.post('/login', async (req, res) => { const { username, password } = req.body; try { // Fetch user from the database based on the username const user = await User.findOne({ username }); if (!user) { return res.status(404).json({ message: 'Invalid username or password' }); } // Check if password matches const passwordMatches = await user.comparePassword(password); if (!passwordMatches) { // Increase the failed login attempts for the user user.failedAttempts += 1; await user.save(); if (user.failedAttempts >= 5) { // Set the user status to "blocked" and save the block time user.status = 'blocked'; user.blockedUntil = Date.now() + (2 * 60 * 60 * 1000); // Block for 2 hours await user.save(); return res.status(401).json({ message: 'Your account has been blocked. Please try again after 2 hours.' }); } return res.status(401).json({ message: 'Invalid username or password' }); } // Reset the failed login attempts and save the user user.failedAttempts = 0; await user.save(); // Generate and return the authentication token const token = generateAuthToken(user); res.json({ token }); } catch (error) { console.error(error); res.status(500).json({ message: 'Internal server error' }); } }); من الجانب الأمامي React : import React, { useState } from 'react'; const LoginForm = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username, password }), }); if (response.ok) { const { token } = await response.json(); // Store the token in local storage or state for future requests } else { const { message } = await response.json(); setError(message); } } catch (error) { console.error(error); setError('An error occurred. Please try again later.'); } }; return ( <form onSubmit={handleSubmit}> <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> <button type="submit">Login</button> {error && <p>{error}</p>} </form> ); }; export default LoginForm; لاحظ أنه من الجانب الخلفي قمنا بحظر المستخدم لمدة ساعتين عندما قام بالمحاول 5 مرات بإدخال كلمة المرور . وأيضاً نقوم بإرجاع رسالة الخطأ من الجانب الخلفي , ومن الجانب الأمامي نقوم فقط بعرضها . بالإضافة إلى تنفيذ حد لمحاولات إدخال كلمة المرور، هناك بعض النصائح الأمنية الأخرى التي يجب مراعاتها: تخزين كلمات المرور بشكل آمن باستخدام تقنيات التجزئة (hashing) و (salting) لمنع الوصول إلى الكلمات المرور الأصلية. استخدم HTTPS لتأمين اتصالاتك وتشفير بيانات المستخدم الحساسة أثناء النقل. قم بتنفيذ إجراءات الحماية من هجمات Cross-Site Scripting (XSS) وCross-Site Request Forgery (CSRF) وInjection وغيرها من هجمات الأمان الشائعة. تحقق من صحاستخدم مكتبة حماية الهوية والوصول الموثوق بها في إطار العمل الخاص بك، مثل Passport.js، لإدارة عملية المصادقة والتحقق من صحة كلمات المرور وإدارة الحظر والحماية الأخرى.

أهلاعمر جرب هذه الحلول تأكد من أنك في المجلد الصحيح قم بتنفيذ الأمر dir و سيظهر لك قائمة بالمجلدات الموجودة في هذا المسار , تأكد من وجود مجلد الديسكتوب في هذه القائمة. جرب استخدام المسار الكامل للمجلد الذي تريد الوصول إليه أي هكذا cd "C:\Users\Username\Desktop" قم بوضع اسم المستخدم الخاص بك مكان username جرب أن تغلق ال cmd و تعيد فتحها من جديد وتنفذ الأمر cd desktop

وعليكم السلام , أهلاً عمر . انت تقوم بكتابة cd desktop يجب عليك الإنتباه أنه أول محرف يجب أن يكون Capital Letter اذا كان يبدأ الاسم بD بدلاً من d, أي كالتالي : cd Desktop

وعليكم السلام , أهلاً محمود , بالنسبة للسؤال الأول: لماذا نستخدم ReactDOM.createPortal وما هي فائدته؟ ReactDOM.createPortal هو وظيفة في مكتبة ReactDOM في React تسمح بتقديم المكونات إلى عنصر DOM خارج هيكلة الشجرة الرئيسية لتطبيق React. وتستخدم عادة في حالات تريد فيها عرض المحتوى في عنصر DOM مستقل عن عنصر الجذر الرئيسي للتطبيق.وذلك يفيد في توفير القدرة على عرض المكونات في مكان محدد بشكل مستقل عن شجرة المكونات الرئيسية. يمكن استخدامه في حالات مثل عرض شريط التحميل (loader) في الجزء العلوي من الصفحة أو عرض قائمة منبثقة (dropdown) خارج المكون الأصلي. إليك مثال يوضح ذلك : بفرض أنه نريد وضع شريط التحميل في الجزء العلوي من الصفحة , فسوف نقوم باستخدام createPortal كما في الكود التالي : import React from 'react'; import ReactDOM from 'react-dom'; const Loader = () => { return ReactDOM.createPortal( <div className="loader-wrapper"> <div className="loader"> <img src={loaderImg} alt="Loading..." /> </div> </div>, document.getElementById('loader-root') ); }; const App = () => { return ( <div> <h1>Welcome to my app</h1> <p>This is some content.</p> <Loader /> </div> ); }; ReactDOM.render(<App />, document.getElementById('root')); لاحظ في هذا المثال، قمت باستخدام ReactDOM.createPortal لعرض مكون Loader في عنصر DOM منفصل ب id يسمى loader-root. وبالتالي يتم عرض شريط التحميل في الجزء العلوي من الصفحة دون أن يكون جزءا من شجرة المكونات الرئيسية. أما بالنسبة للسؤال الثاني: فائدة وضع المتغيرات فوق الدالة في مكون React في المثال الأول الذي قدمته، يتم تعريف المتغيرات قبل الدالة المكون. هذا يتيح إمكانية استخدام هذه المتغيرات داخل الدالة أو في أي مكان آخر داخل الملف. المثال التالي يوضح ذلك : import React from 'react'; const UserStats = () => { const a = 'Hello'; const b = 'World'; return ( <div className="component"> <h2>{a} {b}</h2> <p>This is a user stats component.</p> </div> ); }; export default UserStats; في هذا المثال، قمت بتعريف المتغيرات a و b قبل الدالة المكون. وبالتالي، يمكن استخدامها داخل الدالة لعرض قيمهما في العناصر JSX. أما في المثال الثاني، فقمت تعريف المتغيرات داخل الدالة نفسها. وبالتالي، يمكن استخدامها فقط داخل الدالة ولا يمكن الوصول إليها في أي مكان آخر في الملف. كما في المثال التالي : import React, { useEffect, useState } from 'react'; const UserStats = () => { const [userData, setUserData] = useState(null); useEffect(() => { const fetchUserData = async () => { const response = await fetch('https://api.example.com/user'); const data = await response.json(); setUserData(data); }; fetchUserData(); }, []); const username = userData?.username; const followers = userData?.followers; return ( <div className="component"> <h2>{username}</h2> <p>Followers: {followers}</p> </div> ); }; export default UserStats; في هذا المثال، قمت باستخدام المتغيرات username و followers في المنطق التحضيري (استدعاء API وتحديث الحالة) قبل عرض المكون. بمجرد جلب بيانات المستخدم وتحديث الحالة، يتم استخدام المتغيرات في عناصر JSX لعرض اسم المستخدم وعدد المتابعين

الخطأ الأول يشير إلى أنه التطبيق غير قادر على الاتصال بال DNS الخاص بخادم mongoDB و هذه المشكلة متعلقة باعدادات الشبكة والاتصال و لحلها يمكنك اتباع الخطوات التالية: تأكد من وجود اتصال إنترنت وأنك تستطيع الوصول إلى مواقع الويب الأخرى أو الخدمات بدون أي مشاكل. تأكد من عنوان خادم MongoDB الذي تستخدمه من أنه صحيح و أنه لا يوجد أخطاء في الكتابة أو حروف مفقودة. تأكد من أنك تستخدم الاسم الصحيح لمضيف خادم mongoDB . تحقق من جدار الحماية الخاص بك من أنه لا يحظر الاتصال مع خادم mongoDB باتباع هذه الخطوات يجب أن تتمكن من حل الخطأ. الخطأ الثاني يشير إلى أنه يتم رفض الاتصال من خادم mongoDB عليك أن تتحقق من صحة معلومات الاتصال, تحقق من عنوان الخادم ورقم المنفذ. تأكد من أن الخادم متاح. الطريقة الصحيحة لاستخدام mongoDB atlas انشاء حساب من خلال موقع mongoDb Atlas بعد أن تنشأ الحساب قم بإنشاء مشروع جديد و حدد أعداداته ضمن المشروع الجديدقم بإنشاء عنقود الذي سيستضيفقاعدة البيانات الخاصة بك للاتصال بقاعدة البيانات عبر تطبيقك يمكنك استخدام سلسلة الاتصال التي سيقدمها لك mongoDB Atlas و التي تحتوي اسم المضيف و رقم المنفذ ومعلومات المستخدم الخاصة بك, يمكنك استخدام المكتبة الملائمة للغة البرمجة التي تستخدمها لإنشاء اتصال وتنفيذ عمليات على قاعدة البيانات

الريأكت تعتمد على لغة البرمجة java script ,لذا من الضروري أن تكون على دراية جيدة بأساسياتها قبل البدء بتعلم الريأكت . بالإضافة إلى ذلك يجب أن تكون ملم باللغات الأساسية لتطوير الواجهات الأمامية للويب و التي هي html و css. الأن بعد تعلم أساسيات الويب يمكنك البدء بتعلم الريأكت. بداية عليك أن تتعرف على بنية مشروع الريأكت و طريقة تقسيم الملفات بداخله ليكون مشروعك منظم وواضح و قابل للصيانة. ثم عليك أن تتعرف على المفاهيم الأساسية المستخدمة في الريأكت و هي : ال syntax الخاص بالريأكت مثلا في ال html كنا نكتب بهذه الطريقة: <button onclick="activateLasers()"> Activate Lasers </button> أما في الريأكت : <button onClick={activateLasers}> Activate Lasers </button> لاحظ كيف اختلفت طريقة استدعاء التابع و ال onClick أصبح الحرف الأول من الكلمة الثاني كبير C jsx component بالإضافة إلى ذلك عليك أن تعلم أن هناك نوعين من ال component في الريأكت و هما: 1- class component: لم يعد مستخدم الأن 2- functional component: و هو المستخدم الأن لأنه أقل تعقيدا و أوضح و ثم قم بعمل أي مشروع صغير لتطبق ماتعلمته و لكي تتوضح لك الأمور أكثر. ثم عليك أن تتعمق أكثر و تتعرف على مفاهيم أكثر مثل: props: تستخدم لتمرير البيانات بين ال components hooks: تستخدم لإدارة حياة الكمبوننت useState: تستخدم لإدارة حالة الكمبوننت و تحديث متغيراته و عكسها على الواجهة و هي مهمة جدا في الريأكت , وهي من ال hooks باستخدام مفاهيم ال props و ال hooks تستطيع أن تبني موقع تفاعلي , و يصبح مستواك في الريأكت جيد . و الأن يمكنك تعلم كيف تجلب البيانات من ال api باستخدام مكتبات ال javascript مثل axios و يمكنك تعلم مفاهيم متقدمة مثل (redux) وكيف تقوم بإدارته و جلب البيانات منه و ادخال البيانات اليه و تحديث الواجهة عندما يتغير. إليك بعض الدورات التي يمكنك البدء منها دورة اساسيات javascript اساسيات react.js

يمكنك تنفيذ ذلك باستخدام Redux , هذا مثال كامل يوضح ما ترديه تماماً : أولاً نقوم بإنشاء actions لتعريف login و logout apis و استخدام jsonwebtoken لنقوم بعمل decode للتوكين المستقبل من api . أيضاً لاحظ لاستخدامنا لdispatch لنتمكن من حفظ التوكين في redux slice الذي سوف نقوم بإنشاءها بملف reducer: // actions.js File import axios from 'axios'; import jwtDecode from 'jsonwebtoken'; export const login = (username, password) => async (dispatch) => { try { const response = await axios.post('/api/login', { username, password }); const token = response.data.token; const decodedToken = jwtDecode(token); dispatch({ type: 'LOGIN', payload: { token, user: decodedToken }, }); } catch (error) { console.log(error); } }; export const logout = () => (dispatch) => { dispatch({ type: 'LOGOUT', }); }; ومن ثم نقوم بإنشاء ملف reducer : // reducer.js File const initialState = { isAuthenticated: false, token: null, user: null, }; const reducer = (state = initialState, action) => { switch (action.type) { case 'LOGIN': return { ...state, isAuthenticated: true, token: action.payload.token, user: action.payload.user, }; case 'LOGOUT': return { ...state, isAuthenticated: false, token: null, user: null, }; default: return state; } }; export default reducer; ومن ثم نقوم بإنشاء store الخاص بredux. // store.js File import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducer from './reducers'; const store = createStore(reducer, applyMiddleware(thunk)); export default store; والان بعد انشاء redux وحفظ التوكين , يمكننا استخدامها في ملفات login و logout. Login : import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { login } from '../redux/actions'; const Login = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const dispatch = useDispatch(); const handleLogin = () => { dispatch(login(username, password)); }; return ( <div> <h2>Login</h2> <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <button onClick={handleLogin}>Login</button> </div> ); }; export default Login; Logout : import React from 'react'; import { useDispatch } from 'react-redux'; import { logout } from '../redux/actions'; const Logout = () => { const dispatch = useDispatch(); const handleLogout = () => { dispatch(logout()); }; return ( <div> <h2>Logout</h2> <button onClick={handleLogout}>Logout</button> </div> ); }; export default Logout;

اهلاً احمد

وعليكم السلام, بالنسبة لمنصات شوبيفاي وسلة , فهذه المنصات تعتمد بشكل كامل على برمجة واجهات أمامية بلغاتها الخاص . حيث يكون backend جاهز من المنصة , وأنت كمبرمج واجهات امامية تقومبتصميم القوالب وعرضها للبيع , وهذا يتطلب الترويج عبر منصات التواصل الاجتماعي ومنصات مستقل وخمسات و متجر بيكاليكا . بالنسبة لشوبيفاي : فهو يعتمد بشكل اساسي على HTML, CSS, JS, Liquid لتطوير قوالب خاصة بشوبيفاي . لكن يمكنك عرض متجرك الالكتروني من خلال بناء حساب في منصات العمل الحرة , وبناء معرض اعمال جذاب وعرضه على المشترين في منصة خمسات ومتجر بيكاليكا , أو من خلال تقديم عروضك في منصة مستقل. كما يمكنك التواصل بعد حضور الدورة مع فريق الدعم لكي يساعدك بشكل كامل على بناء السيرة الذاتية الخاصة بك , إضافة إلى بناء حسابك في منصات التابعة لشركة حسوب . هذه بعض الاسئلة المتعلقة بسؤالك , ما هي المتطلبات في منصات العمل , والاختصاصات المطلوبة , و كيف تبدأ العمل بها . يمكنك الإطلاع عليها والاستفادة منها أيضاً.

لاحظ أحمد أنك تقوم بطلب server من خلال العنوان التالي ip: 192.168.8.104 وهو يعمل من خلال localhost . جرب طلب server من خلال http://localhost:<port> في مثالك تصبح كالتالي : http://localhost:5100 جربه وأخبرني في حال هناك اي مشكلة

مرحباً محمد , قمت بتحميل مشروعك ... هناك خطأ باسم التابع onsubmit ... انت قمت بتعريف تابع اسمه onSubmit , وتستخدم onsubmit , قم بتعديله ليصبح بالشكل التالي : <Formik initialValues={{ name: null, email: null, password: null, confPassword: null, }} validationSchema={validationSchema} onSubmit={(values, { resetForm }) => { console.log(values); onSubmit(values); // السطر الذي تم تعديله resetForm({ values: "" }); }} > قم بتصحيح الخطأ وأعلمني في حال كان هناك مشكلة اخرى

مرحباً أحمد , قمت بتحميل مشروعك وتنفيذه , ظهر عندي بعض الملاحظات ومن ثم يعمل بنجاح . يجب عليك الانتباه الى port الخاص بserver ... أنت حالياً تستخدم port = 5432 , هذا الport خاص لpostgres , لذلك عليك استخدام اي port اخر , جرب port = 5012 بعدها قمت بتنفيذ مشروعك , وقمت بإنشاء حساب جديد , ومن ثم قمت بتسجيل الدخول ولم يظهر لي أي خطأ اخر , كما في الصورة .

هذا يعود الى طبيعة تخصصك في مجال البرمجة كما قالوا المدربين في التعليقات السابقة , سوف تحتاج الى فهم عميق في css عندما تعمل كمطور frontend , أو مطور قوالب shopfiy او wordpress , هذه بعض المفاهيم الاساسية التي يجب عليك تعلمها في هذا التخصص كمبتدأ : تحديد العناصر: يجب أن تتعلم كيفية تحديد العناصر التي ترغب في تنسيقها في صفحة الويب باستخدام المحددات المختلفة. يمكنك استخدام المحددات العنصرية (Element Selectors) والمحددات (Class Selectors) والمحددات (ID Selectors) وغيرها. تنسيق النص: يجب أن تتعلم كيفية تنسيق النص في صفحات الويب باستخدام خصائص CSS مثل اللون والحجم والخط والتباعد بين الأحرف والمزيد. التنسيقات البسيطة: يجب أن تتعلم كيفية تحقيق التنسيقات البسيطة للعناصر، مثل تحديد ألوان الخلفية وحدود العناصر والهوامش والتباعد بين العناصر. نماذج الصناديق: يجب أن تتعلم كيفية تنسيق نماذج الصناديق مثل الصناديق المستطيلة وأزرار التحكم والقوائم المنسدلة ومربعات الاختيار ومربعات الاختيار والمزيد. التنسيقات المتعددة: أحد أهم المفاهيم المهمة جداً , يجب أن تتعلم كيفية تنسيق العناصر بطرق مختلفة، مثل تنسيق العناصر في صفوف وأعمدة باستخدام Flexbox أو CSS Grid. التحكم في العناصر: يجب أن تتعلم كيفية التحكم في موضع وحجم العناصر وتحقيق التحولات والانتقاء المتقدم لتنسيق العناصر بشكل دقيق. الوحدات والقيم: يجب أن تتعلم عن الوحدات المختلفة في CSS مثل البكسل والنسبة المئوية والـ REM وكيفية استخدامها لتحديد الأبعاد والحجم والمسافات والتنسيقات الأخرى. الرسومات والتحولات: يجب أن تتعلم كيفية تحقيق تأثيرات بصرية وحركة للعناصر باستخدام التحولات والرسومات في CSS. التصميم المتجاوب مع أحجام شاشات مختلفة: يجب أن تتعلم كيفية تحقيق تصميم متجاوب مع احجام شاشات مختلفة مثل شاشة حاسوب , وشاشة الأيباد , وشاشات الجوالات بأحجامها المختلفة , وذلك باستخدام (Media Queries) في CSS. ببدأ بتعلم هذه الاساسيات الى جانب javascript و html , سوف تتمكن من إنشاء إنشاء تصاميم جذابة والبدء في مسارك المهني . ايضاً لا تنسى أنه التعلم مستمر , لن تتقن كل شيء في أول مشروع لك , سوف تحتاج الى مشاريع مختلفة لتتقن استخدامك لCSS.

يمكنك ذلك من خلال اتباع الخطوات التالية: أولاً تأكد من تثبيت Laravel 10 وإعداد بيئة العمل الخاصة بك. ثانياً قم بتنزيل مشروع Webpack و Sass الجاهز الي تريده , ومن ثم فك الضغط عنه. انتقل إلى مجلد مشروع Laravel باستخدام سطر الأوامر. قم بتثبيت المكتبات اللازمة باستخدام أداة إدارة حزم Composer. يمكنك تنفيذ الأمر التالي في سطر الأوامر: composer install قم بنسخ ملفات المشروع (ملفات الـ Webpack و Sass) في مجلد المشروع الخاص بـ Laravel. قم بتحديث ملف webpack.mix.js الخاص بـ Laravel لتضمين ملفات المشروع الجديدة. يمكنك تعديل الملف كما يلي: const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .js('mypath/webpack/files', 'public/js') .sass('mypath/sass/files', 'public/css'); تأكد من استبدال عناوين js ,css ( mypath) بمسارات الملفات الفعلية في مشروعك. قم بتشغيل أمر البناء الخاص بـ Webpack لتجميع وتجهيز الملفات. في سطر الأوامر، قم بتنفيذ الأمر التالي: npm run dev أو إذا كنت ترغب في انشاء نسخة production ، يمكنك استخدام الأمر التالي: npm run prod تأكد من أن ملفات الناتج (الجافاسكريبت والـ CSS) تم إنشاؤها بنجاح في مجلد `public/js` و `public/css` في مشروع Laravel. قم بتضمين ملفات الناتج في قوالب Laravel الخاصة بك. يمكنك استخدام وسوم `<script>` و `<link>` في قوالب العرض الخاصة بك للإشارة إلى ملفات الجافاسكريبت والـ CSS على التوالي. أخيراً يمكنك الأن تشغيل خادم Laravel وفتح موقعك في المتصفح للتحقق مما إذا كانت المشروع المدمجة تعمل بشكل صحيح.

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

مرحباً, هل يمكنك تزويدنا برابط السؤال على leecode , أو أن تقوم بمشاركة الكود ؟

هذا مثال بسيط في Node.js يوضح كيفية استخدام واجهة برمجة التطبيقات (API) لتنفيذ عملية شحن بطاقة باستخدام بوابة الدفع فيزا: const express = require('express'); const axios = require('axios'); const app = express(); app.use(express.json()); app.post('/charge', async (req, res) => { try { const { cardNumber, amount } = req.body; // قم بإرسال طلب الدفع إلى بوابة الدفع (Visa) const paymentResponse = await axios.post('https://visa-payment-gateway.com/charge', { cardNumber, amount }); // تحقق من استجابة الدفع if (paymentResponse.data.success) { // إذا كانت العملية ناجحة، قم بتنفيذ الإجراءات اللازمة هنا // مثل تحديث قاعدة البيانات أو إصدار بطاقة جديدة وما إلى ذلك res.status(200).json({ message: 'تمت عملية الشحن بنجاح' }); } else { // إذا كانت هناك مشكلة في عملية الدفع، قم بإرجاع رسالة الخطأ res.status(400).json({ error: 'فشلت عملية الشحن' }); } } catch (error) { // إذا حدث خطأ أثناء الاتصال ببوابة الدفع res.status(500).json({ error: 'حدث خطأ في الخادم' }); } }); app.listen(3000, () => { console.log('الخادم يعمل على المنفذ 3000'); }); في هذا المثال: - نستخدم إطار العمل Express.js لإنشاء خادم. - نستخدم مكتبة axios لإرسال طلبات HTTP. - يتم تحديد نقطة النهاية /charge التي تستقبل طلبات POST لعملية الشحن. - نتوقع بيانات البطاقة والمبلغ من جسم الطلب (`req.body`). - نستخدم مكتبة axios لإرسال طلب POST إلى بوابة الدفع (`https://visa-payment-gateway.com/charge`) مع بيانات البطاقة والمبلغ. - نتحقق من استجابة الدفع ونقوم بتنفيذ الإجراءات المناسبة على أساس الاستجابة. - نُرسل ردًا مناسبًا إلى العميل مع رسائل النجاح أو الفشل. هذا مجرد مثال بسيط يوضح كيفية استخدام واجهة برمجة التطبيقات (API) في Node.js لتنفيذ عملية شحن بطاقة باستخدام بوابة الدفع فيزا.

هذا مثال بسيط يوضح الفرق بين "Next build" و "Next export" باستخدام بعض الكود : - مثال على "Next build": فرضًا أن لديك تطبيق Next.js بسيط يحتوي على ملف pages/index.js يحتوي على الصفحة الرئيسية للتطبيق. قم بتحرير الملف index.js على النحو التالي: export default function Home() { return <h1>Hello, Next.js!</h1>; } بعد ذلك، قم بفتح محرر الأوامر (Command Line) واكتب الأمر التالي: next build سيقوم هذا الأمر ببناء التطبيق المحلي وتجميعه. ستظهر رسائل الإخراج في سطر الأوامر توضح عملية البناء والتجميع. بعد الانتهاء، ستكون لديك مجلد /.next يحتوي على الملفات المجمعة (مثل HTML وCSS وJavaScript) جاهزة للتشغيل على الخادم المحلي. - مثال على "Next export": في هذا المثال، سنستخدم نفس الملف pages/index.js المذكور أعلاه. قم بتحريره مرة أخرى إلى المحتوى التالي: export default function Home() { return <h1>Hello, Next.js!</h1>; } ثم، قم بتحرير ملف next.config.js في الجذر الخاص بمشروعك وأضف الكود التالي: module.exports = { exportPathMap: function () { return { '/': { page: '/' }, }; }, }; هذا التكوين يحدد العنوان (route) الذي سيتم تصديره، وفي هذه الحالة هو `/` (الصفحة الرئيسية). ثم، قم بفتح محرر الأوامر واكتب الأمر التالي: next build next export سيقوم الأمر الأول next build ببناء التطبيق المحلي وتجميعه، والأمر الثاني next export سيقوم بتصدير التطبيق بناءً على التكوين المحدد في next.config.js. ستظهر رسائل الإخراج في سطر الأوامر توضح عملية التصدير. بعد الانتهاء، ستكون لديك مجلد out يحتوي على الملفات الثابتة (مثل HTML وCSS وJavaScript) التي يمكن نشرها على أي خادم ويب يدعم الملفات الثابتة.

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

مرحباً احمد, قمت بالإطلاع على مشروعك بالكامل , هناك خطأ في الاتصال بقاعدة البيانات . يوجد بعض الملاحظات والخطوات , ارجو إتباعها وإخباري ما إذا تم حل المشكلة أم لاء : في ملف database.js قمت بوضع host: process.env.DB_HOST, وفي ملف .env قمت بتعريف DB_HOST = localhost . عند الرفع يجب عليك تغييرها , لذلك هي تعمل على جهازك من غير مشاكل , بينما عند الرفع يعطيك خطأ في الاتصال . بعد تغييرها قم بإطلاق المشروع . إذا أظهر خطأ بخصوص ssl , قم بإستبدال المتغير db بالكود التالي في ملف database.js : const db = new Sequelize( process.env.DB_NAME, process.env.DB_USER, process.env.DB_PASS, { host:process.env.DB_HOST, dialect: 'postgres', logging: false, dialectOptions: { // الكود الذي يجب عليك تضمينه ssl: { require: true, rejectUnauthorized: false } } }) ربما يظهر لك خطأ بخصوص التحقق مع قاعدة البيانات , تأكد من كلمة السر , أو قم بتغييرها من خلال الخطوات التالية : قم بتسجيل الدخول إلى خادم قاعدة بيانات PostgreSQL باستخدام أداة مثل psql أو واجهة رسومية. اتصل بقاعدة البيانات باستخدام مستخدم "المستخدم_الخاص_بك" : psql -U postgres بمجرد الاتصال، يمكنك إعادة تعيين كلمة المرور لمستخدم "المستخدم_الخاص_بك" باستخدام الأمر التالي: ALTER USER اسم_المستخدم_الخاص_بك WITH PASSWORD 'new_password'; بعد إعادة تعيين كلمة المرور، قم بتحديث تكوين Sequelize أو متغيرات البيئة ( .env file ) باستخدام كلمة المرور الجديدة.