ChatGPT와 함께 PWA Blog 개발 - 독자

64. 나의 독자

ChatGPT에게 물었습니다.

I want to get a list of members who subscribe to me.

나를 구독하는 회원의 리스트를 얻고 싶어.

ChatGPT

 

To get a list of members who subscribe to a specific user, you need to query the users collection in Firestore for all documents where the subscriptions array contains the user's UID. This requires setting up a query with Firestore's array-contains operator.

특정 사용자를 구독하는 구성원 목록을 얻으려면 Firestore의 users 컬렉션에서 subscriptions 배열에 사용자의 UID가 포함된 모든 문서를 쿼리해야 합니다. 이를 위해서는 Firestore의 array-contains 연산자를 사용하여 쿼리를 설정해야 합니다.

Step 1: Firestore Query to Get Subscribers

1단계: 구독자 확보를 위한 Firestore 쿼리

First, you need to set up a Firestore query to fetch all users who have the current user's UID in their subscriptions array.
먼저 '구독' 배열에 현재 사용자의 UID가 있는 모든 사용자를 가져오도록 Firestore 쿼리를 설정해야 합니다.

Step 2: Implement the Query in a Vue Component

2단계: Vue 구성 요소에서 쿼리 구현

Here is a Vue component that performs this query and displays the list of subscribers:
다음은 이 쿼리를 수행하고 구독자 목록을 표시하는 Vue 구성 요소입니다.

src/components/SubscribersList.vue

<!-- src/components/SubscribersList.vue -->
<template>
  <v-card>
    <v-card-title>Subscribers</v-card-title>
    <v-list>
      <v-list-item v-for="subscriber in subscribers" :key="subscriber.uid">
        <v-list-item-content>
          <v-list-item-title>{{ subscriber.name }}</v-list-item-title>
          <v-list-item-subtitle>{{ subscriber.email }}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script>
import { db } from '../firebase'; // Adjust the path to your firebase configuration

export default {
  data() {
    return {
      subscribers: []
    };
  },
  async created() {
    this.fetchSubscribers();
  },
  methods: {
    async fetchSubscribers() {
      const userUid = this.$store.state.user.uid;
      const querySnapshot = await db.collection('users').where('subscriptions', 'array-contains', userUid).get();
      this.subscribers = querySnapshot.docs.map(doc => ({
        uid: doc.id,
        ...doc.data()
      }));
    }
  }
};
</script>

Usage 용법

Include this component wherever you want to display the list of subscribers, for example, in the user profile view.
예를 들어 사용자 프로필 보기에서 구독자 목록을 표시하려는 위치마다 이 구성 요소를 포함합니다.

src/views/Profile.vue

<!-- src/views/Profile.vue -->
<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8">
        <v-card>
          <v-card-title>Profile</v-card-title>
          <v-card-text>
            <!-- Profile details go here -->
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="4">
        <subscribers-list></subscribers-list>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import SubscribersList from '@/components/SubscribersList.vue';

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

Summary 요약

By adding this component, you can fetch and display a list of users who have subscribed to the current user. The fetchSubscribers method uses Firestore's array-contains query to find all users who have the current user's UID in their subscriptions array, then maps these results to display the subscribers' names and emails.

이 구성 요소를 추가하면 현재 사용자를 구독한 사용자 목록을 가져와 표시할 수 있습니다. 'fetchSubscribers' 메서드는 Firestore의 'array-contains' 쿼리를 사용하여 'subscriptions' 배열에 현재 사용자의 UID가 있는 모든 사용자를 찾은 다음 이러한 결과를 매핑하여 구독자의 이름과 이메일을 표시합니다.

ChatGPT가 시키는 대로 했습니다.

1. src/views/SubscribersList.vue

2. 실행

3. Source Code

src/views/SubscribersList.vue

Copy<!-- src/views/SubscribersList.vue -->
<template>
  <v-card>
    <v-card-title>Subscribers</v-card-title>
    <v-list>
      <v-list-item v-for="subscriber in subscribers" :key="subscriber.id" @click="goToUserPosts(subscriber.id)">
        <v-list-item-content>
          <v-list-item-title>{{ subscriber.name }}</v-list-item-title>
          <v-list-item-subtitle>{{ subscriber.email }}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script>
import { db } from '../firebase'; // Adjust the path to your firebase configuration

export default {
  data() {
    return {
      subscribers: []
    };
  },
  async created() {
    this.fetchSubscribers();
  },
  methods: {
    async fetchSubscribers() {
      //const userUid = this.$store.state.user.uid;
      const userId = this.$store.state.auth.user.id;
      const querySnapshot = await db.collection('users').where('subscriptions', 'array-contains', userId).get();
      this.subscribers = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
    },
    goToUserPosts(userId) {
      this.$router.push({ name: 'UserPosts', params: { id: userId } });
    },
  }
};
</script>