Vue와 Firebase Cloud Firestore를 사용하여 스마트 뉴스레터 앱을 구축하는 방법

Vue 및 Firebase Cloud Firestore를 사용하여 스마트 뉴스레터 앱을 구축하는 방법

소개:
스마트 뉴스레터 앱은 오늘날 빠르게 변화하는 사회에서 중요한 역할을 합니다. 이 기사에서는 Vue와 Firebase Cloud Firestore를 사용하여 스마트 뉴스레터 애플리케이션을 구축하는 방법을 소개합니다. Vue는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 프레임워크입니다. Firebase Cloud Firestore는 데이터 저장 및 동기화를 위해 Google에서 제공하는 클라우드 데이터베이스 솔루션입니다. 이 두 가지 강력한 도구를 결합하면 실시간 메시징과 스마트 추천 기능이 포함된 뉴스레터 앱을 쉽게 구축할 수 있습니다.

1단계: Vue 프로젝트 만들기
먼저 Vue 프로젝트를 만들어야 합니다. 터미널을 열고 다음 명령을 실행합니다:

vue create smart-news

그런 다음 프롬프트에 따라 자신에게 적합한 구성을 선택하고 프로젝트 생성을 완료합니다.

2단계: Firebase 구성
다음으로 Firebase에서 새 프로젝트를 설정해야 합니다.

1. Firebase 콘솔(https://console.firebase.google.com/)을 방문하세요.
2. "프로젝트 만들기" 버튼을 클릭하고 메시지에 따라 프로젝트 이름을 입력하세요.
3. 프로젝트 설정에서 "앱 추가"를 클릭하고 "웹" 앱을 선택하세요.
4. 적절한 앱 이름을 입력하고 Firebase에서 제공한 구성 정보를 Vue 애플리케이션에 복사하세요.

Vue 프로젝트의 루트 디렉터리를 열고 src 디렉터리에서 main.js 파일을 찾으세요. 파일 상단에 다음 코드를 추가합니다.

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

// 在此处粘贴Firebase配置信息

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

3단계: Firebase 컬렉션 만들기
기사 데이터를 저장하기 위해 기사라는 컬렉션을 만듭니다. Firebase 콘솔을 열고 왼쪽의 "데이터베이스" 탭을 클릭하세요. 그런 다음 "데이터베이스 생성" 버튼을 클릭하고 "프로덕션 모드"를 선택합니다. 데이터베이스를 보호 모드로 설정하고 Firebase의 인증 메커니즘을 통해서만 액세스할 수 있기 때문에 "프로덕션 모드"를 선택했습니다.

"컬렉션 ID" 입력 상자에 "articles"를 입력하고 "다음"을 클릭하세요. 그런 다음 "시작 모드"를 선택하고 "활성화"를 클릭하십시오.

4단계: 기사 데이터 추가
다음으로, 이후 사용을 위해 Firestore에 일부 샘플 기사 데이터를 추가해야 합니다. Firestore 콘솔에서 "기사" 컬렉션을 클릭하고 "문서 추가" 버튼을 클릭하세요. 필드와 값을 하나씩 입력하거나 사전 정의된 JSON 형식을 사용하도록 선택할 수 있습니다.

샘플 기사 데이터:

{
  "title": "如何使用Vue和Firebase Cloud Firestore构建智能应用",
  "description": "本文介绍如何使用Vue和Firebase Cloud Firestore构建一个智能时事通讯应用。",
  "category": "技术",
  "timestamp": "2021-09-01 10:00:00"
}

기사 데이터를 추가하려면 "저장"을 클릭하세요.

5단계: Vue 구성 요소 만들기
이제 Vue 구성 요소 만들기를 시작할 수 있습니다. src 디렉터리에 "comComponents"라는 폴더를 만든 다음, 폴더 아래에 "Articles.vue"라는 파일을 만듭니다.

Articles.vue에서는 모든 기사를 표시하고 실시간으로 업데이트하는 구성 요소를 구현할 것입니다.

먼저 Firestore의 실시간 업데이트 기능을 Vue 구성 요소로 가져와야 합니다. Articles.vue 상단에 다음 코드를 추가합니다.

import { db } from '../main'

다음으로 구성 요소의 내보내기 옵션에 다음 코드를 추가합니다.

export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    // 获取文章数据
    db.collection('articles').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
      this.articles = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
    })
  }
}

기사 데이터를 렌더링하려면 템플릿 태그 안에 다음 코드를 추가합니다.

<div v-for="article in articles" :key="article.id">
  <h2>{{ article.title }}</h2>
  <p>{{ article.description }}</p>
  <p>{{ article.category }}</p>
  <p>{{ article.timestamp }}</p>
</div>

Step 6: 라우팅 및 보기 완료
브라우저에서 기사 목록 페이지에 액세스하려면 경로와 보기를 정의해야 합니다.

src 디렉터리에 있는 router.js 파일을 열고 다음 코드를 추가하세요.

import VueRouter from 'vue-router'
import Articles from './components/Articles.vue'

const routes = [
  { path: '/', component: Articles }
]

const router = new VueRouter({ routes })

export default router

App.vue에서 템플릿 태그에 다음 코드를 추가하세요.

<router-view></router-view>

7단계: 애플리케이션 실행
이제 모두 완료되었습니다. 필요한 설정과 코드가 준비되면 앱을 실행하고 결과를 확인할 수 있습니다.

터미널에서 다음 명령을 실행하세요:

npm run serve

그 후 브라우저를 열고 http://localhost:8080/을 방문하면 기사 목록 페이지가 표시되고 Firestore의 기사 데이터가 변경되면 페이지가 표시됩니다. 실시간으로 업데이트됩니다.

결론:
이 문서에서는 Vue 및 Firebase Cloud Firestore를 사용하여 스마트 뉴스레터 앱을 구축하는 방법을 설명합니다. Vue와 Firebase를 결합하여 실시간 메시징과 스마트 추천 기능이 포함된 뉴스레터 앱을 구축했습니다. 이 코드 예제가 여러분의 애플리케이션을 추가로 개발하는 데 도움이 되기를 바랍니다. Vue 또는 Firebase에 대해 궁금한 점이 있는 경우 공식 문서에서 자세한 내용을 확인할 수 있습니다. 나는 당신의 성공을 기원합니다!

위 내용은 Vue와 Firebase Cloud Firestore를 사용하여 스마트 뉴스레터 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!