Бесплатный движок магазина на React + NodeJs + MongoDB!

[vamshop]

https://github.com/cezerin2

 

Посмотрите демку:

https://cezerin.ru — магазин.

https://cezerin.ru/admin — админка.

 

Написан на javascript: и backend, и frontend, всё на javascript.

 

Frontend (каталог, админка) написан на React.

Backend (api) написан на NodeJs.

 

Для хранения данных используется MongoDB.

 

Админка использует React MaterialUI Framework — https://material-ui.com

Каталог использует CSS Framework Bulma — https://bulma.io

 

Так называемое API центричное приложение, или ещё называют микросервисное, т.е. всё крутится вокруг API.

 

Благодаря React весь сайт динамический и очень быстрый.

Всякие эффекты, анимации, изменения содержимого страниц — всё происходит прямо внутри страницы, без перезагрузок страницы.

 

Кроме того, благодаря серверной части на NodeJS — нет проблем с индексацией содержимого страниц поисковиками, в отличии от обычных ReactJs приложений.

 

Есть и фильтры — https://cezerin.ru/category-a

Есть и атрибуты товара — https://cezerin.ru/category-b/test-product

Есть и спецификации товара (свойства) — https://cezerin.ru/category-b/test-svoistva

 

Причём всё работает без всяких лишних кнопок подтверждения, без перезагрузок страниц и всего прочего, всё моментально.

[whiteblue]

26 минут назад, vamshop сказал:

https://github.com/cezerin2

 

Посмотрите демку:

https://cezerin.ru — магазин.

https://cezerin.ru/admin — админка.

 

Написан на javascript: и backend, и frontend, всё на javascript.

 

Frontend (каталог, админка) написан на React.

Backend (api) написан на NodeJs.

 

Для хранения данных используется MongoDB.

 

Админка использует React MaterialUI Framework — https://material-ui.com

Каталог использует CSS Framework Bulma — https://bulma.io

 

Так называемое API центричное приложение, или ещё называют микросервисное, т.е. всё крутится вокруг API.

 

Благодаря React весь сайт динамический и очень быстрый.

Всякие эффекты, анимации, изменения содержимого страниц — всё происходит прямо внутри страницы, без перезагрузок страницы.

 

Кроме того, благодаря серверной части на NodeJS — нет проблем с индексацией содержимого страниц поисковиками, в отличии от обычных ReactJs приложений.

 

Есть и фильтры — https://cezerin.ru/category-a

Есть и атрибуты товара — https://cezerin.ru/category-b/test-product

Есть и спецификации товара (свойства) — https://cezerin.ru/category-b/test-svoistva

 

Причём всё работает без всяких лишних кнопок подтверждения, без перезагрузок страниц и всего прочего, всё моментально.

круто...   MVC ?

комьюнити есть?

 

[vamshop]

-

Змінено 14 березня 2019 користувачем vamshop

[vamshop]

41 minutes ago, whiteblue said:

круто...   MVC ?

комьюнити есть?

 

 

Нельзя сказать, что это полноценный MVC, если сравнивать с PHP.

Здесь чёткое раделение backend'а и frontend'а.

В OpenCart такого нет, там всё в куче получается и, по сути, всё является, одновременно, и backend'ом и frontend'ом.

Это если сранивать с cezerin, микросервисными приложениями, api центричными, кому как удобнее.

 

Код пишется на TypeScript и затем через babel компилируется в обычный JS для поддержки всех браузеров, в том числе и относительно старых.

 

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

С совершенно иными подходами, если сравнивать с php+mysql.

Всё-таки сейчас самый популярный язык это именно javascript и сейчас всё, что связно с вебом делается прежде всего на javascript.

 

Тот же яндекс переводит все свои сервисы на react. Новый директ интерфейс - это react + api, т.е. точно такой же подход как в cezerin.

beru.ru - это те же самые технологии, что и в cezerin, т.е. react + api, всё крутится вокруг api.

Яндекс маркет на данный момент - это тот же принцип, что и cezerin, т.е. api центричное приложение.

 

