2020年04月10日

Firebase☓ReactでTODOリスト作成


npm install -g create-react-app
create-react-app firbase-todo
cd firbase-todo
yarn start


https://console.firebase.google.com/?hl=ja&pli=1にアクセスして「react-todo」プロジェクトを作成
このプロジェクトで Google アナリティクスを有効にするはOFFで、
アプリに Firebase を追加して利用を開始しましょうからWebを追加
アプリのニックネームは「react-todo」としてFirebaseHostingも有効にしてアプリを登録
設定の「Google Cloud Platform(GCP)リソース ロケーション」をasia-northeast1(東京)を設定
データベースに移動してネイティブモードに

npm install -g firebase-tools
firebase login
firebase init


Firestore とFunctionsとHosting 選択
Use an existing projectを選択
先ほど作成したプロジェクト「react-todo」を選択
What file should be used for Firestore Rules? Enter
What file should be used for Firestore indexes? Enter
What language would you like to use to write Cloud Functions? JavaScript
Do you want to use ESLint to catch probable bugs and enforce style? No
Do you want to install dependencies with npm now? Yes
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? No
yarn build
serve -s build でローカルが立ち上がる
firebase deploy --only hosting でホスティングにアップされる


functions/index.jsの以下のコメントアウトを外す

exports.helloWorld = functions.https.onRequest((request, response) => {
response.send("Hello from Firebase!");
});


以下でデプロイ

firebase deploy --only functions

表示されたURLを叩くと「Hello from Firebase!」と表示される

データベースのColllectionを作成しておく

スクリーンショット 2020-04-10 0.08.33.png

Firestoreにアクセスできるように firebase-adminをインストールしておく

yarn add firebase-admin


Firestoreアクセス用にindex.jsを以下のスクリプトに変更してデプロイ、ブラウザでgetにアクセスするとFiresoreの内容が出力される

const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp({
credential: admin.credential.applicationDefault()
});

const db = admin.firestore();

exports.helloWorld = functions.https.onRequest((request, response) => {
response.send("Hello from Firebase!");
});

exports.get= functions.https.onRequest(async (request, response) => {
const todosSnapshot = await db.collection('todos').get();
const todos = [];
todosSnapshot.forEach(doc => {
todos.push({
id: doc.id,
data: doc.data()
});
});
response.send(JSON.stringify(todos));
});

posted by ねこまんま at 00:11 | Firebase | 更新情報をチェックする