Firebase

react-redux-firebaseで、pushの自動生成key(ID)を事前に取得

firebaseでpushのkeyを事前取得 firebaseの公式サイトには、key(ID)の取得は以下のように書いてあります。 // Get a key for a new Post. var newPostKey = firebase.database().ref().child('posts').push().key; react-redux-firebaseでも同様に、 const f…

Firebaseアプリの公開 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。--only hostingオプションで、hostingのみ動作するようにします。(functionはserve…

Cloud Functions for Firebaseを使用して、"最近の更新"の件数を制限する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 前回までで、/recentUpdatedTodosへのデータの追加を行うことはできましたが、これではどんどんデータが溜まって行ってしまうので、個数を制限します。制限を超えたら古いデータを削除します。 firebaseのサンプル(limit…

Cloud Functions for Firebaseを使用して、タスク更新時に"最近の更新"へデータを追加する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 引き続き、addRecentUpdateOnUpdateCompletedを実装します。タスクが更新された時に、/recentUpdatedTodosにデータを追加します。 タスク更新時に"最近の更新"へデータを追加する addRecentUpdateOnUpdateCompletedの処…

Cloud Functions for Firebaseを使用して、タスク作成時に"最近の更新"へデータを追加する (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com addRecentUpdateOnCreateを実装します。タスクが作成された時に、/recentUpdatedTodosにデータを追加します。 表示したいデータ “最近の更新”は、以下のようになります。ユーザ名をクリックすると、ユーザのタスク一覧へ…

Cloud Functions for Firebase用の最初のコードの記述とデプロイ (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Cloud Functions for Firebaseで最初に小さいコードを書いて動作確認をします。 手始めに、DBの/todos/{uid}の下にタスクが追加された時と、タスクが更新された時にコンソールへメッセージを表示します。 トリガの動作確…

Cloud Functions for Firebaseの導入とfirebase init functionsの実行 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリにCloud Functions for Firebaseを導入します。 Cloud Functions for Firebaseでできること Cloud Functions for Firebaseでは、ユーザがログインしたり、データベースに書き込まれた際に関数を実行できます。関数…

データベースルールファイル(database.rules.json)の変更と反映 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データベースルールファイルを変更します。 todosのルール STEP 3では他のユーザのタスクは見れるので、そのように変更します。 database.rules.json { "rules": { "todos" : { "$uid": { ".read": true, // 変更 // 後…

Firebaseアプリの公開 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

データベースルールファイル(database.rules.json)の変更と反映 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com データベースルールファイル(database.rules.json)を変更します。 todosのルール STEP 2で作成したアプリでは、ユーザは自分のタスクのみ見れて、自分のタスクにのみ書き込めるので、ルールをそのように変更します。 dat…

Firebaseのログイン機能の有効化 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Firebaseを使用したログイン機能 FirebaseではGoogle、Facebook、twitterなどと連携したログイン機能を提供しています。各機能を有効化するために、コンソールで操作します。 ログイン機能の有効化 1. Firebase Console…

Firebaseアプリの公開 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com アプリが完成したので、Firebaseにアプリを公開します。 ビルドします。 $ yarn run build 一旦ローカルで正常に動くか確認しましょう。 $ firebase serve http://localhost:5000にアクセスして、動作確認しましょう。 …

Firebaseを使ったwebアプリで、apiKeyなどの接続に必要な設定をWeb Consoleで確認する手順

FirebaseをReactと共に使う時に、firebaseの設定をファイルに書く必要があるのですが、どこに書かれているかすぐにわからなくなるので、スクリーンショット付きで手順を示します。 1. Firebase console (https://console.firebase.google.com/)のProject Ov…

Realtime Databaseへのデータの事前登録 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com 今回のチュートリアルでは読み込み部分を先に作るため、先にデータベースにデータを登録します。 データファイルの準備 テキストエディタを開いて、以下の内容を記載します。ファイル名は、initial_todo.jsonにします。 …

Firebaseプロジェクトの作成 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事 yucatio.hatenablog.com Firebaseでアプリを開発するのには、まずプロジェクトをFirebase consoleで作成する必要があります。プロジェクトの作成の手順を示します。 1. Firebase Console (https://console.firebase.google.com/)を開きます。 …