Mustafa Suleiman

14 سبتمبر 2023

بتاريخ On 12‏/9‏/2023 at 18:55 قال علي الكاسر:

شكرا اخي هذا المحرر ممتاز ولكن هل يمكن استخدامه داخل form في حق ادخال textarea حيث قد يكون textarea اكثر من حقل واحد

بالتأكيد وإليك الطريقة:

إنشاء div إضافية لكل حقل textarea.
إنشاء كائن Ace Editor لكل حقل textarea داخل div الإضافية.
تحديث قيمة حقل textarea عند تغيير قيمة كائن Ace Editor المقابل.

<form>
  <label for="editor1">Editor 1</label>
  <div id="editor1"></div>
  <textarea name="editor1" style="display: none;"></textarea>

  <label for="editor2">Editor 2</label>
  <div id="editor2"></div>
  <textarea name="editor2" style="display: none;"></textarea>

  <input type="submit" value="Submit">
</form>

كود jQuery:

$(function () {
  const editor1 = ace.edit($('textarea[name="editor1"]'));
  const editor2 = ace.edit($('textarea[name="editor2"]'));

  editor1.getSession().on('change', function () {
    $('textarea[name="editor1"]').val(editor1.getSession().getValue());
  });

  editor2.getSession().on('change', function () {
    $('textarea[name="editor2"]').val(editor2.getSession().getValue());
  });
});

يجب تحديث قيمة حقل textarea عند تغيير قيمة كائن Ace Editor المقابل قبل إرسال النموذج وذلك باستخدام وظيفة .on('change') على كائن Ace Editor.

14 سبتمبر 2023

1- في ملف الإعدادات config/app.php عليك القيام بالتالي:

افتح ملف config/app.php وابحث عن المتغير locale وقم بتغيير قيمة هذا المتغير إلى en لتغيير اللغة إلى الإنجليزية.

// config/app.php

'locale' => 'en',

2- بعد تغيير قيمة المتغير locale، أعد تشغيل الموقع.

3- والآن عليك تغيير اتجاه الموقع:

وسواء كنت تستخدم Bootstrap أم لا، فسيحتاج الموقع إلى تغيير اتجاهه من LTR (من اليسار إلى اليمين) إلى RTL (من اليمين إلى اليسار)، ويمكنك القيام بذلك عن طريق تغيير الخاصية dir في وسم html.

<!DOCTYPE html>
<html lang="en" dir="rtl">

4- إذا قمت بترجمة النصوص في موقعك إلى العربية، فستحتاج إلى إعادة ترجمة تلك النصوص إلى الإنجليزية عن طريق تعديل ملفات الترجمة في المجلد resources/lang.

وهناك بعض الملاحظات:

في حال كنت تعتمد على حزمة mcamara/laravel-localization لإنشاء موقع متعدد اللغات، فستحتاج إلى تغيير قيمة المتغير defaultLocale في ملف config/localization.php إلى en.
وإن كنت تستخدم قالب Bootstrap، فيمكنك أيضًا استخدام حزمة rtlcss/bootstrap-rtl لتغيير اتجاه الموقع تلقائيًا.

وإليك مثال على كيفية تغيير لغة موقع لارافيل من العربية إلى الإنجليزية:

// config/app.php

'locale' => 'en',

// resources/lang/en/auth.php

'failed' => 'The credentials you entered do not match our records.',
'password' => 'The password you entered is incorrect.',
'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',

// resources/lang/en/app.php

'welcome' => 'Welcome to our website!',

بعد تغيير تلك القيم، سيتم تغيير لغة الموقع إلى الإنجليزية.

وستجد هنا المزيد من الشرح"

14 سبتمبر 2023

هل تستخدم وورد بريس؟

في تلك الحالة من الأفضل استخدام إضافة مثل Yoast أو All in One SEO ثم ضبط الإعدادات الخاصة بالوصف والشعار وخلافه وسيتم ذلك بكل سهولة.

أما في حال كنت تعمل على تطوير موقع Static أي من خلال HTML, CSS, JS فقط، فعليك بإضافة التالي لملف HTML داخل عنصر head.

