Mustafa Suleiman

11 مايو 2023

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

11 مايو 2023

أرجو منك طرح السؤال في التعليقات الخاصة بالأسئلة الماضية لك وليس إنشاء سؤال جديد في كل مرة

11 مايو 2023

بتاريخ 3 دقائق مضت قال Issam Bourouail:

١- هل يجب عمل مشاريع ب class components و إستعمال functions components؟

1- ليس من الضروري عمل مشاريع باستخدام class components. في React، وتستطيع استخدام كلا النوعين من المكونات (function components و class components) لبناء تطبيقاتك.

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

بتاريخ 3 دقائق مضت قال Issam Bourouail:

2- ماهي وضيفة class components بمعني أين تتجلى قوة إستعمال class components في مشاريع؟

2- قوة استخدام class components تكمن في إمكانية استخدام مفهوم الحياة الداخلية (lifecycle) للمكونات.

حيثث تتوفر للـ class components مجموعة من الطرق (methods) المدمجة مثل componentDidMount و componentDidUpdate و componentWillUnmount وغيرها، تسمح لك بالتحكم في سلوك المكون بناءً على حالات معينة في دورة حياته. هذا يمكن أن يكون مفيدًا في حالات استخدام الحالة المحلية للمكونات (local state) أو التفاعل مع APIs الخارجية بطرق تقليدية.

ومع ذلك، في React 16.8 تم إدخال الـ hooks الذي يتيح لك استخدام حالة المكون (state) والحياة الداخلية (lifecycle) في function components أيضًا.

وبفضل الـ hooks مثل useState و useEffect و useContext، أصبح بإمكان function components القيام بمعظم الوظائف التي يمكن القيام بها باستخدام class components بشكل أسهل وأنظف

وبالتالي يعتبر استخدام function components والـ hooks هو الأسلوب الموصى به في الوقت الحالي.

11 مايو 2023

تحقق من التالي وأخبرني بالنتيجة:

1- تحتاج إلى التأكد من وجود الخط العربي (arb.ttf) في نفس المجلد الذي يحتوي على الكود الخاص بك. تحقق من صحة اسم الملف ومكانه.

2- أنت تستخدم حزمة arabic_reshaper لإعادة تشكيل النص العربي، لذلك تأكد من تثبيت الحزمة بشكل صحيح باستخدام أداة إدارة الحزم pip.

وسبب الخطأ الذي يظهر لك هو أنه يوجد مشكلة في القيم المستخدمة لتعيين الخريطة الحرفية (cmap) في ملف الخط العربي الذي تستخدمه (arb.ttf).

وتلك الأخطاء تحدث عندما يكون ملف الخط غير صحيح أو غير متوافق مع مكتبة FPDF، لذلك تأكد من التالي:

1- ملف الخط العربي (arb.ttf) الذي تستخدمه هو ملف صالح وغير تالف، وقد تحتاج إلى تحميل ملف خط عربي آخر وتجربته للتأكد من أنه ليس المشكلة.

2- تحديث مكتبة FPDF إلى أحدث إصدار متاح مما قد يصلح بعض الأخطاء وتحسين التوافق مع ملفات الخط عبر التحديثات.

3- التحقق من أن جميع الاعتماديات اللازمة مثبتة بشكل صحيح، بما في ذلك bidi.algorithm و arabic_reshaper.

استخدم الأمر التالي لتثبيت الحزم:

pip install python-bidi
pip install arabic-reshaper

في حالة استمرار المشكلة، حاول استخدام خطوط أخرى تتوافق بشكل أفضل مع مكتبة FPDF لدعم الكتابة العربية، مثل خطوط Amiri و Lateef و Droid Arabic Kufi وغيرها.

11 مايو 2023

بعض النصائح البسيطة بالإضافة إلى ما تم ذكره:

1- التأني في فهم الأساسيات بشكل جيد

ابدأ بفهم المفاهيم الأساسية في جافاسكريبت والبرمجة، مثل المتغيرات والتحكم في التدفق (عبارة if-else، حلقات التكرار، الدوال، إلخ). هذا سيساعدك في بناء أساس قوي لفهم اللغة.

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

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

