Как создать веб -приложение для знакомства с клоном Tinder в Node JS

Что ты будешь строить, git Repo Здесь Анкет

Избранные статьи

Uber Clone
Facebook клон
JavaScript Chat App
Приложение голосового и видеочата для Android
Добавить @mentions в приложение React Chat

Если вы хотите увидеть больше таких учебных пособий, вы можете проверить мой профиль 😊

Введение

Приложение и веб -разработка прошли долгий путь за последние несколько лет. Мы используем много сайтов знакомств каждый день, включая Tinder, Bumble, Okcupid, шарнир и так далее. Одной из наиболее широко используемых функций является Tinder. Используя Cometchat Коммуникации SDK и Node.js Бэкэнд услуги, вы узнаете, как построить один из лучших сайтов знакомств в Интернете с минимальными усилиями. Этот урок поможет вам создать веб -приложение для знакомств в node.js.

Следуйте по шагам, чтобы создать клон Tinder, который позволит пользователям:

Пользователи
- Функциональность для конечных пользователей для входа и регистрации
- Функциональность для пользователей создает свои собственные профили, такие как Tinder
- Способ для пользователей взглянуть на другие пользовательские профили и принять или отклонить (смахивать)
- Способ для пользователей соответствовать и общаться
Чат
- Используйте Cometchat JavaScript sdk и настроить это так, что-
- Только соответствующие пользователи могут текстовать чат, а также голосовые и видео, позвонить друг другу
- Войдите в систему пользователя зарегистрированного в Cometchat.
- Добавить вызов API, когда пользователь регистрируется, чтобы пользователь был создан в Comeckat ## Предварительные условия

Чтобы следовать этому уроку, вы должны иметь определенную степень понимания общего использования Node.js и Mysql база данных. Это поможет вам улучшить ваше понимание этого урока.

Структура проекта

Чтобы создать новый проект, вам просто нужно создать папку, которая называется «Tinder-Clone», а затем запустить «NPM Init». После выполнения инструкции вы будете совершенно новым проектом Node.js. Изображение ниже показывает структуру проекта нашего приложения клона Tinder. Убедитесь, что вы видите расположение папки, прежде чем продолжить.

Каждая подпапалка и файл будут подробно объяснены в следующем разделе:

public: Содержит все файлы HTML, CSS, JavaScript для пользовательского интерфейса.
Маршруты: Содержит все файлы, которые будут использоваться для обработки запросов API.
Скриншоты: Эта папка содержит изображения, которые используются для файла readme.md.
.env: Содержит переменные среды, которые будут использоваться в приложении.
.gitignore: Этот файл содержит файлы, которые будут игнорироваться при совершении кода. В этом случае мы не хотим совершать файл “config.js”, потому что он содержит секретные ключи приложения JavaScript Chat.
Package.json: содержит все зависимости приложения.
Readme.md: Описывает приложение и предоставляет шаги шагами для запуска приложения.
tinder_clone.sql: Содержит сценарии, которые вам нужно использовать для создания базы данных и ее таблиц. ## Установка зависимостей клона Tinder
Шаг 1: вам нужно иметь Node.js Установлено на вашей машине
Шаг 2: Копировать зависимости от package.json файл.
Шаг 3: Запустите «NPM I», чтобы установить зависимости для приложения.

* Примечание: Если ваш сервер MySQL несовместим с пакетом MySQL, потому что при настройке сервера MySQL вы выбираете «Использовать сильное шифрование пароля» вместо «Использовать устаревшее шифрование пароля». Вам нужно использовать пакет “MySQL2” вместо пакета MySQL.

Настройка comeChat

Отправляйтесь в Cometchat и Создайте учетную запись Анкет
Из Панель инструментов , добавьте новое приложение под названием «Чат-Widget».
Выберите это недавно добавленное приложение из списка.
Из быстрого начала копируйте APP_ID, регион и auth_key, которые будут использоваться позже.
Кроме того, скопируйте клавишу API REST с вкладки API и Auth Keys.
Перейдите на вкладку «Пользователь» и удалите всех пользователей по умолчанию и группам, оставляя ее чистыми (очень важно) Анкет
Создайте файл с именем «config.js» в папке «public/js» в вашем проекте.
Импортируйте и введите свои секретные ключи в файл “config.js”, содержащий ваш comeChat таким образом.

