search

ryo-i / firebase-test

firebase-test-eta.vercel.app
0 stars 0 forks source link

fetch apiで各種データを読み込む #2

Closed ryo-i closed 2 years ago

ryo-i commented 2 years ago

やりたいこと

Fetch APIでJsonファイルのデータを読み込む[済] Fetch APIでGoogle Sheets APIのデータを読み込む[済] Fetch APIでRealtime Databaseのデータを読み込む[済] Firebase関数でRealtime Databaseのデータを読み込む[中止] Fetch APIでFirestoreのデータを読み込む[済] Firebase関数でFirestoreのデータを読み込む[中止]

ryo-i commented 2 years ago

ローカルで「member.json」のデータを「member」モジュールで読み込み、consoleで表示 スクリーンショット 2022-01-09 7 49 35

ryo-i commented 2 years ago

ReactでAPIを叩く https://ja.reactjs.org/docs/faq-ajax.html https://omathin.com/react-api-2/

thenとasync/awaitの書き換え https://www.i-ryo.com/entry/2020/06/05/192657

ryo-i commented 2 years ago

urlをContextから読み込めるようにした

https://ja.reactjs.org/docs/hooks-reference.html#usecontext https://www.i-ryo.com/entry/2021/02/17/065811

ryo-i commented 2 years ago

Google Sheets APIでスプレッドシートをRest APIで叩く https://developers.google.com/sheets/api https://macoblog.com/google-spreadsheet-json/

スプレッドシート作成 スクリーンショット 2022-01-11 7 31 02

APIキー、ファイルID、シート名からAPIのURLを作成 https://sheets.googleapis.com/v4/spreadsheets/1jQfqA6yPurQWpkKYaU4mYiMwG_VXx6bgCCc-1zoZ4Tc/values/beatles?key=(APIキー)

キー+値の連想配列にはならなかった スクリーンショット 2022-01-11 7 23 25

Google Sheets APIのいろんな取得のしかた https://qiita.com/howdy39/items/5473160c93030c386c2d https://qiita.com/howdy39/items/ca719537bba676dce1cf

ryo-i commented 2 years ago

下記の記事でGASでスプレッドシートの配列の1行目をキー名にして連想配列化している事例がとても参考になった！ https://moripro.net/gas-object-key/

スクリーンショット 2022-01-12 5 52 51

ryo-i commented 2 years ago

Realtime DatabaseはJSONファイルのインポートができるので楽だった スクリーンショット 2022-01-12 6 06 53 スクリーンショット 2022-01-12 6 10 35

APIは「.json」を追加すれば叩ける https://www.i-ryo.com/entry/2021/02/24/062009

ryo-i commented 2 years ago

realtime databaseとfirebaseの比較 ・Firestoreはデータの範囲を細かく制御できる ・Realtime Databaseは一括インポート・エクスポートが強い https://techblog.kayac.com/rtdb-vs-firestore

firestoreのリージョンはasia-northeast1が東京 https://firebase.google.com/docs/firestore/locations?hl=ja

firesotoreのルール https://firebase.google.com/docs/firestore/security/get-started?hl=ja

realtime databaseからfirestoreにデータを移行 https://firebase.google.com/docs/firestore/firestore-for-rtdb?hl=ja#moving_data_to

今回はデータ量が少ないため手作業で入力する スクリーンショット 2022-01-12 6 48 43

スクリーンショット 2022-01-12 7 08 56

firesotoreのRest API https://firebase.google.com/docs/firestore/use-rest-api?hl=ja

firestroreの値は結構深い場所にあったが取得できた スクリーンショット 2022-01-12 7 03 42

ryo-i commented 2 years ago

Firebase関数でRealtime Database、Firestoreのデータを読み込みたかったがボリューム的に次回に回す。今回はここまで。

ryo-i commented 2 years ago

追加修正

GitGuardianからGoogle API Keyについてのメールあり https://www.yururiwork.net/archives/221 https://trslog.com/post-4836/?utm_source=pocket_mylist

調べた結果、APIキーは再発行しVercelの環境変数にして読み込むのが良さそう https://zenn.dev/maztak/articles/e72a5a38435af7

Next、Vercelでの環境変数 https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables

NEXT_PUBLIC_付ける https://zenn.dev/kazumax4395/articles/643ffc25d3f803

Promote to Productionをクリック https://zenn.dev/hota1024/articles/5caf986ebfe9e5