Jump to content
vamshop

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

Recommended Posts

16 hours ago, Timber said:

Есть подобного рода проект https://www.vuestorefront.io/

Правда он написан на vue, а в качестве хранилища elasticsearch. Для опенкарта 2.3 есть коннектор, который даже работает.

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

 

 

"модуль, реализующий api" никогда не будет полноценный и всеобъемлющий.

Именно из-за изначально монолитной архитектуры opencart. 

т.е. всё равно, в случае с vuestorefront это будет половинчатое решение через кучу разных коннекторов и всё равно не будет поддержки всех возможностей opencart api методами.

Share this post


Link to post
Share on other sites

Лучше сразу смотреть на api центричные решения.

 

Например есть похожие на cezerin проекты:

 

reactioncommerce.com

saleor.io

 

Но, imho, они слишком уж сложные, как и vuestorefront кстати, тоже сложный.

 

cezerin именно тем и интересен, что он относительно простой и понятный.

 

Чисто "для попробовать" вообще достаточно скачать docker-compose.yml файл - https://raw.githubusercontent.com/Cezerin2/docker-cezerin2/master/docker-compose.yml и запустить всё 1 единственной командой: 

 

docker-compose up

 

Весь необходимый софт (база данных, веб-сервер, nodejs) выкачивается, настраивается, сам cezerin выкачиваетя с github, всё скомпилируется и запускается, всё автоматически, "руками" ничего делать не надо.

 

В общем, я в документации вот писал об этом всём, там и видео есть - https://cezerin.org/docs/#/using-docker

 

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

 

 

Edited by vamshop

Share this post


Link to post
Share on other sites
В 20.12.2019 в 09:55, vamshop сказал:

Но, imho, они слишком уж сложные, как и vuestorefront кстати, тоже сложный.

 

cezerin именно тем и интересен, что он относительно простой и понятный.

 

Чисто "для попробовать" вообще достаточно скачать docker-compose.yml файл - https://raw.githubusercontent.com/Cezerin2/docker-cezerin2/master/docker-compose.yml и запустить всё 1 единственной командой:

 

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

 

А вот попробовать и его можно в докере.

Share this post


Link to post
Share on other sites

Добавлен голосовой поиск.

Share this post


Link to post
Share on other sites
Posted (edited)

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

 

Причём бесплатно, без внешних подключений к каким-либо api.

 

Технически всё сделано через Web Speech Api.

 

Web Speech API везде поддерживается, где есть хром движок (а это, в том числе, и яндекс.браузер и новый ie, т.е. считайте все браузеры поддерживают кроме firefox).

 

Это и смартфоны, и планшеты, и телевизоры, и компы, и ноутбуки, любые устройства.

 

Интересно именно добавить его на любой сайт, т.е. распознавание голоса в текст и сразу идёт поиск по интернет-магазину.

 

Русский распознаётся отлично, вообще без ошибок, очень круто.

Edited by vamshop

Share this post


Link to post
Share on other sites

Тема eCommerce c nodejs мне тоже  интересна.
Пробую node в локальных проектах - парсинг (puppeteer) , консольные обработчики и т.д. Посматриваю и на headless CMS, например strapi - выбираю, что попробовать если не для полноценного магазина, но для  создания админки для работы с MySQL OpenCart.  
Все интересно, но смущает один момент - NoSQL. Еще не пробовал, поэтому вопрос.
Как MongoDB себя чувствует в таких например задачах, как хранение нескольких прайсов в одной таблице ( ~300 тыс.  записей), когда я одним запросом получаю оптимальную цену для каждого товара с учетом приоритета прайса и срока поставки. Все в одном запросе.     
Какие преимущества в ИМ у MongoDB перед реляционными СУБД ?

Share this post


Link to post
Share on other sites
Posted (edited)

Лично я с большими базами MongoDB дел ещё не имел пока что, для меня тоже MongoDB новая база.

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

 

Вот есть статья про сравнение mysql и mongodb - https://habr.com/ru/post/322532/

 

Там хорошие примеры кода.

 

