Edited at

Firebaseの基本機能を全部


Firebase :fire:

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


はじめに

前提条件としてFirebaseでプロジェクトの作成まで完了しているとします。

まだプロジェクトができてない人はFirebaseの始め方を参考にしてください

$ 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.から


  1. Firebaseのプロジェクトネーム

  2. デプロイしたアプリケーションのURL

  3. コールバックURL

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

参考: Firebase Authentication

login.mov.gif


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


  • ファイアベースをアプリに追加するための初期化
    API KeyFirebaseコンソール > [開発] > [Authentication] > [ウェブ設定] から確認 :fire:


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>



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


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);
})
})
})



最後に

全部とかタイトルで言いましたが、FunctionsML kitは載せてないです。。ごめんなさい:pray:

今度追加します!