11
6
はじめての記事投稿
Qiita Engineer Festa20242024年7月17日まで開催中!

[個人開発] 食品の在庫を簡単に管理できるサービスを作ってみました

Last updated at Posted at 2024-07-10

はじめに

こんにちは。ryosuke(@ryousuke_doi)と申します。現在プログラミングスクール RUNTEQ にて、Ruby on Rails を学習しています。

今回リリースしたサービスの紹介と開発の振り返りをまとめてみました。
記事を書くのが初めてなので、温かい目で見ていただけると幸いです。また、技術的な部分での誤りやサービスについての感想などありましたら、コメント等で教えていただけると助かります。

作成したサービスの紹介

Image from Gyazo

サービスURL(レスポンシブ対応済み)

食材一覧 食材の登録
Image from Gyazo Image from Gyazo
食材の詳細 食材の編集(詳細ページ上)
Image from Gyazo Image from Gyazo
食材の削除機能 レシピ検索ページ
Image from Gyazo Image from Gyazo

Line上からの操作

メニュー画面 食材の登録
Image from Gyazo Image from Gyazo
食材リストの取得 消費期限が2日以内の食材の取得
Image from Gyazo Image from Gyazo
レシピ検索 入力情報のリセット
Image from Gyazo Image from Gyazo

作成経緯

私が一人暮らしをしていた時、以下の問題に直面したことがありました。

  • 以前購入した食材を忘れ、同じ食材を再び購入してしまうことが度々あった。その結果、冷蔵庫や冷凍庫が不要な食材で溢れかえり管理が難しくなる。
  • 購入した食材の消費期限を把握しきれず期限を過ぎてしまい、廃棄せざるを得ないことが多々発生。これにより無駄な出費が増え、食材の無駄遣いが続く。
  • 冷凍庫に保存していた魚や肉類が、いつ保存したものか分からなくなることが頻繁に発生。食材の鮮度や品質が不明なまま使用した結果お腹を壊す。
  • 消費期限が近い食材を使って料理をする際に、適したレシピを探すのが面倒くさくなり料理をするモチベーションが低下。

「食材の管理 レシピ アプリ」で調べると食材の消費・賞味期限を管理できるアプリやレシピを検索できるアプリは多々あったのですが消費・賞味期限の管理ができて消費・賞味期限が近い食材を使用したレシピを自動で通知してくれるアプリはヒットしませんでした。

そこで食材の管理とレシピ検索を行うことができ、なおかつ自動で通知してくれるサービスが欲しいと思い立ち、このサービスを作成しました。

工夫した点

1. OAuth認証によるLineログイン機能

手間なくサービスを使用していただけるようにLINEアカウントによるログイン機能を導入しました。
btn_login_base.png

2. Lineでの操作

ユーザーがLINE上でほとんどの機能を利用できるようにすることで、利便性とアクセス性を大幅に向上させています。
具体例) 食材登録機能
Image from Gyazo

3. Lineプッシュ通知

登録した食材の消費期限の2日前から毎朝8時に期限が近い食材とその食材を使用したレシピのプッシュ通知が入ります。
Image from Gyazo

  • モーダルを使用した編集機能
    登録した食品の編集を行う際に従来のページ遷移を伴う方法ではなく、モーダルウィンドウを使用することでユーザー体験を向上させました。

技術スタック

カテゴリー 技術スタック
Frontend Rails 7.1.3.2 (Hotwire/Turbo/Stimulus), TailwindCSS, DaisyUI
Backend Rails 7.1.3.2 (Hotwire/Turbo/Stimulus)
Database PostgreSQL
Environment Docker / docker-compose
Infrastructure http://render.com/
API Line Messaging API, Rakuten_web_service API

今後の展開

今後、サービス面・技術面で、以下のとおり追加・修正を行う予定です。

サービス面

  • Line上から食材の削除機能
  • 食材のカテゴリー機能
  • レシピのお気に入り機能
  • 初期データがある食材の画像を使用できる機能
  • Googleログイン機能
  • メールアドレスでログインしているユーザーへの通知機能

技術面

  • テストコードの追加

おわりに

今回、初めて1からサービスを作りましたが、多くのことを学ぶことができました。うまく実装できず中々開発が進まない期間もありましたが、なんとか乗り越えてサービスをリリースすることができました。
今後も引き続き更新していきますので、ぜひ使っていただけると幸いです。
最後までお読みいただきありがとうございました!

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6