online edit web

ตั้งแต่เดือนกรกฎาคมเราได้ปรับเปลี่ยนรหัสออนไลน์นี้และเสร็จสิ้นเวอร์ชันพื้นฐานภายในหนึ่งเดือน สองเดือนต่อมาเราได้เสร็จสิ้นฟังก์ชั่นหลักของบรรณาธิการ: การทำงานร่วมกัน

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

1. ที่อยู่คลังสินค้าส่วนหน้า

2. ที่อยู่ดูตัวอย่าง front-end (สามารถเรียกใช้โครงการ React โดยตรง)

3. ที่อยู่ดูตัวอย่างส่วนหน้า (สามารถตระหนักถึงการทำงานร่วมกัน)

4. ที่อยู่คลังสินค้าแบ็กเอนด์

เนื่องจากโครงการนี้ใช้ webcontainer จึงต้องใช้การปรับใช้ภายใต้ HTTPS อย่างไรก็ตาม Vercel ให้ HTTPs สำหรับการปรับใช้ แต่บริการแบ็กเอนด์ของเราไม่มี HTTPS หากปรับใช้กับ Vercel เราไม่สามารถเข้าถึงบริการแบ็กเอนด์ของเราได้ ดังนั้นหากคุณต้องการสัมผัสกับเอฟเฟกต์ที่ดีที่สุดข้อเสนอแนะของฉันคือการดึงรหัสของที่เก็บนี้โดยตรงและเริ่มต้นโดยตรง

การเลือกทางเทคนิค

ในการเขียนโครงการโอเพ่นซอร์สสิ่งที่สำคัญที่สุดคือสิ่งที่สำคัญที่สุด ส่วนหน้าใช้ nextjs และ back-end ใช้ Nestjs

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

Next.js รวมสภาพแวดล้อม React และ Node.js นักพัฒนาสามารถเริ่มต้นได้อย่างรวดเร็วด้วยไวยากรณ์ React ที่คุ้นเคยโดยไม่ต้องกำหนดค่าเครื่องมือสร้างที่ซับซ้อน ในโครงการที่พึ่งพาแบ็กเอนด์น้อยลงคุณสามารถใช้ NextJS เพื่อใช้โครงการเต็มรูปแบบโดยไม่จำเป็นต้องมีแบ็กเอนด์เพิ่มเติมในการเขียน

ประการที่สองมันเป็นมิตรกับระยะไกลมากขึ้น ในบรรดาคนที่ฉันได้ติดต่อด้วยเพื่อนบางคนมักจะหางานระยะไกล ในตำแหน่งระยะไกลที่ฉันได้สัมภาษณ์และทำงานอยู่สแต็คเทคโนโลยีพื้นฐานที่ใช้คือ NextJs นี่เป็นครั้งแรกที่ต้องขอบคุณฟังก์ชั่นการเรนเดอร์ฝั่งเซิร์ฟเวอร์และเป็นมิตรกับ SEO มากขึ้น อีกประเด็นหนึ่งคือนิเวศวิทยานั้นสมบูรณ์มากเช่น tailwindcss, Shadcn, Zustand, SWR ฯลฯ นอกจากนี้ยังมี Vercel สำหรับการปรับใช้ฟรีและฐานข้อมูลฟรีเช่น Supabase

สำหรับสาเหตุที่คุณเลือก NestJS คุณอาจไม่จำเป็นต้องอธิบาย

การใช้งานฟังก์ชั่น

ต่อไปฉันจะแบ่งปันฟังก์ชั่นบางอย่างกับคุณเพื่อให้คุณมีความเข้าใจที่ครอบคลุมเกี่ยวกับโครงการนี้:

หน้าแรก

ในหน้าแรกมันเป็นเพียงภาพเคลื่อนไหวดาวตกรวมทั้งเนื้อหาต่อไปนี้และการประสานงานโดยรวมยังคงค่อนข้างดี

แผงควบคุม

หลังจากคลิกที่แผงควบคุมคุณจะเข้าสู่แผงควบคุม หากคุณไม่ได้ลงชื่อเข้าใช้คุณจะข้ามไปที่หน้าเข้าสู่ระบบ:

ไม่จำเป็นต้องลงทะเบียนที่นี่คุณสามารถรับรหัสการยืนยันได้โดยตรง หากคุณไม่มีบัญชีคุณจะลงทะเบียนใหม่โดยตรง

ป้อนแผงควบคุมที่เราสามารถเลือกสร้างโครงการหรือสร้างเอกสารร่วมกัน:

มีเฟรมเวิร์กที่แตกต่างกันมากมายสำหรับการเริ่มต้นที่นี่ นอกเหนือจากการใช้เทมเพลตดั้งเดิมแล้วเรายังสามารถนำเข้ารหัสท้องถิ่นโดยตรงเพื่อการพัฒนาและแก้ไข:

มีอวตารสวย ๆ ที่นี่ฉันชอบมันมาก:

แก้ไขรหัส

หลังจากคลิกเพื่อสร้างเราจะป้อนหน้าดังกล่าว ก่อนอื่นมีแถบไฟล์ทางด้านซ้ายเลย์เอาต์โดยรวมจะเหมือนกับ VScode และต่อไปนี้เป็นคอนโซล ที่นี่เราสามารถเรียกใช้คำสั่งบางอย่างของ NPM และ PNPM ได้โดยตรงรวมถึงคำสั่ง NodeJS บางคำ

ตอนนี้เราดำเนินการ PNPM สำหรับโครงการนี้เพื่อติดตั้งแพ็คเกจการพึ่งพาที่เกี่ยวข้องและดำเนินการ pnpm dev เพื่อเริ่มโครงการเหล่านี้:

การค้นหาไฟล์

นอกเหนือจากแผนผังไฟล์แล้วเรายังมีฟังก์ชั่นที่คล้ายกันกับ VSCODE การค้นหาไฟล์:

คุณยังสามารถเขียนบนหน้าจอแยก:

เปลี่ยนธีมตัวแก้ไข

ที่นี่เราสามารถสลับธีมของบรรณาธิการได้และที่นี่เรามีธีมหลายชุดให้เลือก:

ร่วมแก้ไข

ครั้งนี้เราจะกลับไปที่ฟังก์ชั่นหลักของเรา: การแก้ไขร่วมกัน ก่อนอื่นเราต้องสร้างเอกสารบนแผงควบคุมแดชบอร์ด:

หลังจากการสร้างเสร็จสมบูรณ์คุณจะเห็นผลดังกล่าว:

คลิกเพื่อแบ่งปันเอกสารและแบ่งปันเอกสารกับเพื่อนคนอื่น ๆ เพื่อแก้ไขด้วยกัน:

เอฟเฟกต์การทำงานร่วมกันครั้งสุดท้าย:

การทำงานร่วมกันถูกนำไปใช้อย่างไร?

เกี่ยวกับการแก้ไขการทำงานร่วมกันให้แบ่งปันสแต็คเทคโนโลยีที่เกี่ยวข้องกับด้านหน้าและด้านหลัง

1. ส่วนหน้า

   1. Y-MONACO: รวมฟังก์ชั่นการทำงานร่วมกันแบบเรียลไทม์ของ YJS เข้ากับ Monaco Editor ซึ่งให้การซิงโครไนซ์การแก้ไขข้อมูลการทำงานร่วมกันเริ่มต้นและเอฟเฟกต์ UI การทำงานร่วมกัน

   2. Y-Websocket: อะแดปเตอร์ WebSocket ของ YJS ให้ฟังก์ชั่นการซิงโครไนซ์ข้อมูลแบบเรียลไทม์ทำให้ลูกค้าหลายรายสามารถทำงานร่วมกันในการแก้ไขผ่าน WebSocket

   3. YJS: กรอบ CRDT ที่มีประสิทธิภาพสูงซึ่งรองรับการทำงานร่วมกันแบบเรียลไทม์และการแก้ไขแบบออฟไลน์และรวมการเปลี่ยนแปลงประเภทการแบ่งปันโดยอัตโนมัติเพื่อจัดการกับความขัดแย้งเหมาะสำหรับสถานการณ์ที่มีเอกสารขนาดใหญ่และผู้ใช้ไม่ จำกัด

   4. Cursors ที่สมบูรณ์แบบ: ให้การเคลื่อนไหวของเมาส์ที่ราบรื่น

2. ปลายด้านหลัง

   1. y-websocket: yjs ห่อหุ้มตรรกะการทำงานร่วมกัน

   2. Y-MongoDB-Provider: ที่เก็บถาวร

ผู้มีส่วนร่วม

ขอบคุณทุกคนที่มีส่วนร่วมในโครงการนี้!

หากโครงการนี้เป็นประโยชน์กับคุณหรือสนใจในโครงการนี้ยินดีต้อนรับสู่Star️

สุดท้ายขอพูดถึงโครงการโอเพนซอร์สทั้งสองซึ่งทั้งสองโครงการนี้เป็นโครงการโอเพนซอร์สที่เรายังคงรักษาไว้:

• รหัสความร่วมมือโค้ดออนไลน์

• การนั่งร้านส่วนหน้าสร้างสถานที่

หากคุณต้องการมีส่วนร่วมในการพัฒนาหรือต้องการเข้าร่วมกลุ่มเพื่อศึกษาคุณสามารถเพิ่ม WeChat yunmz777 จะมีความต้องการมากมายในอนาคต หลังจากโครงการนี้เสร็จสิ้นจะมีโครงการโอเพ่นซอร์สใหม่และน่าสนใจมากมายรอคุณอยู่