<!DOCTYPE html>
<html lang="ar">
<head>
  <title>عنوان موقعك</title>
  <meta name="description" content="وصف موقعك">
  <link rel="icon" href="logo.png">
</head>
<body>
  ...
</body>
</html>

عنصر <title>: يحدد عنوان الصفحة، وسوف يظهر في نتائج البحث.
عنصر <meta name="description" content="...">: يحدد وصف الصفحة، وسوف يظهر في نتائج البحث.
عنصر <link rel="icon" href="...">: يحدد رابط إلى ملف الشعار الخاص بك.

دروس ومقالات عن SEO

14 سبتمبر 2023

تستطيع ذلك من خلال الإعتماد على مكتبة مثل openpyxl وإليك مثال:

import openpyxl

# افتح ملف Excel
wb = openpyxl.load_workbook("C:/data/dtset.xlsx")

# احصل على ورقة العمل الأولى
ws = wb.active

# احصل على العمود الأول
col1 = ws["A"]

# استخراج أول 5 أرقام من كل خلية
for cell in col1:
    # تأكد من أن الخلية تحتوي على أرقام فقط
    if cell.value.isnumeric():
        # استخراج أول 5 أرقام
        first_five = cell.value[:5]
        # اطبع النتيجة
        print(first_five)

# احفظ التغييرات في ملف جديد
wb.save("C:/data/new.xlsx")

والكود يعمل على إنشاء ملف Excel جديد يحتوي على ثلاثة أعمدة جديدة:

العمود الأول: يحتوي على أول 5 أرقام من كل خلية في العمود الأول من الملف الأصلي.
العمود الثاني: يحتوي على الأرقام من 5 إلى 10 من كل خلية في العمود الأول من الملف الأصلي.
العمود الثالث: يحتوي على آخر 5 أرقام من كل خلية في العمود الأول من الملف الأصلي.

وإليك شرح الكود:

import openpyxl: يعمل على استيراد مكتبة openpyxl، والتي ستستخدمها لفتح ومعالجة ملف Excel.
wb = openpyxl.load_workbook("C:/data/dtset.xlsx"): فتح ملف Excel الموجود في المسار المحدد.
ws = wb.active: الحصول على ورقة العمل النشطة في الملف المفتوح.
col1 = ws["A"]: الحصول على العمود الأول في ورقة العمل النشطة.
for cell in col1: إنشاء حلقة for تتكرر على كل خلية في العمود الأول.
if cell.value.isnumeric():: عبارة الشرطية للتحقق مما إذا كانت الخلية تحتوي على أرقام فقط.
first_five = cell.value[:5]: استخراج أول 5 أرقام من الخلية.
print(first_five): طباعة النتيجة.
wb.save("C:/data/new.xlsx"): حفظ التغييرات في ملف جديد.

12 سبتمبر 2023

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

12 سبتمبر 2023

بتاريخ 35 دقائق مضت قال Anas Orfaly:

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

لما اضغط عليها تصير كذا

يعني في قائمة تطلع لي هل هذي معمولة في css ولا js؟
وكيف الاقي ملف ال js المكتوب عن طريق مصمم الصفحة؟ ملف ال css لقيته عن طريق style الموجود في ال inspect لكن ملف ال js ما عرفت اطلعه

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

12 سبتمبر 2023

بتاريخ On 11‏/9‏/2023 at 10:59 قال Anas Orfaly:

صح ضبطت الحركة لكن الان في كل مرة اروح للصفحة الرئيسية للموقع يرجعني للصفحة الي قبلها

قمت بتجربة تصفح الكود الخاص بالموقع وظهرت نفس المشكلة، وعند الضغط على الزر الخاص بتعطيل الـ breakpoints تم حل المشكلة وقمت بإعادة تحميل الصفحة وظهر الكود بشكل سليم:

وأية أخطاء تظهر لك في الكونسول هي تابعة للإعلانات وتم حجبها من خلال المتصفح.

حاول تجربة الأمر مرة أخرى أو من خلال متصفح آخر لآنه لا يوجد مشكلة في تفقد الكود من خلال جوجل كروم.

12 سبتمبر 2023

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

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

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