أيضًا إنشاء موقع كامل يوفر لك البحث عن وصفات للطعام من خلال الإعتماد على API وإمكانية حفظ أو إضافة وصفات وهو مشروع ليس بالسهل حيث سيتعين عليك التلاعب بالـ DOM وإنشاء كلاسات لتنظيم المشروع.

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

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

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

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

4- تعلم من الأخطاء وحاول مرة أخرى حتى تصل إلى حلول أفضل.

10 مايو 2023

الكود في الصورة خاص بإعدادات إضافة جوجل كروم، وهناك مشكلة به حيث يتم تشغيل ملفي jquery.js و popup.js، فهل ملف popup هو الملف الأساسي؟

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

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

وتستطيع إظهار الكونسول من خلال الضغط على CTRL + SHIFT + j معًا في الكيبورد.

10 مايو 2023

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

وعلي أي حال، حاول تعديل الكود بالشكل التالي:

</script>

<script type='text/javascript'>
    //<![CDATA[

    if (window['location']['href']['indexOf']('/p/checkout.html') > -1) {
        document['title'] = 'Checkout';
        $('.item-post .post-body').html(`
        <div class="my-shopping">
            <h2>معلومات الفاتورة</h2>
            <div class="cart-review-wrap">
                <div id="contact" class="form-bret">
                    <form name="contact-form">
                        <label class="">الاسم&nbsp;<abbr class="required" title="required">*</abbr></label>
                        <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="" size="30" type="text" value=""/>
                        <label class="">عنوان البريد الإلكتروني&nbsp;<abbr class="required" title="required">*</abbr></label>
                        <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="" size="30" type="text" value=""/>
                        <label class="">رقم الهاتف وعنوان الشارع&nbsp;<abbr class="required" title="required">*</abbr></label>
                        <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="" rows="5"></textarea>
                        <div class="checkout-wrap">
                            <div class="simpleCart_items"/>
                            <div style="clear: both;"/>
                            <div class="cart-bot-element">
                                <div class="cart-amount">
                                    <div class="cart-subtotal">المجموع الفرعي: <span class="simpleCart_total"/></div>
                                    <h4>طلبك:</h4>
                                    <div class="carter">لديك <span class="simpleCart_quantity"/> عنصر(أ) في عربة التسوق الخاصة بك.</div>
                                    <div class="my-total">الإجمالي: <span class="simpleCart_total"/></div>
                                </div>
                                <a class="simpleCart_checkout" href="javascript:;">
                                    <input class="checkout-bill" id="ContactForm1_contact-form-submit" type="button" value="تأكيد الطلب">
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <style>h1.post-title {display: none!important; }</style>
    `);
    };


    if (window['location']['href']['indexOf']('/p/cart.html') > -1) {
        document['title'] = 'عربة التسوق';
        $('.item-post .post-body').html(`
        <div class="my-shopping check">
            <h2>عربة التسوق</h2>
            <div class="cart-review-wrap">
                <div class="simpleCart_items"/>
                <div style="clear: both;"/>
                <div class="cart-bot-element">
                    <div class="cart-amount">
                        <div class="cart-subtotal">المجموع الفرعي: <span class="simpleCart_total"/></div>
                        <h4>عربتك:</h4>
                       

<div class="carter">لديك <span class="simpleCart_quantity"/> عنصر(أ) في عربة التسوق الخاصة بك.</div>
                        <div class="my-total">الإجمالي: <span class="simpleCart_total"/></div>
                    </div>
                    <a class="simpleCart_checkout" href="/p/checkout.html">المتابعة للدفع</a>
                </div>
            </div>
        </div>
        <style>.item-post h1.post-title { display: none!important; }</style>
    `);
    };
    //]]>
</script>

10 مايو 2023

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

10 مايو 2023

أثناء تعلم الدورة ستعرف أنه يتم البناء من خلال نمط تصميم MVC.

