سامح أشرف

في الواقع، لا يمكنكِ عمل ذلك بدون إذن صاحب الصورة. إذا اختار المالك جعل الصورة متاحة للاستخدام العام، فيجب أن يكون هذا الأمر مكتوب في مكان ما (على سبيل المثال، إذا ذكر أن الصورة تحت رخصة المشاع الإبداعي CC.) فيمكنك إستخدام هذه الصورة مع ذكر مصدرها. يمكن أن يؤدي استخدام مواد محمية بحقوق الطبع والنشر بدون إذن لأغراض تجارية إلى حذف حسابك من على Instagram أو حتى مقاضاتك قضائيًا. وقد تم توضيح هذا الأمر في صفحة حقوق النشر في مركز مساعدة Instagram، بالإضافة إلى ما الذي سيحدث لمن ينتهك هذه الحقوق أيضًا في صفحة شروط الإستخدام. وينطبق هذا الأمر على موقع Pinterest كذلك حيث تم ذكر هذا الأمر في صفحة Copyright على Pinterest. في معظم الأحيان يكون الحصول على إذن من صاحب الصورة بمقابل مادي، ولكن في أحيان أخرى يسمح صاحب الصورة بإستخدامها بدون مشكلة.

لغة CSS ليست لغة برمجة مفتوحة المصدر ولكنهي مجرد قواعد عامة يتم تطبيقها برمجيًا من قِبل كل متصفح بطريقته الخاصة، لذلك قد نجد في بعض الأحيان إختلاف في بعض قواعد CSS في بين بعض المتصفحات، وأيضًا يوجد بعض الخصائص الإضافة التي تعمل أحد المتصفحات دون غيرها مثل الخصائص التي تبدأ بـ -o- أو -moz- أو -webkit- وهذه الخصائص لن تعمل على المتصفحات الأخرى. لغة CSS و كذلك HTML يتم تطويرها من قِبل مؤسسة World Wide Web Consortium (W3C) والتي تضع قواعد هاتان اللغتان ومن ثم يقوم كل متصفح بتطبيق هذه القواعد بطريقته الخاصة من خلال ما يسمح بالمحرك Engine وكل متصفح لديك المحرك الخاص به والذي يعمل على تطويره، فعلى سبيل المثال يستخدم Chrome محرك يسمى Blink بينما firefox يستخدم محرك Gecko ومتصفح internet explorer يستخدم محرك Trident ومتصفح Edge يستخدم EdgeHTML، كما توجد محركات أخرى تستعمل في متصفحات مختلفة، ويمكنك معرفة هذه المحركات من Wikipedia من هنا إن كنتِ تريدين إستخدام خصائص إضافية في CSS فربما سيساعدك إستخدام SCSS أو LESS وهما تقنيتان لإستخدام أمور متقدمة في لغة CSS مثل المتغيرات والدوال والحلقات والشروط في لغة مشابهة لـ CSS ثم تحويلها لقواعد CSS عادية. وهذه المشاريع مفتوحة المصدر ويمكن المساعدة في تطويرها من خلال GitHub تحتوي أكاديمية حسوب على بعض المقالات عن SCSS، يمكنك قرائتها من هنا يمكنك معرفة ما يتم تطويره في CSS من خلال current-work في موقع W3C، ويمكنك الحصول على نسخة من النقاشات التي تتم في هذا الموقع من خلال الإشتراك في القائمة البريدية في أسفل يسار الصفحة، في قسم "JOIN­ING THE DIS­CUS­SION"، كما يمكن المساعدة في هذه النقاشات من خلال GitHub في مستودع csswg-drafts الخاص بهذه المؤسسة.يوجد حاليًا أكثر من 2000 نقاش جارٍ، وأكثر من 200 شخص قد ساهم في هذا المستودع. وعلى سبيل المثال في هذا النقاش يتم تحضير بعض خصائص CSS 4 الأساسية. يجدر بالذكر أن أي خصائص جديدة لن يتم إضافتها إلى CSS الحالية (المستخدمة في المتصفحات)، ولكن يتم إضافتها بشكل رسمي في الإصدار التالي وهو CSS 4 ومن ثم سيقوم كل متصفح بمحاولة تطبيق هذه الخصائص ولذلك تأخذ هذه العملية الكثير من الوقت، لذلك يلجأ الكثير من الأشخاص إلى إستعمال SCSS أو LESS التي تمكنهم من إستخدام ممزايات إضافية لـ CSS ثم تحويل الكود الذي يكتبونه إلى CSS عادية.

لا يمكن للمواقع معرفة إن كان المتصفح مستخدم من قبل Selenium أم لا، والشريط الذي يظهر يتم عرضه للمستخدم فقط لكي لا يتم إستخدام هذه الطريقة في خداع المستخدمين بأن هذا هو المتصفح العادي، حيث يمكن لبعض البرامج الخبيثة أن تقوم بفتح نافذة متصفح من خلال Selenium وتقوم بتشغيل كود JavaScript في هذا المتصفح لسرقة كلمات المرور أو أرقام البطاقات الإتمانية .. إلخ. في الماضي كان يمكنك أن تقوم بتمرير معامل disable-infobars إلى الكائن option على النحو التالي ولن يظهر هذا الشريط من الأساس، ولكن تم إزالة هذه الطريقة في الإصدارات الحديثة لأسباب كما ذكرت سابقًا: from selenium import webdriver from selenium.webdriver.chrome.options import Options options = Options() options.add_argument('start-maximized') options.add_argument('disable-infobars') # بهذه الطريقة سوف يعمل المتصفح بدون الشريط الذي يحتوي على هذه الجملة driver = webdriver.Chrome(chrome_options=options, executable_path=r'C:\path\to\chromedriver.exe') driver.get('https://www.google.com/') على العموم لا يمكن للموقع معرفة إن كان المتصفح يتم التحكم فيه أو لا من خلال هذا الشريط، لذلك لا تقلق من هذه النقطة.

