仕事

リアルタイムデータベース 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

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

UITextFieldに余白がなくなる件

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

[c#] empty.exeっぽいの作ってみた

メモリの少ない環境で作業してるので、必要なんだけど作らなくても empty.exeでいいじゃないかw という、話もあるけど、リハビリもかねて作ってみた。 超自信ないw ちなみにWindows7 Pro …

備忘録:SugarCRMでADアカウント情報でログインする手順

管理者でログインする 管理メニューを選択する パスワード管理を選択する LDAPサポートを有効にする LDAP認証を利用する → チェックする ホスト名 → ActiveDirectoryサーバーの名 …

CentOS 6.5 に intra-mart をインストールしたときのメモ(その後)

外部アクセスに関する設定など思い出したら書く。 ストレージをWindowsからアクセスする設定 Sambaのインストール

アクセス用L …

角丸とか縁取りとか

iOS向けアプリのリファクタリングをしてるわけだが、画像の角丸が凸凹だったり縁の太さがマチマチだったり いっそのこと、iOS側で処理した方がきれいジャマイカ! ということで、以下のコードを追加してみた …