imho, основное - это формат данных - json

 

Раз весь проект на JavaScript и всё описывается в json формате, то логично и базу данных тоже использовать, которая изначально работает в json формате, просто так удобнее.

 

Единообразие кода.

 

Другой удобный момент MongoDB применительно к веб-сайтам, движкам, которые берутся за основу своих разработок, это так называемая schemaless база данных, т.е. отсутствие необходимости изначально создавать структуру таблиц, это добавляет гибкости в работе и это очень удобно если процесс изменений сайта, базы постоянный, постоянно добавляется таблицы, новые колонки в таблицы и т.д., очень удобно всё без необходимости добавлять/менять структуру таблиц.

 

В целом, в принципе, сейчас всё одинаково, по большому счёту, без разницы, sql, nosql. Для не сильно сложных проектов вообще не принципиальный вопрос, лично моё imho, какая база данных. Тут больше вопрос в удобстве и MongoDB отлично дополняет набор из api центричности, 100% js кода, react кода, т.е. MongoDB не выглядит каким-то инородным кодом внутри проекта со своим sql синтаксисом, как это было бы в случае с mysql.

 

Те же таблицы (коллеции), те же индексы в таблицах, те же запросы в базу insert, update, delete.

 

Просто в MongoDB всё это сразу идёт в json формате, запросы и ответы, без необходимости заранее определять структуру таблиц, полная свобода действий, ты просто не думаешь о базе своей, а занимаешься кодом, развитием проекта. Это очень удобно, особенно в случае api-центричного веб-приложения, когда постоянно добавляются новые методы в api, добавляется новая функциональность на сайт. Ты занимаешься именно развитием сайта, а не постоянными раскопками в таблицах, схемах таблиц, смотришь, а что можно записывать в эту колонку, можон ли сюда текст писать или только числа, влезет ли в колонку большой текст с описанием товара, или не влезет, и придётся лезить в базу данных и менять, к примеру, тип колонки с TEXT на LONGTEXT, что б всё поместилось, нужно чот-то добавить новое - опять придётся лезть с базу, добавлять тут колонку, добавлять там колонку, добавлять тут таблицу и т.д.

 

В MongoDB просто нет в этом необходимости, сразу пошёл писать код и сразу же всё появляется в базе, и новые колонки и новые таблицы.

 

Очень удобно, на самом деле.

 

Edited by vamshop

Share this post


Link to post
Share on other sites

Прочитал статью на хабре и еще более утвердился, в том, что мне ближе SQL подход в проектах ИМ.
И сам строгий подход к проектированию архитектуры данных, это тоже мое. ) 
Очевидно у нас с вами разный подход к решению подобных задач. )
Кстати, с учетом того, что в последних версия mySQL можно хранить и делать запросы  JSON, мы можем использовать mySQL как noSQL - запихать кучу всего в одно поле типа JSON.
Надо пробовать! 
 

  • +1 1

Share this post


Link to post
Share on other sites

Ну да, кому что больше нравится, это, по большому счёту, не приципиально.

Лично мне очень понравился именно MERN стэк, т.е. MongoDB + Express.Js + React + NodeJs, вот при таком инструментарии всё очень единообразно и органично выглядит, как во frontend'е, так и в backend'e.

Share this post


Link to post
Share on other sites
1 час назад, vamshop сказал:

Ну да, кому что больше нравится, это, по большому счёту, не приципиально.

Лично мне очень понравился именно MERN стэк, т.е. MongoDB + Express.Js + React + NodeJs, вот при таком инструментарии всё очень единообразно и органично выглядит, как во frontend'е, так и в backend'e.

 

Скажите, а зачем вы эту дичь вашу сюда занесли?

 

  • +1 2

Share this post


Link to post
Share on other sites
22 часа назад, Yoda сказал:

 

Скажите, а зачем вы эту дичь вашу сюда занесли?

 

Вроде в курилке можно обсуждать любые темы ...
Или разговоры на темы технологий альтернативных  OpenCart здесь запрещены?

  • +1 6

Share this post


Link to post
Share on other sites

