ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。