App Inventor 2のスプレッドシートコンポーネントを使うとGoogle Sheets API経由でリレーショナルデータベースの真似事ができそうなので、簡単なレストランの予約管理アプリを作ることにしました。
一から手で作るのも大変なのでChatGPTとGeminiに相談してみました。
UIはどれも同じように設計してくれました。スプレッドシートの設計ではそれぞれ違いが出ていますが、今回はリレーショナルデータベースの真似事をするのが一つの目的なので、リレーショナルデータベースっぽい作り方はしてくれない2は却下。3はコンポーネントの知識が無さそうなので3を参考にしながら1で作ってみます。
設計条件
- テーブルは5卓、各テーブルは4席
- 予約時間は18:00-20:00と20:00-22:00
- 年中無休
- データはGoogleスプレッドシートに格納
- App Inventor 2のスプレッドシートコンポーネントを使ってGoogleスプレッドシートから読み込み、書き込み
- 予約の一覧表示
- 予約のキャンセル、変更が可能
MIT App Inventor 2 App Maker
まずは英語のApp Inventor 2の知識を持っているMIT App Inventor 2 App Makerです。
条件を与えて設計してもらいます。
次の条件でレストラン予約管理アプリを作ろうと思っているので設計してください。追加で条件が必要ならば聞いてください。
設計条件：
テーブルは5卓、各テーブルは4席
予約時間は18:00-20:00と20:00-22:00
年中無休
データはGoogleスプレッドシートに格納
App Inventor 2のスプレッドシートコンポーネントを使ってGoogleスプレッドシートから読み込み、書き込み
予約の一覧表示
予約のキャンセル、変更が可能レストラン予約管理アプリの設計を以下に示します。この設計では、Googleスプレッドシートをデータベースとして使用し、MIT App Inventor 2のコンポーネントを活用して、予約管理を効率的に行えるようにします。
---
### **アプリ設計**
#### 1. **必要なコンポーネント**
- **ユーザーインターフェース**
- **ListView**: 予約の一覧を表示
- **TextBox**: 名前、電話番号などの入力
- **DatePicker**: 予約日を選択
- **Spinner**: テーブル番号と時間帯（18:00-20:00、20:00-22:00）の選択
- **Buttons**: 予約作成、キャンセル、変更用
- **データ管理**
- **Spreadsheetコンポーネント**: Googleスプレッドシートとのデータ連携
#### 2. **Googleスプレッドシートの構成**
| **列名** | **内容** |
|---------------|-------------------------------|
| `ID` | 各予約の一意識別子 |
| `Name` | 顧客名 |
| `Phone` | 電話番号 |
| `TableNumber` | テーブル番号 (1~5) |
| `TimeSlot` | 時間帯（18:00-20:00/20:00-22:00） |
| `Date` | 予約日 |
---
### **アプリの基本機能**
#### **1. 予約作成**
- **UI操作**: 名前、電話番号、テーブル番号、予約時間帯を入力し、「予約作成」ボタンを押す。
- **ブロック設計**:
1. 入力データを取得。
2. `Spreadsheet.AddRow` メソッドを使用してスプレッドシートに新規行を追加。
3. 成功した場合は確認通知を表示。
#### **2. 予約一覧の表示**
- **UI操作**: アプリ起動時または「更新」ボタン押下時に予約データを表示。
- **ブロック設計**:
1. `Spreadsheet.Query` メソッドでスプレッドシートの全データを取得。
2. 結果をListViewに表示。
#### **3. 予約の変更**
- **UI操作**: ListViewで変更対象を選択し、入力フォームでデータを修正後、「変更」ボタンを押す。
- **ブロック設計**:
1. `ID`をキーにスプレッドシートを検索。
2. `Spreadsheet.UpdateRow` メソッドを使用して該当行を更新。
#### **4. 予約のキャンセル**
- **UI操作**: ListViewでキャンセル対象を選択し、「キャンセル」ボタンを押す。
- **ブロック設計**:
1. `ID`をキーにスプレッドシートを検索。
2. `Spreadsheet.DeleteRow` メソッドを使用して該当行を削除。
---
### **設計上の留意点**
1. **入力バリデーション**:
- 名前や電話番号が未入力の場合、エラーメッセージを表示。
- テーブルと時間帯の重複予約を防ぐロジックを追加。
2. **UI設計**:
- フォームはシンプルにし、必要な情報のみを入力。
- メッセージや通知を活用して操作の成功/失敗をわかりやすく表示。
3. **スプレッドシートの設定**:
- スプレッドシートを事前に作成し、App InventorのSpreadsheetコンポーネントでアクセス許可を設定。
---
### **サンプルブロック例: 新規予約作成**
以下のようなブロックを使用します。
1. **予約作成ボタン押下イベント**
```blocks
when CreateReservationButton.Click do
if NameTextBox.Text ≠ "" and PhoneTextBox.Text ≠ "" then
call Spreadsheet1.AddRow
Data: (create a list (NameTextBox.Text, PhoneTextBox.Text, SelectedTable, SelectedTimeSlot, SelectedDate))
notify User "予約が作成されました！"
else
notify User "すべての項目を入力してください。"
```
質問や追加要望があればお知らせください！予約一覧の表示で全てを表示すると多すぎると思う。当日分だけとかにはできない？
