仕事

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

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

*

関連記事

ブラウザ上でHTML / CSS / Javascriptを書いて実行出来るサイト

備忘録的に。 http://jsdo.it/ http://jsfiddle.net/ http://jsbin.com/ http://plnkr.co/ 使いやすそうなのを使えばいいか。

AS/400でデータベースサービスを再起動する

どうでもいいけど、これぐらいでIPLかけるんじゃねぇ!

角丸とか縁取りとか

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

tomcat7にSSL証明書を…

apache + tomcatなら、apacheに設定しておけばいけるんだよね.

UITextFieldに余白がなくなる件

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