بعد ذلك يوجد على الفيسبوك مجموعة باسم Gelo Dropshipping School قم بالاشتراك بها وستجد مجموعة من المنشورات المثبتة وبها دليل يوضح لك الأمر.

وأيضًا عليك تعلم الـ Media Buying

وبخصوص المجالات فقد تم توضيح ذلك هنا:

12 سبتمبر 2023

Django REST framework (DRF) هو إطار عمل ويب مفتوح المصدر يستند إلى Django يسمح لك بإنشاء واجهات برمجة تطبيقات RESTful.

وRESTful API هي واجهة برمجة تطبيقات تتبع معايير REST (Representational State Transfer)K ,تحدد REST مجموعة من المبادئ التي يجب اتباعها عند إنشاء واجهات برمجة تطبيقات ويب.

يوفر DRF مجموعة من الميزات التي تجعل من السهل إنشاء واجهات برمجة تطبيقات RESTful ، بما في ذلك:

Serializers: وتسهل Serializers تحويل البيانات بين نموذج Django وتنسيقات البيانات المختلفة (مثل JSON و XML).
Views: توفر وظائف أساسية مثل الإنشاء والقراءة والتحديث والحذف للعناصر في نموذج Django.
Routers: تسهل إدارة URL الخاصة بواجهة برمجة التطبيقات.
Authentication: يوفر DRF ميزات المصادقة المختلفة ، بما في ذلك OAuth 2.0 و Basic Authentication.
Filtering: ميزات تصفية البيانات لواجهتك البرمجية للتطبيق.
Pagination: ميزات تقسيم الصفحات لواجهتك البرمجية للتطبيق.

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

الفرق الرئيسي بين Django و DRF هو أن Django هو إطار عمل ويب كامل ، بينما DRF هو إطار عمل متخصص في إنشاء واجهات برمجة تطبيقات RESTful.

وإذا كنت ترغب في إنشاء واجهة برمجة تطبيقات RESTful ، فإن DRF هو الخيار الأفض، وإن كنت ترغب في إنشاء تطبيق ويب كامل ، فإن Django هو الخيار الأفضل.

وبعض من الأسباب التي تجعلك ترغب في استخدام Django REST framework:

مفتوح المصدر وقابل للتخصيص.
سهل الاستخدام وسهل التعلم.
لديه مجتمع كبير ونشط.
لديه دعم ممتاز للوثائق.
متوافق مع Django.

12 سبتمبر 2023

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

مكتبة prism توفر لك تلوين الأكواد أي عمل Highlighting وليس توفير موقع لتحرير الأكواد، أي سيتعين عليك التخصيص وبناء الموقع وفقًا لما تراه مناسبًا.

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

وإذا أردت الأسهل فعليك استخدام Ace Editor حيث يمكنك تضمين المكتبة مباشرًة واستخدام المحرر من خلال نسخة جاهزة كالتالي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ACE Code Lens demo</title>
    <style type="text/css" media="screen">
      body {
        overflow: hidden;
      }

      #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <pre id="editor"></pre>

    <!-- load ace -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ace.js"
      integrity="sha512-4gOhBb0ynE9P/pWgzXZA8AaPsS49vQpZI/AlBpUDKXH+AVZjEq6usVtcbrygkQkM0ztBvCt5AyLPZpN1Fcwnvg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- load ace code_lens extension -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ext-code_lens.min.js"
      integrity="sha512-81QPqjkXeCVN8i0OfBEGy3Ix+IwfmHwQ7D103quJuOs18KwgO6ra7L//1ZBU1LVMelSMweA0cAQSPAhXVa9zYQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      var editor = ace.edit('editor');
      editor.session.setMode('ace/mode/html');

      var commandId = 'describeCodeLens';
      editor.commands.addCommand({
        name: commandId,
        exec: function (editor, args) {
          // services available in `ctx`
          alert('CodeLens command called with arguments ' + args);
        },
      });
      editor.commands.addCommand({
        name: 'clearCodeLenses',
        exec: function (editor, args) {
          editor.setOption('enableCodeLens', false);
          codeLens.clear(editor.session);
        },
      });
      editor.setOption('enableCodeLens', true);

      codeLens.registerCodeLensProvider(editor, {
        provideCodeLenses: function (session, callback) {
          var p = [
            {
              start: { row: 0 },
              command: {
                id: 'clearCodeLenses',
                title: 'Clear all code lenses',
                arguments: [],
              },
            },
          ];
          var l = session.getLength();

          for (var row = 2; row < l; row++) {
            var line = session.getLine(row);
            var endColumn = line.length;

            var m = /[{>]\s*$/.exec(line);
            if (!m) continue;

            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Line ' + (row + 1),
                arguments: ['line', row],
              },
            });

            if (m.index < 10) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              end: {
                row: row,
                column: m.index + 1,
              },
              command: {
                id: commandId,
                title: 'column ' + endColumn,
                arguments: ['column', endColumn],
              },
            });

            if (m.index < 30) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Third Link',
                arguments: ['3', row],
              },
            });
          }
          callback(null, p);
        },
      });

      window.editor = editor;
      window.codeLens = codeLens;
    </script>

    <!-- <script src="./show_own_source.js"></script> -->
  </body>