لإستضافة مشروع Next.js في خادم خاص VPS يمكنك إتباع الخطوات التالية: إنشاء خادم خاص من أحد شركات الإستاضفة مثل DigitalOcean أو CloudNode قبل أي شيء، نحتاج إلى إنشاء الخادم وضبطه في السحابة من خلال أحد خدمات شركات الإستضافة، يمكنك أن تشتري أي خادم ويب للتجربة، وسيتم محاسبتك بالساعة (حسب وقت إستعمالك للخادم منذ وقت الشراء)، وقد تتبع شركات إستضافة خطط أخرى غير المحاسبة بالساعة. ضبط اسم المجال Domain أيضًا ستحتاج إلى شراء نطاق / مجال Domain لكي تتمكن من تشغيل مشروعك عبر الإنترنت، حيث أن شركات الإستضافة تمنحك الخادم فقط في أغلب الأحيان، لذلك يجب أن تقوم بشراء نطاق لموقعك بنفسك من خلال أحد شركات الإستضافة مثل namechape أو GoDaddy ..إلخ ، لذلك يجب أن يكون لديك مجال يشير إلى خادم الويب الذي تم إنشاؤه حديثًا. تثبيت وضبط Nginx الآن أنت بحاجة إلى برنامج لكي يدير الطلبات التي تصل إلى خادم الويب الذي قمنا بإنشائه في السابق، يمكنك تنفيذ الأمر التالي لتثبيت Nginx: sudo apt-get update && sudo apt-get install nginx بعد ذلك يجب أن تقوم بالسماح لـ Nginx بأن يمر من خلال جدار الحماية من خلال الأمر التالي: sudo ufw allow 'Nginx HTTP' الآن يمكنك تشغيل Nginx من خلال الأمر التالي: systemctl status nginx ومن المفترض أن تظهر لك نتيجة كالتالي: ● nginx.service - A high performance web server and a reverse proxy server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: active (running) since Mon 2016-04-18 16:14:00 EDT; 4min 2s ago Main PID: 12857 (nginx) CGroup: /system.slice/nginx.service ├─12857 nginx: master process /usr/sbin/nginx -g daemon on; master_process on └─12858 nginx: worker process لاحظ كلمة active في السطر الثالث، وهذا يعني أن Nginx يعمل الآن بدون مشكلة، يمكنك أن تزور عنوان الخادم من خلال المتصفح وستجد صفحة Welcome to Nginx، كما في الصورة: قم بتثبيت Node.js لنشر مشروع مبني بإستخدام Next.js (أو أي مشروع آخر مبني بإستخدام JavaScript) ستحتاج إلى تثبيت Node.js وكذلك NPM ، ويمكنك تثبيتهما من خلال الأوامر التالية: curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs أيضًا توجد الكثير من الحزم التي تعتمد على حزمة build-essential والتالي نحتاج إلى تثبيتها من خلال الأمر التالي: apt-get install -y build-essential الآن يمكنك التأكد من أن كل من Node.js و NPM قد تم تثبيتهما بشكل سليم من خلال الأمر التالي: node --version npm --version وسيظهر لك إصدار كل منهما. انشر تطبيق Next.js الآن نحتاج إلى إرسال الكود إلى الخادم لكي يمكنه العمل، لذلك يمكنك أن تقوم برفع الكود إلى مستودع repo على GitHub إن لم تقم بهذا من قبل (أو يمكنك أن تستعمل بروتوكول FTP ولكن خطوات تثبيته كثيرة كما أنه بطيء للغاية مقارنة بـ GitHub)، ويمكنك تحميل الكود إلى الخادم من خلال الأمر التالي: git clone https://github.com/your_github_username/your_repository_name.git website سيقوم الأمر التالي بتحميل الكود الخاص بك من GitHub إلى الخادم ، وسيضعه في مجلد باسم website، الآن يجب تثبيت الحزم الخاصة بالمشروع عبر الأوامر التالية: cd website npm install npm run dev إن ظهر لك نص كالتالي، فأن كل شيء يعمل على ما يرام: ready - started server on http://localhost:3000 الآن يمكنك الخروج من الأمر الأخير من خلال الضغط على Ctrl + C، ثم تنفيذ الأمر التالي، لإنتاج الكود النهائي للمشروع: npm run build ستلاحظ أنه تم إنشاء مجلد باسم /.next، والآن ستحتاج إلى حزمة pm2 لكي تتأكد من أن التطبيق يعمل طوال الوقت بدون إنقطاع، ويمكنك تثبيت هذه الحزمة عبر الأمر: sudo npm install -g pm2 ثم يجب تشغيل المشروع من خلالها عبر الأمر التالي: pm2 start --name=website npm -- start قم بضبط Nginx كـ reverse proxy كل المتبقي الآن هو إتاحة الموقع للتشغيل عبر إنترنت cd /etc/nginx/sites-available sudo touch example.com sudo nano example.com بعد ذلك يمكنك إضافة الكود التالي لكي يتم تحويل الطلبات من الإنترنت إلى المنفذ 3000، server { listen 80; listen [::]:80; root /var/www/html; index index.html index.htm index.nginx-debian.html; server_name example.com www.example.com; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } تأكد من تغير example.com و www.example.com إلى نطاق الموقع الصحيح بعد ذلك ستحتاج إلى تشغيل الملف example.com السابق هذا إلى Nginx عبر الأوامر التالية: sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl restart nginx بهذا الشكل يمكنك زيارة الموقع الخاص بك من خلال متصفح الويب عبر زيارة نطاق الموقع بشكل مباشر (سواء بإستخدام www أو بدونها).

