Vue Firebase Cloud Firestore 작동: 뉴스레터 애플리케이션 구축을 위한 단계 및 기술

Vue Firebase Cloud Firestore 작동: 뉴스레터 애플리케이션 구축 단계 및 기술

인터넷의 급속한 발전에 따라 뉴스 정보를 얻는 방법도 끊임없이 변화하고 있습니다. 오늘날 사람들은 뉴스 콘텐츠를 탐색하기 위해 모바일 앱에 점점 더 의존하고 있습니다. 이 글에서는 사용자가 최신 뉴스를 받아볼 수 있도록 Vue.js와 Firebase Cloud Firestore를 사용하여 뉴스레터 애플리케이션을 구축하는 방법을 소개합니다.

1단계: Vue 프로젝트 생성

먼저 Vue 프로젝트를 생성하려면 Vue CLI를 설치해야 합니다. 명령줄에서 다음 명령을 실행하세요.

npm install -g @vue/cli
vue create news-app
cd news-app
npm run serve

위 명령은 news-app이라는 Vue 프로젝트를 생성하고 개발 서버를 시작합니다.

2단계: Firebase 설치

프로젝트 디렉터리에서 다음 명령을 실행하여 Firebase를 설치합니다.

npm install firebase

3단계: Firebase 프로젝트 만들기

Firebase 웹사이트에서 새 프로젝트를 만듭니다. 프로젝트 설정에서 "앱 추가"를 찾아 웹 옵션을 선택하세요. 애플리케이션에 이름을 지정하고 제공된 구성 정보를 Vue 프로젝트의 main.js 파일에 복사합니다.

import firebase from 'firebase/app'
import 'firebase/firestore'

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
}

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

YOUR_API_KEY와 같은 필드를 고유한 구성 정보로 바꾸세요.

4단계: Firestore 컬렉션 만들기

뉴스 정보 데이터를 저장하고 관리하려면 Cloud Firestore에 컬렉션을 만들어야 합니다. main.js 파일에 다음 코드를 추가하여 "news"라는 컬렉션을 만듭니다.

db.collection("news").add({
  title: "Breaking News",
  content: "This is the latest news update",
  publishedAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then((docRef) => {
  console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
  console.error("Error adding document: ", error);
});

위 코드는 "news"라는 컬렉션에 새 뉴스 문서를 추가합니다. 게시된 At 필드를 서버 타임스탬프로 설정하면 각 뉴스 문서에 고유한 게시 시간이 있는지 확인할 수 있습니다.

5단계: Firestore에서 뉴스 데이터 가져오기

Vue 구성 요소를 사용하여 Firestore에서 가져온 뉴스 데이터를 표시합니다. NewsList.vue 구성 요소를 만들고 템플릿 블록에 다음 코드를 추가합니다.

<template>
  <div>
    <h2 id="News-List">News List</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <h3 id="news-title">{{ news.title }}</h3>
        <p>{{ news.content }}</p>
        <p>{{ news.publishedAt.toDate() }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    db.collection('news').orderBy('publishedAt', 'desc')
      .onSnapshot((snapshot) => {
        this.newsList = snapshot.docs.map(doc => {
          return { ...doc.data(), id: doc.id }
        })
      })
  }
}
</script>

위 코드는 Firestore에서 실시간으로 뉴스 데이터를 가져와 페이지에 표시합니다.

6단계: 뉴스 추가 기능 만들기

NewsList.vue 컴포넌트에 뉴스 추가 기능을 추가합니다. 템플릿 블록에 다음 코드를 추가합니다.

<template>
  <div>
    <!-- ...上述代码... -->
    <form @submit.prevent="addNews">
      <input type="text" v-model="newsTitle" placeholder="News Title">
      <textarea v-model="newsContent" placeholder="News Content"></textarea>
      <button type="submit">Add News</button>
    </form>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: [],
      newsTitle: '',
      newsContent: ''
    }
  },
  mounted() {
    // ...上述代码...
  },
  methods: {
    addNews() {
      db.collection('news').add({
        title: this.newsTitle,
        content: this.newsContent,
        publishedAt: firebase.firestore.FieldValue.serverTimestamp()
      })
      .then(() => {
        this.newsTitle = ''
        this.newsContent = ''
      })
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
    }
  }
}
</script>

위 코드는 addNews 메서드를 사용하여 Firestore에 뉴스 데이터를 추가합니다.

이 시점에서 우리는 Vue.js와 Firebase Cloud Firestore를 사용하여 간단한 뉴스레터 애플리케이션을 성공적으로 구축했습니다. 이 애플리케이션을 통해 사용자는 최신 뉴스와 정보를 찾아볼 수 있고 자신의 뉴스를 추가할 수도 있습니다.

요약:

이 문서에서는 Vue.js 및 Firebase Cloud Firestore를 사용하여 뉴스레터 애플리케이션을 개발하는 단계와 기술을 소개합니다. Vue 프레임워크와 Firestore 데이터베이스의 결합을 통해 실시간으로 업데이트되는 뉴스 애플리케이션을 만들어 사용자에게 최신 뉴스를 지속적으로 알려줄 수 있습니다. 유사한 애플리케이션을 개발하려는 개발자에게 이 기사가 도움이 되기를 바랍니다.

위 내용은 Vue Firebase Cloud Firestore 작동: 뉴스레터 애플리케이션 구축을 위한 단계 및 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!