</html>

12 سبتمبر 2023

ما المقصود بمتغيرات أكواد بايثون وما البرنامج الذي تريد تنفيذه؟

11 سبتمبر 2023

بتاريخ 7 ساعة قال خالد محمد13:

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

هل كل هاذي المحررات تدعم اللغة العربية ؟

يمكنك استخدام Theme يدعم الكتابة من اليمين لليسار RTL مثل Lavender Theme والذي تستطيع تحميله من الرابط التالي:

https://theme.typora.io/theme/Lavender/

وبعد تحميل الثيم توجه إلى typora ثم من خلال Preference اختر Appearance ثم Open Theme Folder ثم قم بنقل الثيم في المكان الذي سيتم توجيهك إليه.

الآن قم بإعادة تشغيل typora ثم اختر الثيم من خلال تبويب Themes ليتم تفعيله.

11 سبتمبر 2023

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

أيضًأ اختيار لغة البرمجة المناسبة لتطوير الواجهة الخلفية وبعض الخيارات الشائعة تشمل Python مع إطار عمل Django أو Flask، أو Node.js مع إطار عمل مثل Express.js أو لديك لغة PHP وإطار لارافل.

وكمثال على الجداول الخاصة بقاعدة البيانات:

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

وتستطيع استخدام أي نظام إدارة قواعد بيانات (RDBMS) لإنشاء هذه الجداول وتشمل MySQL و PostgreSQL و Microsoft SQL Server.

وأنت بحاجة إلى قراءة التالي لتفهم ما الذي يحدث في الواجهة الخلفية بجانب الواجهة الأمامية للموقع:

11 سبتمبر 2023

يمكن تنبيه المستخدم بواسطة الإشعارات في Node.js باستخدام طرق مختلفة، منها:

Websockets: هي الطريقة الأكثر شيوعًا، حيث تقوم بإنشاء اتصال دائم بين الخادم والمستخدم، مما يتيح لك إرسال الإشعارات إلى المستخدم حتى عندما لا يكون نشطًا في التطبيق.
Push notifications: هي طريقة أخرى شائعة، حيث تقوم بإرسال إشعارات إلى جهاز المستخدم حتى عندما لا يكون التطبيق مفتوحًا.
Server-sent events: هي طريقة أقل شيوعًا، حيث تقوم بنشر أحداث من الخادم إلى المستخدم.

في حالة استخدامك لـ Node.js و MongoDB، فبإمكانك اعتماد أي من تلك الطرق الثلاث لإنشاء إشعارات للمستخدمين.

وإليك مثال لاستخدام WebSockets:

// Create a WebSocket server.
const server = new WebSocketServer({ port: 8080 });

// Handle new connections.
server.on('connection', (connection) => {
  // Subscribe the user to notifications.
  connection.send(JSON.stringify({
    type: 'subscribe',
  }));

  // Listen for notifications from the server.
  connection.on('message', (message) => {
    // Display the notification to the user.
    console.log(message);
  });
});

// Start the server.
server.listen();