كل الدورات الموجوة في الأكاديمية تعلمك البرمجة، ولكن قبل تعلم البرمجة يجب تحديد هدف من تعلم البرمجة أولًا، هل تريد عمل تطبيقات للهواتف الذكية، أم تريد إنشاء مواقع ويب تفاعلية وكبيرة، ربما تريد عمل ألعاب ثلاثية الأبعاد، أو قد تريد إنشاء برامج سطح المكتب، لذلك يجب تحديد ما تريد فعله أولًا عند تعلم البرمجة، لكي لا تصاب بالتشتيت والضياع بين العشرات من لغات البرمجة والتقنيات المختلفة، بعد أن تحدد ما تريد فعله يمكنك أن تبحث عن دورة شاملة تقوم بتعليم ما تريده، وعلى العموم ستجد أن أغلب المجالات والتقنيات تحتاج إلى حد أدنى من المعرفة البرمجية، مثلًا كيف يعمل الحاسوب أو ما هي المتغيرات والدوال والكائنات .. إلخ. وقد قامت أكاديمية حسوب بشرح كل الأساسيات في دورة علوم الحاسوب والتي تقوم بشرح أساسيات الحاسوب وعلومه والتفكير المنطقي وما هي الخوارزميات، ثم ستقوم بتطبيق هذه الأساسيات من خلال عمل برامج وألعاب بسيطة باستخدام بيئة سكراتش Scratch التفاعلية. بعد ذلك سوف تنطلق في تعلم أول لغة برمجة لك وهي JavaScript والتي سيتم من خلالها تعلم المزيد من الأمور البرمجة وكيفية إنشاء برامج واقعية وعملية، كذلك سوف تتعلم أساسيات أنظمة التشغيل المختلفة (مثل ويندوز و Linux) وكيفية التعامل معها، بعد ذلك ستنتقل لتعلم قواعد البيانات وأنواعها، و كيفية عمل صفحات ويب بسيطة وكيف تعمل الشبكات والخوادم من الأساس. وبعد كل هذه الأمور ستتعلم لغة برمجة أخرى وهي بايثون وستعرف لماذا يوجد أكثر من لغة برمجة وستتعلم أمور برمجية متقدمة أكثر مثل الخوارزميات المتقدمة وهياكل البيانات. ملاحظة: عند الإشتراك في أحد الدورات يتم فتح المسار الأول من كل دورة وبالتالي يمكنك أن تتعرف أكثر عن كل دورة ومعرفة محتواياتها وما ستتعمله في النهاية أيضًا. بعد تعلم الأساسيات ستحتاج إلى تحديد ما تريد التخصص به كما ذكرت سابقًا وأنصح بهذه المقالة التي تعطي نبذة عن كل مجال وما هي متطلباته وما ستحتاج إليه لكي تبدأ في العمل في هذا المجال: لمعرفة المزيد عن دورات حسوب الأخرى يمكنك أن تنظر هذه الإجابة: أو يمكنك أن تزور صفحة الدورات من هنا.

يمكنك أن تقوم بالإشتراك بالدورة مجانًا لمدة 7 أيام (فترة تجريبية)، او يمكنك أن تقوم بالتقديم إلى الدورة من خلال المساعدات المالية Financial aid، من خلال الضغط على كلمة "Financial aid available" بجانب زر Enroll for Free ثم ملئ البيانات وسيتم الرد على هذا الطلب خلال 15 يوم من تاريخ التسجيل. إن كنت لا تريد الإنتظار فيمكنك أن تقوم بمحاولة دراسة محتويات الشهادة بنفسك من خلال البحث عن كل موضوع يتم تدريسه خلال الدروس، تستطيع معرفة محتويات الشهادة عبر قسم "WHAT YOU WILL LEARN" في كل صفحة course على حدى من هنا (يوجد 7 دورات كل منها تحتوي على نفس القسم).

إن كنت تستخدم حزمة next-i18next، فسيظهر لك هذا الخطأ عندما تقوم اللغة الإفتراضية defaultLanguage غير موجودة ضمن اللغات التي يدعمها المشروع، فعلى سبيل المثال في الكود التالي اللغة الإفتراضية هي ar: // i18n.js const NextI18Next = require('next-i18next').default module.exports = new NextI18Next({ defaultLanguage: 'ar', otherLanguages: ['tr',"en","ru"], // .... }) فيجب أن يحتوي المشروع على ملف common.js ضمن ملف باسم ar كالتالي: public/static/locales/ar/common.json يظهر هذا الخطأ في مرحلة الإنتاج production فقط.

يجب التأكد من مسار الصورة الصحيح، حيث يجب أن تكون صورة محلية local ضمن مشروع next.js أو صورة عامة global ولكن يجب أن يتم إضافة النطاق domain الخاص بالصورة في ملف next.config.js على النحو التالي: module.exports = { reactStrictMode: true, images: { domains: ['image-domain-here.com'], } } يجب أن يتم إضافة النطاق بدون بروتوكول HTTP أو HTTPS. ملاحظة: عند عمل أي تعديل على ملف next.config.js يجب أن يتم إعادة تشغيل الخادم مرة أخرى، وتتم هذه العملية تلقائيًا في النسخ الحديثة من Next.js. وإن لم تعمل معك، فيجب أن تقوم بذلك يدويًا.

