online edit web
1.0.0
7月以来、このオンラインコードエディターをリファクタリングし、1か月以内に基本バージョンを完了しました。 2か月後、エディターのコア関数であるCollaborationが完了しました。
開始する前に、関連するアドレスを最初に投稿しましょう。それがあなたに役立つなら、スターへようこそ：
フロントエンドウェアハウスアドレス
フロントエンドプレビューアドレス（Reactプロジェクトを直接実行できます）
フロントエンドプレビューアドレス（コラボレーションを実現できます）
バックエンドウェアハウスアドレス
このプロジェクトはWebContainerを使用しているため、展開はHTTPSで使用する必要があります。ただし、Vercelは展開用のHTTPSを提供しますが、バックエンドサービスにはHTTPSがありません。 Vercelで展開した場合、バックエンドサービスにアクセスできません。したがって、最良の効果を体験したい場合は、私の提案は、このリポジトリのコードを直接引き出して直接開始することです。
オープンソースプロジェクトを書くために、最も重要なことは間違いなく最も重要なものです。フロントエンドはNextJSを使用し、バックエンドはNESTJを使用します。
まず、私がNextJSを好むポイントの1つは、そのファイルルーティングシステムがシンプルで直感的であり、フォルダー構造に応じてルートを自動的に生成できることです。
next.jsはReactとnode.js環境を統合します。開発者は、複雑なビルドツールを構成することなく、おなじみのReact構文をすばやく開始できます。バックエンドの依存度が低いプロジェクトでは、NextJSを使用して、追加のバックエンドを書く必要なくフルスタックプロジェクトを実装できます。
第二に、それはより遠隔に優しいです。私が接触した人々の中で、一部の友人は遠隔の仕事を見つける傾向があります。私がインタビューして取り組んだリモートポジションでは、使用される基本的なテクノロジースタックは次のJSです。これはまず、サーバー側のレンダリング機能のおかげで、よりSEOに優しいものです。もう1つのポイントは、TailWindCSS、ShadCN、Zustand、SWRなど、エコロジーも非常に完全であることです。また、無料の展開やSupabaseなどの無料データベースにもvercelを提供します。
NestJを選択する理由については、おそらく説明する必要はありません。
次に、このプロジェクトを包括的に理解できるように、その機能のいくつかをあなたと共有します。
ホームページでは、それは単なる流星アニメーションに加えて、次のコンテンツであり、全体的な調整はまだかなり良いです。
コントロールパネルをクリックした後、ダッシュボードを入力します。ログインしていない場合は、ログインページにジャンプします。
ここに登録する必要はありません。検証コードを直接取得できます。アカウントがない場合は、新しいアカウントを直接登録します。
コントロールパネルを入力してください。ここでは、プロジェクトを作成したり、コラボレーションドキュメントを作成したりすることができます。
ここには、初期化のためのさまざまなフレームワークがあります。元のテンプレートの使用に加えて、開発と編集のためにローカルコードを直接インポートすることもできます。
ここにはかなりアバターがあります、私はそれがとても好きです：
クリックして作成した後、そのようなページを入力します。まず、左側にファイルバーがあり、全体的なレイアウトはVSCODEと同じであり、次はコンソールです。ここでは、NPMとPNPMのいくつかのコマンド、およびいくつかのnodejsコマンドを直接実行できます。
次に、このプロジェクトのPNPMを実行して関連する依存関係パッケージをインストールし、 pnpm devを実行してこれらのプロジェクトを開始します。
ファイルツリーに加えて、vscode、ファイル検索と同様の機能も提供します。
スプリット画面に書くこともできます：
ここでは、編集者のテーマを切り替えることもできます。ここでは、以下から選択する複数のテーマを提供します。
今回は、コア機能である共同編集に戻ります。まず、ダッシュボードコントロールパネルにドキュメントを作成する必要があります。
作成が完了すると、そのような効果がわかります。
クリックしてドキュメントを共有し、ドキュメントを他の友達と共有して一緒に編集します。
最終的な共同編集効果：
共同編集については、フロントエンドとバックエンドに関与するテクノロジースタックを共有しましょう。
フロントエンド
Y-Monaco：YJSのリアルタイムコラボレーション機能をMonacoエディターと統合し、デフォルトのコラボレーション編集データの同期と共同UI効果を提供します。
Y-Websocket：YJSのWebSocketアダプターは、リアルタイムのデータ同期関数を提供し、複数のクライアントがWebSocketを介した編集でコラボレーションできるようにします。
YJS：リアルタイムのコラボレーションとオフラインの編集をサポートし、共有タイプの変更を自動的にマージして、大規模なドキュメントや無制限のユーザーのシナリオに適した競合を自動的にマージします。
パーフェクトカーーズ：滑らかなマウスの動きを提供します。
後部
Y-Websocket：YJSは共同論理をカプセル化します
Y-MongoDB-Provider：永続的なストレージ
このプロジェクトに貢献してくれたすべての人に感謝します！
このプロジェクトがあなたに役立つか、このプロジェクトに興味がある場合は、startyするまさへようこそ
最後に、これら2つのオープンソースプロジェクトに言及しましょう。どちらも現在維持しているオープンソースプロジェクトです。
オンラインコード共同エディター
フロントエンドの足場Create-Neat
開発に参加したい場合、またはグループに参加して勉強したい場合は、WeChat yunmz777を追加できます。将来的には多くのニーズがあります。このプロジェクトが完了した後、多くの新しい興味深いオープンソースプロジェクトがあなたを待っています。
