سمير عبود

الفكرة ليست في معرفة التقنية أو الخاصيات المستخدمة في التقنية، يمكنك تحصيل هذا الشيء من أي مصدر أو محتوى ترتاح له، التحدي الأكبر يكمن في إكتسابك لمهارة توظيف تلك الخصائص معاً او تلك التقنية في تحقيق أهداف معينة. لنأخذ على سبيل الصندوق المرن (Flex Box) هو أسلوب يمكن إستعماله حالياً لتنفيذ تخطيطات معقدة بشكل بسيط. (تلك التصاميم والتخطيطات كان تنفيذها معقد وصعب في السابق). سأرشح لك المقالات التالية لأخذ الأفكار الأساسية حول هذه المواضيع: مدخل إلى تخطيط صفحات الويب باستخدام CSS الأساليب القديمة في تخطيط صفحات الويب تخطيط الصندوق المرن Flexbox في صفحات الويب تخطيط صفحات ويب باستخدام تخطيط الشبكة Grid في CSS أو يمكنك أخذ أساسيات هذه المواضيع من خلال المقاطع على يوتيوب، الأمر راجع لك في اختيار ما يناسبك. بعدها يأتي التحدي الأكبر وهو محاولة تطبيق تخطيطات معينة سواء من خيالك أو من خلال الإنترنت (فقط عدد معين من الأفكار ومع الممارسة أكثر سيترسخ الفهم لديك) إليك بعض الأفكار البسيطة: شبكة صور بسيطة (معرض صور) قسم خدمات الشركة في صفحات الهبوط الخطط والأسعار فريقنا (بطاقات لفريق العمل في الشركة) قسم تفاصيل المنتج (القسم الذي نراه في المتاجر الإلكترونية - صور المنتج في جهة متوزعة بشكل منظم و تفاصيل المنتج في جهة { العنوان، الوصف، السعر وما إلى ذلك }) يمكنك الحصول على أفكار أخرى مختلفة من خلال الإنترنت وتصفح المواقع المشهورة بعد تطبيقك وتنفيذك لهذه الأفكار ستلمس بشكل أكبر أهمية هذه التقنيات والهدف منها وستتعلمها بعمق. بالتوفيق.

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

الأمر يعتمد عليك في النهاية، Laravel UI يأتي مهيأ بشكل إفتراضي مع إطار العمل Bootstrap بعكس Laravel Breeze الذي يأتي مهيأ مع TailwindCSS. عند تنفيذ: composer require laravel/ui php artisan ui bootstrap --auth ستحصل على ملفات Blade مبنية على Bootstrap مباشرة. فلا تحتاج إلى تعديلات كبيرة على الـ CSS أو الهيكلة. أما لو اخترت Laravel Breeze و أردت إستخدام Bootstrap معه ستضطر إلى: إزالة او تعطيل إعدادات Tailwind. تثبيت Bootstrap وإعادة كتابة الـ views أو تعديل الـ Blade components لتتناسب مع Bootstrap. هذا يعني وقتًا إضافيًا وجهدًا أكبر للبدأ في الكتابة او العمل على متطلبات المشروع الأساسية. في السابق كانت توجد حزم لتقديم Breeze مع Bootstrap فهي توفر ذلك الوقت الذي كنت ستقضيه في تعديل الملفات والـ views لتناسب Bootstrap في الوقت الحالي لا أدري وضعها. لكن الأمر ليس بذلك التعقيد يمكنك القيام به بشكل يدوي. يوجد أيضاً خيار Laravel Jetstream فهو مثل Breeze لكنه يوفر خصائص وميزات أكبر. ويوجد أيضاً خيار Laravel Fortify لوحده فهو يوفر المتحكمات و جانب الـ Backend لعمليات المصادقة وتسجيل الدخول وهو مستخدم بشكل إفتراضي مع كل من Breeze و Jetstream لكنه لا يوفر الـ Frontend و ملفات العروض و الإعدادات الخاصة بهذا الجانب، الأمر متروك للمطور لإختيار وإستخدام ما يشاء. لكل من هذه الخيارات حالات إستخدام معينة والأمر في الأخير يرجع للمطور. خلاصة الأمر إذا كنت مبتدئ وتريد أسرع طريقة مع Bootstrap إستخدم Laravel UI، إذا كنت تملك الوقت ولا تمانع في بذل جهد للتخصيص اليدوي يمكنك إختيار Breeze وتخصيص الواجهات لتعمل مع Bootstrap. إذا كنت ترغب في تخصيص من الصفر للواجهات والأدوات يمكنك الذهاب مع خيار Fortify ثم إضافة ما يناسبك. إذا كنت تحتاج إلى الميزات التي يقدمها Jetstream و القصد هنا جلسات المتصفح والمصادقة الثنائية، إدارة الفريق ... فالخيار هو Jetstream. في Laravel 12 تم تقديم مجموعات بدء (Starter Kits) جديدة، هذه المجموعات مُصمّمة لتسهيل بدء المشاريع مع واجهة + مصادقة + إعدادات جاهزة، وتركّب التقنية الأمامية التي تفضّلها، وجميع هذه المجموعات الجديدة تستخدم Tailwind CSS كمكتبة CSS افتراضية.

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

