لوحة المتصدرين

هل من شارح لي كيف يمكنني برمجة تسجيل الدخول والخروج في React؟ كيف ستكون الآلية؟ إذا تصورنا أن هناك API تأتي مني بيانات مع JWT فكيف علي حفظ ال token في React؟ هل ممكن تبسيط الأمر باستخدام مكتبات جاهزة مثلا؟ مشكورين من قبل

يمكنك تنفيذ ذلك باستخدام 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;

السلام عليكم ورحمة الله وبركاته, أريد تحديث بيئة العمل Node.js مع NPM إلى أحدث إصدار فكيف افعلها بأفضل طريقة ؟, لأنني عندما بحثت وجدت طرق كثيرة مختلفة, وبعضهم يقول قم بحذف Node.js بالكامل من الجهاز ثم ثبتها مجددًا, ولا أعلم ما هي الطريقة الأفضل لذلك سألتكم, الإصدارات الحالية: وشكرًا لكم

من الأفضل حذف نسخة Node.js القديمة تمامًا uninstall ثم تثبيت النسخة الجديدة والتي يمكنك تحميلها من هنا: https://nodejs.org/en ودائمًا اختر النسخة المستقرة وهي LTS وهي إصدار 20 حاليًا. لكن هناك طريقة أفضل والتي يستخدمها مطوري Node.js لكن البعض قد يجدها معقدة قليلاً، وهي استخدام مدير إصدارات وهو NVM بمعنى أنه يمكنك تحميل أكثر من إصدار لـ Node والتنقل بينهم بكل سهولة باستخدام أمر بسيط. والأمر يتم كالتالي حذف أي إصدار Node.js لديك على حاسوبك من لوحة التحكم Control panel ثم تحميل وتثبيت NVM من: https://github.com/coreybutler/nvm-windows/releases/download/1.1.12/nvm-setup.exe وبعد التثبيت قم بتنفيذ الأمر التالي في منفذ الأوامر: nvm install lts وذلك من أجل تثبيت أحدث إصدار مستقر متوفر. أو يمكنك تحميل إصدار معين من خلال: nvm install 18 ثم قم بعرض الإصدارات الذي تم تثبيتها من خلال: nvm ls ولتفعيل إصدار معين اكتب رقمه فقط كالتالي: nvm use 18 والآن أنت على إصدار 18 وتستطيع التأكد من خلال: node --version وإذا أردت التنقل إلى أي إصدار اكتب nvm use ورقم الإصدار بجانبه.

الطريقة الأبسط والأسهل هي تنزيل النسخة الموزعة الأخيرة من الموقع الرسمي وتثبيتها بطريقة اعتيادية. قم بتنزيل أحدث إصدار من Node.js من الموقع الرسمي: Node.js Downloads. اختر إصدارا مستقرا (LTS) إذا كنت ترغب في الحصول على إصدار يتم دعمه لفترة طويلة، أو اختر أحدث إصدار إذا كنت ترغب في استخدام أحدث الميزات. أما كطريقة أخرى، هي باستخدام مدير حزم Node أو بما يعرف بـ NVM، وهو مكتبة تنفيذية تساعدك في التبديل بين نسخ Node ببساطة. وهو بشكل أساسي متوفر لأنظمة Linux ولكن يوجد اصدار منه للويندوز يمكنك الوصول إليه من هنا. ولتثبيته ما عليك إلا اتباع الخطوات: قم بتنزيل ملف التثبيت من على الموقع الرسمي أو من هنا. قم بتشغيل ملف التثبيت واتبع خطوات التثبيت حتى آخرها. الآن يمكنك التبديل بين نسخ Node بشكل عادي: nvm use 14.0.0 .

