خان المُبرمجين (علي فاضل)
535 subscribers
91 photos
9 videos
115 links
قناة أنشر فيها ما أتعلمه خلال عملي على مشاريعي الخاصة 👀
Download Telegram
📢 مبادرة "رِباط التقنية" تعاون بين القنوات التقنية العربية 🔗

حرصًا على دعم المحتوى العربي في مجالات التقنية، نعلن عن تعاون مشترك بين مجموعة من القنوات العربية التقنية على تيليغرام، بهدف تبادل المعرفة، ونشر الفائدة، وتعزيز وصول المحتوى الجاد والمفيد لكل المهتمين بالتقنية.

وقد جُمعت هذه القنوات في قائمة واحدة، تيسيرًا للمتابعة ودعمًا للجهود المستقلّة في نشر العلم والمعرفة:

📄 رابط قائمة القنوات المشاركة:
https://t.me/addlist/Gg-LFze5N89mMTJk

نؤمن أن التعاون خير سبيل للرقيّ، وأنّ دعمكم هو أساس استمرار هذه المبادرات.
تابع، وانشر، وكن جزءًا من هذا الحراك التقني العربي.

🔹للانضمام إلى المبادرة، يُرجى التواصل:
👉 @alzaanad

#رباط_التقنية
#قنوات_تقنية_عربي
8
ودخلت الخيل الأزهر - محمد جلال كشك - صفحة 93

https://aljam3.com/ar/13909/33244/93
3
لمن يبحث عن مستقلِّين لتنفيذ المشاريع في كافة المجالات، هذا الموقع يربطك بمستقلين من غزة:

https://taqat-gaza.com/ar
11
مساهمة جديدة على "الجامع" 🚀

كما تعلم (أو ستعلم بعد كلمات قليلة) أن الجامع بُنِيَ باستخدام Ruby on Rails، والتي تأتي بصفحات أخطاء "بسيطة" إلى حد ما (موضّحة في الصورة الأولى)، ولكن أردنا إنشاء صفحات أخطاء جديدة بتصميم أفضل لتحسين تجربة المستخدم عند مواجهة أي خطأ (ونتمنى ألّا يواجه أحدٌ أي خطأ).

لذا أنشأت هذه المهمة:
https://github.com/ieasybooks/aljam3-web-app/issues/45

وظلّت مفتوحةً نحو شهرٍ، حتى جاء صاحب هذا الحساب على GitHub (منشنوه لو تعرفوه 🥲):
https://github.com/0xSm0ky

وقدّم طلب تعديل على المشروع:
https://github.com/ieasybooks/aljam3-web-app/pull/85

صمَّم صفحات جديدة باستخدام HTML و TailwindCSS دون الحاجة للتعامل مع Ruby أو Ruby on Rails!

قبِلتُ التعديل، ثم أضفت عليه تحسينات بسيطة لنقل الصفحات من مجرد ملفات HTML في مجلد public إلى داخل التطبيق نفسه لنستفيد من الترجمة التلقائية للصفحات والتصميم العام للموقع:
https://github.com/ieasybooks/aljam3-web-app/pull/91

وهنا أُعيد التأكيد، لا يجب أن تكون المساهمة في Ruby on Rails، فقط اقرأ المهمات المطلوبة وستجد ما يمكنك المساهمة فيه بإذن الله 😎
6👍2
مساهمة جديدة على "الجامع"، ولكن بأسلوب مختلف 🚀

بدأ الأخ مصطفى مرزوق في المساهمة على موقع الجامع من خلال شيء بسيط للغاية: التبليغ عن الأخطاء واقتراح التحسينات من خلال إنشاء مهمات على مستودع المشروع في GitHub!

فتح الأخ 9 مهمات منها:
- https://github.com/ieasybooks/aljam3-web-app/issues/106
- https://github.com/ieasybooks/aljam3-web-app/issues/108
- https://github.com/ieasybooks/aljam3-web-app/issues/110

ما دفعني للعمل على حل المشاكل وإضافة التحسينات المقترحة، رغم معرفتي المسبقة ببعضها ولكن لم أعطها الأولوية الكافية 😁 (الكسل)

بعد إنشاءه لكل هذه المهمات وفهمه للمشروع بشكل أفضل، ساهم في تنفيذ مهمة منها:
https://github.com/ieasybooks/aljam3-web-app/issues/110

من خلال هذا التعديل:
https://github.com/ieasybooks/aljam3-web-app/pull/119

فجزاه الله خيرا