const config = {
    CometChatAppId: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
    CometChatRegion: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
    CometChatAuthKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx,
    CometChatAPIKey: xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
};

Обязательно включите этот файл в ваш файл GitInore, который выявляется в Интернете.

Настройка базы данных

Как упомянуто выше, мы будем использовать базу данных MySQL. По этой причине в этом разделе описывается, как создать базу данных и ее таблицу. Прежде чем продолжить, вы должны убедиться, что вы уже установили базу данных MySQL на свой компьютер. Чтобы создать базу данных и ее таблицу, вам нужно получить SQL Здесь Анкет

Приведенный выше SQL указывает, что нам нужно создавать таблицы – «Пользователь» и «Match_request». Таблица пользователя используется для хранения информации пользователя для приложения:

ID – ID пользователя. Он будет увеличен автоматически, когда будет создан новый пользователь.
user_email – электронная почта пользователя.
user_password – пароль пользователя.
user_full_name – полное имя пользователя.
user_age – возраст пользователя.
user_avatar – аватар пользователя.
user_gender – пол пользователя.
user_cometchat_uid – cometchat UID пользователя.

С другой стороны, требование определяет, что нам нужен способ для пользователей, чтобы соответствовать и общаться. Поэтому таблица «match_request» создана, чтобы помочь нам сохранить запросы на совпадение в приложении.

ID – ID запроса на матч. Он будет увеличен автоматически, когда будет создан новый пользователь.
match_request_from – cometchat UID пользователя, который отправил запрос на матч.
match_request_to – cometchat UID пользователя, который получит запрос на матч.
match_request_sender – имя отправителя.
match_request_receiver – имя приемника.
match_request_status – статус запроса матча (0 находится на рассмотрении, 1 принимается, -1 отклоняется).
create_date – дата, когда запрос на матч был отправлен.
Принято_date – дата, когда Match_Request была принята.

Кроме того, мы используем node.js с базой данных MySQL. Следовательно, нам необходимо подключиться к базе данных в нашем приложении Node.js, наилучшей практикой является создание файла .env и сохранить переменные среды. Чтобы создать файл .env, следуйте следующим шагам:

Шаг 1: Создайте файл, который является вызовом ».ENV« Внутри корневой папки вашего проекта.
Шаг 2: Замените информацию ниже информацией о подключении к базе данных.

PORT=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
DB_HOST=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
DB_USER_NAME=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
DB_USER_PASSWORD=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
DB_NAME=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
DB_PORT=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx

Создайте сервер Node.js

Внутри корневой папки вашего проекта вам необходимо создать файл, который называется «index.js». Полный исходный код файла index.js можно найти здесь . Это основной файл, который будет выполнен при выполнении следующих операторов

node index.js or npx nodemon index.js or nodemon index.js

* ПРИМЕЧАНИЕ. В этом проекте мы будем использовать библиотеку « nodemon », потому что приложение будет перезагружено автоматически, когда произойдет какое -либо изменение в вашем коде.

Приведенный выше фрагмент кода указывает, что мы включаем некоторые библиотеки, чтобы помочь им создать сервер. В этом случае нам нужно использовать Framework и библиотеку Multer для загрузки файлов, потому что мы строим сайт знакомств в Node.js. Поэтому приложение должно позволить пользователю загрузить свой аватар. Кроме того, библиотека MySQL для подключения с базой данных MySQL и так далее. Информация об подключении к базе данных, которая будет прочитана из файла .env, и этот файл должен быть включен в файл .gitignore. С другой стороны, мы требуем всех маршрутов API приложения в строке 53. Однако мы еще не определили это. Пожалуйста, не беспокойтесь об этом, мы обсудим об этом в следующем разделе.

