最新のニュースレター アプリを構築するための強力なツール: Vue と Firebase Cloud Firestore の組み合わせ

最新のニュースレター アプリケーションを構築するための強力なツール: Vue と Firebase Cloud Firestore の組み合わせ

過去数十年、インターネットの普及とモバイルの発展により、人々が情報にアクセスして共有する方法は劇的に変化しました。ニュースレター アプリは、人々が最新のニュースやイベントを入手するための主要なチャネルの 1 つとなっています。最新のニュースレター アプリケーションを構築するには、使いやすさとリアルタイムのデータ同期が必要です。

この記事では、Vue フレームワークと Firebase Cloud Firestore を組み合わせて最新のニュースレター アプリケーションを構築する方法を紹介し、具体的なコード例を示します。

1. 準備

まず、Vue CLI をインストールして、新しい Vue プロジェクトを作成する必要があります。コマンドライン ツールを開き、次のコマンドを入力します:

npm install -g @vue/cli
vue create news-app

次に、Firebase SDK をインストールして構成する必要があります。 Firebase コンソールで新しいプロジェクトを作成し、プロジェクトの構成情報を取得します。

Vue プロジェクトでは、Firebase SDK をインストールし、main.js ファイルに Firebase をインポートして構成する必要があります。コマンドライン ツールを開き、次のコマンドを入力します。

npm install firebase

main.js ファイルで、Firebase をインポートして設定します。

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()

これで、準備が完了したら、ニュースレター アプリの構築を開始する準備が整いました。

2. ニュース リストの作成

まず、ニュース リスト コンポーネントを作成する必要があります。 NewsList.vue という名前のファイルを src/components ディレクトリに作成し、次のコードを追加します。

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

<script>
import { db } from '../main'

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

<style scoped>
h2 {
  color: #333;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
}
</style>

上記のコードでは、最初に Firebase インスタンス オブジェクト データベースをインポートしました。 。コンポーネントの data メソッドで、Firebase から取得したニュース データを保存するための newsList 配列を定義します。コンポーネントの mounted ライフサイクル フックでは、onSnapshot メソッドを使用して、Firestore の news コレクションの更新をリッスンし、newsList# を更新します。 ＃＃ 配列。

次に、このニュース リスト コンポーネントを Vue ルート コンポーネントで使用する必要があります。

src/App.vue ファイルを見つけて、内容を置き換えます。

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

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

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

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

これで、Vue アプリケーションを実行して、ニュース リストの機能を表示できるようになります。コマンド ライン ツールに次のコマンドを入力します。

npm run serve

ブラウザを開いて

http://localhost:8080 にアクセスすると、簡単なニュース リストが表示されます。

ニュースの追加

次に、ユーザーがニュース タイトルを入力できるようにフォームを追加する必要があります。

src/components ディレクトリに AddNews.vue という名前のファイルを作成し、次のコードを追加します。

<template>
  <div>
    <h2>Add News</h2>
    <form @submit.prevent="addNews">
      <input v-model="title" type="text" placeholder="News Title" required />
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
import { db } from '../main'

export default {
  data() {
    return {
      title: '',
    }
  },
  methods: {
    addNews() {
      db.collection('news').add({
        title: this.title,
      })
      this.title = ''
    },
  },
}
</script>

<style scoped>
h2 {
  color: #333;
}
form {
  margin-top: 10px;
}
input {
  padding: 5px;
}
button {
  padding: 5px 10px;
}
</style>

上記のコードでは、 form を追加しました。

title 属性にバインドされ、ユーザーが入力したニュース タイトルを保存します。 addNews メソッドでは、add メソッドを使用して、ニュース タイトルを Firebase の news コレクションに保存し、入力ボックスをクリアします。

次に、このコンポーネントを使用して、Vue ルート コンポーネントにニュースを追加する必要があります。

src/App.vue ファイルを見つけて、次のコードを追加します。

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

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

export default {
  components: {
    NewsList,
    AddNews,
  },
}
</script>

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

保存してブラウザを更新すると、ニュース リストとニュースを追加するフォームが表示されます。

上記の手順により、簡単なニュースレター アプリケーションを構築することができました。ユーザーはフォームを通じてニュースのタイトルを追加し、ニュースリストの最新データをリアルタイムで観察できます。

概要

この記事では、Vue フレームワークと Firebase Cloud Firestore を組み合わせて最新のニュースレター アプリケーションを構築する方法を紹介します。 Firebaseのリアルタイムデータ同期機能を統合することで、リアルタイムにニュース一覧を取得・更新できるようになりました。

もちろん、これは単なる単純な例であり、実際のニーズに応じて拡張および最適化できます。この記事が最新のニュースレター アプリの構築に役立つことを願っています。

以上が最新のニュースレター アプリを構築するための強力なツール: Vue と Firebase Cloud Firestore の組み合わせの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。