عمر قره محمد

في هذه الإجابة أفترض أنك تستخدم الـ functional component. في البداية يجب ان تعرّف state باسم notes كالتالي : const [notes, setNotes] = useState([]); وبعد ذلك قوم بإحضار البيانات من الـ AsyncStorage في الـ useEffect ونضيف الـ [] الفارغة كباراميتر لها حتى تستدعى مرة واحدة عند فتح الصفحة. كالتالي : const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); وتقوم بتعديل الكود الخاص بحفظ الـ notes في الـ asyncStorage ليصبح بالشكل : const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } ولقد اعتمدت على الكود الذي استخدمته أنت في سؤالك السابق : حيث ان الكود التالي : const da = [...notes , body]; يعني ان تقوم بتوزيع الـ array المسمى notes داخل الـ array المسمى da ثم تضيف الـ الكائن body لها ليصبح لديك array يحتوي كل البيانات السابقة بالإضافة للمكون الجديد. والـ setNotes(da); حتى نقوم بحفظ البيانات في الـ state بعد حفظها في الـ AsyncStorage. ليصبح الكود بالكامل : const [notes, setNotes] = useState([]); useEffect(() => { const value = await AsyncStorage.getItem("notes"); const parsed = JSON.parse(value) setNotes(parsed); }, []); const saveNoteHandler = async()=> { . . . try{ const da = [...notes , body]; await AsyncStorage.setItem("notes" , d); setNotes(da); . . . } catch(e){ console.log(e) } . . . } وحتى نعرض هذه البيانات المحفوظة في الـ state نكتب : {notes?.map((note , index) =>{ return ( <View key={index}> <Text>{note.name}</Text> <Text>{note.email}</Text> <Text>{note.pass}</Text> </View> ) })} حيث نقوم بعمل map على الـ state المسماة notes ولكل note نقوم بإعادة view تحتوي التفاصيل. والـ key مهمة حتى يستطيع react متابعة الكائن الذي انشأته. واشارة الاستفهام في notes?.map من اجل التأكد من أن notes موجودة، فإذا لم تكن موجودة لا يقوم بعمل map.

هذا سؤال مختلف وسأقوم بنقله إلى سؤال جديد.

الكود يجب ان يكون كالتالي : const [note, setNote] = useState({}); useEffect(() => { const value = await AsyncStorage.getItem("note"); const parsed = JSON.parse(value) setNote(parsed); }, []); في الكود السابق أفترض أنك تستخدم الـ functional component. وعرفنا state باسم note وذلك باستخدام الـ hook الخاصة بذلك useState. والـ [] الفارغة في الـ useEffect هي من اجل ان ينفذ الكود عند فتح الصفحة مرة واحدة فقط. والـ parse هي عكس الـ stringify التي قمت بعملها قبل حفظ البيانات. و الـ setNote هي لإضافة البيانات القادمة إلى الـ state المسماة note. وعند اضافة الكود السابق سيصبح لديك وصول للعنصر note والذي يحتوي البيانات، وذلك لتكتب الكود : <View> <Text>{note.name}</Text> <Text>{note.email}</Text> <Text>{note.pass}</Text> </View>

إذا كانت البيانات تأتي بالشكل : const user ={name:"name", email:"email", pass:"password" } فيجب ان يكون تقسيمها كالتالي : <View> <Text>{user.name}</Text> <Text>{user.email}</Text> <Text>{user.pass}</Text> </View>

الـ e هو عبارة عن اختصار لل object المسمى event وهو يحتوي على معلومات خاصة بالـ event. وهو عبارة عن object مبنية في js ويمكنك الوصول إليها كما في المثال الذي شاركته أنت. اشيع استخدام لها هو : e.target e.preventDefault() ويمكنك الإطلاع على باقي الخصائص من هنا وقد يفيدك القال التالي أيضاً : والسؤال التالي :

غير الكود التالي : win2=window.open(popunder[Math.floor(Math.random()*(popunder.length))],"",winfeatures) إلى الشكل : win2 = window.open(popunder[Math.floor(Math.random() * popunder.length)], "_self", winfeatures); وذلك بإضافة الـ self_ بدلاً من الـ "" في الباراميتر الثاني للوظيفة open. توثيق لـ window.open. قد يفيدك الاطلاع على :

