Mustafa Suleiman

25 سبتمبر 2023

عليك حذف ملف welcome.conf في المسار التالي:

/etc/httpd/conf.d

ويمكنك تنفيذ الأمر التالي إذا كان لديك وصول لمنفذ الأوامر:

sudo rm -f /etc/httpd/conf.d/welcome.conf

أو تستطيع تعليق الأكواد في الملف لتصبح مثل التالي:

# This configuration file enables the default "Welcome"
# page if there is no default index page present for
# the root URL.  To disable the Welcome page, comment
# out all the lines below.
#
#<LocationMatch "^/+$">
#    Options -Indexes
#    ErrorDocument 403 /error/noindex.html
#</LocationMatch>

الآن عليك إعادة تشغيل سيرفر أباتشي من خلال الأمر التالي:

service httpd reload

25 سبتمبر 2023

استخدم هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback().

الكود سيكون كالتالي:

import { useEffect, useState, useCallback } from 'react';
import { Col, Row } from 'react-bootstrap';
import moment from 'moment';

function Test() {
  const [today, setToday] = useState({});

  const getToday = useCallback(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    console.log(getToday);
    setToday(getToday);
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{today?.date}</Col>
      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>
        <h2>{today?.time}</h2>
      </Col>
    </Row>
  );
}

export default Test;

25 سبتمبر 2023

صحيح، يمكنك تجاهل الجزء الخاص بالواجهة الأمامية في حال قررت التخصص في الواجهة الخلفية فقط، أي تنفيذ الجزء الخاص بالواجهة الخلفية من كل مشروع واستخدام الكود الخاص بالواجهة الأمامية من مستودع المشروع في حال أردت إنشاء مشروع Full-Stack.

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

أي تخصص الـ "باك إند" في تطوير الويب يعني أنك ستركز على تطوير الجزء الخادم (Server-Side) من التطبيقات والمواقع، مما يعني أنك لن تتعامل بشكل مباشر مع الجزء العميل (Client-Side) الذي يتعامل مع التفاعل مع المستخدم في المتصفح.

ومن المفترض أن يتواجد مطور واجهة أمامية في الفريق معه لإنشاء المشروع سويًا.

لكن أنت حاليًا بمفردك، لذلك تستطيع الإكتفاء بالواجهة الخلفية فقط وإختبار الخادم من خلال أداة مثل Postman أو من خلال واجهة مستخدم بسيطة واستخدام مكتبات مثل Bootstrap أو Chakra UI.

25 سبتمبر 2023

السبب هو أن الدالة useEffect() يتم تنفيذها كل مرة يتم فيها تحديث حالة المكون today، وحيث أن الدالة useEffect() تحدد حالة المكون today ، فإن ذلك يؤدي إلى حلقة لا نهاية لها من التحديثات.

عليك القيام بالتالي:

إضافة حالة المكون today إلى مصفوفة الاعتماديات dependencies الخاصة بالدالة useEffect() من أجل منع تنفيذ الدالة useEffect() كلما تم تحديث حالة المكون today.
استخدام هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback().

import { useEffect, useState, useCallback } from 'react';
import { Col, Row } from 'react-bootstrap';
import moment from 'moment';

function Test() {
  const [today, setToday] = useState({});

  const getToday = useCallback(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    setToday(getToday);
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{today?.date}</Col>
      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>
        <h2>{today?.time}</h2>
      </Col>
    </Row>
  );
}

export default Test;

25 سبتمبر 2023

مكتبة Laravel pennant هي مكتبة جيدة لإنشاء أنظمة الموافقة والمراجعة، وهي مناسبة لتطبيقك حيث يوجد مستخدمين يقومون بإضافة محتوى جديد، ثم يقوم مستخدم آخر بالموافقة عليه قبل نشره على الموقع.

وأولاً تحتاج إلى تثبيت المكتبة عن طريق الأمر التالي:

composer require laravel/pennant

ثم نشر الإعدادات وملفات التهجير عن طريق الأمر التالي:

php artisan vendor:publish --provider="Laravel\Pennant\PennantServiceProvider"

ثم عليك تنفيذ الأمر:

php artisan migrate

ولإنشاء علامة بنانت جديدة، استخدم دالة create() في نموذج Pennant، وكمثال لإنشاء علامة بنانت للموافقة على محتوى جديد، استخدم الكود التالي:

use App\Models\Content;
use App\Models\User;
use Laravel\Pennant\Models\Pennant;

class ContentForm extends Form
{
    public function buildForm()
    {
        $this
            ->add('title', TextType::class)
            ->add('body', TextareaType::class)
            ->add('author', UserType::class)
            ->add('submit', SubmitType::class);
    }

    public function handleSubmit()
    {
        $content = Content::create($this->getData());

        $pennant = Pennant::create([
            'content_id' => $content->id,
            'status' => 'pending',
        ]);

        return redirect()->route('contents.index');
    }
}

يتم إنشاء علامة بنانت جديدة مع حالة "معلقة" وتحتوي العلامة البنانت على معرف المحتوى الذي سيتم الموافقة عليه.

لمراجعة العلامة البنانت، استخدم دالة review() في نموذج Pennant، ومثلاً لمراجعة علامة بنانت للموافقة على محتوى جديد، سيكون الكود كالتالي:

use App\Models\Content;
use App\Models\User;
use Laravel\Pennant\Models\Pennant;

class ContentController extends Controller
{
    public function approve(Pennant $pennant)
    {
        $pennant->review();

        $content = Content::find($pennant->content_id);
        $content->publish();

        return redirect()->route('contents.index');
    }
}

وستجد هنا شرح وافي في المستند الرسمي:

https://laravel.com/docs/10.x/pennant

25 سبتمبر 2023

في حال أنك لم تقم بتسليم الملفات المصدرية وتمضينها ضمن داخل محادثة المشروع، أي قمت بتسليم العميل الملفات خارج الموقع على واتساب مثلاً، عليك برفع الملفات داخل محادثة المشروع، وأيضًا تضمين أية محادثات خارجية من خلال عمل Screenshots وتضمينها داخل المحادثة من خلال إضافة مثل FireShot على المتصفح ثم تصوير كامل المحادثة capture entire page من خلال نسخة المتصفح لواتساب مثلاً.

ستجد هنا شرح مفصل:

25 سبتمبر 2023

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

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

24 سبتمبر 2023

هل يمكنك تجربة الكود مرة أخرى؟

وما هو الكود الذي تستخدمه؟

24 سبتمبر 2023

يمكنك معرفة ما إذا تم تحميل التطبيق بالفعل من متجر Google Play من خلال إضافة معلمة إضافية إلى الرابط مثل معرف المستخدم أو أي معرف آخر فريد.

مثل التالي:

https://play.google.com/store/apps/details?id=com.example.myapp&user_id=1234567890

24 سبتمبر 2023

بتاريخ منذ ساعة مضت قال Hamza Waleed2:

هل بهذه الطريقة سيتم ترجمة محتوى content في هذا المثال

ام سيترجم اسم الحقل فقط؟

سيتم ترجمة محتوى الحقل "content" أيضًا.

والطريقة تتمثل في استخدام نموذج "ModelTranslation" لترجمة النماذج في Django.

وفي المثال، يتم ترجمة اسم الحقل "content" فقط ولكن باستطاعتك ترجمة محتوى الحقل أيضًا عن طريق إضافة ترجمة لقيمة الحقل كالتالي:

# models.py

class MyModel(models.Model):
    name = models.CharField(max_length=255)
    content = models.TextField()

    class Meta:
        translations = {
            'content': {
                'en': 'content in English',
                'ar': 'محتوى باللغة العربية',
            },
        }

والنتيجة هي ترجمة محتوى الحقل "content" إلى "content in English" باللغة الإنجليزية و "محتوى باللغة العربية" باللغة العربية.

