FirebaseをJavascriptでできる範囲で一通り触ってみる

公式の ``quickstart-js`` を使ってFirebaseをいろいろ使ってみたログ。

# 【Analytics】
![Firebase Console1.png](https://qiita-image-store.s3.amazonaws.com/0/135041/945a3c17-047a-c047-2f70-3231d529091c.png)

* マイレポート一覧
    * いわゆるダッシュボード的なやつ
* イベント
    * first_open, notification_foreground, notification_open, notification_receive, session_start がデフォルトで用意されている
* ユーザー
    * All Users, Purchasers がデフォルトでセグメントされている
* アトリビュージョン
* 目標達成プロセス
* コホート
* ユーザープロパティ


# 【DEVELOP】

## Cloud Messaging
![Firebase Console3.png](https://qiita-image-store.s3.amazonaws.com/0/135041/363d1d72-c474-4007-da08-f67bb7fa1f26.png)

https://firebase.google.com/docs/cloud-messaging/http-server-ref
https://firebase.google.com/docs/cloud-messaging/server
WebのGUIから送る機能がないので、Webプッシュ通知を送るにはFCM App Server Protocolを叩く必要がある。
Notificationと違ってFirebaseのコンソールでログを確認できないのが残念。

https://firebase.google.com/docs/cloud-messaging/js/receive

```bash
https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=AIzaSyC...akjgSX0e4

{ "notification": {
    "title": "Background Message Title",
    "body": "Background message body",
    "click_action" : "https://dummypage.com"
  },
  "data": {
    "uid": "012345",
    "category": "dummy"
  },
  "to" : "eEz-Q2sG8nQ:APA91bHJQRT0JJ..."

}
```

Webブラウザに対してFCMを送るときは ``payload`` を暗号化しないと送れなかったが、
javascript SDKを使うとSDKがよろしくやってくれるので ``title`` や ``body`` がそのまま送れるようになった。
javascript SDKのドキュメントは英語しかないため、言語設定を ``日本語`` にしていると左カラムのメニューに出てこない。
ここ以外にも英語しかないページがあるので、ページ下部の言語設定で ``English`` にしておこう。

## Auth
![Firebase Authentication Example.png](https://qiita-image-store.s3.amazonaws.com/0/135041/d190a58f-d035-2a2d-5367-e8467e6c3e67.png)

* メール/パスワード
* Google
* Facebook
* Twitter
* Github
* 匿名

で、ログインできるサンプルがGithubで提供されている。
https://github.com/firebase/quickstart-js
すげぇ便利！！

![Firebase Console4.png](https://qiita-image-store.s3.amazonaws.com/0/135041/20557b45-a62d-2cd5-a83e-e2ec9af495cb.png)
事前にログインに利用したいプロバイダのステータスを有効にしてから、
https://github.com/firebase/quickstart-js
にサンプルがあるのでcloneして、各index.htmlの指定の場所に「ウェブアプリに Firebase を追加」で出てくるスクリプトを入れ込むだけ。

![Firebase Console.png](https://qiita-image-store.s3.amazonaws.com/0/135041/059eacd8-5079-89e9-f872-4b2e8001f815.png)

後述するHostingを使ってアップロードすればFirebaseだけでいろいろ試すことができる。

## Database
![Firebase Database Quickstart.png](https://qiita-image-store.s3.amazonaws.com/0/135041/9b74a0a4-6ed3-9415-6fbf-ee5cc3b4fb4a.png)
GoogleのOAuthログインをすると簡易ブログが利用できる。
Authは前述のFirebase Authを使っていて、
ブログのデータはすべてFirebase Databaseにjsonで格納されている。

![Firebase Console5.png](https://qiita-image-store.s3.amazonaws.com/0/135041/9da6b22b-0fb6-835b-261a-825959e23a2c.png)

## Storage
![Firebase Console6.png](https://qiita-image-store.s3.amazonaws.com/0/135041/5fa225a3-d3c6-10c5-c4bc-318ec54fec72.png)

ファイルをアップロードして利用できる。
直リンできるのでファイルサーバー的にも利用できる。
ルールで利用できるフォルダやファイルをauthグループごとに権限管理できる。

## Hosting
静的ファイルをホスティングできる。
quickstart-jsをそのままアップロードすると、
Auth/Database/Storageを試せるのでやってみるとよいかと。

```
$ npm install -g firebase-tools
$ firebase login --no-localhost
? Allow Firebase to collect anonymous CLI usage information? Yes

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=*****

? Paste authorization code here: *****

✔  Success! Logged in as yourmail@gmail.com

# firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /usr/local/quickstart-js

Before we get started, keep in mind:

  * You are currently outside your home directory

? What Firebase CLI features do you want to setup for this folder? Database: Deploy Firebase Realtime Database Rules, Hosting: Configure and deploy Fireb
ase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? What Firebase project do you want to associate as default? 
どのプロジェクトか選ぶ

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for webpush-6d46b have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

# firebase deploy

=== Deploying to 'プロジェクト名'...

i  deploying database, hosting
✔  database: rules ready to deploy.
i  hosting: preparing public directory for upload...
✔  hosting: 2 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Hosting Site: https://プロジェクト名.firebaseapp.com
Dashboard: https://console.firebase.google.com/project/プロジェクト名/overview

Visit the URL above or run firebase open
```

https://groups.google.com/forum/#!topic/firebase-talk/JA-DpZ2hmvw
``--no-localhost`` を付けないとGoogle認証後に
localhostへリダイレクトされて認証失敗する。

public配下のファイルのみがアップロードされる。
firebase.jsonでhosting対象のフォルダを指定できる。

publicフォルダに新たにファイルと追加後、
再度 ``firebase deploy`` でアップロードできる。


## Remote Config
https://firebase.google.com/docs/remote-config/
Key/Valueでアプリで使える設定値を定義できる。

## Test Lab
https://firebase.google.com/docs/test-lab/
リモートでAndroidアプリをテストすることができる。
エミュレーターなのでバージョンや機種も選択可能。


## Crash
https://firebase.google.com/docs/crash/
アプリがクラッシュしたときのレポートを出してくれる。

# 【GROW】
これ以降はアプリ専用なので紹介だけ。

## Notification
https://firebase.google.com/docs/notifications/
アプリでnotificationを送るのに使える。
Firebase Cloud Messageと違いコンソールから開封確認などできる。

## App Indexing
https://firebase.google.com/docs/app-indexing/
Googleの検索結果にアプリを表示させるあれ。

## Dynamic Links
https://firebase.google.com/docs/dynamic-links/
notificationからアプリを開いた際に、
アプリ内の特定のページを開かせるあれ。

## Invites
https://firebase.google.com/docs/invites/
https://googledevjp.blogspot.jp/2016/08/firebase-invites.html
> Firebase Invites は Firebase Dynamic Links の上に構築されています。そのため、ユーザーは特定のディープリンク情報を友人と共有することができます。つまり、招待を受け取った方は、アプリのホーム スクリーンではなく、クリックした招待に関連づけれられたエクスペリエンスによってアプリの利用をすぐに開始できます。

## AdWords
https://firebase.google.com/docs/adwords/

# 【EARN】

## AdMob
https://firebase.google.com/docs/admob/