لا يوفر WhatsApp أي API مجاني لأنه يحاول الحد من الرسائل المزعجة العشوائي SPAM. ولكن يتم الدفع لكل رسالة بتكلفة تختلف من دولة إلى أخرى (وتختلف من حزمة إلى أخرى)، ويمكنك معرفة أسعار من خلال صفحة "WhatsApp Business API"، وبشكل عام كلما زاد عدد الرسائل التي تقوم بإرسالها شهريًا سيتجد أن سعر الرسالة الواحدة أصبح أقل. فعلى سبيل المثال ستكون تكلفة الرسالة الواحدة في مصر $0.0687 وذلك لأول 250 ألف رسالة، ثم بعد ذلك سيكون سعر الرسالة $0.0672 للرسائل الـ 750 ألف التالية، وهكذا. يمكنك أيضًا أن تستخدم خدمات من شركات أخرى تقوم بتوفير حزم أقل مثل clickatell والتي تبدأ من 1$ شهريًا لـ 10 ألاف رسالة.

UI هي واجهة المستخدم (User Interface)، بينما UX هي تجربة الإستخدام (User Experience)، ولكل منهما العديد من التفاصيل والشروحات والأداوات التي يمكنك إستخدامها، ومصمم واجهة الاستخدام UI/UX Designer لا يقوم بكتابة الأكواد ولكن كتابة الأكواد هي عمل UI/UX Developer، فالمصمم هو من يقوم بعمل مخطط للتصميم ثم يقوم المختص بتحويلها الى كود فعلي. في الوقت الحالي لن تجد الكثير من المحتوى العربي الذي يتخصص في تصميم واجهة الاستخدام UI/UX Design (على الأقل مقارنة بالمحتوى الأجنبي)، يمكنك أن تحصل على دورة مقدمة من Google بخصوص تجربة الإستخدام User Experience وهي دورة مجانية لفترة تجريبية (للحصول على الشهادة يجب أن تقوم بدفع مبلغ مالي) تقوم بدراستها من خلال موقع Coursera، تقدم الدورة شرح للأساسيات مثل wireframing و prototyping مع أسخدام أدوات مثل Adobe X.D و Figma. كما أن أكاديمية حسوب تحتوي على العشرات من المقالات في التصميم بشكل عام وفي تصميم واجهة الاستخدام UI/UX Design بشكل خاص، وأنصحك بأن تبدأ بسلسلة مقدمة إلى UI لتعلم كل ما يخص واجهة المستخدم User Interface، بالإضافة إلى سلسلة مدخل إلى تجربة المستخدم لتعلم تجربة الإستخدام User Experience، وكلٌ من السلسلتين يُعد مدخل ممتاز يحتوي على شرح لكل ما ستحتاج تعلمه للبدأ في العمل في هذا المجال. ستتعلم من خلال دورة جوجل ومن خلال السلستين السابقتين العديد من المصطلحات مثل: User Interviewing - مقابلة المستخدمين Usability Testing - اختبار قابلية الاستخدام Human Computer Interaction - تفاعل الإنسان والحاسوب Strategy Design - تصميم الإستراتيجية وغيرها الكثير. أيضًا سوف تحتاج إلى التدرب على أشهر أدوات التصميم مثل Adobe X.D و Figma فالطبع لن تستطيع عمل تصميم ممتاز حتى وإن كانت لديك معرفة كبيرة بالمجال ما لم يكن لديك معرفة بالأدوات التي سوف تستعملها. عند إنتهائك من تعلم الدروس والأدوات السابقة أنصحك بالإطلاع على المقالات العامة في قسم التصميم لأنك سوف تحصل على معرفة ممتازة بأدوات وأشياء وقواعد لم تكن تعلمها من قبل مما سيؤدي بالنهاية إلى جعل تصاميمك أكثر إحترافية. بعد تعلم ما سبق سوف تجد أن الأمور أصبحت أكثر وضوحًا وستعرف تلقائيًا الخطوة التالية.