ولإضافة حقول جديدة إلى نموذجك، ما عليك سوى إضافة حقول جديدة إلى نموذجك وإضافة ترجمات لها إلى الملف "models.py".

وهناك طرق أخرى لترجمة المعلومات القادمة من قاعدة البيانات في Django، ولكن تلك الطريقة هي طريقة بسيطة وفعالة.

24 سبتمبر 2023

مشكلة تحذير maximum update depth exceeded تحدث عندما يستدعي المكون setstate أكثر من 100 مرة في دورة حياة واحدة، وذلك عندما يكون المكون مرتبطًا بحدث أو مكون آخر يطلق تغييرات بشكل متكرر.

وأنت تحصل على التحذير لأنك تستدعي setstate في كل مرة يتم فيها استدعاء useEffect، وذلك لأنك تربط useEffect بـ moment() و timings، حيث يتم تحديث moment() بشكل متكرر، مما يؤدي إلى استدعاء useEffect بشكل متكرر.

وكحل بسيط استخدم useCallback لإنشاء دالة ثابتة من moment() و timings، من أجل تقليل عدد المرات التي يتم فيها استدعاء useEffect.

import { useEffect, useState, useCallback } from 'react';
import { Col, Row } from 'react-bootstrap';
import moment from 'moment';

function Test() {
  const [today, setToday] = useState({});

  const memoizedMoment = useCallback(() => moment(), []);
  // const memoizedTimings = useCallback(() => timings, []);

  useEffect(() => {
    const t = memoizedMoment();
    setToday({
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    });
  }, [memoizedMoment]);

  return (
    <Row>
      <Col>{today.date}</Col>
      <Col>{today.time}</Col>
    </Row>
  );
}

export default Test;

24 سبتمبر 2023

1- توزيع الحصص في حالة جلب أحد الشركاء المشروع البرمجي:

50% إلى الشريك الذي جلب المشروع البرمجي، وذلك لمساهمته في جذب العميل وتأمين المشروع.
25% إلى كل شريك من الشركاء الآخرين، وذلك لمساهمتهم في إدارة الشركة وتطويرها.

وبالطبع يمكن تعديل النسبة حسب مساهمة كل شريك في المشروع، وإن كان الشريك الذي جلب المشروع البرمجي قد ساهم أيضًا في تطويره أو تسويقه، فيمكن زيادة حصته إلى 60% أو 70%.

2- توزيع الحصص في حالة عدم امتلاك أحد الشركاء الخبرة بالعمل البرمجي

50% إلى كل شريك من الشركاء الآخرين، وذلك لمساهمتهم في العمل البرمجي والتطوير.
25% إلى الشريك الذي لا يمتلك الخبرة البرمجية، وذلك لمساهمته في إدارة الشركة وتسويقها.

وهناك مساحة لتعديل النسبة حسب مساهمة كل شريك في الشركة، فلو كان الشريك الذي لا يمتلك الخبرة البرمجية قد ساهم أيضًا في إدارة الشركة أو تسويقها، فيمكن زيادة حصته إلى 30% أو 35%.

وهناك نقاط هامة وهي:

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

24 سبتمبر 2023

أرجو إضافة الكود من خلال علامة <> عند كتابة السؤال من أجل مساعدتك بشكل أفضل.

وكمثال على ما تريديه تستطيعي استخدام flexbox كالتالي:

كود HTML مع CSS

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            align-items: center;
            /* لمحاذاة العناصر عمودياً */
        }
        .container img {
            width: 100px;
            /* تعديل حجم الصورة حسب الحاجة */
            
            height: auto;
            /* للحفاظ على تناسب الصورة */
            
            margin-right: 10px;
            /* تعديل المسافة بين الصورة والنص */
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="https://placehold.co/600x400" alt="صورة">
        <p>نص هنا</p>
    </div>
</body>

</html>

https://academy.hsoub.com/programming/css/أمثلة-نموذجية-لاستخدام-flexbox-في-css3-r471/

24 سبتمبر 2023

من خلال الرابط من خلال إضافة معرف فريد إلى الرابط لكل مستخدم سواء كان معرف المستخدم أو أي معرف آخر فريد.

أي إنشاء رابط دعوة على النحو التالي:

https://example.com/download?user_id=1234567890

هنا نستخدم الرابط معرف المستخدم 1234567890، عندما يقوم المستخدم بالنقر فوق الرابط، سيتم تتبع معرف المستخدم الخاص به في سجل التطبيق.

أو بالشكل التالي:

http://example.com/download?invite_code=123456

وباستطاعتك استخدام متغيرات PHP لإنشاء رابط دعوة ديناميكي على النحو التالي:

$user_id = 1234567890;
$link = "https://example.com/download?user_id=$user_id";

وإليك مثال على كيفية تتبع من قام بتحميل التطبيق من خلال الرابط باستخدام PHP:

// حدد معرف المستخدم
$user_id = $_GET['user_id'];

// تحقق مما إذا كان المستخدم موجودًا
$user = User::find($user_id);
if (!$user) {
    // المستخدم غير موجود
    return;
}

// سجل تحميل التطبيق
$app_download = new AppDownload();
$app_download->user_id = $user_id;
$app_download->save();

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

24 سبتمبر 2023

أرجو منك طرح أي أسئلة متعلقة بالدورات أسفل فيديو الدورة.

رسالة الخطأ TemplateDoesNotExist تعني أن Django لا يمكنه العثور على ملف القالب templets.html، للأسباب التالية:

ملف القالب غير موجود.
ملف القالب ليس في دليل تم تكوين Django للبحث عن القوالب فيه.
ملف القالب له الاسم الخطأ.

وتحتاج إلى التأكد من وجود ملف القالب وأنه في دليل تم تكوين Django للبحث عن القوالب فيه، وتستطيع التحقق من إعداد TEMPLATES في ملف settings.py الخاص بك لمعرفة أي الأدلة تم تكوين Django للبحث عن القوالب فيها.

فتحقق للتأكد من وجود ملف القالب templets.html.
إذا وجدت ملف القالب، فتأكد من أنه في دليل تم تكوين Django للبحث عن القوالب فيه.
إذا كان ملف القالب في الدليل الصحيح، فتحقق للتأكد من أنه يحمل الاسم الصحيح.

أيضًا تأكد من أن مجلد القوالب لديك بالاسم الصحيح وهو templates

24 سبتمبر 2023

افتح ملف .htaccess ثم أضف الكود التالي:

RewriteEngine on
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} !^(GB|US|IN)$
RewriteRule (wp-login|xmlrpc).php$ - [F,L]

وعندما يقوم زائر من الدولة المستهدفة بمحاولة الوصول إلى موقعك، سيتم رفض الوصول وستظهر لهم صفحة خطأ 403 Forbidden دون إعادة توجيههم إلى صفحة معينة.

24 سبتمبر 2023

استخدم ملف .htaccess لإرسال إعادة توجيه 301 إلى صفحة فارغة من أجل إعادة توجيه الزوار إلى صفحة فارغة دون عرض صفحة الخطأ التي تم إنشاؤها بواسطة كود المنع.

أضف السطر التالي إلى الملف:

RewriteEngine On
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^US$
RewriteRule ^(.*)$ /404.html [L]

والكود السابق يفترض أنك ترغب في منع زوار من الولايات المتحدة من دخول موقعك، ورمز البلد للولايات المتحدة في قاعدة بيانات GeoIP هو "US". لذلك، يمكنك استخدام هذا الرمز كـ "كود_الدولة_المستهدفة" في القاعدة.

هذا يعني أنه إذا كانت دولة الزائر تابعة للولايات المتحدة (رمز الدولة "US")، سيتم إعادة التوجيه إلى صفحة 404.html بدلاً من عرض الصفحة الرئيسية لموقعك.

والكود التالي لمنع أكثر من دولة:

