عبدالله عبدالرحمن11

يمكنك البحث في جوجل أو Udemy

canvas هو عنصر HTML بحيث يمنحك طريقة سهلة وفعالة لرسم الرسومات بإستخدام JavaScript فبإستخدام JavaScript يمكنك رسم الصورة على ال Canvas ومن ثم رسم أي نص على الCanvas فوق الصورة يمكنك الذهاب الى موقع w3school للتعرف على المزيد من المعلومات

يمكنك إستخدام JavaScript و HTML Canvas لرسم الصورة في ال Canvas ورسم النص على ال Canvas window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function(){ context.drawImage(imageObj, 10, 10); context.font = "20px Calibri"; context.fillText("My TEXT!", 50, 200); }; imageObj.src = "mail-image.jpg"; }; وإضافة زر للتنزيل <canvas id="canvas" height="200"></canvas> <br /> <button id="download">Download</button> وإضافة كود لجعل الزر يقوم بتنزيل الصورة المعدلة const download = document.getElementById('download'); download.addEventListener('click', function(e) { var link = document.createElement('a'); link.download = 'download.png'; link.href = canvas.toDataURL() link.click(); link.delete; }); إذا كنت تريد التعرف على المزيد من التفاصيل بخصوص Canvas فيمكنك الذهاب الى موقع W3school أو MDN والذهاب الى صفحة Canvas

يجب عليك مراجعة الكود لأن المشكلة أنك تقوم بإستدعاء name من questions[index] وهي undefined يعني غير موجودة

هذا ليس خطأ وإنما رقم حالة الاستجابة Status Code ولكل رقم معنى معين فالرقم 304 يشير الى Not Modified يعني ليس هناك جديد في الإستجابة لأنها لازلت كما هي سابقا لذلك إذا أردت أن لا يظهر لك هذا الرقم فيجب أن تكون الإستجابة جديدة وليست مثل سابقتها أما إذا أردت عمل ما يسمى بال Hard Reload في المتصفح فيمكنك الضغط على ctrl + shift + R في كود ال Frontend const getQuestions = () => { axios .get('http://10.0.2.2:3000/questions') .then(res => setQuestions(res.data)) .then(console.log(questions)) .catch(err => console.log(err)); }; useEffect(() => { getQuestions(); }, []); انت تقوم بعمل طلب للحصول على الأسئلة فإذا قمت بعمل طلب لأول مرة فستحصل على الأجوبة وعلى رقم الحالة 200 يعني تم بنجاح وإذا أردت عمل طلب مرة أخرى ولكن الأسئلة لم تتغير أبداً فستحصل على رقم الحالة 304 ويعني أن الإستجابة لم تتغير مازالت مثل سابقتها

كلاهما تقنيات لتطوير تطبيقات مرة لعدة منصات Cross-Platform وهذه مقارنة بينهما React Native يستخدم JavaScript وهي عبارة عن لغة Scripting بينما Flutter يستخدم Dart وهي لغة Compiled مما يعني أنها أسرع من سابقتها React Native لديه وسيط ويسمى Bridge أي الجسر لكن Flutter ليس لديه وسيط لانه يتم ترجمة Compiled الكود الى لغة المعالج مباشرة وهنا يجعله أسرع من سابقتها بإستخدام React Native تستطيع الحصول على واجهة Native بينما في Flutter لاتستطيع لان لديه محرك ++C خاص للواجهات الخاصة به React Native أقدم من Flutter لذى ستجد الكثير من الحلول والمكتبات والمطورين أكثر من Flutter فكما ترى هناك تقارب في المقارنة ويتم الإختيار بناء على حاجات المشروع على سبيل المثال فإذا كنت بالفعل مطور JavaScript و React فبكل سهولة ستختار React Native بينما إذا كنت مطور Dart فعليك بالتأكيد إختيار Flutter

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

متطلبات المهمة أو المشروع هما شيئين رئيسيين فقط الأول هو 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.) هذا الذي لم تفهمه هو ليس متطلب بل عبارة عن مثال لأحد الميزات الموجودة في لوحة التحكم وهي عبارة عن تصدير أو إستيراد بيانات وربط مع أنظمة أخرى بإختصار عن طريق إستخدام API لطلب أو إرسال بيانات معينة 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.