استخدم الأمر git log حتى تسطيع معرفة المعرف الخاص بالـ commit : قم بنسخ المعرف ثم كتابة الأمر : git checkout المعرف_الذي_نسخته وبعدها قم بإنشاء branch جديد كالتالي : git checkout -b newBranch حيث newBranch هو اسم ال branch الذي ستنشئه ويمكنك استخدام اي اسم تريده. وبعدها تقوم برفع ال newBranch على GitHub : git push origin newBranch:master حيث انني اعتبر ان الـ branch الأصلي هو الـ master. وإذا أردت العودة إلى ال branch الأصلي الذي يحتوي كل الـ commits تستطيع فعل ذلك باستخدام الأمر : git checkout master

قم رجاءً بمشاركة الكود الخاص بك أو مشاركة المشكلة التي تواجهها في بناء الكود حتى نستطيع مساعدتك. أما إذا اردت مطور يقوم ببناء الكود بالكامل، فيمكنك توظيف مستقلين من موقع مستقل. وإذا كنت مهتم في تعلم البرمجة فيمكنك الاطلاع على المقالة التالية : وهذه :

هذا بسبب الملحقات "extension" التي قمت بتنزيلها في المتصفح. ويمكنك التخلص من هذه المشاكل بإيقاف الملحقات أو يمكنك تجاهلها فهي لن تؤثر على الكود الخاص بك في الغالب.

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

