Firebaseの基本機能を全部

# Firebase :fire: 
 Firebaseの基本機能の**ユーザー認証**、**リアルタイムデータベース**、**ホスティング**、**ストレージ**についてそれぞれ簡単に触ってみる

## はじめに
前提条件としてFirebaseでプロジェクトの作成まで完了しているとします。
まだプロジェクトができてない人は[Firebaseの始め方](https://qiita.com/kohashi/items/43ea22f61ade45972881)を参考にしてください

```
$ npm install firebase-tools -g　// firebase CLIをグローバルにインストール
$ firebase init // CLIでデプロイするために必要なfirebase.jsonの作成
$ firebase serve //Local Server
$ firebase deploy // デプロイ!
```
## ユーザー認証
##### 何ができるか?
> Firebase Authentication では、パスワード、電話番号、一般的なフェデレーション ID プロバイダ（Google、Facebook、Twitter）などを使用した認証を行うことができます。

**Github**アカウントでユーザー認証してみました。
Github側での設定は[ GitHub app's config.](https://github.com/settings/developers)から

1. Firebaseのプロジェクトネーム
2. デプロイしたアプリケーションのURL
3. コールバックURL

を追加すれば終わりです。他にも**Facebook**, **Googleアカウント**、**Twitter**などで認証可能

参考： [Firebase Authentication](https://firebase.google.com/docs/auth/?authuser=0)

![login.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/266140/c6965f86-2f93-dc8c-463e-13a14a0f5155.gif)

```javascript:app.js
document.addEventListener("DOMContentLoaded", event => {
    const app = firebase.app();
});

var el = document.querySelector("#login");
el.addEventListener("click", () => {
    const provider = new firebase.auth.GithubAuthProvider();

    firebase.auth().signInWithPopup(provider)
        .then(result => {
            const user = result.user;
            document.querySelector("#msg").innerHTML += `Hello ${user.displayName}`;
        })
})
```
## リアルタイムデータベース
##### 何ができるか?
> NoSQL クラウド データベースでデータの保管と同期を行うことができます。データはすべてのクライアントにわたってリアルタイムで同期され、アプリがオフラインになっても、利用可能な状態を保ちます。

Firestoreで普通のクエリを実行してみます。Firestoreの構成はこんな感じ


![スクリーンショット 2018-10-12 17.17.31.png](https://qiita-image-store.s3.amazonaws.com/0/266140/fcfdc607-1af4-44f0-adf4-1ca7c056ad51.png)

* ファイアベースをアプリに追加するための初期化
**API Key**は[**Firebaseコンソール**](https://console.firebase.google.com/?hl=ja) > [**開発**] > [**Authentication**] > [**ウェブ設定**] から確認 :fire:

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Firebase Hosting</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/5.5.3/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/5.5.3/firebase-auth.js"></script>
    <script defer src="/__/firebase/5.5.3/firebase-database.js"></script>
    <script defer src="/__/firebase/5.5.3/firebase-messaging.js"></script>
    <script defer src="/__/firebase/5.5.3/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.5.4/firebase.js"></script>

  </head>
  <body>
    <h1>Real time database</h1>
    <script>
  // Initialize Firebase
  var config = {
    apiKey: '<your-api-key>',
    authDomain: '<your-auth-domain>',
    databaseURL: '<your-database-url>',
    storageBucket: '<your-storage-bucket>'
  };
  firebase.initializeApp(config);
</script>
    <script src="app.js"></script>
  </body>
  <style>
  </style>
</html>
```

```javascript:app.js
var ref = db.collection('posts');

const query = ref.where('price', '>', 100)

query.get()
.then(snapshot => {
    snapshot.forEach(element => {
        data = element.data()
        document.write(`${data.title} : ${data.price} <br>`)
    });
})

```

## ストレージ
##### 何ができるか?
> Cloud Storage は、ユーザーが生成した写真や動画などのコンテンツを保管、提供する必要のあるアプリ デベロッパー向けに構築されています。

* Firebaseに画像をアップロード > ```put(image)```
* そのURLを取得して表示 > ```getDownloadURL()```

![upload.mov.gif](https://qiita-image-store.s3.amazonaws.com/0/266140/1161062a-e636-46ca-c9e8-38027168976f.gif)

```javascript:app.js
document.getElementById('upload').addEventListener('click', ()=>{
    var files = document.getElementById('file').files;
    var image = files[0];

    var ref = firebase.storage().ref().child(image.name);
    ref.put(image).then((snapshot) => {
        ref.getDownloadURL()
        .then((url)=>{
            document.getElementById('imgUpload').setAttribute("src", url);
        }) 
    })
})
```

## 最後に
全部とかタイトルで言いましたが、**Functions**と**ML kit**は載せてないです。。ごめんなさい:pray:
今度追加します！