楽天商品の価格通知アプリをつくりました

概要

個人開発で楽天商品のお買い得情報をLINE通知するWebアプリを作りました。

• 楽天価格通知アプリ
• ソースコード

このアプリは自分がほしいものリストに追加した楽天の商品がセールなどで安くなったら、LINE 通知してくれる web アプリケーションです。

想定ユーザー

自分用に作ったのでユーザーは自分だけです。
なので今のところ認証機能はありません。

使用技術

フロントエンド

• TypeScript 4.5.4
• Next.js 14.0.4
• MUI 5.15.20

バックエンド

• Python 3.12

インフラ

• Docker
• AWS
  • Lambda
    • LINE 通知処理やほしいものリストの CRUD 処理で使用
  • API Gateway
    • API の作成と管理や Lambda 関数との連携で使用
  • DynamoDB
    • 楽天の商品データの格納で使用
  • CloudWatch
    • ログ出力で使用
  • EventBridge
    • 指定した日時に LINE 通知の Lambda を実行するために使用
  • Secrets Manager
    • 外部 API のアクセスキーの管理で使用
  • CloudFormation
    • インフラのコード化で使用

外部 API

• LINE Notify API
  • LINE 通知を送るために使用
• 楽天市場 API
  • 楽天の商品データを取得するために使用

CI / CD

• GitHub Actions

  • Vitest
  • pytest

実行環境

• Vercel

画面イメージ

トップページ

1. 楽天商品のほしいものリストを表示

ほしいものリストに商品を追加

1. ＋ボタンクリックでモーダル画面を表示
2. 楽天の商品をキーワード検索
3. 検索結果の中から好きな商品を選択してほしいものリストに追加

ほしいものリストから商品を削除

1. ほしいものリストの中から削除したい商品を選択
2. 確認ダイアログで OK ボタンクリックでほしいものリストから削除

お買い得情報 LINE 通知

1. 毎日お昼 12 時にほしいものリストの商品価格をチェック
2. お買い得になっていたら LINE 通知が届く

システム構成図

ざっくり説明すると

• フレームワークは Next.js
• UI ライブラリは MUI
• ホスティングは Vercel
• データ管理やバッチ処理は AWS
• 商品データは楽天市場 API から
• LINE 通知は LINE Notify API

インフラ構成図

商品テーブル

項目名	データ型
itemCode	String
itemName	String
itemPrice	Number
itemUrl	String
mediumImageUrls	List of Maps
createdAt	String

機能一覧

• ほしいものリスト表示
• ほしいものリスト追加
• ほしいものリスト削除
• モーダル画面表示
• 楽天商品の検索機能
• LINE 通知機能