Salah Eddin Beriani2

بافتراض أن لديك مشروع node يحتوي على مكتبة lodash قديمة "dependencies": { "lodash": "^3.9.2" } يمكنك تشغيل npm outdated وستحصل على معلومات حول نسخ المكتبة Package Current Wanted Latest Location lodash 3.10.1 3.10.1 4.16.4 backend يمكنك الأن تثبيت النسخة الأخيرة عبر npm install lodash@latest

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

يمكنك استخدام طريقة insertAdjacentHTML () لواجهة Element بتوزيع النص المحدد بتنسيق HTML أو XML وإدراج العقد الناتجة في شجرة DOM في موضع محدد. لا يقوم بإعادة توزيع العنصر الذي يتم استخدامه عليه ، وبالتالي لا يفسد العناصر الموجودة داخل هذا العنصر. هذا يتجنب الخطوة الإضافية للتسلسل ، مما يجعلها أسرع بكثير من التلاعب المباشر بالداخل. element.insertAdjacentHTML(position, text); position سلسلة DOM تمثل الموضع بالنسبة للعنصر "beforebegin": قبل العنصر نفسه. 'afterbegin': داخل العنصر ، قبل طفله الأول. "beforeend": داخل العنصر ، بعد آخر طفل له. "afterend": بعد العنصر نفسه. text السلسلة المراد تحليلها بتنسيق HTML أو XML وإدراجها في الشجرة. <!-- beforebegin --> <span id="demo"> <!-- afterbegin --> foo <!-- beforeend --> </span > <!-- afterend --> var i; var x = document.getElementById('num'); function typeWord(){ var y = x.value; for( i=y; i>0; i--){ console.log(i); document.getElementById('demo').insertAdjacentHTML('beforeend',"<p>"+i+"</p>"); } }

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

يمكنك الاستعانة ب onerror و onload وأيضا ال state لأنشاء كون يرجع لصورة مختارة أو يمكنك أن لا تضع الصورة وتضع مكانها مكون هذا المثال سيعطيك فكرة عن كيف يمكنك التلاعب في حالتك لتفادي النتيجة غير المرغوبة export default function ImageComponent () { const [state, setState] = useState({loading:true,error:false}) const handleImageLoaded = ()=> { setState({ status: false, error: false }); } const handleImageError= ()=> { setState({ status: false, error: true }); } return ( <div> <img src={state.error ? 'static/404.png' : fallbackImage} onLoad={handleImageLoaded} onError={handleImageError} /> {state.status && "loading"} </div> ); } export default ImageComponent;

