Firebaseの公式チュートリアルをやっていく(前編)

cd C:\root\work\firebase
git clone https://github.com/firebase/friendlychat-web

//グローバル空間にfirebaseCLIをインストールする。
//適宜自分の環境に合わせて実行するのもOKだと思います。
//ここでは、チュートリアルに沿ってやるため、グローバルにインストール。
npm -g install firebase-tools

//7.1.0とでた。バージョンはインストールするタイミングによって変わる。
firebase --version

//CLIからfirebaseへログインする。
firebase login

//匿名でCLIの使用状況レポートされてよい？という質問
//ここは状況に応じてY/N選んで
Allow Firebase to collect anonymous CLI usage and error reporting information?

//最初にgit cloneしたフォルダへ移動する
cd C:\root\work\firebase\friendlychat-web\web-start

//以下のコマンドを実行。何をしてるか気になる場合は
//firebase use -helpして確認するか、ググってください。
firebase use --add

//どのプロジェクトを追加したいか聞かれるので今回のチュートリアル用のプロジェクトを選択する。
? Which project do you want to add?
> takumi-friendlychat

//aliasは何にするという質問。例のごとく、friendlychatとしておく。
? What alias do you want to use for this project? (e.g. staging)
friendlychat

//web-startで実行
cd C:\root\work\firebase\friendlychat-web\web-start

firebase serve --only hosting
//web-start/publicをhttp://localhost:5000でホスティングしとるよとのこと。
i  hosting: Serving hosting files from: ./public
+  hosting: Local server: http://localhost:5000

<script src="/__/firebase/init.js"></script>

// サインインメソッド
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

// サインアウトメソッド
function signOut() {
  // Sign out of Firebase.
  firebase.auth().signOut();
}

// 認証ステータスの監視
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

// サインインユーザのプロフィール画像のパスを返す
function getProfilePicUrl() {
  return firebase.auth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// サインインユーザの名前を返す
function getUserName() {
  return firebase.auth().currentUser.displayName;
}

// サインインしているかを判定
function isUserSignedIn() {
  return !!firebase.auth().currentUser;
}

firebase serve --only hosting
//以下にアクセス
http://localhost:5000

// Saves a new message on the Cloud Firestore.
function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to Firebase Database', error);
  });
}

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                       message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image’s URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}