online edit web

منذ يوليو ، قمنا بإعادة إنشاء محرر الرمز عبر الإنترنت وأكملنا إصدارًا أساسيًا في غضون شهر واحد. بعد شهرين أكملنا الوظيفة الأساسية للمحرر: التعاون.

قبل البدء ، دعنا ننشر العنوان ذي الصلة أولاً. إذا كان الأمر مفيدًا لك ، مرحبًا بك في Star:

1. عنوان المستودع الأمامي

2. عنوان المعاينة الأمامية (يمكن تشغيل مشروع React مباشرة)

3. عنوان معاينة الواجهة الأمامية (يمكن أن يدرك التعاون)

4. عنوان المستودع الخلفي

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

الاختيار الفني

لكتابة مشروع مفتوح المصدر ، فإن أهم شيء هو بالتأكيد الأكثر أهمية. يستخدم الواجهة الأمامية NextJs ، ويستخدم الواجهة الخلفية Nestjs.

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

يدمج Next.js بيئات React و Node.js ، يمكن للمطورين البدء بسرعة باستخدام بناء جملة React Depaly دون تكوين أدوات بناء معقدة. في المشاريع التي تعتمد بشكل أقل على الواجهة الخلفية ، يمكنك استخدام NextJs لتنفيذ مشاريع الكامل دون الحاجة إلى مكتوبة إضافية للكتابة.

ثانياً ، إنه أكثر ملاءمة عن بُعد. من بين الأشخاص الذين تتواصلوا معهم ، يميل بعض الأصدقاء إلى العثور على وظيفة بعيدة. في المواقف البعيدة التي قابلتها وعملت عليها ، فإن مكدس التكنولوجيا الأساسي المستخدم هو NEXTJS. هذا أولاً وقبل كل شيء ، وذلك بفضل وظيفة تقديمها من جانب الخادم وأكثر ملائمة لكبار المسئولين الاقتصاديين. نقطة أخرى هي أن البيئة كاملة أيضًا ، مثل Tailwindcss و Shadcn و Zustand و SWR ، وما إلى ذلك. كما توفر Vercel للنشر المجاني ، وقواعد بيانات مجانية مثل Supabase.

بالنسبة إلى سبب اختيار Nestjs ، ربما لا تحتاج إلى شرح ذلك.

التنفيذ الوظيفي

بعد ذلك ، سأشارك بعض وظائفها معك حتى تتمكن من فهم شامل لهذا المشروع:

الصفحة الأولى

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

لوحة التحكم

بعد النقر على لوحة التحكم ، ستدخل لوحة القيادة. إذا لم يتم تسجيل الدخول ، فسوف تقفز إلى صفحة تسجيل الدخول:

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

أدخل لوحة التحكم ، حيث يمكننا اختيار إنشاء مشروع أو إنشاء مستند تعاوني:

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

هناك الصورة الرمزية الجميلة هنا ، أحبها كثيرًا:

تعديل الكود

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

الآن نقوم بتنفيذ PNPM لهذا المشروع لتثبيت حزم التبعية ذات الصلة ، وتنفيذ pnpm dev لبدء هذه المشاريع:

بحث الملف

بالإضافة إلى شجرة الملفات ، نقدم أيضًا وظائف مماثلة لـ VScode ، بحث الملف:

يمكنك أيضًا الكتابة على شاشة الانقسام:

سمة محرر التبديل

هنا يمكننا أيضًا تبديل موضوع المحرر ، وهنا نقدم موضوعات متعددة للاختيار من بينها:

مشترك

هذه المرة سنعود إلى وظيفتنا الأساسية: التحرير التعاوني. أولاً ، نحتاج إلى إنشاء مستند على لوحة التحكم في لوحة القيادة:

بعد اكتمال الإنشاء ، سترى مثل هذا التأثير:

انقر لمشاركة المستند ومشاركة المستند مع الأصدقاء الآخرين لتحريره معًا:

تأثير التحرير التعاوني النهائي:

كيف يتم تنفيذ التعاون؟

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

1. الواجهة الأمامية

   1. Y-Monaco: يدمج وظيفة التعاون في الوقت الفعلي لـ YJS مع محرر Monaco ، مما يوفر مزامنة بيانات التحرير التعاونية الافتراضية وتأثير واجهة المستخدم التعاونية.

   2. Y-Websocket: يوفر محول WebSocket من YJS وظيفة مزامنة البيانات في الوقت الفعلي ، مما يسمح لعدة عملاء بالتعاون في التحرير من خلال WebSocket.

   3. YJS: إطار عمل CRDT عالي الأداء يدعم التعاون في الوقت الفعلي والتحرير دون اتصال ، ودمج التغييرات تلقائيًا في أنواع المشاركة للتعامل مع النزاعات ، ومناسبة للسيناريوهات مع مستندات كبيرة ومستخدمين غير محدودين.

   4. المؤسسات المثالية: يوفر حركة ماوس ناعمة.

2. نهاية الطريق

   1. y-websocket: yjs يغلف المنطق التعاوني

   2. Y-mongodb-provider: التخزين المستمر

المساهمين

شكرا لكل من ساهم في هذا المشروع!

إذا كان هذا المشروع مفيدًا لك أو مهتمًا بهذا المشروع ، فلا مهما مرحبًا بك في Star️

أخيرًا ، دعونا نذكر هذين المشروعين مفتوح المصدر ، وكلاهما مشاريع مفتوحة المصدر نحتفظ بها حاليًا:

• محرر تعاوني رمز عبر الإنترنت

• سقالة الطرف الأمامي خلق معي

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