В общем, сейчас это уже не просто мода на react, vuejs, сейчас данные подходы уже применяются массово.

 

А если учесть что есть так называемые serverless технологии, amazon lambda, docker контейнеры, всё это намного интереснее обычного php + jquery + mysql + shared хостинг.

 

https://cezerin.org

 

В основном все сидят в slack канале https://join.slack.com/t/cezerin2/shared_invite/enQtNTE5NzYxMzA5ODc5LTVkZjM4ODUwMmNlMmMyZTkxYjg5N2QxZmQ5NjA1NTg3OWM2ZjU1NzVmNWM0N2E3ZmJjM2Q3MjQ5OGFmNTBmYjg

 

Если хотите, подключайтесь, создал там группу на русском.

Канал russian

Змінено 14 березня 2019 користувачем vamshop

[vamshop]

41 minutes ago, nikifalex said:

есть хотя бы один работающий (продающий) интернет-магазин?

 

Вот например: https://izzi.com.ua

или вот: http://elpatron.21ninjas.es/

или вот: https://store.getyourdogwalking.com.au/

 

Вот пример страницы с кучей товаров - https://izzi.com.ua/chehly

Видно как работают фильтры быстро.

 

Да, есть проблема с юзабилити, страница не поднимается и не сильно удобно получается, но это не принципиально.

Смотрите как быстро фильтрует.

И без перезагрузок страниц, если смотреть chrome dev console, то видно, что нет лишних запросов, идёт просто запрос данных к API, вовщращает API только "сырые" данные в виде json.

Всё рисуется уже на стороне клиента, не на сервере.

Змінено 14 березня 2019 користувачем vamshop

[vamshop]

22 minutes ago, toporchillo said:

Я пока вижу единственное применение этому: мобильная версия магазина. Single-page application (React и т.п.) круто на мобиле, кода интернет нестабильный.

Но надо делать синхронизацию данных с тем же OpenCart: MongoDB <-> MySQL.

 

Да, это тоже, т.к. единая кодовая база для любых устройств.

MongoDB гораздо интереснее MySQL, т.е. MongoDB - это так называемая неблокирующая база данных, и так называемая schemaless база данных, т.е. не надо заранее добавлять таблицы, колонки в таблицу.

Всё намного проще и удобнее благодаря единообразию всех данных и кода как на frontend'e, так и на backend'е.

Везде JS + Json, в том числе и база данных вся в виде Json текста и объектов.

 

Но главное - это скорость.

Не надо грузить ничего лишнего, лишних запросов в браузере и т.д.

react можно навернео сравнить с opencart + jquery.