Про простое и удобное оформление заказа в cezerin.

В cezerin сделано максимально простое и удобное оформление заказа, управляемое из админки.

Какие задачи были решены:

1. Максимально не напрягать посетителя при оформлении заказа.

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

3. Всё работает на react + api, без перезагрузок страницы в браузере.

Например, я доставляю только по городу.

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

Я просто в форме оформления заказа отключаю все поля (через Админку -  Настройки - Оформление заказа), оставляю только 2 поля - Имя и Телефон.

Всё.

screencapture-vamhost-ru-checkout-2020-01-26-19_12_34.thumb.png.3f24eee0f5997c98298a1a1c38ab7198.png

Дальше уже на выбор покупателя.

Если выбирает доставку по городу, то при выборе доставки появляются поле Адрес, Метро и т.д.

Вот выбрал доставку курьером, появилось поле Адрес

screencapture-vamhost-ru-checkout-2020-01-26-19_12_52.thumb.png.089047a0f1a5f3f8390859ccff7cf933.png

При выборе доставки почтой - появляются поля Адрес,Индекс.

screencapture-vamhost-ru-checkout-2020-01-26-19_13_03.thumb.png.bdb63a177640d87031c244db04156fc6.png

 

У Вас есть возможность быстро и удобно выводить поля формы в зависимости от выбранной доставки.

Всё это настраивается в Админке - Настройки - Доставка.

screencapture-admin-vamhost-ru-settings-shipping-2020-01-26-19_14_43.thumb.png.0c4f1cb87c9d22b32de1d1c9d8931a8c.png

В разделе Поля оформления заказа.

Вот пример для модуля курьерская доставка:

screencapture-admin-vamhost-ru-settings-shipping-5dadd22796976428b7903944-2020-01-26-19_14_52.thumb.png.f464d5d42c638e308c8528501ddd282c.png

Вот пример для модуля доставки почтой:

screencapture-admin-vamhost-ru-settings-shipping-5de1a7ae2ca88f41d10024ee-2020-01-26-19_15_02.thumb.png.3ba97cb9000103ee8f1b43d48d118f4f.png

 

Кроме того, Вы можете ограничивать модули доставки в зависимости от указанной страны, города, региона.

В зависимости от суммы заказа, либо от веса заказа.

 

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

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

 

Всё быстро, просто и удобно.

Edited by vamshop
  • +1 1

Share this post


Link to post
Share on other sites

Добавлен новый модуль - Facebook Messenger.
Виджет facebook чата, встраивается на сайт, а-ля jivosite.

 

Настраивается в Админке - Приложения.

  • +1 2

Share this post


Link to post
Share on other sites

Небольшая демонстрация реально работающего магазина на базе Cezerin.

 

https://plasha.ru

 

PWA магазин, никакого PHP, MySQL, никаких монолитов.

 

Полное разделение frontend и backend.

 

100% на JavaScript: и Frontend (React + API), и Backend (NodeJS).

 

API-центричное веб-приложение на микросервисах.

 

Современный дизайн на базе Figma.

 

Обратите внимание, как быстро работает сайт.

 

Например попробуйте фильтр по цене на странице - https://plasha.ru/kategoriya-3

 

Попробуйте подгрузить больше товаров кнопкой Показать ещё на странице.

 

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

 

В отличии от OpenCart, нет лишних запросов и прорисовок.

 

Через API получаем "сырые" данные в JSON формате и отрисовываем их в React.

 

Попробуйте поиск товара.

 

screencapture-plasha-ru-2020-02-13-19_29_41.thumb.png.e7cf59f4f03c3c4084de7a6c374f90e8.png screencapture-plasha-ru-kategoriya-3-art-1010-povyazka-dlya-devochek-kaktusy-2020-02-13-19_37_56.thumb.png.e5f48a02b6a5ad79d2c7426dc7a8de52.png

Edited by vamshop
  • +1 3

Share this post


Link to post
Share on other sites

vamshop, направление JAMstak смотрели?
Что скажете, какое впечатление?

Share this post