require("./routes")({ app, dbConn, upload, constants });

Создание папки маршрутов.

Папка маршрутов будет содержать маршруты API в приложении. В этой папке нам нужно создать еще один файл «index.js». Мы будем экспортировать функцию, которая возьмет на себя ответственность за сочетание всех маршрутов API, эта функция принимает объект в качестве параметра. Объект будет содержать объект Express App, объект Connector Database, объект загрузки – созданный библиотекой Multer, и константы. Эти объекты будут использоваться в разных маршрутах API, как вы можете видеть в приведенном ниже фрагменте кода. Полный исходный код файла “index.js” можно найти Здесь Анкет

* Примечание. Мы определим три маршрута API в приложении. «Authroutes» используется для аутентифицированных целей, «пользователи» используются для управления пользователями. Последнее, но не менее важное: «MatchRequestroutes» используется для управления соответствующими запросами в приложении. Все они будут обсуждаться в следующем разделе.

Создание API с node.js

В этом разделе мы разработаем API, которые потребуются для создания нашего клона Tinder. В приведенных ниже конечных точках описывается информация об API для приложения.

/вход в систему : Проверьте учетные данные пользователя и убедитесь, что пользователь может войти в приложение или нет.

Method: POST
Example Request Body:
{
    "email": "hieptl@gmail.com",
    "password": "123456"
}

/пользователи/Создание : Создайте нового пользователя в приложении.

Method: POST
Example Request Body - Form Data Format:
email: hieptl@gmail.com
password: 123456
age: 25
gender: Male
ccUid: uid1
fullname: Hiep
avatar (file) - jpeg format.

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

Method: POST
Example Request Body:
{
    "gender": "Female",
    "ccUid": "uid1"
}

/Запросы/Создание: Создайте запросы на совпадение между 2 пользователями.

Method: POST
Example Request Body:
{
    "matchRequestFrom": "uid1",
    "matchRequestTo": "uid2",
    "matchRequestSender": "Hiep",
    "matchRequestReceiver": "Jane"
}

API входа в систему

API входа в систему получит учетные данные пользователя и подтвердит эту информацию. Если информация пользователя действительна, пользователь может войти в приложение и наоборот. Чтобы создать API входа в систему, вам необходимо создать файл «auth.js» в папке «Маршруты». Полный исходный код API входа в систему можно найти Здесь Анкет

Method: POST
Example Request Body:
{
    "email": "hieptl@gmail.com",
    "password": "123456"
}

Его метод является публикацией, а полезная нагрузка запроса должна содержать электронную почту пользователя и пароль пользователя. Если информация пользователя действительна, пол и UID пользователя Cometchat будет возвращен в качестве объекта ответа. После этого будет возвращено предупреждающее сообщение, если учетные данные пользователя не действительны. Вы можете ссылаться на фрагмент кода ниже для получения дополнительной информации.

Пользовательский API

В этом разделе будут описаны API для управления пользователями. Во -первых, нам нужно создать файл «users.js» в папке «Маршруты». Он будет содержать две конечные точки API, такие как создание новой учетной записи пользователя, рекомендовать пользователям на основе пола пользователя и UID Cometchat. Полный код Fouce можно найти Здесь Анкет

API создания пользователя

В этой части мы разработаем API для создания новой учетной записи в приложении. API будет иметь приведенную ниже информацию. Его метод – это сообщение, и мы отправим формат данных формы со стороны клиента, и запрос должен содержать электронную почту пользователя, пароль пользователя, возраст пользователя, пол пользователя, аватар пользователя, полное имя пользователя и UID пользователя.

Method: POST
Example Request Body - Form Data Format:
email: hieptl@gmail.com
password: 123456
age: 25
gender: Male
ccUid: uid1
fullname: Hiep
avatar (file) - jpeg format.

