Vue Firebase Cloud Firestore チュートリアル: リアルタイム ニュースレター アプリを構築する方法

Vue Firebase Cloud Firestore チュートリアル: リアルタイム ニュースレター アプリケーションを構築する方法

はじめに:
インターネットの普及とモバイル デバイスの発展により、 、リアルタイムのニュースレター アプリケーションの重要性がますます高まっています。 Vue と Firebase は現在非常に人気のあるフロントエンドおよびバックエンド テクノロジーであり、これらを組み合わせて強力なリアルタイム アプリケーションを迅速に構築できます。このチュートリアルでは、Vue と Firebase Cloud Firestore を使用して、ユーザーが最新のニュースやイベントを即座に入手できるリアルタイムのニュースレター アプリケーションを構築する方法を説明します。

ステップ 1: Firebase プロジェクトを作成する
まず、Firebase コンソールで新しいプロジェクトを作成する必要があります。 Firebase コンソールでは、赤い [プロジェクトの追加] ボタンを見つけてクリックし、プロンプトに従って新しいプロジェクトを作成します。

ステップ 2: Firestore データベースを有効にする
Firebase プロジェクトを作成したら、Firestore データベースを有効にする必要があります。 Firebase コンソールの「開発」セクションに「Firestore」というオプションがあり、それをクリックして Firestore を有効にします。

ステップ 3: Vue プロジェクトを初期化する
Vue アプリケーションの構築を開始する前に、Vue CLI がインストールされていることを確認する必要があります。 Vue CLI をまだインストールしていない場合は、コマンド ラインで次のコマンドを実行してインストールできます:

npm install -g @vue/cli

次に、新しい Vue プロジェクトを作成します:

vue create news-app

作成中このプロセスでは、いくつかの構成オプションを選択するように求められます。ニーズに基づいて選択することも、デフォルトのオプションを受け入れることもできます。

ステップ 4: Firebase の依存関係をインストールする
新しく作成した Vue プロジェクト フォルダーに移動し、Firebase の依存関係をインストールします:

cd news-app
npm install firebase

ステップ 5: Firebase 構成をセットアップする
プロジェクト設定でFirebase コンソールのセクションに、「Web アプリケーションに Firebase を追加」というオプションがあります。それをクリックして、firebaseConfig オブジェクトをコピーします。

次に、Vue プロジェクトのルート ディレクトリに「firebase.js」というファイルを作成し、これをファイルに貼り付けます。

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

const firebaseConfig = {
  // 粘贴您的firebaseConfig对象
};

firebase.initializeApp(firebaseConfig);

export const db = firebase.firestore();

ステップ 6: Vue コンポーネントを作成する
In Vue プロジェクトの「src」フォルダーに、「components」という名前のフォルダーを作成します。フォルダー内に「NewsList.vue」という名前のファイルを作成し、次の内容を追加します。

<template>
  <div>
    <h2>最新新闻</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        {{ news.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { db } from '../firebase';

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    db.collection('news')
      .orderBy('createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        this.newsList = [];
        querySnapshot.forEach(doc => {
          this.newsList.push(doc.data());
        });
      });
  }
};
</script>

ステップ 7: Vue コンポーネントを使用する
Vue プロジェクトの「src」フォルダーで、「App.vue」を開きます。 vue" ファイルを開き、次の内容を既存の内容で置き換えます:

<template>
  <div id="app">
    <NewsList />
  </div>
</template>

<script>
import NewsList from './components/NewsList.vue';

export default {
  components: {
    NewsList
  }
};
</script>

ステップ 8: アプリケーションをコンパイルして実行します
次のコマンドを実行して、Vue アプリケーションをコンパイルして開始します:

npm run serve

これで、ブラウザで http://localhost:8080 にアクセスすると、アプリケーションが実行され、Firestore データベースからのニュース リストがリアルタイムで表示されるのを確認できます。

結論:
Vue と Firebase Cloud Firestore を組み合わせることで、ユーザーが最新のニュースやイベントを即座に入手できるリアルタイムのニュースレター アプリケーションを迅速に構築できます。このチュートリアルは単なる入門レベルの例であり、さらに拡張して機能を追加し、ユーザー エクスペリエンスを向上させることができます。このチュートリアルがお役に立てば幸いです。リアルタイム アプリケーションが成功することを祈っています。

以上がVue Firebase Cloud Firestore チュートリアル: リアルタイム ニュースレター アプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。