このブログは、フリーマンテックコンサルティングのドン・フリーマンによって作成され、元々はnocodefounders.comに掲載されました。フリーマンテックコンサルティングは、ノーコード導入、ウェブアプリ開発、クラウドインフラ設計/構築、GRC管理、データ分析などのサービスを提供するフルサービスのソフトウェアエンジニアリング会社です。
🌟NocoBaseとは？
NocoBaseはデータ駆動型アプリを簡単に構築できるノーコードプラットフォームです。データモデルを定義し、その周りにアプリケーションを構築します。NocoBaseのロゴが削除された有料版も用意されています。オープンソースであるため、GitHubで簡単に貢献できます。また、必要に応じてプラットフォームの機能を拡張するためのプラグインシステムも提供しています。
🚀 NocoBaseをローカルに展開する
NocoBaseをローカルで実行するために必要なものは？
- Docker
- Docker Compose
- PostgreSQL DB：このブログではDocker Composeを使用して1つのデータベースを実行しますが、実際の生産環境では専用のPostgreSQL DBを使用することをお勧めします。
ローカルでNocoBaseを実行する方法
- NocoBaseのウェブサイトには、ローカルでNocoBaseを実行する手順が記載されています。
まず、作業するディレクトリを作成し、そのディレクトリにターミナルで切り替えます。その後、docker composeファイルを作成する必要があります。上記のNocoBaseウェブサイトの入門資料からのものを使用し、少し修正しました。
以下のdocker composeは、ローカルでPostgreSQL DBを実行していますが、実際の生産環境では専用のDBを持つことを推奨します。
ローカルディレクトリでこれを作成した後、次のコマンドを実行して必要なイメージをプルします。
次に、次のコマンドを実行してバックグラウンドでコンテナを開始します。
これで、http://localhost:13000 でNocoBaseにアクセスできます。
🐶 NocoBaseアプリの構築：ペット追跡アプリ
この例では、ペット追跡アプリケーション🐕 🐈を構築します！このアプリケーションは、ペットの飼い主とそのペットの情報を追跡します。まず、アプリケーションのデータモデルを定義する必要があります。これをNocoBaseで行うのは非常に簡単です。
NocoBaseデータモデル
🔍 データモデルエディタを見つける
NocoBase UIで、右上隅の小さなギア⚙️をクリックし、次にデータソースをクリックします。これによりデータモデルエディタが開きます。そこでは、デフォルトのデータソース「main」が表示されます。「main」データソースの構成をクリックします。
コレクションを作成する
今、私たちはメインデータソース内にコレクションを作成できます。これらのコレクションはアプリケーションのデータを保持します。この例では、1つはペットの飼い主用、もう1つはペット用の2つのコレクションを作成します。
ペットの飼い主コレクション
コレクション画面で新しいコレクションボタンをクリックします。次に、コレクションの表示名に「ペットの飼い主」、コレクション名を「petowner」と設定します。
ペットの飼い主コレクションに必要なフィールドを追加します。コレクション画面でペットの飼い主コレクションの横にあるフィールドの構成をクリックします。フィールドを追加ボタンを使用して、必要なフィールドをコレクションに追加できます。ペットの飼い主コレクションには次のフィールドがあります。
- 名 単一行テキストフィールドインターフェース
- 姓 単一行テキストフィールドインターフェース
- メール メールフィールドインターフェース
ペットコレクション
次に、ペットコレクションに対して同じ手順を繰り返します。ペットコレクションには次のフィールドがあります。
- 名前 単一行テキストフィールドインターフェース
- ペットの種類 複数選択フィールドインターフェース
- 誕生日 日付時刻フィールドインターフェース
🔗 ペットの飼い主コレクションとペットコレクションをリンクする
ペットの飼い主コレクションをペットコレクションにリンクするには、ペットコレクションに戻り、コレクション構成画面でフィールドを追加ボタンをクリックします。一対多インターフェースタイプを探します。関係に表示名を設定し、「ペット」をターゲットコレクションとして選択し、「ID」をターゲットキーとして設定します。
🥳 データモデルは完了!!!
これでデータモデルの設定は完了です。以下は、ペットデータモデルの例です。
NocoBase UIを構築する
🏠 ホームページを作成する
データモデルが完成したので、そのデータモデルと対話するためのUIを迅速に構築できます。アプリケーションのメインページに戻り、ページの上部にある新しいメニューを追加項目を確認してください。それをクリックし、次にページを選択します。ページに「ホーム」という名前を付け、次のような表示を確認します。
📜 ペットの飼い主リストを作成する
ペットの飼い主コレクションと対話するために、カードのリストを追加します。ブロックを追加→ グリッドカード→ PetOwnerをクリックします。これにより、ペットの飼い主をカードのグリッドとして表示します。フィールドを構成をクリックして、名、姓、およびメールフィールドを追加します。
➕ ペットの飼い主を追加する
新しいペットの飼い主を作成できるようにする必要があります。ブロックの右上隅にあるアクションの構成をクリックします。次に、新しい追加をクリックします。これにより「新しい追加」と表示されるボタンが作成されます。そのボタンをクリックして、ペットの飼い主を追加する際に何ができるかを構成します。
🍿 新しいペットの飼い主ポップアップ
ポップアップ内でブロックを追加→ フォーム→ 現在のコレクションをクリックします。フィールドを構成をクリックし、名、姓、メールを追加します。これにより、新しいペットの飼い主を作成するときにこれらの値を入力できるようになります。最後に、アクションを構成→ 提出をクリックします。ポップアップの外をクリックして閉じます。
➕ 新しいペットを追加する
新しいペットの飼い主を表示および作成できるようになったので、ペットを追加できるようにする必要があります。再びホームページに戻り、カード内のアクションの構成をクリックし、ポップアップをクリックします。これにより、ポップアップという名前のリンクがカードに作成されます。それをクリックし、ポップアップ内でブロックを追加→ フォーム（新規追加）→ 関連レコード→ Petsをクリックします。この新しいブロック内で、フィールドを構成をクリックし、名前、ペットの種類、誕生日を追加します。これにより、新しいペットを作成するときにこれらの値を入力できるようになります。最後に、アクションを構成→ 提出をクリックします。
📜 既存のペットをリスト表示する
この新しいブロックの下に来て、ブロックを追加→ リスト→ 関連レコード→ Petsをクリックします。この新しいブロック内で、フィールドを構成をクリックし、名前、ペットの種類、誕生日を追加します。ポップアップは次のように表示されるはずです。すでにデータベースに1匹のペットがいたので、少し異なる見た目になるかもしれません。
ポップアップの外をクリックして閉じます。これで、ペットを作成および表示する能力を持ちました。あなたのUIは今、以下のように見えるはずです。
🧪 テストしてみる
オレンジのUIエディタボタンをクリックしてUIエディタを退出します。UIを操作して、ペットとペットの飼い主を作成お試しください。
このブログは、ユーザーの認証、より複雑なUI、本番環境のデプロイなど、多くの要素を欠いています。これらは今後のブログでカバーするかもしれません。