وهذا يثبت ما أكرره، أنك تستطيع المساهمة ولو بالقليل، وبمرور الوقت يُصبح هذا القليل كثيرا بإذن الله، وما السيل إلا اجتماع النقط 😎
7
خان المُبرمجين (علي فاضل)
Photo
خلال العمل على تطبيقات الهاتف لموقع "الجامع"، اكتشفت أن النسخة الرابعة من TailwindCSS تحتاج إلى إصدارات مُعيّنة من المتصفحات حسب موقعهم الرسمي:
- Chrome 111 (أُصدر في 03/2023)
- Safari 16.4 (أُصدر في 03/2023)
- Firefox 128 (أُصدر في 07/2024)

مما يعني أن الموقع لن يعمل بكفاءة على المتصفحات القديمة!

تذكرت حينها ميزة جديدة أُضيفت إلى إطار عمل Ruby on Rails في نسخته 7.2 وهي ميزة allow_browsers.

تسمح لك هذه الميزة بتحديد أقل إصدارات المتصفحات التي يدعمها موقعك بإضافة سطر واحد في المتحكّم الرئيسي للموقع كما هو موضّح في الصورة الأولى.

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

أضفت هذا السطر إلى الجامع بالإصدارات التي يحتاجها TailwindCSS ثم تذكرت أن صفحة التنبيه في الأساس تستخدم TailwindCSS، فهذا أمر يحتاج إلى حلّ نُؤجِّله إلى وقت لاحق 😂

إذا أردت القراءة أكثر عن هذه الميزة في Ruby on Rails يمكنك الاطلاع على هذه الروابط:
- https://edgeapi.rubyonrails.org/classes/ActionController/AllowBrowser/ClassMethods.html
- https://blog.saeloun.com/2024/03/18/rails-7-2-adds-allow-browser-to-set-minimum-versions

والسلام عليكم 👋🏻
4
نُعلن اليوم عن تطبيق الجامع للهاتف المحمول 🚀

يمكنك تحميل التطبيق لأنظمة Android و iOS من خلال الروابط التالية:
- Google Play
- App Gallery
- App Store

حمّل التطبيق وشاركنا تجربتك لنعمل على تحسينه 😎✌🏻

رابط موقع الجامع:
https://aljam3.com

شارك مع أصدقائك لتعم الفائدة 🤩
10🔥1👨‍💻1
خان المُبرمجين (علي فاضل)
Photo
كيف صنعنا تطبيقات الهاتف لموقع الجامع؟
https://aljam3.com

كما تعلم عزيزي القارئ (أو ستعلم بعد كلمات قليلة) أن موقع الجامع بُنِيَ باستخدام Ruby on Rails، وهو إطار عمل لإنشاء المواقع وليس تطبيقات الهاتف، كالأُطُر الأخرى مثل Django و Laravel (ولكنه أفضل 😂 -أمزح فلا تنزعج 😁-).

سنة 2020 ظهرت لأول مرة فكرة Turbo Native (ثم أُعيد تسميتها إلى Hotwire Native)، وهي طريقة لبناء تطبيقات الهاتف بناء على موقعك المبني باستخدام Ruby on Rails، ثم انتشرت الفكرة إلى أُطُر عمل أخرى كـ Django (إذا لم يخب ظني).

الفكرة ببساطة تعتمد على استخدام Ruby on Rails -في نسخته السابعة ثم الثامنة- إطار عمل Hotwire وهو إطار عمل لواجهات المستخدم يعتمد على ثلاثة أجزاء:

- مكتبة Turbo لإدارة التحديثات الجزئية للصفحات من الخادم والتنقل بين الصفحات بتجربة مستخدم تشبه تجربة تطبيقات الصفحة الواحدة (SPA).
- مكتبة Stimulus لإدارة التفاعل في الصفحة كفتح القوائم وإنشاء المكوّنات التفاعلية وغيرها (نُسخة قليلة الدسم من أُطُر عمل واجهة المستخدم المُعقّدة).
- مكتبات Native، موضوع هذا المنشور.

من خلال مكتبات Native لأنظمة Android و iOS يمكنك بناء تطبيق للهاتف وعرض صفحات موقعك من الخادم مباشرة على WebView، ومكتبات Native تُسهّل عملية التواصل بين الـ WebView وجزء الـ Native من التطبيق.

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

أيضًا، تستطيع بناء مميزات تستخدم الـ Native APIs للهاتف كميزة تحميل الملفات وأزرار المشاركة ووصولا إلى بناء صفحات كاملة من خلال الـ Native Code والتنقّل بينها وبين الـ WebView بسهولة.