بالتأكيد قواعد البيانات مهمة للغاية ولا يوجد تطبيق ويب كامل إلا وستجد أنه يستعمل أحد أنواع قواعد البيانات مثل MySQL أو PostgreSQL أو SQLite .. إلخ، وسوف تتأكد من هذا الأمر عندما تقوم ببناء مشاريع كاملة مثل عمل مدونة أو متجر إلكتروني أو حتى سكريبت إختصار روابط. قواعد البيانات بكل بساطة عبارة عن مجموعة من الجداول يتم فيها تخزين وترتيب البيانات بطريقة معينة في هذه الجداول بحيث يتم جلب وتخزين وتعديل وحذف هذه البيانات من خلال إستخدام لغة SQL. في كثير من الأحيان يجب تخزين بعض البيانات في مكان دائم، حيث أن تخزين هذه البيانات في متغيرات سوف يؤدي إلى حذفها بمجرد إغلاق التطبيق أو إنتهاء الطلب request .. إلخ، لذلك سوف تحتاج إلى الإحتفاظ بهذه البيانات في مكان دائم، وقد تتسأل لماذا لا أستعمل الملفات كوسيلة للتخزين فقط، حيث تقوم بالكاتابة في ملف معين، حيث يمكن عمل ملف لتخزين بيانات المقالات أو المستخدمين أو المنتجات إلخ في ملف معين، ولكن عندما تقوم بهذا الأمر سوف تواجة مشاكل في الأداء حيث لجلب تفاصيل مقالة معينة أو مستخدم معين من ملف كهذا سيتوجد عليك قراءة الملف كاملًا (أو سطر وراء سطر على الأقل)، وهذا الأمر لن يكون عمليًا على الإطلاق وسيكون بطيئًا وسيجعل من عملية ربط البيانات بين بعضها البعض أمرًا صعبًا للغاية. والحل هو إستخدام أي نوع من قواعد البيانات مثل MySQL أو PostgreSQL أو SQLite .. إلخ. لإيضاح الأمر أكثر حاول أن تقوم بعمل مشروع كامل، وهنا بعض الأمثلة: إنشاء مدونة صغيرة عمل متجر إلكتروني تقليد موقع مثل يوتيوب محاولة بناء شبكة إجتماعية بسيطة للغاية بناء لوحة تحكم لأي مشروع صغير عند محاولة تنفيذ أي مثال من الأمثلة السابقة سوف تجد أنه لا مفر من إستخدام قواعد البيانات، وسوف يتحتم عليك تعلمها، لأنه لا يوجد موقع تقريبًا إلا ويستعمل أحد قواعد البيانات، حتى سؤالك هذا (والتعليق الذي تقرأه الآن) يتم تخزينه في قاعدة بيانات ليتم جلبه عند الحاجة (عند عرض هذه الصفحة مثلًا). أيضًا أعتقد أنك تقوم بمقارنة كلمة المرور في سكريبت PHP فطريقة مشابهة للتالي: if ($user_password == '123456789') { // الدخول إلى الموقع } else { echo "كلمة السر غير صحيحة"; } وهذا الأمر ربما يعمل في الوقت الحالي ولكن له عيوب ومخاطر أمنية (حتى وإن قمت بتشفير كلمة المرور من خلال خوارزميات مثل MD5 أو SHA256) ولن يكون مفيدًا إن كان هناك أكثر من مستخدم بأكثر من حساب وكلمة مرور يستخدمون الموقع. ويمكنك تعلم أساسيات قواعد البيانات من خلال هذه المقالة، وهي مدخل ممتاز لفهم ماهيه قواعد البيانات وكيف تعمل: كما يمكنك تعلم لغة SQL (اللغة المستخدمة في التعامل مع قواعد البيانات) من خلال موسوعة حسوب (SQL - موسوعة حسوب). وإن أخترت قواعد بيانات PostgreSQL فيما بعد فأنصحك بالإطلاع على هذا الكتاب (الدليل العملي إلى قواعد بيانات PostgreSQL 1.0.0) والذي سيرشدك في تعلم الأساسيات بالإضافة إلى أمور متقدمة أكثر عن هذا النوع من قواعد البيانات.

يمكنك أن بإنشاء دالة invalidate_cache ويتم إستخدامها عندما يقوم شخص ما بتحديث منشور في المدونة، وتقوم هذه الدالة بإنشاء المفتاح المستخدم في ذاكرة التخزين المؤقت وإستخدام هذا المفتاح في حذف الذاكرة المؤقتة. from django.core.cache import cache from django.http import HttpRequest from django.utils.cache import get_cache_key def invalidate_cache(path=''): request = HttpRequest() request.META = {'SERVER_NAME':'localhost','SERVER_PORT':8000} request.LANGUAGE_CODE = 'en-us' request.path = path try: cache_key = get_cache_key(request) if cache_key : if cache.has_key(cache_key): cache.delete(cache_key) return (True, 'تم حذف الذاكرة بنجاح') else: return (False, 'المفتاح المستخدم غير موجود في ذاكرة التخزين المؤقت') else: raise ValueError('فشل في إنشاء مفتاح ذاكرة التخزين المؤقت') except (ValueError, Exception) as error: return (False, error) ويمكنك إستخدام هذه الدالة على النحو التالي في المكان الذي ترغب به: status, message = invalidate_cache(path='/path/to/blog/route/')

لا يمكنك الوصول إلى مستخدم الطلب مباشرة. تحتاج إلى الوصول إلى كائن الطلب ، ثم إحضار سمة المستخدم. user = self.context['request'].user والطريقة الأكثر أمانًا (لا يظهر خطأ KeyError أو خطأ AttributeError) كالتالي: user = None request = self.context.get("request") if request and hasattr(request, "user"): user = request.user كما يوفر Django-Rest-Framework طريقة أسهل للوصول إلى المستخدم الحالي من خلال إستخدام التابع CurrentUserDefault كالتالي: from rest_framework.fields import CurrentUserDefault class PostSerializer(serializers.ModelSerializer): class Meta: model = Post def save(self): user = CurrentUserDefault() # الحصول على المستخدم الحالي

هذا لأن المفتاح الفعلي للبيانات المؤقتة ليس "posts"، بل هو مفتاح يتم إنشاؤه ديناميكيًا بواسطة جانغو Django باستخدام كلمة posts مع خوارزمية md5، لذلك يوفر جانغو Django التابع make_template_fragment_key لكي تقوم بحذف البيانات المؤقتة. يقبل التابع make_template_fragment_key مدخلين، الأول هو اسم fragment_name هو المفتاح المعطى كاسم لهذه البيانات، وفي هذه الحالة يكون posts، بينما المعامل الثاني هو vary_on وهو قائمة بكل المعطيات التي يتم تمريرها إلى الوسم tag، ولحذف البيانات المؤقتة تقوم بعمل التالي: from django.core.cache import cache from django.core.cache.utils import make_template_fragment_key # cache key for {% cache 5000 posts %} key = make_template_fragment_key('posts') cache.delete(key) وإن كان لديك معطيات للوسم، فيمكنك تمريرها على النحو التالي: # cache key for {% cache 5000 posts data %} key = make_template_fragment_key('posts', [data])

يبدو أن المشروع يعمل بالفعل بشكل سليم، وهو مُجهز ليتم تشغيله من خلال Laravel ، يمكنك تشغيل المشروع من خلال Laravel عبر الخطوات التالية: تشغيل الأمر التالي في مشروع React: npm run build بعد تنفيذ الأمر السابق والإنتهاء منه ستجد أن هناك مجلد جديد ظهر في المشروع باسم build، قم بنسخ كل محتوياته (ماعدا index.html) إلى المجلد public في مشروع Laravel (لا تنسخ المجلد build نفسه بل الملفات والمجلدات التي بداخله فقط) الآن متبقي في المجلد build الملف index.html فقط، قم بنسخ كل محتوى هذا الملف إلى الملف resources\views\welcome.blade.php (يجب حذف محتويات الملف welcome.blade.php القديمة أولًا) الآن تستطيع تشغيل المشروع من خلال الأمر التالي (نفذ الأمر في مشروع Laravel): php artisan serve ملاحظة: عند إجراء أي تعديل على مشروع React يجب إتباع نفس الخطوات مرة أخرى.

يوفر جانغو المعامل validators في الحقل IntegerField حيث يقبل هذا المعامل قائمة من المتحققات (دوال مبنية في جانغو Django يمكنها التحقق من قيمة الحقل قبل تخزينها)، وبالتالي يمكنك إضافة شروط على كل حقل مثل تحديد أقصى قيمة يمكن تخزينها وأدنى قيمة أيضًا، ويمكنك عمل ذلك على النحو التالي: from django.db.models import IntegerField, Model from django.core.validators import MaxValueValidator, MinValueValidator class UserModel(Model): age = IntegerField( default=18, validators=[ MaxValueValidator(100), MinValueValidator(18) ] ) بعد عمل التعديل السابق على الحقل، يجب أن يتم إستدعاء التابع full_clean من النموذج حتى يتمكن جانغو Django من التعرف على هذه التغيرات، مع العلم أن هذا الإستدعاء غير ضروري للنماذج من نوع ModelForm. يوجد أيضًا طريقة أخرى وهي عمل حقل مخصص وتقوم بعد ذلك بكتابة أكواد التحقق validating بنفسك، كما في المثال التالي: from django.db import models class IntegerRangedField(models.IntegerField): def __init__(self, verbose_name=None, name=None, min_value=None, max_value=None, **kwargs): self.min, self.max = min_value, max_value models.IntegerField.__init__(self, verbose_name, name, **kwargs) def formfield(self, **kwargs): defaults = {'min': self.min, 'max':self.max} defaults.update(kwargs) return super(IntegerRangeField, self).formfield(**defaults) لاحظ أن الحقل IntegerRangedField الذي قمنا بعمله يقوم بالوراثة من الحقل IntegerField، بعد ذلك يمكنك أن تستخدم هذا الحقل المخصص على النحو التالي: from django.db.models import Model class UserModel(Model): age = IntegerRangedField(min_value=18, max_value=100) بالطبع يجب أن تقوم بإستدعاء الصنف IntegerRangedField من المكان الذي أنشأته فيه.

يمكن القيام بهذا الأمر في جانغو Django بأكثر من طريقة: يمكنك تمرير اسم النموذج كنص إلى ForeignKey وسوف يعمل كل شيء على ما يرام. class PostModel(models.Model): parent = models.ForeignKey("PostModel") أو يمكنك استخدام طريقة أكثر ديناميكية من خلال تمرير النص "self" فقط، على النحو التالي: class PostModel(models.Model): parent = models.ForeignKey("self") وتسمى العلاقة في هذه الحالة recursive relationship. كما يمكنك تحديد ما الذي سيحدث عن حذف الكائن الأجنبي من خلال تحديد الخاصية on_delete كما في المثال التالي: class PostModel(models.Model): parent = models.ForeignKey("self"), on_delete=models.CASCADE)