API должен проверить тип изображения аватара. В этом приложении мы позволяем пользователю загружать изображение в формате JPEG. Кроме того, вышеуказанная информация требуется. Если вы что -то пропустите в полезной нагрузке запроса, предупреждающее сообщение будет возвращено из ответа. Более того, API проверит электронную почту пользователя, использовалась в приложении или нет. Если он существовал в системе, будет возвращено предупреждающее сообщение, чтобы сообщить пользователю об этом. Вы можете обратиться к приведему фрагмента кода для получения дополнительной информации.

API запроса на матч

В этом разделе будут описаны API для управления соответствующими запросами. В приложении, если текущему пользователю нравится чей -то профиль, текущий пользователь может провести направо или нажать на значок сердца. Во -первых, нам нужно создать файл «requests.js» в папке «Маршруты». Он будет содержать конечную точку API, и речь идет о создании нового соответствующего запроса. Полный исходный код можно найти Здесь Анкет

API API запроса совпадения CREATE

В этой части мы разработаем API для создания соответствующего запроса в приложении.

Method: POST
Example Request Body:
{
    "matchRequestFrom": "uid1",
    "matchRequestTo": "uid2",
    "matchRequestSender": "Hiep",
    "matchRequestReceiver": "Jane"
}

Его метод – пост. Запросная полезная нагрузка будет содержать ниже информацию.

match_request_from – cometchat UID пользователя, который отправил запрос на матч.
match_request_to – cometchat UID пользователя, который получит запрос на матч.
match_request_sender – имя отправителя.
match_request_receiver – имя приемника.

API проверит предстоящий соответствующий запрос в системе или нет. Если соответствующий запрос был создан, будет возвращено предупреждающее сообщение и сообщит пользователю об этом. После этого, если соответствующий запрос не был создан, будет создан новый соответствующий запрос. Вы можете обратиться к фрагменту кода ниже для получения дополнительной информации.

Создание клиентской стороны

Мы закончили создание API в вышеупомянутых разделах. Пришло время создать клиентскую сторону для нашего клона Tinder. Внутри корневой папки нам нужно создать папку «общедоступной». Структура публичной папки должна быть следующей.

Каждая подпапалка и файл будут подробно объяснены в следующем разделе:

CSS: Содержит весь стиль для нашего приложения JavaScript Chat.
IMG: Содержит изображения для приложения, такие как логотип, фон и т. Д.
JS: Содержит код JavaScript и нашу бизнес -логику.
favicon.ico: Это favicon.ico для применения.
index.html: root html -файл. HTML -файл для домашней страницы.
login.html: HTML -файл для страницы входа. ## Настройка стиля для приложения

Внутри нашей структуры проекта клона Tinder вам необходимо создать файл styles.css в папке “CSS” и вставить коды Здесь Анкет Файл styles.css будет содержать все CSS приложения.

Настройка изображений для приложения

Для хранения изображений для приложения, таких как логотип и другие изображения, вам необходимо создать папку «IMG» в папке «публичная». После этого, если вы можете обратиться к этому Ссылка Чтобы получить изображения, которые будут использоваться в этом уроке. Если кто -то загрузил аватар, этот аватар будет храниться в этой папке.

Страница входа в систему

Эта страница отвечает за аутентификацию пользователей, используя API входа в систему. Он принимает учетные данные пользователя и либо подписывает его/ее, либо в зависимости от того, является ли он новичком в нашем приложении. Чтобы создать страницу входа для приложения JavaScript Chat, вам необходимо выполнить следующие шаги:

Шаг 1: Создайте Login.html в папке Source. Исходный код можно найти из Здесь Анкет

Вам нужно включить некоторые сторонние библиотеки, такие как Cometchat JS SDK , Uuid В Валидатор через CDN, потому что вы создаете приложение JavaScript Chat. Следовательно, NPM не следует использовать здесь. Вам нужно добавить эти библиотеки по некоторым причинам:

