日曜日に丸一日かけて作成した「割り勘、立て替えアプリ」の概要

ChatGPTと相談しながら、Ruby on Rails製の「割り勘、立て替えアプリ」を作成した。

その概要について書いていこう。

トップページ

ターミナルで「rails s」を打ち込むことで、ブラウザで「localhost:3000」を打ち込むと、上記の画面にアクセスできる。

以下がRailsの対象テンプレートファイル。

新規登録画面

支払い登録をクリックすると、以下の画面に遷移する。

テンプレートファイルはこちら。

日曜日に即興で作ったので、CSSが直接指定されていたりするが、気にしないでいただきたい。

こういったスタイルの指定方法もある。

支払った人

現状、空である。

その理由は、usersテーブルが空だから。

<div style="margin-bottom: 1.5em;">
  <%= form.label :payer_id, "支払った人", style: "display: block" %>
  <%= form.collection_select :payer_id, User.all, :id, :name, { prompt: "選択してください" }, { id: "payer_select" } %>
</div>

友人の名前を使っていたから、プライバシー保護のために、ブログを書くときは消しておいた。

usersテーブルにデータを入れよう。以下の手順で。

seeds.rbに記入。

rails db:seed。確認すると、問題なく入っていた。

postgreを抜けて、rails sで開発環境を起動する。

先ほどの選択肢に、ユーザが追加されていることが確認できた。

新しい支払いを登録する

Aさんが支払って、Bさん、Cさんが返済するとしよう。

大阪で開催される「夏フェス」のチケット代が3人で30,000円と仮定する。

登録すると、トップページに遷移して、コンテンツが追加される。

Bさんというユーザ名なので、Bさんさんとなってしまった。

返済状況を更新する

返済状況を更新する画面は以下の通り。

Bさんの返済済みにチェックを入れて、「返済状況を更新」をクリックすると・・

トップページに遷移して、❌が☑️に変更されていることが確認できる。

支払いを編集する

編集ボタンをクリックすると、以下の画面に遷移する。

返済する人の「Bさん」「Cさん」のチェックが外れてしまっているので、追加して、支払額を50000円に変更しよう。

登録するをクリックすると・・

トップページに戻り、割り勘の金額が計算されたものが表示されている。

支払いを削除する

削除ボタンを押すと、夏フェスが消える。