Ahmed Sawy

السلام عليكم .. سؤالى مكن من جزئين الاول هو التاسك .. والثانى هو ما فهمته .. اريد ان اعرف ان كنت قد فهمت المهمة بشكل صحيح ام لا .. هذا هو الجزء الذى انا اشعر بالحيرة منه. Task Requirements: Feel free to spend as much or as little time on the exercise as you like as long as the following requirements have been met. We are not setting any boundaries in this task so that you can come up with your own ideas/choices. Create a Web-based Admin Panel for either Mobile or Web App. (Mobile App preferred.) Sample features that you can show on the Admin Panel can be as follows: (only to give you some idea) Content management (i.e. so-called CRUD: create, read, update, and delete) For example, Admin should be able to add New Course Content to Course Screens (some sample Course Screens are provided down below) Tip: Choose a framework that takes care of that for you, and don’t lose time. User management (e.g. adding, deleting, creating groups, enabling/disabling user privileges etc.) Export/import of data (i.e. basic integration with other systems) Create 4-5 App Screens (or more if you have time & Mobile preferred) that communicate with the Backend, Database and Admin Panel. We provide some sample screens below, but you can feel free to develop your own ideas هو يريد منى ان اقوم بعمل لوحة تحكم يمكنها ان تتحكم فى ثلاث اشياء الاولى الكورسات وهى اضافة او حذف او تعديل الكورسات .. الثانية المستخدمين وهى ان الادمن يمكنه ان ينشئ جروبات للمستخدمين ويضيفهم ويحذفهم منها .. الثالثة لا اعرف ما المقصود بهذا .. Export/import of data (i.e. basic integration with other systems) واخيرا تصميم الشاشات الخاصة بالهاتف وهذه افهمها الحمد لله . الرجاء مساعدتى فى فهم هذه المهمة .. وشكرا مقدما

شكرا اخى .. لكنى اود سؤالك .. ما رايك بالكود وهل هو جيد ام لا .. وهل توجد به اى تعليقات اخرى غير body-barser و dotenv هذا هو اول مشروع لى واود ان اعرف ان كنت امشى على المسار الصحيح ام ان هناك عيوب فى كودى يجب ان اتخطاها .. وشكرا

السلام عليكم .. قمت بعمل emulator وهو يعمل بشكل جيد ولكنى كلما اردت فتحه .. اضطر الى فتح اندرويد ستوديو وفتح avd والقيام بتشغيله .. انا اريد اختصار لهذا .. جئت بالكوماند لاين من على الانترنت وكان كالاتى emulator -avd avd_name ولكن ظهرت مشكله وهى 'emulator' is not recognized as an internal or external command, اعتقد اننى احتاج ان اسطب شئ معين مثل ما يحدث مع ال git او npm الى اخره .. هل لى ان اعرف كيف اقوم بتسطيب الكماند لاين الخاص ب emulator لكى يتعرف عليه الجهاز ؟؟

أريد رفع أول مشروع نود لى على heroku ولكن يظهر لى هذا الخطأ فما الحل https://github.com/ahmedsawy1/first-node-app

للأسف أخى فعلت ما قلت عليه وظهر لى هذا الايرور اريد ان اعلم ما معنى هذا ؟ GET /favicon.ico 401 40 - 0.448 ms

هذا هو الكود اتمنى المساعدة أخى https://github.com/ahmedsawy1/first-node-app

السلام عليكم .. انا قمت بعمل مشروع Mern موبايل ولكنى لم ارفع المشروع على Heroko بعد .. انا اختبر التطبيق على Emulator وايضا هواتف حقيقية .. عندما اقوم بتشغيل ال local host على هذا الرابط مثلا http://localhost:3000/api/v1/products كل شئ يعمل جديا على ال Emulator وال Apis تعمل بشكل جيد واستطيع ان اعمل Get للداتا هذا على ال Emulator ولكن عندما اقوم باختبار هذا على هواتف حقيقة فانا لا استطيع ان اعمل فيتش للداتا ويظهر لى ال Spinner يدور ولا يتوقف .. ويظهر فى الترمنال Api Call Error قد يبدو صيغة سؤال سيئة لاننى لم ارفع اى كود .. لكنى متعمد حيث اننى لست جئت طالبا مساعدة فى الكود انا فقط اريد ان اعرف ان كان يجب ان ارفع مشروع النود على هوروكو حتى يعمل على الهواتف الحقيقة ام لا ؟؟ .. وشكرا مقدما