Cometchat JS SDK: Помогите нам интегрировать Cometchat в приложение JavaScript. С другой стороны, вам необходимо использовать некоторые другие функции из Cometchat, такие как регистрация нового пользователя, впустить пользователя ввести в Cometchat или позволить пользователю выходить из ComeChat.
UUID: у каждого созданного пользователя должен быть уникальный идентификатор. Следовательно, библиотека UUID используется для создания уникального ключа для каждой учетной записи.
Validator: он используется для проверки формы входа/регистрации. Потому что вам необходимо убедиться, что входная информация действительна перед созданием новой учетной записи или впустить пользователя войти в приложение Chat.

Помимо использования сторонних библиотек, вам необходимо создать некоторые файлы для обработки логики для клона Tinder, такого как auth.js, config.js, util.js, login.js. Config.js были упомянуты в вышеупомянутых разделах. Мы обсудим auth.js, util.js и login.js в следующих частях.

Файл auth.js

Согласно требованиям клона Tinder, приложение должно предоставить пользователям возможность войти в систему и иметь краткий профиль. После того, как пользователь вошел в приложение, пользователь не может вернуться на страницу входа в систему. С другой стороны, если пользователь не вписался в приложение, пользователь не может перейти на домашнюю страницу. Нам нужно определить решение для обработки этого случая. Поэтому Auth.js будет создан, чтобы помочь нам достичь этого. Полный исходный код можно найти из здесь .

После того, как пользователь будет вошел в систему, мы будем хранить информацию пользователя в локальном хранилище. Мы получим аутентифицированного пользователя из локального хранилища. Auth.js будет использоваться как на странице входа, так и на домашней странице. Это означает, что этот файл будет выполнен первым перед другими действиями. Этот файл возьмет на себя ответственность за проверку текущего пользователя, который вошел в систему или нет. Если пользователь не вошел в приложение, пользователь будет перенаправлен на страницу входа в систему. В противном случае, если текущий пользователь вошел в приложение, пользователь не может вернуться на страницу входа в систему.

Файл util.js

Некоторые функциональные возможности могут использоваться на страницах приложения Chat JavaScript, таких как показ или скрытие индикатора загрузки или получить информацию аутентифицированного пользователя. Чтобы избежать дублированного кода, вы должны хранить все общие функции в одном файле, и в этом случае этот файл называется «util.js». Полный исходный код может найти Здесь Анкет

Файл login.js

Файл возьмет на себя ответственность за обработку бизнес -логики для страницы входа в систему. Этот файл содержит функции, которые могут позволить пользователю зарегистрировать новую учетную запись или войти в приложение. Полный исходный код можно найти из здесь . После нажатия кнопки регистрации будет запускается функция “RegistryNewacCount”. Он принимает объект JSON в качестве параметра, а объект JSON содержит информацию пользователя, включая электронную почту пользователя, пароль пользователя, аватар пользователя, возраст пользователя, пол пользователя и полное имя пользователя. Прежде чем продолжить дальнейшие действия, информация пользователя должна быть подтверждена с помощью функции «valyatenewaccount». Если информация действительна, будет создана новая учетная запись, вызывая API Create User. После этого приложение регистрирует учетную запись на Cometchat, используя Cometchat JS SDK. Вы можете обратиться к приведему фрагмента кода для получения дополнительной информации.

Чтобы войти в клон Tinder, пользователь должен нажать на кнопку «Вход». Приведенный ниже код фрагмент кода описывает, как обрабатывать бизнес-логику для функции входа. Учетные данные пользователя будут взяты из входных элементов сначала, и приложение подтверждает эту информацию. Если входная информация действительна, приложение позволит пользователю войти в систему, используя API Login. Кроме того, аутентифицированный пользователь будет перенаправлен на домашнюю страницу.

Домашняя страница

После того, как пользователь вошел в приложение, пользователь будет перенаправлен на домашнюю страницу, и на этой странице вы будете использовать Cometchat JS SDK для создания приложения. Чтобы создать домашнюю страницу, вам нужно выполнить следующие шаги:

Шаг 1: Создайте файл index.html в папке проекта. Полный исходный код можно найти Здесь Анкет