كل من Angular و React عبارة عن مكتبة في لغة JavaScript ويستخدم كل منهما في إنشاء واجهة المستخدم من خلال عمل تطبيقات SPA. تحتوي الأكاديمية على دورة تطوير التطبيقات باستخدام لغة JavaScript وهي الدورة الوحيدة التي يتم خلالها شرح React.js هذه الدورة هي دورة عامة يتم خلالها شرح الأساسيات البرمجية بإستخدام لغة JavaScript، ثم شرح تطوير تطبيقات الخادم Backend باستخدام بيئة Node.js وإطار العمل Express.js، ثم تنتقل لأساسيات مكتبة React.js وبناء تطبيق ملاحظات باستخدامها من نوع SPA، ثم ستتعرف على أساسيات مكتبة React Native و Expo لعمل تطبيقات الهاتف الجوال، وستبدأ في تطوير تطبيق جوال للوصل بين الأطباء والمرضى، وبناء بناء تطبيق محادثة يشبه تطبيق WhatsApp، بعد ذلك ستدرس أساسيات إنشاء تطبيقات لسطح المكتب من خلال إطار العمل Electron.js وكيفية إنشاء مشاريع من خلال إطار العمل Next.js، يمكنك معرفة المزيد من التفاصيل من خلال صفحة الدورة من هنا (دورة تطوير التطبيقات باستخدام لغة JavaScript). ولا تحتوي الأكاديمية على دورات بخصوص Angular.js ولكن توجد مقالات مجانية تشرح أساسيات Angular.js، ويمكن قراءة هذه المقالات من هنا (مقالات Angular.js)، ونفس الأمر بالنسبة لـ React.js حيث يوجد عدد أكبر من المقالات يمكن قراءتها من هنا (مقالات React.js)

يمكنك أن تستعمل فئة Meta داخل نموذجك وسيفي ذلك بالغرض: class Post(models.Model): class Meta: verbose_name_plural = "posts" لاحظ أننا نستخدم الأحرف الصغيرة هنا، حيث أن جانغو Django ذكي بما يكفي لكي يستعمل أحرف كبيرة عندما يحتاج إلى ذلك، لذلك لا تقلق بشأن حالة الأحرف هنا. أيضًا لتعديل النموذج في لوحة التحكم فقط، يمكنك أن تقوم بتعديل الملف apps.py، كالتالي: class PostConfig(AppConfig): name = "Post" verbose_name = "Posts"

