اذهب إلى المحتوى

Yomna Raouf

الأعضاء
  • المساهمات

    2193
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    65

إجابات الأسئلة

  1. إجابة Yomna Raouf سؤال في محتوى دوراتكم الخاصة بتطوير التطبيقات بواسطة JS كانت الإجابة المقبولة   
    في هذه الدورة ستتعلم أساسيات لغة جافاسكريبت و العديد من التقنيات التي تساعدك في بناء مشاريع كبيرة من الحياة الواقعية، حيث ستتعلم   لغة جافاسكريبت و مكتباتها سواءًا كانت تستخدم في بناء الواجهات الأمامية لتطبيقات الويب أو بناء تطبيقات الهواتف أو برمجة ال backend أو تطوير تطبيقات سطح المكتب.
    فمحتوى الدورة كما يلي:
    أساسيات لغة JavaScript: أساسيات JavaScript، حلقات التكرار Loops، الدوال Functions، المصفوفات Arrays، الكائنات Objects، الأصناف Classes، التعامل مع الأخطاء والبرمجة غير المتزامنة، التخاطب مع الخادم، تخزين البيانات في المتصفح وجودة الشيفرة
    أساسيات React.js"مكتبة تستخدم لبناء الواجهات الأمامية لتطبيقات الويب": الأساسيات، المكونات، الحالات الشرطية والقوائم، تنسيق تطبيقات React، و بعدها سنقوم ببناء تطبيق ويب و هو تطبيق ملاحظات
    أساسيات Node.js : الأساسيات، إطار العمل Express، قواعد البيانات، المتحكمات، تطبيق مدونة"تطبيق ويب ستتم برمجة ال frontend الخاصة به باستخدام react.js و سنقوم ببرمجة ال backend باستخدام node.js و express.js" و سنقوم بتطوير API لتقييم الأفلام
    تطوير تطبيق جوال باستخدام React Native: لمحة عامة عن React Native و Expo، إعداد بيئة العمل، أساسيات React Native، تطبيق عملي: طبيبي "ستقوم ببرمجة ال backend لهذا التطبيق أيضًا"، تطوير الواجهة الخلفية، إنشاء تطبيق الجوال
    تطبيق دردشة يشبه WhatsApp: التعريف بـ WebSockets، التعريف بـ Socket.IO، الحماية والتحقق، تطبيق الويب، تطبيق الجوال
    تطوير تطبيق سطح مكتب باستخدام Electron.js: سيتم بناء تطبيق إدارة المهام
    تطوير المواقع باستخدام Next.js : سيتم إنشاء تطبيق أسئلة وأجوبة 
    تطوير تطبيقات جوال باستخدام Ionic: سيتم تطوير تطبيق جوال للتواصل الاجتماعي
    بناء واجهات برمجية باستخدام GraphQL : سيتم تطوير تطبيق حجز مناسبات
    ولكن قبل أن تبدأ في هذه الدورة ستحتاج لمعرفة أساسيات الويب من html و css و js ، و هي  المسار الأول من دورة تطوير واجهات المُستخدم و الذي سيتم فتحه لك بمجرد التحاقك بدورة تطوير التطبيقات باستخدام جافاسكريبت.
  2. إجابة Yomna Raouf سؤال في كيفية تغير favicon الافتراضية الخاصة بمشروع create-react-app؟  كانت الإجابة المقبولة   
    لتغيير ال favicon الخاصة ب react apps سنتحتاج للقيام بالتالي:
    نقوم باستبدال الملف favicon.ico الموجود داخل المجلد public بملف ال favicon الذي تريد استخدامه بعدها في ملف index.html الموجود في المجلد public نقوم بتعديل السطر التالي و استبدال favicon.ico باسم الملف الجديد <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> قد تحتاج لإعادة تشغيل الخادم و حذف ال browser cache حتى تظهر التعديلات.
  3. إجابة Yomna Raouf سؤال في تغيير theme الموقع كانت الإجابة المقبولة   
    الطريقة الصحيحة لاستخدام هذا الوسم هي كما يلي:
    // حسب الإعدادات الخاصة بالمستخدمtheme إذا كنت تريد تعديل ال <meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"> // أو <meta name="theme-color" content="white"> <meta name="theme-color" content="black"> فقيمة name تكون theme-color و ليس  scheme-color
    لاحظ في المثال التالي كيف سيتغير المتصفح بعد استخدام 
    <meta name="theme-color" content="#4285f4">
  4. إجابة Yomna Raouf سؤال في كيف يمكن إنشاء زر عند الضغط عليه يقوم بحفظ شيء ما في جافاسكريبت؟ كانت الإجابة المقبولة   
    يمكنك القيام بذلك بعدة طرق منها استخدام ال Async Clipboard API عن طريق ال method التالية navigator.clipboard.writeText.
    و لكن هذه الطريقة تعمل فقط إذا كان الموقع يعمل على خادم محلي localhost أو إذا كان النوقع يدعم https
    var text = "مثال لنص نريد طباعته"; navigator.clipboard.writeText(text).then(function() { console.log('Copying to clipboard was successful!'); }, function(err) { console.error('Could not copy text: ', err); }); يمكنك أيضًا استخدام الميثود document.execCommand("copy") و لكنها ليست مدعومة في كل المتصفحات الآن
    function copyToClipboard(elementId) { // إنشاء حقل إدخال مخفي var aux = document.createElement("input"); // نقوم بإعائه النص الذي نريد طباعته كقيمة له aux.setAttribute("value", document.getElementById(elementId).innerHTML); // body نقوم بإضافته إلى ال document.body.appendChild(aux); // للمحتوى Highlight نقوم بعمل aux.select(); // نقوم بنسخ المحتوى الذي تم تحديده document.execCommand("copy"); // body نقوم بحذف حقل الإدخال من ال document.body.removeChild(aux); }  
    <p id="p1">P1: I am paragraph 1</p> <p id="p2">P2: I am a second paragraph</p> <button onclick="copyToClipboard('p1')">Copy P1</button> <button onclick="copyToClipboard('p2')">Copy P2</button> <br/><br/> <input type="text" placeholder="Paste here for test" />  
  5. إجابة Yomna Raouf سؤال في document is not defined في بيئة node كانت الإجابة المقبولة   
    السبب في ظهور الخطأ عندما تقوم بعمل run في ال terminal باستخدام node هو أن الأكواد أصبحت تعمل في بيئة node و ليس المتصفح.
    ف Node.js هي JavaScript runtime environment أي بيئة تشغيل JavaScript، التي تستطيع تشغيل شيفرة JavaScript خارج المتصفحات. حيث أن اللغة كانت تعمل في المتصفحات فقط  سابقًا.
     
    و الكائن document هو كائن يوفره لنا المتصفح و ليس مدعوم من اللغة نفسها، لذلك لا يمكن استخدام الكائن document في بيئة العمل node حيث ستظهر لك رسالة خطأ تخبرك أنه غير معرف كما حدث معك:
     
  6. إجابة Yomna Raouf سؤال في ما هي فائدة react كانت الإجابة المقبولة   
    React.js هي إحدى مكتبات لغة JavaScript . تُستخدم هذه المكتبة في بناء واجهات المستخدم. تعتمد هذه المكتبة على المكونات القابلة لإعادة الاستخدام reusable components في بناء الواجهات تمامًا مثل مكعبات ال lego. حيث يمكنك كتابة كود لمكون مرة واحدة فقط و استخدامه و أكثر من مرة في نفس التطبيق أو في تطبيقات أخرى.
    أيضًا تمكننا من بناء تطبيقات الويب دون أن نتعامل مع ال DOM مباشرةً كما كان الحال سابقًا، نحن فقط نقوم بإعطائها كائن يصف ما الذي نريد القيام به أو يصف شكل الصفحة و تقوم هي بالتعامل مع ال DOM بالشكل الذي يضمن أفضل أداء ممكن.
    و غيرها من المميزات، يمكنك قراءة المزيد عن هذه المكتبة من خلال:
    مقالات موجودة في أكاديمية حسوب من هنا موسوعة حسوب من هنا
  7. إجابة Yomna Raouf سؤال في تقييم للمستوى ضمن مجال تطوير واجهات المستخدم كانت الإجابة المقبولة   
    يمكنك الوصول إليه بالتأكيد، كلما قمت بالعمل على مشاريع أكثر و التدرب أكثر و القراءة أكثر في المجال ستتمكن من ذلك بالتأكيد. و لكن الأمر يحتاج إلى الصبر و الوقت. استمر في العمل و لا تستعجل النتائج.
    نعم، بالتأكيد. من الأمور الأساسية و التي تساعد بشكل كبير في احتراف أي تقنية أو مجال هي فهم أساسياته و كيفية عمله بتعمق.
    أما بخصوص مشروعك فقد قمت بالاطلاع عليه و على الأكواد الخاصة به و قد قمت بعمل أكثر من رائع.
  8. إجابة Yomna Raouf سؤال في ظهور القيمة الأخيرة فقط عند طباعة القيم باستخدام جافاسكربت كانت الإجابة المقبولة   
    السبب في هذا الأمر هو أنك في كل دورة من دورات الحلقة تقوم بإعادة تعيين محتوى الوسم الذي له ال id demo و لا تقوم بالإضافة للقيمة السابقة، لذلك يظهر لك في المتصفح القيمة الأخيرة(التي تنتهي عندها الحلقة).
    إذًا ما نحتاج إليه هو إضافة القيمة الجديدة إلى القيم الموجودة داخل الوسم بالطريقة التالية
    document.getElementById('demo').innerHTML = document.getElementById('demo').innerHTML + "<p>" + i + "</p>"; و الذي يكافئ
    document.getElementById('demo').innerHTML += "<p>" + i + "</p>";  
     
    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').innerHTML += "<p>" + i + "</p>"; } }  
  9. إجابة Yomna Raouf سؤال في الطريقة الصحيحة لإعادة التوجيه تلقائيًا في Next JS كانت الإجابة المقبولة   
    إذا كنت تستخدم نسخة Next.js 10  فما فوق، يمكنك القيام بذلك بالطريقة التالية:
    import Router from 'next/router' componentDidMount(){ const {pathname} = Router if(pathname == '/' ){ Router.push('/orders') } } أو باستخدام الخطافات Hooks
    import React, { useEffect } from "react"; import Router from 'next/router' ... useEffect(() => { const {pathname} = Router if(pathname == '/' ){ Router.push('/orders') } }); أو يمكنك القيام ب server side redirects باستخدام الكلمة المفتاحية redirect داخل getServerSideProps أو  getStaticProps
    export async function getServerSideProps(context) { const res = await fetch(`https://.../data`) const data = await res.json() // or use context.resolvedUrl for conditional redirect // if(context.resolvedUrl == "/") if (!data) { return { redirect: { destination: '/orders', permanent: false, }, } } return { props: {}, // will be passed to the page component as props } } و لكن إعادة التوجيه في ال client side لا تعتبر approach جيد للقيام بذلك حيث يمكنك القيام بذلك من خلال next.config.js لاحظ المثال التالي أو استخدام conditional rendering:
    module.exports = { // Uncomment the line below to enable basePath, pages and // redirects will then have a path prefix (`/app` in this case) // // basePath: '/app', async redirects() { return [ { source: '/team', destination: '/about', permanent: false, }, // Path Matching - will match `/old-blog/a`, but not `/old-blog/a/b` { source: '/old-blog/:slug', destination: '/news/:slug', permanent: false, }, // Wildcard Path Matching - will match `/blog/a` and `/blog/a/b` { source: '/blog/:slug*', destination: '/news/:slug*', permanent: false, }, // Regex Path Matching - The regex below will match `/post/123` but not `/post/abc` { source: '/post/:slug(\\d{1,})', destination: '/news/:slug', permanent: false, }, ] }, }  
  10. إجابة Yomna Raouf سؤال في ظهور خطأ عند تحميل إطار العمل express.js كانت الإجابة المقبولة   
    يبدو أنها مشكلة متعلقة بأذونات النظام، لذلك هل يمكنك تجربة تنفيذ الأمر باستخدام sudo كما يلي:
    sudo npm install -g express و بعدها إدخال كلمة المرور الخاصة بجهازك، و إخباري بالنتائج
  11. إجابة Yomna Raouf سؤال في ال store في vuex هل متواجدة بالسيرفر ام عند الكلاينت ؟ كانت الإجابة المقبولة   
    المكتبة Vuex ما هي إلّا مكتبة لإدارة حالة التطبيق في تطبيقات VueJs مثلها مثل مكتبة Redux المستخدمة مع ReactJs و غيرها.
    يمكنك التفكير في هذا ال store على أنه global variable يمكنك الوصول إلى قيمته من أي مكان في التطبيق بدلًا من أن نقوم بتمرير الحالة بين المكونات، ففي بعض الأحيان قد تحتاج لتمريرها ١٠ مستويات مثلًا أو أكثر بين المكونات حتى نصل إلى المكون الذي نريده، و هذا أمر غير جيد.
    لذلك نقوم باستخدام هذه المكتبات التي حتى نتمكن من استخدام البيانات التي نريد مشاركتها في أكثر من مكان في التطبيق. في بعض الأحيان تكون هذه البيانات هي بيانات المستخدم مثلًا التي نحصل عليها بعد أن يقوم بتسجيل الدخول، أو قائمة المنشورات التي نحصل عليها من ال backend و ما إلى ذلك.
    إذًا هي ليست نوع من الذاكرة أو ما شابه، إذا كان يوجد لديك بعض البيانات أو القيود أو الصلاحيات لعرض بيانات أو صفحات معينة، يمكنك القيام بهذا الأمر من ال backend حتى لا يتمكن المستخدم من التلاعب بها حتى و إن قام بتعديل الحالة من أدوات المطورين مثلًا أو ما شابه
  12. إجابة Yomna Raouf سؤال في كيف يمكننى عرض سكرول فيو بشكل راسى ولكن تحتوى على عمودين وليس عمود واحد react native كانت الإجابة المقبولة   
    يمكنك القيام بذلك عن طريق استخدام ال attribute horizontal بالقيمة true و بعدها ضبط التنسيقات حتى تظهر بالشكل الذي تريده.
    لاحظ المثال التالي:
    import React from 'react'; import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar, View } from 'react-native'; const App = () => { return ( <SafeAreaView style={styles.container}> <ScrollView horizontal={true} style={styles.scrollView}> <View> {"L o r e m L o r e m L o r e m".split(" ").map(letter => ( <Text style={styles.text}>{letter}</Text>) )} </View> <View> {"I p s u m I p s u m I p s u m".split(" ").map(letter => ( <Text style={styles.text}>{letter}</Text>) )} </View> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: StatusBar.currentHeight, }, scrollView: { backgroundColor: 'pink', marginHorizontal: 20, }, text: { display: "flex", flexDirection: "column", fontSize: 40, marginRight: "50px", marginLeft: "40px" }, }); export default App; الناتج:
    و لكن أنصحك باستخدام ال FlatList بدلًا من ال scrollView و هذا لأن ال  FlatList لا تقوم بتحميل/عرض"render" جميع البيانات"العناصر الأبناء" في نفس الوقت و إنما تقوم بتحميلها بشكل lazy عند الحاجة لها فقط مما يجعلها أفضل من جهة الأداء على عكس ال ScrollView:
    const renderItem = ({ item }) => { return ( <Card key={item.id} id={item.id} name={item.name} /> ); }; <FlatList data={data} numColumns={2} renderItem={renderItem} />   
  13. إجابة Yomna Raouf سؤال في مانصيحتكم لمبتدء يريد تعلم برمجة دوائر الدرون او دوائر تحكم بسيطه كانت الإجابة المقبولة   
    اللغات المستخدمة في هذه التطبيقات هي ++c/c، و هذا بسبب سرعة هذه اللغات و أ\اءها الممتاز، حيث أنها لغات قريبة من ال hardware.
    يمكنك البدء بتعلم أساسيات لغة c و ستحتاج لتعلم أساسيات الدوائر الكهربائية، و الالكترونيات و أيضًا ستحتاج لدراسة المتحكمات الدقيقة.
    و بعدها تعلم arduino و التطبيق على دوائر بسيطة و بعدها التدرج في التحكم في دوائر أكثر تعقيدًا، بعدها يمكنك الانتقال إلى استخدام المتحكم نفسه و برمجته، يمكنك استخدام متحكم AVR مثلًا أو ARM
  14. إجابة Yomna Raouf سؤال في ماذا تعني -1 في reshape في مكتبة numpy؟ كانت الإجابة المقبولة   
    بناءً على التوثيق الرسمي، يجب أن يتوافق الحجم الجديد للمصفوفة مع الحجم الأصلي لها، فإذا كان رقمًا صحيحًا سيكون الناتج مصفوفة أحادية البعد طولها يساوي هذا العدد. و هذا البعد قد يساوي 1- و في هذه الحالة يستدل على قيمة البعد من طول المصفوفة الأصلية و الأبعاد الأخرى.
    فمثلًا:
    لنفرض أنه لدينا المصفوفة التالية و التي لها الأبعاد/الشكل 4 * 3 أي 3 صفوف و 4 أعمدة، أي تحوي 12 عنصر
    z = np.array([[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]) z.shape (3, 4) الآن إذا أردنا إعادة تعيين شكلها أو حجمها، سنحتاج أن يكون الشكل/الحجم الجديد متوافق مع الحجم/الشكل الخاص بالمصفوفة الأصلية أي يجب أن يكفي لل 12 عنصر. فمثلًا يمكن للحجم الجديد أن يكون 2 * 6 أو 6 * 2 أو 3 * 4 أو 12 * 1 أو 1 * 12 أو ......إلخ.
    و في numpy يمكننا ذكر الحجم/الشكل الجديد بالتفصيل أي ذكر عدد الأعمدة و الصفوف التي نريدها و يمكننا أيضًا أن نقوم بتحديد بعد وحيد و نترك لها القرار في البعد الآخر.
    كيف ستعرف numpy أننا نريدها أن تقرر هذا البعد؟
    يتم ذلك عن طريق تمرير 1- للتابع reshape في مكان البعد الذي نريد منها تحديده، و ستقوم بحساب قيمة هذا البعد بناءً على طول المصفوفة و الأبعاد الأخرى(الأبعاد التي قمنا بذكرها)
    مثلًا:
    هنا قمنا بتحديد عدد الصفوف على أنه صف وحيد، و تركنا numpy تقرر عدد الأعمدة.
    كيق ستقوم بحساب عدد الأعمدة؟
    هنا طول المصفوفة هو 12 عنصر (4 * 3) و قمنا بتحديد عدد الصفوف ليكون صف وحيد، إذًا من هاتين المعلومتين استنتجت numpy أن عدد الأعمدة يجب أن يكون 12 عمودًا. "يستخدم هذا المثال إذا كانت البيانات الخاصة بك تحوي sample واحدة"
    z.reshape(1, -1) array([ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) و هنا مثال آخر قمنا بتحديد عدد الأعمدة ليكون عمود واحد و تركنا لها حساب عدد الصفوف "يتم استخدام هذا المثال إذا كانت البيانات الخاصة بك تحتوي feature واحد فقط":
    z.reshape(-1,1) array([[ 1], [ 2], [ 3], [ 4], [ 5], [ 6], [ 7], [ 8], [ 9], [10], [11], [12]]) و في هذا المثال قمنا بتحديد عدد الأعمدة ليكون عمودين تركنا لها حساب عدد الصفوف:
    z.reshape(-1, 2) array([[ 1, 2], [ 3, 4], [ 5, 6], [ 7, 8], [ 9, 10], [11, 12]]) و لكن هل يمكننا أن نجعل  numpy تقرر قيمة كل الأبعاد؟
    الإجابة هي لا، حيث ستلقي numpy خطأ هنا و لن تعمل. حيث أن numpy تسمح لك أن تجعل أحد الأبعاد فقط مجهول"أي تتيح لك أن تترك لها القرار في قيمة بعد واحد فقط"
    z.reshape(-1, -1) ValueError: can only specify one unknown dimension  
  15. إجابة Yomna Raouf سؤال في كيف يمكنني الكتابة على الملفات النصية في node.js كانت الإجابة المقبولة   
    يمكنك القيام بذلك عن طريق File System API و هو عبارة عن module جاهز في node/js:
    لاحظ المثال التلي:
    const fs = require('fs'); fs.writeFile("/tmp/test", "Hey there!", function(err) { if(err) { return console.log(err); } console.log("The file was saved!"); }); أو 
    const fs = require('fs'); fs.writeFileSync('/tmp/test-sync', 'Hey there!');  
  16. إجابة Yomna Raouf سؤال في كيف اقوم بعمل react-native-eject لمشروع رياكت ناتيف كانت الإجابة المقبولة   
    للقيام بهذا الأمر، يمكنك استخدام الأوامر التالية:
    npm install react-native-eject ثم
    npm install @react-native-community/cli ثم
    react-native eject  
  17. إجابة Yomna Raouf سؤال في إضافة ملفات تعريف الارتباط cookies من خلال طلبات axios في node.js كانت الإجابة المقبولة   
    يمكنك القيام بذلك عن طريق استخدام الخاصية withCredentials 
    axios.get('some api url', {withCredentials: true});  
    حيث أن ال XMLHttpRequest من نطاق آخر لا يمكنه القيام ب set cookie values في النطاق الخاص بهم إلا إذا كانت الخاصية withCredentials مضبوطة بالقيمة true قبل إرسال الطلب. 
     
  18. إجابة Yomna Raouf سؤال في ظهور الخطأ expected expression, got '<' في node.js كانت الإجابة المقبولة   
    الجزء التالي من الأكواد:
    app.all('*', function (req, res) { res.sendFile(__dirname+'/index.html') }) تخبر Express أنه أيًا كان طلب المتصفح، سيقوم الخادم بإرسال ملف index.html. فعندما يقوم المتصفح بطلب ملفات JavaScript  مثل jquery-x.y.z.main.js أو angular.min.js سيقوم المتصفح سيقوم المتصفح بإرجاع محتوى ملف index.html و الذي يبدأ ب <!DOCTYPE html> و هو ما تسبب في ظهور خطأ JavaScript.
     
    لذلك من المفترض أن تعالج الأكواد الخاصة بال callback الطلب المرسل و تقوم بتحديد الملف المطلوب تحديدًا و إرساله، أو/و يمكنك استخدام دالة أخرى غير app.all.
  19. إجابة Yomna Raouf سؤال في كيف اعالج هذه العلامات الحمراء تحت هذا الكود تايب سكريبت كانت الإجابة المقبولة   
    السبب هنا بسبب ال tslint و الذي يمكنك تعطيله عن طريق إضافة التعليق التالي في بداية الملف:
    /* tslint:disable */  
    أمّا عن رسالة الخطأ هذه، فهذا لأن typeScript تعتبر static and strong typed language مما يعني أننا نحتاج لتحديد أنواع البيانات (string, number, boolean, ...etc) هنا عند تعريف المتغيرات على عكس لغة JavaScript.
    كما أنه عند استخدام typescript فس مشروعك ستحتاج لتثبيت بعض الحزم و كتابة بعض التعريفات "configurations" حتى يتم ترجمة الأكواد إلى javaScript في النهاية حتى يفهمها المتصفح.
    لذلك إذا كنت لا تعرف typeScript أو لم تتعلمها مسبقًا، أعد تسمية الملفات لتصبح من النوع js. و ليس ts.
     
  20. إجابة Yomna Raouf سؤال في Redux >> أنا اقوم بعمل cart لمتجر واريد انه عندما اضيف منتج موجود فى الكارت .. بدلا من اضافته فى خانة جديدة يقوم التطبيق بزيادة الكمية +1 بدلا من انشاؤه فى خانة جديدة كانت الإجابة المقبولة   
    يمكنك أن تقوم بإنشاء ملف تقوم بتسميته cart.utils.js و نقوم بإنشاء هذه الدالة فيه.
    فكرة عمل هذه الدالة هي كما يلي:
    نقوم بالبحث عن ال cart item الذي نريد إضافته في المصفوفة الخاصة بال cartItems، و ذلك عن طريق التابع find  بعدها إذا كان ال cart item الذي نريد إضافته موجود في المصفوفة الخاصة بال cartItems، سنقوم بالدوران على عناصر ال cartItems حتى نصل إلى العنصر الذي نريد تعديل كميته/إضافته و سنقوم بتعديل الكائن الخاص به و زيادة الكمية بواحد و بعدها سنقوم بإعادة مصفوفة تحتوي ال cartItems القديمة و ال cart item mالجديد (الذي نريد زيادة كميته أو الذي نريد إضافته-لم-يكن-موجود-مسبقًا) export const addItemToCart = (cartItems, cartItemToAdd) => { const existingCartItem = cartItems.find( cartItem => cartItem.id === cartItemToAdd.id ); if (existingCartItem) { return cartItems.map(cartItem => cartItem.id === cartItemToAdd.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem ); } return [...cartItems, { ...cartItemToAdd, quantity: 1 }]; }; الآن في الملف reducer سنقوم باستيراد الدالة السابقة و استخدامها كما يلي:
    import {ADD_TO_CART, REMOVE_FROM_CART, CLEAR_CART} from '../constants'; import { addItemToCart } from './cart.utils'; const initialState = { cartItems: [], totalPrice: 0, }; const cartItems = (state = initialState, action: any) => { switch (action.type) { case ADD_TO_CART: return { ...state, cartItems: addItemToCart(state.cartItems, action.payload), totalPrice: state.totalPrice + action.payload.price, }; case REMOVE_FROM_CART: return { ...state, cartItems: state.cartItems.filter( cartItem => cartItem !== action.payload, ), totalPrice: state.totalPrice - action.payload.price, }; case CLEAR_CART: return {...initialState}; } return state; }; export default cartItems;  
  21. إجابة Yomna Raouf سؤال في أمثلة محلولة عن لغة جافا كانت الإجابة المقبولة   
    يوجد العديد من المواقع التي قد تساعدك في هذا الأمر، منها:
    LeetCode edabit HackerRank geeks for geeks w3resource codeforces و غيرها الكثير، تحتوي هذه المواقع على العديد من الأسئلة و المشاكل البرمجية و تتيح لك محاولة حلها في ide مدمج في الموقع الخاص بها و تقدم حلول و شروحات لها كذلك في حال علقت في مشكلة ما.
    و لكن أنصحك بأن تحاول بمفردك أولًا قبل أن تطلع على الحلول، فبهذه الطريقة ستتعلم بشكل أفضل و ستكتسب مهارة حل المشكلات.
  22. إجابة Yomna Raouf سؤال في خطأ أثناء java - initialization of boot layer كانت الإجابة المقبولة   
    أعتقد أن السبب في هذا الخطأ هو وجود مجلد اسمه مكتوب باللغة العربية في المسار الخاص بالمشروع:
    C:\Users\anan\OneDrive\?????????\NetBeansProjects\DisplayOutput\build\classes و هو المجلد الذي تم استبدال حروفه بعلامات استفهام هنا، لذلك أرجو منك إعادة تسمية المجلد ليصبح باللغة الإنجليزية بدلًا من العربية و التجربة مرة أخرى
  23. إجابة Yomna Raouf سؤال في تحويل قائمة إلى set يفسد ترتيب العناصر في بايثون؟ كانت الإجابة المقبولة   
    في الرياضيات يوجد ما يُسمى ب sets و ordered sets (osets):
    و ال sets هي حاوية من عناصر فريدة و غير مرتبة، أي أن ال sets هي unordered data structure لذلك فهي لا تحفظ الترتيب. (ال sets موجودة ضمن python) أما ال oset فهي حاوية من عناصر فريدة و مرتبة (ال osets غير موجودة في python) و لكن يمكننا محاكاة وظيفة ال osets باستخدام ال dictionary keys و هي خاصية في python 3.7 فما فوق.
    x = [ 0, 1, 2, 4, 8, 16, 32, 64, 128, 512, 1024 ] oset = dict.fromkeys(x) list(oset) # output: [ 0, 1, 2, 4, 8, 16, 32, 64, 128, 512, 1024 ] أو يمكنك استخادم الدالة sorted كما يلي:
    x = [ 0, 1, 2, 4, 8, 16, 32, 64, 128, 512, 1024 ] oset = sorted(set(x), key=x.index)  
  24. إجابة Yomna Raouf سؤال في إيجاد فهرس مجموعة من المصفوفة في مصفوفة numpy كانت الإجابة المقبولة   
    يمكن استخدام أيٍ من الطرق التالية:
     
    x = np.array([[0, 1], # 0 [2, 3], # 1 [4, 5], # 2 [6, 7], # 3 [8, 9]]) # 4 search_array = np.array([[0, 1], [4, 5], [8, 9] ]) # الطريقة الأولى # فيما عدا ذلك false في حالة التساوي و true في هذه الطريقة سنقوم بالمقارنة بين المصفوفتين و سيتم إرجاع >>> x == search_array array([[ True, True], [ False, False], [ True, True], [ False, False], [ True, True], ], dtype=bool) # الطريقة الثانية >>> np.all(x == search_array,axis=1) array([True, False, True, False , True], dtype=bool) # الطريقة الثالثة # where في حال تساوي الأصفف و بعدها التابع true و الذي سيقوم بإرجاع all باستخدام التابع # true و الدي سيقوم بإرجاع الفهرس الخاص بالعناصر التي لها القيمة >>> np.where(np.all(x == search_array,axis=1)) (array([0, 2, 4]),)  
  25. إجابة Yomna Raouf سؤال في حذف المكتبات من npm الغير مستخدمة في المشروع node.js كانت الإجابة المقبولة   
    يمكنك استخدام بعض الأدوات مثل depcheck أو npm-check و التي ستقوم بفحص الاعتماديات الخاصة بمشروعك و إضهار قائمة لك تحتوي على الاعتماديات التي لم تستخدم و بعدها يمكنك حذفها.
    لتثبيت npm-check
    npm i npm-check و لاستخدامها، نقوم بتنفيذ الأمر التالي:
    npm-check  
×
×
  • أضف...