Firebase에 온라인 채팅 애플리케이션 배포(1시간 과정)

↓ 만든 물건은 이렇다
실시간 인터넷 채팅 응용 프로그램 구축 (영어)

1 개요(60분 남았음)

Firebase를 사용하여 간단한 웹 응용 프로그램과 Firebase를 사용하여 채팅 클라이언트를 배치합니다.

뭐 공부 해요?

• Firebase 실시간 데이터베이스 및 스토리지 사용
· Firebase 인증
• Firebase에 호스팅되는 웹 애플리케이션 공개

뭐 공부 해요?

· 텍스트 편집기

, WebStorm, Atom 등.
/샘플 코드 (2로 만든 녀석)
・Sublime

2 예제 코드 가져오기(59분 남음)

복제본브라우저
명령 시 git clone https://github.com/firebase/friendlychat

3 애플리케이션 가져오기(57분 남았음)

클론의 web-start 디렉토리를 사용합니다.

4 Firebase 프로젝트 제작 및 어플리케이션 설정 (56분 남았음)

항목 만들기

Github 샘플 코드 페이지에서 새 항목 단추 클릭

애플리케이션 인증

웹 응용 프로그램에 Firebase 추가 를 선택합니다.
그래서 다음javascript의 부분을 얻었습니다.
복사 버튼을 눌러 index.html의TODO에 붙여넣기
Firebase 콘솔
여기에는 storageBucket 값이 "" 인 경우가 있으므로 창을 잠시 닫고 "웹 응용 프로그램에 Firebase 추가"를 다시 선택하십시오.

구글 인증 활성화

Firebase 콘솔에서
Auth> 로그인 방법 설정 > Goole > 슬라이딩 활성화 > 저장
태그 요소의 표시 속성을 수정합니다.

5 Firebase 명령행 설치(51분 남았음)

Firebase Command Line Interface(CLI)는 로컬에서 만든 응용 프로그램을 Firebase의 호스팅 서비스로 업그레이드하는 데 필수적이다
먼저 Firebase 콘솔에서 선택Hosting시작 설명서 단추를 누릅니다.
그 다음에는 화면으로만 진행됩니다.
CLI가 필요하지 않은 경우

및npm 설치
설치에 실패하면 node.js 이 필요합니다.
설치가 끝난 후 명령으로 아래를 두드리다

firebase version

3.*.* 같은 걸로 하면 돼요.2.*.*나오면 이미 낡았어요.
Firebase에 로그인합니다.명령줄에서

firebase login

cd 에서 web-start 디렉터리로 이동하여 다음 명령을 실행합니다

firebase use --add

여기에 나타나는 항목 Id 선택

6개 애플리케이션 시작 (49분 남았음)

web-start 폴더에서 다음 명령 실행

firebase serve

h ttp://localhost:5000/나오면 브라우저에서
npm의 구역 설정 변경이면 돼!
샘플 어플이 보일 거예요.
그냥 이렇게 하면 아무것도 할 수 없어서 수정했어요.

7 사용자 로그인 기능(48분 남았음)

Firebase 인증 초기화

scripts/main.js함수를 수정해야 하는 곳

FriendlyChat.prototype.initFirebase = function() {
  // Shortcuts to Firebase SDK features.
  this.auth = firebase.auth();
  this.database = firebase.database();
  this.storage = firebase.storage();
  // Initiates Firebase auth and listen to auth state changes.
  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};

구글 Firebase 인증

main.js의 FriendlyChat.prototype.initFirebase의 scripts/main.js 함수

// Signs-in Friendly Chat.
FriendlyChat.prototype.signIn = function() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(provider);
};

FriendlyChat.prototype.signIn

    // Sign out of Firebase.
    this.auth.signOut();

FriendlyChat.prototype.signOut

    // Get profile pic and user's name from the Firebase user object.
    var profilePicUrl = user.photoURL; // Only change these two lines!
    var userName = user.displayName;   // Only change these two lines!

FriendlyChat.prototype.onAuthStateChanged

  // Return true if the user is signed in Firebase
  if (this.auth.currentUser) {
    return true;
  }

여기에 쓰거나 브라우저를 다시 불러오거나 명령으로 치거나FriendlyChat.prototype.checkSignedInWithMessage브라우저firebase serve에 구글의 로그인 기능이 오른쪽에 설치되어 있어야 한다

8 메시지 읽기(38분 남았음)

Firebase 콘솔 역할의 데이터베이스 섹션 클릭
"//(←/세로로 정렬됨) 단추의 localhost:5000 단추를 누릅니다.
로컬JSONをインポート 디렉토리의 firebase_sample 을 가져오면 됩니다.

동기화 메시지

main.편집 jsinitial_messages.json

FriendlyChat.prototype.loadMessages = function() {
  // Reference to the /messages/ database path.
  this.messagesRef = this.database.ref('messages');
  // Make sure we remove all previous listeners.
  this.messagesRef.off();

  // Loads the last 12 messages and listen for new ones.
  var setMessage = function(data) {
    var val = data.val();
    this.displayMessage(data.key, val.name, val.text, val.photoUrl, val.imageUrl);
  }.bind(this);
  this.messagesRef.limitToLast(12).on('child_added', setMessage);
  this.messagesRef.limitToLast(12).on('child_changed', setMessage);
};

여기에 쓰거나 브라우저를 다시 불러오거나 명령으로 치거나FriendlyChat.prototype.loadMessages브라우저firebase serve에 구글의 로그인 기능이 오른쪽에 설치되어 있어야 한다

