ionic,react,firebase,typescript를 사용하여 완전한 실시간 투표 응용 프로그램 구축 (제2부)

ionic,react,firebase 두 번째 부분을 사용하여 실시간 퀴즈 응용 프로그램 구축

마지막 부분(https://gymconsole.app/blog/ionic-firebase-poll-app에서 우리는 주로react와ionic를 사용하여 우리의 응용 프로그램에 UI를 구축한다.저희가 여론조사도 비웃었어요.
대답 대상.
이 부분에서, 우리는 최종적으로 Firebase를 추가하고 응용 프로그램의 기능을 전면적으로 할 것이다.
응용 프로그램의 전체 소스 코드는 다음과 같습니다.
https://github.com/RalliPi/realtime-poll-app
다음은 응용 프로그램이 완성된 후의 모습입니다.
Poll app demo video

인코딩을 시작하기 전에 Firebase 프로젝트를 만들어야 합니다.

https://console.firebase.google.com로 이동하여 새 프로젝트를 만듭니다.모든 필수 필드 작성 및 대기
프로젝트가 생성되었습니다.
다음으로 "Cloud Firestore"를 누르고 새로운 Cloud Firestore 데이터베이스를 만듭니다.
데이터베이스를 만들면 다음과 같은 내용이 표시됩니다.

우리 1차 여론조사까지본고는 어떻게 프로그래밍 방식으로 새로운 윤문을 추가하는지 설명하지 않을 것이다.우리는 투표에 참가할 것이다
수동으로 조작하면 사용자는 우리의 응용 프로그램을 사용하여 투표할 수 있다.(실제로 우리 프로그램에서 투표를 만드는 것은
미래).
"수집 시작"을 누르고 "수집 id"를 입력하십시오. 이것은 우리가 저장하는 모든
사용자에게 투표할 수 있는 사람에게 투표하다.다음을 클릭합니다.
우리 1차 여론조사까지"poll1"을 문서 id로 사용하고 문자열 형식의 텍스트라는 필드를 추가합니다.

이제 우리는 투표를 위해 가능한 답안을 추가할 수 있다.우리는 이곳에서 서브집합을 사용할 것이다.서브집합은 기본적으로
단일 문서 내의 컬렉션입니다.우리는 이 기능을 사용하여 임의의 투표 답안을 저장할 것이다.
하위 컬렉션의 각 문서는 상위 문서에 속합니다.
새로 만든 투표 문서에서 수집 시작 을 클릭합니다.하위 집합을 "answers"라고 부르고 새 것을 만듭니다
문서가 포함되어 있습니다.문서에는 "금액"이라는 필드가 있어야 합니다. (실제 투표 금액을 저장할 것입니다.)
받은 답안)과'텍스트'라는 필드입니다. 이것은 우리가 응용 프로그램에 표시한 텍스트입니다.

이제 Firebase 프로그램의 연결 설정을 복사합니다.우리는 잠시 후에 그것을 필요로 할 것이다.항목 설정으로 이동
왼쪽 위 모서리의 작은 톱니바퀴를 클릭합니다.Firebase 웹 프로그램의 설정을 아래로 스크롤하고 복사합니다.
그것은 보기에 이렇다.

const firebaseConfig = {
  apiKey: "yourapikey",
  authDomain: "yourauthdomain",
  databaseURL: "yourdatabaseurl",
  projectId: "yourprojectid",
  storageBucket: "yourstoragebucket",
  messagingSenderId: "yourmessagingsenderid",
  appId: "yourappid"
};

경고:
이 강좌는firestore 데이터베이스에 보안 규칙을 설정하지 않았다고 가정합니다.이것은 모든 사람이 당신의 데이터베이스를 읽고 쓸 수 있다는 것을 의미한다.이것은 매우 위험해서 생산에 배치해서는 안 된다.
그러나 이 안내서는 안전 규칙에 관한 것이 아니다.그래서 나는 여기서 그것들을 토론하지 않을 것이다.
네, 바로 화재 현장 쪽에 있습니다.인코딩을 시작할 때가 되었다.편집기에서 섹션 1의 항목을 엽니다.
우리가 진정으로 코드를 작성하기 전에, 우리는 먼저 의존항을 설치해야 한다.터미널을 열고 응용 프로그램으로 전환
디렉토리를 지정하고 다음 명령을 실행합니다.

