TurboCoolStack

turbocoolstack ⚛

⚛ بدء تشغيل تطبيق التطبيقات متعددة المنصات

يوفر TurbocoolStack نقطة انطلاق قوية داخل Turborepo لبناء التطبيقات عبر منصات مختلفة ، ودمج الإلكترون ، و React (CRA ، Next.js) ، React Native (Expo - iOS ، Android) ، و CSS Tailwind لعملية تطوير مبسطة. تم تصميم هذا الإعداد لأولئك الذين يتطلعون إلى تطوير تطبيقات سطح المكتب والويب والجوال بكفاءة بجودة ثابتة وسير عمل مبسط.

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

؟ نظرة عامة على مساحات العمل

• التطبيق/المستندات : تطبيق ويب يعتمد على إنشاء تطبيق React مع CSS Tailwind.
• App/ElectronRenderer : يستخدم إنشاء تطبيق React مع CSS Tailwind ، لعملية عارض الإلكترون وتطوير تطبيق تطبيق سطح المكتب.
• APP/Electronmain : تعامل العملية الرئيسية للإلكترون ، التي تديرها WebPack ، المسؤولة عن التفاعلات الأساسية على مستوى OS.
• APP/ElectronBuilder : يشرف على مرحلة تغليف التطبيقات مع Electron Builder ، يتم تكليفه بتجميع وتجميع تطبيق سطح المكتب النهائي.
• التطبيق/الأصلي : تطبيق React Native يعتمد على المعرض مع CSS NativeWind.
• التطبيق/الويب : تطبيق ويب يرتكز على Next.js مع CSS Tailwind.
• الحزم/واجهة المستخدم : تعمل مساحة العمل هذه بمثابة مستودع مركزي لمكونات رد فعل واجهة المستخدم ، المصممة مع CSS Tailwind.

المتطلبات الأساسية

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

• Node.js : الإصدار 18.

• الغزل : الإصدار 4.

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

؟ الإعداد والتركيب

1. استنساخ المستودع.
2. تنفيذ yarn install في دليل الجذر لجلب جميع التبعيات.

أقترح استخدام الغزل للاتساق والكفاءة في عملية التطوير ، على الرغم من أن NPM لا يزال بديلاً.

الاستخدام

مع وجود التبعيات ، يمكنك الغوص في التنمية:

• قم بتشغيل yarn dev في دليل الجذر لإطلاق المشروع في وضع التطوير ، مع إكمال إعادة التحميل الساخن للتحديثات في الوقت الفعلي.
• قم بتشغيل yarn build في دليل الجذر عندما تكون جاهزًا لتجميع حزمة جاهزة للإنتاج لتطبيقك.

إن الفهم الأساسي لـ React و Turborepo و Next.js و Expo و Electron سيعزز تجربة التطوير الخاصة بك.

نظرة عامة على وضع التطوير

في وضع التطوير ، تهيئة مكونات مختلفة من التطبيق تلقائيًا.

• App/ElectronRenderer : سيتم تشغيل هذا الجزء تلقائيًا داخل نافذة الإلكترون. بالإضافة إلى ذلك ، لسهولة الوصول ، يتوفر من خلال متصفح الويب الخاص بك في المنفذ 3001.
• App/Electronmain : هذه هي المنطقة المخصصة لتكوين تطبيق سطح المكتب الإلكتروني. إنه أمر لا يتجزأ من سلوك العملية الرئيسية للتطبيق هنا. من إنشاء النوافذ إلى وظائف مخصصة ، يعد هذا الجزء محوريًا لأداء تطبيق سطح المكتب ومجموعة الميزات. تأكد من تكوين الإعدادات المصممة لتلبية احتياجات مشروعك.
• التطبيق/المستندات : ستبدأ مساحة العمل هذه تلقائيًا في نافذة المتصفح ، حيث يمكن الوصول إليها في المنفذ 3002.
• التطبيق/الويب : يختلف عن الآخرين ، لا يبدأ تطبيق Next.js تلقائيًا في المتصفح. يتطلب منك الانتقال يدويًا إلى http: // localhost: 3000/.
• App/Native : واحدة من أسهل طريقة هي استخدام تطبيق Expo GO على جهازك المحمول. أثناء وجودك في وضع التطوير ، تأكد من تسجيل الدخول إلى نفس حساب المعرض المجاني على كل من سطح المكتب والجهاز المحمول. سيعرض هذا المزامنة تلقائيًا روابط في تطبيق Expo GO ، مما يوجهك إلى مشروعك الحالي.

