/BookReview

reactnatice app

Primary LanguageJavaScript

BookReview

概要

  • 本のISBNコードをカメラで読み取り、その本の情報を表示するアプリ

目的

  • 本屋で本を買う時に 本のレビューを簡単に見れたら嬉しいと思った。
  • 本屋で気になる本を探す。 家に帰ってから、アプリを通してweb storeが買う。 という流れを想定。

機能

  • 本屋で本のisbnを読み取るだけの簡単な操作で本の情報を見ることができる。
  • 本をlistに登録しておくことで、家に帰ってから気になった本の購入を吟味できる。
  • アプリからrakuten storeを開けるので、気になった本はアプリからrakuten books storeを開いて購入することができる

使った技術

  • expo
  • reactnative (redux)
  • firebase
  • rakuten books api

アプリの中身

ログイン画面

  • firebaseを用いて メールとfacebook loginを実装 iOS の画像 (4)

home画面

  • rakuten books apiから本のランキングをfetchして表示
  • 画面右上のボタンで、表示する本のジャンルを選択できるようにした。 iOS の画像 (3)

book list の画面

  • お気に入りの本を記録しておけるリストの画面
  • 本をクリックすると本の詳細画面に遷移する。
  • 評価や追加日によるsort iOS の画像 (2)

本の詳細ページ

  • isbnをもとにrakuten books apiからfetchした本の情報を表示する.
  • addを押すとbook listに追加できる
  • open rakuten を押すと、楽天ブックスのサイトに移動でき、webサイトから本を購入することができる。 IMG_2882

isbnコードの読み取り

  • isbnコードをカメラで読み取る。
  • 読み取ったコードで、rakuten apiを叩き、本の情報をfetchできる。

iOS の画像

TODO

  • WEB版も作ってみる
  • react
  • booklistのデータはfirestoreを使って cloudに保存してあるため、スマホで保存した本の情報をwebからも見れる。
  • 本屋にてスマホで本を探し、家に帰ってからPCで気になった本を買う流れにしたい。