npm install firebase

이것은 Firebase sdk를 우리의 프로젝트에 추가합니다.Firestore 데이터베이스와 통신하기 위해 필요합니다.
우리는 우선firestore 데이터베이스를 설정할 것이다.src 폴더에db라는 새 파일을 만듭니다.그것은 우리를 수용할 것이다
firebase 설정.
다음 코드를 붙여넣습니다.

import * as firebase from "firebase/app";
import "firebase/firestore";

var firebaseApp = firebase.initializeApp({
  apiKey: "yourapikey",
  authDomain: "yourauthdomain",
  databaseURL: "yourdatabaseurl",
  projectId: "yourprojectid",
  storageBucket: "yourstoragebucket",
  messagingSenderId: "yourmessagingsenderid",
  appId: "yourappid",
});

export const db = firebaseApp.firestore();

우선, Firebase와 Firestore를 가져옵니다.이후, 우리는 이전에 복사한 설정을 사용하여 Firebase를 초기화할 것입니다.안에 있다
마지막 줄은firestore 대상을 내보내고db라고 합니다.이런 방식을 통해 우리는 우리가 필요로 하는 모든 파일에서 Firestore에 쉽게 접근할 수 있다
데이터베이스를 가져옵니다.ts.

여론 조사와 답안에 쉽게 접근할 수 있는 연결 고리를 만들다

우리가 페이지에서 직접 사용하는 투표와 응답 대상을 기억해라.우리는 두 개의 갈고리로 그것들을 바꾸어야 한다.저것들
hooks는 투표와 투표 답안을 불러오고 저장합니다.
페이지 구성 요소로 이동하여 내용을 다음과 교환합니다.

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonCard,
  IonCardContent,
  IonList,
  IonItem,
  IonLabel,
} from "@ionic/react";
import React, { useState, useEffect } from "react";
import "./Home.css";
import { usePoll, usePollAnswers } from "../hooks/poll";

const Home: React.FC = () => {
  var poll = usePoll("poll1");
  var { answers, vote } = usePollAnswers("poll1");

  const onVote = (
    e: React.MouseEvent<HTMLIonItemElement, MouseEvent>,
    id: string
  ) => {
    e.preventDefault();
    let answer = answers.find((a) => a.id === id);
    vote(answer!.id);
  };

  const answerList = () => {
    return answers.map((answer) => (
      <IonItem onClick={(e) => onVote(e, answer.id)} key={answer.id}>
        <IonLabel>{answer.text}</IonLabel>
        <IonLabel>{answer.amount}</IonLabel>
      </IonItem>
    ));
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blanks</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardContent>
            {poll != null ? poll.text : "loading poll..."}
          </IonCardContent>
        </IonCard>
        <IonList>{answerList()}</IonList>
      </IonContent>
    </IonPage>
  );
};

export default Home;

구성 요소는 이전 버전과 거의 같아 보입니다.저희는 use State 연결에만 두 개의 맞춤형 연결을 했어요.
usePoll 및 usePollAnswers.우리는 사용하고 싶은 투표의 id를 전달하고 나머지는 갈고리로 처리합니다.
usePoll은 Firestore 데이터베이스에서만 폴링 대상을 되돌려주고 usePollAnswers는 답안 목록을 되돌려줍니다.
여론조사에 속하고 투표라고 불리는 방법도 있는데 여론조사 답안에 대해 투표할 수 있다.
작업을 시작하고 이러한 연결을 실현합시다.
srcdir에서 hooks라는 새 디렉터리를 만들고 만듭니다.ts 파일을 폴링이라고 합니다.ts 여기 있습니다.
다음을 넣습니다.

import { useState, useEffect } from "react";
import { db } from "../db";
import { Poll } from "../model/poll";
import { PollAnswer } from "../model/pollAnswer";
import { firestore } from "firebase";

