Vue Firebase Cloud Firestore en action : étapes et techniques pour créer une application de newsletter

Vue Firebase Cloud Firestore en action : étapes et techniques pour créer une application de newsletter

Avec le développement rapide d'Internet, la manière d'obtenir des informations d'actualité évolue également constamment. Aujourd’hui, les gens s’appuient de plus en plus sur les applications mobiles pour parcourir le contenu des actualités. Dans cet article, nous expliquerons comment utiliser Vue.js et Firebase Cloud Firestore pour créer une application de newsletter afin que les utilisateurs puissent se tenir au courant des dernières nouvelles.

Étape 1 : Créer un projet Vue

Tout d'abord, nous devons installer Vue CLI pour créer un projet Vue. Exécutez la commande suivante dans la ligne de commande :

npm install -g @vue/cli
vue create news-app
cd news-app
npm run serve

La commande ci-dessus créera un projet Vue nommé news-app et démarrera le serveur de développement.

Étape 2 : Installer Firebase

Dans le répertoire du projet, exécutez la commande suivante pour installer Firebase :

npm install firebase

Étape 3 : Créer un projet Firebase

Sur le site Web Firebase, créez un nouveau projet. Dans les paramètres du projet, recherchez « Ajouter une application » et sélectionnez l'option Web. Donnez un nom à votre application et copiez les informations de configuration fournies dans le fichier main.js du projet Vue.

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

Remplacez les champs tels que YOUR_API_KEY par vos propres informations de configuration.

Étape 4 : Créer une collection Firestore

Afin de stocker et de gérer les données d'informations sur l'actualité, nous devons créer une collection sur Cloud Firestore. Ajoutez le code suivant au fichier main.js pour créer une collection nommée « 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);
});

Le code ci-dessus ajoute un nouveau document d'actualité à la collection nommée « news ». En définissant le champ publiéAt sur un horodatage du serveur, nous pouvons garantir que chaque document d'actualité a sa propre heure de publication.

Étape 5 : Obtenez les données d'actualité de Firestore

Utilisez le composant Vue pour afficher les données d'actualité obtenues à partir de Firestore. Créez un composant NewsList.vue et ajoutez le code suivant dans le bloc modèle :

<template>
  <div>
    <h2>News List</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <h3>{{ 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>

Le code ci-dessus obtiendra les données d'actualité de Firestore en temps réel et les affichera sur la page.

Étape 6 : Créer la fonction d'ajout d'actualités

Ajoutez la fonction d'ajout d'actualités dans le composant NewsList.vue. Ajoutez le code suivant dans le bloc modèle :

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

Le code ci-dessus ajoutera des données d'actualité à Firestore à l'aide de la méthode addNews.

À ce stade, nous avons réussi à créer une application de newsletter simple en utilisant Vue.js et Firebase Cloud Firestore. Grâce à cette application, les utilisateurs peuvent parcourir les dernières nouvelles et informations, et peuvent également ajouter leurs propres actualités.

Résumé :

Cet article présente les étapes et techniques pour développer une application de newsletter à l'aide de Vue.js et Firebase Cloud Firestore. Grâce à la combinaison du framework Vue et de la base de données Firestore, nous pouvons créer une application d'actualités mise à jour en temps réel pour tenir les utilisateurs informés des dernières nouvelles. J'espère que cet article sera utile aux développeurs qui souhaitent développer des applications similaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!