Link to post
Share on other sites
Posted (edited)
On 3/2/2020 at 10:00 AM, Pirks said:

vamshop, направление JAMstak смотрели?
Что скажете, какое впечатление?

 

Я всеми руками за.

 

и если честно, не до конца понимаю, почему у нас так мало используются современные веб-приложения, с раздёлнным backend, frontend, практически не вижу jamstack сайтов.

 

Почему-то мы ещё в каменном веке живём с битриксами, opencart'ами.

 

Например вот раздел с документацией https://cezerin.org/docs

 

Это как раз можно сказать JAMStack, не совсем конечно, контент не через api приходит, а просто из markdown страниц git репозитория, но, по сути, это тот же api.

 

т.е. есть markdown файлы - https://github.com/Cezerin2/cezerin2.github.io/tree/master/docs

 

и есть JS, который всё это оформляет в более-менее приличный вид и через github pages https://cezerin.org домен привязан к репозиторию этого с документацией.

 

В итоге и получается https://cezerin.org/docs

 

Используется docsify - https://docsify.js.org/

 

и получается более-менее прилично оформленная страница https://cezerin.org/docs

 

Ну про jekyll я думаю тоже многие знают.

 

 

Edited by vamshop

Share this post


Link to post
Share on other sites
В 03.03.2020 в 20:43, vamshop сказал:

и если честно, не до конца понимаю, почему у нас так мало используются современные веб-приложения, с раздёлнным backend, frontend, практически не вижу jamstack сайтов.


Так уже говорили и обсуждали это, что такие сайты дорогие в обслуживании.

 

В 03.03.2020 в 20:43, vamshop сказал:

Почему-то мы ещё в каменном веке живём с битриксами, opencart'ами.

 

Вот как только эти технологии станут по цене разработки такие же как и эти движки + комьюнити будет такое же большое, тогда люди и перестанут жить в каменном веке.

 

 

 

Share this post


Link to post
Share on other sites
Posted (edited)
В 04.03.2020 в 22:44, Bn174uk сказал:


Так уже говорили и обсуждали это, что такие сайты дорогие в обслуживании.

Вот как только эти технологии станут по цене разработки такие же как и эти движки + комьюнити будет такое же большое, тогда люди и перестанут жить в каменном веке.

 

Про стоимость поддержки соглашусь, но обратите внимание на рынок Landing Page. По моим наблюдениям, на фрилансе 80% заказов по LP, это настроить и доделать LP на конструкторах - генераторах. Мне кажется такое может случиться и с ИМ в ближайшие два-три года. 
Нет, это не  магазин как сервис в облаке. А магазин собранный из услуг, таких как serverless или FaaS. 
Например, что мешает тому же  cezerin ) обращаться не к API своего бэкэнда, а к API ресурса, где будут храниться товары? 
С возможностью быстрой фильтрации, масштабирования и бэкапов. Здесь даже админы - DevOps не нужны, например для оптимизации баз данных.

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


  

Edited by Pirks

Share this post


Link to post
Share on other sites
Posted (edited)

 

Quote

З.Ы.Это не прогноз, это ощущения от прочтения некоторых материалов на тему ... )

 

Ничего не мешает.

 

Этим и интересен подход к полному разделению frontend и backend и работа чисто на API запросах к backend'у, к внешним сервисам, уход от монолита.

С монолитом типа OpenCart провернуть такое будет сложно, получится что-то вроде скрещивания ужа с ежом.

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

 

Но конечно нужно сообщество, без людей, без интереса со стороны сообщества сложно что-то сдвинуть.

Вот пытаюсь как-то привлечь людей к этой теме.

 

