Vue Firebase Cloud Firestore の動作: ニュースレター アプリケーションを構築する手順とテクニック

Vue Firebase Cloud Firestore の動作: ニュースレター アプリケーションを構築するための手順とテクニック

インターネットの急速な発展に伴い、ニュース情報を入手する方法も常に変化しています。 。今日、人々はニュース コンテンツを閲覧するためにモバイル アプリにますます依存しています。この記事では、Vue.js と Firebase Cloud Firestore を使用して、ユーザーが常に最新ニュースを入手できるニュースレター アプリケーションを構築する方法を紹介します。

ステップ 1: Vue プロジェクトを作成する

まず、Vue CLI をインストールして Vue プロジェクトを作成する必要があります。コマンド ラインで次のコマンドを実行します。

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 の場合 Web サイトで、新しいプロジェクトを作成します。プロジェクト設定で、「アプリの追加」を見つけて、Web オプションを選択します。アプリケーションに名前を付け、指定された構成情報を 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」という名前のコレクションに新しいニュース ドキュメントを追加します。 publishedAt フィールドをサーバーのタイムスタンプに設定することで、各ニュース文書に独自の発行時刻が設定されるようになります。

ステップ 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 中国語 Web サイトの他の関連記事を参照してください。