وعند بناء موقع مثل Instagram أو متجر إلكتروني باستخدام دورة PHP والتركيز على الجانب الخلفي (backend) ستحتاج في الواقع إلى استخدام لغات وتقنيات الواجهة الأمامية (frontend) مثل HTML وCSS وJavaScript بالإضافة إلى إطار العمل Laravel ومكتبات مثل Bootstrap أو Tailwind CSS.

بالنسبة للتعامل مع HTML، فستقوم بكتابة كود HTML داخل صفحات PHP لتقديم المحتوى المناسب وتجميع البيانات التي يتم استرجاعها من قاعدة البيانات وعرضها بطريقة ملائمة.

وباستخدام إطار العمل Laravel، ستحصل على العديد من المزايا المتقدمة مثل التوجيه (Routing)، وإدارة قواعد البيانات، والتحقق من الصحة والأمان، وإنشاء API، وغيرها من الوظائف التي تسهل تطوير تطبيقات الويب.

أما بالنسبة للتصميم والتنسيق، يمكنك استخدام أدوات مثل CSS وSass لتحسين تصميم الموقع وتطبيق الأنماط الخاصة بك. ويمكنك أيضًا استخدام إطار عمل CSS مثل Bootstrap أو Tailwind CSS لتسهيل وتسريع عملية تصميم وتنسيق الموقع.

وفيما يتعلق بتجميع الملفات، يمكنك استخدام أدوات مثل Vite أو Webpack لتجميع وتحسين وتقليص حجم الملفات الأمامية (مثل CSS وJavaScript) وتحويلها إلى إصدارات أكثر كفاءة لتحسين أداء الموقع.

إذاً، في عملية بناء موقع مثل Instagram أو متجر إلكتروني، يجمع العمل بين لغات الواجهة الأمامية وإطار العمل Laravel في الجانب الخلفي لتحقيق الوظائف المطلوبة وتقديم تجربة مستخدم متكاملة وجذابة.

أي ما يحدث هو نمط "Server-side Rendering" (تقديم من الخادم) في بناء موقع مثل Instagram أو متجر إلكتروني باستخدام PHP وإطار العمل Laravel.

ففي الـ Server-side Rendering، يتم تجهيز صفحات الويب على الخادم قبل أن يتم إرسالها إلى المتصفح. وعندما يقوم المستخدم بزيارة صفحة، وتنفيذ الكود PHP على الخادم لجمع البيانات اللازمة من قاعدة البيانات وإعداد صفحة HTML النهائية التي تحتوي على المحتوى المطلوب.

وباستخدام إطار العمل Laravel، تستطيع تعريف المسارات (Routes) والمنطق المرتبطة بها في صفحات PHP مثل routes/web.php أو routes/api.php.

فعند استلام طلب المستخدم، يتم تنفيذ الكود المناسب لجمع البيانات وإعداد صفحة HTML للرد على الطلب.

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

وبخصوص اللغات الخاصة بالواجهة الأمامية، فمن خلال إشتراكك في الدورة ستحصل على وصول للمسارات الأولى من جميع الدورات الأخرى، وبالتالي ستتمكن من تعلم أساسيات HTML, CSS, JS.

وسيتم شرح كل ما ذكرته في دورة PHP ولكن عليك بتعلم الأساسيات أولاً قبل البدء في الدورة، أي عليك برؤية المسار الأول من دورة دورة تطوير واجهات المستخدم و المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript .

10 مايو 2023

هل قمت بتجربة عمل طباعة عند حدوث تغير في الـ Token، مثال:

useEffect(() => {
  console.log(auth);
}, [auth.token]);

10 مايو 2023

أرجو منك رفع مجلد المشروع بالكامل فهناك ملف style.css لم يتم إرفاقه، وإرفاق صورة للمشكلة لديك.

وبخصوص الصورة يجب أن يتم وضع مساحة للعنصر الأب ثم وضع خاصية width:100% للصورة وبذلك ستشغل مساحة الأب فقط، وهناك خواص أخرى مثل:

background-size: cover;

10 مايو 2023

إذا كان الكود تابع لمكتبة simpleCart فقد قام عدنان بشرح الأمر لك، وإذا كان غير ذلك.

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

