Клонировать Faasos с помощью ChatBot - без библиотек

В этой статье вы узнаете, как мне и моей команде удалось клонировать веб-сайт FAASOS всего за 1 неделю.

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

Итак, давайте посмотрим, чего все мы смогли достичь:

Левая сторона - это настоящий веб-сайт, а правая сторона e - это клон.

Целевая страница

Страница коллекций (настоящая)

Страница коллекций (клон)

Страница оформления заказа (настоящая)

Страница оформления заказа (копия)

Справка и поддержка с ботом (реальный)

Справка и поддержка с помощью бота (клон)

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

Следует отметить некоторые моменты: мы не можем достичь всего, потому что используемый нами API отличается от того, который использовался на исходном веб-сайте, поэтому мы не можем достичь тех же результатов. Но мы гордимся тем, что так много клонировали.

Теперь перейдем к основной части, коду и тому, как мы подошли к нему…

Итак, для кода вы можете проверить наш репозиторий, и, если вы хотите внести свой вклад, вы можете выполнить форк и сделать запрос на перенос: https://github.com/chiranjeev-thapliyal/faasos

Внешний интерфейс входит…

Теперь перейдем к части того, как мы подошли, и это одна из важнейших частей. Потому что это первый шаг, и первый шаг всегда самый трудный.

Для нас мы сначала начали с UI / UX и Front-end части. Для обеспечения согласованности мы сначала собрали следующие ресурсы:

  • Шрифт - Мулиш.
  • Правильная высота линий и основные принципы UI / UX (если интересно, можете узнать о Золотом сечении, поверьте, это интересная тема)

Просто оговорка - золотое сечение также можно найти в Числах Фибоначчи ✌

  • Цветовые коды

Подходит серверная часть…

Я всегда недооценивал возможности серверной части, но когда мы создали бота самостоятельно, мы поняли, сколько возможностей может предоставить Backend с базами данных.

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

  • Получить последние заказы
  • Изменить зарегистрированный номер
  • Показать купоны на скидку

Все вышеперечисленные команды реализованы нами без какой-либо библиотеки.

А для обычных команд мы использовали DialogFlow.

Да, вы можете подумать, что мы использовали внешнюю библиотеку, но подождите, мы просто использовали ее для общих команд, например, привет привет нет спасибо (и так далее)

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

Итак, я перечислю все моменты (в порядке их следования) о том, как мы подошли к бэкэнд-части:

  • Следуйте структуре MVC (модели, представления, контроллеры)
  • Создать базу данных NoSQL (используется MongoDB Atlas)
  • Сделайте API для своего проекта (для тестирования использовал Почтальон)
  • Использовать токен для аутентификации (используются библиотеки JWT)

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

Этот пост был бы неполным, если бы я не упомянул своих наставников, которые помогали мне на протяжении всего проекта. Особая благодарность Дхавал Чхеда, Суонанд Кадам, Сараванакуман Дж. Н..

Я не могу осветить все в этом посте, но если вы хотите узнать больше об этом репо, вы можете связаться с нами:

Чиранджив Таплиял, Шахнаваз Малек, Шантану Патхак, Мукул Кумар