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

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

はじめに:
デジタル時代には、リアルタイム情報取得は重要なニーズの 1 つとなっています。ニュースレター アプリのリアルタイム同期機能により、ユーザーは最新のニュース、イベント、更新情報を常に把握できます。この記事では、Vue.js と Firebase Cloud Firestore を使用して、リアルタイム データ同期を備えたニュースレター アプリケーションを実装する方法を紹介し、対応するコード例を示します。

1. Vue.js と Firebase Cloud Firestore とは
Vue.js は、ユーザー インターフェイスの構築に使用される人気のある JavaScript フレームワークです。習得が簡単で、柔軟かつ効率的であり、シングルページ アプリケーションやモバイル アプリケーションの開発で広く使用されています。

Firebase Cloud Firestore は、柔軟なリアルタイムのクラウド データベース サービスです。これにより、バックエンド サーバーを自分で構築して保守する必要がなく、アプリケーションのデータを保存して同期する簡単な方法が提供されます。

2. プロジェクトの準備

1. Vue.js プロジェクトの作成
   まず、Vue CLI を使用して新しい Vue.js プロジェクトを作成します。ターミナルを開いて次のコマンドを実行します。

   vue create times-news-app

   希望の構成オプションを選択し、プロジェクトが作成されるまで待ちます。

2. Firebase Cloud Firestore の構成
   Firebase コンソールで新しいプロジェクトを作成し、Cloud Firestore データベースを追加します。プロジェクト設定で Firebase 構成情報を取得します。

Vue.js プロジェクトを開き、プロジェクトのルート ディレクトリに .env.local という名前のファイルを作成し、次の構成情報をファイルに追加します。

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

YOUR_API_KEY、YOUR_AUTH_DOMAIN などを、Firebase コンソールで取得した実際の値に置き換えます。

3. Vue コンポーネントの作成
まず、ニュース リストの表示用と新しいニュースの公開用の 2 つの Vue コンポーネントを作成する必要があります。

1. NewsList.vue

   <template>
     <div>
    <h1>时事新闻</h1>
    <ul>
      <li v-for="newsItem in newsList" :key="newsItem.id">
        {{ newsItem.title }}
      </li>
    </ul>
     </div>
   </template>
   
   <script>
   import db from '@/firebaseConfig.js';
   
   export default {
     data() {
    return {
      newsList: []
    };
     },
     created() {
    db.collection('news')
      .orderBy('timestamp', 'desc')
      .onSnapshot((snapshot) => {
        this.newsList = snapshot.docs.map((doc) => {
          return {
            id: doc.id,
            title: doc.data().title
          };
        });
      });
     }
   };
   </script>

2. NewNews.vue

   <template>
     <form @submit.prevent="submitNews">
    <h2>发布新闻</h2>
    <input type="text" v-model="newsText" placeholder="请输入新闻标题" />
    <button type="submit">发布</button>
     </form>
   </template>
   
   <script>
   import db from '@/firebaseConfig.js';
   
   export default {
     data() {
    return {
      newsText: ''
    };
     },
     methods: {
    submitNews() {
      db.collection('news')
        .add({
          title: this.newsText,
          timestamp: new Date()
        })
        .then(() => {
          this.newsText = '';
        })
        .catch((error) => {
          console.error('发布新闻失败：', error);
        });
    }
     }
   };
   </script>

4. ルーティングとスタイルを構成する
src/router/index.js ファイルでルーティングを構成します:

import Vue from 'vue';
import VueRouter from 'vue-router';
import NewsList from '@/views/NewsList.vue';
import NewNews from '@/views/NewNews.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'NewsList',
    component: NewsList
  },
  {
    path: '/new',
    name: 'NewNews',
    component: NewNews
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

src/App.vue ファイルで基本スタイルを設定します:

<template>
  <div id="app">
    <router-link to="/">新闻列表</router-link>
    <router-link to="/new">发布新闻</router-link>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
</style>

5. Firebase と Vue アプリケーションを統合する
src/firebaseConfig.js ファイルで Firebase を構成します:

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

const firebaseConfig = {
  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(firebaseConfig);

const db = firebase.firestore();

export default db;

最後に、src/main.js でVue と Firebase をファイルに統合します:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

6. アプリケーションを実行します
ターミナルで次のコマンドを実行してアプリケーションを実行します:

npm run serve

Visit http ://localhost: 8080 にアクセスすると、リアルタイム データ同期機能を備えたニュースレター アプリケーションが表示されます。

概要:
この記事では、Vue.js と Firebase Cloud Firestore を使用して、リアルタイム データ同期を備えたニュースレター アプリケーションを実装する方法を紹介します。ニュース リストを表示するためとニュースを公開するための 2 つの Vue コンポーネントを作成し、ルーティングとスタイルを構成しました。最後に、Firebase を使用してデータを保存および同期し、Vue アプリに統合します。これらの手順により、リアルタイム同期機能を備えたニュースレター アプリを簡単に構築できます。

参考資料:

• Vue.js 公式ドキュメント: https://vuejs.org/
• Firebase 公式ドキュメント: https://firebase.google com/docs
• Vue CLI 公式ドキュメント: https://cli.vuejs.org/

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