Ruby on Rails で食材管理アプリを作成 #Rails

はじめに

はじめまして。閲覧いただきありがとうございます。
今回、ポートフォリオで、Ruby on Railsを用いて食材管理アプリを作成しましたのでご説明します。
現在ポートフォリオ修正中(2021.12.14時点)

アプリ概要

購入した食材を管理する「食材管理アプリ」です。

購入した食材を記録
次に買う食材を買い物リストにメモ
YouTubeでレシピを検索

作成背景

前職で飲食の仕事をしていて、うっかり冷蔵庫の食材をダメにしてしまうことがあり、食材を管理できるアプリが欲しいと思い作成しました。
一般家庭向けに買い物メモとレシピ検索も一つのアプリでできればと思い買い物リストと検索機能を実装しました。

ポートフォリオのURL

url:https://ingredient-manager.herokuapp.com/
github:https://github.com/MotokiTakashima/ingredient_manager_app
ゲストログインボタンからゲストユーザーとしてログイン可能です。

何ができるのか

1.トップ画面

最初にトップページへアクセスすると画面が下にスクロールすると、機能の説明があります。
ヘッダーの左に在庫一覧、買い物リスト、レシピ検索を配置し、右にログイン、新規登録、ゲストログインを配置しています。
ヘッダーのロゴを押すとトップページへリダイレクトします。
ログインしていない状態で左のボタンを押すとログイン画面へリダイレクトします。

2.一覧画面

ジャンルごとにタグ分け機能を実装
simple_calendarを使い、登録した商品と関連づけ

3.食材登録

商品追加ボタンクリックで追加画面にページ遷移

ジャンル、商品名、期限を入力しないと投稿できないようにバリデーションを定義

4.買い物リスト

投稿、削除を一覧画面で行えるように簡易化
scssで左の投稿画面が動かないように固定

5.YouTube検索機能

使用技術

言語 : Ruby (3.0.0)
フレームワーク：Ruby on Rails (6.1.4.1)
フロントエンド : HTML&CSS/Bootstrap/SCSS
DB : PostgreSQL
インフラ : Heroku(ステージング環境 → 本番環境)
ソースコード管理：GitHub
開発環境：MacOS/Visual Studio Code(1.61.2)
GoogleYouTubeAPI

ER図

工夫した点

・ YouTubeAPIを使用し、キーワード検索機能を実装

youtube_controller.rb

def find_videos(keyword, after: 1.years.ago, before: Time.now)
    service = Google::Apis::YoutubeV3::YouTubeService.new
    service.key = GOOGLE_API_KEY

    keyword = params[:search]

    next_page_token = nil
    opt = {
      q: keyword,
      type: "video",
      max_results: 9,
      order: :date,
      page_token: next_page_token,
      published_after: after.iso8601,
      published_before: before.iso8601,
    }
    service.list_searches(:snippet, opt)
  end

  before_action :move_to_signed_in, except: [:top]

  def index
    @youtube_data = find_videos(@keyword)
    @check = params[:search]
  end
end

view/youtube/index.html.rb

<div class="search-form">
    <%= form_tag(youtube_index_path, method: :get) do %>
      <%= text_field_tag :search, "", placeholder:"材料をどうぞ" %>
      <%= submit_tag '検索' %>
    <% end %>
  </div>

・商品をジャンルごとに分けタグ機能を実装

データはseeds.rbに格納
postsテーブルとgenresテーブルを中間テーブルpost_genresを作成して関連づけ
アソシエーションを設定

models/post.rb

class Post < ApplicationRecord
  belongs_to :user, optional: true
  has_many :post_genres, dependent: :destroy
  has_many :genres, through: :post_genres, dependent: :destroy
end

models/genre.rb

class Genre < ApplicationRecord
  has_many :post_genres, dependent: :destroy
  has_many :posts, through: :post_genres, dependent: :destroy
end

models/post_genre.rb

class PostGenre < ApplicationRecord
  belongs_to :user, optional: true
  belongs_to :post
  belongs_to :genre
end

これからの課題

YouTube検索をした動画を非同期処理を使い、マイページのお気に入りに保存する
買い物リストから購入した商品を直接postsテーブルに保存する

最後に

最後まで読んでいただき、ありがとうございました。

ポートフォリオ作成途中、何度も躓きましたが、仮説を立て、検証するを繰り返し、形になるまで作りきることができました。
実際に躓いてた箇所が動いた時は堪らなく嬉しかったです。笑

はじめにER図なしで作り始め、途中でER図を作成したのですが、頭の中が整理され作業効率も上がったので設計の重要さも経験することができました。

機能につきましては基本的なことばかりなので、これからも新しい技術をキャッチアップしつつ、このポートフォリオにアウトプットできたらなと思います。

Ruby on Rails で食材管理アプリを作成