مثال للكود بعد تعديله:

<a class="simpleCart_checkout" href="javascript:;" onclick="showPaymentOptions();"><input class="submit_billing_templateism" id="ContactForm1_contact-form-submit" type="button" value="الانتقال للدفع"></a>

<div id="paymentOptions" style="display: none;">
    <h4>خيارات الدفع:</h4>
    <label for="payment_cod"><input type="radio" name="payment_method" id="payment_cod" value="cod"> الدفع عند الاستلام</label><br>
    <label for="payment_credit"><input type="radio" name="payment_method" id="payment_credit" value="credit_card"> بطاقة الائتمان</label><br>
    <!-- إضافة المزيد من خيارات الدفع هنا إن لزم الأمر -->
    <br>
    <input type="button" value="تأكيد الدفع" onclick="submitPayment();">
</div>

<script>
    function showPaymentOptions() {
        document.getElementById("paymentOptions").style.display = "block";
    }

    function submitPayment() {
        const selectedPayment = document.querySelector('input[name="payment_method"]:checked').value;
        // قم بتنفيذ الإجراءات اللازمة استنادًا إلى طريقة الدفع المحددة
        if (selectedPayment === "cod") {
            // قم بتنفيذ الكود الخاص بالدفع عند الاستلام
            alert("سيتم الدفع عند الاستلام.");
        } else if (selectedPayment === "credit_card") {
            // قم بتنفيذ الكود الخاص بدفع بطاقة الائتمان
            alert("جارٍ توجيهك لصفحة دفع بطاقة الائتمان...");
        } else {
            // قم بالتعامل مع طرق الدفع الأخرى
            alert("طريقة الدفع غير مدعومة.");
        }
    }
</script>

10 مايو 2023

بتاريخ الآن قال Abdullah King:

هذا ما يظهر لي ?

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

npm start

وسيظهر لك عنوان المشروع والبورت مثلاً http://localhost:3000/ أو http://localhost:5000/

10 مايو 2023

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

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

1- استخدام تخزين المستعرض (Browser Storage)

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

كمثال، لتخزين حالة صفحة بسيطة في localStorage، استخدم الكود التالي:

// عند التحميل الأولي للصفحة
componentDidMount() {
  const savedState = localStorage.getItem('myPageState');
  if (savedState) {
    this.setState(JSON.parse(savedState));
  }
}

// عند تحديث حالة الصفحة
componentDidUpdate() {
  localStorage.setItem('myPageState', JSON.stringify(this.state));
}

2- استخدام مكتبة خارجية

هناك مكتبات خارجية تساعد في إدارة حالة التطبيق واستعادتها بعد إعادة التحميل، مثل Redux toolkit و Zustand، تتيح تلك المكتبات إدارة الحالة العالمية للتطبيق والاحتفاظ بها بين الجلسات.

ومثلاً باستخدام Redux toolkit، بإمكانك تخزين حالة التطبيق واستعادتها كالتالي:

1- تعريف المتجر (store) الخاص بالتطبيق وتعيين الحالة الابتدائية:

// في ملف store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const initialState = JSON.parse(localStorage.getItem('myAppState')) || {};
const store = createStore(rootReducer, initialState);

export default store;

2- استخدام المتجر في التطبيق:

   // في ملف index.js
   import { Provider } from 'react-redux';
   import store from './store';

   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );

3- في مكونات التطبيق، تستطيع الوصول إلى حالة التطبيق وتحديثها باستخدام الأوامر المناسبة من Redux.

import { useSelector, useDispatch } from 'react-redux';

function MyComponent() {
  const state = useSelector((state) => state); // الوصول إلى حالة التطبيق
  const dispatch = useDispatch();

  // تحديث حالة التطبيق
  const updateState = () => {
    dispatch({ type: 'UPDATE_STATE', payload: { /* بيانات التحديث */ } });
  };

  // ...
}

ومن المهم أن تعلم أن استخدام مكتبة مثل Redux يتطلب إعداد إضافي واستخدام مفاهيم مثل الأعمال (Actions) والمخفضات (Reducers) وتوصيل المكونات (Connect)، يمكنك قراءة المزيد عن Redux وكيفية استخدامه في التطبيقات ذات React في المستند الرسمي.

