16
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[個人開発][初学者]個人向け在庫管理Webアプリケーション「クラウド冷蔵庫」を制作しました[PHP/Laravel]

Last updated at Posted at 2021-08-15

ご挨拶

初めまして!
第二新卒でエンジニア転職を目指しております、[yoneyone]と申します。
この度、ポートフォリオとして個人向け在庫管理Webアプリケーション「クラウド冷蔵庫」を制作しました。
制作期間は約1ヶ月半です。
なんとか実現したい機能を盛り込むことができ、リリースすることができました。
Qiitaで情報を共有してくださっている皆さまのおかげです。
いつもお世話になっております。
全世界に生ゴミを投下した形ではありますが、よろしくお願いします。
https://cloud-refrigerator.herokuapp.com/

Heroku有料化に伴い、サービスを停止しました。
GithubのURLはこちらです。
https://github.com/yonetaku0519/cloud-refrigerator

使用技術

◆フロントエンド
・HTML/CSS
・Bootstrap

◆バックエンド
・PHP : 7.3.27
・Laravel : 6.20.29
・Youtube API

◆開発環境
・Mysql : 14.14
・Apache : 2.4.29 (Ubuntu)
・AWS : EC2, IAM
・Composer : 2.0.13

◆インフラ
・サーバー : Heroku

コンセプト

コロナ禍における買い物事情において、まとめ買いをする傾向があります。冷蔵庫にあるものを間違えて買ってしまったり、不要なものまで買ってしまった経験があるのではないでしょうか?
クラウド冷蔵庫は、自宅の冷蔵庫の分身をインターネット上に作成することで「いつでも」・「どこでも」冷蔵庫の中を確認することができます!
クラウド冷蔵庫を活用することで、食材の買い忘れやロスを低減し、困難な世の中をちょっと便利にしませんか?

使い方・機能紹介

1.トップページ

9c96a2ae20b99f1ee36ab2297c44c2dd.gif
ユーザー登録にはメール認証機能を実装しています。
背景には「Keisuke Watanuki」様のCSSだけで作る、液体っぽくポワポワ動く背景の記事を参考にさせていただきました!
ありがとうございます!

2.ホーム画面

f052eb380ab88c219af0afa0d9c69a12.gif

ホーム画面ではすでに登録されている食材のうち、賞味期限が2日前以降の食材がリスト表示されます。
ランダムに賞味期限が近い食材が選ばれ、選ばれた食材を使用したレシピが提案されます。

3.登録/更新画面

一覧/登録タブ

c9cb2dcba8af64ebd7f53ea6a89bd75b.gif
こちらの画面ではクラウド冷蔵庫に登録されている食材を、保存場所ごとに確認することができます。
食材登録ボタンを押下するとモーダルが出現し、新たに食材を登録することができます。

更新/削除タブ

c586ba9971ca0a085920941199137a59.gif
こちらの画面では食材名がリンクとなっており、登録されている情報を編集することができます。
食材の情報を更新したり、食材を消費した場合はこちらの画面で操作することができます。
食材の消費に関しては、論理削除を行なっています。
(今後のアップデートで、消費した食材を使った機能を実装する可能性を考慮したため)

4.買い物リスト画面

買い物リスト作成タブ

dc774ffcf9acbe5da3edbbcc91af2d51.gif

こちらの画面で買い物リストを作成します。
メモ追加ボタンでモーダルを表示し、食材を登録することができます。

買い中タブ

caaf9f3510ce211c7228b8065498bf7e.gif

こちらの画面で買い物リストに登録された食材を確認し、情報の更新を行うことができます。
現実世界で食材をカゴに入れる際に、賞味期限を確認してこちらの画面で入力することで、クラウド冷蔵庫側でも買い物カゴに入れた状態にすることができます。
現実世界で会計が済ました後、買い物終了ボタンで食材を買い物リストからクラウド冷蔵庫に本登録してください。

5.机に広げる画面

0002aaa7f4a6fc2a03110c88a15447b1.gif

こちらでは、クラウド冷蔵庫に登録されている全ての食材を保存場所に関係なく一覧として確認することができます。
現実世界では実現することができない、クラウド冷蔵庫ならではの機能です。

工夫したところ

工夫したところは主に2点あります
1点目は、ユーザーの登録時にメール認証を実装した点です。
認証に関しての基礎は学習していたので、+αの機能としてメール認証を実装しました。
実装方法に関しては主にQiitaの記事を参考にしました。
@nekyo」様の【Laravel】ユーザ登録時にメール認証する(v5.7以上)
@mitashun」様のLaravelの言語を日本語に変更

2点目は、YoutubeAPIを使用した点です。
Webアプリケーションの優位性は、他のサイトとの連携が容易である事と考えています。Webアプロケーションを作成するにあたり、何かしらのAPIを使用したいと考えていました。
実装方法に関してはこちらもQiitaの記事を参考にしました。
@You-saku」様のPHPでYoutubeのAPIを利用したい
@gentuki」様の[PHP] YouTube APIの利用(動画情報の取得)
実装したのはいいものの、YoutubeAPIには使用回数制限が存在し、思い通りの動作が実現されないことが多くありました。
そこで、本番環境ではHerokuのSchedulerを使用して、毎日夜中に1回だけAPIを叩くようにしました。
以下の記事を参考にしました。
@Takuma_Ikeda」様のLaravel タスクスケジュールまとめ
@pythonista」様のHeroku Schedulerの設定方法

最後に

約1ヶ月半の期間でなんとか自分の盛り込みたいと考えた機能を実装することができました。
しかしながら、UI/UXの観点からユーザー様に使ってみたいと思っていただけるような状態ではないと思います。
他の初学者の方々が作成したポートフォリオのレベルと、自分自身のレベルを勝手に比較して、勝手に落ち込む毎日でした。
そこから何度も這い上がり、日々奮闘することで「1つの物」を作成し切った実績を作ることができました。
最初に「生ゴミのようなもの」と自分の作成物を評価しましたが、生ゴミを堆肥とした豊かな土壌で育つ植物のように、エンジニアとして成長していきます。

最後までお読みいただき、誠にありがとうございました!
頑張ります!!

16
11
2

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
16
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?