Zenn
Closed32

アジチャレ（ハッカソン）で参考にした記事や考え方を書いていく

AWS
Lambda
Amplify
DynamoDB
#
ハッカソン
ゆーせいゆーせい

1日目を終えて

うまく行ったこと

  • フロントのホスティングができたこと
  • 画面設計に対してチームで共通認識が持てたこと
  • ci/cdを整えれた

うまくいかなかったこと

  • フロント部隊に対して的確な指示を出せていなかった
    • React初めてが2人,初心者が1人のフロントチームなので、細かめに指示を出した方がいい
    • 自分が1つページを作って、作り方を示すとわかりやすいかも
  • 当日にアイデアに対する意見の違いで時間を浪費してしまった
    • 開催日までにアイデアに対する認識に誤差がないか擦り合わせておくべきだった
ゆーせいゆーせい

難しいポイント
画像のアップロードからレビュー画面に遷移させる
↓
zustandでいまアップロードした画像のurlをグローバルで管理。
それを元に共通のレビューページで表示

ゆーせいゆーせい

S3に画像をランダムな文字列の名前で保
アップロードした時のファイルの名前を保存

S3に保存orローカルストレージに保存

ゆーせいゆーせい

IAM ポリシーの追加
lambdaの設定→インラインポリシーを作成→lambda関数に許可を与えてあげる

ゆーせいゆーせい

今晩のTODO

バックエンド

  • Cognitoによるアカウント認証
    • GraphQLまわり全然わからんし頑張る
  • lambdaでCRUD操作できるように
ゆーせいゆーせい

バックエンドの機能

アカウント登録
・Cognitoで認証したらDynamoDBにユーザーデータをコピー

自分がプレイしているビンゴ

  • ビンゴをランダムに生成する
  • ビンゴの構成と達成具合を取得
    • BingoIdからビンゴの情報を取得
      ・他の人が見れるようにする

タイムライン
・ランダムにビンゴを取得
・ビンゴの詳細な情報を取得
・保存
・いいね

マイページ
・自分が作成したビンゴを取得
・自分が達成したビンゴを取得
・保存したビンゴを取得
・id、メールアドレス、パスワード、アイコン、生年月日、ランクを登録
・idを使えるか確認

(ビンゴのマスを押したら)そのお店の情報を見れる画面
・お店の情報を取得

レビュー登録画面
・写真をアップロード
・星を登録
・コメントを登録

ゆーせいゆーせい

BINGOのflag
0->プレイ中のBINGO
1->保存したBINGO
2->作成したBINGO
3->投稿したBINGO

ゆーせいゆーせい

pythonでscanメソッドを使用すると、テーブル全体をスキャンするため、テーブルが大きい場合は非効率になる可能性があります。その場合は、別の方法でランダムなアイテムを取得する必要があるかもしれません。

ゆーせいゆーせい

get_mybingoの仕様
入力

  • userId

return

  • プレイ中のビンゴがあるなら
    → プレイ中のビンゴを返す
  • プレイ中のビンゴがないなら
    → 新しいビンゴをランダムな9個のお店から作る
ゆーせいゆーせい

post_reviewの仕様

BINGOSTATEテーブルのレビューの部分を更新する
入力

  • userId
  • bingo_id
  • Image
  • caption
  • star_taste
  • star_atmosphere
  • star_CP

戻り値
なし

ゆーせいゆーせい

S3に画像のアップロードをしてURLを返して、URL,ランダムな文字列の画像の名前,本当の画像の名前をDBに保存したいけど権限もないし、わからんことばかりでむずそうなので明日メンターさんに手伝ってもらいながら実装する

ゆーせいゆーせい

明日になったらメンバーに聞きたいこと＆頼みたいこと

  • ACCOUNTテーブルでなんでidとuser_idで分かれているのか
  • BINGOSTATEテーブルはaccountIDとbingoIDで検索できるのか
  • imageテーブルを作ってBINGOSTSATEテーブルと紐付けて欲しい
  • BINGO完成のフラグをもつのか
  • 発表スライドを綺麗に作って欲しい <- これ結構大事　(変なテンプレートは使わない)
ゆーせいゆーせい

post_reviewの動作

  1. eventからユーザーID、ビンゴID、レビュー情報(キャプション、味の評価、雰囲気の評価、コストパフォーマンスの評価)を取得する。
  2. BINGOSTATEテーブルからユーザーIDとビンゴIDに一致するアイテムを取得する
  3. アイテムが存在しない場合はエラーを返す
  4. アイテムが存在する場合は、以下のフィールドを更新する
  • review: レビューのキャプション
  • star_taste: 味の評価
  • star_atmosphere: 雰囲気の評価
  1. star_cp: コストパフォーマンスの評価
  2. 更新されたアイテムをput_itemメソッドを使って保存する
  3. 成功時には適切なレスポンスを返す

発展↓
評価を個別のフィールドで持っているのでソートしやすいし、評価で絞り込みとかもできそう

ゆーせいゆーせい

完成時にデモを見せる順番とそれぞれバックエンドで実装すべき機能

  1. ログイン
  • 余裕があれば(アカウント登録->フラグ発動(SAM?)->アカウント情報をDBにコピー)を実装
  1. タイムライン
  • とくにない
  1. MyBingo
  • S3を使って画像のアップロードとURLを返してDBに保存し、フロントにURLを返す
    • 画像用のテーブルを作る
  1. プロフィール
  • ある程度のプロフィールの情報をGETできるようにする
ゆーせいゆーせい

S3を使って画像のアップロードとURLを返してDBに保存し、フロントにURLを返す

どんな動作？

eventから画像ファイルのバイナリデータ、ビンゴID、ストアID、ユーザーIDを取得します。
一意のキー(bingo-images/{uuid}.jpg)を生成し、そのキーでS3にアップロードした画像のURLを生成します。
BINGOテーブルに、ビンゴID、ストアID、ユーザーID、画像ID、画像URLを含むアイテムを追加します。
成功時には、画像URLと画像IDを返します。
この実装では、画像ファイルをS3にアップロードし、その画像URLとユーザー情報などをBINGOテーブルに保存しています。

ポイントは以下の通りです:

画像ファイルのバイナリデータを直接Lambdaに渡す必要があります。通常、APIゲートウェイではバイナリデータを直接受け取ることはできないので、別の方法(例えばフォームデータやBase64エンコーディングなど)で画像データを渡す必要があります。
S3バケットの名前とリージョンが適切に設定されていることを確認してください。必要に応じて、アクセス権限の設定なども行ってください。
画像URLの生成方法は環境によって変わる可能性があるので、適宜調整が必要かもしれません。
BINGOテーブルにアイテムを追加する際、ビンゴID、ストアID、ユーザーIDをキーとして使用しています。必要に応じてキーの構造を変更してください。

ゆーせいゆーせい

時間が結構迫ってきたから一回タスク整理する
自分がやるタスク

  • 画像をアップロードするAPIを作る
    • S3の設定をする 15min
    • 画像をどうバイナリデータで送るか考える←メンターさんと相談 10min
  • axiosでフロントからAPIを叩けるようにする
    • hooksでそれぞれのAPIを定義する 40min
    • 画像をバイナリデータに変換する 30min
このスクラップは1ヶ月前にクローズされました