Как я сделал аналог редактора editorjs.io в мобильном приложении
Всем привет, как вы знаете я разрабатываю IrenSystem , сегодня я хочу вам рассказать о том, как я разрабатывал собственный редактор, который должен быть совместим с данными который генерирует EditorJs для мобильного приложения.
Как вы знаете редактор EditorJs.io уникален тем что, на выходе он генерирует json который можно обрабатывать и выводить в каждой среде по своему. Например в вебе, выводить верстку, в мобильном приложении обрабатывать и выводить по своему. Но если с выводом данных в мобильном приложении проблем нет, то вот с самим созданием таких данных имеется проблема.
Прежде чем решать проблему с редактором, необходимо было сформулировать требования для мобильного приложения: что оно должно делать, и зачем оно вообще?
В итоге требования к функциям мобильного приложения были следующие
- Чтения блогов с фильтрацией по категориям, и возможностью создания\редактирования записей.
- Просмотр услуг с возможностью просмотра портфолио , и отправки проекта для оценки
- Просмотр каталога товаров с фильтром по категории, механика корзины и оформление заказа.
- Управление проектами, с функциями просмотра базы знаний, управления задачами, смена статусов, комментарии.
- Заказы: управление заказами как из проектов, так и из маркетплейса, комментирование заказа, возможность смены статуса заказа.
- Управление уведомлениями и фильтрация.
Как видно из требований, разработка механизма для управления содержимым: проектов, задач, записей в блоге необходима.
Платформа мобильного приложения был выбран react-native. Так как я являюсь новичком в разработке мобильных приложений, я выбрал expo. Выбор expo был сделан, так как в документации было указано что если вы первый раз сталкиваетесь лучше выбирайте expo.
После первых беспрерывных трех дней кодинга, стало понятно что с expo проблемы а именно:
- весь механизм билда итогового apk , происходит в облаке.
- expo подключает свои библиотеки, что значительно увеличивает итоговый билд
Если с тем что приложение весит много, можно еще жить и это не такая уж проблема, то вот с тем что весь процесс сборки приложения происходит в облаке меня начал смущать.
И так я полез в интернет, изучать как можно быстро перейти с expo на чистый react native. И тут я наткнулся на команду eject. Стал изучать, и собственно выполнять этот самый eject . После выполнения eject, первое что я стал делать это сборку приложения. Сборка приложения после eject , стал просто ужасно медленным и глючным. Весь процесс сборки занимал 10-15 минут, и в эти 15 минут сборка могла прерваться в любой момент, вот как это происходило
- Я начинал сборку приложения
- Проходило рандомно от (1 до 10 минут)
- Сборка прерывалась, с ошибкой.
- Шел в гугл с ошибкой , и пытался её исправить.
- Возвращался к пункту 1.
После бесконечных мучений, у меня получилось собрать приложение.
Дальше я решил все стереть и начать с нуля, на react native. На удивление настройка и установка приложения оказалась в 10 раз проще, чем тот круг ада что я прошел с expo.
Дальше уже началась доработка приложения а именно, реализация редактора.
К этому вопросу я подошел по такому же принципу как и изначальный редактор editorjs . А именно создал отдельный компонент, который занимается приемом входящих данных, и обработкой этих входящих данных подключая нужные дополнительные компоненты (paragram,image и т.д) и обратно возвращая итоговый json.
Вот что в итоге получилось
Компонент получился универсальным, который можно подключать к любым данным и в любое место.
В мобильном приложении ArtemDev.ru он используется для управления записями в блоге, проектами, задачами.
Спасибо за внимание!
Я делал редактор который из wysiwyg генерирует markdown, рендереров для которого уже много сделано. Плюс визуальных редакторов тоже придастаточно.
Увы , мне такой вариант не подошел. У меня уже были данные в json , и я исходил из этого