السلام عليكم .. انا مبرمج رياكت ناتيف و Node js .. ومساحة الجزء C من القرص الصلب تتناقص باستمرار واعتقد ان السبب فى الملفات المؤقتة .. انا اخاف ان امسح اى ملفات خاصة ب C وذلك لاننى اخاف ان تظهر لى اى اخطاء مقرفة خاصة ب Android .. لكن فى نفس الوقت اريد ان انظف الجهاز وامسح الملفات التى تاخذ مساحة دون الحاجة اليها .. انا الان وجد ملف باسم Temp فى الامتداد C:\Users\Elsawy\AppData\Local\Temp هل اذا مسحته عادى ام سيضرنى بشى فى العمل ؟؟ انا لا احتاج المساحة فانا عندى مساحة فارغة للجزء C تساوى 96.4 جيجا لكنى اريد ان امنع تناقصها حيث كانت امس اكثر من 100 جيجا لا اعلم اين تذهب هذه المساحة ؟؟!! ارجو الافادة وشكرا ملحوظة .. انا لا اسطب برامج او اضع شي على ال C .. انا فقط اقوم بعملى على react native والاحظ اننى كلما قمت بكتابة الامر npm install لا من مشاريعى فان المساحة الفارغة فى ال C تنقص

السلام عليكم .. لماذا كلمة bodyParser مشطوبة كما فى الصورة ؟؟ .. Node js

أريد ان اعرف ما هو افضل باك اند ل Flutter وما هى الاسباب .. هل هو Dart ام Firebase ام Node js ام شئ أخر ؟؟ بصراحة انا اتعلم Node js وكنت اتسائل ان كان سيكون جيدا بالنسبة لفلاتر .. لكن البعض يقول ان افضل باك اند لفلاتر هو Dart .. هل هذا الادعاء صحيح ام لا ؟؟

كما موضح فى الصورتين عندما اضغط على خانة تاريخ الميلاد DOB فان حقل الادخاال يختفى خلف لوحة المفاتيح .. انا استخدمت keyboardavoidingview ولكن لم تجدى نفعا .. ما الحل ؟!! هذا هو الكود الخاص ب Signup Screen import React, {useState} from 'react'; import { StyleSheet, View, Text, Dimensions, KeyboardAvoidingView, } from 'react-native'; import Balls from '../components/Balls'; import MyButton from '../components/MyButton'; import MyInput from '../components/MyInput'; import Footer from '../components/Footer'; const phoneHeight = Dimensions.get('screen').height; function SignUpScreen({navigation}) { const [hidePass, setHidePass] = useState(true); return ( <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.con}> <Balls /> <Text style={styles.title}>Create New Account</Text> <Text style={styles.subTitle}>Few more step to step your account</Text> <View style={styles.inputsCon}> <MyInput iconName="account" placeholder="First Name" /> <MyInput iconName="account" placeholder="Last Name" /> <MyInput iconName="email" placeholder="Email" /> <MyInput secureTextEntry={hidePass} iconName="lock" placeholder="Password" IsPassword hideIconName={hidePass ? 'eye' : 'eye-off'} onPress={() => setHidePass(!hidePass)} /> <MyInput iconName="calendar" placeholder="DOB" /> </View> <MyButton title="SIGN UP" /> <Footer mainText="If you already have account ?" pressableWord="Login" onPress={() => navigation.navigate('LoginScreen')} /> </KeyboardAvoidingView> ); } const styles = StyleSheet.create({ con: { marginTop: phoneHeight * 0.04, flex: 1, }, inputsCon: { alignSelf: 'center', marginVertical: 26, }, title: { color: 'dodgerblue', fontSize: 18, marginLeft: 17, marginTop: phoneHeight * 0.1, }, subTitle: { fontSize: 16, marginLeft: 17, }, }); export default SignUpScreen; وهذا هو الكود الخاص ب MyInput // Note >> "con" is the shortcut for "container" import React, {useState} from 'react'; import {Dimensions, StyleSheet, View, TextInput} from 'react-native'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; const phoneHeight = Dimensions.get('screen').height; const phoneWidth = Dimensions.get('screen').width; function MyInput({ hideIconName, onPress, iconName, placeholder, IsPassword, ...props }) { return ( <View style={styles.con}> <View style={styles.iconAndNameCon}> <MaterialCommunityIcons name={iconName} size={22} color="dodgerblue" /> <TextInput {...props} style={styles.textInput} placeholder={placeholder} placeholderTextColor="black" /> {IsPassword && ( <View> <MaterialCommunityIcons onPress={onPress} name={hideIconName} size={22} color="dodgerblue" /> </View> )} </View> <View style={styles.underLine} /> </View> ); } const styles = StyleSheet.create({ con: { height: phoneHeight * 0.05, width: phoneWidth * 0.8, marginVertical: 7, }, underLine: { width: '100%', height: 1, backgroundColor: 'gray', bottom: 0, position: 'absolute', }, iconAndNameCon: { flexDirection: 'row', alignItems: 'center', }, textInput: { marginLeft: 5, flex: 1, }, }); export default MyInput;