export const usePoll = (pollId: string) => {
  const [poll, setPoll] = useState<Poll | null>(null);

  useEffect(() => {
    //load current poll
    db.collection("polls")
      .doc(pollId)
      .get()
      .then((poll: firestore.DocumentSnapshot<firestore.DocumentData>) => {
        if (poll.exists) {
          setPoll({
            id: poll.id,
            text: poll.data()!.text,
          });
        } else {
          console.log("couldn't find poll");
        }
      })
      .catch((error) => {
        console.log("error loading poll: " + error);
      });
  }, []);

  return poll;
};

export const usePollAnswers = (pollId: string) => {
  const [answers, setAnswers] = useState<PollAnswer[]>([]);

  //setup data listeners
  useEffect(() => {
    //load all possible answers
    var removeAnswersSnapshot = db
      .collection("polls")
      .doc(pollId)
      .collection("answers")
      .onSnapshot((snapshot) => {
        var answerObjects: PollAnswer[] = [];
        snapshot.docs.forEach((doc) => {
          answerObjects.push({
            id: doc.id,
            text: doc.data().text,
            amount: doc.data().amount,
          });
          setAnswers(answerObjects);
        });
      });
    return () => {
      removeAnswersSnapshot();
    };
  }, []);

  const vote = (id: string) => {
    var newAnswers = [...answers];
    var answer = newAnswers.find((a) => a.id === id);

    db.collection("polls")
      .doc(pollId)
      .collection("answers")
      .doc(answer!.id)
      .set(
        {
          amount: answer!.amount + 1,
        },
        { merge: true }
      );
  };

  return { answers, vote };
};

보시다시피 우리는 두 개의 함수/갈고리를 내보냈습니다. 모두pollId를 매개 변수로 합니다.
usePoll 갈고리가 어떻게 작동하는지 봅시다.
여기서 useState 갈고리를 빌려 Poll 유형의 국부 상태 대상을 설명합니다.이게 거의 저희예요.
이전에 우리의 페이지 구성 요소에서 직접 실행한 적이 있다.
useEffect 갈고리에서 실제 데이터베이스 호출을 진행하고 있습니다.어떤 값이든
두 번째 매개 변수에서 변경합니다.두 번째 매개 변수로 빈 목록을 전달할 때,
구성 요소를 설치합니다.
그래서 우리는 사용자가 홈페이지를 클릭한 후에 여론조사를 불러옵니다.

db.collection("polls").doc(pollId).get();

이것은 Firebase 문서 스냅샷을 포함하는 약속을 되돌려줍니다.이 스냅샷에 포함된 데이터는 실제로 동일합니다.
우리의 투표 유형으로하지만 우리는 던지기만 할 수는 없다.우리는 통과해야 한다
문서 스냅샷:

setPoll({
  id: poll.id,
  text: poll.data()!.text,
});

현재 우리의 로컬 상태 대상은 우리가 방금 서버에서 불러온 데이터를 윤문하여 저장하고 있다.
갈고리에서 로컬 폴링 대상으로 돌아가면 함수 외부에서 이 상태에 접근할 수 있습니다.
가장 멋진 부분은 갈고리 안의 국부 상태가 변화할 때마다 (즉 데이터를 불러오는 것) 되돌아오는 대상이다
변경 사항도 있습니다. (변경되지는 않지만 새로 설정된 데이터가 저장됩니다.)
우리는 페이지 구성 요소에서 실제 데이터베이스 불러오는 논리를 추상화했다.우리는 지금 그 중 어느 곳에서든 투표를 불러올 수 있다
어플리케이션에 문의하면 됩니다.

var myNewPoll = usePoll("myPollId");

usePollAnswers 함수를 살펴보겠습니다.이것은 좀 복잡하지만, usePoll 함수를 알고 있다면
작업은 usePollAnswers와 아무런 문제가 없을 것입니다.
우리는 또 지방정부를 사용하고 있다.그러나 이번에는 여론조사가 아닌 여론조사 답안 목록을 보존해야 한다.우리는
useEffect 연결에서 db를 다시 호출합니다.
이번에 우리는 우리가 원하는 값을 얻었을 뿐만 아니라, 실시간 탐지기를 설치하고 있다.

