電気料金計算ページのUIとAPI連携処理を実装

[chanchan-co]

概要

• フロントから電気料金計算APIを利用できるように

やったこと

• 電気料金計算ページを追加(ルート)
• 電気料金計算APIの呼び出しを作成
• CORS設定を追加して、開発環境でフロントからAPI通信を許可

確認事項

• make up
• make web-bash
• rails db:migrate:reset db:seed
• http://localhost:3001 にアクセス
  • アクセスできること
• 契約アンペア数(A)と使用量(kWh)を入力してから「計算する」ボタンを押下
  • API通信が成功すること
  • 料金計算の結果が返ってくること
• デベロッパーツールでアンペア数(A)もしくは使用量(kWh)のvalueに'hoge'などの文字列を設定してから「計算する」ボタンを押下
  • 契約アンペア数(A)と使用量(kWh)は数値で指定してください。 とエラーが表示されること
• デベロッパーツールでアンペア数(A)のvalueを空もしくは100など存在しないアンペア数を設定してから「計算する」ボタンを押下
• 契約アンペア数(A)は10A, 15A, 20A, 30A, 40A, 50A, 60Aのいずれかを指定してください。 とエラーが表示されること

補足

• 今回は電気料金計算ツール一つだけなのでルートに表示するようにいたしました。