【NoCode】Adaloで簡単なアプリを作ってみよう！ ② データの作成

皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。

前回に引き続き、NoCodeツールAdaloで簡単なアプリを作っていきます！

 Adaloで簡単なアプリを作ってみよう！
① データベース設計及びデータの読み込み
② データの作成
③ データの更新
④ データの削除
⑤ リレーションシップの設定

Adaloのチュートリアルで学べることをベースにして、簡単なアプリを作成しながら、開発の基本となる「CRUD」について学習していきます。

Video Tutorials to Create Apps Without Code | Adalo

「CRUD」とは、データを操作する際に必要な最低限の機能のことです。

・Create（作成）
・Read（読み込み）
・Update（更新）
・Delete（削除）

今回は、「データの作成（Create）」について学びます。

Adaloの概要とアプリ開発の始め方については、次の記事で解説しましたので、まずはこちらをご覧ください。

1. 実装するサンプル

前回に引き続き、オススメの旅行先を投稿する「旅行アプリ」を作成していきます。

今回は、一覧表示画面に配置したボタンをクリック後、入力画面に遷移し、フォームに入力されたデータをデータベースに保存することで、新規データを作成します。

2. 新規データ作成用 Screen 追加

「ADD SCREEN」の「Simple」から「Form」をクリックします。

追加する「Screen」の名前を入力し「CREATE SCREEN」ボタンをクリックします。今回は「New Trip（新規の旅行先）」を名前として設定します。

新規データ作成用の「New Trip」を追加することができました。

3. Trips 及び Form の紐づけ

前回作成した「Trips」の「Name」「Description」「Image」という、3種の「Field」と、「Form」を紐づけることによって、入力されたデータを保存することができるようになります。

3-1. Form

「Form」の「Which data collection ? （どの collection ですか？）」に「Trips」を選択します。

「Trips」の3種の「Property」に保存するデータを入力するための3つの「Field」が自動で作成されます。

「What do you want the form to do?（form で何をしたいですか？）」に「Create New Trip（新しい Trip を作成する）」が自動で選択されます。

これにより、それぞれの「Form」に入力されたデータを「新規データ（Record）」として「Trips」に保存することができるようになりました。

3-2. Fields

「Fields」の「Form Fields」から、それぞれの「Field」の設定を行うことができます。

「Collection」を選択した時点で、Adaloが自動で設定してくれるため、基本的には変更の必要はありません。

Label

「Label」は、何を入力するための「Field」なのかを示すために使用します。

Placeholder

「Placeholder」は「Field」の中に配置されている薄い文字のことです。
入力例を示すために使用します。

Input Type

「Input Type」で「Field」を「Single Line（1行）」もしくは「Multi-line（複数行）」のいずれかに設定することができます。

Required Error Text

「Required Error Text（必要なエラーテキスト）」のスイッチを「オン」にすると、「Field」に何も入力せずに送信した場合に「This field is required（この項目は必須です）」というエラーテキストを表示してくれます。

エラーテキストの内容は変更することができます。

これにより、「空データ」を保存してしまうことを防ぐことができます。

「Required Error Text（必要なエラーテキスト）」のスイッチを「オフ」にすると、「空データ」の保存を許可することができます。

3-3. Submit Button

「Submit Button」から「データ送信用ボタン」の設定を行うことができます。

「Collection」を選択した時点で、Adaloが自動で設定してくれるため、基本的には変更の必要はありません。

Text

「Text」を変更すると「Submit Button」に表示される文字を変更することができます。

Click Actions

「Create」
「Submit Button」をクリックすると、「Form」に入力されたデータを「Trips」に保存し、「新規データ（Record）」を作成します。

「Link」
「Submit Button」をクリックし、「Form」に入力されたデータを「Trips」に保存した後、前の「Screen」に「戻る（Back）」ように「Link」が設定されています。

4. New Trip への画面遷移用 Button 作成

「ADD COMPONENT」の「Buttons」から「Action Button」を「Home」の右下あたりにドラッグアンドドロップして配置します。

「Icon」はデフォルトで「add」が選択されるため、そのまま使用します。

「Click Actions」の「ADD ACTION」から「Link」を選択し、遷移先に先程作成した「New Trip」を選択します。

これにより、「Action Button」をクリックすると、「New Trip」に画面遷移することができるようになりました。

それぞれの「Screen」の間に「Link」を表す矢印が表示されます。

5. テスト

以上で今回の実装は完了です。「PREVIEW」ボタンをクリックして、作成したアプリを確認してみてください。

「Form」にデータを入力し、送信ボタンクリック後、「新規データ（Record）」が作成されていれば実装成功です。

6. まとめ

今回は「Adaloで簡単なアプリを作ってみよう！」シリーズの第2回目として、「データの作成（Create）」を学びました。

「データの作成（Create）」機能の実装の流れを再度確認します。

①「Collection」及び「Property」を作成する
②   新規データ入力用の「Form」を作成する
③「Form」に「Collection」を紐づける

次回は「CRUD」の「Update（更新）」機能を実装します。

引き続きAdaloの理解を深めていきましょう！