Создаю интерактивную игрушку
Привет пикабутяне! Решил сделать себе хобби, используя нейросети генерю персонажей и текст и помещаю в игровой движок, где пользователь выбирает путь развития событий.
Вы играете за персонажа по имени Настя. Настя - гений, который изобрел машину времени. Путь развития выбирает сам пользователь.
Цель поста - найти единомышленников, которые помогут в развитии сюжета и ветвлений.
Пока работаю над 1 ветвью, да и текст сыроват, опыта нет.
Начало игры тут (работает пока для теста сюжет, где Настя оставила все в секрете и решила проводить эксперименты сразу на себе).
https://my-notes.site/index.php?id=2
Сделал немного, но суть должна быть понятна.
Если будете скидывать варианты развития событий, то буду рад).
Так же очень любопытно узнать, имеет ли такой формат право на жизнь, интересен вообще людям?
Гайд - импортируем CKEditor 5 в Laravel 10 как модуль node.js
Всем привет!
Уже давно настала эра WYSIWYG - редакторов текстов, и при написании наших веб проектов мы конечно же стараемся их использовать по максимуму.
Один из таких редакторов ну просто с сумасшедше-огромной функциональностью - это небезызвестный CKEditor, который недавно (шучу, давно уже) зарелизился замечательной 5-й версией.
Ее мы сегодня и будем импортировать в наш проект на Laravel 10. Скриншотик (и пасхалочка, кто знает тот поймет) внизу.
Как обычно есть 2 пути - простой и сложный.
Простой - это просто прописать в шаблоне
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
И активировать его на textarea через ClassicEditor.create().
Но есть нюанс.... что если авторы решат уйти из РФ и ограничит доступ? Или же РКН решит что "ты не пройдешь!" и ... ты не пройдешь. Нужно любить всех своих пользователей, а не заставлять их расчехлять VPN потому что на сайте не работает редактор.
Да и мы ведь серьезный проект пишем! Нам нужно свое! Да еще и желательно с кастомным билдом под наши задачи!
По этому мы пойдем по второму пути - сложному, который делится еще на два.
Назовем их "следовать инструкциям" и "догадаться самим".
Но перед тем как начать - нам нужно собрать кастомный билд с нужными нами модулями и настройками. Что можно спокойно сделать на сайте. Я использовал билд на базе ClassicEditor, выбрал нужные мне модули в том числе и модуль watchdog на будущее (сейчас активировать его в коде я его конечно-же не буду). В общем, качаем билд и распаковываем его в "Новая папка (3)" на рабочке. Он нам понадобится, но несколько позже.
Распакованный архив с кастомным билдом
Следуем инструкциям.
По инструкции на сайте мы берем скачанный билд, копируем его в папку с проектом в директорию public\assets\ckeditor5, импортируем .js файл в blade шаблон и так-же активируем его через EditorWatchdog() или CreateEditor(). Легко и просто, и в принципе все гайды в интернете по интеграции в Laravel пишут нам что так делать правильно.
Но нас то не обманешь! У нас серьезный проект! И ведь действительно, вдруг нам потом понадобится модуль, который мы не добавили в наш билд? Пересобирать заново? Да ну его! По этому мы пойдем своим путем! Поехали!
Догадываемся сами
К нашему счастью в Laravel встроен замечательнейший инструмент под названием Node.js, который мы и будем использовать. И не только его.
Установка
Идем консолькой в папку с нашим проектом и запускаем (не забудь включить vpn)
npm install --save @ckeditor/ckeditor5-build-classic
Установка
Сразу нам устанавливается множество зависимостей, однако наш любимый Laravel 10 этот модуль сразу не увидит. Для того чтобы это исправить нам нужно сделать еще кое-что. Поехали интегрировать.
Интеграция
Нам нужно чтобы наш Laravel увидел CKEditor, да собирал его под наши нужды "на лету". Для этого мы будем использовать vite, благо он идет в составе Laravel. У авторов CKEditor для него есть отдельный модуль с названием @ckeditor/vite-plugin-ckeditor5, его и будем использовать. Также нам понадобится модуль @ckeditor/ckeditor5-theme-lark.
Снова консоль, пишем:
npm install --save @ckeditor/vite-plugin-ckeditor5
npm install --save @ckeditor/ckeditor5-theme-lark
Пока ждем установку - наливаем кофе.
Далее ищем в корне нашего проекта файл vite.config.js и вносим в него следующие строки как показано на скриншоте (слева - старый файл, справа - внесенные изменения)
import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } ),
vite.config.js
Конфигурируем
Помните ту конфигурацию, что мы делали на сайте CKE? Она то нам сейчас и понадобится.
Открываем Новую папку (3) и в подпапке src находим файл ckeditor.ts. Это файл с настройками нашего билда. Копируем его в папку с проектом, в директорию resources/js.
Также из папки samples копируем style.css в resources/css.
И дополнительно создаем файлик editor.js - его мы и будем встраивать в наш шаблон.
Содержимое editor.js
import ClassicEditor from './ckeditor';
ClassicEditor.Editor
// Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
.create( document.querySelector( '#editor' ), {
language: 'ru',
removePlugins: [
'MediaEmbedToolbar'
]
})
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
Для наблюдательных - я специально не использовал watchdog здесь. Импортировать его я планирую потом.
Дальше нам нужно загрузить недостающие модули.
Открываем редактором ckeditor.ts и видим вверху множество импортов.
Открываем папку "node_modules/@ckeditor" внутри проекта и ищем недостающие модули. Если такие есть - устанавливаем их через npm install --save %имя_модуля%.
В дальнейшем есть шанс получить следующую ошибку от TailWindCSS (при запуске npm run dev)
[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.Please enable a CSS nesting plugin *before* Tailwind in your configuration.
Она вызывается из-за того, что мы используем кастомный css для ckeditor
Чтобы этого не происходило, нам необходимо в файле postcss.config.js в корне нашего проекта добавить следующие строки:
'postcss-import': {},
'tailwindcss/nesting': {},
как на скриншоте
postcss.config.js
Почти все
Нам осталось только в нашем шаблоне между тегов <head> добавить
@Vite(['resources/js/editor.js', 'resources/css/editor.css'])
И теперь любой <div> или <textarea> с указанием id="editor" будет вызван с редактором CKEditor5.
Запускаем проект через npm run dev и радуемся полученному результату!
Результат
Результат
А Вы заметили пасхалочку на скриншоте?
Все что вам осталось - это настроить дизайн редактора в css файле.
Ну и как-же без ложки дегтя - почему-то конфигурация "language: ru" не срабатывает и редактор остается английским. Возможно не хватает какого-то модуля или же что-то необходимо донастроить. Пока еще не разобрался, но в целом на данном этапе разработки это не сильно критично. Если у Вас есть идеи - welcome!
Update: С языком разобрался. Действительно его необходимо было имортировать. Для этого в ckeditor.ts необходимо вставить строку после импорта { ClassicEditor }
import '@ckeditor/ckeditor5-build-classic/build/translations/ru';
Update2: Также нашел проблему при вставке видео с внешнего источника, например Youtube. В редакторе оно вставляется, а вот в пост не переносится. Лечится доп конфигом там-же в ckeditor.ts в секцию defaultConfig
mediaEmbed: {
previewsInData: true
}
Исправленная локализация
Надеюсь что данный гайд поможет Вам в проектах.
Если вы хотите немного потрындеть, или быть может знаете Laravel или например умеете верстать, ну или просто у вас есть желание как-нибудь помочь с разработкой проекта, милости прошу в мою потрынделку.
В кратце - да, старый добрый, с блекджеком и шлюпками.
Всем спасибо!
AI для JavaScript и его применение в бизнес автоматизации
Привет Пикабу ! На связи команда облачной лоу-код платформы Нодуль, где вы можете строить самые гибкие автоматизации бизнес-процессов и создавать собственные приложения, не беспокоясь об инфраструктуре для их поддержания. Не важно, заняты вы фронтендом, бекендом или только начинаете осваивать JavaScript – в этой статье вас информация о бесплатном инструменте, который сэкономит вам кучу сил и времени.
Интерфейс платформы
Недавно в узле JavaScript, который может быть частью ваших разработок, появился ИИ ассистент, который готов закрывать весь объем работ, связанный с кодом:
написание
отладка ошибок
объяснение кода
дальнейшая модификация
Как воспользоваться ИИ ассистентом?
Ассистент находится внутри JavaScript узла. Общение происходит в диалоговом окне ‘AI Chat’. В свою очередь, нейронка Нодуля обладает следующими навыками:
Возможность видеть ваш сценарий и структуру узлов
Способность анализировать уже имеющийся код в ноде JavaScript, откуда ассистент и был вызван
Доступ к структуре данных по левую сторону от JS узла.
Сценарии использования
Прелесть AI ассистента на Нодуле в том, что он совершил семимильный шаг по пути реализации нашей миссии: теперь создание собственных микросервисов или построение сложных автоматизаций доступно даже тем, кто до этого в жизни с кодом не взаимодействовал! Рассмотрим 3 сценария использования, чтобы это доказать.
Сценарий #1 Работа с HTML
Рассмотрим сценарий, где нам нужна форма для сбора данных, которая будет доступна по webhook url. Такое решение может пригодиться в тысяче разных случаев. Сначала мы заполняем форму, а дальше информация передается куда вздумается: либо на другую ветку автоматизации на Нодуле для дальнейших преобразований, либо в иную систему. Как насчёт построить такой сценарий без написания и строчки кода?
форма для компоновки емейла для рассылки по базе данных пользователей
Шаг 1. Отправим ИИ ассистенту запрос
Привет! Добавь к моему коду скрипт для создания HTML кода для формы с названием ‘создать емейл’. В ней должны быть следующие поля для заполнения: ‘тема письма’, ‘обзор’, ‘заголовок’, ‘апдейты платформы’, ‘полезные материалы’, ‘другие новости’. Снизу расположи кнопку ‘отправить’. Оформи HTML красивым дизайном и форматированием. Верни результат в виде JSON объекта “html”
Шаг 2. Заменяем наш код на полученный результат.
Шаг 3. Запускаем один раз наш сценарий.
Так JavaScript модуль вернет нам “html” JSON объект для использования его в webhook response, где помимо этого мы меняем параметр типа контента на text/html для корректного отображения формы по ссылке из нашего входного webhook.
Теперь, открывая ваш webhook url, вам отобразиться форма для сбора данных.
Шаг 4. Отправка полученных данных.
Единственное, что остаётся, это сделать так, чтобы полученная через форму информация передавалась на webhook другого сценария для дальнейшей с ней работы. Естественно, писать сами мы ничего не будем:
Теперь наша форма становится полностью активной и готовой принимать входящую информацию. Можно передать полученные значения на сценарий, который сразу же зафиксирует их, к примеру, в Google таблицу.
Сценарий #2 Доступ к NPM пакетам
В мире насчитывается более миллиона NPM пакетов (готовые приложения для программистов, которое они добавляют в свой код), доступ к которым вам может обеспечить ИИ ассистент на Нодуле. Предположим, в вашем сценарии понадобился актуальный обменный курс USD/EUR для осуществления торговли в разных валютах и предоставления актуальной информации на сайте для клиентов. Нежели мучать себя поиском нужной API и чтением документации, озвучьте ваш запрос следующим образом:
Для реализации задачи ассистент использует NPM библиотеку axios для отправки HTTP-запроса GET к ExchangeRate-API, который предоставляет последние обменные курсы. Он получает обменный курс 1 доллара США к 1 Евро и возвращает его в формате JSON.
Корректный результат не всегда достигается с первого раза: иногда получаем ошибки, иногда пустые значения на выходе. Главное не забывать, что отладка ошибок – это тоже не наша забота. Чтобы все было исправлено, попросите ИИ добавить в код console.log для детализации серверного ответа. Далее, возвращаете любую ошибку в чат с ИИ – и новый код перед глазами!
Сценарий #3 Преобразование данных
Также вы можете забыть о головной боли при преобразовании данных, таких как, например, форматирование даты. Вам ведь знакомо, когда системы отдают дату в одном формате, например, "YYYY-MM-DD", но другая система должна их принять в другом – “DD MMMM YYYY”
Результат преобразования полученной через webhook даты формата ‘2023-07-11’:
Аналогичным образом ИИ может помочь вам преобразовывать строки, агрегировать данные, фильтровать, сортировать, трансформировать, соединять, разделять, удалять дубликаты, проводить статистический анализ и даже анализировать текст.
Альтернативный режим использования
В предыдущей части статьи мы обращались к ассистенту через диалоговое окно, но есть еще один вариант, который будет полезен для более предметной отладки какой-то части кода, или для просьбы объяснить, что в нем происходит:
Сообщество лоу-код энтузиастов
В настоящее время сообщество платформы Нодуль активно набирает обороты и специалисты в области low-code присоединяются к нашему чату, где команда проекта рада фидбеку и готова помочь со всеми вопросами!
Важная ремарка: платформа находиться в бета и предоставляет бесплатный доступ для всех желающих!
Ждем вас на Нодуле и в Телеграмм сообществе!
Анимация персонажа
Всем привет! Мы делимся с вами первыми, тестовыми анимациями одного из персонажей.
Как вам?
Flatberries. Онлайн доска стикеров
Привет! С последней публикации прошел почти месяц и недавно состоялся публичный релиз доски со стикерами.
Если честно я не думал, что настолько долго всё затянется (почти 3 недели ушло на релиз), ныть не будем, всё есть в чендж логе, если вам интересно посмотреть на то, как реально двигался проект и куда уходит время помимо основного функционала, велком Change log
Стоит отметить, что львиную долю съели дополнительные подготовки такие как дашборд, соглашения, лимиты, про которые я вообще не собирался думать в процессе реализации mvp и считаю это абсолютно правильным, только когда стали доступен рабочий функционал, только когда уже релиз на носу, стоит потратить на это время.
Итак, что есть на текущий момент - сервис работает, стикеры создаются =) всё это доступно онлайн, с телефона не работает.
Лого нет =) не до него.
Львиная доля подготовки завершена, в идеале бы еще заиметь ci\cd так как уже начинает напрягать ручной деплой, и я концентрируюсь на функционале - а именно линиях, которыми можно будет соединять стикеры. Помимо линий в очереди стоят:
Страница восстановления пароля
Валидация полей для регистрации
Перемещение доски мышкой
Изменение масштаба колесом мышки
Ознакомиться с сервисом можно тут https://flatberries.com/
Дельная критика и пожелания приветствуются.
Также мне писали по поводу selfhosted app - я принял решение и не буду это делать в обозримом будущем, извините.
Сколько стоит сделать сайт аналог Пикабу?
И сколько интересно стоит его содержать?
Как много пространства на серверах нужно для хранения минусов и списков забаненных?
Просто интересно прикинуть, так ведь можно посчитать на коленке, глядишь кто-то с бодуна прочитает калькуляцию и решится от нефиг делать.
Создадим Свою Соц-Сеть?
Привет, пикабушники! Хотел поделиться интересной идеей – почему бы нам не создать свою собственную социальную сеть, вдохновленную популярным (уже нет) пикабу? Уверен, здесь есть много талантливых людей, и мы можем совместно сделать нечто удивительное!
Я хочу, чтобы социальная сеть ориентировалась на мнение пользователей, в особенности, когда появляются инновации.
Меня зовут Миша, и я могу взять на себя разработку приложений для Android, могу также попытаться сделать веб и настольные (Windows, Linux, Mac) приложения ну и для IPhone, но в этом мало у меня знания и ещё меньше опыта. И я хотел бы попросить у вас помощь в этом
Тем не менее, даже если у вас, дорогие друзья, нет опыта разработки, но есть желание помочь и имеются интересные идеи, то можете тоже присоединиться!
Предлагаю использовать Telegram (Discord?) для общения, так как это более удобный и быстрый способ (мне известный)
Если вы заинтересованы, оставьте комментарий или напишите в группу. Давайте воплотим эту идею в реальность вместе!
Это лишь Идея