Как я сделал аналог редактора 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. Я начинал сборку приложения
  2. Проходило рандомно от (1 до 10 минут)
  3. Сборка прерывалась, с ошибкой.
  4. Шел в гугл с ошибкой , и пытался её исправить.
  5. Возвращался к пункту 1.

После бесконечных мучений, у меня получилось собрать приложение.

Дальше я решил все стереть и начать с нуля, на react native. На удивление настройка и установка приложения оказалась в 10 раз проще, чем тот круг ада что я прошел с expo.

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

К этому вопросу я подошел по такому же принципу как и изначальный редактор editorjs . А именно создал отдельный компонент, который занимается приемом входящих данных, и обработкой этих входящих данных подключая нужные дополнительные компоненты (paragram,image и т.д) и обратно возвращая итоговый json.

Вот что в итоге получилось

Пример создания брифа для оценки проекта.
Пример создания брифа для оценки проекта.

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

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

Спасибо за внимание!

11
2 комментария

Я делал редактор который из wysiwyg генерирует markdown, рендереров для которого уже много сделано. Плюс визуальных редакторов тоже придастаточно.

Ответить

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

Ответить