Skip to content

التطوير والإبداع

4 تطبيقات تغطي البرمجة الخفيفة والإبداع المرئي مباشرة في المتصفح. نفس محرك VS Code لتحرير الكود، عميل API على نمط Postman لتصحيح الخدمات، أدوات رسم تفاعلية لـ wireframe و brainstorm.


👨‍💻 Roque Code — محرر الكود (محرك Monaco/VS Code)

محرر كود حديث مع نفس محرك VS Code (Monaco). تمييز الصيغة، autocomplete، multi-cursor، البحث والاستبدال مع regex — دون تثبيت أي شيء.

الوظائف

  • 🎨 تمييز الصيغة لـ 50+ لغة — JS/TS، Python، Go، Rust، Java، C/C++، Ruby، PHP، Swift، Kotlin، Shell، SQL، HTML/CSS، JSON/YAML/TOML، Markdown، Vue، Svelte، Astro، إلخ
  • 🤖 Autocomplete IntelliSense: متغيرات في scope، خصائص الكائنات، snippets للغة
  • Multi-cursor: Alt+Click يضيف cursor، Ctrl+D يحدد الحدوث التالي (مثل VS Code)
  • 🔍 Find & Replace مع regex (Ctrl+F / Ctrl+H)، find in selection only
  • 📑 ملفات متعددة في علامات تبويب (Ctrl+Tab للتبديل)
  • 🌳 Outline panel مع رموز الملف (دوال، classes)
  • 🪄 Format on save مع Prettier مدمج لـ .js/.ts/.vue/.json/.md
  • 🎨 السمات: VS Code default + Dracula + Monokai + Solarized
  • 💾 حفظ تلقائي كل 3 ثوانٍ (لا يفقد الكود إذا تعطل المتصفح)

الفرق مع VS Code الكامل

الجانبRoque CodeVS Code (تطبيق مخصص)
المحركMonaco (مثل VSCode)Electron + Monaco
الإضافات❌ لا يدعم marketplace✅ كلها
الطرفية المدمجة❌ (استخدم تطبيق Terminal منفصل)
تكامل Git
اللغات المدعومة50+ syntax highlight100+ + LSP

استخدم Roque Code لـ: تحرير config (json/yaml)، سكربت سريع، prototype، snippet لمنشور مدونة.

لمشروع fullstack مع Git: استخدم VS Code المتكامل لـ RoqueOS Server — code-server حقيقي مع extensions.

الاختصارات

المفتاحالإجراء
Ctrl+Sحفظ
Ctrl+F / Ctrl+HFind / Replace
Ctrl+Dتحديد الحدوث التالي
Ctrl+/تبديل التعليق
Alt+↑/↓نقل السطر لأعلى/لأسفل
Shift+Alt+↓تكرار السطر
Ctrl+Shift+Kحذف السطر
Ctrl+PQuick open (بحث بالملف)

🛠️ Roqueman — عميل API (HTTP / WebSocket / GraphQL)

عميل API كامل على نمط Postman/Insomnia، ولكن داخل RoqueOS. يدعم 3 بروتوكولات يستخدمها devs يوميًا.

HTTP

  • 🌐 الطرق: GET، POST، PUT، PATCH، DELETE، OPTIONS، HEAD
  • 📋 Headers: محرر جدول، مع اقتراحات الترويسات القياسية (Content-Type، Authorization، إلخ)
  • 🔐 Auth: Bearer Token، Basic، API Key (header/query/cookie)، OAuth 2.0، AWS Signature v4
  • 📦 Body: JSON، form-data، x-www-form-urlencoded، raw text، تحميل ملف، binary
  • 📜 Response: JSON منسق مع fold، raw، معاينة HTML، headers، cookies، التوقيت
  • 🔍 JSON path filter: طبق $.data[0].nome مباشرة في response للتصحيح السريع
  • 🕰️ التاريخ آخر 100 طلب
  • 📚 Collections: نظم endpoints في مجلدات، تصدير/استيراد تنسيق Postman

WebSocket

  • 🔌 الاتصال: ws:// أو wss://، مع headers/auth مثل HTTP
  • 📤 Send: نص، JSON، binary
  • 📥 Receive: قائمة كرونولوجية للرسائل مع timestamp
  • 🎯 Filter: يصفي received messages حسب substring أو regex
  • 🔄 Auto-reconnect: اختياري، مع backoff

GraphQL

  • 📝 Query editor مع syntax highlight + autocomplete على أساس schema (introspection)
  • 🔍 Schema explorer: شجرة قابلة للتنقل للـ types/fields المتاحة
  • 📊 Variables panel: JSON منفصل للقيم
  • 📜 Saved queries (مع الإصدارات)

متغيرات البيئة

