Что вы будете строить. Демо, Git Repo Здесь.
Вступление
Как разработчик программного обеспечения в эту эпоху, вы можете быть уверены, что столкнетесь с ситуациями, когда вам нужно будет добавить функцию коммуникации в приложение. Это руководство поможет вам разработать веб-решение для общения в чате и звонков с помощью CometChat. Я буду вести вас шаг за шагом, не пропуская ни одного шага, так что будьте готовы к плавной поездке.
Предпосылки
Чтобы следовать этому руководству, вы должны понимать фундаментальные принципы Vue.js. Это ускорит ваше понимание этого руководства.
Установка зависимостей приложения
Во-первых, вам нужно установить NodeJ на вашем компьютере, вы можете зайти на их сайт, чтобы сделать это.
Во-вторых, вам также необходимо установить на свой компьютер Vue-CLI, используя команду ниже.
npm install -g @vue/cli
Затем создайте новый проект с названием tinder-clone и выберите preset по умолчанию.
vue create tinder-clone
Наконец, установите эти важные зависимости для нашего проекта, используя команду ниже.
npm install vue-router vue-swing vue-material-design-icons firebase
Теперь, когда мы закончили с установками, перейдем к созданию решения для клонирования Tinder.
Установка CometChat SDK
- Зайдите в CometChat Pro и создайте учетную запись.
- На панели управления создайте новое приложение под названием Приложения чата.
- Один создан, нажмите "Исследовать".
- Перейдите на вкладку «Ключи API» и нажмите «Создать ключ API».
- Создайте ключ API под названием «Tinder Clone» с полным доступом.
- Щелкните только что созданный API, перейдите на вкладку "Пользователи" и удалите всех пользователей по умолчанию, оставив поле пустым (очень важно).
- Установите VueJs CLI на свой компьютер, введя эту команду на своем терминале. npm install -g @ vue / cli
- Создайте файл .env в корневом каталоге проекта.
- Таким образом введите свои секретные ключи из CometChat и Firebase.
- Скопируйте файл «.env» и переименуйте его в «.env».
- Исключите «.env» и «.env.production» в файле «.gitignore», чтобы они не отображались на Github .
- Выполните следующую команду, чтобы установить CometChat SDK.
Переменные среды
В приведенной ниже настройке указан формат для настройки файлов .env для этого проекта.
VUE_APP_ID="xxx-xxx-xxx"
VUE_APP_KEY="xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx"
VUE_APP_REGION="xx"
VUE_APP_BASE_APIKEY="xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx"
VUE_APP_BASE_AUTHDOMAIN="xxx-xxx-xxx-xxx-xxx-xxx"
VUE_APP_BASE_PROJECTID="xxx-xxx-xxx"
VUE_APP_BASE_STORAGEBUCKET="xxx-xxx-xxx-xxx-xx"
VUE_APP_BASE_MESSAGINGSENDERID="xxx-xxx-xxx"
VUE_APP_BASE_APPID="xxx-xxx-xxx-xxx-xxx-xxx"
VUE_APP_BASE_MEASUREMENTID="xxx-xxx-xxx"
Настройка проекта Firebase
Перейдите в Firebase, создайте новый проект и активируйте службу аутентификации по электронной почте и паролю. Вот как вы это делаете.
Чтобы начать использовать Firebase, вам понадобится учетная запись Gmail. Перейдите в Firebase и создайте новый проект.
Firebase поддерживает аутентификацию с использованием разных провайдеров. Например, Social Auth, номера телефонов, а также стандартный метод электронной почты и пароля. Поскольку в этом руководстве мы будем использовать метод аутентификации по электронной почте и паролю, нам необходимо включить этот метод для проекта, который мы создали в Firebase, поскольку он по умолчанию отключен.
На вкладке аутентификации для вашего проекта щелкните метод входа, и вы должны увидеть список поставщиков, которые в настоящее время поддерживает Firebase.
Затем щелкните значок редактирования у поставщика электронной почты / пароля и включите его.
Затем вам нужно зайти и зарегистрировать свое приложение в своем проекте Firebase. На странице обзора проекта выберите опцию добавления приложения и выберите Интернет в качестве платформы.
После того, как вы закончите регистрацию приложения, вам будет представлен экран с учетными данными вашего приложения. Обратите внимание на второй тег скрипта, поскольку мы вскоре будем использовать его в нашем приложении Vue.
Поздравляем, теперь, когда вы закончили установку, приступим к настройке.
Установка набора пользовательского интерфейса CometChat VueJs
- Скопируйте папку в исходную папку.
- Скопируйте все зависимости из package.json или cometchat-pro-vue-ui-kit в package.json своего проекта и установите их.
Настройка CometChat SDK
Внутри структуры вашего проекта откройте main.js и вставьте эти коды.
Приведенные выше коды инициализируют CometChat в вашем приложении и настраивают его. Защита маршрута отфильтровывает неаутентифицированных пользователей. Файл записи main.js использует ваши учетные данные CometChat API. Этот файл также содержит конфигурации Firebase, хранящиеся в файле .env. Этот файл .env не будет общедоступным в вашем репозитории git, как указано в файле .gitignore.
Настройка маршрутизатора
В файле router.js есть все маршруты, доступные в нашем приложении, а также их уровень допуска.
Настройка Firebase SDK
Файл firebase.js содержит все коды для взаимодействия со службой auth firebase. Это также сделает наш код свободным от избыточности.
Структура проекта
На изображении ниже показана структура проекта. Прежде чем продолжить, убедитесь, что вы видите расположение папок.
Теперь давайте воспроизведем остальные компоненты проекта, как показано на изображении выше.
Компонент приложения
Следующий код обтекает наше приложение в vue-router, обеспечивая плавную навигацию. Для каждого маршрута этот компонент генерирует новый идентификатор, чтобы улучшить ожидаемое поведение нашего приложения.
Компонент боковой панели
Компонент боковой панели демонстрирует подходящих пользователей. Помимо элегантного дизайна, он дает пользователям возможность общаться с другими подобранными пользователями. Помимо вышеупомянутого, он выполняет другие функции, а также предоставляет возможности поиска и выхода из системы.
Подкомпонент "Сообщения"
Компонент боковой панели содержит дочерний компонент под названием «Сообщения». Этот дочерний компонент перечисляет совпавших пользователей, связанных с текущим вошедшим в систему пользователем. Вот код для этого.
Компоненты аутентификации
Компоненты аутентификации включают компоненты регистрации, входа в систему и восстановления пароля. Давайте создадим каждый из этих файлов в папке «views», следуя инструкциям ниже.
Создайте новую папку с именем «views» и создайте в ней следующие компоненты. Конечно, все они должны заканчиваться расширением «.vue». Компоненты "Вход", "Регистрация" и "Забыть" также должны содержать следующие коды.
Компонент Регистра
Нам нужна ситуация, когда пользователь может щелкнуть «кнопку регистрации» и отправить свою запись в Firebase. После регистрации firebase CometChat SDK также зарегистрирует нового пользователя. Эта регистрация будет осуществляться под ключом API, который вы создали ранее.
Например, пользователь по имени Люси хочет зарегистрироваться на нашей платформе. Поэтому она вводит свои учетные данные в предоставленную регистрационную форму и нажимает кнопку регистрации. Теперь firebase видит ее данные и регистрирует ее, если ее адрес электронной почты уникален. После регистрации в Firebase CometChat берет на себя управление и также регистрирует ее. CometChat использует ваш ключ API и помещает ее под вашу учетную запись, а ее идентификатор устанавливается на ее идентификатор firebase.
Приведенный ниже сценарий подробно описывает процесс аутентификации. Вот полный код компонента регистрации.
Компонент входа в систему
Как только пользователь нажимает кнопку входа в систему с его данными, введенными в форму входа, firebase начинает проверку. Если проверка firebase прошла успешно, CometChat подписывает пользователя с его идентификатором firebase. Это происходит по тому же принципу, что и процесс регистрации.
Ниже приведен полный код компонента входа в систему.
Компонент "Забыть"
Компонент "забыть пароль" важен для восстановления паролей. SDK Firebase обеспечивает эту функциональность. Кроме того, чтобы наше приложение было полноценным, мы должны его включить.
Код в этом компоненте позволяет восстанавливать утерянные пароли, используя действующий адрес электронной почты.
Компонент профиля
Компонент профиля отвечает за сбор и обновление остальной информации о пользователе. Как только пользователь зарегистрируется в нашем приложении, он будет перенаправлен на страницу профиля, чтобы заполнить свои данные. Эти детали важны для правильного функционирования нашего приложения. Пользователь не сможет продолжить работу в системе, пока он не заполнит свой профиль. Информация, которую требует компонент профиля, следующая.
- Полное имя пользователя
- Аватар пользователя
- Возраст пользователя
- Описание пользователя
Ниже приведены коды, отвечающие за эту операцию.
Теперь, когда мы закончили с компонентами аутентификации, давайте перейдем к трем последним наиболее важным компонентам.
Компонент Home
Компонент Home содержит два дочерних компонента: компоненты MainHeader и TinderCards. Помимо красивого дизайна, он также взаимодействует с CometChat SDK. Вот как это работает.
При создании компонент Home получает список пользователей в нашей учетной записи CometChat. После получения он передает их дочернему компоненту TinderCards. Приведенный ниже код лучше иллюстрирует мою точку зрения.
Вот полный код компонента Home.
Дочерние компоненты
В то время как дочерний компонент MainHeader отображает кнопки навигации. Дочерний компонент TinderCards демонстрирует карточки вместе с хорошо оформленными кнопками. Вот их соответствующие коды.
скопируйте и этот код: https://gist.github.com/Daltonic/83c87ac13d4d6e2971fb789deed6b7db
Теперь, когда мы закончили с компонентом Home и его дочерними элементами, давайте поговорим о компоненте Chats.
Компонент чата
Компонент «Чат» представляет собой теплый и красивый интерфейс чата, который дает «Tinder.com» возможность потратить свои деньги (улыбается). Это дает пользователю возможность участвовать в текстовых разговорах. Давайте посмотрим на код, отвечающий за эту функцию.
Позвольте мне пояснить, есть три метода, на которые вам следует обратить пристальное внимание. К ним относятся getUser (), getMessages (), sendMessage () и listenForMessage ().
Метод getUser (), столь же интуитивно понятный, как звучит его название, извлекает пользователя из вашей учетной записи CometChat. После извлечения он сохраняет детали в свойстве пользователя для других целей.
getUser() {
const uid = this.uid;
CometChat.getUser(uid)
.then((user) => (this.user = user))
.catch((error) => console.log(error));
}
Метод getMessages () собирает все разговоры между вами и другим пользователем. После этого он сохраняет его в массиве сообщений для дальнейшего использования.
getMessages() {
const limit = 50;
const messagesRequest = new CometChat.MessagesRequestBuilder()
.setLimit(limit)
.setUID(this.uid)
.build();
messagesRequest
.fetchPrevious()
.then((messages) => {
messages.map((message, i) => {
if (!message.readAt) {
const messageId = message.id;
const receiverId = message.sender.uid;
const receiverType = "user";
console.log({ i: i + 1, l: messages.length, r: receiverId, u: this.uid });
if (i + 1 === messages.length && receiverId === this.uid)
CometChat.markAsRead(messageId, receiverId, receiverType);
}
});
this.messages = messages;
})
.catch((error) => console.log("Message fetching failed with error:", error));
}
Метод listenForMessage () вызывает слушателя между двумя пользователями, участвующими в чате. Он обновляет представление новыми сообщениями, отправленными любым пользователем.
listenForMessage() {
const listenerID = this.uid;
CometChat.addMessageListener(
listenerID,
new CometChat.MessageListener({
onTextMessageReceived: (messageReceipt) => {
if (this.uid === messageReceipt.sender.uid) {
this.messages.push(messageReceipt);
const messageId = messageReceipt.id;
const receiverId = messageReceipt.sender.uid;
const receiverType = "user";
CometChat.markAsRead(messageId, receiverId, receiverType);
}
},
onMessagesDelivered: (messageReceipt) => {
this.messages.filter((msg) => (msg.deliveredAt = messageReceipt.deliveredAt));
},
onMessagesRead: (messageReceipt) => {
this.messages.filter((msg) => (msg.readAt = messageReceipt.readAt));
},
})
);
}
Наконец, метод sendMessage () отправляет текст от того, кто набирает сообщение, тому, кто его получает.
sendMessage() {
const receiverID = this.uid;
const messageText = this.message;
const receiverType = CometChat.RECEIVER_TYPE.USER;
const textMessage = new CometChat.TextMessage(
receiverID,
messageText,
receiverType
);
CometChat.sendMessage(textMessage)
.then((message) => {
this.message = "";
this.messages.push(message);
})
.catch((error) => console.log("Message sending failed with error:", error));
}
Бьюсь об заклад, теперь вы лучше понимаете, как работает этот процесс, давайте перейдем к компоненту «Друзья».
Компонент Друзья
Компонент «Друзья» - еще один важный компонент, поскольку он несет в себе всю мощь CometChat. Он содержит все функции CometChat. Да, вы поняли меня правильно. Эти функции включают CometChat Vue UI Kit, чат, аудио, видеозвонки и многое другое. Давайте посмотрим на его простой код ниже.
Настройка Vue UI Kit
Получите доступ к следующим файлам в компоненте Vue UI Kit и измените их на следующие коды.
‘… / src / cometchat-pro-vue-ui-kit / src / components / Users / CometChatUserListWithMessages / style.js‘
‘… / src / cometchat-pro-vue-ui-kit / src / components / Users / CometChatUserList / style.js‘
‘… / src / cometchat-pro-vue-ui-kit / src / components / Users / CometChatUserList / CometChatUserList .vue‘
‘… / src / cometchat-pro-vue-ui-kit / src / components / Messages / CometChatSenderTextMessageBubble / style.js‘
‘… / src / cometchat-pro-vue-ui-kit / src / components / Messages / CometChatMessageList / style.js‘
… / src / cometchat-pro-vue-ui-kit / src / components / Messages / CometChatMessageHeader / CometChatMessageHeader.vue
Заключение
В заключение мы рассмотрели пошаговый процесс создания сайта знакомств с использованием Tinder в качестве примера. Мы узнали, как интегрировать CometChat SDK для решения проблем связи в Интернете. Мы изучили различные функции CometChat SDK для отправки и получения текстовых, аудио- и видеозвонков. Теперь, когда вы убедились, насколько просто использовать CometChat SDK и UI Kit, пора вам разобраться и создать что-то еще с ее помощью.
Больше контента на plainenglish.io