لدى Java العديد من المكتبات لان هذه اللغة قوية وهي ليست ناشئة حديثاً بل تاريخها طويل من أشهر التقنيات وأطر العمل FX و Swing و Spring وهناك الكثير من المكتبات تختلف بإختلاف المجال مثل Retrofit و Moshi و Chuck و Glide و Three Ten و RXJava و Android KTX و Dagger وغيرها الكثير ولايجب عليك تعلمها كلها بل تختار المكتبة المناسبة لتطبيقك أو حل مشكلتك ويمكن إيجاد غيرها في Github خطواتك التالية هي عمل بعض المشاريع الذي تراها تمثل تحدياً لك لكي تكون أكثر إحترافيه وأيضا يجب عليك تعلم قواعد البيانات مثل Oracle أو PostgreSQL أو غيرها اختر واحدة فقط كبداية ومن ثم تعلم كيف تقوم بربطها مع تطبيقك من أهم الأدوات المستخدمة للبرمجة بلغة ال Java مثل IntelliJ Eclipse وايضا لبرمجة الأندرويد فتحتاج لتعلم إستخدام Android Studio وتعلم برمجة تطبيقات الأندرويد

المشكلة هي timeout أي إنتهت المهلة ولم يتم الحصول على رد من الخادم عند طلب GET من هذا المسار api/v1/products/ يجب عليك تجربة الكود في حاسوبك أولا والتأكد من الاتصال بقاعدة البيانات فإذا اشتغل الكود في حاسوبك فلا تقم بأي تغيير التغييرات الذي يجب عليك القيام بها هي المتغيرات لكي يعمل الكود كما في حاسوبك

لا تقم بكتابة python snake.py في الكود الخاص باللعبة، هذا الكود يستخدم لتشغيل اللعبة من موجه الأوامر قم بحذف هذا السطر python snake.py ومن ثم قم بتشغيل الكود بالضغط مرتين عليه بالفأرة مثلما تفتح أي برنامج آخر

في البداية يجب عليك تثبيت هذه الحزمة npm install mysql ومن ثم في تطبيق Nodejs يتم إضافة هذا الكود للإتصال بقاعدة البيانات var mysql = require('mysql'); // إستدعاء الحزمة var con = mysql.createConnection({ // إنشاء إتصال host : 'localhost', // العنوان user : 'me', // إسم المستخدم password : 'secret', // كلمة السر database : 'my_db' // اسم قاعدة البيانات }); con.connect(function(err) { // دالة للتأكد من أن الاتصال تم بنجاح if (err) throw err; console.log("Connected!"); });

GET /favicon.ico 401 المصتفح قام بإرسال طلب للحصول على أيقونة الموقع ولكن لا يوجد والمشكلة ليست هنا بل هي في السطر الذي قبله

عمل مايسمى بال Upgrade ليس جيدا لأنك ستحصل على مجلد windows.old والذي سيحتوي على البرامج السابقة وليس من الصحيح القيام بنقل الملفات يدويا من هذا المجلد الى المجلد الرئيسي لان النظام يعرف أن هذه البرامج مكانها في هذا المجلد وأيضا عند عمل upgrade في بعض الأحيان تظهر مشاكل لذا أفضل طريقة هي عبر عمل تهيئة للقرص C ووضع النسخة الجديدة كما هي، وانا أنصح بهذا بشدة أفضل من عمل upgrade ماقلته سابقاً إذا أردت تثبيت نسخة وندوز جديدة من CD أو فلاش أما إذا أردت تثبيت التحديث فيمكنك التحديث من windows update وسيتم تنزيل التحديث ومن ثم تثبيته تلقائياً من دون خسارة أي شيء وهنا يجب أن تنتبه لأمرين إذا كان التحديث صغير أوبسيط فليس هناك مشكلة أما إذا كان التحديث كبير وجذري وتحديث نسخة وندوز الى نسخة أحدث فهناك إحتمالية ظهور مشاكل لذا يفضل التحديث الى هذه النسخة عبر CD أو فلاش بعمل فورمات كامل للقرص C لكن إذا أردت فقط تجريب النسخة الجديدة فقط فيمكنك تثبيت الوندوز في virtual machine عبر برنامج virtual box أو برنامج VMware بحيث يكون لديك نظام ظاهري وهمي منفصل لتجريب النسخة

