online edit web
1.0.0
Sejak Juli, kami telah memperbaiki editor kode online ini dan menyelesaikan versi dasar dalam waktu satu bulan. Dua bulan kemudian kami telah menyelesaikan fungsi inti editor: kolaborasi.
Sebelum memulai, mari kirimkan alamat yang relevan terlebih dahulu. Jika bermanfaat bagi Anda, selamat datang di Star:
Alamat gudang front-end
Alamat pratinjau front-end (dapat langsung menjalankan proyek reaksi)
Alamat pratinjau front-end (dapat mewujudkan kolaborasi)
Alamat gudang backend
Karena proyek ini menggunakan WebContainer, penyebaran harus digunakan di bawah HTTPS. Namun, Vercel menyediakan HTTPS untuk penyebaran, tetapi layanan backend kami tidak memiliki HTTPS. Jika digunakan dengan Vercel, kami tidak dapat mengakses layanan backend kami. Jadi, jika Anda ingin mengalami efek terbaik, saran saya adalah secara langsung menarik kode repositori ini dan memulainya secara langsung.
Untuk menulis proyek open source, yang paling penting jelas merupakan yang paling penting. Front-end menggunakan NextJS, dan back-end menggunakan NestJs.
Pertama -tama, salah satu poin yang saya sukai NextJS adalah bahwa sistem routing file -nya sederhana dan intuitif, dan secara otomatis dapat menghasilkan rute sesuai dengan struktur folder, mengurangi beban kerja konfigurasi manual kami dan digunakan di luar kotak.
Next.js mengintegrasikan lingkungan React and Node.js, pengembang dapat dengan cepat memulai dengan sintaks React yang sudah dikenal tanpa mengkonfigurasi alat pembuatan yang kompleks. Dalam proyek-proyek yang lebih sedikit mengandalkan backend, Anda dapat menggunakan NextJS untuk mengimplementasikan proyek-proyek full-stack tanpa perlu backend tambahan untuk menulis.
Kedua, lebih ramah-jarak jauh. Di antara orang -orang yang saya hubungi, beberapa teman cenderung menemukan pekerjaan jarak jauh. Di posisi jarak jauh yang telah saya wawancarai dan kerjakan, tumpukan teknologi dasar yang digunakan adalah NextJS. Ini pertama-tama, berkat fungsi rendering sisi server dan lebih ramah SEO. Poin lain adalah bahwa ekologi juga sangat lengkap, seperti tailwindcss, shadcn, zustand, swr, dll. Ini juga menyediakan vercel untuk penyebaran gratis, dan database gratis seperti supabase.
Adapun mengapa Anda memilih NestJS, Anda mungkin tidak perlu menjelaskannya.
Selanjutnya, saya akan membagikan beberapa fungsinya dengan Anda sehingga Anda dapat memiliki pemahaman yang komprehensif tentang proyek ini:
Di halaman beranda, itu hanya animasi meteor, ditambah konten berikut, dan koordinasi keseluruhan masih cukup bagus.
Setelah mengklik panel kontrol, Anda akan memasukkan dasbor. Jika Anda tidak masuk, Anda akan melompat ke halaman login:
Tidak perlu mendaftar di sini, Anda dapat secara langsung mendapatkan kode verifikasi. Jika Anda tidak memiliki akun, Anda akan langsung mendaftarkan yang baru.
Masukkan panel kontrol, di mana kami dapat memilih untuk membuat proyek atau membuat dokumen kolaboratif:
Ada banyak kerangka kerja yang berbeda untuk inisialisasi di sini. Selain menggunakan templat asli, kami juga dapat secara langsung mengimpor kode lokal untuk pengembangan dan pengeditan:
Ada avatar yang cantik di sini, saya sangat menyukainya:
Setelah mengklik untuk membuat, kami akan memasukkan halaman seperti itu. Pertama, ada bilah file di sebelah kiri, tata letak keseluruhan sama dengan vscode, dan berikut ini adalah konsol. Di sini kita dapat secara langsung menjalankan beberapa perintah NPM dan PNPM, serta beberapa perintah nodeJS.
Sekarang kami menjalankan PNPM untuk proyek ini untuk menginstal paket ketergantungan yang relevan, dan menjalankan pnpm dev untuk memulai proyek ini:
Selain pohon file, kami juga menyediakan fungsi serupa ke vscode, pencarian file:
Anda juga dapat menulis di layar split:
Di sini kami juga dapat mengubah tema editor, dan di sini kami memberikan banyak tema untuk dipilih:
Kali ini kami akan kembali ke fungsi inti kami: pengeditan kolaboratif. Pertama, kita perlu membuat dokumen di panel kontrol dasbor:
Setelah kreasi selesai, Anda akan melihat efek seperti itu:
Klik untuk membagikan dokumen dan berbagi dokumen dengan teman -teman lain untuk mengeditnya bersama:
Efek pengeditan kolaboratif terakhir:
Mengenai pengeditan kolaboratif, mari kita bagikan tumpukan teknologi yang terlibat di ujung depan dan belakang.
ujung depan
Y-Monaco: Mengintegrasikan fungsi kolaborasi real-time YJS dengan editor Monaco, memberikan sinkronisasi data pengeditan kolaboratif default dan efek UI kolaboratif.
Y-WEBSOCKET: Adaptor Websocket YJS menyediakan fungsi sinkronisasi data real-time, yang memungkinkan banyak klien untuk berkolaborasi dalam pengeditan melalui WebSocket.
YJS: Kerangka kerja CRDT berkinerja tinggi yang mendukung kolaborasi real-time dan pengeditan offline, dan secara otomatis menggabungkan perubahan dalam berbagi jenis untuk menangani konflik, cocok untuk skenario dengan dokumen besar dan pengguna yang tidak terbatas.
Perfect-Cursors: Memberikan gerakan tikus yang halus.
ujung belakang
Y-Websocket: YJS merangkum logika kolaboratif
Y-MongoDB-penyedia: Penyimpanan persisten
Terima kasih untuk semua orang yang berkontribusi pada proyek ini!
Jika proyek ini bermanfaat bagi Anda atau tertarik pada proyek ini, selamat datang di Star️anfaat
Akhirnya, mari kita sebutkan dua proyek open source ini, yang keduanya adalah proyek open source yang sedang kami pertahankan:
Editor Kolaboratif Kode Online
Perancah ujung depan create-neat
Jika Anda ingin berpartisipasi dalam pengembangan atau ingin bergabung dengan grup untuk belajar, Anda dapat menambahkan saya wechat yunmz777 . Akan ada banyak kebutuhan di masa depan. Setelah proyek ini selesai, akan ada banyak proyek open source baru dan menarik yang menunggu Anda.