RewriteEngine On
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^US$ [OR]
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^GB$
RewriteRule ^(.*)$ /404.html [L]

لدينا شرطين (RewriteCond)، أحد الشروط يتحقق إذا كان رمز الدولة هو "US" (ولاية متحدة) والآخر يتحقق إذا كان رمز الدولة هو "GB" (المملكة المتحدة)، وإذا تطابق أي من هذين الشرطين (باستخدام [OR])، سيتم إعادة التوجيه إلى صفحة 404.html.

24 سبتمبر 2023

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

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

برمجة الويب، وتركز هذا التخصص على تطوير مواقع الويب وتطبيقاتها، وبعد إكمال الدورة، ستكون قادرًا على بناء مواقع ويب أساسية ومتقدمة، وتطبيقات ويب تفاعلية من خلال Django وFlask.
الواجهة الخلفية حيث ستكون قادرًا على بناء وصيانة واجهات برمجية API للتفاعل بين مختلف التطبيقات والخدمات عبر الإنترنت، باستخدام إطارات عمل مثل Django أو Flask لبناء منطق الخادم والتفاعل مع قواعد البيانات.
مبرمج تطبيقات سطح المكتب (Desktop App Developer) إذا أردت تطوير تطبيقات سطح المكتب لأنظمة مثل Windows أو macOS أو Linux باستخدام إطارات عمل مخصصة مثل PyQt وTkinter وwxPython.
مجال الذكاء الاصطناعي، ويهتم ذلك المجال بتطوير أنظمة الذكاء الاصطناعي التي يمكنها تعلم واتخاذ القرارات، وستكون قادرًا على استخدام بايثون لبناء نماذج تعلم آلي وأنظمة ذكاء اصطناعي.
مجال علم البيانات وتحليلها في حال كنت مهتمًا بمجال تحليل البيانات وتخزينها وتحويلها، يمكنك تعلم أدوات لمعالجة البيانات مثل Apache Spark وتعلم قواعد البيانات المتقدمة.

24 سبتمبر 2023

عليك أن تسأل السؤال من ناحية أخرى، ما الفائدة من تعلم الرياضيات أثناء تعلم البرمجة؟

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

هل نفس الأمر ينطبق على الواجهة الخلفية Back-End؟ ليس تمامًا، فالأمر يتوقف على نوع المشروع الذي تعمل عليه، فمثلاً لو كنت تعمل على مشروع آلة حاسبك متخصصة في معادلات معينة فبالطبع تحتاج إلى الرياضيات هنا، لكن هناك مشاريع كثيرة لن تحتاج بها تعلم الرياضيات.

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

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

أيضًا بعض الألعاب تتضمن الذكاء الصناعي (AI) للأعداء أو الشخصيات غير اللاعبة، وتستند العديد من تقنيات الذكاء الصناعي إلى الرياضيات مثل الرياضيات التصورية والاحتمالات، وفي تطوير ألعاب ثلاثية الأبعاد (3D)، تكون الرياضيات ضرورية لمعالجة الأبعاد الثلاثة والتلاعب بالأشكال والأجسام الثلاثية الأبعاد.

وعلي أي حال بشكل أساسي عليك تعلم الرياضيات في حال أردت دخول مجال تعلم لآلة وعلم وتحليل البيانات.

وكقاعدة تعلم الأمر عندما تحتاجه فمجال البرمجة واسع جدًا وعليك تحديد ما تريده لكي لا تضيع مجهودك.

24 سبتمبر 2023

ما هو Gulp.js

Gulp.js هو أداة (Task Runner) يستخدم في تطوير الويب،لتنفيذ مهام مثل تجميع وضغط ملفات CSS وJavaScript، وتحسين الصور، وتشغيل اختبارات الوحدات الأوتوماتيكية، وإدارة أنشطة تطوير الويب الأخرى، ويمكن لـ Gulp أن يعمل بشكل مستمر أو يُطلق يدويًا بمجرد الحاجة.، ويعتمد على JavaScript ويتيح للمطورين كتابة مهام مخصصة باستخدام سينتكس سهل الفهم.

