اذهب إلى المحتوى

سامح أشرف

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    2934

  • تاريخ الانضمام

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

  • عدد الأيام التي تصدر بها

    56

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو سامح أشرف

  1. سامح أشرف
    يمكنك حل هذه المشكلة من خلال إنشاء ملف pages/_document.js مخصص، كالتالي: import Document, { Html, Head, Main, NextScript } from 'next/document'; import React from 'react'; // تنسيقات material-ui import { ServerStyleSheets } from '@material-ui/core/styles'; class MainDocument extends Document { render() { return ( <Html lang="ar"> <body> <Main /> <NextScript /> </body> </Html> ); } } MainDocument.getInitialProps = async (ctx) => { const sheets = new ServerStyleSheets(); const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheets.collect(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, // يتم عرض جزء الأنماط بعد انتهاء عرض التطبيق والصفحة. styles: [ ...React.Children.toArray(initialProps.styles), sheets.getStyleElement(), ], }; }; export default MainDocument; بهذه الطريقة سوف تظهر التنسيقات بشكل سليم عند تحميل الصفحة.
  2. سامح أشرف
    المشكلة في الواقع هي المحمل file-loader ، لأنها ببساطة تنسخ الملف. مع مرور الوقت تحاول الإضافة html-webpack-plugin كتابة الملف index.html، والذي تمت كتابته بالفعل بواسطة المحمل file-loader، مما يؤدي إلى حدوث تعارض. هناك عدة طرق لحل هذه المشكلة. يمكنك استخدام مُحمل html-loader لكود HTML الخاص بك، على الرغم من أنك إذا كنت تتوقع نسخ HTML الذي تم استيراده ببساطة، فهذا ليس الخيار الصحيح. إذا كنت ترغب في الاستمرار في استخدام المحمل file-loader لملفات HTML الأخرى، فيمكنك استبعاد index.html حتى تعود الإضافة html-webpack-plugin إلى المُحمل الافتراضية. يتطلب require.resolve أن يعمل مثل جملة require ولكنه يمنحك المسار الكامل full path للوحدة بدلاً من محتواها. { test: /\.html$/, exclude: [/node_modules/, require.resolve('./index.html')], // لن يتم تحميل هذه الملفات من قبل file-loader use: { loader: 'file-loader', query: { name: '[name].[ext]' }, }, }, الكود السابق سوف يحل المشكة، لكن عندما لا يوجد أي محمل مع القالب، فإن الإضافة html-webpack-plugin تستخدم أداة تحميل ejs كبديل احتياطي. أما إذا لم تكن بحاجة إلى أي محمل لملفات .html، فيمكنك إزالة القاعدة بالكامل وستعمل بشكل جيد.
  3. سامح أشرف
    لا توجد طريقة مباشرة في ES6 لإستيراد جميع الملفات التي لديها صيغة معينة، لكن بدلًا من ذلك يمكنك أن تقوم بإستخدم require.context التي يوفرها Webpack لكي تستطيع إستيراد كل الملفات التي لديها صيغة معينة من مجلد معين، كالتالي: const importImages = (r)=> r.keys().map(r); const images = importImages(require.context('./', false, /\.(png|gif|jpe?g|svg)$/)); يقبل التابع require.context أربع مدخلات الأول إجباري والباقي مدخلات إختياريه، وهم كالتالي: directory: المجلد الذي تريد إستيراد الملفات منه، "./" في المثال السابق تعبر عن المجلد الحالي current directory useSubdirectories: إستيراد الملفات من المجلدات الفرعية أم لا، القيمة الإفتراضية هي True أي أنه سيتم إستيراد جميع الصور من كل المجلدات الفرعية. regExp: عبارة عن regular expression لكي تقوم بإستيراد الملفات التي تنطبق عليها قاعدة regEx هذه، في المثال السابق سوف يتم إستيردا كل الملفات التي لها الصيغة (png أو gif أو jpeg أو jpg أو svg) فقط. mode: القيمة الإفتارضية هي 'sync'، لإستيراد الملفات بشكل متزامن.
  4. سامح أشرف
    أرجو منك التأكد من أن الملف الذي تعملين عليه في محرر الأكواد VS Code مثلًا هو نفس الملف الذي يعمل في المتصفح، لأن في بعض الأحيان يعمل الشخص على ملفات مختلفة ويجد أن النتيجة لا تظهر في المتصفح. الأمر الأخر، في حالة كانت الملفات صحيحة، ويتم حفظها بشكل سليم، فربما يوجد مشكلة في اللمتصفح (بالتحديد في الملفات المؤقتة)، لذلك تجربة متصفح آخر هو أسرع حل إن كانت لديك متصفح آخر بالفعل، أو حذف الملفات المؤقتة من خلال الضغط على Ctrl + Shift + delete في المتصفح، ثم تحديد cookies and other site data و cached image and files والضغط على ok/clear. ثم إعادة تحميل الصفحة مرة أخرى. في حالة لم تعمل اي من الطرق السابقة، فأرجو منك إرفاق كود HTML و CSS كاملًا للتأكد من عدم وجود مشاكل به.
  5. سامح أشرف
    يجب أن تحتوي قائمة ALLOWED_HOSTS على أسم مضيف بشكل صحيح، وليس عناوين url. اترك المنفذ port (8000) والبروتوكول (http). إذا كنت تستخدم 127.0.0.1 ، فقم بإضافة مضيف محلي إلى القائمة كالتالي: ALLOWED_HOSTS = ['127.0.0.1', 'localhost'] يمكنك أيضًا استخدام * لمطابقة أي مضيف: ALLOWED_HOSTS = ['*'] لكن لا تقم بإستخدام هذه الطريقة في مرحلة الإنتتاج production أبدًا لأنها تقوم بتعديل هذه حماية من الأساس، حيث سيتم مطابقة أي مضيف بدون التحقق منه. يرجع سبب الخطأ 400 الذي تحصل عليه إلى ظهور استثناء SuspiciousOperation عندما لا يتطابق اسم المضيف (127.0.0.1) مع أي قيمة من القيم في تلك القائمة.
  6. سامح أشرف
    إذا قمتِ بكتابة كود CSS في ملف خارجي أو حتى في عنصر style فيجب التأكد من أنه لا توجد خصائص أخرى تقوم بتغير خلفية عنصر div، أما في الحالة الثانية (كتابة خصائص CSS بداخل عنصر div) فإن الكود الصحيح هو: <div style="background-color: #080;">Content Here</div> مع العلم أن عنصر div لن يظهر إلا إن تم وضع طول وعرض له أو كان يتحوي على محتوى (نصوص أو صور أو عناصر أخرى)، غير ذلك لن يظهر عنصر div لأن طوله يساوي 0.
  7. سامح أشرف
    يمكنك أن تقوم بهذا الأمر بطريقة سهلة من خلال jQuery ، كالتالي: {{ serviceFormset.creating_form }} <div class="form_set"> {% for f in serviceFormset.forms %} <table class='no_error form'> {{ f.as_table }} </table> {% endfor %} </div> <input type="button" value="Add New Form" id="add"> <script> $('#add').click(function() { addMoreForms('table.form:last', 'service'); }); </script> الكود السابق (في القالب template) يقوم بعرض نموذج جديد عند الضغط على زر Add New Form. ودالة addMoreForms، ستكون كالتالي: function addMoreForms(selector, type) { let newForm = $(selector).clone(true); let totalValue = $('#id_' + type + '-total_forms').val(); newForm.find(':input').each(function() { let name = $(this).attr('name').replace('-' + (totalValue-1) + '-', '-' + totalValue + '-'); let id_ = 'id_' + name; $(this).attr({'name': name, 'id': id_}).val('').removeAttr('checked'); }); newForm.find('label').each(function() { let newFor = $(this).attr('for').replace('-' + (totalValue - 1) + '-', '-' + totalValue + '-'); $(this).attr('for', newFor); }); total++; $('#id_' + type + '-total_forms').val(totalValue); $(selector).after(newForm); } هذه الدالة مفيدة بشكل كبير لأن طريقة إعدادها تسمح لك باستخدامها في جميع أنحاء التطبيق عندما ترغب في عرض المزيد من النماذج في formset.
  8. سامح أشرف
    هذا الخطأ سحدث في قواعد بيانات postgres وينتج عن استعلام خاطيء ومحاولة تشغيل استعلام آخر دون التراجع عن المعاملة أولاً rolling back. (قد تفكر في الأمر على أنه ميزة أمان ، لمنعك من إتلاف بياناتك) لإصلاح ذلك، سترغب في معرفة مكان تنفيذ هذا الاستعلام الخاطيء في الكود. قد يكون من المفيد استخدام خياري log_statement و log_min_error_statement في خادم postgresql، لمعرفة الإستعلامات التي يتم تنفيذها. بعد إصلاح الكود ستحتاج إلى عمل rolling back من خلال الكود التالي: from django.db import transaction, DatabaseError try: a.save() except DatabaseError: transaction.rollback() الكود السابق مساوي لجملة ROLLBACK في SQL، يمكنك معرفة المزيد عن هذا الأمر من خلال موسوعة حسوب من هنا (الأمر ROLLBACK) أيضًا قد يكون سبب الخطأ هو عدم مزامنة قاعدة البيانات، ولحل هذا الأمر يمكنك أن تستخدم الأمر syncdb (والذي يأتي مضمنًا في Django)، كالتالي: python3 manage.py syncdb بعد ذلك يمكنك عمل تهجير للبيانات مرة أخرى للتأكد من إصلاح الخطأ، كالتالي: python3 manage.py migrate
  9. سامح أشرف
    في الأساس الخاصية flex-basis تعني العرض الذي سيأخذه كل عنصر (عرض في حالة flex row و ارتفاع في حالة flex column) ثم، المساحة الفارغة الباقية في الحاوي يتم توزيعها اعتمادا على الخاصية flex-grow حتى يتم تحديد العرض النهائي للعناصر، وبالتالي في حالة عدم وجود عناصر مجاورة (أو كان عرضها يساوي 0) سيتم إستخدام الخاصية flex-basis على أنها قيمة العرض الخاص بالعنصر. فعلى سبيل المثال، في الفيديو الذي قمت بإرفاقه، ستجد أن الأيقونة لها الخاصية flex-basis: 60px أي أن عرضها سيكون 60px ولكن لأن صندوق النص .text يحتوي على نص كبير (محتوى كثير) فسيقوم بأخذ كل المساحة المطلوبة حتى على حساب عرض الأيقونة (في حالة لم يتم وضع الخاصية flex: 1)، لكن لكي لا يحدث هذا الأمر ييجب أن يتم إضافة الخاصية flex: 1 إلى صندوق النص .text لكي يأخذ المساحة المتبقية فقط. وقد تم شرح هذا الأمر في المقالة التي أرفقتها وتحديدًا في قسم (جعل العناصر مرنة). وهنا مثال آخر: <style> .parent { display: flex; width: 471px; background-color: #eee; color: white; font-size: 1.5em; } .red{ background-color: red; height: 100px; flex-basis: 100px; } .blue{ background-color: blue; height: 100px; flex: 1; /* لاحظ وجود الخاصية هنا */ } </style> <div class="parent"> <div class="red">icon</div> <div class="blue">text <br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas eaque blanditiis </div> </div> وسوف تكون نتيجة الكود السابق، كالتالي: لاحظ كيف يختفي المحتوى في الصندوق الأزرق، ذلك لأننا قمنا بإضافة الخاصية flex:1 إليه أي أنه سيأخذ المساحة المتبقية فقط وسيحترم قيمة flex-basis الموجودة في الصندوق الأحمر. بينما إن قمنا بإزالة الخاصية flex:1 ، كالتالي: .blue{ background-color: blue; height: 100px; /* flex: 1; */ } فستكون النتيجة كالتالي: الصندوق الأزرق أخذ كل المساحة المطلوبة ليظهر المحتوى بالكامل، بغض النظر عن قيمة الخاصية flex-basis في الصندوق الأحمر.
  10. سامح أشرف
    تطوير WordPress ينقسم إلى جزئين: تطوير قوالب WordPress تطوير الإضافات Plugins ولتعلم كيفية تطوير أي منهما يجب أن تكون على دراية بالأساسيات البرمجية بشكل عام وبلغة PHP بشكل خاص، لأن WordPress مبني بالكامل بهذه اللغة، كما يجب أن تقوم بتعلم أستخدام WordPress نفسه وتجريب كيفية تركيب الإضافات والقوالب، ثم تقوم بتطوير أول قالب بسيط من بعض الأساسيات مثل إنشاء Header و Footer وصفحة التدوينات .. إلخ، ثم تنتقل إلى عمل قوالب متطورة أكثر ولها لوحة تحكم خاصة، لكي يستطيع المستخدم من تعديل إعدادات القالب والموقع عمومًا أو حتى التواصل مع مطوري القالب من خلالها، ستحتاج بعد ذلك تعلم كيفية عمل optimize لموقع مبني بـ WordPress (الكثير من المواقع تعاني من مشاكل في البطيء بسبب القوالب أو الإضافات المثبتة)، لذلك ستكون هذه نقطة قوة لديك. بعد ذلك سيكون لديك المعرفة والخبرة الكافية للبحث عن المشاكل التي تواجه مستخدمي WordPress وتعلم كيفية حلها، كما إختبار القوالب الإحترافية وتحليلها سيوضح لك الكثير من الأمور التي تريد أن تتعلمها لكي يكون لديك المعرفة لإنشائها من الصفر. ينطبق نفس الأمر على تطوير الإضافات Plugins. إن كنت تسأل عن أي دورة تحتوي على مسار لتعلم WordPressن فتحتوي الأكاديمية على دورة تطوير تطبيقات الويب باستخدام لغة PHP، التي تقوم بالبدء بالأساسيات في البرمجة بإستخدام لغة PHP وكذلك البرمجة الكائنية OOP، ثم تنتقل إلى أساسيات إطار العمل Laravel (أشهر إطار عمل للغة PHP الوقت الحالي)، بعد ذلك تبدأ في التطبيق أكثر والتعمق في Laravel من خلال إنشاء نموذج مصغر لشبكة اجتماعية تشبه انستغرام، وكذلك عمل RESTful API للتطبيقات، وتتعلم بعد ذلك أيضًا تطوير موقع إعلانات مبوبة، وموقع لمشاركة الفيديوهات، بعد ذلك تنتقل لتعلم أساسيات WordPress وكيفية تطوير قوالب مخصصه لـ WordPress. وهذه الدورة الوحيدة التي تحتوي على شرح لنظام إدارة المحتوى WordPress يمكنك معرفة المزيد عن هذه الدورة من خلال هذه الصفحة (دورة تطوير تطبيقات الويب باستخدام لغة PHP). كما تحتوي الأكاديمية على الكثير من المقالات المتعلقة بلغة PHP وWordPress أيضًا، يمكنك الإطلاع عليها من هنا
  11. سامح أشرف
    بداية من الإصدار 1.10 من Django أصبحت is_authenticated عبارة عن خاصية attribute بدلًا من تابع method، ويمكنك أن تستخدمها كالتالي: if request.user.is_authenticated: # افعل شيئًا إذا تمت مصادقة المستخدم ويمكنك أن تستخدمها في القوالب، كالتالي: {% if request.user.is_authenticated %} <p>{{ user }}</p> {% endif %} أما بالنسبة إلى الإصدار 1.9 وما قبله، فيجب أن تقوم بإضافة أقواس الأستدعاء كالتالي: if request.user.is_authenticated(): # افعل شيئًا إذا تمت مصادقة المستخدم
  12. سامح أشرف
    لا يتحوي create-react-app على كل المميزات التي قد تحتاجها في المشروع، فعلى سبيل المثال لا يتحتوي على طريقة إفتراضية لتغير المسارات routes ويجب عليك تثبيت حزم أخرى مثل react-router لكي تقوم بذلك، كما أنه لا يمكنك من توليد صفحات ثابتة static pages بسهولة، ولا يحتوي على ميزة SSR (Server Side Rendering) أو SSG (Static Site Generation) بشكل إفتراضي، مما قد يؤثر على السيو SEO الخاص بالموقع، وغيرها من الممزايات التي تجد نفسك في حاجة إليها في كل مشروع تقريبًا تقوم بعمليه. ولحل مثل هذه المشاكل، ظهرت إطارات عمل مختلفة مبنية على React نفسه، مثل Next.js و Gatsby، ولكل منهما مميزات مختلفة، فعلى سبيل المثال يحتوي إطار العمل Next.js على العديد من المميزات منها: دعم TypeScript: لن تحتاج إلى الكثير من الخطوات لتستطيع أن تستخدم TypeScript في المشروع pre-rendering SSR + SSG : يدعم Next.js ما يسمى Hybrid أي أنه يقوم بتحويل الصفحات الثابتة إلى SSG تلقائيًا والصفحات الأخرى تكون من نوع SSR file-system routing: لن تحتاج إلى تثبيت حزم خارجية لكي تقوم بعمل Route System، فقط قم بتنظيم الملفات بالطريقة التي تريد وستجد أن كل المسارات تعمل بنفس طريقة ترتيب الملفات والمجلدات داخل بعضها البعض. zero config: لا يوجد أي إعدادات تحتاج إن أن تقوم بعملها لكي يعمل المشروع بكفاءة، فقط أكتب الكود وشاهد النتيجة في المتصفح مباشرة. Image Optimization: يمكن لإطار العمل Next.js ضغط وإعادة تحجيم الصور لتقليل حجم النطاق الترددي Bandwidth إلى أقصى حد من خلال عمل مكون Image مخصص. code splitting: يقوم Next.js بتقسيم الكود إلى ملفات صغيرة تسمى chunks ويتم تحميل الكود المطلوب فقط إلى المتصفح، وبالتالي يتم تحميل الصفحات بشكل أسرع وعرض النتيجة في وقت أقل. لذلك أنتقل الكثير من مطوري React.js إلى إستخدام Next.js وGatsby بسبب المميزات التي يقدمها.
  13. سامح أشرف
    الخاصية flex-basis ليست مثل الخاصية width، أي أنها لن تعمل (لن تغير عرض العنصر) إلا إن تم تحديد حجم باقي العناصر التي بجانبها (sibings) وفي هذه الحالة هو العنصر .text ، وبالتالي لن يتم تغير عرض الأيقونة إلا إن تم تحجيم العنصر .text من خلال الخاصية flex-grow: 1 (هي نفسها flex: 1). أنصحك أن تلقي نظرة على هذه المقالات التي تشرح خصائص flexbox من البداية ومع أمثلة عملية:
  14. سامح أشرف
    تستخدم الخاصية flex لكي تُحدِّد كيف سيتمدد أو يتقلص أحد العناصر لكي يملأ المساحة المتوافرة في حاوية flex، وهذه الخاصية تعتبر إختصارًا للخواص: flex-grow: بقيمة 0 flex-shrink: بقيمة 1 flex-basis: بقيمة auto تقبل الخاصية flex قيمةً واحدةً أو قيمتين أو ثلاث قيم. عندما تقوم بتحديد الخاصية flex بقيمة واحدة، يكون وكأنك قمت بتحديد الخصائص الثلاث بالقيم التالية: flex: 1; /* الخاصية السابقة إختصار لكل التالي*/ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; بينما الخاصية flex-basis تقوم بتحديد حجم صندوق محتوى content box الخاص بالعنصر الرئيسي Main Size إلا إذا تم تعديله من خلال الخاصية box-sizing، وبالتالي يظهر حجم الأيقونة بـ 60px. مما سبق، عندما تقوم بتحديد flex: 1، يكون وكأنك قمت بتحديد الخاصة flex-grow: بقيمة 1، وبالتالي يأخذ حجم النص .text 100% من العرض ناقص عرض الأيقونة (60px)، وبدون تحديد الخاصية flex على العنصر .text لن تعمل الخاصية flex-basis على الأيقونة.
  15. سامح أشرف
    لا توجد طريقة "built-in" للقيام بذلك في Django بشكل إفتراضي. سيظهر Django استثناء DoesNotExist في كل مرة. الطريقة الأسهل للتعامل مع هذا في Python هي إستخدام جملة try .. except، كالتالي: try: writers = User.objects.get(role="writer") except User.DoesNotExist: writers = None ما فعلته هوإستخدام نوع الخطأ User.DoesNotExist للتأكد من وجود الكائن، بهذه الطريقة يمكنك معرفة إن لم يوجد أي كتاب writers في الموقع، يمكنك أيضًا أن تستخدم نوع الخطأ ObjectDoesNotExist كالتالي: from django.core.exceptions import ObjectDoesNotExist try: writers = User.objects.get(role="writer") except ObjectDoesNotExist: writers = None وفي حالة كنت تريد أن يتم إحضار أو كائن فقط، فيمكنك أن تستخدم التابع first، كالتالي: User.objects.filter(role="writer").first() في حالة أردت التأكد فقط من وجود الكائن في قاعدة البيانات، فيمكنك أن تستعمل exists، كالتالي: User.objects.filter(role="writer").exists()
  16. سامح أشرف
    أولًا يجب عليك التأكد من أنك قمت بتثبيت html-loader بشكل سليم، يمكنك أن تقوم بتثثبيته من خلال الأمر التالي: npm i html-loader --save-dev كما يجب تعديل ملف webpack.config.js وإضافة الخاصية entry، كالتالي: const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); module.exports = { mode: "development", entry: path.resolve(__dirname, 'src') + '/index.js', module: { rules: [ { test: /\.html$/, exclude: /node_modules/, use: ['html-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/templates/index.html', }) ] } في حالة تشغيل الخادم إستمرار المشكلة فستجد رسالة خطأ في سطر الأوامر، توضح سبب المشكلة، أرجو إرفاقها إن وجدت.
  17. سامح أشرف
    يمكنك أن تقوم بذلك من خلال العلامة < بدلًا من << ليصبح الأمر كالتالي: ./manage.py shell < clear_db.py يمكنك أيضًا أن تقوم بتنفيذ السكريبت من خلال الدالة exec، كالتالي: $ ./manage.py shell ... >>> exec(open("./clear_db.py").read()) وإن كنت تستعمل بايثون 2.7 فيمكنك أن تستخدم الدالة execfile، كالتالي: $ ./manage.py shell ... >>> execfile('clear_db.py') إن كنت تستعمل Windows Powershell فسوف تحتاج إلى إستخدام Get-Content: Get-Content clear_db.py | .\manage.py shell على العموم لا يُنصح بفعل ذلك من shell - وهذا لأنه لا ينبغي لك تنفيذ سكريبتات عشوائية من بيئة Django (ولكن هناك طرقًا للتغلب على ذلك). إذا كان هذا السكريبت سيتم تشغيله عدة مرات، فمن الجيد إعداده كأمر مخصص، كالتالي: ./manage.py clear_db للقيام بذلك، قم بإنشاء ملف باسم clear_db.py في مجلد management، وفي هذا الملف، حدد الأمر المخصص الخاص بك (تأكد من أن اسم الملف هو اسم الأمر الذي تريد التنفيذ منه.): from django.core.management.base import BaseCommand class Command(BaseCommand): def handle(self, **options): # قم بكتابة السكريبت هنا
  18. سامح أشرف
    يمكنك أن تستعمل علامة pipe | مع التابع contains كالتالي: >>> searchfor = ['og', 'at'] >>> df[df.str.contains('|'.join(searchfor))] 0 cat 1 hat 2 bat 3 dog dtype: object أو بدون التابع join كالتالي: >>> searchfor = ['og', 'at'] >>> df[df.str.contains('og|at')] 0 cat 1 hat 2 bat 3 dog dtype: object لكن لاحظ أن النص قد يحتوي على رموز يتم إعتبارها من regex مثل $ و ^ .. إلخ، وبالتالي سوف تؤثر على طريقة البحث، ولحل هذه المشكلة يجب إضافة \\ قبل هذه الرموز، ويمكنك أن تستخدم التابع escape من مكتبة re للقيام بهذه المهمة، كالتالي: >>> import re >>> matches = ['$cat', 'dog^ant'] >>> new_matches = [re.escape(m) for m in matches] >>> new_matches ['\\$cat', 'dog\\^ant'] >>> df = pd.Series(['cat','hat','bat','dog','ant', 'my $cat', 'our dog^ant']) >>> df[df.str.contains('|'.join(new_matches))] 5 my $cat 6 our dog^ant dtype: object
  19. سامح أشرف
    يوفر لك Django إمكانية إستخدام أي خاصية من خلال كتابة التالي: <النموذج>.get_<اسم الخاصية>_display وبالتالي لطباعة القيمة الكاملة للخاصية gender في النموذج User ستكون كالتالي: {{ user.gender}} # M {{ user.get_gender_display }} # Male وفي حالة إستخدام Jinja2 كمحرك القوالب، فيجب أن يتم إضافة قوسين في النهاية ، كالتالي: {{ user.get_gender_display() }}
  20. سامح أشرف
    دورة تطوير واجهات المستخدم، دورة شاملة لكل ما تحتاجه لعمل واجهات مستخدم متنوعة ومميزة، ولإتمام كل مشاريع الدورة، لن تحتاج إلى أي مصادر غير ما يتم شرحه في الدروس، ولكن ليس الهدف الأساسي هو إنهاء الدورة فقط، بل إحتراف تطوير واجهات المستخدم وللوصول إلى هذا الهدف يجب أن تزيد من المعلومات التي لديك، وأفضل مكان لفعل ذلك هو موسوعة حسوب، حيث تحتوي على كل المعلومات التي ستحتاجه أثناء فترة تعلمك للدروس في الدورة، وحتى بعد إنتهائك من الدورة، حيث سوف تعود إليها كل فترة لكي تتعلم أمور جديدة أو أشياء قد نسيتها أو حتى تعلم بعض الأشياء التي لم تغطيها الدورة، وذلك لأن الموسوعة شاملة لأغلب المعلومات لأي تقنية تحتويها. لذلك أنصحك بعد أن تتعلم أي خاصية جديدة أو أي عنصر جديد في الدورة أن تلقي نظرة على شرح هذا العنصر في موسوعة حسوب، لتحصل على معلومات أكثر عنه، ولكي تعتاد أيضًا تصفح الموسوعة، وبالتالي سوف يكون لديك حصيلة معلوماتية شاملة لكل ما تعلمته في الدورة بالإضافة إلى معرفة معلومات وملاحظات إضافية من الموسوعة، وبهذا ستكون قادرًا على إنشاء وتطوير أي واجهة مستخدم مهما كانت صعبة. أيضًا عليك بالتدريب مع نفسك وتجربة كل ما تتعلمه والتطبيق عليه، لأن مجرد مشاهدة الدروس لن يفيد كثيرًا مقارنة مع التطبيق العملي، حيث ستترسخ المعلومات في ذهنك ولن تنساها أبدًا على عكس مشاهدة الدروس فقط دون تطبيق. ملاحظة: يجب أن تقوم بإتمام المشاريع في كل المسارات لأنك ستحتاجها عند خوض الإمتحان، وذلك لأن من شروط بدء إمتحانك في نهاية الدورة هو التطبيق العملي مع المدرب، والاحتفاظ بالمشاريع العملية الناتجة لإرسالها للمراجعة. يمكنك أن تتعرف أكثر حول هذا الأمر من خلال مركز المساعدة من هنا.
  21. سامح أشرف
    لا تحتوي الأكاديمية على دورة مخصصة للغة بايثون فقط، ولكن يوجد دورة علوم الحاسوب والتي تشرح أساسيات لغة بايثون وهياكل البيانات والخوارزميات بإستخدام بايثون، كما تبدأ الدورة أساسيات الحاسوب وعلومه والتفكير المنطقي وما هي الخوارزميات وكيف تفيد في البرمجة، وتنتقل لتعلم Scratch حتى تتمكن من التطبيق على أساسيات التفكير المنطقي، ثم تنتقل لتعلم الأساسيات البرمجية من خلال لغة JavaScript، بالإضافة إلى أساسيات أنظمة التشغيل المختلفة مثل Windows و Linux وكيفية إستخدام سطر الأوامر أنظمة قواعد البيانات المختلفة، مع شرح تفصيلي للغة SQL للتعامل معها مبادئ أساسية في أنظمة قواعد البيانات NoSQL، ثم تنتقل إلى أساسيات الويب وكيف تعمل المواقع وخوادم الويب، ثم مبادئ الحماية والأمان في الويب. يمكنك أن تتعرف أكثر على هذه الدورة من خلال الصفحة الخاصة بها من هنا (دورة علوم الحاسوب).
  22. سامح أشرف
    يمكنك أن تستخدم المدخل date__range، كالتالي: Video.objects.filter(date__range=["2021-08-01", "2021-08-31"]) لاحظ أن الحل السابق يقوم بتنفيذ جملة BETWEEN في SQL، مما يعني أن النطاق يتضمن يومي 1/8 و 31/8 أيضًا. إذا كنت لا تريد تضمين هذين اليومين مع النتائج، فيمكنك أن تستخدم خاصية gt (greater-than) و lt (less-than)، كالتالي: import datetime videos = Video.objects.filter(video_date__gte=datetime.date(2021, 8, 1), video_date__lte=datetime.date(2021, 8, 31)) أو إذا كنت تحاول فقط التصفية حسب الشهر: Video.objects.filter(date__year='2021', date__month='08')
  23. سامح أشرف
    يمكنك أن تقوم بذلك بأكثر من طريقة وأسهلهم هي من خلال عمل نسخة من الكائن وجعل الـ Primary Key يساوي None، كالتالي: obj = User.objects.get(pk=1) obj.pk = None obj.save() الكود السابق يقوم بجلب instance من الكائن ثم نقوم بجعل الـ id بقيمة None، وبالتالي عند تشغيل التابع save سوف يقوم بعمل صف جديد في قاعدة البيانات. بالطبع يمكنك أن تقوم بتحديث/تعديل الكائم قبل حفظه بشكل طبيعي، كما ينصح توثيق Django أن تقوم بجعل الخاصية _state.adding تساوي True، لكي تتم عملية إنشاء كائن جديد بشكل سليم كالتالي: post = Post(title='My first blogpost', summary='Blogging is easy') post.save() # post.pk == 1 post.pk = None post._state.adding = True post.save() # post.pk == 2 عملية الحفظ الأولى سوف تقوم بإنشاء أول صف في الجدول في قاعدة البيانات، بينما عملية الحفظ الثانية سوف تقوم بعمل صف جديد في نفس الجدول.
  24. سامح أشرف
    يمكنك أن تستعمل أي لغة خاصة بالواجهات الخلفية Backend و أي إطار عمل ترغب به (أو حتى بدون إطار عمل على الإطلاق)، وهنا بعض الأمثلة: PHP مع إطار العمل Laravel: تعد لغة PHP أشهر لغة للواجهات الخلفية في الوقت الحالي، كما أن Laravel هو أكثر إطار عمل مستخدم أيضًا، لغة PHP مجهزة بالفعل لخوادم الويب، لأنها صممت في الأساس لهذا الغرض، كما أن إطار العمل Laravel يوفر لك بنية سهلة وبسيطة لعمل API للتطبيقات أو البرامج بسهولة، كما يوفر لك نظام إستيثاق Authentication مُعد بالفعل ولن تحتاج إلى ضبط أي شيء، وهو يتبع نظام MVC مما يوفر لك تنظيم للكود والملفات أيضًا. لغة PHP مستخدمه في Facebook و Wikipedia وغيرها. Node.js مع إطار العمل Express.js: إزدادت في الفترة الأخيرة شعبية لغة JavaScript خصوصًا في الواجهات الخلفية، حيث أصبح هناك مسار لتعلم تطوير المواقع يسمى MERN (MongoDB - Express.js - React.js - Node.js)، لكن يمكنك أن تستخدم أي نوع من قواعد البيانات وليس شرطًا أن تستعمل MongoDB، ويمكنك أن تقوم بعمل API به أيضًا. إطار العمل Express.js مستخدم في شركات مثل Uber و Yandex و IBM وغيرها. Python مع إطار العمل Django: لغة Python من أسهل اللغات في التعلم ومن أسهلها في كتابة الكود، ولها العديد من المميزات، كما أن إطار العمل Django يوفر لك بنية أولية مجهزة لتقوم ببناء أي مشروع به، ويمكنك أن تقوم بعمل API أيضًا به بكل سهولة بسبب مميزات JSON وXML التي يقدمها. إطار العمل Django يتم إستعماله في Disqus و Instagram و Spotify و YouTube و DropBox و Pinterest و غيرها. يمكنك أن تستعمل أي لغة من اللغات السابقة (أو غيرها حتى)، فكل هذه اللغات يمكنها أن تقوم بكل ما تريده وأكثر وبسهولة أيضًا. كما يمكنك أن تختار أحد إطارات العمل التي ذكرتها أو تستخدم إطارات عمل أخرى، ولكني ذكرت فقط الأكثر شهرة وإستخدامًا في هذه اللغات. ويوجد في الأكاديمية مقالة حول الفرق بين Laravel و Django وكذلك Rails: بالنسبة لقاعدة البيانات، فلا أنصحك بأن تستخدم SQLite موقع حقيقي أو لحفظ وإسترجاع البيانات بسرعة، بدلًا من ذلك يمكنك أن تستخدم MySQL أو Postgres، وهنا مقالة تتمحور حول عيوب ومميزات كل نوع من الأنواع السابقة:
  25. سامح أشرف
    يجب أن تقوم بإضافة نطاق الموقع إلى القائمة ALLOWED_HOSTS وكذلك localhost (أثناء عملية التطوير)،هذه القائمة تمثل أسماء النطاقات domains /المضيف host التي يمكن لموقع Django هذا أن يخدمها (أي يمكن لهذه المواقع أن ترسل طلبات إلى هذا المشروع). لحل المشكلة يجب أن تقوم بإضافة نطاق المواقع الخاص بك إلى هذه القائمة، كالتالي: ALLOWED_HOSTS = ['142.250.201.46', 'example.com'] بعد ذلك يجب إعادة تتشغيل خادم الويب Apache، وقد يختلف هذا الأمر حسب الطريقة التي تم بها تثبيته، وحسب نظام التشغيل، لكن في الغالبي يمكنك أن تستخدم الأمر التالي: sudo service apache2 reload كما يمكنك أن تضيف نجمة فقط إلى هذه القائمة، كالتالي: ALLOWED_HOSTS = ['*'] تستخدم هذه الطريقة أثناء مرحلة التطوير فقط، ولا تستخدمها أبدًا عند نشر التطبيق production لأنها تقوم بإيقاف نظام الحماية هذا بالكامل، وسيمكن لأي موقع أن يرسل طلبات إلى موقعك.
×
×
  • أضف...