لا يوجد ماهو أفضل في المجمل وبشكل عام بين Django و Flask. ذلك يعتمد على حالات الإستخدام وعلى التفضيلات الشخصية. فلكل إطار مميزات و عيوب وفي الأخير أنت من يحدد المناسب لك وللمشروع الذي تعمل عليه. بداية دعنا نعرف كل إطار و نبرز مميزات و عيوب كل منهما حتى يتسنى لك الإختيار وفق ما يتناسب مع حاجتك: Django: إطار عمل كامل مبني على بايثون، يوفّر لك كل شيء تقريبًا من البداية: نظام إدارة المستخدمين، ORM لربط قاعدة البيانات، لوحة تحكم جاهزة، حماية أمنية، قوالب HTML، إلخ. Flask: إطار عمل صغير (Microframework) وخفيف، يوفّر الأساسيات فقط (Routing، Request/Response)، وتضيف أنت باقي المكونات (قواعد البيانات، التوثيق، إلخ) عبر مكتبات خارجية حسب حاجتك. المميزات والعيوب: مميزات Django: يوفّر أدوات كثيرة جاهزة لتطوير سريع. نظام إدارة (Admin Panel) جاهز وقوي. ORM قوي للتعامل مع قواعد البيانات بسهولة. أمان عالي (CSRF, SQL Injection, XSS protection). مجتمع كبير ودعم واسع. عيوب Django: كبير الحجم وقد يكون زائدًا عن حاجتك إذا كان المشروع صغير. أقل مرونة إذا أردت الخروج عن "طريقة Django" في العمل. مميزات Flask: خفيف وسهل الفهم للمبتدئين. مرونة عالية حيث تختار الأدوات التي تناسبك. مناسب للمشاريع الصغيرة أو التي تحتاج تصميم مخصص جدًا. عيوب Flask: تحتاج إلى إضافة كافة المزايا الإضافية والتي لا يتيحها الإطار بنفسك قد تحتاج وقت أطول للبناء إذا كان المشروع كبير. متى تستخدم كل إطار؟ تستخدم Django إذا كنت تريد إنجاز مشروع كبير أو متوسط وبسرعة، أو إذا كنت ترغب بلوحة تحكم جاهزة وتنظيم محكم للكود. بينما تستخدم Flask إذا كنت تريد إنجاز مشروع صغير أو API خفيف، أو كنت تريد حرية كاملة ومرونة في إختيار المكونات بنفسك. في الأخير لا يوجد ماهو أفضل بشكل مطلق عندما نتحدث عن الأدوات البرمجية سواء لغات أو أطر عمل أو مكتبات فالأمر كما قلت في البداية راجع لحالات الإستخدام، نسبة تعقيد المشروع، متطلبات صاحب المشروع أو الشركة التي تعمل لديها، تفضيلات شخصية وما إلى ذلك من معايير وتحديدات.