وهناك أيضًا أدوات أخرى تُستخدم كـ Task Runners مثل Grunt وnpm scripts في عالم تطوير الويب والبرمجة، وتُسهل تلك الأدوات تنظيم وتنفيذ المهام الروتينية بشكل فعال وآلي، مما يساعد المطورين ومديري النظم على تحسين كفاءة العمل وتوفير الوقت والجهد.

ما هو Pug.js

أما Pug.js هو محرك قوالب HTML مفتوح المصدر مبني على JavaScript. يسهل عملية إنشاء HTML قصير وسهل القراءة وقابل للصيانة، ويدعم Pug.js العديد من الميزات المتقدمة، مثل الوسائط المتعددة المتكاملة، وإدارة الوسائط، وتعليقات التسمية التوضيحية.

وهو ليس مناسبًا لجميع المشاريع، خاصة المشاريع التي تتطلب دعمًا لتقنيات HTML المتقدمة.

مثال بسيط على Pug:

// ملف Pug
html
  head
    title Pug Example
  body
    h1 This is a Pug example
    p This is a simple Pug template that outputs an HTML page with a heading and a paragraph.

والكود السابق سينتج كود HTML التالي:

<html>
  <head>
    <title>Pug Example</title>
  </head>
  <body>
    <h1>This is a Pug example</h1>
    <p>This is a simple Pug template that outputs an HTML page with a heading and a paragraph.</p>
  </body>
</html>

وإليك مثال أكثر تعقيدًا على Pug:

// ملف Pug
html
  head
    title Pug Example
    link(rel='stylesheet', href='style.css')
  body
    .container
      h1 This is a Pug example
      p This is a more complex Pug template that outputs an HTML page with a heading, a paragraph, and a container element with a class of "container".
      ul
        li Item 1
        li Item 2
        li Item 3

والنتيجة هي:

<html>
  <head>
    <title>Pug Example</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>This is a Pug example</h1>
      <p>This is a more complex Pug template that outputs an HTML page with a heading, a paragraph, and a container element with a class of "container".</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </body>
</html>

أهمية Gulp.js و Pug.js في الوقت الحالي

لا يزال Gulp.js و Pug.js مهمين في الوقت الحالي، ولكن هناك أدوات حديثة حاليًا وأكثر شيوعًا وتقدمًا والتي منها:

Webpack هو الأكثر شيوعًا في الوقت الحالي، ويوفر مجموعة واسعة من الميزات، بما في ذلك تجميع ملفات JavaScript و CSS و HTML وإدارة التبعيات.
Parcel سهل الاستخدام يركز على السرعة والسهولة.
Vite المحزم الجديد الذي يهدف إلى تسريع عملية تطوير الويب ويستخدم بكثرة الآن وأنا أفضله عن Webpack.

ولتفهم الأمر بشكل مفصل أرجو منك قراءة التالي:

وGulp.js لم يتم تطويره منذ 2019.

24 سبتمبر 2023

في بايثون، هناك نوعان من الدوال:

الدوال العادية، والتي يتم تعريفها باستخدام الكلمة الأساسية def.
الدوال المجهولة، والتي يتم تعريفها باستخدام الكلمة الأساسية lambda.

الفرق الأساسي بين Lambda و def هو أن Lambda هي دالة مجهولة، أي أنها لا تحتوي على اسم.

أي في lambda نقوم ببناء الدالة كالتالي:

lambda arguments: expression

و عدد العبارات هو عبارة واحدة.

أمثلة على الدوال المجهولة:

# دالة مجهولة تضيف 1 إلى الرقم المدخل
lambda x: x + 1

# دالة مجهولة تتحقق مما إذا كان الرقم الزوجي
lambda x: x % 2 == 0

# دالة مجهولة تطبع الرقم المدخل
lambda x: print(x)

بينما في def نقوم ببناء الدالة كالتالي:

def function_name(arguments): body

بينما هنا عدد العبارات هو أي عدد من العبارات في جسم الدالة.

أمثلة على الدوال العادية:

# دالة عادية تضيف 1 إلى الرقم المدخل
def add_one(x):
    return x + 1

# دالة عادية تتحقق مما إذا كان الرقم الزوجي
def is_even(x):
    return x % 2 == 0

# دالة عادية تطبع الرقم المدخل
def print_number(x):
    print(x)

متى تستخدم Lambda؟

عندما تحتاج إلى دالة بسيطة يتم استخدامها مرة واحدة فقط.
عندما تحتاج إلى دالة يتم استخدامها كتعبير في دالة أخرى، مثل map() أو filter().
عندما تحتاج إلى دالة يتم تمريرها كمعامل إلى دالة أخرى.

تعابير lambda في بايثون

24 سبتمبر 2023

سبب المشكلة هو

fatal error: stddef.h: No such file or directory

والذي يعني أن المُجمِّع لا يستطيع العثور على الملف stddef.h، وذلك الملف هو ملف رأس قياسي لـ C/C++ يحتوي على تعريفات لأنواع أساسية وعلامات، ومن أسباب المشكلة:

المُجمِّع غير مثبت بشكل صحيح.
المُجمِّع غير مثبت في المسار الذي يستخدمه المُجمِّع.
المُجمِّع يستخدم إصدارًا مختلفًا من مكتبة معايير C/C++ عن الإصدار الذي يحتوي على stddef.h.

حاول تحديث وترقية MinGW من خلال الأوامر التالية:

mingw-get update
mingw-get upgrade

وإن كنت تستخدم Cygwin، فتأكد من تثبيت الحزمتين gcc-core و gcc-g++.
أما إن كنت تستخدم MinGW، فتأكد من تثبيت الحزمة mingw32-base.

24 سبتمبر 2023

حاول تحديث pip من خلال الأمر التالي:

python -m pip install --upgrade pip

بعد ذلك تثبيت المكتبة من خلال الأمر التالي:

pip install easyocr

وإذا استمرت المشكلة حاول التالي:

pip install --pre torch -f https://download.pytorch.org/whl/nightly/cpu/torch_nightly.html

أيضًا حاول تحديث بايثون إلى إصدار 3.11 إذا استمرت المشكلة ثم القيام بالأمر السابق مرة أخرى.

24 سبتمبر 2023

هناك طريقتان لمنع دولة معينة من الدخول إلى موقعك:

الطريقة الأولى: استخدام ملف .htaccess

افتح ملف .htaccess الموجود في جذر موقعك باستخدام محرر نصوص.

أضف السطر التالي إلى الملف:

Order Deny,Allow
Deny from [قائمة الدول]

حيث [قائمة الدول] هي قائمة بعناوين IP لدول معينة، مفصولة بفواصل، وتستطيع الحصول على هذه العناوين من مواقع مثل ip2location أو countryipblocks.

ولمنع الوصول من إيران والصين مثلاً عليك إضافة السطر التالي إلى ملف .htaccess:

Order Deny,Allow
Deny from 1.2.3.4/24
Deny from 5.6.7.8/24

الطريقة الثانية: استخدام خدمة حظر الوصول

بإمكانك استخدام خدمة حظر الوصول لمنع دولة معينة من الدخول إلى موقعك حيث هناك العديد من الخدمات المتاحة، مثل Cloudflare و GeoIP2.

احصل على حساب في الخدمة التي تختارها.
اتبع التعليمات الخاصة بإضافة موقعك إلى الخدمة.
حدد الدولة التي تريد منعها من الوصول إلى موقعك.

ومشكلة الايبيهات هي أنها قد لا تعمل من مواقع مثل ip2location أو countryipblocks في ملف .htaccess. وذلك لأن هذه المواقع توفر عناوين IP تقريبية فقط، ومن الأفضل الإعتماد على خدمة حظر الوصول التي توفر عناوين IP دقيقة.