يوجد الكثير من طرق التحويل وكل واحد تحول الى صيغة لا تتشابه مع الاخرى لكن عادة انت ستحتاج array يمكنك منه أن تعرف المفتاح والقيمة ويمكنك الوصول الى ذلك عبر استخدام entries و بعدها foreach const numbers = { one: 1, }; const objectArray = Object.entries(numbers); objectArray.forEach(([key, value]) => { console.log(key); // 'one' console.log(value); // 1 });

أنت لا تحتاج استخدام webpack على الأقل مباشرة في مشاريعك لأن التكنولوجيات المتوفرة حاليا تجهز كل الاحتياجات لك في الخلفية يمكنك ان تحتاج webpack عندما تريد انشاء مشروع من الصفر و لا يوجد سبب في وقتنا هذا يدفعك لذلك غير تعلم التكنولوجيا في حد ذاتها لكنك حتما ستحتاج webpack اذا كنت تطور أشياء يستخدمها المطورين وكمثال على ذلك عندما طورو react وخرج للعلن قامو بانشاء أداة create react app المطورين الذين طورو الأداة كانو بحاجة ماسة ل webpack لذا الأمر يعتمد فقط على احتياجاتك

نعم لقد نظرت لquestionHOlder ووجدت انه array لذا لا يمكنك فعل ذلك سيتحتم عليك معرفة index الخاص بالسؤال ليمكنك جلب السؤال ثم الاكمال يعني هكذا [0]QustionHolder مثلا هو السؤال الاول [1]QustionHolder هو السؤال الثاني أنت الآن لابد أنه لديك طريقة لمعرفة ذلك الرقم استخدمه لجلب السؤال وبعدها سيمكنك الدخول الإجابات وفلترتها وسيكون هذا التغيير الأخير في الشيفرة التي كتبتها

في الصورة فوق بعد QustionHolder ضع علامة استفهام هكذا..... QustionHolder?.proposition?.find

أخي لديك كائن يحتوي على سؤال مثلا const question = { qustion: "من هي ام الرسول صلى الله عليه وسلم؟", proposition: [ { answer: " عائشة بنت أبي بكر", isCorrect: false, }, { answer: "حليمة السعدية ", isCorrect: false, }, { answer: "خديجة بنت خويلد", isCorrect: false, }, { answer: "آمنة بنت وهب ", isCorrect: true, }, ], } اذا يمكنك استخدام question للدخول لل proposition array و جلب الاجابة ال صحيحة بالفلترة Alert.alert(`: الاجابة خاطئة والاجابة الصحيحة هي ${question.proposition.find(q => q.isCorrect === true).answer}`) أما اذا كانت لديك قائمة أسئلة فتحتاج index الخاص بالسؤال Alert.alert(`: الاجابة خاطئة والاجابة الصحيحة هي ${question[i].proposition.find(q => q.isCorrect === true).answer}`)

مرحبا يمكنك استخدام find لتجلب الإجابة الصحيحة بهذه الطريقة ثم عرضها للمستخدم Alert.alert(`: الاجابة خاطئة والاجابة الصحيحة هي ${proposition.find(q => q.isCorrect === true).answer}`) بالطبع لا تنسى ان تدخل لل proposition من الكائن الذي أنشاته

يمكنك استخدام نفس ال queryset لكن أضف علامة ناقص قبل created_at User.objects.all().filter(role='user').order_by('-created_at') هكذا سيكون الترتيب تنازليا

هذا من الأسباب التي أدت لظهور شيء مثل nextjs واذا أردت كل ميزات ال seo فيمكنك أن تحول التطبيق الى nextjs وستتمتع هناك بكل ميزات ال seo اذا كان هذا يعتبر خيار مكلفا لك فيمكنك استخدام الخيار الثاني وهو انشاء custom server و عمل الserver side rendering بنفسك و ايتاح react app عن طريق server ةهذا مثال ملائم جدا في حالتك أولا ضع placeholders في index.html داخل مجلد public <head> ... <meta name="description" content="__META_DESCRIPTION__"/> <meta name="og:title" content="__META_OG_TITLE__"/> <meta name="og:description" content="__META_OG_DESCRIPTION__"/> <meta name="og:image" content="__META_OG_IMAGE__"/> ... </head> ثم ستملأ ال placeholders في ال custom server وهكذا حلت مشكلتك كليا const path = require('path'); const fs = require("fs"); const app = express(); const PORT = process.env.PORT || 3000; const indexPath = path.resolve(__dirname, '..', 'build', 'index.html'); // ايتاح المصادر الثابتة app.use(express.static( path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }, )); app.get('/*', (req, res, next) => { fs.readFile(indexPath, 'utf8', (err, htmlData) => { if (err) { console.error('Error during file reading', err); return res.status(404).end() } // المعرف من الرابط مثلا const postId = req.query.id; const post = axios(....postId);//هذا لجلب المعلومات if(!post) return res.status(404).send("Post not found"); // inject meta tags htmlData = htmlData.replace( "<title>React App</title>", `<title>${post.title}</title>` ) .replace('__META_OG_TITLE__', post.title) .replace('__META_OG_DESCRIPTION__', post.description) .replace('__META_DESCRIPTION__', post.description) .replace('__META_OG_IMAGE__', post.thumbnail) return res.send(htmlData); }); }); // listening... app.listen(PORT, (error) => { if (error) { return console.log('Error during app startup', error); } console.log("listening on " + PORT + "..."); });

هذه المشكلة من المشكلات التي تعبر جيدا عن معنى server side rendering بحيث أنك وضعا شرطا يتوفر الا في client وهذا الشرط هو تواجد ال data ووضعت ال head داخل ذلك و data لن تكون متوفرة في server side rendering وبالتالي أنت لن تحصل على معلومات داخل ال head والطريقة لاصلاح ذلك هي فقط بعدم وضع أي شرط للشيفرة التي ينبغي لها أن تشتغل في server {data ? ( <> <Head> <title>{book?.title}</title> <meta name="title" content={book?.title} /> <meta name="description" content={book?.description} /> <meta property="og:title" content={book?.title} /> <meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} /> <meta property="og:type" content="book" /> <meta property="og:description" content={book?.description} /> <meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} /> </Head> بدل وضع head داخل الشرط لتواجد data نخرجها لتكون ليست مقيدة بذلك الشرط <Head> <title>{book?.title}</title> <meta name="title" content={book?.title} /> <meta name="description" content={book?.description} /> <meta property="og:title" content={book?.title} /> <meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} /> <meta property="og:type" content="book" /> <meta property="og:description" content={book?.description} /> <meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} /> </Head> {data ? ( ..... )

قم بتشغيل Gradle build باستخدام وسيطة سطر الأوامر warning-mode all لترى بالضبط الميزات المهملة gradle build --warning-mode=all سيعطيك وصفًا تفصيليًا للمشكلات التي تم العثور عليها مع الروابط إلى مستندات Gradle للحصول على إرشادات حول كيفية إصلاح ال build الخاص بك. بإضافة stacktrace إلى ذلك ، ستتمكن أيضًا من تحديد مصدر التحذير إذا تواجدت شيفرة قديمة في أحد المكونات أو مكتبة مسببة للمشكلة بسبب النسخة gradle build --warning-mode=all --stacktracer

هذا مثال على علاقة many to many بين User و Profile. const User = sequelize.define('user', { username: DataTypes.STRING, points: DataTypes.INTEGER }, { timestamps: false }); const Profile = sequelize.define('profile', { name: DataTypes.STRING }, { timestamps: false }); أبسط طريقة لتعريف علاقة many to many هي: User.belongsToMany(Profile, { through: 'User_Profiles' }); Profile.belongsToMany(User, { through: 'User_Profiles' }); من خلال تمرير string إلى أعلاه نطلب Sequelize لإنشاء نموذج يسمى User_Profiles تلقائيًا مثل الجدول من خلال (المعروف أيضًا باسم جدول الوصلات) مع عمودين فقط معرف المستخدم ومعرف الملف الشخصي سيتم إنشاء مفتاح فريد مركب على هذين العمودين.

الجزء الأول في التغيير سيكون بسيط وكالتالي export default function Example() { const start = ([]) => { setState({ dragging: true }); }; const moving = ([y, circleY]) => { setState({ y }); }; const done = ([]) => { setState({ dragging: false }); }; return ( <SafeAreaView style={styles.container}> <Text>y: {state.y}</Text> <Animated.Code> {() => cond(eq(gestureState, State.BEGAN), call([], start))} </Animated.Code> <Animated.Code> {() => cond( eq(gestureState, State.ACTIVE), call([absoluteY, circleY], moving) ) } </Animated.Code> <Animated.Code> {() => cond( or( eq(gestureState, State.END), eq(gestureState, State.FAILED), eq(gestureState, State.CANCELLED) ), call([], done) ) } </Animated.Code> {state.dragging && <Animated.View style={[styles.box, { top: circleY }]} />} <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent} onHandlerStateChange={onGestureEvent} > <Animated.View style={[ // styles.box, { top: absoluteY, }, ]} > <Text>hello</Text> </Animated.View> </PanGestureHandler> </SafeAreaView> ); } أما الجزء الثاني فسيكون مقسم ولنبدأ بأبسط شئ وهو انشاء ال state وتغيير هذا الجزء this.state = { dragging: false, y: 0 }; الى const [state, setState] = React.useState({ dragging: false, y: 0 }) أما هذا الجزء يمكنك أن تضعه في state واحدة this.dragX = new Value(0); this.dragY = new Value(0); this.absoluteY = new Value(100); this.offsetX = new Value(width / 2); this.offsetY = new Value(100); this.gestureState = new Value(-1); this.onGestureEvent = event([ { nativeEvent: { state: this.gestureState, absoluteY: this.absoluteY, }, }, ]); this.circleY = add(this.absoluteY, new Value(200)); const [info, setInfo] = React.useState({ dragX: new Value(0), dragY: new Value(0), absoluteY: new Value(100), offsetX: new Value(width / 2), offsetY: new Value(100), gestureState: new Value(-1), onGestureEvent: event([ { nativeEvent: { state: new Value(-1), absoluteY: new Value(100), }, }, ]), circleY: add(new Value(100), new Value(200)), }); وفي المجمل المكون سيكون هكذا import React from 'react'; import { StyleSheet, View, Dimensions, Text, SafeAreaView, } from 'react-native'; import Animated from 'react-native-reanimated'; import { PanGestureHandler, State } from 'react-native-gesture-handler'; const { width } = Dimensions.get('window'); const { cond, eq, add, call, set, Value, event, or, } = Animated; export default function Example() { const [state, setState] = React.useState({ dragging: false, y: 0 }); const [info, setInfo] = React.useState({ dragX: new Value(0), dragY: new Value(0), absoluteY: new Value(100), offsetX: new Value(width / 2), offsetY: new Value(100), gestureState: new Value(-1), onGestureEvent: event([ { nativeEvent: { state: new Value(-1), absoluteY: new Value(100), }, }, ]), circleY: add(new Value(100), new Value(200)), }); const start = ([]) => { setState({ dragging: true }); }; const moving = ([y, circleY]) => { setState({ y }); }; const done = ([]) => { setState({ dragging: false }); }; return ( <SafeAreaView style={styles.container}> <Text>y: {state.y}</Text> <Animated.Code>{() => cond(eq(info.gestureState, State.BEGAN), call([], start))}</Animated.Code> <Animated.Code> {() => cond(eq(info.gestureState, State.ACTIVE), call([info.absoluteY, info.circleY], moving))} </Animated.Code> <Animated.Code> {() => cond( or( eq(info.gestureState, State.END), eq(info.gestureState, State.FAILED), eq(info.gestureState, State.CANCELLED), ), call([], done), ) } </Animated.Code> {state.dragging && <Animated.View style={[styles.box, { top: info.circleY }]} />} <PanGestureHandler maxPointers={1} onGestureEvent={info.onGestureEvent} onHandlerStateChange={info.onGestureEvent} > <Animated.View style={[ // styles.box, { top: info.absoluteY, }, ]} > <Text>hello</Text> </Animated.View> </PanGestureHandler> </SafeAreaView> ); }

value هي قيمة ال input حرفيا فاذا كتبت فيه مثلا "hello" فستكون قيمة ال input هي "hello" ونعم في اغلب الأحيان ستكون البيانات التي سترسلها للخادم والخادم يتفقد البيانات ويقرر ما اذا كان سيخزنها في قاعدة البيانات أم لا حسب الشروط التي تعطيها أنت له . اما عن كيفية الوصول للبيانات فهي عن طريق ما يسمى الطلب والاجابة (request and response) انت في الواجهة ستطلب البيانات من الخادم عن طريق أدوات للاتصال بالخادم جاف سكريبت يحتوي على أداة مدمجة تسمى fetch يمكنك القاء نظرة عليها

لقد قمت بأنشاء حلقة متكررة لا متناهية جعلت المكون في حالة تشغيل بلا توقف وهذا بسبب سوء استخدام useeffect في حالتك لأنه يوجد عدة طرق لاستخدام useeffect والاولى هي useEffect(() => { ... }); في الاستخدام فوق useeffect ستشتغل عند كل تغيير لأي حالة مرتبطة بالمكون والحالة الثانية هي useEffect(() => { ... }, []); إضافة قائمة المعايير وتركها فارغة يعني أن useeffetc ستشتغل مرة واحدة وهي عندما يركب المكون ال dom أما الحالة الثالثة وهي اضافة معيار لقائمة المعايير const [label,setLabel]=useState(""); useEffect(() => { .... }, [label]); وهذه الحالة تخبر useeffect أن تشتغل فقط في حالة تغير المعيار المضمن في قائمة المعايير والان وقد تكلمنا عن الحالات الثلاثة ستجد أن الاستخدام المناسب لك هو الحالة الثانية

تأكد من أنك وضعت متغيرات البيئة في heroku وأيضا هذا الخطأ يمكن أن ينتج عن تغيير قمت به وبعده اجباري عليك أن تعيد تشغيل dyno لذلك أعد تشغيل ال dyno أيضا heroku restart --app application_name ثم تفقد ال log مجددا heroku logs

فكر في app.render () كدالة مساعدة لتوليد سلاسل العرض المقدمة. يستخدم res.render () داخليًا app.render () لعرض طرق العرض. الاختلاف هو app.renderObject هو المسؤول الوحيد عن توليد views، ولكنه غير قادر على ارسال ال views لل client الشيفرة في الأسفل ستبين أكثر res.render = function(view, locals, cb){ app.render(view, locals, function(err, html){ if(typeof cb !== 'undefined'){ return cb(err, html); } res.send(html); }); };

قم بإنشاء ملف read-file.js في مجلد مشروعنا الرئيسي و قم بتضمين الكود التالي لهذا الملف: const csvjson = require('csvjson'); const readFile = require('fs').readFile; readFile('./test-data.csv', 'utf-8', (err, fileContent) => { if(err) { console.log(err); // Do something to handle the error or just throw it throw new Error(err); } const jsonObj = csvjson.toObject(fileContent); console.log(jsonObj); }); أولاً نقوم باستيراد التبعيات المطلوبة - حزمة csvjson الخارجية ووحدة نظام الملفات المضمنة (fs) (سنستخدم readFile فقط ، ولهذا السبب نتخذ هذه الطريقة فقط). الجزء التالي من الكود هو المنطق الرئيسي. نقوم بتمرير ثلاث معلمات إلى وظيفة readFile: الأولى هي موقع ملف مصدر CSV الخاص بنا ، والثانية هي الترميز وآخرها هي وظيفة رد الاتصال. هناك ، نتوقع تلقي معلمتين (خطأ إن وجد ومحتوى الملف الفعلي). في حالة وجود خطأ أثناء قراءة الملف (يمكن أن يكون أحد الأسباب هو عدم وجود الملف يجب أن نكون مستعدين للقبض عليه والقيام بشيء ما به. في حالة عدم وجود خطأ ، فنحن على استعداد لتمرير المحتوى إلى مكتبة csvjson ، والتي ستقوم بتحليلها وإرجاع مجموعة من الكائنات.

باستخدام got ، وهو بديل ل request ، يمكنك ببساطة القيام بما يلي: const got = require("got") got(url).then(response => { console.log(response.body); }); يتم التعامل مع decompression تلقائيًا عند الحاجة دون الحاجة للتعامل معه بنفسك.

يمكنك تعيين timeout إما global للخادم بأكمله: const server = app.listen(); server.setTimeout(500000); أو لمجرد مسار محدد: app.post('/xxx', function (req, res) { req.setTimeout(500000); });

related_name أمر لا بد منه في حالة وجود اثنين ForeignKey في النموذج الذي يشير إلى نفس الجدول. على سبيل المثال في حالة فاتورة المواد @with_author class BOM(models.Model): name = models.CharField(max_length=200,null=True, blank=True) description = models.TextField(null=True, blank=True) tomaterial = models.ForeignKey(Material, related_name = 'tomaterial') frommaterial = models.ForeignKey(Material, related_name = 'frommaterial') creation_time = models.DateTimeField(auto_now_add=True, blank=True) quantity = models.DecimalField(max_digits=19, decimal_places=10) لذلك عندما يتعين عليك الوصول إلى هذه البيانات ، يمكنك فقط استخدام related_name bom = material.tomaterial.all().order_by('-creation_time')