أما إذا كان المقصود بسؤالك كيف تقوم بإعادة فتح صفحة في المتصفح بعد إغلاقها فقم بالضغط على “Ctrl + Shift + T” معًا في الكيبورد.

10 مايو 2023

صحيح، فلتحديث المشروع ورفعه من جديد بعد إجراء تعديلات عليه، عليك بالخطوات التالية:

1- استخدم الأمر git add . لإضافة جميع التعديلات الجديدة إلى الاستعداد للتحميل:

git add .

2- بعد ذلك، قم بإنشاء نسخة محلية جديدة (commit) للتعديلات المُضافة باستخدام الأمر git commit -m "name"، حيث "name" هو رسالة الالتزام التي تصف التعديلات الجديدة:

git commit -m "Updated project"

3- أخيرًا، استخدم الأمر git push لرفع التعديلات إلى المستودع البعيد (remote repository):

git push

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

10 مايو 2023

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

git add .

هذا الأمر يقوم بإضافة جميع الملفات والتغييرات التي تم تعديلها في الدليل الحالي إلى الاستعداد للتحميل (staging area). يتم استخدام النقطة (.) للإشارة إلى جميع الملفات.

git commit -m "Upload files"

الأمر يقوم بإنشاء نسخة محلية (commit) من الملفات التي تمت إضافتها في الاستعداد. يتم تعيين رسالة الالتزام (commit message) إلى "Upload files" باستخدام الخيار -m.

git branch -M main

الأمر السابق يقوم بإعادة تسمية الفرع الحالي إلى "main". يُفضل استخدام "main" كاسم للفرع الافتراضي بدلاً من "master" في الإصدارات الحديثة من Git.

git remote add origin <repository-url>

من خلال الأمر السابق يمكنك بإضافة رابط المستودع البعيد (remote repository) باسم "origin"، ويتيح لك هذا الرابط ربط المستودع المحلي بالمستودع البعيد على خدمة مثل GitHub قم باستبدال <repository-url> برابط مستودعك الذي أنشأته.

git push -u origin main

الأمر يقوم بتحميل (push) التغييرات المحلية إلى المستودع البعيد المُرتبط بـ "origin". الخيار -u يعين "origin/main" كفرع متتبع (upstream) للفرع المحلي "main".

مما يسمح لك في المرات التالية ببساطة باستخدام "git push" دون تحديد الفرع والمستودع.

وأنصحك قبل ذلك مشاهدة الفيديو التالي أولاً:

10 مايو 2023

بتاريخ 52 دقائق مضت قال Mohamd Youns:

وماذا لو كان المشروع ب react و لديه مجلد أخر منفصل خاص بسيرفير ب node js ؟

كيف يمكنني رفع السيرفر أيضا؟

وكيف سيتصل السيرفر بمجلد react ؟ لانني أستخدم localhost في الإتصال المحلي بين المجلدين؟

قد تم شرح الأمر من خلال فيديو على قناة أكاديمية حسوب، والشرح يتم على استضافة Heroku لكنها أصبحت مدفوعة الآن، وأنصحك باستخدام أحد الاستضافات التالية:

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

10 مايو 2023

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

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

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

أو الداراسة جنبًا إلى جنب بجانب البرمجة إذا كان ذلك يناسبك وكنت تتابع محتوى دورة باللغة العربية.

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

وإذا أردت تعلم مهارة جديدة أو تقنية أو لغة جديدة ستجد شرحها ومصادرها باللغة الإنجليزية.

لذلك تستطيع الإعتماد على قناة مثل طليق zamericanenglish لتعلم الإنجليزية بشكل مجاني.

10 مايو 2023

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

وفيما يلي شرح للمجسات التي ذكرتها ووظائفها:

1- مستشعر الضوء المحيط

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

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

2- مستشعر يعمل باللمس

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

وفائدة مستشعر اللمس تظهر في العديد من التطبيقات مثل شاشات اللمس، وأزرار اللمس، ولوحات المفاتيح الرقمية.