Как вы можете видеть в фрагменте кода выше, вам необходимо включить Cometchat JS SDK из CDN, потому что мы хотим интегрировать функцию чата, а также голосовые/видео -звонки в клон Tinder. После этого JQUERY и JQUERY Mobile также добавляются для создания эффекта удара. Более того, библиотека «TOASTR» будет включена, чтобы показать уведомление в приложении. Вам также необходимо включить некоторые общие файлы, которые были упомянуты в вышеупомянутых разделах, таких как auth.js, config.js, util.js. Файл index.js будет обсуждаться в следующей части.

Файл index.js

Этот файл возьмет на себя ответственность за показание приветствия аутентифицированному пользователю в заголовке, показывающий список рекомендуемых пользователей, включая эффекты Swipe, показывая список друзей, создание запроса на совпадение, принятие соответствующих запросов, обрабатывая логику при нажатии на Кнопка «Выход» и интеграция функции чата и голосового/видео -вызовов. Полный исходный код можно найти Здесь Анкет

Заголовок

Нам нужно показать приветствие аутентифицированному пользователю в заголовке. Чтобы достичь этого, мы получим информацию об аутентифицированном пользователе от локального хранилища, а затем отобразим эту информацию в заголовке.

Список соответствующих пользователей

Чтобы показать список соответствующих пользователей для текущего пользователя, нам нужно позвонить в API Cometchat. Вы можете обратиться к фрагменту кода ниже для получения дополнительной информации.

Коробка чата

Когда пользователь выбирает любые элементы от соответствующих пользователей. Chatbox будет открыт с поддержкой функции «OpenChatbox». Кроме того, функция «LoadMessages» будет вызвана для получения прошлых сообщений. Функция «Прослушивание» будет запускаться, чтобы гарантировать, что текущий пользователь будет получать сообщения от других пользователей в режиме реального времени. Чтобы отправить входное сообщение или позвонить между различными пользователями, мы получим поддержку от Cometchat JS SDK. Вы можете ссылаться на приведенный ниже фрагмент кода для получения дополнительной информации.

Кроме того, чтобы увеличить пользовательский опыт приложения, нам нужно показать тост -сообщение, когда появится новое предстоящее сообщение. Поэтому пользователь будет знать о том, что есть новое сообщение от другого пользователя. Чтобы достичь этого, нам необходимо вызвать функцию «sendnotification» и получить уведомление в режиме реального времени, с самого начала будет вызова. Вы можете обратиться к нижеоперационному интерфейсу для получения дополнительной информации.

Нам также необходимо создать способ позволить пользователю сделать аудио -звонок или видеозвонок. Чтобы достичь этих функций, вам необходимо следовать руководящим принципам от Документация Cometchat . Вы можете обратиться к приведему фрагмента кода для получения дополнительной информации.

Кнопка входа

Чтобы выходить из системы, пользователь должен нажать на значок «Выход». Мы будем называть функцию входа в Cometchat JS SDK, а затем аутентифицированная информация будет очищена из локального хранилища.

Вывод

В заключение мы проделали потрясающую работу по разработке сайта знакомств, используя node.js и Cometchat JS SDK Анкет Вы познакомились с химией, стоящей за клоном Tinder и Как Cometchat JS SDK Делает чат приложения создавать. Вы видели, как интегрировать большинство функций Cometchat, таких как текстовые сообщения и обмен сообщениями в реальном времени. Я надеюсь, что вам понравился этот урок, и вы смогли успешно построить клон Tinder. Пришло время заняться и построить другие связанные приложения с навыками, которые вы получили из этого урока. Вы можете начать создавать приложение чата бесплатно по Зарегистрироваться на панель панели ComeTchat здесь.

об авторе

Hiep Le – инженер -программист. Он заинтересован в создании программных продуктов и является постоянным инженером по программному обеспечению. Большая часть его работы сосредоточена на одной вещи – чтобы помочь людям учиться.

Оригинал: “https://dev.to/cometchat/how-to-create-a-tinder-clone-dating-web-app-in-node-js-545k”