Yomna Raouf

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

    1,417
  • تاريخ الانضمام

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

  • Days Won

    61

السُّمعة بالموقع

702 Excellent

المعلومات الشخصية

  • النبذة الشخصية -- communications and electronics engineer

    -- Full-stack React.js developer

    -- DSC core-team member @ Google developers
  • الموقع
  1. مرحبًا @Ayman Sefrini نعم بإمكانك القيام بذلك باستخدام ما يُسمى ب Geolocation API الخاص ب Google maps API، كما يلي: في البداية سنحتاج للتحقق من أن المُتصفح يسمح بتحديد الموقع الجغرافي للجهاز/المستخدم: // نتحقق من أن المتصفح الخاص بالمستخدم يدعم هذه التقنية، أو يعطي المواقع صلاحية تحديد الموقع الجعرافي للمستخدم if (navigator.geolocation) { // success فإذا كانت مدعومة من قِبل المتصفح نقوم باستدعاء تابع يُسمى navigator.geolocation.getCurrentPosition(success); } else { // و إذا لم تكُن كذلك، نُظهر للمستخدم الرسالة التالية alert("There is Some Problem on your current browser to get Geo Location!"); } إذا كان المتصفح يسمح بأمر كهذا، سنقوم باستدعاء تابع يُسمى success و سنقوم من خلاله بتحديد إحداثيات موقع المستخدم و عرضه على الخريطة. تحديد إحداثيات المستخدم، خطوط طول - دوائر عرض - المدينة var lat = position.coords.latitude; // موقع المستخدم بالنسبة لدوائر العرض var long = position.coords.longitude; // موقع المستخدم بالنسبة لخطوط الطول var city = position.coords.locality; // موقع المستخدم - المدينة تحديد المكان الذي ستفتح عنده الخريطة var LatLng = new google.maps.LatLng(lat, long); // تحديد الموقع على الخريطة بناءً على البيانات السابقة نقوم بضبط ال options الخاصة بالخريطة // ضبط إعدادات الخريطة var mapOptions = { center: LatLng, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; الآن بتعريف متغير map وإعطاءه id الخاصة بالـ div // عرض الخريطة على صفحة الويب var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions); نقوم بإنشاء مُحدد marker لعرض موقع المُستخدم على الخريطة // و نقوم بإعداد عنوانه ليعرض إحداثيات موقع المستخدم LatLng القيمة position نقوم بتعريف المُحدد و نُعطي الخاصية var marker = new google.maps.Marker({ position: LatLng, title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + lat + +"<br />Longitude: " + long }); نقوم بإضافة المُحدد للخريطة: // نقوم بإضافة المُحدد للخريطة marker.setMap(map); نقوم بإنشاء نافذة نصية infoWindow و نضيفها للخريطة: // نقوم بإنشاء نافذة نصية و نضيفها للخريطة var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" }); getInfoWindow.open(map, marker); لتُصبِح الشيفرة النهائية بالشكل التالي: // نتحقق من أن المتصفح الخاص بالمستخدم يدعم هذه التقنية، أو يعطي المواقع صلاحية تحديد الموقع الجعرافي للمستخدم if (navigator.geolocation) { // success فإذا كانت مدعومة من قِبل المتصفح نقوم باستدعاء تابع يُسمى navigator.geolocation.getCurrentPosition(success); } else { // و إذا لم تكُن كذلك، نُظهر للمستخدم الرسالة التالية alert("There is Some Problem on your current browser to get Geo Location!"); } // هنا نقوم بتحديد إحداثيات المستخدو و بلده و نقوم بإعداد الخريطة حتى تقوم بعرض موقعه function success(position) { var lat = position.coords.latitude; // موقع المستخدم بالنسبة لدوائر العرض var long = position.coords.longitude; // موقع المستخدم بالنسبة لخطوط الطول var city = position.coords.locality; // موقع المستخدم - المدينة var LatLng = new google.maps.LatLng(lat, long); // تحديد الموقع على الخريطة بناءً على البيانات السابقة // ضبط إعدادات الخريطة var mapOptions = { center: LatLng, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; // عرض الخريطة على صفحة الويب var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions); // و نقوم بإعداد عنوانه ليعرض إحداثيات موقع المستخدم LatLng القيمة position نقوم بتعريف المُحدد و نُعطي الخاصية var marker = new google.maps.Marker({ position: LatLng, title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + lat + +"<br />Longitude: " + long }); // نقوم بإضافة المُحدد للخريطة marker.setMap(map); // نقوم بإنشاء نافذة نصية و نضيفها للخريطة var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" }); getInfoWindow.open(map, marker); }
  2. مقدمة إلى vuejs

    مرحبًا حفصة. دعينا نقوم بتقسيم التمرين لمهام صغيرة بسيطة أولًا حتى نتمكن من حلها بعد ذلك سنقوم بتجميع هذه الأجزاء سويًا حتى نحصل على الحل النهائي. أولًا و قبل كل شئ حتى نتمكن من إظهار مقترحات للمستخدم سنحتاج لمعرفة ما هي الحروف أو ما هو النص الذي قام المستخدم بإدخاله، و لتنفيذ ذلك سنجد أننا سنحتاج للإنصات إلى أحداث لوحة المفاتيح "تمامًا كما هو موضح في هذا القسم من المقال" أي أننا سنحتاج معرفة ما يقوم المستخدم بإدخاله حرف بحرف، var app = new Vue({ el: '#app', data: { userInput: '' }, methods: { keyIsUp: function(event) { this.userInput = event.target.value; } }, template: ` <div id="app"> <input type='text' v-on:keyup='keyIsUp' /> <p> {{userInput}} </p> </div> ` }) لاحظي هنا كيف سيتم طباعة كل حرف أسفل مربع الإدخال بمجرد أن يقوم بكتابته. ثانيًا الآن و قد قمنا بمعرفة دخل المستخدم سنحتاج لفلترة أو تصفية قائمة الدول بناءً على هذا الدخل و وضع المقترحات في قائمة جديدة نسميها suggestions مثلًا، و للقيام بذلك سنحتاج لندور على جميع عناصر القائمة الخاصة بالدول و التحقق من إذا كان اسم الدولة يحتوي على أحد الأحرف التي أدخلها المستخدم فإذا كان كذلك سنقوم بإضافة الدولة إلى القائمة suggestions، و للقيام بذلك سنقوم باستخدام أحد ال array methods الخاصة بلغة JavaScript و هذه ال method تسمى filter و كما يوضح اسمها هذه الدالة تقوم بعملية فلترة/تصفية/ترشيح أي أنّها تقوم بالدوران على عناصر مصفوفة و تقوم بإعادة العناصر التي ينطبق عليها الشرط الذي نقوم نحن بتحديده فقط، حسنًا و لكن ما هو هذا الشرط في حالتنا؟؟ الشرط هو أن يحتوي اسم الدولة على الحروف التي قام للمستخدم بإدخالها و للقيام بذلك سنحتاج للبحث في اسم الدولة بهذه الحروف و لحسن الحظ JavaScript توفر لنا تابع جاهز أيضًا للقيام بهذا الأمر و هذا التابع يسمى includes "هل يحتوي" فهذا التابع يقوم بالتحقق من وجود حرف ما في السلسة النصية فإذا وجده يعيد القيمة true و إن لم يجده يعيد false. إذًا ما سنقوم به الآن هو الدوران على قائمة الدول و عمل ترشيح لها بناءً على ما يعيده التابع includes فإذا أعاد true سنقوم سنقوم بإضافة الدولة إلى قائمة المقترحات suggestions var app = new Vue({ el: '#app', data: { userInput: '', countries: [ 'السعودية', 'البحرين', 'مصر', 'السودان', 'ليبيا', 'الجزائر', 'المغرب', 'تونس', 'موريتانيا', 'العراق', 'سوريا', 'لبنان', 'قطر', 'الإمارات', 'الصومال', 'جزر القمر', 'الكويت', 'سلطنة عُمان', 'الأردن', 'اليمن', 'فلسطين' ], suggestions: [] }, methods: { keyIsUp: function (event) { this.userInput = event.target.value; this.suggestions = this.countries.filter(country => { return country.includes(this.userInput); }) } }, template: ` <div id="app"> <input type='text' v-on:keyup='keyIsUp' /> <p> {{suggestions}} </p> </div> ` }) لاحظي كيف تتم عملية الترشيح هنا ثالثًا ما تبقى لنا الآن هو عرض هذه العناصر على هيئة قائمة لتصبح الأكواد النهائية كما يلي: var app = new Vue({ el: '#app', data: { userInput: '', countries: [ 'السعودية', 'البحرين', 'مصر', 'السودان', 'ليبيا', 'الجزائر', 'المغرب', 'تونس', 'موريتانيا', 'العراق', 'سوريا', 'لبنان', 'قطر', 'الإمارات', 'الصومال', 'جزر القمر', 'الكويت', 'سلطنة عُمان', 'الأردن', 'اليمن', 'فلسطين' ], suggestions: [] }, methods: { keyIsUp: function (event) { this.userInput = event.target.value; this.suggestions = this.countries.filter(country => { return country.includes(this.userInput); }) } }, template: ` <div id="app"> <input type='text' v-on:keyup='keyIsUp' /> <ul> <li v-for="suggestion in suggestions" :key="suggestion"> {{ suggestion }} </li> </ul> </div> ` }) يمكنك تجربة هذه الأكواد من هنا أتمنى لك التوفيق.
  3. تنفيذ الأمر التالي قد يحل المشكلة: cd android && ./gradlew clean && ./gradlew :app:bundleRelease إذا كنت داخل المجلد android بالفعل سيكون الأمر كما يلي : cd ./gradlew clean && ./gradlew :app:bundleRelease و لكن إن لم ينجح الأمر فهذا ما عليك القيام: نقوم بتنفيذ أمر البناء و لكن مع إضافة ال option التالي له: --warning-mode=all أو ال option التالي مع أمر البناء الذي قمت باستخدامه كما هو موضح في رسالة الخطأ التي ظهرت لك --warning-mode all أي سيصبح الأمر كما يلي: gradle build --warning-mode=all سيوضح لك هذا الأمر وصف مفصل للمشاكل الموجودة في مشروعك مع روابط ل Gradle docs تحتوي على الخطوات التي يجب عليك اتباعها لإصلاح البناء لديك.
  4. ليس ل yarn علاقة بالأمر. لحل هذه المشكلة يمكنك القيام بالتالي. توجه إلى الملف {project_root}\node_modules\metro-config\src\defaults\blacklist.js فهذا الملف يحتوي على regular expression غير صحيح يحتاج لتعديل. سنحتاج لتعديل ال regular expression الأول في الملف sharedBlacklist من: var sharedBlacklist = [ /node_modules[/\\]react[/\\]dist[/\\].*/, /website\/node_modules\/.*/, /heapCapture\/bundle\.js/, /.*\/__tests__\/.*/ ]; إلى: var sharedBlacklist = [ /node_modules[\/\\]react[\/\\]dist[\/\\].*/, /website\/node_modules\/.*/, /heapCapture\/bundle\.js/, /.*\/__tests__\/.*/ ];
  5. لحفظ التعديلات التي تقوم بها في أدوات المطورين يمكنك استخدام الخطوات التالية، حيث سيتم ربط ملفات المشروع الخاص بك بأدوات المطورين و يتم كتابة التعديلات في ملفات مشروعك بشكل تلقائي: اضغط على كلمة sources في DevTools ثم Filesystem بعد ذلك علامة + سيظهر لك نافذة لاختيار المجلد / الملفات التي تحتوي المشروع قم باختيار الملف و ابدأ بالعمل و سيتم نقل التغييرات في ملفات المشروع
  6. لا ليس من الضروري، هل يمكنك أن تخبرنا برسالة الخطأ التي تظهر لك عن تثبيت المكتبات حتى نتمكن من مساعدتك بشكل أفضل؟؟
  7. مرحبًا حسين لا بأس في هذا، فهذه لا تعتبر مشكلة، يمكنك فتح مجلد المشروع الذي تعمل عليه باستخدام vscode و ستظهر لك أسفل opened editors. لفتح مشروع يمكنك الضغط file من الشريط العلوي ثم open folder ثم اختر مجلد المشروع و اضغط enter
  8. هل يمكنك تجربة تنفيذ هذا الأمر في سطر الأوامر : flutter packages get فقد تكون المشكلة أن ال package لديك تحتاج إلى تحديث. أو ينمنك إعادة تشغيل محرر الأكواد أو android ide التي تعمل عليها لحل هذه المشكلة. أو ربما تكون المشكلة أن نسخة flutter التي قمت بتثبيتها بها أخطاء، لذا يمكنك حذفها و تثبيت نسخة أخرى من الموقع الرسمي ل flutter
  9. حتى تقوم برفع تطبيق على google play ستحتاج لإنشاء حساب مطور و يتم دفع 25$ رسوم تدفع لمرة واحدة فقط و ليس في كل مرة تقوم برفع تطبيق، أمّا على apple store فيتم إنشاء حساب مطور و لكن يتم دفع 99$ رسوم
  10. واجهت نفس المشكلة سابقًا و الحل كان في تغيير ال file format من JavaScript إلى JavaScript React في الشريط الموجود في الأسفل، حتى تقوم بهذا التعديل نقوم بالضغط على كلمة JavaScript الموجودة في الأسفل و سيتم فتح قائمة في الأعلى نختار منها JavaScript React بالإضافة إلى ما سبق بعد الضغط على على كلمة JavaScript الموجودة في الأسفل إذا قمت بالضغط على 'Configure File Association for .js' يمكنك أن تقوم بضبط جميع ملفات ال js. إلى Javascript React
  11. مرحبًا أحمد. دورة علوم الحاسوب المُقدمة من أكاديمية حسوب هدفها هو تدريس أساسيات البرمجة و التعامل مع الحاسوب، و هذا لتمهيد الطريق للأشخاص الذين يتجهوم من مجالات غير تقنية إلى البرمجة أو للمبتدئين في البرمجة بشكل عام و هي تشمل: مدخل إلى علوم الحاسوب: حيث ستتعلم أساسيات البرمجة باستخدام سكراتش ،التفكير المنطقي والخوارزميات و غيرها أساسيات البرمجة: حيث ستتعلم مبادئ البرمجة، لغة JavaScript، العوامل، بنى التحكم، الدوال، المصفوفات، الكائنات، التعامل مع الأخطاء، التعامل مع البيانات أنظمة التشغيل ونظام لينكس: حيث ستتعلم عن سطر الأوامر و أذونات النظام و م غيرها قواعد البيانات: حيث ستتعلم التعامل مع قواعد البيانات العلاقية و ستتعلم SQL و غيرها إلى عالم الويب: حيث ستتعلم عن المتصفحات، صفحات ومواقع الويب، الشبكات، الخوادم، الطلبيات والردود، البيانات في الويب، الأمان في الويب إذًا هذه الدورة تختلف عن هذا المجال
  12. موقع حسوب لا يدعم ال Dark theme حاليًا ولكن بإمكانك القيام ببعض التعديلات على تنسيقات الموقع و الإحتفاظ بهذه الخصائص في متصفحك، من خلال استخدام بعض الإضافات للمتصفح كإضافة CSS and Javascript Injection. يمكنك الاطلاع على هذا السؤال هنا للمزيد.
  13. Flutter هو عبارة عن إطار عمل لبناء تطبيقات هاتف تعمل على ال android و ios معًا أي أننانفوم بكتابة كود واحد و سيعمل على المنصتين و كذلك الأمر مع react native و ionic هي مجرد أسماء تقنيات. ما أرجحه لك الآن هو أن تبدأ بدورة علوم الحاسوب إذا كنت مبتدأ تمامًا، فهي تحتوي جميع الأساسيات التي تحتاجها حتى تتمكن من دراسة الدورة المشار إليها هنا أو من دراسة أي تقنية أخرى، فهذه الدورة تشرح أساسيات اللغات المستخدمة في دورة بناء تطبيقات اهواتف و تشرح التفكير المنطقي و كيفية حل المشكلات و ما إلى ذلك، لذلك فهي الدورة الأنسب لك الآن. أتمنى لك التوفيق
  14. إذا كنت تريد أن تصبح مطور تطبيقات هواتف يمكنك أن تبدأ بتعلم أساسيات البرمجة و مفاهيمها الأساسية، و بعدها يوجد أمامك مسارين يمكنك سلوكهما: Native mobile apps developer: أي بناء تطبيق بلغات native مثل kotlin و swift و هذه التطبيقات تعمل على منصة واحدة فقط إما android أو IOS. فإذا كنت تريد أن تتعلم بناء تطبيقات لل android فعليك بتعلم kotlin و ليس java فقد أصبحت kotlin أشهر و أفضل الآن و أصبحت أغلب الشركات تنتقل من java إلى kotlin. أيضًا kotlin تشبه java في الsyntax بعض الشئ. أما إذا كنت تريد بناء تطبيقات لل IOS فعليك تعلم لغة swift. Hybrid mobile apps developer: أي بناء تطبيقات هجينة و التطبيقات الهجينة هي التطبيقات التي تعمل على المنصتبن android و ios. فإذا كنت تريد بناء تطبيقات هواتف هجينة يمكنك تعلم لغة Dart و إطار العمل Flutter أو لغة javaScript و المكتبة react native أو ionic و cordova حتى تقوم ببناء تطبيقات هجينة باستخدام تقنيات الويب و غيرها. و كل من هذه المكتبات/أطُر العمل ممتاز و يمكنك تعلم أيًا منها كما تحب. أمَا عن دورات الأكاديمية، فحتى تتعلم أساسيات البرمجة يمكنك الالتحاق دورة علوم الحاسوب و هي تشمل: مدخل إلى علوم الحاسوب: حيث ستتعلم أساسيات البرمجة باستخدام سكراتش ،التفكير المنطقي والخوارزميات و غيرها أساسيات البرمجة: حيث ستتعلم مبادئ البرمجة، لغة JavaScript، العوامل، بنى التحكم، الدوال، المصفوفات، الكائنات، التعامل مع الأخطاء، التعامل مع البيانات أنظمة التشغيل ونظام لينكس: حيث ستتعلم عن سطر الأوامر و أذونات النظام و م غيرها قواعد البيانات: حيث ستتعلم التعامل مع قواعد البيانات العلاقية و ستتعلم SQL و غيرها إلى عالم الويب: حيث ستتعلم عن المتصفحات، صفحات ومواقع الويب، الشبكات، الخوادم، الطلبيات والردود، البيانات في الويب، الأمان في الويب أما عن دورات تطبيقات الهواتف فيوجد أمامك خيارين: دورة تطوير تطبيقات الجوال باستخدام تقنيات الويب: حيث ستتعلم عن: أساسيات تطوير تطبيقات الجوال: إعداد بيئة العمل، هيكلية تطبيقات كوردوفا، الواجهات، الإضافات، التعامل مع خدمات الويب و ستقوم ببناء بعض الممشاريع مثل: تطبيق مشاركة وصفات الطعام، و تطوير تطبيق لمطعم و في هذا المشروع ستتعلم عن آيونك 4 و قواعد تصميم التطبيقات و غيرها بالإضافة إلى التطبيق على ما تعلمته سابقًا. و تطبيق جوال لطلاب المدارس و في هذا المشروع ستتعرف على مكتبة React.js و بناء واجهات التطبيق البرمجية API و تطوير تطبيق قائمة مهام و بناء تطبيق لموقع ووردبريس دورة تطوير التطبيقات باستخدام JavaScript في هذه الدورة ستتعلم عن لغة جافاسكريبت و مكتباتها سواءًا كانت تستخدم في بناء الواجهات الأمامية لتطبيقات الويب أو بناء تطبيقات الهواتف أو برمجة ال backend. فمحتوى الدورة كما يلي: • أساسيات لغة JavaScript: أساسيات JavaScript، حلقات التكرار Loops، الدوال Functions، المصفوفات Arrays، الكائنات Objects، الأصناف Classes، التعامل مع الأخطاء والبرمجة غير المتزامنة، التخاطب مع الخادم، تخزين البيانات في المتصفح وجودة الشيفرة • أساسيات React.js"مكتبة تستخدم لبناء الواجهات الأمامية لتطبيقات الويب": الأساسيات، المكونات، الحالات الشرطية والقوائم، تنسيق تطبيقات React، و بعدها سنقوم ببناء تطبيق ويب و هو تطبيق ملاحظات • أساسيات Node.js : الأساسيات، إطار العمل Express، قواعد البيانات، المتحكمات، تطبيق مدونة"تطبيق ويب ستتم برمجة ال frontend الخاصة به باستخدام react.js و سنقوم ببرمجة ال backend باستخدام node.js و express.js" • تطوير تطبيق جوال باستخدام React Native: لمحة عامة عن React Native و Expo، إعداد بيئة العمل، أساسيات React Native، تطبيق عملي: طبيبي "ستقوم ببرمجة ال backend لهذا التطبيق أيضًا"، تطوير الواجهة الخلفية، إنشاء تطبيق الجوال • تطبيق دردشة يشبه WhatsApp: التعريف بـ WebSockets، التعريف بـ Socket.IO، الحماية والتحقق، تطبيق الويب، تطبيق الجوال