3- مستشعر الباروميتر

المجس يستخدم لقياس الضغط الجوي. يستخدم عادة في الأجهزة الذكية مثل أجهزة الهواتف الذكية والأجهزة اللوحية.

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

4- مستشعر بصمة الأصبع

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

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

9 مايو 2023

يتوفر العديد من مجموعات تصميم واجهة المستخدم (UI Design Kits) التي يمكن استخدامها لتطوير تطبيقات iOS و Android، ةإليك بعض المجموعات:

1- iOS UI

تحتوي على مجموعة كبيرة من المكونات والأيقونات التي تلائم تصميمات iOS.

2- Ant Design

توفر Ant Design مجموعة من المكونات الجاهزة والتصاميم المتعددة الاستخدامات، وتستطيع العثور على Ant Design على الموقع الرسمي.

3- Fluent Design System

تم تطويرها بواسطة مايكروسوفت لتصميم تطبيقات Windows وتضم مكونات وتصاميم تتماشى مع تصميم FluentK، وتستطيع العثور على مواد التصميم الخاصة بـ Fluent على الموقع الرسمي لمايكروسوفت.

وهناك الكثير من مجموعات التصميم الأخرى، وما عليك سوى البحث عن "ui kit for android and iphone for developers" في جوجل وستجد الكثير من الروابط.

9 مايو 2023

1- مستشعر عداد الخطي (Linear Potentiometer)

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

2- مستشعر الضوء

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

3- مستشعر رطوبة الهواء

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

4- مستشعر مقياس المغناطيسية

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

9 مايو 2023

تحدث تلك المشكلة كثيرًا في حالة إنتهاء التفعيل الخاص ببرامج الأوفيس فهل تظهر لك رسالة تخبرك بشراء أو تفعيل الأوفيس؟

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

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

تحقق من أن لديك الصلاحيات الكافية للكتابة والتعديل على الملفات في موقع التخزين الذي تستخدمه، فإذا كنت تعمل في بيئة عمل مشتركة مع مستخدمين آخرين، فتحقق من أن صلاحيات الوصول الخاصة بك تسمح لك بالتعديل على الملفات.
إذا كان الملف الذي تحاول التعديل عليه مقفلاً، فلن تتمكن من تعديله، أي تأكد من أنه لا يوجد قفل على الملف، أو اطلب من الشخص الذي قام بإنشاء الملف فتحه لك.
إذا استمرت المشكلة، فقد تكون هناك مشكلة في تثبيت Office على جهازك. في هذه الحالة، قم بإلغاء تثبيت Office وأعد تثبيته من جديد. قد تحتاج أيضًا إلى إزالة أية بيانات متبقية من التثبيت السابق قبل إعادة التثبيت.
استخدام برنامج بديل: إذا لم تتمكن من حل المشكلة باستخدام Office، يمكنك استخدام برنامج بديل لإنشاء وتعديل الملفات مثل LibreOffice أو Google Docs و Google sheet الأوفيس الخاص بجوجل أفضل في رأي ولكنه يعمل في المتصفح فقط.

9 مايو 2023

في لغة Dart، كلمة factory هي كلمة مفتاحية تُستخدم لتعريف الـ factories.

وFactory method هو نمط تصميم يُستخدم لإنشاء كائنات داخل الفئة نفسها، ولكن بطريقة تختلف عن استخدام الـ constructors التقليدية.
تمامًا مثل الـ constructors، تستخدم الـ factories لإنشاء كائنات، ولكن هناك اختلافات في طريقة إنشاء الكائنات.

فعند استخدام الـ constructor التقليدي، تستخدم الكلمة المفتاحية new لإنشاء الكائن، ولكن في حالة استخدام الـ factory method، يتم استخدام اسم الفئة مباشرة.

والكود في الصورة ببساطة يتعامل مع تحويل كائن من نوع Person إلى شكل JSON والعكس.

فأولاً ، يتم تعريف فئة تسمى Users وتحتوي على خصائص id و name و email و gender و status.

