خان المُبرمجين (علي فاضل)
534 subscribers
91 photos
9 videos
115 links
قناة أنشر فيها ما أتعلمه خلال عملي على مشاريعي الخاصة 👀
Download Telegram
نُعلن اليوم عن تطبيق الجامع للهاتف المحمول 🚀

يمكنك تحميل التطبيق لأنظمة 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
بعد انقطاع أسبوع تقريبا عن Discord لأسباب خارجة عن إرادة الشعب، عدت اليوم بعد تثبيت WARP من Cloudflare سهل التثبيت ويعمل بدون مشاكل 😄

وبعد مراجعة كل ما فاتني من رسائل، وجدت هذا الرابط في رسالة منها:
https://railsblocks.com

قد تكون أفضل مكتبة مكوِّنات واجهة مستخدم عرفتها إلى الآن مخصصة لإطار عمل Ruby on Rails، جارٍ التجربة 🤩
3
انتهت الدراما الحاصلة في مجتمع Ruby أخيرا 🤓

https://www.ruby-lang.org/en/news/2025/10/17/rubygems-repository-transition

النتيجة: Bundler و RubyGems ستُدار كما تُدار لغة Ruby من قِبل Matz وفريق لغة Ruby الأساسي وستنتقل المستودعات من مؤسسة RubyCentral على GitHub إلى مؤسسة Ruby 🎉
7
خوادم Discord أنصح كل مهتم بـ Ruby on Rails بالانضمام إليها:
- Naming Things: https://discord.gg/2Kxg6fbd
- GoRails: https://discord.gg/gorails-874684608686477352
- Kamal: https://discord.gg/UEee8VeK
- Masilotti.com: https://discord.gg/sxP2gdWw
8👍1
من مشاكل النماذج اللغوية في البرمجة هي مشكلة وهم الكمال (تسمية مُنمّقة 😂).

مثلا، تطلب من النموذج تعديل دالة معينة لتغيير شكل القيمة الخارجة منها، فيبدأ النموذج بـ"التفكير" خارج نطاق المطلوب و"يخطط" للتعديلات المطلوبة في المواضع التي تُستخدم فيها هذه الدالة.

هذا الأمر يشتت النموذج أحيانا ويُنتج تعديلات كثيرة قد لا تحتاجها أثناء تجربتك للفكرة التي طلبتها منه.

لذلك أصبحت دقيقا جدا في صياغة طلباتي وفي كل مرة أخبره "لا تهتم باستخدامات هذه الدالة، سأعدلها لاحقا بنفسي".
6👍1
كنت أشرح Hotwire (وهو الـ Frontend Stack الخاص بـ Ruby on Rails) خلال جلسة لمشاركة المعرفة في MilkStraw AI واكتشفنا أن منصتنا تُعيد تحميل الصفحة بالكامل عند التنقّل بين الصفحات!

وقبل أن تقول أن هذا هو الطبيعي، فيا صديقي Turbo (وهي جزء من Hotwire) تضمن لك تحميل الصفحة مرة واحدة، ثم مع كل تنقّل لصفحة جديدة تقوم Turbo بتغيير الـ Body الخاص بالصفحة فقط ولا تُعيد تحميل كل مكونات الصفحة من CSS و JS وغيرها.

في أي مشروع يستخدم Ruby on Rails، التنقّل بين الصفحات يتم من خلال طلب أو Request من نوع Fetch من خلال JS ولا نستخدم (في غالب الأحيان) أي طلبات من نوع Document، كما هو موضّح في الصورة.

الطلبات من نوع Fetch لا تُعيد تحميل الصفحة ومكوناتها بالكامل، أما الطلبات من نوع Document فهي تُعيد تحميل كامل مكونات الصفحة، وهذا هو الفرق الأساسي.

لم نهتم لإيجاد الحل خلال جلسة مشاركة المعرفة لأننا وجدنا المشكلة في أول 5 دقائق منها وكان هناك الكثير من الأشياء لشرحها.

قبل النوم، فتحت تطبيق GitHub على الهاتف وسألت Copilot عن المشكلة، وكان جوابه سيئًا وغير مفيد، لكنه كان ملهما 😂

بعد قراءة الجواب، فتحت ملف head.rb وهو المكوّن الخاص برأس الصفحة (HTML head) وقرأته، لأجد السطر التالي:

raw(cloudflare_turnstile_script_tag)


نستخدم في MilkStraw AI خدمة Cloudflare Turnstile، وهذا السطر يُضيف الـ Script الخاص بالخدمة إلى رأس الصفحة، ولكن خلال عملي على مشروع الجامع سبَّبَ لي هذا السطر مشكلة من نفس النوع، إعادة تحميل كاملة للصفحة!

ذهبت إلى ملف head.rb في مشروع الجامع لأجد أنني أزلت السطر السابق واستبدلته بشيفرة برمجية أخرى تجدونها في هذا الرابط:
https://github.com/ieasybooks/aljam3-web-app/blob/main/app/components/head.rb#L73-L78

وكان السبب:

Renders the below script tag with 
data_turbo_temporary: true
, which causes full page reloads.


أي أن استخدام cloudflare_turnstile_script_tag كان فعلا يسبب إعادة تحميل كاملة للصفحة في الجامع بسبب استخدام data_turbo_temporary: true.

أضفت نفس التعديل إلى MilkStraw AI (وكان طلب التعديل رقمه 1,000 على GitHub 🎉) ونشرنا النسخة الجديدة من المنصة وحُلَّت المشكلة 🚀

كانت المشكلة تتعلّق بكيفية عمل ميزتين من ميزات Turbo:
- data-turbo-temporary
- data-turbo-track

يمكن أن تقرأ عنهم أكثر من هذه الصفحة:
https://turbo.hotwired.dev/reference/attributes

والسلام عليكم 👋🏻
5👍3
لا أنشر خارج نطاق التقنية غالبا، ولكن السيد عمر يُبدع 😎✌🏻

https://youtu.be/IflzCK3JB2Q
3