أفضل طريقة لاختبار مثل هذه الأشياء هي استخراج الوظائف المطلوبة من الأمر نفسه إلى دالة function أو فئة class قائمة بذاتها. يساعد ذلك على التجريد من تنفيذ الأوامر يدويًا وكتابة الاختبار دون متطلبات إضافية. ويمكنك إستدعاء أي أمر من داخل الكود الخاص بك باستخدام التابع call_command كالتالي: from django.core.management import call_command call_command('flush', verbosity=0) call_command('my_command', 'foo') call_command('loaddata', 'test_data', verbosity=0) يستخدم التابع call_command لاستدعاء أمر إدارة management command من داخل الكود، ويقبل مدخل name وهو الأمر الذي تريد تنفيذه، بالإضافة إلى args وهي المعاملات التي يجب إستخدامها مع هذا الأمر الذي تريد تنفيذه، بالإضافة إلى بعض الخيارات options التي تتحكم في طريقة تنفيذ الأمر مثل verbosity. يمكنك أيضًا تخزين نتيجة تنفيذ هذا الأمر من خلال كتابة النتيجة في ملف على النحو التالي: from django.core.management import call_command with open('/path/to/command_output', 'w') as f: call_command('dumpdata', stdout=f) حيث يقبل التابع call_command معامل باسم stdout و stderr ومن خلالهما يمكن تخزين أي نتائج أو أخطاء في ملفات.

يوفر جانغو Django طريقة سهلة للحصول على سجل عشوائي بسطر واحد فقط، كالتالي: Post.objects.order_by('?').first() لكن هذه الطريقة تستهلك الكثير من موارد الخادم وتسبب بطئ في التشغيل، لذلك يمكنك أن تستخدم طريقة أخرى وهي إستخدام التابع choice من الحزمة random، كالتالي: random.choice(Post.objects.all()) هذه الطريقة جيدة في قواعد البيانات الصغير (التي تحتوي على أقل من 100,000 من الصفوف في الجدول). أيضًا يمكنك أن تقوم بعمل نفس الأمر لكن من خلال حساب عدد الكائنات في قاعدة البيانات، على النحو التالي: from random import randint count = Post.objects.all().count() random_index = randint(0, count - 1) random_post = Post.objects.all()[random_index]

تطوير المواقع بشكل عام ينقسم إلى جزئين: واجهة المستخدم Frontend والواجهة الخلفية Backend وتحتوي الأكاديمية على دورات لتعلم كلا الجزئين من الصفر، وهذه الدورات كالتالي: دورة تطوير واجهات المستخدم Frontend: تحتوي هذه الدورة على كل الأساسيات اللازمة للبدء في عمل واجهات المستخدم بأحدث التقنيات، وتبدأ الدورة من شرح أساسيات اللغات المستخدم في تطوير واجهات المستخدم مثل HTML و CSS و JavaScript مع شرح لأشهر المكتبات مثل Bootstrap و jQuery ثم تنتقل لعمل أكثر من مشروع مثل بناء واجهة لموقع يشبه YouTube، وتطوير واجهة استخدام حقيقة لمتجر الكتروني كامل من الصفر، وتطوير موقع لشركة مع مدونة خاصة خطوة بخطوة، وبناء 5 صفحات هبوط مختلفة، وبناء لوحة تحكم لتطبيق ويب، كما ستتعلم كيفية التعامل مع تقنيات أخرى مثل SCSS و Gulp و Git و GitHub وكيفية نشر المشاريع على الإنترنت وغيرها من التقنيات. يمكنك معرفة المزيد من التفاصيل من خلال صفحة الدورة من هنا (دورة تطوير واجهات المستخدم). أما بالنسبة لتطوير الواجهات الخلفية Backend فيوجد ثلاث دورات مختلفة بإستخدام ثلاث لغات، ويمكنك الإشتراك في واحدة منهم فقط لتعلم تطوير الواجهات الخلفية backend، وهم كالتالي: دورة تطوير تطبيقات الويب باستخدام لغة PHP: تستخدم في هذه الدورة لغة PHP وتبدأ الدورة في شرح الأساسيات البرمجية بإستخدام PHP ثم تنتقل لشرح كيفية التخاطب مع الخادم وكيف يتم إرسال الطلبات، ثم يتم عمل تطبيق ويب لإدارة المهام، وشرح أساسيات إطار العمل Laravel، بناء تطبيق إدارة المهام باستخدام إطار العمل Laravel، تطوير واجهة برمجية API بالإعتماد علي نمط RESTful، تطوير موقع إعلانات مبوبة، شبكة اجتماعية تشبه Instagram، تطوير نظام إدارة محتوى CMS كامل من الصفر، وفي النهاية يتم شرح كيفية تطوير قوالب WordPress، يمكنك معرفة المزيد من التفاصيل من خلال صفحة الدورة من هنا (دورة تطوير تطبيقات الويب باستخدام لغة PHP). دورة تطوير التطبيقات باستخدام لغة JavaScript: وهي دورة عامة يتم خلالها شرح الأساسيات البرمجية بإستخدام JavaScript، ثم شرح تطوير تطبيقات الخادم Backend باستخدام بيئة Node.js وإطار العمل Express.js، ثم تنتقل لأساسيات مكتبة React.js وبناء تطبيق ملاحظات باستخدامها من نوع SPA، ثم ستتعرف على أساسيات مكتبة React Native و Expo لعمل تطبيقات الهاتف الجوال، وستبدأ في تطوير تطبيق جوال للوصل بين الأطباء والمرضى، وبناء بناء تطبيق محادثة يشبه تطبيق WhatsApp، بعد ذلك ستدرس أساسيات إنشاء تطبيقات لسطح المكتب من خلال إطار العمل Electron.js وكيفية إنشاء مشاريع من خلال إطار العمل Next.js، يمكنك معرفة المزيد من التفاصيل من خلال صفحة الدورة من هنا (دورة تطوير التطبيقات باستخدام لغة JavaScript). دورة تطوير تطبيقات الويب باستخدام لغة Ruby: تبدأ الدورة في شرح الأساسيات البرمجية بإستخدام Ruby، ستبدأ في عمل مشاريع من خلال بناء لعبة بسيطة باستخدام لغة Ruby، ثم ستنتقل لإنشاء تطبيقات الويب من خلال التعرف على أساسيات إطار العمل Ruby on Rails، وفي النهاية سوف تقوم بالتطبيق من خلال بناء تطبيق إدارة محتوى، وتطوير شبكة إجتماعية تشبه تويتر، يمكنك معرفة المزيد من التفاصيل من خلال صفحة الدورة من هنا (دورة تطوير تطبيقات الويب باستخدام لغة Ruby). لكي تكون مبرمج Full-Stack يجب أن تدرس دورة تطوير الواجهات Frontend وتختار أحد دورات تطوير الواجهات الخلفية Backend.

