Vue と Firebase Cloud Firestore を使用して、リアルタイムメッセージプッシュを備えたニュースレターアプリケーションを実装する方法-Vue.js-php.cn

Vue と Firebase Cloud Firestore を使用して、リアルタイムメッセージプッシュを備えたニュースレターアプリケーションを実装する方法

王林

リリース： 2023-09-13 08:12:29

オリジナル

1304 人が閲覧しました

如何利用Vue和Firebase Cloud Firestore实现实时消息推送的时事通讯应用

Vue と Firebase Cloud Firestore を使用して、リアルタイムメッセージプッシュを備えたニュースレターアプリケーションを実装する方法

はじめに:
インターネットの発展に伴い、現在人々の情報よりも事務情報の方が重要です。アクセスとコミュニケーションの重要性はますます高まっています。リアルタイムメッセージプッシュアプリケーションにより、最新の時事情報を簡単に入手できます。この記事では、Vue と Firebase Cloud Firestore を使用してリアルタイムメッセージプッシュニュースレターアプリケーションを実装する方法を紹介し、具体的なコード例を示します。

準備
まず、Vue CLI をインストールし、新しい Vue プロジェクトを作成する必要があります。ターミナルで次のコマンドを実行します:

npm install -g vue-cli
vue create news-app

ログイン後にコピー

インストールが完了したら、プロジェクトディレクトリに移動し、開発サーバーを起動します:

cd news-app
npm run serve

ログイン後にコピー

まず、Firebase プロジェクトを作成し、Firestore データベースを有効にする必要があります。 Firebase コンソールで [新しいプロジェクトの作成] を選択し、指示に従ってプロジェクトの作成を完了します。

プロジェクトの概要ページで、[Web アプリケーションに Firebase を追加] をクリックし、指示に従って生成された構成情報をコピーします。この情報を次のようにプロジェクト内の .env ファイルに保存します。

VUE_APP_FIREBASE_API_KEY=your_api_key
VUE_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
VUE_APP_FIREBASE_DATABASE_URL=your_database_url
VUE_APP_FIREBASE_PROJECT_ID=your_project_id
VUE_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VUE_APP_FIREBASE_APP_ID=your_app_id

ログイン後にコピー

次に、Vue プロジェクトに Firebase SDK をインストールして構成する必要があります。ターミナルで次のコマンドを実行します。

npm install firebase

ログイン後にコピー

firebase.js という名前のファイルを作成し、そのファイルに次のコードを追加します。

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

const config = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
}

firebase.initializeApp(config)

export const db = firebase.firestore()

ログイン後にコピー

これで、リアルタイムメッセージプッシュを受信するコンポーネントを作成できます。 Vue プロジェクトで
NewsFeed.vue という名前のコンポーネントを作成し、次のコードをファイルに追加します。

<template>
  <div class="news-feed">
    <h2>时事资讯</h2>
    <ul>
      <li v-for="(news, index) in newsList" :key="index">{{ news.content }}</li>
    </ul>
  </div>
</template>

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

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

<style scoped>
.news-feed {
  margin-top: 20px;
}
</style>

ログイン後にコピー

上記のコードでは、Firestore の

onSnapshot# を使用しています。 ##news コレクション内の変更を監視するメソッド。 snapshot.docChanges() メソッドを通じて最新のニュースプッシュを取得し、それを newsList 配列に更新します。

メッセージプッシュコンポーネントの使用

App.vue
ファイルを開き、次のコードをファイルに追加します。
```
<template>
  <div id="app">
    <news-feed></news-feed>
  </div>
</template>

<script>
import NewsFeed from './components/NewsFeed.vue'

export default {
  name: 'App',
  components: {
    NewsFeed
  }
}
</script>
```
ログイン後にコピー
これで、ニュースレターアプリが完成しました。開発サーバーを起動し、ブラウザでアプリを開くと、最新ニュースをリアルタイムで入手できます。

概要:

この記事では、Vue と Firebase Cloud Firestore を使用して、リアルタイムメッセージプッシュ用のニュースレターアプリケーションを実装する方法を紹介します。 Firebase の Firestore データベースと Vue のリアクティブデータバインディング機能を使用すると、リアルタイムメッセージプッシュ機能を簡単に実装できます。この記事が、Vue と Firebase を使用してリアルタイムアプリケーションを構築する方法を理解するのに役立つことを願っています。

以上がVue と Firebase Cloud Firestore を使用して、リアルタイムメッセージプッシュを備えたニュースレターアプリケーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。