プロジェクトの管理パネルを数分で作成します-jsチュートリアル-php.cn

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 サイトの他の関連記事を参照してください。

ソース：dev.to

前の記事：JavaScript のアロー関数は「this」バインディングをどのように処理しますか?またその回避策は何ですか? 次の記事：JavaScript でタイムゾーン間で日付を簡単に変換するにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

Java の名前付きパッケージから Groovy のデフォルトパッケージクラスにアクセスするにはどうすればよいですか?

2024-12-23 12:00:20
Selenium の CSS セレクターと XPath: どの findElement() 関数を選択する必要がありますか?

2024-12-23 11:59:25
PHP の開発デバッグ出力から特定の変数に効果的にアクセスするにはどうすればよいですか?

2024-12-23 11:58:15
ダイナミック SQL は MySQL ストアドプロシージャをどのように強化できるのでしょうか?

2024-12-23 11:57:18
文字列パスを使用してネストされた JavaScript オブジェクトと配列に簡単にアクセスする方法

2024-12-23 11:56:08
Gorilla/Mux を使用して Go で HTTP 応答ヘッダーを設定するにはどうすればよいですか?

2024-12-23 11:54:43
Go エラー処理をマスターする: 堅牢なアプリケーションのためのベストプラクティス

2024-12-23 11:53:30
jQuery を使用してページの最後の要素までスムーズにスクロールするにはどうすればよいですか?

2024-12-23 11:52:45
HTML テーブルのセルで長いテキストを折り返す方法

2024-12-23 11:51:07
MySQL クエリで欠落している日付を処理するにはどうすればよいですか?

2024-12-23 11:48:34