حيث يتم تعريف هذه الخصائص باستخدام المعاملات المسماة (named parameters) في القائمة الفاصلة بين الأقواس السواقط {}.

والعبارة this.id تعني أنه عند إنشاء كائن من نوع Users ، من الممكن تمرير قيمة للخاصية id وسيتم تعيينها للخاصية المقابلة في الكائن، ونفس الشيء ينطبق على الخصائص الأخرى.

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

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

factory Person.fromlson(Map<String, dynamic> json) => _$PersonFromJson(json);

يعمل على تعريف طريقة تسمى fromlson التي تستقبل معامل من نوع Map<String, dynamic> وتقوم بإرجاع كائن من الفئة Person باستخدام الدالة _$PersonFromJson المولدة تلقائياً (يفترض أنها تم إنشاؤها بواسطة مولد كود مثل json_serializable).

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

ثم يأتي الجزء الثاني من الكود:

Map<String, dynamic> toJson() => _$PersonToJson(this);.

وتلك الوظيفة تقوم بتحويل كائن من الفئة Users إلى تنسيق JSON.

وتقوم الدالة toJson() بإرجاع كائن من نوع Map<String, dynamic> يحتوي على الخصائص الموجودة في كائن Users.

وتستخدم الدالة _$PersonToJson المولدة تلقائيًا (والتي يفترض أنها تم إنشاؤها بواسطة مولد كود مثل json_serializable) لتوليد الترميز JSON بناءً على الكائن Users الحالي.

وعند استدعاء الدالة toJson() على كائن Users، ستشفر الخصائص الموجودة في الكائن إلى JSON، وتستطيع استخدام هذا الناتج لتبادل البيانات مع الخوادم أو التخزين في ملفات JSON.

أي بإختصار، يساعد الـ factory والدالة toJson() في تسهيل عملية تحويل الكائنات إلى تنسيق JSON والعكس، مما يتيح إمكانية تبادل البيانات بسهولة بين تطبيقات Dart وخوادم الويب أو قواعد البيانات التي تستخدم JSON كتنسيق للبيانات.

9 مايو 2023

السؤال غير واضح، هل المقصود الغرض من تلك الحساسات؟

إذا كان كذلك، فإليك وظائف المجسات التي ذكرتها وكيف يمكن استخدامها في التطبيق:

1- مستشعر ماسح قزحية العين

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

2- مستشعر ايماءات الهواء

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

3- مستشعر التسارع

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

4- مستشعر الكاميرا

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

5- مستشعر القرب

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

6- مستشعر الميكروفون

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

7- مستشعر الجيروسكوب

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

9 مايو 2023

أرجو طرح السؤال أسفل فيديو الدورة وطرح الأسئلة العامة هنا.

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

وربما تتسائل عن الفرق بين برنامجي VSCode وPyCharm، فكلاهما بيئتي تطوير متكاملة (IDEs) مصممة للعمل مع لغة البرمجة Python. ومع ذلك، هناك اختلافات بينهما فيما يتعلق بالميزات والتجربة العامة. إليك بعض الفروق الرئيسية:

1- التوجه

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

2- الميزات والتطوير الذكي

PyCharm يقدم ميزات تطوير ذكي متقدمة مثل إكمال التعليمات البرمجية (Code completion)، والتحقق من الأخطاء (Error checking)، وتنسيق الكود (Code formatting)، والتصحيح التلقائي (Auto-correction)، وإدارة المشروعات، وتشغيل الاختبارات وتصحيحها، والتصحيح التلقائي للأخطاء. VSCode يوفر أيضًا بعض هذه الميزات، ولكن PyCharm يوفر مزايا أكثر تخصصًا للتطوير في Python.

3- الأدوات المساعدة

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

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

4- سهولة الاستخدام

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

5- الأداء

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

6- السعر

VSCode هو برنامج مجاني ومفتوح المصدر، في حين أن PyCharm يقدم إصدارًا مجانيًا (Community Edition) بالإضافة إلى إصدار مدفوع (Professional Edition) الذي يحتوي على ميزات إضافية.

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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