أولاً لا تحتاج الى إستيراد bodyParser منفصلاً لأنه أصبح جزء من express لكن المشكلة ليست هنا الكود الأخير في app.js قم بتغييره الى هذا الكود وجرب var port = process.env.PORT || 3000 app.listen(port, function () { console.log(`Express is running on port ${port}`); }); وهذا الكود const api = process.env.API_URL; app.use(`${api}/categories`, categoriesRoutes); app.use(`${api}/products`, productsRoutes); app.use(`${api}/users`, usersRoutes); app.use(`${api}/orders`, ordersRoutes); قم بتغييره الى app.use(`api/categories`, categoriesRoutes); app.use(`api/products`, productsRoutes); app.use(`api/users`, usersRoutes); app.use(`api/orders`, ordersRoutes);

يجب عليك التوضيح أكثر، هل لديك صيدلية وتحتاج قاعدة بيانات لتخزين الأدوية وبناء API خاص؟

إذا تستطيع إرسال الكود لأنه يبدوا أن هناك مشكلة في الكود الخاص بك ليس مضبوط للتوافق مع Heroku

يمكنك تنزيل برنامج everything من هنا وتثبيته في جهازك ومن ثم قم بضبط الإعدادت كما في الصور ومن ثم اضغط على الزر الأيمن على القرص C واضغط على الأيقونة الخاصة ببرنامج everything ومن ثم اضغط على Search ثم اضغط على folders لكي تكون النتائج مجلدات فقط والآن يمكنك الفرز حسب الحجم والإطلاع الكامل على كل المجلدات في القرص C مع أحجامها وتسطيع معرفة ماهو الذي يملئ القرص C بكل سهولة

الشيفرة النهائية للأخ وائل تشتغل من دون أخطاء وهذا هو عمل الكود الخاص بك لهذا يختفي يمكنك تخزين الشيفرة النهائية في ملف وقم بإعطائه أي اسم ومن ثم قم بتشغيل هذا الأمر python snake.py يمكنك استخدام هذا الكود الكامل وأن تقارن الاختلاف الموجود في هذا الكود وفي الكود الخاص بك import curses from curses import KEY_RIGHT, KEY_LEFT, KEY_UP, KEY_DOWN from random import randint curses.initscr() win = curses.newwin(20, 60, 0, 0) win.keypad(1) curses.noecho() curses.curs_set(0) sh,sw = win.getmaxyx() win.border(0) win.nodelay(1) key = KEY_RIGHT # Initializing values score = 0 snk_x =sw//4 snk_y =sh//2 snake = [ [snk_y,snk_x], [snk_y,snk_x-1], [snk_y,snk_x-2] ] # Initial snake co-ordinates food = [10,20] # First food co-ordinates win.addch(food[0], food[1], '*') # Prints the food while key != 27: # While Esc key is not pressed win.border(0) win.addstr(0, 2, 'Score : ' + str(score) + ' ') # Printing 'Score' and win.addstr(0, 27, ' SNAKE ') # 'SNAKE' strings win.timeout(150 - (len(snake)//5 + len(snake)//10)%120) # Increases the speed of Snake as its length increases prevKey = key # Previous key pressed event = win.getch() key = key if event == -1 else event if key == ord(' '): # If SPACE BAR is pressed, wait for another key = -1 # one (Pause/Resume) while key != ord(' '): key = win.getch() key = prevKey continue if key not in [KEY_LEFT, KEY_RIGHT, KEY_UP, KEY_DOWN, 27]: # If an invalid key is pressed key = prevKey # Calculates the new coordinates of the head of the snake. NOTE: len(snake) increases. # This is taken care of later at [1]. snake.insert(0, [snake[0][0] + (key == KEY_DOWN and 1) + (key == KEY_UP and -1), snake[0][1] + (key == KEY_LEFT and -1) + (key == KEY_RIGHT and 1)]) # If snake crosses the boundaries, make it enter from the other side if snake[0][0] == 0: snake[0][0] = 18 if snake[0][1] == 0: snake[0][1] = 58 if snake[0][0] == 19: snake[0][0] = 1 if snake[0][1] == 59: snake[0][1] = 1 # Exit if snake crosses the boundaries (Uncomment to enable) #if snake[0][0] == 0 or snake[0][0] == 19 or snake[0][1] == 0 or snake[0][1] == 59: break # If snake runs over itself if snake[0] in snake[1:]: break if snake[0] == food: # When snake eats the food food = [] score += 1 while food == []: food = [randint(1, 18), randint(1, 58)] # Calculating next food's coordinates if food in snake: food = [] win.addch(food[0], food[1], '*') else: last = snake.pop() # [1] If it does not eat the food, length decreases win.addch(last[0], last[1], ' ') win.addch(snake[0][0], snake[0][1], '#') curses.endwin()