في الوقت الحالي تقبل الأكاديمية الدفع عبر PayPal أو البطاقات الإئتمانية أو إستخدام كوبون لشحن الحساب أولًا ثم إستخدام الرصيد من الحساب، يمكنك التواصل مع فريق الدعم الفني لمعرفة المزيد عن تفاصيل عملية الدفع وكل الوسائل المتاحية وكيفية إستخدامها. للتواصل مع فريق الدعم الفني يمكنك إستخدام مركز المساعدة الخاص بالأكاديمية من هنا.

لإنشاء عمليات ترحيل أولية لأحد التطبيقات بما في ذلك المجلد migrations، قم بتشغيل الأمر "makemigrations" وحدد اسم التطبيق. سيتم إنشاء مجلد migrations بشكل تلقائي. ./manage.py makemigrations <myapp> كما يجب تضمين تطبيقك في INSTALLED_APPS أولاً داخل الملف settings.py وإلا سوف يؤدي إلى ظهور خطأ بعدم وجود التطبيق من الأساس. تحتاج إلى تحديد اسم التطبيق إذا كان التطبيق لا يحتوي على مجلد migrations. وقد يحدث هذا إذا قمت بإنشاء التطبيق يدويًا، أو قمت بالترقية من إصدار قديم من جانغو Django لا يحتوي على أي ملفات تهجير migrations. إيضًا إذا لم تكن تستخدم الملف models.py وتستخدم مجلد models مخصص للنماذج فيجب أن تقوم بإنشاء الملف init، فعلى سبيل المثال، إن كنت تستخدم الملف my_model.py في المجلد models، فيجب أن تقوم بإنشاء الملف التالي: my_app/models/__init__.py أيضًا يجب أن تستدعي في داخله الملف my_model.py، على النحو التالي: from .my_model import MyModel

لاحظ أن لديك خطأ في كتابة كود JavaScript في عملية تحديد العنصر من خلال الصنف open، حيث أن الكود يجب أن يكون كالتالي: <script> let ahref = document.querySelectorAll('.open'); console.log(ahref[1].classList) </script> لاحظ إستخدام التابع querySelectorAll وليس quer أيضًا يجب إضافة نقطة . قبل كلمة open حيث أننا نقوم بتحديد العناصر من خلال الصنف class ولذلك يجب إضافة . قبل اسم الصنف. ملاحظة: يتم إضافة العلامة # قبل المعرف في حالة إستخدام المعرفات IDs بدلًا من الأصناف. أيضًا كما وضح وائل أن كود جافاسكريبت يتم تنفيذه قبل تحميل عناصر HTML، لذا حتى في حالة كان كود جافاسكريبت يعمل بشكل سليم، فلن يتم إيجاد العنصر .open وذلك لأنه لم يتم تحميله بعد (في وقت تنفيذ كود جافاسكريبت)، ولحل هذه المشكلة يجب نقل الكود إلى أسفل المستند (قبل نهاية جسم الصفحة body)، على النحو التالي: <html> <head> <meta charset="UTF-8" /> <title>Learn JavaScript</title> </head> <body> <a class="open" href="https://google.com">Google</a> <a class="open" href="https://wikipedia.org">wikipedia</a> <a class="not" href="https://facebook.com">Facebook</a> <a class="linked" href="https://wikipedia.org">wikipedia</a> <script> let ahref = document.querySelectorAll('.open'); console.log(ahref[1].classList) </script> </body> </html> أو يمكنك أن تستخدم الحدث onload ليتم تنفيذ الكود عندما يكتمل تحميل الصفحة فقط، كالتالي: <html> <head> <meta charset="UTF-8" /> <title>Learn JavaScript</title> <script> document.onload = function(e){ let ahref = document.querySelectorAll('.open'); console.log(ahref[1].classList) } </script> </head> <body> <a class="open" href="https://google.com">Google</a> <a class="open" href="https://wikipedia.org">wikipedia</a> <a class="not" href="https://facebook.com">Facebook</a> <a class="linked" href="https://wikipedia.org">wikipedia</a> </body> </html> ويمكنك أن تستعين بهذه المقالة لفهم المزيد عن الأحداث وكيف تعمل (فهم الأحداث في جافاسكربت - أكاديمية حسوب)