ดาวน์โหลด TurboCoolStack - ดาวน์โหลดซอร์สโค้ด TurboCoolStack ดาวน์โหลด

TurboCoolStack

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

โลโก้ Turbocoolstack

turbocoolstack ⚛

⚛การพัฒนาแอพพลิเคชั่นการพัฒนาแอพหลายแพลตฟอร์มเริ่มต้น

Turbocoolstack เป็นจุดเริ่มต้นที่แข็งแกร่งภายใน turborepo สำหรับการสร้างแอพพลิเคชั่นในแพลตฟอร์มที่แตกต่างกันการรวมอิเล็กตรอน, React (CRA, Next.js), React Native (Expo - iOS, Android) และ CSS Tailwind สำหรับกระบวนการพัฒนาที่คล่องตัว การตั้งค่านี้ได้รับการออกแบบทางวิศวกรรมสำหรับผู้ที่ต้องการพัฒนาแอพพลิเคชั่นเดสก์ท็อปเว็บและมือถืออย่างมีประสิทธิภาพด้วยคุณภาพที่สอดคล้องกันและเวิร์กโฟลว์ที่คล่องตัว

สิ่งสำคัญ : หนึ่งในคุณสมบัติหลักของ turbocoolstack คือแอปพลิเคชันเกือบทั้งหมดใช้ประโยชน์จากแหล่งที่มาทั่วไปของส่วนประกอบปฏิกิริยาที่อยู่ใน แพ็คเกจ/UI โครงสร้างนี้ส่งเสริมความสม่ำเสมอและประสิทธิภาพในการพัฒนา นอกจากนี้พื้นที่ทำงานทั้งหมดยังแบ่งปันการกำหนดค่า CSS Tailwind ทั่วไปเพื่อให้มั่นใจว่าระบบการออกแบบที่สอดคล้องกันในทุกแพลตฟอร์ม

- ภาพรวมพื้นที่ทำงาน

แอพ/เอกสาร : เว็บแอปที่ใช้แอพสร้างปฏิกิริยากับ Tailwind CSS
App/Electronrenderer : ใช้แอพสร้างปฏิกิริยากับ Tailwind CSS สำหรับกระบวนการเรนเดอร์อิเล็กตรอนและการพัฒนาแอพเดสก์ท็อป UI
App/Electronmain : จัดการกระบวนการหลักของอิเล็กตรอนซึ่งจัดการโดย WebPack ซึ่งรับผิดชอบในการโต้ตอบระดับระบบปฏิบัติการหลัก
App/ElectronBuilder : ดูแลขั้นตอนบรรจุภัณฑ์ของแอปพลิเคชันด้วยตัวสร้างอิเล็กตรอนมันได้รับมอบหมายให้รวบรวมและประกอบแอปพลิเคชันเดสก์ท็อปสุดท้าย
แอป/เนทีฟ : แอพดั้งเดิมที่ใช้งานแสดงสินค้ากับ NativeWind CSS
แอพ/เว็บ : เว็บแอปที่มีพื้นฐานอยู่ที่ next.js กับ tailwind css
แพ็คเกจ/UI : พื้นที่ทำงานนี้ทำหน้าที่เป็นที่เก็บกลางสำหรับส่วนประกอบ UI React, สไตล์ด้วย Tailwind CSS

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะดำเนินการตั้งค่าให้แน่ใจว่าสภาพแวดล้อมการพัฒนาของคุณตรงตามข้อกำหนดดังต่อไปนี้ โครงการนี้ถูกสร้างขึ้นด้วยโหนดและเส้นด้ายรุ่นเฉพาะเพื่อหลีกเลี่ยงปัญหาความเข้ากันได้และใช้ประโยชน์จากคุณสมบัติล่าสุดของพวกเขา นี่คือเวอร์ชันที่คุณต้องการ:

Node.js : เวอร์ชัน 18
เส้นด้าย : เวอร์ชัน 4

ด้วยการใช้เวอร์ชันเดียวกันคุณจะสอดคล้องกับสภาพแวดล้อมการพัฒนาดั้งเดิมของโครงการซึ่งจะช่วยลดปัญหาที่อาจเกิดขึ้นกับความแตกต่างของเวอร์ชัน

- การตั้งค่าและการติดตั้ง