إن كنت تريد مزامنة الملفات بين عدة أجهزة يُمكنك إستخدام برنامج syncthing وهو برنامج مفتوح المصدر يستخدم لمزامنة الملفات والمجلدات بين أجهزة متعددة بشكل آمن وسهل. يتيح لك البرنامج الحفاظ على نسخ متزامنة من الملفات عبر الأجهزة المختلفة، سواء كانت أجهزة كمبيوتر، خوادم، أو حتى أجهزة محمولة. من بين أهم المميزات أنه بسيط وسهل الإستعمال بالإضافة لأنه متعدد المنصات يعمل على معظم أنظمة التشغيل بما في ذلك Windows، macOS، Linux، و Android، تستطيع إستكشاف البرنامج وما يقدمه من مميزات من خلال يوتيوب يوجد عدة مقاطع تشرح ذلك. مستودع البرنامج على github : مستودع syncthing

تحتاج إلى إضافة الحقل لإستمارة التسجيل: <div class="mt-4"> <x-label for="photo" value="{{ __('Photo') }}" /> <x-input id="photo" class="block mt-1 w-full" type="file" name="photo" /> </div> تحتاج التعديل على عُنصر الإستمارة بإضافة: <form method="POST" action="{{ route('register') }}" enctype="multipart/form-data"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ بعدها تحتاج إلى التعديل على التابع المسؤول عن إضافة السجل: بإضافة التحقق: Validator::make($input, [ 'name' => ['required', 'string', 'max:255'], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 'password' => $this->passwordRules(), 'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '', 'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'], // إضافة التحقق ])->validate(); ثم بعد إنشاء المستخدم تقوم بتعديل الصورة في حالة ما إذا كان الطلب به ملف صورة: $user = User::create([ 'name' => $input['name'], 'email' => $input['email'], 'password' => Hash::make($input['password']), ]); if (isset($input['photo'])) { $user->updateProfilePhoto($input['photo']); } return $user; تستطيع حفظ الصورة بنفسك قبل حفظ المستخدم، لكن بإمكانك أيضاً إستخدام نفس الخاصية الموجودة في التعديل، أي التابع updateProfilePhoto كما هو موضح أعلاه، التابع سيقوم بحفظ الصورة في المجلد storage و يُعدل على حقل الصورة في قاعدة البيانات أيضاً.

خاصية تعديل الصورة الشخصية للمستخدمين متاحة كخاصية إفتراضية في Jetstream، لا تحتاج إلى إنشائها من الصفر فقط عليك تفعيلها من خلال ملف الإعدادات: config/jetstream.php ستجد بداخل المفتاح features السطر التالي: Features::profilePhotos(), مُعلق قم بإزالة التعليق. ثم ستتمكن من التعديل على الصورة الشخصية من خلال صفحة ال profile، إن أردت شيء مغاير يُمكنك الإشارة.

يُمكنك إستخدام الدالة unlink في php لحذف أي ملف، وتمرير مسار الملف الذي تريد حذفه كوسيط أول للدالة.

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

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

لا يمكنك وضع الصورة من خلال حقل file عليك وضعها من خلال عُنصر الصورة (img) أي أن كود php ستضعه من خلال الخاصية src في عُنصر الصورة (img)، يعني ستقوم بتعديل التالي: <img width="180" height="150" src="https://placehold.co/180x150" alt="image preview" id="preview"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ بوضع مسار الصورة عن طريق php: <img width="180" height="150" src="<?php echo 'مسار الصورة' ?>" alt="image preview" id="preview"> أنا لا أعلم إسم الحقل الذي تخزن فيه مسار الصورة ولا كيف تقوم بتخزينها لكن أنت ملم بهذه المعطيات، فقط ستُعدل على ال 'مسار الصورة' بما يوافقها بعد جلبك للبيانات.

لا يُمكنك وضع القيمة من خلال حقل الإدخال (input file) مباشرةً، تحتاج إلى إضافة عُنصر صورة (img) تحت الحقل file تعرض به الصورة من خلال المسار الخاص بها، ثم من خلال جافاسكربت يُمكنك إذا قام المستخدم بتغيير الصورة إلتقاط الحدث و التغيير على الصورة بحيث تظهر الجديدة التي اختارها، بعد ذلك إذا تم الضغط على زر التعديل ترسل الإستمارة إلى الخادم وتحفظ الصورة الجديدة: هنا شرح بسيط للعملية: <form action="" enctype="multipart/form-data"> <input type="file" id="file" name="file" accept="image/*" onchange="loadImage(event)"> <br><br> <img width="180" height="150" src="https://placehold.co/180x150" alt="image preview" id="preview"> </form> لاحظ العُنصر img (هو الذي نستخدمه لعرض الصورة، يُمكنك التعديل على الخاصية src بوضع مسار الصورة الخاصة بالسجل الذي تقوم بالتعديل عليه) أيضاً لاحظ عُنصر الإدخال استخدمنا الخاصية onchange لإلتقاط حدث التغيير وتنفيذ الدالة loadImage التي سنقوم بإنشائها عبر JavaScript: const loadImage = (event) => { const output = document.getElementById('preview'); output.src = URL.createObjectURL(event.target.files[0]); output.onload = function() { URL.revokeObjectURL(output.src) } } فقط نقوم بتحديد عُنصر الصورة من DOM ثم نُغير على الخاصية src بوضع الصورة الجديدة. المثال موجود على CodePen من هنا، هذه الفكرة بإختصار يُمكنك التعديل عليها حسب الحالة وإضافة التنسيقات المناسبة لك.

إن كنت تقصد دورة مخصصة بشكل كامل لبناء تطبيقات الهاتف فهي غير موجودة، لكن توجد دورة تطوير التطبيقات باستخدام JavaScript التي تتكون من مسارات تم التطرق فيها إلى تطوير تطبيقات جوال بشكل كامل و شرح الأساسيات في بعض التقنيات وأطر العمل المستعملة في هذا المجال مثل React Native و Ionic. فإذا توجهت للصفحة الخاصة بهذه الدورة: دورة تطوير التطبيقات باستخدام لغة JavaScript ستجد المسارات التالية: تطوير تطبيق جوال باستخدام React Native تطبيق دردشة يشبه WhatsApp و هذا مسار يشمل تطبيق الويب بإستعمال node.js و react.js وتطبيق جوال بإستعمال React Native تطوير تطبيق جوال للتواصل الاجتماعي باستخدام Ionic وهذا المسار شامل لإطار العمل Ionic فهو يتكون من حوالي 111 درس موزعة على 16 ساعة لكن كما قلت فإن الدورة مخصصة للغة جافاسكربت والتطبيقات التي يمكن بناؤها بإستعمال هذه اللغة والتقنيات الخاصة بها، فستجد أنها تتكون أيضاً من مسارات إضافية لشرح أساسيات اللغة نفسها وشرح أساسيات NodeJs وأساسيات ReactJs، وأيضاً يوجد مسار لـ Typescript و مسار لإطار Electron.js المستعمل في بناء تطبيقات سطح المكتب و مسارات أخرى معظمها عملية تطبيقية يتم فيها بناء تطبيق معين. لذلك أعتقد أن هذه الدورة مناسبة لما تبحث عنه بقية الدورات تخص مجالات أخرى، لكن إن كنت تقصد شيئ آخر أو تقنيات أخرى غير التي ذكرتها يُمكن طرح تساؤلك أو تقديم إقتراحك على الإدارة من خلال مركز المساعدة، تحياتي.

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