9 데이터베이스 보안 규칙(나머지 28분)

보안 규칙 설정

검증을 설정할 수 있습니다.null 검사 같은 거.
방법은 Firebase 콘솔 화면의 Databease 섹션의 규칙 탭에 있습니다.
기본 규칙은 이렇습니다.

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

9 항목은 선택 사항입니다.

메시지 10개(23분 남았음)

실시

main.js의 localhost:5000

// Saves a new message on the Firebase DB.
FriendlyChat.prototype.saveMessage = function(e) {
  e.preventDefault();
  // Check that the user entered a message and is signed in.
  if (this.messageInput.value && this.checkSignedInWithMessage()) {
    var currentUser = this.auth.currentUser;
    // Add a new message entry to the Firebase Database.
    this.messagesRef.push({
      name: currentUser.displayName,
      text: this.messageInput.value,
      photoUrl: currentUser.photoURL || '/images/profile_placeholder.png'
    }).then(function() {
      // Clear message text field and SEND button state.
      FriendlyChat.resetMaterialTextfield(this.messageInput);
      this.toggleButton();
    }.bind(this)).catch(function(error) {
      console.error('Error writing new message to Firebase Database', error);
    });
  }
};

여기에 쓰거나 브라우저를 다시 불러오거나 명령으로 치거나FriendlyChat.prototype.saveMessage브라우저 firebase serve 에서 발송이 설치되어 있어야 합니다.

11 이미지 전송 (남은 18분)

Firebase 스토리지에 이미지 저장

main.js의 localhost:5000

// Saves the a new message containing an image URI in Firebase.
// This first saves the image in Firebase storage.
FriendlyChat.prototype.saveImageMessage = function(event) {

  ...

  // Check if the user is signed-in
  if (this.checkSignedInWithMessage()) {

    // We add a message with a loading icon that will get updated with the shared image.
    var currentUser = this.auth.currentUser;
    this.messagesRef.push({
      name: currentUser.displayName,
      imageUrl: FriendlyChat.LOADING_IMAGE_URL,
      photoUrl: currentUser.photoURL || '/images/profile_placeholder.png'
    }).then(function(data) {

      // Upload the image to Firebase Storage.
      var uploadTask = this.storage.ref(currentUser.uid + '/' + Date.now() + '/' + file.name)
          .put(file, {'contentType': file.type});
      // Listen for upload completion.
      uploadTask.on('state_changed', null, function(error) {
        console.error('There was an error uploading a file to Firebase Storage:', error);
      }, function() {

        // Get the file's Storage URI and update the chat message placeholder.
        var filePath = uploadTask.snapshot.metadata.fullPath;
        data.update({imageUrl: this.storage.ref(filePath).toString()});
      }.bind(this));
    }.bind(this));
  }
};

Firebase 스토리지에서 이미지 보기

main.js의 FriendlyChat.prototype.saveImageMessage

// Sets the URL of the given img element with the URL of the image stored in Firebase Storage.
FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) {
  // If the image is a Firebase Storage URI we fetch the URL.
  if (imageUri.startsWith('gs://')) {
    imgElement.src = FriendlyChat.LOADING_IMAGE_URL; // Display a loading image first.
    this.storage.refFromURL(imageUri).getMetadata().then(function(metadata) {
      imgElement.src = metadata.downloadURLs[0];
    });
  } else {
    imgElement.src = imageUri;
  }
};

여기에 쓰거나 브라우저를 다시 불러오거나 명령으로 치거나FriendlyChat.prototype.setImageUrl브라우저 firebase serve 에서 이미지 전송이 설치되어 있어야 합니다.

12 스토리지 보안 규칙(남은 8분)

이것도 9와 마찬가지로 검증을 설정할 수 있다.선택할 수 있는 것이기 때문에 이번에는 생략했다

13 Firebase 호스팅에 애플리케이션 배포(3분 남았음)

firebase.json을

{
  // 9のステップを踏んだ場合は以下のコメントを外す
  // "database": {
  //   "rules": "database-rules.json"
  // },
  // 12のステップを踏んだ場合は以下のコメントを外す
  // "storage": {
  //   "rules": "storage.rules"
  // },
  "hosting": {
    "public": "./",
    "ignore": [
      "firebase.json"//,
      // "database-rules.json",//9のステップを踏んだ場合はコメントを外す（上の行のコメントも）
      // "storage.rules"// 12のステップを踏んだ場合はコメントを外す（同上）
    ]
  }
}

현재 디렉터리의 이름이 localhost:5000 이기 때문에 public 디렉터리를 복사하여 디렉터리 이름을 web-start 로 변경합니다.
수정 후 명령줄에서 public 디렉터리로 이동public그리고 다음 명령을 내리면 배치가 완료됩니다.

firebase deploy

지금 인터넷에 공개가 됐습니다!
간단한 실시간 채팅은 이걸로 할 수 있어요.
여기서 마치겠습니다.
그나저나 자바스크립트만으로 웹 서비스를 만들면 서버, AWS, Heroku를 임대할 필요가 없다.이거
파이어베이스 대단하다~
또 Firebase 단락이야.

Reference

이 문제에 관하여(Firebase에 온라인 채팅 애플리케이션 배포(1시간 과정)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sususuAI/items/9e651e8cffaa90681426

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Firebase crash Tips 가져오기(Android 편)

사내 ISUCON 기술 공개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다