السلام عليكم هذا ال API https://jsonplaceholder.typicode.com/posts أنا احاول ان اعمل له Post .. فى البداية عندما اقوم بعمل get له فان عدد الاوبجكتس التى تظهر لى 100 .. قمت باختباره بواسطة ال postman وعلمت له Post كانت النتيجة انه يقوم باضافة اوبجكت واحد مؤقتا ويتم حذفه حيث يصير عدد الاوبجكتس 101 وعندما اعمل get مرة اخرى يرجع عددهم 100 مرة ثانية !! .. اى ان الذى اضفته تم حذفه. الاكواد ناجحة لاننى جربتها على mockAPIs ونجحت لكن هذا ال Api لاينفع ولا يحذف ايضا مع ان ال response تكون ناجحة لكن لا اعرف لماذا لا تتغير الداتا بداخله .. اريد ان اعرف هل هناك موقع او اداة اخرى تمكننى من معرفة ال Endpoints التى يدعمها ال API سواء كانت get, post, delete, put وغيره .. وشكرا مقدما

شكرا لك محمد .. شكرا على المعلومة والطريقة نجحت الحمد لله

السلام عليكم أريد ان اعرف ما الخطأ بهذا الكود .. رسالة الخطأ كالاتى scrollToIndex out of range: request index1 but maximum is -1 مع ان هذا الخطأ لايظهر لى اذا قمت بعمل داتا عبارة عن array of objects وقمت بوضعها داخل ال FlatList فان كل شئ يعمل بطريقة صحيحة .. اما عندما اقوم بعمل fetch ل api فانه يظهر لى هذا الخطأ .. مالحل ؟؟ import React, { useState, useRef, useEffect } from "react"; import { StyleSheet, View, FlatList, Dimensions, Text, TouchableOpacity, } from "react-native"; import { AntDesign } from "@expo/vector-icons"; import axios from "axios"; const phoneWidth = Dimensions.get("screen").width; const phoneHeight = Dimensions.get("screen").height; function ScrollScreen() { const [index, setIndex] = useState(0); const [border, setBorder] = useState(0); const refContainer = useRef(); const refBox = useRef(); const [data, setData] = useState([]); useEffect(() => { photos(); }, []); function photos() { axios .get("https://jsonplaceholder.typicode.com/photos") .then(async function (response) { setData(response.data); }) .catch((err) => console.error(err)); } useEffect(() => { refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت }, [index]); useEffect(() => { refBox.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت }, [index]); const theNext = () => { if (index < photos.length - 1) { setIndex(index + 1); setBorder(index + 1); } }; const thePrevious = () => { if (index > 0) { setIndex(index - 1); setBorder(index - 1); } }; return ( <View style={styles.con}> <AntDesign style={[styles.iconConPosition, { left: phoneWidth * 0.05 }]} onPress={thePrevious} size={55} color="#0dddcb" name="caretleft" /> <AntDesign style={[styles.iconConPosition, { right: phoneWidth * 0.05 }]} onPress={theNext} size={55} color="#0dddcb" name="caretright" /> <FlatList scrollEnabled={false} ref={refContainer} data={data} // data={photos} keyExtractor={(item, index) => item.id.toString()} style={styles.flatList} renderItem={({ item, index }) => ( <View style={{ height: 150, width: phoneWidth * 0.7, margin: 50, backgroundColor: "red", alignSelf: "center", justifyContent: "center", alignItems: "center", }} > <Text>{item.id}</Text> <Text>{item.title}</Text> </View> )} horizontal pagingEnabled //تفعيل خاصية التمرير showsHorizontalScrollIndicator={false} // محدد التمرير /> <FlatList ref={refBox} data={data} // data={photos} keyExtractor={(item, index) => item.id.toString()} style={styles.flatList} renderItem={({ item, index }) => ( <TouchableOpacity onPress={() => { setIndex(index); setBorder(index); }} style={ border === index ? { height: 100, width: phoneWidth * 0.4, margin: 7, backgroundColor: "gray", alignSelf: "center", justifyContent: "center", alignItems: "center", borderWidth: 2, borderColor: "blue", } : { height: 100, width: phoneWidth * 0.4, margin: 7, backgroundColor: "gray", alignSelf: "center", justifyContent: "center", alignItems: "center", } } > <Text>{item.id}</Text> <Text>{item.title}</Text> </TouchableOpacity> )} horizontal /> <Text>{index}</Text> </View> ); } const styles = StyleSheet.create({ con: { flex: 1, alignItems: "center", backgroundColor: "#fae7ec", paddingBottom: 100, }, flatList: { flex: 1, marginVertical: phoneHeight * 0.05, }, iconConPosition: { position: "absolute", top: phoneHeight * 0.24, zIndex: 1, }, }); export default ScrollScreen;

السلام عليكم .. عندى FlatList بها عدة Items وانا اريد ان عندما اضغط على Item منها تتحول لون ال Item الى لون مختلف.. مثلا لون خلفيتها يتغير لكى تظهر لليوزر ان هذه ال item هى المحددة حاليا .. كيف أفعل هذا بواسطة React Native FlatList ؟ لمن لم يفهم سؤال .. رجاء انظر الصورة .. فى الصورة عندما ضغط على احدى المربعات فانها يكون حولها حدود لونها ازرق .. واذا ضغطنا مربع اخر فان الحدود الزرقاء تذهب الى المربع الاخر .. وهكذا .. كيف افعل ذلك بواسطة ال Flatlist ؟؟ هل هناك prop جاهزة تدعمها ام يجب ان اكتب اكواد؟؟ وشكرا مقدما

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

السلام عليكم .. أود ان أطبق هذا التصميم بفكرة ال Flatlist .. وهى التنقل بين الصور المختلفة باستخدام الاسهم وقد طبقتها بفضل الله فى احد مشاريعى السابقة .. ولكن الان اريد ان اخوض تجربة اصعب .. وهى عندما أضغط على احدى الصور بالاسفل فانها تظهر فوق فى الاعلى .. واتسائل هل هذا يتطلب منى ان اقوم بعمل 2 FlatList ام واحدة فقط ؟؟؟ أنا نجحت بفضل الله وبفضل المساهمين هنا فى عمل الجزء الاول وهو التنقل عن طريق هذا الكود فى الاسفل .. ولكن المشكلة اريد ان احول ال Border الخاص بالصورة فى الاسفل الى اللون الازرق عندما احرك الاسهم فوق .. وايضا اذا ضغطت على اى صورة فى الاسفل يتحول ال Border الخاص بها الى اللون الازرق وتظهر هى الاخرى بالاعلى .. حاولت طرق كثيرة وفشلت فى التوفيق بينهم .. تحويل لون ال Border للون الازرق سهل جدا بفضل الله .. لكن الصعب هو عرض الصورة المضغوط عليها بالاعلى رجاء ماذا الذى يجب ان افعله فى هذا الكود ؟؟ وان كان هناك مصدر يمكننى مثلا repo على github فاتمنى تركه فى الاجابات .. import React, { useState, useRef, useEffect } from "react"; import { StyleSheet, View, FlatList, Dimensions, Text } from "react-native"; import { AntDesign } from "@expo/vector-icons"; const photos = [ { id: 1, title: "Photo 1" }, { id: 2, title: "Photo 2" }, { id: 3, title: "Photo 3" }, { id: 4, title: "Photo 4" }, { id: 5, title: "Photo 5" }, { id: 6, title: "Photo 6" }, ]; const phoneWidth = Dimensions.get("screen").width; const phoneHeight = Dimensions.get("screen").height; function ScrollScreen() { const [index, setIndex] = useState(0); const refContainer = useRef(); useEffect(() => { refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت }, [index]); const theNext = () => { if (index < photos.length - 1) { setIndex(index + 1); } }; const thePrevious = () => { if (index > 0) { setIndex(index - 1); } }; return ( <View style={styles.con}> <AntDesign style={[styles.iconConPosition, { left: phoneWidth * 0.05 }]} onPress={thePrevious} size={55} color="#0dddcb" name="caretleft" /> <AntDesign style={[styles.iconConPosition, { right: phoneWidth * 0.05 }]} onPress={theNext} size={55} color="#0dddcb" name="caretright" /> <FlatList ref={refContainer} data={photos} keyExtractor={(item, index) => item.id.toString()} style={styles.flatList} renderItem={({ item, index }) => ( <View style={{ height: 150, width: phoneWidth * 0.7, margin: 50, backgroundColor: "red", alignSelf: "center", justifyContent: "center", alignItems: "center", }} > <Text>{item.id}</Text> <Text>{item.title}</Text> </View> )} horizontal pagingEnabled //تفعيل خاصية التمرير showsHorizontalScrollIndicator={false} // محدد التمرير initialScrollIndex={index} /> <FlatList data={photos} keyExtractor={(item, index) => item.id.toString()} style={styles.flatList} renderItem={({ item, index }) => ( <View style={{ height: 100, width: phoneWidth * 0.4, margin: 7, backgroundColor: "red", alignSelf: "center", justifyContent: "center", alignItems: "center", }} > <Text>{item.id}</Text> <Text>{item.title}</Text> </View> )} horizontal /> </View> ); } const styles = StyleSheet.create({ con: { flex: 1, alignItems: "center", backgroundColor: "#fae7ec", paddingBottom: 100, }, flatList: { flex: 1, marginVertical: phoneHeight * 0.05, }, iconConPosition: { position: "absolute", top: phoneHeight * 0.24, zIndex: 1, }, }); export default ScrollScreen; وشكرا مقدما

حل رائع لكن اعتقد ان به خطأ لانه ظهر لى هذا الخطأ flatListRef.scrollToIndex is not a function. (In 'flatListRef.scrollToIndex({ index: index, animated: true })', 'flatListRef.scrollToIndex' is undefined)

هذا ما أحاول تصميمه وكل شئ جيد ماعدا السهمين اليمينى واليسارى انا حاولت كمحاولة ابتدائية ان أضع Button عادى لكى اجر ب انا احرك الى اليمين او اليسار وقمت بعمل initialScrollIndex={1} لكى اجعل ال FlatList تعرض الايتم صاحبة هذا الاندكس .. المهم حاولت ان اعمل ال Button يزيد او ينقص عن طريق ال useState كما فى الكود التانى function MainScreen() { const [index, setIndex] = useState(0); return ( <View style={styles.con}> <Button title="Next" onPress={() => setIndex(index +1)} /> <FlatList data={data} keyExtractor={(item) => item.id.toString()} style={{ flex: 1, marginVertical: phoneHeight * 0.15, }} renderItem={ ({item}) => <ScrollerCakes image={item.image} title={item.title} /> } pagingEnabled horizontal showsHorizontalScrollIndicator={false} initialScrollIndex={index} // لكنها لم تنفع لانها القيمة الابتدائية فقط /> </View> ); } حيث عندما انقر الزر فان ال index (State) تزداد بمقدار 1 لكن هذه الطريقة لم تنفع لاننى هنا استخدم initialScrollIndex والذى يعنى انه يعمل فى البداية فقط .. انا اريد حل لهذه المشكلة وهى اننى عندما اضغط على زر فانه يذهب الى index التالى وهكذا .. وشكرا مقدما

السلام عليكم .. اريد ان اطبق هذا التصميم الذى فى الصورة وانا نجحت فى تطبيقه لكن بواسطة useState و conditional rendering والموضع سهل وبسيط جدا بفضل الله .. ولكنى فجأة احتجت ان أفعل هذا التصميم ولكن بواسطة FlatList .. لاننى انوى ان ازيد ال items واجعلها كثيرة بالاضافة الى ان ال flatlist أفضل .. أنا أريد ان اعرض item واحدة مع امكانية تحريكها لليمين واليسار بواسطة السهمين لاعرض item اخرى .. وشكرا مقدما

تم حل السؤال تم حل السؤال

حسنا سوف أرفعه على gitHub وأرسل الرابط لك

أنا أستخدم useSelector و useDispatch أنا أتى بمصفوفة ال cakes عن طريق ال useSelector واضعها فى ال Flatlist .. هذا هو الكود .. const cakes = useSelector((state) => state.cakes) وهذه المصفوفة اقوم بتخزينها فى initialState داخل ال Reducer