読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

FirebaseのCodelabをやってみた。(前半)

Firebase

最近話題のBaaSであるFirebaseのCodelabをやってみましたので、メモ。

Codelabは、チュートリアルみたい意味ですかね。

 

www.publickey1.jp

 

Firebaseとは

Web, iOS, Android開発に対応したBaasとのこと。

firebase.google.com

単なる開発ツールではなく、アナリティクスやクラッシュレポートの作成、ノーティフィケーションなど、ビジネス運用上のサポートも手厚いとか??

さすがGoogleですね。はてブコメントで「焼き畑」と形容されていました。

 

詳しいことはよくわかりませんが、とりあえず手を動かしてみます。

 

gihyo.jp

 

1. 概要

チュートリアルで学べること

  • FirebaseのリアルタイムデータベースとFirebaseストレージを用いたデータの同期。
  • Firebaseオースを用いたユーザー認証。
  • Firebaseの静的ホスティングへのWebアプリケーションデプロイ。

必要なもの

  • IDEやエディタ
  • サンプルコード
  • Chromeのようなブラウザ

 

2. サンプルコードを取得

こちらからレポジトリをクローンします。

github.com

 

f:id:chuck0523:20160521155724p:plain

なんやかんや入ってますが、このチュートリアルでCodelabで使うのはwebとweb-startだけのようです。

 

3. スターターAppをインポート

web-start/をIDEにインポート、あるいはエディタで開きます。

f:id:chuck0523:20160521155940p:plain

おお、なんと見慣れたファイルたち。。

 

4. Firebaseプロジェクトの作成と、アプリケーションのセットアップ

プロジェクトの作成

下記のURLをクリックして、Firebase consoleを訪問します。

console.firebase.google.com

 

アプリケーションの初期化

すると、新規プロジェクトを作成というボタンがあるので押します。

f:id:chuck0523:20160521160259p:plain

 

シンプルなフォームが表示されるので、必要項目を入力します。

 

f:id:chuck0523:20160521160403p:plain

 

すると何やら、ダッシュボード的なものが立ち上がりました。

 

f:id:chuck0523:20160521160504p:plain

 

これがFirebase consoleですね。

ピンク色の「ウェブアプリにFirebaseを追加」をクリックします。

 

コードが表示されますので、web-start/index.htmlの下の方に貼り付けます。

 

f:id:chuck0523:20160521160735p:plain

 

※まれにstorageBucketの値が空になっているようです。その際は、ダイアログを再オープンしてください。

 

index.htmlにはご丁寧にコメントがありますね。

 

f:id:chuck0523:20160521160856p:plain

 

貼り付けます。

 

f:id:chuck0523:20160521160921p:plain

 

このコードはFirebaseのJavaScriptSDKをインポートして、Firebaseプロジェクト用に初期化してくれるみたいです。

 

GoogleAuthを有効化

ユーザーをサインインさせるために、Googleオースを有効にする必要があります。

 

Firebase consoleの左カラムにAuthという項目があるのでクリックします。

 

f:id:chuck0523:20160521161145p:plain

 

メインカラムに表示された「ログイン方法」をクリックします。

 

f:id:chuck0523:20160521161243p:plain

 

Googleを有効にしてみます。

 

f:id:chuck0523:20160521161431p:plain

 

ダイアログが開くので、右上の「有効にする」をチェック。保存を押します。

 

f:id:chuck0523:20160521161455p:plain

 

 

5. Firebase CLIのインストール

Firebaseコマンドラインツールをインストールします。これがあれば、ローカルでアプリケーションをいじれますし、Firebaseホスティングにデプロイすることも可能です。

 

サイドバーのメニューからHostingを選びます。

 

f:id:chuck0523:20160522131519p:plain

 

スタートガイドを選択。

 

f:id:chuck0523:20160522131550p:plain

 

ターミナルで以下のコマンドを打ちます。

 

f:id:chuck0523:20160522131619p:plain

 

インストールが完了しました。

 

f:id:chuck0523:20160522131856p:plain

 

バージョンが2.x.xではなく、3.x.xであることを確認できたら、認証を行います。

 

$ firebase login

 

すると、ブラウザで以下の画面が立ち上がります。

f:id:chuck0523:20160522132028p:plain

 

許可をクリック。

 

f:id:chuck0523:20160522132131p:plain

 

成功です。

 

プロジェクトディレクトリにて、セットアップを行います。

 

$ firebase init

 

f:id:chuck0523:20160522132526p:plain

 

各種質問事項に解答。

 

f:id:chuck0523:20160522132659p:plain

 

プロジェクトのエイリアスを追加します

 

$ firebase use --add

 

f:id:chuck0523:20160522132819p:plain

 

6. スターターAppの起動

さて、セットアップが終了したのでプロジェクトを起動する準備が整いました。

 

web-startディレクトリに移動して、ローカル起動コマンドを打ちます。

 

$ firebase serve

 

f:id:chuck0523:20160522133301p:plain

 

そして、localhost:5000にアクセスすると、

 

f:id:chuck0523:20160522133249p:plain

 

ちなみに、まだチャットは機能しません。メッセージを送ろうとすると「ログインが必要です」との警告が。

 

長くなってしまったのでいったんここで区切ります。続きは後半で。