أولاً انت بحاجة الى قاعدة بيانات لتخزين المنتجات ووالوصف الخاص بها وأي نوع من البيانات ثانياً انت تحتاج لطريقة للتواصل والتحكم بقاعدة البيانات (بالتأكيد تستطيع إستخدام قاعدة البيانات مباشرةً يدويا عبر واجهة الأوامر الخاصه بها CLI لكن تحتاج الإتصال بها برمجيا) من خلال تطوير برنامج بإستخدام لغة برمجة من اللغات المشهورة مثل nodejs أو php أو python أو غيرها وهذا البرنامج يتم وضعه في الخادم السيرفر وهذا يسمى ببرمجة الخلفية Backend على سيبل المثال لوضع منتجاتك ووصفها في الصفحة بإستخدام ما ذكرته لك بالأعلى لديك عدة طرق منها استخدام JavaScript وإنشاء دالة بإستخدام Ajax للتواصل مع البرنامج الذي في السيرفر الخادم للحصول على البيانات من قاعدة البيانات الخاصة بك استخدام ما يسمى بال Server Side Rendering بحيث البرنامج الذي في الخادم يقوم بإنشاء صفحة الHTML ويضع عليها البيانات أو المنتجات المطلوبة تلقائيا وليس يدويا ويتم إرسالها للمستخدم

في البداية يجب عليك تثبيتها إذا أردت إستخدمها في حاسوبك عبر تنزيلها من هنا وبعد أن تنتهي من تثبيتها تستطيع إستخدام mysql في موجه الأوامر CMD لإستخلام قواعد بيانات MySQL وإذا لم تتعاملي مع قواعد بيانات قبل ولا تعرفي أموار الSQL فعليك أخذ دورة في قواعد البيانات ويمكنك البحث في اليوتيوب بحيث تقومي بكتابة اسم قاعدة البيانات ومن ثم course مثلا مثل mysql course وستجدين الكثير من المصادر لتعلم استخدامها

ايضا يجب عليك تغيير KEY_up و KEY_left الى KEY_UP و KEY_LEFT يجب عليك جعلها كلها حروف كبيرة وإذا ظهرت مشكلة فيمكن أن تكون المشكلة أخرى لهذا قم بإرسال أخر مشكلة ظهرت لك

لربط node بقاعدة بيانات يختلف بإختلاف قاعدة البيانات فإذا أردت على سبيل المثال ربط node مع قاعدة بيانات PostgreSQL فتحتاج الى تثبيت الحزمة pg ومن ثم الإطلاع على التوثيق الخاص بالحزمة لمعرفة كيفية إستخدام هذه الحزمة أو إذا كنت تستخدم قاعدة بيانات Mongo DB فعليك تثبيت الحزمة mongodb وهكذا أما الأمر import cookie from "react-cookies"; فيستخدم لإستيراد cookie من ال module الذي اسمه react-cookies ومن ثم يمكنك إستدعاء cookie واستخدامها

يبدو أنك غير مثبت curses لذلك عليك التثبيت بإستخدام هذا الأمر pip install windows-curses

React هو عبارة عن مكتبة تم بنائها من قبل فيسبوك لبناء الواجهات الكبيرة والمعقدة مبني على قواعد مهمة في التصميم مثل ال Declarative و Component-Based و ال State ف React هو نظام تصميم مبني على القواعد الرئيسية التي ذكرتها ، وهو مخصص لبناء الواجهات وبشكل واسع للمشاريع الكبيرة فبهذا النظام يمكنك بناء واجهات المستخدم لعدة منصات مثلاً للويب بإستخدام React.js للهواتف الذكية بإستخدام React Native وايضا للوندوز والماك بإستخدام React Native for Windows + macOS