Дима, привет! Скачай новую версию плагина (оттуда же). Пофиксил. Ну а так-то я в топике сразу про это писал: Вообще в примере с клонированием сайта Клуба мы вносили правку в другом месте и совершенно другую, но здесь делаем именно так. Объясню: в том случае для работы сайта мы запускали node-сервис и там мы редактировали проксирование запросов, то есть все API-запросы и запросы картинок шли на локальный адрес /api/, а node-процесс уже проксировал их на конечный сайт, получая api-ответы и картинки. В нашем случае плагин будет работать без node-js и никаких прокси не будет, запросы будут напрямую слаться на сайт Клуба. Минус тут только в том, что картинок мы не получим, но это не столько важно, нам главное сейчас - уведомления. Видимо ты не достаточно внимательно читал ;) Ну а так, недоработка была на базе @prisma-cms/front, в аватарках пути только относительные писались. Добавил возможность указывать assetsBaseUrl. Теперь в плагине просто достаточно указать УРЛ на сайт Клуба.
Николай,привет! Я (какая неожиданность) пошел по самому простому пути:) Все встало ровно, единственное - аватарки не отображаются http://joxi.ru/a2XenkQt1G9nDA
Всем привет! Сегодня будет довольно интересная статья с минимумом кода. Задача Разработать для браузера плагин, чтобы он сообщал о наличии непрочитанных уведомлений на сайте (чтобы не приходилось постоянно на сайте сидеть и не переживать, что пропустишь сообщение из-за того, что не в той вкладке находишься). Требования Наличие git, node-js, yarn и хотя бы 1.5 Gb свободной оперативки (делать мы мало будем, но сам компонент исходный немаленький и сборка его требует ресурсов). Внимание: я не проверял на окнах, работаю в убунте. Если у кого какие сложности возникнут, указывайте версию своей ОСи. В окнах работа совсем не гарантируется, но фикс проблемы не должен быть сложным (как правило сводится к настройке cross-env) Если у вас не стоит yarn, поставить его очень просто: За лайфхак спасибо Олегу Косныреву. Выполнение За основу возьмем @prisma-cms/society (про него и не только я писал здесь). Это самостоятельный компонента. Задача состоит в том, чтобы он мог в браузере работать как плагин, и чуть-чуть его видоизменить (нам же не нужен целый сайт в тулбаре? :)) 1. Качаем себе исходный проект. 2. Устанавливаем зависимости. 3. Скачиваем API-схему MODX-Клуба. Про этот прием я писал здесь. И хотя в том случае мы качали схему для локальной копии сайта Клуба, здесь примерно то же самое, только меньше, потому что мы не будем настраивать проксирование, а укажим . 4. Меняем API-адрес компонента. Для этого открываем файл/src/dev/App.js и меняем на то есть дописываем свой эндпоинт. Вообще в примере с клонированием сайта Клуба мы вносили правку в другом месте и совершенно другую, но здесь делаем именно так. Объясню: в том случае для работы сайта мы запускали node-сервис и там мы редактировали проксирование запросов, то есть все API-запросы и запросы картинок шли на локальный адрес /api/, а node-процесс уже проксировал их на конечный сайт, получая api-ответы и картинки. В нашем случае плагин будет работать без node-js и никаких прокси не будет, запросы будут напрямую слаться на сайт Клуба. Минус тут только в том, что картинок мы не получим, но это не столько важно, нам главное сейчас - уведомления. 5. Тестовый запуск компонента. Сначала мы проверим, что компонент в принципе работает, выполняется авторизация и мы можем видеть чат-комнаты и сообщения в них (и если у вас есть активные уведомления, то и их тоже). Для этого выполним Если все ОК, то у вас откроется браузер с адресом http://localhost:3000 и вы увидите мини-сайт, где сможете авторизоваться со своим modxclub-аккаунтом или зарегистрироваться (прям там, а аккаунт будет создан в базе MODX-Клуба) и можете посмотреть список чат-комнат и сообщений в них. Если все так и произошло, то можно переходить непосредственно к модификации компонента и упаковке его в гугл-плагин. 6. Создаем манифест. В корне проекта создаем файл manifest.json с таком содержимым: Все:) Да-да, теперь это можно билдить и заливать в браузер. 7. Билд плагина. Выполняем в корне проекта команду 8. Заливаем в браузер. В хроме заходим во вкладку "Настройки -> Дополнительные инструменты -> Расширения" chrome://extensions/. Включаем режим разработчика (в правом верхнем углу страницы есть переключатель). Слева появится кнопка "Загрузить распакованное расширение". Жмем эту кнопку, в проводнике находим папку с нашим приложением и жмем Открыть. Если ОК, то в списке расширений у вас появится MODX-Клуб а в панели браузера появится приложение с дефолтной иконкой. Кликните его, должно открыться вот такое безобразие. Это нормально. Просто здесь нет минимальной ширины экрана, поэтому оформление идет по содержимому, а у нас там сейчас почти ничего нет. Если в меню перейти в chat-rooms, то окно расширится по содержимому и уже будет больше похоже на правду. 9. Кастомизация. Ну а теперь нам надо его немного подогнать под себя, чтобы он обеспечил необходимый функционал и выглядел чуть получше. Мне по суди надо только две функции: 1. Авторизация. 2. Чтобы менялась иконка в браузере, показывая, что есть непрочтенные уведомления (и кол-во этих уведомлений). 3. Быстрый переход на сайт в целевую тему. Пока мы заниматься будем доработками, лучше это делать в обычном режиме веб-страницы, а не гугл-плагина. Упакуем мы его потом, когда все сделаем. Для этого, как и обычно, запустим через yarn start. В этом режиме при внесении любых изменений в код у нас автоматически страница в браузере будет перезагружаться и отладка кода более подробная. Зададим минимальную ширину и высоту. Вот сюда дописываем Теперь у нас всплывающее окошко не будет слишком мелким. Пункт меню Graphql Voyager удалим, так как в этом режиме он не работает и нет смысла разбираться почему. Добавляем абсолютные ссылки на комнаты и сообщения Это одно из парочки относительно больших изменений, хотя на самом деле не прям так чтобы вообще. Смысл в том, чтобы к относительным ссылкам на комнаты и сообщения добавить абсолютные ссылки, чтобы можно было перейти к ним непосредственно на сайт Клуба. Для этого открываем вот этот файл и меняем его содержимое на такое: Для тех, кто уже успел поработать с реактом, наверняка не составит труда понять что здесь для чего меняется. Примерно то же самое делаем и для ссылок на сообщения. Все, теперь есть внешние ссылки у комнат и сообщений. Вместо заключения Вообще здесь должно было быть еще небольшое описание как вывести в панель браузера иконку что есть непрочитанные уведомления и выводить системные сообщения о новых уведомлениях, но с этим я закопался сегодня на 15 часов :) Подводные камни... Дело в том, что всплывающие интерфейсы, которые были описаны выше - это один процесс, который работает только тогда, когда это окошко выведено. А для уведомлений нужен другой - фоновый процесс. За этим потянулось еще куча всего, включая авторизация и реконнект веб-сокетных соединений и прочее. Последовало много работы. Я это все победил, но статью по этому поводу уже напишу позже. Вот картинка что на выходе получилось. Если себе хотите такие же уведомления, вот готовое расширение для хрома: https://yadi.sk/d/9hWkWOL0ZtGwrQ. Как его устанавливать, я писал выше. Распаковываете его и устанавливаете. После установки надо будет нажать иконку и авторизоваться в интерфейсе. После этого надо перезапустить приложение там же в списке расширений браузера (это чтобы веб-сокетное соединение установилось). К сожалению удобней пока не сделал, но перезапустить надо будет только один раз после авторизации. В итоге вы должны тогда увидеть сообщение "Приложение активировано". Исходники проекта здесь: https://github.com/prisma-cms/society-chrome-extension.
Сначала я писал коммент-ответ в ответ на этот, но в процессе понял, что он слишком большой и скорее всего очень полезный, так что выношу его в отдельный топик. Стилистику менять не буду, так что выглядеть будет как персональное сообщение. Дима, хороший вопрос :) Но не совсем корректный. Сейчас объясню. За вопросы отвечает компонент apollo-cms. Это довольно старый компонент, который появился раньше, чем @prisma-cms, почти год назад. Вообще это довольно исторический вопрос :) Дело в том, что изначально я осваивал чистый GraphQL без каких-либо сторонних библиотек. Скажу так, это было увлекательно, но довольно АДово :) Вот немного статистика с сайта городских бань: pm2 ls ┌───────────────┬────┬──────┬───────┬────────┬── │ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem ├───────────────┼────┼──────┼───────┼────────┼─── │ bani │ 0 │ fork │ 6627 │ online │ 1 │ 34D │ 0% │ 608.2 MB Не хило так, 600 метров оперативки на процесс? :) Бывали времена под полтора гига потреблял. Но работает стабильно. Это я просто недавно там гугл-карты обновлял по причине. А так месяцами работало без перебоя. Но все-таки текущие 46 метров на сайте Клуба приятней :) Так вот, писать чистые запросы на GraphQL, а еще и обеспечивать на стороне браузера кеширование и прочее - это невероятная жесть. Мне сложно это объяснить в двух словах, но просто поверь на слово. Я как бани переведу на призму и смогу выложить исходники текущей версии сайта, запилю отдельные топик с примерами. И вот, в какой-то момент я для себя открыл apollo-client. Официальный сайт часто не грузится (вероятно эхо войны с телегой), так что вот ссылка на тематическую статью с хабра. Много проблем для меня решила аполло, и перспективы всякие я увидел, но пришлось под себя подправлять, так что я и подумал, что это задел под CMS. Но в процессе выяснилось, что это все больше только под фронт, а надо же еще сервер, данные же надо хранить и обрабатывать. И хотя у аполло еще куча всяких плюшек есть, в том числе и сервер, но как-то все это слишком низкоуровнево и не юзабельно... И вот я для себя открываю prisma (на тот момент это еще называлось graphcool). Ну а дальше вы знаете... Что примечательно, разработчики призмы много всяких аполловских вещей юзают, но они пошли дальше - они обеспечили интеграцию с базами данных. По сути они обеспечили полной двусторонний канал API-DataBase. Ну вот на базе этого я и развиваю свою CMS. Возвращаемся к твоему вопросы :) И так, за выполнение запросов отвечает apollo-cms. Но сами запросы надо же еще откуда-то взять? Помнишь недавнюю статью про разворот modxclub.ru у себя локально? Там ключевой момент - это стянуть схему API сайта и сформировать на ее основе готовые фрагменты для запросов. Вот смотри один из запросов в @prisma-cms/resources: Здесь из контекста берутся фрагменты типа ResourceNoNestingFragment и вставляются в тело запроса. Как видишь, здесь нет полей типа id. name, uri или типа того. Эти поля находятся в генерируемых фрагментах. Вот смотри, здесь, в API-схеме поля у ресурса перечислены. Когда я выполняю билд, эти поля всех объектов набиваются во фрагменты и упаковываются в проект. Далее, в процессе работы эти фрагменты передаются в такие запросы и отправляются на сервер. Пример такого запроса здесь: Большой, не правда ли? :) И это еще не самый большой запрос. Согласись, такие запросы писать - хлопотно. Так вот, с таким механизмом не надо из писать полностью. Достаточно только основную часть без фрагментов написать и все. В нашем случае это что-то типа Вот такие заготовки и попадают в компоненты типа @prisma-cms/resource, @prisma-cms/society и т.п. Кстати, в @prisma-cms/society гораздо больше запросов-заготовок (посмотри сейчас, наверняка будет уже более понятно). Помимо заготовок под запросы есть еще заготовки-слушатели для веб-сокетов (это то, что отвечает за фоновое обновление информации на странице). Разница между этими двумя типами компонентов в том, что ContextProvider только передает заготовки запросов, но не выполняет их, а вот подключаемый SubscriptionProvider сразу добавляет соединения для веб-сокета. То есть просто подключаешь такой и все, в браузер получаешь актуальные изменения по подписанным типам. За передачу всего этого внутрь компонентов обеспечивает совсем маленький, но волшебный компонент @prisma-cms/context. Сейчас его код вот такой: Да, это все :) Но это сильнейшее колдунство! Без него бы все это не работало, как работает сейчас. Когда вы чуть прокачаетесь в освоении текущих технологий, я напишу статью про него отдельную и подробную. Там очень круто все! А на счет заготовки... Я писал в позапрошлом топике для чего какие заготовки сейчас существуют. Спойлер: все фронтовое есть суть производное от @prisma-cms/component-boilerplate.
Чаты - супер! Николай, вопрос: @prisma-cms/resource - это случайно не заготовка для возможности формирования своих запросов?