検索

ホームページ >ウェブフロントエンド >jsチュートリアル >プロジェクトの管理パネルを数分で作成します

プロジェクトの管理パネルを数分で作成します

DDD
DDDオリジナル
2024-12-22 03:38:10554ブラウズ

Kottster は、開発者が管理パネルを迅速に構築して展開できるようにする無料のツールです。わずか 5 分で、完全に機能する管理パネルを生成し、クラウドに展開して、チームと共有できます。

Kottster を使用してアプリを構築すると、React および Node.js 環境を使用してフルスタック アプリを作成するための Web フレームワークである Remix 上でアプリが実行されます。

この記事では、Kottster アプリを作成し、データベースに接続し、特定のテーブルのページを生成し、任意の場所でホストする方法を説明します。

プロジェクトの作成

始める前に、Node.js (v20 以降) がマシンにインストールされていることを確認してください。

新しいプロジェクトを作成するには、次のコマンドを実行します:

npx @kottster/cli new

プロジェクト名、JavaScript と TypeScript のどちらを使用するか、およびどのパッケージ マネージャーを使用するかを尋ねられます。その後、開始するために必要なものがすべて含まれた新しいプロジェクト フォルダーが作成されます。

Create an Admin Panel for your project in inutes

ローカルでアプリを起動するには、作成したフォルダーを開いて npm run dev:

を実行します。

Create an Admin Panel for your project in inutes

アプリが読み込まれると、ログイン ページが表示されます。 「アカウントを作成」をクリックして Kottster にサインアップします。サインアップしたら、アプリの名前を入力し、[アプリの作成] をクリックします。これにより、アプリが作成され、ログインします。

すべての設定が完了すると、「はじめに」ページが表示されます。

Create an Admin Panel for your project in inutes

データベースを接続する

[はじめに] ページで、データベースの種類を選択し、接続の詳細を入力して、[接続] をクリックします。

これにより、必要なパッケージがインストールされ、データベースに接続されたデータ ソースを含むファイルがプロジェクト フォルダーに作成されます。

アプリが自己ホスト型であるため、資格情報は常に非公開のままであり、Kottster ツールはデータベースにアクセスできないことに注意してください。

ページの生成

データベースに接続すると、「ページの生成」タブが表示されます。

Create an Admin Panel for your project in inutes

このページは、データベース テーブルのデータを表示または管理するためのページをすばやく作成するのに役立ちます。

「挿入を許可」または「更新を許可」を有効にすると、レコードの追加および更新用のフォームが使用可能になります。 「削除を許可」を有効にすると、レコードを削除する機能が追加されます。

選択が完了したら、[ページを生成] をクリックします。このツールは自動的にページ ファイルを生成し、新しい項目でサイドバー メニューを更新します。

ページの仕組み

管理パネルの各ページは、app/routes ディレクトリにあります。これらのページは基本的に、UI と API の両方として機能する Remix ルートであり、必要に応じてカスタマイズできます。

Kottster アプリの各ページ ファイルは、ページ自体を表す React コンポーネント をエクスポートする必要があります。このコンポーネント内には任意のコンテンツを含めることができます。

特定のデータベース テーブルのページを生成すると、次のものが含まれます:

  • createTableRpc 関数を呼び出す Remix アクション。この関数はテーブルの動作を制御し、その機能を有効にします。
  • このコンポーネントは、アクションで定義された createTableRpc 設定と密接に関係しています。

「users」テーブル用に生成されたページの例:

npx @kottster/cli new

createTableRpc と

について詳しく学ぶことができます。ドキュメントのコンポーネント。また、公式ドキュメントで Remix とその Fullstack Data Flow について詳しく学ぶことをお勧めします。

導入

準備ができたら、Kottster アプリを展開してオンラインで利用できるようにします。デプロイする前に、アプリが適切に構築されており、エラーがないことを確認してください。

これを行うには、npm run build:

を実行して、アプリをローカルでビルドします。

Create an Admin Panel for your project in inutes

エラーがなければ、アプリは公開する準備ができています。自己ホスト型なので、好きな場所にデプロイできます。導入オプションの詳細については、こちらをご覧ください。

Vercel への無料導入

この記事では、最も人気のある無料オプションの 1 つである、Kottster アプリを Vercel にデプロイする方法について説明します。

まだアカウントをお持ちでない場合は、vercel.com でアカウントにサインアップすることから始めます。ログインしたら、[新しいプロジェクト] をクリックし、構築したアプリを含むリポジトリに接続します。

リポジトリを選択した後、[デプロイ] をクリックします。すぐに、アプリが無料の Vercel ドメインで公開されます。

Create an Admin Panel for your project in inutes

アプリが公開されたら、アプリを開いてアカウントにログインできます。

以上です!管理パネルがオンラインで利用できるようになりました。

チームと共有できるようになりました。これを行うには、アプリの左側のサイドバーにある [アクセスの管理] をクリックします。これにより、他のユーザーの電子メール アドレスを入力してアクセスを設定できるページが開きます。

最終メモ

Kottster について詳しくは、当社の Web サイト kottster.app をご覧ください。

ご質問がある場合やサポートが必要な場合は、ドキュメントを確認するか、GitHub リポジトリにアクセスするか、Discord コミュニティに参加して質問し、フィードバックを共有してください。

読んでいただきありがとうございます。プロジェクトの成功を祈っています!

以上がプロジェクトの管理パネルを数分で作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript typescript npm if for include Directory using private delete JS function this table github database ui everything Access Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript のアロー関数は「this」バインディングをどのように処理しますか?またその回避策は何ですか?次の記事：JavaScript のアロー関数は「this」バインディングをどのように処理しますか?またその回避策は何ですか?

関連記事

続きを見る