Мобильное приложение для InstantCMS 2.*

Телеграмм канал (https://teleg.run/icms2app)

В данном репозитории публикуется исходный код проекта.

На текущий момент реализовано:

1. SideMenu (Navigation Drawer), который формируется из меню, созданного в админ-панели (инструкция будет позднее).
2. Страница списка любого типа контента, добавленного в меню (см. выше).
3. Страница объекта любого типа контета (осталось добавить вывод props).
4. Функционал по созданию шаблона для страницы списка любого типа контента (шаблон выбирается в админ-панели или создается там же в окне редактирования кода)
5. Некоторые базовые настройки в админ-панели: базовый цвет приложения, стартовая страница (выбирается один из типов контента).

Очень скоро:

1. Ленивая подгрузка материалов в списках.
2. PullToRefresh - обновление списка по свайпу до упора вниз.
3. Авторизация/Регистрация
4. Фильтр в списках.

Дальнейшие планы:

1. Фильтр на странице списка.
2. Модальное окно с выбором категории при просмотре списка.
3. Система рейтинга в списках и объектах (лайки).
4. Страница - избранное, куда будут сохранятся отмеченные флагом объекты (исключительно на стороне мобильного приложения).

Если у вас есть пожелания по реализации какого-либо функционала - пишите их здесь либо в ветке форума: https://instantcms.ru/forum/thread32835.html

Установка для тестирования на эмуляторе или реальном устройстве (не продакшн)

1. Устанавливаем Node Package Manager: https://nodejs.org/
2. Устанавливаем EXPO-CLI, так как разработка ведется с помощью Expo (что это такое, можете прочесть тут: https://expo.io/learn)

npm install expo-cli --global

3. Клонируем или просто выкачиваем репозиторий проекта, распаковываем и следуем терминале/коммандной строке в директорию проекта.
4. Запускаем проект:

expo start или yarn start (если установлен yarn)

5. После того, как запустится Expo Metro Server (в коммандной строке появится много букаф и куаркод), нажимаем кнопочку I на клавиатуре для запуска ios эмулятора (только для MAC OS) или кнопочку A для запуска Android эмулятора.
6. Тест на реальном устройстве одинаков для ios и android:

6.1. Устанавливем приложение Expo из магазина (Google Play или AppStore)

6.2. Android: Заходим в приложение и находим значек сканнера. Сканируем куаркод из коммандной строки. Ждем сборки бандла. IOS: Заходим в камеру телефона и сканируем куаркод. Ждем сборки бандла.

Компонент JSON_API & Поле HTML ACE и настройка для теста на своем сайте:

https://yadi.sk/d/_tg1rwUNkMV4bQ

https://yadi.sk/d/_EnE3EKTmCnjSg

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

Добавить меню, по аналогии:

Внимание!!! В поле ссылка указывается системное название типов контента!

Системное имя меню (строго): mobile_menu

Далее идем в проект с приложением по пути: src/config/const и меняем значение констант:

BASE_URL - URL вашего сайта API_KEY - Ваш ключ соответственно.

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

Для компонента JSON_API требуется поле-редактор кода ACE. Его доже немного доработал (исправил проблему с добавлением нескольких копий этого поля в одном месте.

Собранное приложение APK настроенное на демо-сайт:

https://expo.io/artifacts/07e4cd76-6a1a-41b0-a8c4-295aec8fe052

Запуск проект без скачивания с гитхаба и дальнейшего билда (для теста через Expo):

Переходим по ссылке:

https://exp.host/@droidfun/VunderkindMedia_InstantCMS_2_MobileApp

P.S. На телефоне должно быть установлено приложение Expo (Google Play или AppStore)

Сканируем куаркод, который будет на странице справа через приложение Expo (Android), через обычную камеру (iOS)