الأمر بسيط، عملية تسجيل الدخول والخروج في رياكت متعقلة بإرفاق رمز token في الطلبيات المرسلة الى الخادم، فمتى ما غاب هذا الرمز عن الطلبيات تم رفض اتمام الطلبية، نفس المنطق وراء حجب او اظهار بعض الصفحات أو المكونات في رياكت. ولهذا سوف يمكن التحكم في عملية تسجيل الدخول والخروج بناء على حضور هذا الرمز في التطبيق أو مرفقا في ترويسات الطلبيات المرسلة للخادم. لنقل أنه يتم استقبال رمز jwt عند ارسال طلبية تسجيل الدخول الى الخادم، بعد ذلك سيتم حفظ هذا الرمز في التخزين المحلي localeStorage لتطبيق رياكت. لاحقا، سيتم التحقق مما ان كان رمز jwt موجودا في localeStorage أو لا، فإن كان: تم عرض الصفحة أو قبول التوجيه اليها. وفي حال ما لم يكن، لم يتم عرضها ولم يتم قبول التوجيه اليها. في نفس الوقت، يتم اضافة رمز jwt المخزن في localeStorage الى كل طلبية مرسلة الى الخادم في ترويسة Authorization ليتم توثيق الطلبيات من قبل الخادم. وبالنسبة لتسجيل الخروج، فستكون العملية أبسط. اذ سنقوم فقط بمحو هذا الرمز من على التخزين المؤقت، ولن يمكن للمستخدم اعادة تسجيل واحد جديد إلا لما يعيد عملية تسجيل الدخول من جديد.

المشكلة هنا تحدث بسبب وجود قيم None في الأعمدة المراد مقارنتها. عندما تحاول مقارنة None مع رقم عن طريق > فإنه لن يسمح بذلك لأن None ليست قيمة رقمية. هناك عدة طرق لحل هذه المشكلة: 1- استبدال قيم None بقيمة أخرى مثل 0 قبل عملية المقارنة: Table.fillna(0, inplace=True) 2- تجاهل الصفوف التي تحتوي على None: Table = Table[Table[col1].notna() & Table[col2].notna()] نعم يمكن تعديل الكود لتطبيق الشرط المطلوب: # ايجاد اكبر قيمة بين العمودين 14 و 15 max_col = Table.iloc[:, [14,15]].max(axis=1) # تطبيق الشرط Table['3أكبر_قيمة'] = max_col.apply(lambda x: Table.iloc[:, 14] if 0 < x < 50 else x ) نقوم بإيجاد أكبر قيمة بين العمودين رقم 14 و 15 في DataFrame المسمى `Table`. ثم نقوم بإضافة عمود إلى DataFrame يسمى '3أكبر_قيمة'. ثم نطبق دالة (function) على كل قيمة في `max_col`. الدالة هنا هي `lambda x: Table.iloc[:, 14] if 0 < x < 50 else x`. إذا كانت القيمة `x` بين 0 و50، فإن القيمة المطلوبة تكون `Table.iloc[:, 14]` (قيمة في العمود 14). إذا لم تكن تلبي هذا الشرط، يتم استخدام القيمة الأصلية `x`.

لقد قمت بشراء دورة ال PYTHON ولا اجدها في الدورات الخاصة بي

حسنا اخي يمكنك استخدام داله apply في مكتبه pandas بمساعده داله lambda وتعديل سطر الكود لهذا df['أكبر_قيمة'] = df.iloc[:, 2:5].max(axis=1).apply(lambda x: 50 if x > 50 else x) نحن هنا اضفنا شرط لو كانت القيمه الكبري اكبر من 50 ستظل 50, لكن لو اصغر سياخذ القيمه الكبري حل اخر يمكنك استخدام for loop سيتكرر هذا الكود لكل صف في الداتا يقوم أولاً بحساب القيمه الكبري مثل الكود السابق وتخزينها في عمود "أكبر_قيمة". ثم يتكرر فوق هذا العمود ويستبدل أي قيمة أكبر من 50 بـ 50. يمكنك اضافه هذا الكود بعد مباشره تكوين عمود 'أكبر_قيمة' for i in range(len(df['أكبر_قيمة'])): if df['أكبر_قيمة'].iloc[i] > 50: df['أكبر_قيمة'].iloc[i] = 50

رائع أخي لو سمحت لدي سؤال أخر بنفس النمط السابق أحتاج أن أستخدم دالة if حيث مثلا عند استخدام max بين عمودين ووجدت القيمة أكبر من 50 مثلا أريد أن يتجاهل القيمة الكبرى ويطبع مكانها 50