موارد

للحصول على أقصى استفادة من TurbocoolStack ، قد تجد أنه من المفيد التعرف على توثيق التقنيات المستخدمة. فيما يلي الروابط السريعة للوثائق الرسمية:

• Turborepo : الوثائق الرسمية
• Next.js : الوثائق الرسمية
• CSS Tailwind : الوثائق الرسمية
• الإلكترون : الوثائق الرسمية
• React Native : الوثائق الرسمية
• المعرض : الوثائق الرسمية

قائمة المهام

هناك تحسينات وميزات مستمرة في خط الأنابيب لتعزيز براعة وكفاءة turbocoolstack . فيما يلي بعض المهام على خريطة الطريق:

1. الملفات الثابتة المشتركة بين مساحات العمل :

   • حاليًا ، لاستخدام صورة واحدة عبر مساحات عمل متعددة ، من الضروري تكرار الملف في مجلد كل مساحة عمل public . أنا أهدف إلى حل مشكلة الملفات الثابتة لمنع التكرار وتحسين إدارة الموارد. اسمحوا لي أن أعرف إذا كنت تعرف كيف تتعامل معها؟

2. إنشاء packages/ui-native :

   • الهدف من ذلك هو إعداد مساحة عمل جديدة تدعى packages/ui-native وتكوين NativeWind داخلها. سيتيح هذا التحسين app/native بمشاركة المكونات مع packages/ui-native ، مما يؤدي إلى تبسيط عملية التطوير عبر المنصات الأصلية.

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

؟ استكشاف الأخطاء وإصلاحها القضايا المشتركة

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

المشكلة: بناء الفشل على Windows

المشكلة : قد يواجه المطورون فشل عملية البناء على وجه التحديد على أنظمة Windows أثناء مرحلة نسخ الملف داخل مساحة عمل apps/electronBuilder . تتوقف العملية بشكل غير متوقع ، مما يشير إلى الأخطاء التي ترتبط عادةً بتعليمات سطر الأوامر لنسخ الملفات وإزالتها.

السبب المحتمل : غالبًا ما تنشأ هذه المشكلة بسبب عدم التوافق بين أوامر shell معينة المستخدمة في البرامج النصية داخل package.json ومترجم سطر الأوامر Windows. يتم إعداد أوامر البرنامج النصي هذه للأنظمة المستندة إلى UNIX ولا يتم تنفيذها كما هو متوقع على Windows.

إصلاح سريع :

1. افتح ملف package.json في مساحة عمل apps/electronBuilder .
2. حدد موقع البرامج النصية.
3. تعديل هذه الأوامر لاستخدام معادلات Windows الخاصة بهم.
4. احفظ التغييرات الخاصة بك وإعادة تشغيل عملية الإنشاء.

 // Example modification in package.json (adjusting for Windows compatibility)
"scripts" : {
  // Modified for Windows
  "copy-main" : " xcopy .. \ electronMain \ dist dist-main \ /E /I /H /Y " , 
  "copy-renderer" : " xcopy .. \ electronRenderer \ build dist-renderer \ /E /I /H /Y " , 
  "copy" : " yarn copy-main && yarn copy-renderer " ,
  "clear" : " rimraf dist " ,
  "cleaning-up" : " rimraf dist-main && rimraf dist-renderer " , 
  "clean" : " rimraf dist && rimraf dist-main && rimraf dist-renderer " ,
  "build" : " yarn copy && electron-builder && yarn cleaning-up " ,

  // Original Unix commands
  "copy-main" : " cp -R ../electronMain/dist dist-main " ,
  "copy-renderer" : " cp -R ../electronRenderer/build dist-renderer " ,
  "copy" : " yarn copy-main && yarn copy-renderer " ,
  "clear" : " rm -rf dist " ,
  "cleaning-up" : " rm -rf dist-main && rm -rf dist-renderer " ,
  "clean" : " rm -rf dist && rm -rf dist-main && rm -rf dist-renderer " ,
  "build" : " yarn copy && electron-builder && yarn cleaning-up " ,
}

؟ رخصة

تم ترخيص هذا المشروع بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا وهو متاح مجانًا.

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

---

أظهر دعمك

إذا وجدت TurbocoolStack مفيدًا ، فكر في إعطاء المستودع نجمًا! يحفزني دعمك على الاستمرار في جعل هذا المشروع أفضل.

نجم الريبو هنا.

شكرا لكونك جزء من هذه الرحلة!

---