ПРИЛОЖЕНИЕ IPL для голосования с Vue JS

Хорошо! Здорово, что вы, ребята, вернулись сюда. Угу-угу.

Если интересно где первая часть — вот ссылка:

Приложение для голосования IPL с VUE JS
Мы все знаем, что сезон IPL уже наступил, и приятно наблюдать, как наши любимые игроки со всего мира объединяются в пары… среда.com

Теперь в предыдущем посте мы настроили наш проект Vue и создали наш проект firebase и добавили данные в нашу базу данных — firestore. Мы добавили данные как по отдельным командам, так и по матчам за каждый день. Круто, правда?

В этом посте мы увидим, как добавить систему голосования. Теперь система голосования будет одинакова для матча и команды, так что давайте посмотрим, как добавить ее для матча, а вы сами разберетесь, как сделать то же самое для команды. Мы договорились?

Во-первых, давайте посмотрим на наш объект соответствия, который мы отправили в firestore.

{
"Date": "23-3-2019",
"Time": "8 PM",
"Day": "Sat",
"Team": "Chennai Super Kings",
"Team2": "Royal Challengers Bangalore",
"Venue": "Chennai"
},

Так устроен объект матча, но, если вы заметили, на данный момент у нас нет свойств для хранения голосов за команды в матче. Firestore удивительно удобен для того, чтобы сделать это для нас. С помощью firestore мы можем добавлять данные, и если их нет, firestore создаст их для нас.

Начнем с кодирования.

Получение сегодняшних матчей

В некоторых случаях у нас есть два матча в день, а в других случаях у нас есть один матч в день. Теперь нам нужен способ получить все совпадения, которые у нас есть в этот конкретный день, мы можем сделать это с помощью метода Firestore where. Этот метод встроен в firestore и может использоваться для фильтрации наших данных, внутри этого метода мы можем написать наши простые запросы, которые firestore будет запускать и получать нам результаты.

Мы собираемся фильтровать данные по свойству Date внутри каждого объекта, мы получим дату на стороне клиента, отформатируем ее в соответствии с форматом в базе данных и используем для получения совпадений в этот конкретный день.

Мы можем получить тот же формат с помощью —

var dateObject = new Date();
var today = dateObject.getDate() + "-" + Number(dateObject.getMonth() + 1)+ "-" + dateObject.getFullYear();

Вот и все! у нас есть формат день-месяц-год, который соответствует дате в базе данных.

Затем в созданном хуке жизненного цикла удалим весь код из предыдущего поста, так как он используется для отправки данных на сервер. Теперь пришло время вернуть его в наше приложение.

Давайте начнем с получения данных, как мы обычно делаем с firestore.

firebase.firestore().collection("Matches").get().then((doc)=>{})

Теперь эта строка выше извлекает все документы внутри коллекции «Совпадения», это нормально для нашего случая, поскольку у нас около 50 документов, и мы можем фильтровать их с помощью javascript в клиенте, но этот подход легко выйдет из строя, как только данные становятся огромными или трафик вашего сайта быстро растет, где каждый экземпляр будет извлекать все пятьдесят документов и пытаться их фильтровать.

Вот где сияет метод «где».

Метод «где» принимает три аргумента:

Поле — поле, по которому вы пытаетесь отфильтровать данные.
выражение — меньше, больше, равно и т. д.
Comparable — переменная для сравнения с Field.

Ты можешь сказать...

firebase.firestore().collection("Matches").where("Date", "==", today).onSnapshot((doc)=>{
})

Выше, поскольку мы объявили переменную «сегодня» и присвоили ей нужный формат, мы можем напрямую передать ее в firestore для получения необходимых данных на основе этого запроса.

Теперь мы получаем массив в качестве ответа и можем фильтровать данные следующим образом:

firebase.firestore().collection("Matches").where("Date", "==", today).onSnapshot((doc)=>{
doc.forEach((document)=>{
    console.log(document.data())
}
})

И это все! У вас есть все необходимые данные.

ЗАТЫКАТЬ

Ознакомьтесь с курсом My Vue JS Fundamentals для начинающих на Cynohub.

https://cynohub.com/courses/vue-js-fundamentals-course/

Вы можете создать новое свойство данных с именем todaysMatches —

data(){
    return{
        todaysMatches: []
    }
}

Вы можете хранить документы, которые вы извлекли из firestore, и хранить их внутри этого массива.

Затем вы можете использовать V-For и другие директивы для создания простого пользовательского интерфейса. Вот так выглядит мой…

Я знаю, я знаю, это плохо. Вы можете сделать намного лучше. Опубликуйте то, что вы сделали, в комментариях ниже.

Я также добавил небольшую кнопку для каждой команды, чтобы пользователи, которые посещают наш сайт, могли голосовать за свою любимую команду.

С помощью прослушивателей событий я привязал каждую кнопку к методу, который запускается при нажатии кнопки.

Обновление голосов

Как мы уже обсуждали, на данный момент в firestore есть способ хранения голосов для каждой команды. Поэтому, прежде чем мы попытаемся обновить значение, нам нужно проверить, присутствует ли это значение. Обычно, если этого значения нет, мы получаем undefined.

Теперь у нас есть три шага увеличения счета —

Чтение существующего счета.
Увеличение значения
Обновление его увеличенного значения в базе данных

Поскольку мы уже сделали первый шаг.

Давайте сделаем небольшую проверку, чтобы убедиться, что полученное значение не определено.

firebase.firestore().collection("Matches").doc(id).get().then((doc)=>{
var updateObject = {...doc.data()};
if(updateObject.TeamVotes == undefined){
updateObject.TeamVotes = 1;
console.log(updateObject)
}

Этот код гарантирует, что если полученное значение не определено, мы установим его равным 1. Наш первый голос.

Но если значение, которое мы получаем, не является неопределенным.

firebase.firestore().collection("Matches").doc(id).get().then((doc)=>{
var updateObject = {...doc.data()};
if(updateObject.TeamVotes == undefined){
updateObject.TeamVotes = 1;
console.log(updateObject)
}else{
updateObject.TeamVotes = Number(updateObject.TeamVotes + 1);
console.log(updateObject)
}
firebase.firestore().collection("Matches").doc(id).update(updateObject).then(()=>{
console.log("Update Succesful")
})
})

Вот как это выглядит: мы увеличиваем значение и отправляем объект обратно в браузер. Здесь мы используем метод обновления, чтобы не переписывать все заново, а просто обновить измененные значения. Этот способ немного эффективнее.

Ну это все. Вы можете повторить то же самое для команды B и ту же процедуру голосования для отдельных команд.