Vue と Firebase Cloud Firestore を使用してスマート ニュースレター アプリを構築する方法

Vue と Firebase Cloud Firestore を使用してスマート ニュースレター アプリケーションを構築する方法

はじめに:
スマート ニュースレター アプリケーションは、今日のペースの速い社会において重要な役割を果たしています。 。この記事では、Vue と Firebase Cloud Firestore を使用してスマート ニュースレター アプリケーションを構築する方法を紹介します。 Vue は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Firebase Cloud Firestore は、データの保存と同期のために Google が提供するクラウド データベース ソリューションです。これら 2 つの強力なツールを組み合わせることで、リアルタイム メッセージングとスマートなレコメンデーションを備えたニュースレター アプリを簡単に構築できます。

ステップ 1: Vue プロジェクトを作成する
まず、Vue プロジェクトを作成する必要があります。ターミナルを開いて次のコマンドを実行します。

vue create smart-news

次に、プロンプトに従って適切な構成を選択し、プロジェクトの作成を完了します。

ステップ 2: Firebase を構成する
次に、Firebase で新しいプロジェクトをセットアップする必要があります。

1. Firebase コンソール (https://console.firebase.google.com/) にアクセスします。
2. [プロジェクトの作成] ボタンをクリックし、プロンプトに従ってプロジェクトの名前を入力します。
3. プロジェクト設定で、[アプリの追加] をクリックし、[Web] アプリを選択します。
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 コレクションを作成する
記事データを保存するための、articles というコレクションを作成します。 Firebase コンソールを開き、左側の [データベース] タブをクリックします。次に、「データベースの作成」ボタンをクリックし、「実稼働モード」を選択します。 「本番モード」を選択したのは、データベースが保護モードに設定され、Firebase の認証メカニズムを使用してのみアクセスできるためです。

「コレクションID」入力ボックスに「articles」と入力し、「次へ」をクリックします。次に、「開始モード」を選択し、「有効にする」をクリックします。

ステップ 4: 記事データを追加する
次に、後で使用できるようにサンプル記事データを Firestore に追加する必要があります。 Firestore コンソールで「articles」コレクションをクリックし、「ドキュメントの追加」ボタンをクリックします。フィールドと値を 1 つずつ入力することも、事前定義された JSON 形式の使用を選択することもできます。

サンプル記事データ:

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

[保存]をクリックして記事データを追加します。

ステップ 5: Vue コンポーネントを作成する
これで、Vue コンポーネントの作成を開始できます。 src ディレクトリに「components」という名前のフォルダーを作成し、そのフォルダーの下に「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>

ステップ 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/ にアクセスすると、記事リスト ページが表示されます。記事データが変更されると、リアルタイムでページが更新されます。

結論:
この記事では、Vue と Firebase Cloud Firestore を使用してスマート ニュースレター アプリケーションを構築する方法について説明します。 Vue と Firebase を組み合わせることで、リアルタイム メッセージングとスマートなレコメンデーションを備えたニュースレター アプリを構築しました。これらのコード例が独自のアプリケーションの開発に役立つことを願っています。 Vue または Firebase について質問がある場合は、公式ドキュメントで詳細情報を確認してください。私はあなたの成功を祈って！

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