var removeAnswersSnapshot = db
  .collection("polls")
  .doc(pollId)
  .collection("answers")
  .onSnapshot(callback);

이것은 데이터베이스에서 문서를 폴링하는 하위 집합에 탐지기를 설정합니다.하위 집합은 기본적으로 다른 집합이다
데이터베이스에 문서의 집합만 존재합니다.데이터베이스에 있는 투표마다 있습니다.
이 특정 투표에만 속하는 답안을 가진 하위 집합.매번 호출할 때마다 리셋 방법을 호출한다
우리valueset의 문서가 변경되었습니다. (투표한 answerobject가 변경될 때마다)

.onSnapshot(snapshot => {
  var answerObjects: PollAnswer[] = [];
  snapshot.docs.forEach(doc => {
    answerObjects.push({
      id: doc.id,
      text: doc.data().text,
      amount: doc.data().amount,
    });
    setAnswers(answerObjects);
  });
})

리셋에서, 우리는 모든 문서를 반복해서 훑어보고, 새로운 윤문수 그룹을 구성한다.우리는 마침내 절약하고 있다
우리의 국부 상태 대상에서 새로 구성된 수조.
이번에 useEffect에서 실행된 함수는 함수를 반환합니다.이것은 useEffect 기능입니다.의 각 코드
이 함수는 구성 요소를 마운트 해제할 때 호출됩니다.저희가 지금 전화를 하고 있어요.

removeAnswersSnapshot();

저기이것은 Firestore에서 제공하는 onSnapshot 방법으로 되돌아오는 방법입니다.이 방법을 사용하면
데이터베이스에서 탐지기를 삭제하다.따라서 우리는 더 이상 페이지가 나타나자마자 데이터베이스 변경에 대한 업데이트를 얻지 못한다
구성 요소 제거
우리의 투표 응용 프로그램을 기능화하기 위해서 우리가 가장 필요로 하지 않는 것은 투표 기능이다.

const vote = (id: string) => {
  var newAnswers = [...answers];
  var answer = newAnswers.find((a) => a.id === id);

  db.collection("polls")
    .doc(pollId)
    .collection("answers")
    .doc(answer!.id)
    .set(
      {
        amount: answer!.amount + 1,
      },
      { merge: true }
    );
};

투표 방법은 PollAnswer의 id를 유일한 매개 변수로 합니다.그리고 현지 주에서 답을 찾습니다.
대상입니다. 그리고 set 방법을 호출하여 Firestore 데이터베이스에 쓰기를 실행합니다.우리는 단지
객체의 금액 필드를 업데이트합니다.우리가 전달한merge 매개 변수는firestore가 이전 대상을 통합하는 것을 알려준다
그것은 현재 우리가 제공한 새 값과 함께 저장되어 있다.이것이 바로 우리가 데이터베이스에 써야 할 모든 내용이다.
가장 멋있는 부분은 우리가 투표에서 금액 필드를 늘릴 때다.pollAnsers의 스냅샷 탐지기
사용자 인터페이스를 즉시 터치하고 업데이트합니다.우리는 이곳에서 어떤 수공 작업도 할 필요가 없다.
이 변경 사항을 완료하면터미널에서 항목 경로를 열고 입력

npm run start

이것은 개발 서버를 시작할 것입니다. 퀴즈 프로그램을 테스트할 수 있어야 합니다.여러 브라우저 창에서 응용 프로그램 열기
실시간 동기화 및 상태 저장 여부를 확인합니다.
그렇습니다.우리는react,ionic와
firestore.
만약 당신이 이런 내용을 좋아한다면, 방문https://gymconsole.app/blog하여 더 많은 강좌를 얻거나 트위터에 저에게 연락하세요
.
나는 당신과 이야기를 나누거나 당신의 프로젝트를 완성하는 것을 도울 수 있어서 매우 기쁩니다