仕事

リアルタイムデータベース Firebase を使ってみよう

投稿日:


社内でハンズオン勉強会やったので、その時のあれ

はじめに

社内プロジェクトで端末間のデータ同期が課題になっていたところ、FirebaseというGoogleのMBaasを知ったので、どんな感じに使えるのかを試してみた結果を社内共有するために作成しました。

Googleアカウントでアクセス

弊社はそもそもGoogleアカウントなので、以下のURLにアクセスします。
https://firebase.google.com/
ログインしていない場合は、Googleにログインしましょう!
「コンソールへ移動」のリンクをクリックします

始めましょう

リアルタイムデータベースというぐらいなので、データベースを作成します。そのために、「プロジェクトを追加」をクリックします。

プロジェクトを作成する

プロジェクト名を適当に設定して、国はなんとなく日本に設定します。入力出来たら「プロジェクトを作成」をクリックします。

Databaseを選択

Firebaseには色々な機能があるんですが、今回はリアルタイムデータベースにフォーカスを当てているので、左メニューの「Database」をクリックします。

URLをメモする

データベースが出来上がってます。URLをメモしておいて下さい。あとで、PGMからアクセスするのに必要です。

ルールをクリックする

メニューの「ルール」をクリックします。ここには、データベースへの読み書き権限を設定します。で、今回は

読み書きのルールを設定する

図のように修正して、「公開」ボタンをクリックします。

今回だけはw

この設定は、誰でも読み書きできるという恐ろしい設定にしてます。本来は、ユーザー認証を実装して制御します。

リアルタイムにデータがみれる

メニューの「データ」をクリックします。今は何もないんですが、リアルタイムに書き込まれたデータを見ることが出来ます。

HTMLの作成

Javascriptの作成(その1

とりあえず、メッセージを入力してリターンキーを押すと、firebaseのコンソールでデータがリアルタイムに追加されるのが見れます。

Javascriptの作成(その2

入力したメッセージをエコーバックするコードを追記します。
これで、誰が発言したのかわからないけどチャットもどきアプリの完成です。

イベント駆動です

今回のハンズオンでは、child_addedというイベントのハンドリングしかしていませんが、色々あるので試してみよう!

-仕事
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

関連記事

UITextFieldに余白がなくなる件

デザイン的にborderStyleをnoneだとかlineにするときに余白がなくなって辛い… ので、CustomなUITextFieldを作ることになったのが、これ。 [crayon-5a …

CentOS 6.5 に owncloud をインストールしたときのメモ

備忘録として… 1.CentOS 6.5 をminimalでインストールする。 2.以下、とりあえずrootで作業。 EPELリポジトリの追加 [crayon-5ae1ea9917cfd3 …

インストールしたはずのデバイスドライバーが削除できない件

削除しようにも、「プログラムと機能」にもないし、デバイスマネージャーにもない。ひょっとして、インストールしたつもりが、してなかったとか言うオチ?いや、だってPCの挙動がおかしいんだもの…o …

CentOS 6.5 に intra-mart Accel Platform をインストールしたときのメモ

なんか、マニュアル見ててよくわかんないところを忘れないようにメモっとくテスト(作成中…) 前提条件 CentOS 6.5 を minimal Desktop でインストールしておく。 以下 …

完全にエージェントレスでWindowsサーバーを監視してみるテスト

zabbixのエージェント入れればいいやん! と言う結論が出そうなアレではあるけれども、Windowsサーバーを弄れない場合があるかもしれないし、ないかもしれない。 と言うことで、試してた。 zabb …