قمت بإنشاء WebSocket server يستمع على المنفذ 8080، وعند اتصال المستخدم، نقوم بتسجيله في الإشعارات. ثم، بتلقي الإشعارات من الخادم وعرضها على المستخدم.

وإليك مثال لاستخدام Push notifications:

// Import the WebPush library.
const WebPush = require('web-push');

// Generate VAPID keys.
const vapidKeys = generateVAPIDKeys();

// Register the user for push notifications.
const subscribeURL = new URL('/subscribe', window.location);
subscribeURL.searchParams.set('vapidKey', vapidKeys.publicKey);
subscribeURL.searchParams.set('vapidSecret', vapidKeys.privateKey);

// Subscribe the user.
window.fetch(subscribeURL).then((response) => {
  if (response.ok) {
    // The user has subscribed successfully.
  } else {
    // The user has not subscribed successfully.
  }
});

// Send a push notification to the user.
const notification = {
  title: 'New notification',
  body: 'This is a new notification.',
};

// Send the notification.
WebPush.sendNotification(vapidKeys.publicKey, notification);

نقوم أولاً باستيراد مكتبة WebPush، والتي توفر وظائف لإنشاء وإرسال إشعارات الدفع، ثم إنشاء مفاتيح VAPID، والتي ستستخدمها لإرسال الإشعارات، ثم تسجيل المستخدم للإشعارات باستخدام URL خاص. أخيرًا، نقوم بإرسال إشعار إلى المستخدم.

وهنا مثال آخر لاستخدام Server-sent events:

// Create a server-sent event stream.
const stream = new EventSource('/events');

// Handle new events.
stream.on('message', (event) => {
  // Display the event to the user.
  console.log(event);
});

// Start the stream.
stream.start();

يتم إنشاء server-sent event stream من URL، ثم تلقي أحداث من الخادم وعرضها على المستخدم.

11 سبتمبر 2023

لأنك تستخدم Powershell والأمر الخاص بالحذف مختلف هنا وهو:

 Remove-Item -Recurse -Force -Path ".git"

أو بإمكانك استخدام الأمر التالي في أي منفذ أوامر:

git rm -r -f .git

11 سبتمبر 2023

بتاريخ 31 دقائق مضت قال علي الكاسر:

لم يشتغل اخي

من المفترض أن يعمل معك في حال قمت بإتباع الخطوات في النقاش الذي أرفقته.

وعلي أي حال إليك نموذج بسيط قمت بتنفيذه من قبل لشرح النقاش المذكور:

prism-js.rar

11 سبتمبر 2023

الرسالة تخبرك أن المستودع مضاف بالفعل وكل ما عليك هو الرفع push.

ومن الأفضل القيام بالتالي:

أولاً حذف المستودع المحلي من خلال حذف مجلد .git المخفي بالأمر التالي في منفذ الأوامر CMD:

rm -rf .git

بعد ذلك إنشاء المستودع من جديد ورفع المشروع من خلال الأوامر التالية:

git init

// ثم

git add .

// ثم

git commit -m "first commit"

// ثم 

git branch -M main

// ثم

git remote add origin https://github.com/ اسم المستخدم/repoName.git

// ثم

git push -u origin main

11 سبتمبر 2023

أنت تُفكر بالأمر بشكل غير صحيح، عليك بتحديد العائد والهدف من وراء أي شيء تقوم بفعله، هل أنت بحاجة إلى شهادة الثانوية والحصول على درجة مرتفعة لدخول جامعة ذات مستقبل جيد؟

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

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

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

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

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

11 سبتمبر 2023

ما فهمته هو أنك تريدين تثبيت قاعدة بيانات Oracle ورابط التحميل الخاص بها هو التالي:

https://www.oracle.com/eg/database/technologies/oracle-database-software-downloads.html

حيث ستجدي رابط لتحميل Oracle Database 21c XE on Windows وهاهو الرابط مباشرًة:

https://download.oracle.com/otn-pub/otn_software/db-express/OracleXE213_Win64.zip

وعند التحميل سيتعين عليك إنشاء حساب في أوراكل وتسجيل الدخول ثم التحميل.