โคลนที่เก็บ
ดำเนินการ yarn install ในไดเรกทอรีรากเพื่อดึงการพึ่งพาทั้งหมด

ฉันแนะนำให้ใช้เส้นด้ายเพื่อความสอดคล้องและประสิทธิภาพในกระบวนการพัฒนาแม้ว่า NPM ยังคงเป็นทางเลือก

การใช้งาน

ด้วยการพึ่งพาในสถานที่คุณสามารถดำน้ำในการพัฒนา:

เรียกใช้ yarn dev ในไดเรกทอรีรากเพื่อเปิดโครงการในโหมดการพัฒนาพร้อมด้วยการโหลดซ้ำสำหรับการอัปเดตแบบเรียลไทม์
เรียกใช้ yarn build ในไดเรกทอรีรากเมื่อคุณพร้อมที่จะรวบรวมแพ็คเกจที่พร้อมผลิตของแอปพลิเคชันของคุณ

ความเข้าใจพื้นฐานของ React, Turborepo, Next.js, Expo และ Electron จะช่วยเพิ่มประสบการณ์การพัฒนาของคุณ

ภาพรวมโหมดการพัฒนา

ในโหมดการพัฒนาส่วนประกอบต่าง ๆ ของแอปพลิเคชันเริ่มต้นโดยอัตโนมัติ

App/Electronrenderer : ส่วนนี้จะเปิดตัวภายในหน้าต่างอิเล็กตรอนโดยอัตโนมัติ นอกจากนี้เพื่อการเข้าถึงที่ง่ายขึ้นสามารถใช้งานได้ผ่านเว็บเบราว์เซอร์ของคุณที่พอร์ต 3001
App/Electronmain : นี่คือพื้นที่ที่กำหนดสำหรับการกำหนดค่าแอปพลิเคชันเดสก์ท็อปอิเล็กตรอนของคุณ มันเป็นส่วนสำคัญในการกำหนดพฤติกรรมของกระบวนการหลักของแอปที่นี่ จากการสร้างหน้าต่างไปจนถึงฟังก์ชันการทำงานที่กำหนดเองส่วนนี้เป็นหัวใจสำคัญสำหรับประสิทธิภาพและชุดคุณสมบัติของแอพเดสก์ท็อป ตรวจสอบให้แน่ใจว่าได้กำหนดค่าการตั้งค่าที่เหมาะกับความต้องการของโครงการของคุณ
แอพ/เอกสาร : พื้นที่ทำงานนี้จะเริ่มต้นในหน้าต่างเบราว์เซอร์โดยอัตโนมัติและสามารถเข้าถึงได้ที่พอร์ต 3002
แอพ/เว็บ : แตกต่างจากแอปพลิเคชันอื่น ๆ แอปพลิเคชัน next.js นี้ไม่ได้เริ่มต้นโดยอัตโนมัติในเบราว์เซอร์ มันต้องการให้คุณนำทางด้วยตนเองไปยัง http: // localhost: 3000/
แอพ/เนทีฟ : หนึ่งในวิธีที่ง่ายที่สุดคือการใช้แอพ Expo Go บนอุปกรณ์มือถือของคุณ ในขณะที่อยู่ในโหมดการพัฒนาให้แน่ใจว่าคุณได้ลงชื่อเข้าใช้บัญชี Expo ฟรีเดียวกันทั้งบนเดสก์ท็อปและอุปกรณ์มือถือของคุณ การซิงโครไนซ์นี้จะแสดงลิงก์โดยอัตโนมัติในแอพ Expo GO โดยนำคุณไปยังโครงการปัจจุบันของคุณ

ทรัพยากร

เพื่อให้ได้ประโยชน์สูงสุดจาก turbocoolstack คุณอาจพบว่ามีประโยชน์ในการทำความคุ้นเคยกับเอกสารของเทคโนโลยีที่ใช้ นี่คือลิงค์ด่วนไปยังเอกสารอย่างเป็นทางการ:

turborepo : เอกสารอย่างเป็นทางการ
next.js : เอกสารอย่างเป็นทางการ
Tailwind CSS : เอกสารอย่างเป็นทางการ
อิเล็กตรอน : เอกสารอย่างเป็นทางการ
React Native : เอกสารอย่างเป็นทางการ
Expo : เอกสารอย่างเป็นทางการ