Когда у тебя всё общение с данными (со своим backend'ом, либо с внешними сервисами любыми) через API запросы,  то рисовать можно что угодно, где угодно и как угодно.

Не нравится React, бери Vue, Svelte и т.д. Это никак не повлияет на твой backend, твой api, т.к. он независим от внешнего представления, frontend'a.

Edited by vamshop
  • +1 1

Share this post


Link to post
Share on other sites
Posted (edited)

Кстати, на searchengines тоже интересная тема появилась, на medium об этом тоже писали как-то статьи.

Магазин, сайт на гугл таблицах.

 

В качестве данных для магазина выступают таблицы excel.

+ обычный клиентский html + css + js на стороне сайта, без необходимости серверной части вообще.

 

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

 

Вот тема - https://searchengines.guru/showthread.php?t=1028862

Пример - https://tiddlywiki.ru/

http://luckysushi.ru/habarovsk/heeg.html#index

 

т.е. все данные и формулы в таблицах.

 

Получается даже хостинг не нужен.

 

Backend - это гугл таблицы.

Frontend - можно разместить например на github pages, и привязать домен к github pages.

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

 

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

Зачем таким магазинам битрикс или opencart, wordpress+woocommerce.

 

Просто собирай заказы и работай, занимайся рекламой, продвижением.

 

и опять же, т.к. всё на API запросах, можно сразу направлять все заявки из гугл таблиц например в Битркс24, AmoCRM.

 

В общем, уже давно всё сильно поменялось в подходах к созданию сайтов, надо тоже как-то перестраиваться уже.

 


 

Edited by vamshop
  • +1 1

Share this post


Link to post
Share on other sites
Posted (edited)
В 07.03.2020 в 11:04, vamshop сказал:

Кстати, на searchengines тоже интересная тема появилась, на medium об этом тоже писали как-то статьи.

Магазин, сайт на гугл таблицах.

 

В качестве данных для магазина выступают таблицы excel.

+ обычный клиентский html + css + js на стороне сайта, без необходимости серверной части вообще.

 

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

 

Да, я в теме API Google Spread Sheet. Активно пользуюсь загрузкой - выгрузкой  в Open Cart.
Единственное, мне не хватает в таблицах функциональности настоящих баз данных, сказывается тяжелое реляционное детство. 
А вот как интерфейс, таблицы самое то - быстрый ввод, формулы, пользователям удобно, не надо искать кодера, что бы сделать наценки, скидки.       
Вообще у Googl' а много разных API, есть где развернуться.

З.Ы. Интересно читать, как  на searchengines  "пинают ногами"  разработчика магазина - как можно обойтись без хостинга и баз данных!! ))) 
Да, такой магазин скорее для гиков, с большим количеством недостатков, но тенденция на лицо - ИМ только на сторонних сервисах. 
Все очень быстро меняется.  

   

Edited by Pirks

Share this post


Link to post
Share on other sites
Posted (edited)

Кстати IBM как и Google раздает бесплатные ресурсы, дисковое пространство для файлов и SQL хранилище. Вполне можно что-то попробовать по этой теме. 
https://cloud.ibm.com/ 

Edited by Pirks

Share this post


Link to post
Share on other sites
9 часов назад, Pirks сказал:

З.Ы. Интересно читать, как  на searchengines  "пинают ногами"  разработчика магазина - как можно обойтись без хостинга и баз данных!! ))) 
Да, такой магазин скорее для гиков, с большим количеством недостатков, но тенденция на лицо - ИМ только на сторонних сервисах. 
Все очень быстро меняется.  

   

Вот у разработчиков всегда так. Не смотрел, не читал, но осуждаю.  Каких недостатков? Откуда взялось "скорее всего"?   Kodak тоже сказали. "Какие цифровые фотоаппараты? Вы видели их качество?"   и были правы, но теперь их нет....  на searchengines  всегда пинают, там манера общения такая ;) 

Share this post


Link to post
Share on other sites
В 09.03.2020 в 08:21, Pirks сказал:

Кстати IBM как и Google раздает бесплатные ресурсы, дисковое пространство для файлов и SQL хранилище. Вполне можно что-то попробовать по этой теме. 
https://cloud.ibm.com/ 

А как только появится спрос и популярность урезать квоты на бесплатный вызов API как и Google:-) задрать цены и считать профит? Только одного меня смущает что якобы бесплатные сервисы не дают возможности зарегистрироваться пока не дашь им данные своей кредитки.

  • +1 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.