بعد التحميل عليك فك الضغط عن الملف وستجدي مجلد بعد الإنتهاء من فك الضغط، بداخله يوجد ملف setup.exe قومي بالضغط عليه بزر الفأرة الأيمن ثم اختاري run as administrator.

ثم اختاري next ثم Next وبعد ذلك عليك إختيار use Virtual account.

بعد ذلك سيظهر لك مكان التثبيت وهو c:/App وأسفله يوجد خيار باسم Global database name وبداخله يوجد اسم قاعدة البيانات الإفتراضية وهي orcl وهي الحاوية لقواعد البيانات الأخرى وبإمكانك كتابة باسورد لها إذا أردتي.

وبإمكانك إنشاء قواعد بيانات بداخلها pluggable database.

ثم عليك بالضغط على next ثم install وسيتم التثبيت.

وإذا أردتي شرح بالفيديو عليك بالبحث عن تنصيب اوراكل داتابيز على اليوتيوب.

11 سبتمبر 2023

يمكنك الوصول إلى متغيرات URL في Django باستخدام الطريقة get_queryset() في طريقة العرض.

class ArticleListView(generics.ListView):
    queryset = Article.objects.all()

    def get_queryset(self):
        queryset = super().get_queryset()
        id = self.kwargs['id']
        queryset = queryset.filter(id=id)
        return queryset

سيؤدي ذلك إلى تصفية مجموعة الاستعلام لتشمل فقط المقالة ذات معرف id.

أيضًا تستطيع الوصول إلى متغيرات URL مباشرةً من طريقة العرض الخاصة بك باستخدام الطريقة kwargs().

class ArticleListView(generics.ListView):
    queryset = Article.objects.all()

    def get_queryset(self):
        id = self.kwargs['id']
        return Article.objects.filter(id=id)

11 سبتمبر 2023

أولاً عليك باستيراد الملفات المطلوبة وهي:

prism.js
prism.css
prism-live.css
prism-live.js

ويمكنك استيرادها من خلال الروابط التالية:

  <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css"
    />
    <script src="
    https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js
    "></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

ثم استيراد ملف prism-live.js كالتالي:

    <script src="prism-live.js?load=css,html,javascript"></script>

حيث أن prism-live.js تعتمد على prism.js وتسمح بتلوين الأكواد داخل عنصر <textarea>.

وبعد ذلك عليك بحقن الأكواد من خلال جافاسكريبت في iframe وضع له id وليكن باسم code كالتالي:

 <iframe id="code"></iframe>

وقد شرحت الأمر بالتفصيل في سؤال من قبل عن كيفية إنشاء محرر أكواد بسيط مثل CodePen هنا:

موقع محرر اكواد

11 سبتمبر 2023

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

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

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

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

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

وستجد مقالات ودروس في أكاديمية حسوب لمساعدتك في React:

https://academy.hsoub.com/programming/javascript/react/

أيضًا يوجد موسوعة حسوب:

https://wiki.hsoub.com/React

وسأوضح لك الأمر:

ببساطة، الـ props هي بيانات يتم تمريرها من مكون إلى مكون آخر، ويمكن استخدامها لمشاركة البيانات بين المكونات، أو لإنشاء مكونات قابلة لإعادة الاستخدام.

نقوم تمرير الـ props ككائن إلى المكون، ويمكن الوصول إلى الـ props في المكون باستخدام this.props في حال كنت تعتمد على الـ Class components و props فقط في حال الـ Functional components.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

// استخدام المكون
<MyComponent name="mustafa" />

في Functional Components، يمكنك الوصول إلى الـ props مباشرة كمعامل داخل الدالة.

import React from 'react';

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

// استخدام المكون
<MyComponent name="mohamed" />

11 سبتمبر 2023

في حال أنك تريد أن تكون قاعدة البيانات متاحة من أي مكان في العالم، فيمكنك اختيار 0.0.0.0/0، مما يسمح لجميع عناوين IP بالاتصال بقاعدة البيانات.

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

وتلخيصًا عليك بالتالي:

إذا كانت قاعدة البيانات متاحة للجمهور، فيمكنك اختيار 0.0.0.0/0.
إذا كانت قاعدة البيانات متاحة فقط لمستخدمين محددين، فحدد نطاق عناوين IP أضيق.
إذا كنت تستخدم قاعدة البيانات في بيئة سحابية، فيمكنك استخدام نطاق عناوين IP الخاص بشبكتك السحابية.

وهناك أيضًا VPC Peering أو VPN في حال أنك تستخدم خدمة Virtual Private Cloud (VPC) أو اتصال VPN لربط التطبيق بقاعدة البيانات، فبإمكانك تقييد الوصول إلى قاعدة البيانات فقط من خلال هذه الاتصالات الآمنة مما يوفر أمانًا إضافيًا.

أيضًا هناك Whitelist IPs والتي تتيح لك بإضافة عناوين IP إلى الـ "Whitelist" في إعدادات Atlas، مما يسمح فقط للعناوين المدرجة في الـ "Whitelist" بالوصول إلى قاعدة البيانات.

11 سبتمبر 2023

أولاً وقبل أي شيء السمات المدعومة هي السمات التي تم تحديدها في وثائق HTML الرسمية، وتلك السمات مدعومة من قبل جميع المتصفحات الحديثة.

أما السمات المخصصة هي السمات التي لم يتم تحديدها في وثائق HTML الرسمية، وتلك السمات يتم تخصيصها من خلال جافاسكريبت بناءًا على ما تريده أنت.

بعض الأمثلة على السمات المدعومة:

type
name
value
placeholder
required
autocomplete

بعض الأمثلة على السمات المخصصة:

username-field
improve-input
rm-white-spaces
to-arabic-numbers
to-lower

ويمكنك معرفة السمات المدعومة من خلال موقع MDN أو قم بالبحث عن السمة في جوجل وبجانبها كلمة HTML.

autocomplete="on"

لنفترض أن المستخدم قد قام بتسجيل الدخول إلى الموقع بالفعل، وقام بإدخال اسم المستخدم الخاص به في حقل الادخال، في المرة التالية التي يحاول فيها المستخدم تسجيل الدخول، سيتم عرض اسم المستخدم الخاص به تلقائيًا في حقل الادخال، مما يسهل عليه عملية تسجيل الدخول.

username-field

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

improve-input

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

rm-white-spaces

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

to-arabic-numbers

تُحول تلك السمة الأرقام في قيمة الحقل إلى الأبجدية العربية، فمثلاً إذا قام المستخدم بإدخال "12345" في الحقل، فسيتغير النص إلى "١٢٣٤٥".

to-lower

تعمل السمة على تحويل جميع الحروف في قيمة الحقل إلى أحرف صغيرة، وعند قيام المستخدم بإدخال "THIs my Username" في الحقل، فسيتغير النص إلى "thismyusername".

وإليك مثال للتوضيح:

لنفترض أن لدينا صفحة ويب تحتوي على حقل إدخال اسم مستخدم يُستخدم لتسجيل الدخول إلى الموقع، ونريد أن نجعل حقل الإدخال يُعبأ تلقائيًا بالقيمة السابقة لاسم المستخدم، وأن نزيل المسافات البيضاء من قيمة الحقل، وأن نحول الأرقام إلى الأبجدية العربية، وأن نحول جميع الحروف إلى أحرف صغيرة.

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

<input type="text" name="username" class="login-input name" placeholder="ادخل رمز الكرت هنا" required autocomplete="on" username-field improve-input rm-white-spaces to-arabic-numbers to-lower/>

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

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

11 سبتمبر 2023

بالنسبة للمواقع التي ذكرتها فالأول يعتمد على Drupal وليس ووردبريس، والثاني يعتمد على ووردبريس ويستخدم قالب مخصص.

وبإمكانك أنت البحث عن قوالب خاصة بالـ coupons على المنصات التي توفر قوالب ووردبريس مثل موقع themeforest، وبالبحث عن coupons ستجد النتائج التالية:

https://themeforest.net/category/wordpress?term=coupons

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

والتكلفة تعتمد على المميزات التي تريد توافرها بالموقع والتصميم وخلافه وأيضًا خبرة المبرمج.

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

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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