รายการสิ่งที่ต้องทำ

มีการปรับปรุงและคุณสมบัติอย่างต่อเนื่องในท่อเพื่อเพิ่มความหลากหลายและประสิทธิภาพของ turbocoolstack นี่คืองานบางอย่างบนแผนงาน:

ไฟล์คงที่ที่ใช้ร่วมกันระหว่างพื้นที่ทำงาน :
- ขณะนี้ในการใช้ภาพเดียวในพื้นที่ทำงานหลายแห่งจำเป็นต้องทำซ้ำไฟล์ลงในโฟลเดอร์ public ของเวิร์กสเปซแต่ละแห่ง ฉันมีเป้าหมายที่จะแก้ปัญหาสำหรับไฟล์คงที่เพื่อป้องกันความซ้ำซ้อนและปรับปรุงการจัดการทรัพยากร แจ้งให้เราทราบหากคุณรู้วิธีจัดการกับมัน?.
การสร้าง packages/ui-native :
- เป้าหมายคือการตั้งค่าพื้นที่ทำงานใหม่ชื่อ packages/ui-native และกำหนดค่า NativeWind ภายใน การปรับปรุงนี้จะช่วยให้ app/native ร์กสเปซมีส่วนร่วมแบ่งปันส่วนประกอบกับ packages/ui-native ทำให้กระบวนการพัฒนาผ่านแพลตฟอร์มพื้นเมือง

การทำงานเหล่านี้จะช่วยให้ Turbocoolstack มีประสิทธิภาพมากขึ้นและเป็นมิตรกับนักพัฒนาได้อย่างมีนัยสำคัญ ยินดีต้อนรับการมีส่วนร่วมหรือคำแนะนำสำหรับสิ่งที่ต้องทำเหล่านี้!

- การแก้ไขปัญหาปัญหาทั่วไป

การพัฒนาข้ามแพลตฟอร์มและสภาพแวดล้อมที่แตกต่างกันบางครั้งอาจนำไปสู่ปัญหาที่ไม่คาดคิด ส่วนนี้มีวัตถุประสงค์เพื่อแก้ไขปัญหาทั่วไปที่คุณอาจพบเมื่อทำงานกับ turbocoolstack

ปัญหา: สร้างความล้มเหลวบน Windows

ปัญหา : นักพัฒนาอาจประสบกับความล้มเหลวของกระบวนการในการสร้างโดยเฉพาะบนระบบ Windows ระหว่างขั้นตอนการคัดลอกไฟล์ภายในพื้นที่ทำงานของ apps/electronBuilder การดำเนินการหยุดโดยไม่คาดคิดระบุข้อผิดพลาดที่มักเกี่ยวข้องกับคำสั่งบรรทัดคำสั่งสำหรับการคัดลอกและลบไฟล์

สาเหตุที่เป็นไปได้ : ปัญหานี้มักเกิดขึ้นเนื่องจากความไม่ลงรอยกันระหว่างคำสั่งเชลล์บางอย่างที่ใช้ในสคริปต์ภายใน package.json และล่ามบรรทัดคำสั่ง Windows คำสั่งสคริปต์เหล่านี้ถูกตั้งค่าสำหรับระบบที่ใช้ UNIX และไม่ดำเนินการตามที่คาดไว้ใน Windows

การแก้ไขด่วน :

เปิดไฟล์ package.json ในพื้นที่ทำงานของ apps/electronBuilder
ค้นหาสคริปต์
แก้ไขคำสั่งเหล่านี้เพื่อใช้ Windows เทียบเท่า
บันทึกการเปลี่ยนแปลงของคุณและเรียกใช้กระบวนการสร้างอีกครั้ง

 // 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 " ,
}

- ใบอนุญาต

โครงการนี้ได้รับใบอนุญาตภายใต้ข้อกำหนดของใบอนุญาต MIT และสามารถใช้ได้ฟรี

อย่าลังเลที่จะใช้และแก้ไข codebase สำหรับวัตถุประสงค์ส่วนตัว บริษัท หรือการศึกษาของคุณ ไม่จำเป็นต้องมีการระบุแหล่งที่มา แต่ถ้าคุณพบว่าโครงการนี้มีประโยชน์การอ้างอิงหรือเครดิตจะได้รับการชื่นชมเสมอ