daisyknit-alpaca

Пример модуля react native с нативными (и не только) компонентами

Как запустить

• yarn
• yarn prepare
• cd example
• yarn
• cd ios
• pod install
• cd ..
• yarn start

После будет возможно запустить iOS или Android приложение в симуляторе

Описание проекта

• example/src - симулятор приложения IMSHOP.IO с тестовым ядром модульной системы. Не является точным представлением кода в ядре платформы, но гарантирует идентичное поведение, и даст примерное понимание общей структуры.
• src - Пример модуля для интеграции в IMSHOP, который содержит компоненты / виджеты и нативные модули, которые будут экспортированы в приложение IMSHOP.IO.
  • index.tsx / index.ts - этот файл должен экспортировать объект с методом инициализации init(), а также всеми другими нативными и ненативными методами, которые вы делаете доступными для основного приложения
  • types
    • bootstrap-types.ts - типы, участвующие в инициализации
    • profile-types.ts - тип с данными профиля, которые вы получите от приложения и от бекенда IMSHOP
  • services - пример сервиса для получения данных пользователя от сервера IMSHOP. Рекомендуем не использовать эту логику напрямую в приложении. Вместе этого, отправте токен на ваш сервер, и запросите данные пользователя на вашем сервере.
  • native-calls-example - пример вызова нативной функции
  • full-screen-component-example - пример полноэкранного компонента

Описание платформы

Инициализация

При старте приложения IMSHOP.IO, ядро платформы находит все подключенные сторонние модули и инициализирует их. Модуль должен экспортировать метод init(params). Если этот метод не экспортируется, то модуль не будет загружен.

Метод инициализации решает три задачи:

1. Инициализация модуля. Если при старте модуля необходимо выполнить какие-то действия, то вы можете это сделать в этом методе.
2. Получение коллбеков и зависимостей от ядра платформы. IMSHOP при вызове этого метода передаст в него методы и serviceLocation, которые вы будете вызывать для триггера действий в приложении. Например вы можете назначить пользователю новые сегменты, заставить приложение обновить профиль пользователя, или отправить свое событие во все подключенные системы аналитики.
3. Передача в IMSHOP списка виджетов, экранов и компонентов, которые будут доступны в приложении. А так же передача коллбеков, которые ядро платформы будет вызывать для триггера действий в модуле. Например IMSHOP будет уведомлять модуль о том, что пользователь авторизовался, или вышел из системы, и передавать вам токен пользователя, чтобы вы могли запросить актуальный профиль пользователя из бекенда IMSHOP.

При запуске приложения этот метод будет вызван ровно с одним параметром params, который является объектом следующей схемы (нотация TypeScript):

{
  appSlug: string,
  userSegmentsUpdateHandler: (segments: string[]) => void,
  reloadUserData: () => void
}

Где:

• appSlug - текстовый идентификатор приложения (например yamaguchi)
• userSegmentsUpdateHandler - метод, который модуль может вызвать, чтобы обновить сегменты пользователя
• reloadUserData - метод принудительного обновления профиля пользователя в приложении. При вызове, приложение инициализирует синхронизацию профиля.

Метод инициализации должен ответить на вызов объектом следующего типа:

{
  setUserToken: (token: string | null) => Promise<void>,
  componentsMap: any, // не используется
  allComponents: Record<string, React.FC<any>>,
  success: boolean;
}

Где:

• setUserToken - коллбек-метод, который будет вызван при запуске приложения, а также при авторизации и разлогинивании пользователя. В случае если пользователь авторизован, будет передан токен. Если пользователь НЕ авторизован, то будет передан null. Метод будет вызван при изменении токена, а так же при любом обновлении профиля. При каждом вызове метода рекомендуется использовать токен для получения актуальных данных пользователя.
• componentsMap - временно не используется
• allComponents - словарь всех доступных компонентов
• success - true если инициализация прошла успешно

Обмен данными о пользователе:

Через токен

При получении токена через вызов setUserToken вы можете передать его на ваш бекенд и запросить у IMSHOP профиль полльзователя, используя этот токен.

Для этого надо сделать GET запрос на https://api1.imshop.io/v1/clients//users/profile с Authorization: Bearer xxxxxx заголовком, в котором передается этот токен пользователя, а также User-Agent: xxxx/xxx заголовком, с информацией о модуле. В ответ вы получите профиль пользователя, либо 403 если токен невалиден.

Через свойства компонента

В каждый компонент, который ембедит приложение будет передан проперти imshopUserData.

Пример:

<YourComponent imshopUserData={{xxxx}} />

Если пользователь не авторизован, то imshopUserData = null

Установка сегмента пользователя и принудительное обновление пользователя

При вызове init() IMSHOP передает в модуль два метода: userSegmentsUpdateHandler и reloadUserData.

Чтобы изменить список сегментов, к которым привязан пользователь, нужно вызвать userSegmentsUpdateHandler() и передать в него список строк-идентификаторов. Этот метод используется для быстрого изменения привязанных сегментов прямо на устройстве, без взаимодействия с сервером. Например чтобы обновить контент главного экрана. Список локальных сегментов переживает перезапуск приложения, но не переживает переустановку.

Если профиль пользователя на вашем сервере был обновлен, или были изменены severside-сегменты, и необходимо, чтобы приложение стянуло через стандартную интеграцию полный профиль пользователя, необходимо вызвать метод reloadUserData(), который также был передан при инициализации.

Релиз приложения и управление зависимостями

Доступные зависимости и управление зависимостями

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

Многие популярные библиотеки, такие как react-navigation, react-native-reanimated, react-native-safe-area-context, react-native-gesture-handler и другие, уже включены в ядро платформы, и не требуют установки вручную. Чтобы использовать их в своем модуле, достаточно указать их в файле package.json модуля как peerDependencies.

Релиз приложения

Чтобы выпустить приложение с новой версией модуля, необходимо выполнить следующие шаги:

1. Опубликовать модуль в npm как приватный или публичный пакет.
2. Связаться с продакт менеджером IMSHOP и передать следующие данные:

• Версия модуля
• Чейнджлог, что изменилось
• Список используемых зависимостей. Менеджер поможет определить какие зависимсти необходимо включить в модуль, а какие будут доступны как peerDependencies.
• Скринкаст, демонстрирующий работу модуля.