Всем привет! Меня зовут Александр, мне 33 года и я React-разработчик из Беларуси (10 лет опыта во фронтенде). .

Я хочу рассказать о моем опыте создания мобильного приложения для хранения прочитанных книг BookDesk.

Все началось еще в 2020 году во времена пандемии короновируса. Была всеобщая "изоляция" и всем пришлось находиться дома большую часть времени. Тогда и пришла идея о создании своего приложения. У меня богатый опыт разработки веб-приложений на React и поэтому я решил попробовать себя в новом направлении. Я решил долго не думать над технологиями и использовать React Native в связке с Node.js и MongoDB, т. к. ранее я уже работал с Node.js и MongoDB для создания веб-приложений и, поэтому, выбор был очевиден.

О чтении книг

Я люблю читать книги. Читаю не так много, как хотелось бы, но регулярно. Сейчас удается прочитать около 10 книг в год. Я получаю удовольствие от чтения книг. Многие книги открывают глаза на некоторые вещи и позволяют взглянуть на окружающий мир под другим углом. Мне нравится процесс поиска новых книг. Мои любимые жанры это истории, основанные на реальных событиях, биографии, психология, история, саморазвитие. Из последнего прочитанного, наибольшее впечатление на меня произвели книги: Парадокс шимпанзе (Стив Питерс), Правило богатства номер 1. Личный финансовый план (Владимир Савенок), Как закалялась сталь (Николай Островский).

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

При этом, в наше время это можно сделать абсолютно бесплатно, взяв книгу у знакомых, в библиотеке или через сервисы обмена книг. Есть также вариант получения книги в собственность за символическую цену, купив книгу в магазине. Я люблю читать бумажные книги, тактильные ощущения и запах книги придают чтению больше эмоций и восприятия.

Идея создания приложения

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

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

Затем, я принял решение хранить книги в своем канале в телеграм, но на практике это также оказалось не так удобно, как хотелось. Это оказалось удобно только для временной записи, чтобы не забыть потом перенести запись о книге в более удобное место, и этим местом оказался, в конечном итоге, Google Drive.

Долгое время я вел учет всех книг именно там. Удобно открыть файл под названием «Прочитанные книги» или «Планирую прочитать» и посмотреть всю историю и статистику, по месяцам, датам, авторам и оценкам (я там оставлял оценки и отзывы по каждой книге). Но это был просто текстовый список, без обложек, описаний и т. д.

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

У меня скопился большой список книг, которые я хочу прочитать. Эти книги я получаю по рекомендациям в других книгах, в видео-роликах на Youtube, от своего окружения: родственников, друзей и знакомых. Каждую неделю я заношу в свой список для чтения около 2-3 книг. За год набирается внушительный список.

Это и стало отправной точкой для разработки хранилища для учета всех своих книг. Я подумал, что было бы удобно хранить все книги в одном месте, при этом с большой базой книг, с рекомендациями, с рейтингом от других людей. Тогда и пришла идея о создании такого приложения.

Я сделал анализ конкурентов, искал только в Google Play, т. к. сам пользуюсь Android смартфоном и планировал делать только для Android. Основная задумка была в том, чтобы сделать простое, быстрое и удобное приложение, без лишних функций и возможностей, не перегруженное. Оно должно было быть легким, с минимальным функционалом и с малым размером для скачивания и установки.

Мне нравятся быстрые приложения, например, Telegram. Он вышел на конкурентный рынок, но при этом завоевал большую долю благодаря своей простоте, скорости и удобству.

В 2017 году мне довелось поработать еще с одним удобным и быстрым приложением — Trello (менеджер задач) для учета задач команды. В нашем случае это были Kanban доски для разработки и дизайна веб-приложений и сайтов. Мне приложение очень нравилось и запало в душу, т. к. оно полностью удовлетворяло всем потребностям команды. Его функционал был достаточным, но не огромным. Не было нагромождения кучи функций, что делало бы его громоздким, медленным и неповоротливым.

Я бы сказал, что эти приложения и стали для меня примером того, как следует подходить к разработке приложений.

Реализация