المشكلة أنك استخدمت نفس الـ key مرتين لاحظ : [ { question : 'Q1', answer : 'answer1 our technology and expanding our product offering to stay at the cutting edge of technology', isOpen : false, }, { question : 'Q2', answer : 'answer2 our technology and expanding our product offering to stay at the cutting edge', isOpen : false, }, { // هنا key استخدمت نفس الـ // مرتين Q2 حيث كررت الـ question : 'Q2', answer : 'answer2 our technology and expanding our product offering to stay at the cutting edge of', isOpen : false, }, ] عدل الـ Q2 إلى Q3 وستحل المشكلة.

انا اعرف أنه يمكنك بناء أي واجهة أمامية باستخدام الـ vue js وهنالك الكثير من افكار المواقع الالكترونية (واجهات امامية) : صفحة هبوط لمنتج معين صفحة سيتم اطلاق الموقع بعد كذا ..إلخ. صفحة الصفحة غير موجودة 404. لوحة تحكم لموقع ويب. موقع ويب عن السياحة والسفر موقع ويب عن الرياضة موقع ويب عن الأخبار موقع ويب أسئلة وأجوبة ويمكنك الاطلاع على السؤال التالي :

رأيت ان هنالك بعض الخدمات التي تتيح انشاء demo لتطبيق الاكسل ولكنها معقدة للحقيقة مثل xlspadlock وغيره وكذلك لن تمكنك من انشاء رابط معاينة. وبالنسبة لرفع الفيديو فهنالك الكثير من البدائل ليوتيوب مثل : Vimeo و VideosHub و Dailymotion و Utreon و The Internet Archiv. وفي حال اردتي محاولة رفع الفيديو على يوتيوب مرة ثانية فهذا توثيق يوتيوب الرسمي لكيفية رفع الفيديوهات الكبيرة > 15 دقيقة.

رابط المعاينة هو عبارة عن رابط للموقع الذي يوجد فيه المنتج على أن يكون الموقع يحتوي على الـ meta tags (عنصر html) الخاص بكل من الصورة والعنوان والوصف ورابط : ولا اعتقد ان الرابط الإلكتروني مهم إذا كان المنتج الخاص بك قابل للعرض مباشرةً في بيكاليكا والذي يحتاج لرابط معاينة هو صفحات الـ html و تصاميم المواقع ..إلخ والتي لا يمكن عرضها مباشرةً في بيكاليكا وإنما تستطيع عرض صور فقط، فلذلك تشارك رابط لـ demo للموقع حتى يستطيع الزبون تجربة المنتج.

الـ node ليس قاعدة بيانات وإنما سيرفر ويمكنك استخدام نوع السيرفر الذي تريده حيث ان كل السيرفرات لديها القابلية للعمل مع كل انواع قواعد البيانات. والـ node يستخدم غالباً عندما يكون هنالك عدد طلبات كثيرة على السيرفر ولكنها طلبات صغيرة الحجم (مثل تطبيقات الرسائل وغيرها) ولا يستخدم في الحالات التي تحتاج لطلبات كبيرة مثل طلبات التحميل لملفات ضخمة و المواقع التي تعرض الفيديوهات. أما قواعد البيانات فهي على نوعين SQL و NoSQL وكل منها جيد لنوع معين من البيانات وله ميزاته وعيوبه. واشهرهما هو MySQL لل SQL و mongo DB للـ NoSQL :

يحدث ذلك لأنه يتم احياناً يتم تحميل الـ sdk وربطه مع الـ initMap قبل تنفيذ الـ getCurrentPosition وبالتالي يكون الـ mylocation ما يزال فارغاً ولتجاوز المشكلة سنقوم بربط الموقع بالـ sdk بعد تنفيذ الـ getCurrentPosition وذلك بوضع الـ initMap و الـكود : window.initMap = initMap; داخل الوظيفة success والتي تنفذ عند الانتهاء من الـ getCurrentPosition. ليصبح الكود كالتالي : <script> var map; var marker; var mylocation; var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function error(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } function success(position) { var { latitude, longitude } = position.coords; mylocation = { latitude, longitude }; function initMap() { const option = { zoom: 10, center: { lat: mylocation.latitude, lng: mylocation.longitude }, }; map = new google.maps.Map(document.getElementById("map"), option); } window.initMap = initMap; } navigator.geolocation.getCurrentPosition(success, error, options); </script>

يوجد لديك الكثير من الاخطاء ومنها خطأ في كتابة الـ script الخاصة بإستدعاء الخريطة و آخر في وظيفة الـ success و آخر في وظيفة الـ initMap وكذلك فإنك لم تضيفي الكود الخاص بربط الـ SDK الخاص بالخرائط بالكود الخاص بك window.initMap = initMap; لإصلاح الاخطاء لاحظي الكود الصحيح : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Map</title> <!-- <script src="jquery-3.6.1.js"></script> --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous" ></script> <!-- الخاصة بالخريطة كالتالي script نعدل الـ --> <!-- async نضيف الـ --> <!-- إلى الرابط &callback=initMap نضيف --> <script async src="https://maps.googleapis.com/maps/api/js?key=AIzV-URjeXR4q7AAG__6rf5nqkxQOED5W4&callback=initMap" ></script> <script> var map; var marker; var mylocation; var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; function error(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } // mylocation حتى نحفظ الموقع في المتغير success نعدل الـ function success(position) { var { latitude, longitude } = position.coords; // mylocation نضيف الموقع إلى mylocation = { latitude, longitude }; } navigator.geolocation.getCurrentPosition(success, error, options); // لتصبح بالشكل التالي initMap يجب تعديل الـ function initMap() { // والذي يحتوي الموقع و درجة التقريب option نضيف المتغير const option = { zoom: 10, // mylocation نحضر الاحداثيات من الـ center: { lat: mylocation.latitude, lng: mylocation.longitude }, }; map = new google.maps.Map(document.getElementById("map"), option); } // نضيف الكود التالي كما في توجيهات جوجل window.initMap = initMap; </script> </body> </html> بعد اصلاح كل الاخطاء ستفتح الخريطة ثم سيعطيك الخطأ : Google Maps JavaScript API error: InvalidKeyMapError والذي يعني أن الـ key الذي تستخدمينه غير صالح ويجب ان تقومي بعمل مشروعك في Google Cloud Console وتفعيل الفوترة لمشروعك وعدها تفعيل الـ API للمشروع ومن ثم الحصول على key صالح للمشروع. اطلع على توثيق خرائط جوجل لهذه المشكلة

لقد قمت بالاطلاع على الملفات الخاصة بك وهي تعمل لدي بشكل جيد ولعل المشكلة هي أنك قمت بالتعديل على ملف الـ js أو ملف الـ html ولكن نسيت أن تحفظ التعديلات. ويمكنك التحقق من ذلك من خلال النظر إلى اسم الملف المفتوح في برنامج الـ vs Code كما في الصورة : إذا لم تكن هذه هي المشكلة فقم بمشركة الملف الحاوي للمشروع بالكامل حتى استطيع الاطلاع على المشكلة.

في حال حفظ البيانات في قاعدة البيانات بشكل BASE64 فإن الموقع سيعمل ولكن سيكون بطيء جداً حيث يزيد حجم الصورة عند تحويلها إلى BASE64 وبالتالي بطئ في عملية الحفظ وعملية الاستدعاء كما أن عملية الاستدعاء ستكون من قاعدة البيانات إلى السيرفر ومن ثم من السيرفر إلى المستخدم وبالتالي بطء اكبر. والافضل هو حفظ البيانات على السيرفر ويمكنك فعل ذلك باستخدام multer في node js وهنالك بدائل له في باقي اللغات. ولكن لماذا تحفظ الصور في قاعدت البيانات أصلاً ؟ تستطيع حفظ الصور على السيرفر وحفظ رابط الصورة أو اسمها في قاعدة البيانات وهذه هي الطريقة الافضل لحفظ الملفات. كما يمكنك حفظ الصور في طرف ثالث حيث يوجد شركات خاصة للصور مثل AWS و Cloudinary وهي سهلة الاعداد والاستخدام جداً. إطلع أيضاً على :

البديل الأكثر أماناً هو innerText إذا كنت تريد ان تضيف نص داخل العنصر، مثل : <p id="myP"></p> <script> document.getElementById("myP").innerText = "hi from js"; </script> وإذا كنت تريد ان تضيف عناصر HTML بالإضافة للنصوص : <div id="myDiv"></div> <script> const myDiv = document.getElementById("myDiv") // p نصنع عنصر من النوع const para = document.createElement("p"); // نسند له نص para.innerText = "This is a paragraph"; // الهاص بنا div نجعله ابن للـ myDiv.appendChild(para); </script>

نعم تستطيع، ولكن ستواجه صعوبة كبيرة في الحصول على شروحات لكيفية البرمجة على الموبايل. وكذلك سيكون هنالك الكثير من المحدودية في العمل، وذلك لأن بيئات العمل مبنية بشكل عام لتعمل من الحاسوب. والافضل هو ان تحصل على جهاز كمبيوتر. اطلع ايضاً على :

بلغة JavaScript يمكنك كتابة هذه الدالة بشكلين : const myFunc = (a,b)=>{ return Math.pow((Math.sqrt(a)), b) } console.log(myFunc(4,3)) // 8 والشكل المختصر : const myFunc = (a,b)=>{ return (a**0.5)**b } console.log(myFunc(4,3)) وذلك لأن الاشارة ** هي التي ترمز إلى القوى في جافاسكريبت و العدد للقوة 0.5 هو نفسه جذر العدد. فالمثال السابق يقوم بإيجاد جذر الـ a ثم رفعه للقوة b. وفي بايثون : def my_function(a , b): return (a ** 0.5) ** b print(my_function(4 , 3)) # 8

الموقع جيد وفيه خصائص تصميمية جميلة جداً. ويبدو أنه لا يوجد صورة Favicon للموقع لاحظ : وهذه الـ Favicon تضيفها كالتالي : <link rel="icon" type="image/x-icon" href="مسار/الصورة"> ثانياً لاحظت بعض المشاكل : 1- لا يوجد إشارة ☝ pointer عند عمل hover على زر عربة الشراء أو زر القلب. والنصيحة ان تضيف الخاصية pointer لكل من الزرين : cursor: pointer; 2- عندما اقوم بعمل اعجاب على عنصر فإنه لا يحدث أي تغيير بزر الاعجاب الذي ضغطت عليه وهذا سيء لتجربة المستخدم (حيث انني ظننت ان الزر لا يعمل عند اول تجربة) ولكن التغيير الوحيد الذي يحدث هو إضافة 1 إلى زر القلب وعند النقر على زر القلب يظهر المنتجات التي اعجبتني ولكن عند الغاء الاعجاب يبقى العدد 1 يظهر على زر القلب. والنصيحة هي تغيير زر الأعجبني الموجود في كل بطاقة عند النقر عليه بحيث يظهر للمستخدم ان الزر يعمل و تعديل الرقم الذي يظهر فوق زر القلب بحيث يتغير عند عمل الغاء الاعجاب. 3- لا يمكنك حذف المنتج من السلة إلا عند فتح صفحة السلة. والنصيحة هي ان تضيف زر الحذف والزر الخاص بإضافة المزيد من ذات المنتج إلى السلة الموجودة في الصفحة الرئيسية أيضاُ. 4- في حال قمت بإضافة اكثر من منتج من ذات النوع في صفحة السلة ومن ثم قمت بإعادة التحميل فإن المنتجات التي اضفتها لا تحفظ. 5- يفضل أن تقوم بإضافة اشعار بسيط عندما ينقر المستخدم على زر الإضافة إلى العربة وذلك لأن التغيير الوحيد الذي يحدث هو تغيير الرقم الصغير الموجود على السلة ويصعب الانتباه له. 6- احببت ان اجد صفحة تفاصيل المنتج وكذلك تفاصيل عن الشركة (صفحة من نحن) و صفحة تواصل معنا وكذلك صفحة سياسة الخصوصية والاستخدام والـ footer الخاص بالموقع. 7- النصيحة الاخيرة هي الاطلاع على موقع ecommerce شهير ومحاولة معرفة النقاط الاساسية فيه وتطبيقها في موقعك بطريقتك المميزة.

لا ليس هنالك عدد محدد من الفيديوهات يجب ان تشاهده في اليوم، ويمكنك ان تشاهد العدد الذي تريده من الفيديوهات باليوم ولكن يشترط ان تكون تقوم بالتطبيق خلف المدرب حيث سيطلب منك ان تسلم المشاريع التي طبقتها قبل ان تخضع لامتحان الدورة.

يبدو أن المشكلة هي في الـ if الموجودة داخل الـ event listeners حيث انك تتوقع ان تعيد الوظائف قيمة صحيحة أو خاطئة ولكنك لم تقم بإعداد الوظائف لتعيد أي شيء. وذلك لأن الوظيفة في حال لم تقم بإضافة return لها فإنها ستعيد undefined فمثلاً : const myFunction = (a , b) => { cosnt c = a + b; } console.log(myFunction(4, 15)) // undefined ستعيد // وبالتالي if(myFunction(4, 15)) { // undefined لن يتحقق الشرط أبداً لأن نتيجة الوظيفة هي . . . } // بينما const myFunctionWithReturn = (a , b) => { cosnt c = a + b; return c; } if(myFunctionWithReturn(4, 15)) { // في هذه الحالة سيتحقق الشرط لأن الوظيفة ستعيد 60 . . . } ولذلك يجب ان تعيد من الوظيفة قيمة معينة (true أو false) أو ما ينوب عنها فمثلاً كل من "" (نص فارغ) و 0 و undefined و null كلها تعتبر false. والمشكلة الثانية هي أنك كتبت الشرط كالتالي : if(a || b || c){...} وهذا يعني ان الشرط سيتحقق إذا كان واحد على الاقل من الـ a و b و c صحيحاً أي أنه إذا كان a صحيحاً ولكن b و c خطأ سيتحقق الشرط وسينفذ مابداخله. ولكن الشكل الصحيح هو التالي : if(a && b && c){...} وفي هذه الحالة لن يتحقق الشرط حتى تكون a و b و c كلها صحيحة. فيصبح الكود الخاص بك كالتالي : // check email is valid function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input) return true } else { showError(input, 'Email is not valid') return false } } // check passwords much function checkPassword(input1, input2) { if (input1.value != input2.value) { showError(input2, 'Passwords do not much') return false } else { return true } } // check required fields function checkRequired(inputArr) { let result = true; inputArr.forEach(function (input) { if (input.value.trim() === '') { showError(input, `${getFieldName(input)} is required`) result = false } else { showSuccess(input) } }) return result; } // check input length function checkLength(input, min, max) { if (input.value.length < min) { showError(input, `${getFieldName(input)} must be at least ${min}`) return false } else if (input.value.length > max) { showError(input, `${getFieldName(input)} must be less than ${max}`) return false } else { showSuccess(input) return true } } form.addEventListener('submit', function (e) { e.preventDefault() if (checkRequired([username, email, password, confirmPassword]) && checkLength(username, 4, 15) && checkLength(password, 6, 20) && checkEmail(email)) { localStorage.setItem("register-username", username.value) localStorage.setItem("register-email", email.value) localStorage.setItem("register-password", password.value) setTimeout(() => { window.location = "./login.html" }, 1000) } }) بعد قول كل هذا فإن استخدامك للـ js لعمل الـ validation قد صعب الموضوع كثيراً وذلك لأنه يوجد طريقة اسهل بكثير لعمل الـ validation وهي استخدام خصائص الـ input المبنية في html لاحظ المثال التالي : <form> <label for="userName">first name :</label> <input type="text" id="userName" name="userName" required placeholder="enter your userName" minlength="6" maxlength="10" /> <!-- الكود السابق يتأكد من كون المستخدم قد أدخل اسماً ومن أن طول هذا الاسم اكبر من 6 واصغير من 10--> <label for="userName">password :</label> <!-- الكود السابق يتأكد من كون المستخدم قد أدخل كلمة السر ومن أن طولها اكبر من 6 واصغر من 10--> <input type="password" id="password" name="password" placeholder="enter your password" min="6" max="25" required /> <button>Submit</button> </form> اطلع اكثر على الخاصيات التي تستطيع اعطائها للـ input من موسوعة حسوب