مثلا في الجامع لدينا 66 استخداما للدوال التالية:
- hotwire_native_app?
- android_native_app?
- ios_native_app?

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

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

ويبقى السؤال، هل التطبيقات في أفضل حالاتها؟ الجواب ببساطة: "لا"، لأنني لا أمتلك أي خبرة تقريبا في بناء تطبيقات الهاتف، فكنت أستخدم التقنية بشكل بدائي وبمساعدة Claude Code، ولكن لمن يمتلكون الخبرة، فالأمر سيكون مختلفًا بكل تأكيد.

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

يمكنك إلقاء نظرة عليها من هنا:
- https://play.google.com/store/apps/details?id=com.ieasybooks.aljam3
- https://apps.apple.com/jo/app/%D8%A7%D9%84%D8%AC%D8%A7%D9%85%D8%B9-%D9%85%D9%83%D8%AA%D8%A8%D8%A9/id6749810366

والسلام عليكم 👋🏻
9
بدأت مخرجات مؤتمر RailsWorld 2025 تطل علينا مع إطلاق Lexxy، محرر النصوص الجديد لإطار عمل Ruby on Rails بديل المحرر القديم Trix:

https://dev.37signals.com/announcing-lexxy-a-new-rich-text-editor-for-rails

القادم أجمل 😍
2
🔗 رِباط التقنية
مجمع القنوات العربيّة التقنية

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

📌 استعرض القنوات عبر الموقع:
https://alzanad.github.io/ribat-altaqniyyah

📜 اشترك مباشرةً في القائمة الموحّدة على تليجرام:
https://t.me/addlist/Gg-LFze5N89mMTJk

💬 للراغبين في الإضافة أو التواصل حول المبادرة:
@alzaanad

#رباط_التقنية
8🙏1
Media is too big
VIEW IN TELEGRAM
للمبرمجين: جولة في الواجهة البرمجية API لموقع الجامع 👨‍💻

يمكن استخدام هذه الواجهة البرمجية لبناء مشاريع منها:
- برنامج لسطح المكتب
- بوت لتطبيق Telegram
- إضافة للمتصفح

وغيرها الكثير 🚀

رابط التوثيق الخاص بالواجهة البرمجية:
https://aljam3.com/api-docs

رابط مستودع الشيفرة البرمجية لموقع الجامع:
https://github.com/ieasybooks/aljam3-web-app

المقطع على YouTube:
https://youtu.be/XGJ-BanIw9w
11
كنت أتابع تسجيلات مؤتمر RailsWorld لهذه السنة، فوجدت شعار تطبيق "باحث" في شريحة من شرائح إحدى الكلمات كمثال على تطبيقات Hotwire Native الموجودة على App Store و Google Play

الإمكانيات المتاحة للمطورين الأفراد باستخدام Ruby on Rails والنظام المحيط بها لا محدودة، جرّب لعلك تستفيد 😎

رابط التسجيل:
https://www.youtube.com/watch?v=VbMt_4STWIo
11🔥7🏆2
This media is not supported in your browser
VIEW IN TELEGRAM
بعد 6 سنوات (تقريبا) أترك Amazon (أخيرا) لأبدأ مرحلة جديدة كمهندس مؤسس (Founding Engineer) في شركة MilkStraw AI 🎉

متحمّس؟ نعم! خائف؟ أول تجربة لتغيير العمل 😅 مرتاح؟ الحمدلله 😎

ماذا نفعل في MilkStraw AI؟ نقلل فاتورتك على AWS (وغيرها قريبا) خلال 10 دقائق بنسبة تصل إلى 53% 🚀

شاهد موقعنا واسألني عن أي شيء 👨‍💻
https://milkstraw.ai
21
للأصدقاء في الأردن، يسرني دعوتكم لحدث مشترك بين MilkStraw AI و Stakpak 🎉

المكان: مقهى Respect
التاريخ: الأربعاء 2025/10/08
الوقت: الثامنة مساء

هدفنا التعارف وتبادل الخبرات، لا يوجد محاضرات أو عروض تقديمية 😎

رابط التسجيل:
https://luma.com/t6r86y0o

نراكم على خير بإذن الله 🚀
7
إذا كنت تستخدم Docker على MacOS فلا تستخدم Docker Desktop، فقط ثبّت Docker CLI من خلال الأمر brew install docker ثم استخدم Colima كـ runtime

https://github.com/abiosoft/colima
4