Создание приложения всегда начинается с прототипов, макетов, набросков. Для этих целей я использовал сервис app.diagrams.net, там мне было удобно создавать первые прототипы, схемы и диаграммы.

Следующим этапом стал этап подбора цветовой палитры. Я сторонник того, чтобы палитра имела до 5 основных цветов, и вспомогательные для ошибок, успешных действий, статусов и т. д. Если посмотреть на успешные приложения, то их палитры построены на таком принципе.

Для этого необходимо уделить достаточное количество времени для того, чтобы приложение получилось приятным для восприятия, ведь именно цвета это то, что будут видеть конечные пользователи каждый день, за что их глаз будет цепляться при выборе приложения для установки. От того, насколько правильно подобраны цвета, будет зависеть успех приложения. Я использовал для сочетания цветов общедоступные сервисы, просто гуглил по запросам "цветовая палитра для приложения", "подбор цветов" и далее уже подбирал сочетания.

Мое приложение сделано в темных цветах, что-то похожее на темную тему. Но оно имеет только один вариант темы, без возможности переключения на светлую.

После этого я, на основе макетов и прототипов, создавал цветные варианты экранов. Для этого я использовал веб-версию фотошопа photopea.com

Я не дизайнер, раньше я работал в фотошопе, когда тесно работал с html-версткой и мне приходилось нарезать макеты в фотошопе. Поэтому выбор пал на этот инструмент. Меняя цвета, расположение блоков, я прорабатывал разные варианты, узнавал мнение у жены и родственников. Это очень важно, т. к. личное мнение в области дизайна и оформления всегда будет отличаться от мнения широкой публики пользователей, поэтому всегда надо делать тесты и опросы.

Логотип

Я создавал логотип сам в онлайн-редакторе boxy-svg. Вот примеры логотипов, которые участвовали в соревновании на звание лучшего. После опросов победителем стал логотип с цветным вариантом книг (самый нижний слева) , использующий цвета из палитры приложения. Также по итогам опросов выяснилось, что наклонить одну книгу будет лучше, чем оставить все прямыми.

Структура приложения

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

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

В итоге получилось 4 доски: Рекомендуем, Планирую, Читаю, Прочитано. Долго подбирал названия для досок, чтобы все было лаконично и при этом отражало суть. И чтобы все влезало в одну строку без скролла для смартфонов с размером экрана от 5".

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

Книги на досках имеют кнопку для изменения статуса, это и есть основная задумка, появляется меню, где можно выбрать статус и нажать кнопку Сохранить изменения статуса. Книга, в этот же момент, изменит свой статус и отобразится на нужной доске. Доски можно переключать при помощи свайпа или тач-клика по названию доски.

На доске Рекомендуем есть фильтрация по Категориям. Большое количество категорий и подкатегорий и поиск по категориям. На данный момент нет возможности зайти в саму книгу и посмотреть описание и другую информацию, это планирую сделать в следующих версиях. Также сейчас нет возможности изменять рейтинг книг, также в планах сделать.

Есть поиск книг по названию и автору. Сейчас приложение в стадии MVP, имеет минимальный набор функций, но есть дорожная карта, куда планируется прийти в конечном итоге.

Название приложения также претерпевало много изменений. В итоге получилось BookDesk: Прочитанные книги, оно отражает суть приложения и имеет легкое и понятное произношение у русскоговорящих пользователей.

База книг

В таком приложении большую роль играет контент. На данный момент база насчитывает около 60 тыс. книг.

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

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

Парсер написан на Node.js и использует axios и cheerio как основные библиотеки для парсинга. Логика работы простая, входные данные: URL категории, количество страниц в пагинации и далее он делает всю работу сам, складывает все сразу в MongoDB и скачивает обложку.

Инструменты и технологии

Как я уже писал выше, основные технологии это React Native — на нем можно писать и десктопные приложения и мобильные приложения, он хорош тем, что написав один раз приложение, его можно запустить сразу на нескольких платформах, например Android + iOS.