Только приложение на react целиком и полностью динамическое (ajax'ксовое если можно так сказать), а opencart + jquery - частично.

 

Змінено 14 березня 2019 користувачем vamshop

[vamshop]

25 minutes ago, toporchillo said:

Но надо делать синхронизацию данных с тем же OpenCart: MongoDB <-> MySQL.

 

Вообще-то это именно готовое решение.

Ему не нужны связки с opencart.

 

и использование opencart + react для frontend'а это всё равно не то, это как скрещивание ужа с ежом.

 

Если делать всё на современном JS, то нужно делать с нуля и не тянуть кучу проблем от php + mysql + jquery.

 

В cezerin именно так и сделано.

 

Здесь интерес именно в комплексном и едином подходе.

Здесь принципиально сделан выбор в пользу JavaScript для всего, и для frontend и для backend, что б был один язык. Без мешанины.

[vamshop]

7 minutes ago, toporchillo said:

@vamshop , я пишу на MongoDB + node.js и согласен, что это все красиво, удобно и т.д.

Но конечному пользователю все равно на чем написан софт: хоть на Клингонском. Лишь бы удовлитворяло его запросам.

 

Скорость глобально в противоречии с функциональностью, к сожалению. И пока не будет всех фишек OpenCart, применение ограниченное: мобильная версия например.

 

Я согласен.

Это просто другой подход к разработке.

 

Да, очень многого нет на данный момент.

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

 

Но я всё равно считаю, что именно за подобными приложениями будущее, а не за opencart.

 

Поживём, увидим.

Змінено 14 березня 2019 користувачем vamshop

[vamshop]

40 minutes ago, toporchillo said:

Я пока вижу единственное применение этому: мобильная версия магазина. Single-page application (React и т.п.) круто на мобиле, кода интернет нестабильный.

 

 

А на десктопе разве не нужны быстрые сайты, быстрые приложения!?

По-моему, гугл уже давно сделал это главной темой в своих блогах, сервисах и т.д. и т.п.

и везде пишет, что скорость и удобство - это наше всё.

 

[Bn174uk]

23 минуты назад, vamshop сказал:

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

 

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

Да даже сейчас, обычным хостингом за 100р не обойтись. 

 

Цитата

Но я всё равно считаю, что именно за подобными приложениями будущее, а не за opencart.

 

Поэтому не думаю, что все же люди откажутся от OC.

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

[zlatoff]

Мне как предпринимателю важнее как мои магазины интегрируются с Сбером, СДЭКом, Почтой РФ и CRM. Поэтому широким образом не интегрированый в различные сервисы софт слабо интересен, даже до тошноты напичканный модными фичами. 

[RGB]

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

 

[markimax]

Приблизительное время задержки при вводе

4 часа назад, vamshop сказал:

 

Вот например: https://izzi.com.ua

 

800 - 1 060 мс
На простейшей странице
https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Fizzi.com.ua%2Fabout

Не удивительно если все на JS

Это так лирика

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

 

 

[pimur]

есть хотя бы один работающий (продающий) интернет-магазин?

А лучше в топе по запросам карточек товаров и категорий.


Отправлено через Tapatalk

[SooR]

Крутая тема, буду следить, будущее с JS уже рядом

 

[OCdevWizard]

React хорош, но Vue будет получше.

[OCdevWizard]

Соглашусь с @markimax , без широкой поддержки комюнити - дела не будет, так как клиенты разные и все будет сводится к тому что нужно будет настраивать подключение к эквайрингам, продвинутым фильтрам и тд. Если вы этим занимаетесь один - далеко так не зайдешь.

тот же react, vue это очень хорошее решение для SPA под конкретную задачу, но для хорошего магазина нужно проделать колоссальную работу. Не могу сказать что я прям в теме но практиковал делать аналог простого магазина на vue+vueroute+nuxt+graphQL

[vamshop]

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

 

Подключение к эквайрингам уже есть на примере paypal, stripe, liqpay.

 

Уже есть Google Analytics с Enhanced Ecommerce отчётами, т.е. с передачей данных по заказам, по корзине, по просмотрам товаров.

 

Есть xml карта, есть мета тэги, проверки для яндекс вебмастера, google webmaster через админку.

 

Проверена индексация, никаких проблем нет ни с гуглом, ни с яндексом, т.к. на стороне frontend'a, т.е., собственно, магазина, испльзуется SSR (Server Side Rendering).

 

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

 

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

 

Много чего интересного уже есть на самом деле.

 

Но ещё больше конечно предстоит сделать.

 

 

И даже на текущем этапе это рабочее, готовое решение для небольших магазинов.

 

К примеру, оформление заказа можно упрощать до максимума, можно оставить, допустим, только одно поле Телефон и всё. В Админке - Настройки - Оформление заказа всё это настраивается, т.е. отключаются поля, либо делаютя необязательными.

 

Есть, к примеру, и брошенные корзины, т.е. заказ записывается в базу при начальном этапе оформления, т.е. указал клиент контактные данные, всё, этот заказ уже есть в mongodb, его уже можно посмотреть в Админке - Заказы, в Черновиках, а значит можно уже связаться с клиентом.

 

Если он, к примеру, не разобрался как оформить заказ до конца, не смог оплатить или что-либо ещё.

 

Информация по клиенту не потеряется, всё доступно в черновиках в админке.

 

Змінено 14 березня 2019 користувачем vamshop

[vamshop]

Есть webhook'и для интеграции со сторонними сервисами.

и события при которых отправляются уведомления на указанные url.

 

В Админке - Настройки - Webhooks

 

https://cezerin.ru/admin/settings/webhooks

 

К примеру, оформился заказ в магазине, ушло уведомление внешней системе, CRM допустим, и создалась заявка уже на внешнем софте.

Змінено 14 березня 2019 користувачем vamshop

[OCdevWizard]

Я изучал эту тему, она перспективная и интересная. Мне показывали проект который оперирует 2млн товарами и с поиском по ним на лету, при этом все на vue.

Без ssr не будет индексации страницы, но в любой случае для этого нужен сервак на node.

 

[OCappLab]

Перспективная идея в бушующем. Пока нет большого развития из-за дороговизны разработки.

Появятся дополнение под эту тему за 300-500р. Тогда начнут переходить по тихоньку

[vamshop]

7 hours ago, OCdevWizard said:

Я изучал эту тему, она перспективная и интересная. Мне показывали проект который оперирует 2млн товарами и с поиском по ним на лету, при этом все на vue.

Без ssr не будет индексации страницы, но в любой случае для этого нужен сервак на node.

 

 

Да, используется nodejs+express в качестве сервера.

 

SSR есть для frontend'a, т.е. там где он нужен поисковикам, для каталога, с индексацией всё нормально.

 

Админка чисто clientside react app, т.е. без серверного кода.

 

[whiteblue]

16 часов назад, vamshop сказал:

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

 

Подключение к эквайрингам уже есть на примере paypal, stripe, liqpay.

 

Уже есть Google Analytics с Enhanced Ecommerce отчётами, т.е. с передачей данных по заказам, по корзине, по просмотрам товаров.

 

Есть xml карта, есть мета тэги, проверки для яндекс вебмастера, google webmaster через админку.

 

Проверена индексация, никаких проблем нет ни с гуглом, ни с яндексом, т.к. на стороне frontend'a, т.е., собственно, магазина, испльзуется SSR (Server Side Rendering).

 

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

 

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

 

Много чего интересного уже есть на самом деле.

 

Но ещё больше конечно предстоит сделать.

 

 

И даже на текущем этапе это рабочее, готовое решение для небольших магазинов.

 

К примеру, оформление заказа можно упрощать до максимума, можно оставить, допустим, только одно поле Телефон и всё. В Админке - Настройки - Оформление заказа всё это настраивается, т.е. отключаются поля, либо делаютя необязательными.

 

Есть, к примеру, и брошенные корзины, т.е. заказ записывается в базу при начальном этапе оформления, т.е. указал клиент контактные данные, всё, этот заказ уже есть в mongodb, его уже можно посмотреть в Админке - Заказы, в Черновиках, а значит можно уже связаться с клиентом.

 

Если он, к примеру, не разобрался как оформить заказ до конца, не смог оплатить или что-либо ещё.

 

Информация по клиенту не потеряется, всё доступно в черновиках в админке.

 

я искал данное решение... Спасибо ... Думаю опенкарт 4.0 (5.0) будет полностью динамическим без перезагрузок страниц .... 

 

[vamshop]

23 minutes ago, whiteblue said:

я искал данное решение... Спасибо ... Думаю опенкарт 4.0 (5.0) будет полностью динамическим без перезагрузок страниц .... 

 

 

Сильно сомневаюсь.

Переписать всё с нуля нереально.

Да наверное это и не нужно, у OpenCart есть своя устоявшаяся аудитория.

 

[OCdevWizard]

34 минуты назад, whiteblue сказал:

Думаю опенкарт 4.0 (5.0)

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

у Даниеля времени просто на это нет, начиная с маркетплейса (сейчас на нем лежит палка из 3-х букв, которую он положил сразу когда произошло обновление всего маркета). Почти что 1 год был потрачен на то что бы внедрить twig и сделать переход на него, при этом остались контроллеры и модели почти в том виде который был и ранее. А тут vue или react - это уже совсем другая философия.