وعليك تفهم التالي:

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

24 سبتمبر 2023

بتاريخ On 19‏/9‏/2023 at 16:14 قال Hamza Waleed2:
ولكني لم افعلها في بداية المشروع فما هي الطريقة لحل المشكله او لإضافة الحقول؟

او دلني على الصفحة التي بها شرح هذا الموضوع في توثيق دجانجو

سؤال اخير في ملف الforms استخدمها بهذا الشكل
from django import forms
from django.contrib.auth.forms import AuthenticationForm


attrs = {'class': 'form-control'}



class UserLoginForm(AuthenticationForm):

    def __init__(self, *args, **kwargs):
        super(UserLoginForm, self).__init__(*args, **kwargs)


    username = forms.CharField(
        label='Username',
        widget=forms.TextInput(attrs=attrs)
    )

    password = forms.CharField(
        label='Password',
        widget=forms.PasswordInput(attrs=attrs)
    )
ام استخدم الmodel الذي أنشأناه؟

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

الطريقة الأولى:

إنشاء نموذج المستخدم واستبدال نموذج المستخدم الافتراضي من Django عن طريق فتح ملف models.py الخاص بتطبيق Django لديك وقم بإنشاء نموذج المستخدم.

ولإنشاء نموذج مستخدم جديد يسمى MyUser مع حقل جديد يسمى profile_picture لصورة الملف الشخصي، عليك إضافة السطر التالي إلى ملف models.py:

class MyUser(AbstractUser):
    profile_picture = models.ImageField(upload_to='profile_pictures', blank=True)

بعد ذلك، يجب عليك إنشاء هجرة جديدة لتحديث قاعدة البيانات. للقيام بذلك، استخدم الأمر التالي:

python manage.py makemigrations

ثم قم بتشغيل الهجرة باستخدام الأمر التالي:

python manage.py migrate

الطريقة الثانية:

تعديل نموذج المستخدم الافتراضي من Django وإضافة الحقول الجديدة من خلال فتح ملف models.py وابحث عن نموذج المستخدم الافتراضي AbstractUser. ثم أضف الحقول الجديدة إلى نموذج المستخدم.

ولإضافة حقل جديد يسمى profile_picture لصورة الملف الشخصي، تستطيع إضافة السطر التالي إلى نموذج المستخدم:

profile_picture = models.ImageField(upload_to='profile_pictures', blank=True)

بعد ذلك، يجب عليك إنشاء هجرة جديدة لتحديث قاعدة البيانات. للقيام بذلك، استخدم الأمر التالي:

python manage.py makemigrations

ثم قم بتشغيل الهجرة باستخدام الأمر التالي:

python manage.py migrate

الطريقة الثالثة:

إنشاء نموذج حقل إضافي وربطه بنموذج المستخدم من خلال التوجه لملف models.py وابحث عن نموذج المستخدم الافتراضي AbstractUser. ثم أضف حقل profile_picture إلى نموذج المستخدم.

ولإضافة حقل جديد يسمى profile_picture لصورة الملف الشخصي، نضيف السطر التالي إلى نموذج المستخدم:

profile_picture = models.OneToOneField(
    'profile.Profile',
    null=True,
    blank=True,
)

ثم قم بإنشاء نموذج جديد يسمى Profile مع حقل image لصورة الملف الشخصي، ولإنشاء نموذج جديد يسمى Profile مع حقل image لصورة الملف الشخصي، عليك إضافة الكود التالي إلى ملف models.py:

class Profile(models.Model):
    image = models.ImageField(upload_to='profile_pictures', blank=True)

    class Meta:
        abstract = True

بعد ذلك، يجب عليك إنشاء هجرة جديدة لتحديث قاعدة البيانات ثم قم بتشغيل أمر التهجير.

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Mustafa Suleiman

ما هو Gulp.js

ما هو Pug.js

والنتيجة هي:

أهمية Gulp.js و Pug.js في الوقت الحالي