Node.js — для API и MongoDB для базы данных. Выбрал такой стек потому, что я работаю с JavaScript и решил все писать на JavaScript. В качестве хранилища состояния я использую Redux. Максимально пытался использовать нативные модули и компоненты из коробки React Native без установки других UI фреймворков. Компоненты типа RadioButton, CheckBox делал сам. Начиная с версии 0.70 React Native используется TypeScript по умолчанию, но я начинал разработку раньше, поэтому пока не внедрил TS, только в планах.

Основным компонентом приложения вяляется FlashList, этот компонент позволяет рендерить большие списки данных, в моем случае он идеально подходит для этих целей. Он очень быстрый и легкий. В React Native есть собственный компонент FlatList, VirtualizedList - но данные компоненты проигрывают в скорости FlashList.

Почему так? FlashList был создан компанией Shopify, т. к. они разрабатывают свое приложение на React Native и им необходима максимальная скорость рендеринга и поэтому они сильно заморочились над его созданием и оптимизацией. Можете почитать здесь про него.

Тем кому интересна внутрянка, прикрепляю список модулей и библиотек которые использую:

"@react-native-async-storage/async-storage": "^1.19.3",
"@react-native-google-signin/google-signin": "^9.1.0",
"@react-navigation/bottom-tabs": "^6.5.9",
"@react-navigation/material-top-tabs": "^6.6.4",
"@react-navigation/native": "^6.1.8",
"@react-navigation/stack": "^6.3.18",
"@shopify/flash-list": "^1.6.1",
"axios": "^0.27.2",
"i": "^0.3.7",
"i18next": "^21.10.0",
"lodash": "^4.17.21",
"npm": "^9.2.0",
"prop-types": "^15.8.1",
"ramda": "^0.28.0",
"react": "18.2.0",
"react-i18next": "^11.18.6",
"react-native": "0.72.5",
"react-native-actions-sheet": "^0.9.0-alpha.21",
"react-native-gesture-handler": "^2.13.1",
"react-native-pager-view": "^6.2.1",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-native-svg": "^13.14.0",
"react-native-svg-transformer": "^1.1.0",
"react-native-webp-format": "^1.2.0",
"react-redux": "^8.1.2",
"redux": "^4.2.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2",
"reselect": "^4.1.8",
"save": "^2.9.0"

Публикация

В начале октября 2023 я создал аккаунт в Google Play Console чтобы иметь статус разработчика. Для этого необходимо было заплатить 25$ и подтвердить свою личность, пройдя верификацию.

Чтобы пройти верификацию, необходимо прикрепить фото паспорта и документ, подтверждающий адрес проживания, прописка в паспорте не подходит. Я прикрепил договор по кредиту в банке — но пришел отказ спустя 4 дня.

Мне пришлось заказывать в банке выписку по счету где указано ФИО, адрес регистрации и дата. С этим документом через 1 день я прошел верификацию.

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

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

Скриншоты для приложения я создавал в бесплатном сервисе studio.app-mockup.com

И, наконец, 16 октября 2023 года мое приложение BookDesk было опубликовано! Это был долгий и интересный путь от идеи до реализации, в такие моменты получаешь колоссальное удовольствие от проделанной работы, хочется продолжать творить, созидать и придумывать.

Планы

В ближайших планах:

• Просмотр подробного описания книги

• Изменяемый рейтинг книг

• Расширение базы

• Проработка возможности добавлять пользовательские книги если их нет в базе (независимо от величины базы, все книги невозможно добавить)

Долгосрочные планы:

• Рейтинг пользователей

• Рекомендательная система для каждого пользователя в зависимости от его интересов

• Какие-то еще функции для мотивации к чтению

Результаты

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

У меня есть коллега, который также имеет опыт создания своего приложения и у него результаты пошли только через 4-5 месяцев после публикации в Google Play.

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

Итоговый размер приложения: ~ 7 Мб (после установки ~20 Мб)

Приложение бесплатное и без рекламы, без платных функций. Основная задумка и цель приложения — поработать в области создания мобильных приложений, получить опыт и создать что-то полезное для себя и тех кому оно будет полезно.

Ссылка на приложение — BookDesk: Прочитанные книги

Буду рад, если вы установите приложение, напишите отзыв и поставите рейтинг.

Давайте развивать культуру чтения!

Всем спасибо, что дочитали материал до конца и успешного дня!