حسانالمالكي

الابتكار فيتطوير تطبيقات ويب

حسان المالكي - مطور تطبيقات ويب ومدير منتجات تقنية

حسانالمالكي

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

ابتكارات ذات تأثير

الإثراء التقني

مقدمة في إطار العمل Vue.js
مقدمة في إطار العمل Vue.js
أكاديمية طويق

مقدمة في إطار العمل Vue.js

عن الورشة

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

سنستعرض أبرز مزايا الإطار ونبني أول تطبيق لنا باستخدامه خطوة بخطوة.

المحاور

  • لماذا Vue.js؟
  • تهيئة المشروع باستخدام Vue CLI
  • التعرف على هيكلية الملفات والمجلدات
  • بناء أول مكون (Component)
  • استخدام props و data و computed
  • التكرار والعرض الشرطي
  • مقدمة في الملفات الأحادية (SFC)

مشاهدة الورشة

بناء موقع سيرة ذاتية وربطه بقاعدة بيانات
بناء موقع سيرة ذاتية وربطه بقاعدة بيانات
مجتمع جوجل الشرق الأوسط

بناء موقع سيرة ذاتية وربطه بقاعدة بيانات

عن الورشة

تعرّف في هذه الورشة على كيفية تصميم موقع إلكتروني يعرض سيرتك الذاتية باستخدام HTML/CSS وJavaScript.

كما ستتعلم ربط الموقع بقاعدة بيانات حية من خلال Google Sheets وتحديث المحتوى بسهولة.

المحاور

  • تصميم واجهة السيرة الذاتية
  • استخدام Google Sheets كقاعدة بيانات مباشرة
  • جلب البيانات باستخدام JavaScript
  • بناء نموذج إدارة لتحديث البيانات
  • نشر الموقع للجمهور

مشاهدة الورشة

الرسوم المتحركة في تصميم المواقع
الرسوم المتحركة في تصميم المواقع
العطاء الرقمي

الرسوم المتحركة في تصميم المواقع

عن الورشة

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

سيتعلم المشاركون تطبيق تأثيرات التحريك عند التمرير والانتقال والتفاعل باستخدام CSS ومكتبات JavaScript.

المحاور

  • أهمية الحركة في تجربة المستخدم
  • الفرق بين transitions و keyframes
  • استخدام مكتبات AOS و GSAP
  • تفعيل الرسوم المتحركة أثناء التمرير
  • نصائح الأداء وأفضل الممارسات

مشاهدة الورشة

النماذج ­الأولية لتصميم المواقع والتطبيقات
النماذج ­الأولية لتصميم المواقع والتطبيقات
العطاء الرقمي

النماذج ­الأولية لتصميم المواقع والتطبيقات

عن الورشة

تقدّم هذه الورشة نظرة شاملة على أدوات وتقنيات بناء نماذج أولية فعالة في تصميم واجهات المستخدم وتجربة المستخدم.

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

المحاور

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

مشاهدة الورشة

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

تواجدك الرقمي صار أسهل

عن الورشة

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

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

المحاور

  • ما هو التواجد الرقمي وأهميته
  • التعرف على أدوات no-code و low-code
  • بناء صفحة هبوط باستخدام Carrd و Notion
  • ربط النماذج بأنظمة إدارة العملاء
  • أدوات مجانية لبناء الهوية الرقمية

مشاهدة الورشة

الاكتفاء الرقمي في بيئة العمل
الاكتفاء الرقمي في بيئة العمل
ويبينار التحول الرقمي

الاكتفاء الرقمي في بيئة العمل

عن الورشة

تعرّف في هذه الورشة على أهم الأساليب والأدوات التي تساعد الفرق والموظفين على تقليل الاعتماد على الخدمات الخارجية وبناء قدراتهم الرقمية الداخلية.

تركز الورشة على أدوات التعاون، الأتمتة، وتوثيق المعرفة داخل بيئة العمل.

المحاور

  • ما هو الاكتفاء الرقمي؟
  • الفرق بين الأدوات الداخلية والخدمات الخارجية
  • استخدام Notion و Google Workspace في التعاون
  • أتمتة المهام المتكررة بدون مبرمج
  • بناء أدلة داخلية وتوثيق المعرفة

مشاهدة الورشة

004

مقالات تقنية

كلود — أداة ذكاء اصطناعي سهلة الاستخدام للمطورين المبتدئين
كلود — أداة ذكاء اصطناعي سهلة الاستخدام للمطورين المبتدئين

كلود — أداة ذكاء اصطناعي سهلة الاستخدام للمطورين المبتدئين

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

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

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

ما يجعل كلود مفيدًا بشكل خاص للمبتدئين هو قدرته على شرح مواضيع البرمجة مثل الحلقات، والمصفوفات، والدوال، وGit، والاختبار، أو واجهات برمجة التطبيقات. على سبيل المثال، يمكنك أن تسأل: "ما الفرق بين حلقات for وحلقات while؟" أو "ما هو الوعد (Promise) في جافا سكريبت؟" وسيقدم شروحات واضحة مع أمثلة واقتراحات.

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

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

