脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

イベント予約アプリを作ってみた|初心者のアプリ開発|Adalo

f:id:yuka-edu:20211129210615p:plain

 

こんにちは!ゆかゆかです。

Nocodeツール「Adalo」を使ってノーコードでイベント予約アプリを作ってみます!

初心者がどんなアプリを作れるか、参考になれば嬉しいです。

 

作ってみる機能はこんな感じです〜

f:id:yuka-edu:20211129213013p:plain

 

参考にした標準のサンプル

初心者が1からアプリを作ると大変なので、

標準のサンプル「Coaching」をもとに作成してみました。

 

f:id:yuka-edu:20211128131806p:plain

不要な設定をバシバシ削除してシンプルにしております〜

 

Adaloの設定

Adaloの設定を簡単に紹介していきます。

 

データコレクション

イベント予約に必要なデータを準備していきます。

メインで使用するデータは2つだけです。

 

イベントのカテゴリー

イベントを選択しやすくするよう、カテゴリーを用意してみました。

f:id:yuka-edu:20211128132426p:plain

イベント

イベントの詳細用しました。

こちらの項目を用意しています。

  • イベント名
  • 説明
  • カテゴリー
  • 日付
  • 参加者(Usersの関連項目)

f:id:yuka-edu:20211128132726p:plain

 

画面

簡単にセットアップしたイベント予約の画面をご紹介します。

 

イベント申し込み画面

イベントを申し込むためにいくつか画面を用意しました。

 

Step1 カテゴリー選択画面

まずはイベントのカテゴリーを選択するリストを表示しています。

この中から1つ選びます。

f:id:yuka-edu:20211129202710p:plain

 

Step2 イベント選択画面

選択したカテゴリーで絞ったイベントを表示します。

続いて、気に入ったイベントを選択して詳細を確認します。

f:id:yuka-edu:20211129203041p:plain

 

Step3 詳細画面画面

イベントの詳細を確認できます。

「参加する」を選択すると、イベント情報に参加者ユーザが紐づきます。

f:id:yuka-edu:20211129203341p:plain

 

参加者管理画面

開催するイベントの参加者を確認します。

自分のイベント一覧から確認したいイベントを選択します。

 

Step1 カテゴリー選択画面

まずはイベントのカテゴリーを選択するリストを表示しています。

この中から1つ選びます。

f:id:yuka-edu:20211129204041p:plain

 

Step2 イベント選択画面

f:id:yuka-edu:20211129204347p:plain


Step3 参加者一覧表示画面

イベントに参加するユーザ一覧を表示します。

f:id:yuka-edu:20211129204405p:plain

 

イベント登録画面

最後に、新しくイベントを登録する画面を用意しました。

 

Step1 イベント選択

「CREATE NEW EVENT」を選択すると、登録画面に遷移します。

f:id:yuka-edu:20211129204347p:plain

Step2 登録画面

シンプルな登録フォームを用意してます。

イベント名、日付、カテゴリーを設定します。

f:id:yuka-edu:20211129204510p:plain

 

まとめ

今日は簡単なイベント予約アプリをつくってみました!

使っていると、あれもこれもと、細かく便利機能を用意したくなりしたが、

いつまでも出来上がらないので、まずはシンプルに作成しました〜

 

コーディングができなくても、自分で作れるって楽しいですよね〜

 

▼無料でも意外と使える Nocode開発ツール Adalo

www.adalo.com