أنشئ environments (Dev، Staging، Prod) مع vars مثل ، . تستبدل URL و headers تلقائيًا. تبديل البيئة = انقر على dropdown.

الفرق مع Postman

  • لا يوجد تسجيل دخول إلزامي — يطلب Postman الآن حسابًا
  • تبقى البيانات في RoqueOS الخاص بك (Firestore)، وليس على خادم طرف ثالث
  • يعمل داخل سطح المكتب — يمكن أن يكون لديك Roqueman + Terminal + Browser جنبًا إلى جنب
  • مزامنة عبر الأجهزة تلقائية (الجوال، سطح المكتب، إلخ)

القيود

  • لا يوجد mock server (Postman لديه)
  • لا يوجد CI runner (Newman) — للاختبارات الآلية، صدّر إلى Postman واستخدم Newman الخارجي

🎨 Paint — محرر صور ورسومات

Web Paint تفاعلي مع فرش وأشكال وطبقات ومرشحات. يستبدل "Paint" Windows مع بعض وظائف Photoshop الأساسية.

الوظائف

  • 🖌️ فرش: قلم رصاص، قلم، علامة، رذاذ، ممحاة. كل واحد بحجم/شفافية
  • 🎨 الألوان: HEX picker + لوحة + dropper (الحصول على لون من الصورة)
  • 📐 الأشكال: مستطيل، دائرة، خط، سهم، مضلع (مع fill و contour منفصل)
  • ✏️ النص: 5 خطوط مدمجة + الحجم + بولد/مائل
  • 🗂️ الطبقات: حتى 10 layers مع opacity فردي + blend modes (normal / multiply / screen)
  • ↩️ Undo/Redo غير محدود (حتى إغلاق التطبيق)
  • 🎭 المرشحات: blur، sharpen، grayscale، sepia، brightness، contrast، hue rotate
  • 📐 تغيير الحجم / القص مع guides
  • 💾 التصدير: PNG، JPG (مع الجودة)، WebP، SVG (طبقات vector فقط)

حالات الاستخدام

  • mockup سريع للشاشة أو wireframe
  • علِّق على screenshot لكي يفهم الفريق الخطأ
  • شعار بسيط / بانر لـ Insta
  • تحرير صورة شخصية (تغيير الحجم، القص، تعديل اللون)

للتصميم الاحترافي، استخدم Figma أو Photoshop. للمسات سريعة، Paint يغطي 80٪ من الحالات.


📋 Whiteboard — لوحة لا نهائية لـ brainstorm

سبورة بيضاء مع canvas لا نهائي، مثالية لتنظيم الأفكار، خرائط ذهنية، تدفق العمليات، استعادة الفريق.

الوظائف

  • ♾️ Canvas لا نهائي: اسحب إلى أي اتجاه، تكبير 25٪-400٪
  • 🖌️ قلم حر (مع pressure-sensitive في Apple Pencil / S Pen)
  • 📐 الأشكال: أسهم، مستطيلات، دوائر، خطوط مع snap تلقائي
  • ✏️ sticky notes ملونة: drag-and-drop لإعادة التموضع
  • 🔗 الموصلات: خطوط/أسهم تتبع الأشكال عند تحريكها (ضروري للخريطة الذهنية)
  • 📷 الصور: الصق screenshot مباشرة (Ctrl+V) أو ارفع
  • 👥 Multi-pointer (مخطط): عدة مستخدمين على نفس اللوحة بمؤشرات مختلفة
  • 💾 حفظ تلقائي + تصدير PNG/SVG للوحة كاملة أو المنطقة المحددة
  • 🎨 القوالب: SWOT، Lean Canvas، retrô (start/stop/continue)، KWL، Eisenhower matrix، kanban

الجوال

Touch-first: pinch-to-zoom، إصبعين لسحب canvas، إصبع واحد للرسم. Apple Pencil + S Pen pressure-sensitive يعملان بشكل أصلي.

حالات الاستخدام

  • 📊 جلسة brainstorm مع sticky notes + أسهم
  • 🗺️ خريطة ذهنية لمشروع جديد
  • 🔄 استعادة sprint (أعمدة Start/Stop/Continue)
  • 🎯 Wireframing لتدفق UX
  • 📚 دراسة: خريطة الاتصال بين المفاهيم

الفرق مع Miro/Mural

  • لا يوجد تسجيل دخول إلزامي لطرف ثالث
  • مجاني للأبد (Miro/Mural يفرضون رسومًا بعد 3-5 لوحات)
  • يعمل دون اتصال بعد التحميل الأول (PWA cache)
  • ⚠️ Multi-pointer التعاوني لا يزال على خارطة الطريق (Miro أكثر نضجًا)

انظر أيضًا