للراغبين في دمج كلود في سير العمل الخاص بهم، قم بتثبيت أداة كلود لسطر الأوامر. افتح الطرفية وقم بتشغيل 'npm install -g claude-cli' إذا كان لديك Node.js مثبتًا، أو قم بتنزيل الحزمة المناسبة لنظام التشغيل الخاص بك من بوابة مطوري أنثروبيك. بعد التثبيت، قم بالمصادقة عن طريق تشغيل 'claude auth login' واتباع الإرشادات لربط حسابك.

استخدام كلود للمساعدة في البرمجة أمر بديهي. جرب البدء بأسئلة مثل 'كيف أقرأ ملف JSON في بايثون؟' أو 'صحح هذه الدالة لي: [الصق الكود الخاص بك]'. يمكنك أيضًا استخدام أوامر مثل 'claude explain file.js' للحصول على تحليل مفصل لأي ملف كود، أو 'claude suggest' للحصول على توصيات لتحسين الكود الخاص بك. كلما قدمت سياقًا أكثر، كلما كانت استجابات كلود أكثر فائدة.

لمشاريع الفريق، قم بإنشاء ملف CLAUDE.md في جذر المستودع الخاص بك مع عبارات مثل 'استخدم دائمًا نمط camelCase لأسماء المتغيرات' أو 'قم بتضمين تعليقات مفصلة للوظائف المعقدة'. سيتذكر كلود هذه التفضيلات عندما تتفاعل معه. يمكنك أيضًا استخدام 'claude init' في مجلد المشروع الخاص بك لإنشاء قالب CLAUDE.md أولي يحتوي على معايير البرمجة الشائعة.

مع اكتساب المزيد من الراحة، استكشف ميزات كلود المتقدمة مثل إنشاء الكود ('claude generate component button--primary')، والاختبار الآلي ('claude test function calculateTotal')، أو حتى جلسات البرمجة الثنائية ('claude pair'). تحول هذه القدرات كلود من مجرد أداة للأسئلة والأجوبة إلى شريك تطوير تعاوني يتكيف مع مهاراتك المتنامية.

المراجع

مشاركة

تطبيقات الويب المحلية أولًا — بناء تجربة تعمل دون إنترنت
تطبيقات الويب المحلية أولًا — بناء تجربة تعمل دون إنترنت

تطبيقات الويب المحلية أولًا — بناء تجربة تعمل دون إنترنت

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

أحد أبرز التقنيات التي تُستخدم لبناء هذا النوع من التطبيقات هي IndexedDB، وهي قاعدة بيانات داخل المتصفح تسمح بحفظ بيانات معقدة مثل JSON أو ملفات. كذلك تُستخدم CRDTs (أنواع البيانات القابلة للتكرار دون تعارض) لإنشاء تزامن ذكي للبيانات دون حدوث تعارضات عند الاتصال بالخادم مجددًا. بالإضافة إلى ذلك، تُستخدم Service Workers لتخزين الصفحات والمصادر الضرورية وتوفيرها حتى أثناء انقطاع الإنترنت.

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

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

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

المراجع

مشاركة

هندسة الأوامر — مهارة المطور الأهم في هذا العقد
هندسة الأوامر — مهارة المطور الأهم في هذا العقد

هندسة الأوامر — مهارة المطور الأهم في هذا العقد

هندسة الأوامر (Prompt Engineering) هي المهارة التي تمكِّنك من التفاعل مع أدوات الذكاء الاصطناعي مثل Claude أو ChatGPT بطريقة فعالة. بدلًا من كتابة أوامر مبهمة، تساعدك هذه المهارة على صياغة أسئلة وتعليمات واضحة ومنظمة للحصول على نتائج دقيقة. كلما كانت طريقتك في الحديث مع الذكاء الاصطناعي أكثر وضوحًا، كلما حصلت على إجابات أفضل وأكثر فائدة.

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

من الأدوات المستخدمة في هندسة الأوامر: أسلوب few-shot وهو إعطاء أمثلة مسبقة، وأسلوب chain-of-thought الذي يطلب من الذكاء التفكير خطوة بخطوة قبل الإجابة. مثال عملي: "اشرح الكود سطرًا سطرًا ثم اقترح طريقة تحسينه." بهذه الطريقة تحصل على تفسير وتحليل في آن واحد.

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

إذا كنت مطورًا أو مبتدئًا في تعلم البرمجة، فابدأ بتجربة صياغة أوامر مختلفة وتعلّم من الاستجابات. قيّم جودة الإجابة، وراجع نفسك: هل كنت دقيقًا؟ هل قدمت سياقًا كافيًا؟ كل إجابة ضعيفة هي فرصة لتطوير مهارة جديدة. هذه المهارة لن تخدمك فقط الآن، بل ستكون من المهارات المطلوبة مستقبلاً في سوق العمل التقني.

المراجع

مشاركة

003

تواصل معي

إرسل استفسارك