Если вы никогда не использовали MobX State Tree или TypeScript, стек Ignite Bowser может быть вам немного незнаком! Если вам интересно, почему мне нравится этот стек, взгляните на Bowser README.

В этой серии руководств я расскажу вам, как создать приложение для электронной коммерции с помощью Ignite Bowser, используя Wordpress Woo-Commerce в качестве бэкэнда.

В этом посте мы рассмотрим этапы создания модели данных продукта для приложения электронной коммерции, чтобы проиллюстрировать, как использовать стек Ignite Bowser на реальных примерах.

Перво-наперво, давайте воспользуемся нашим новым приложением Ignite! (Установите ignite-cli, если вы еще этого не сделали!)

ignite new IgniteEcommerce

Мы выбираем шаблон Bowser и говорим «нет» детокс-тестам для этого примера. Если бы мы хотели сэкономить время и обойти оба этих вопроса, мы бы запустили:

ignite new IgniteEcommerce  --boilerplate bowser --no-detox

После того, как Ignite закончит работу, запустите

react-native run-ios

or

react-native run android

и вы должны увидеть что-то вроде этого:

Определение наших моделей

Затем приступим к построению наших моделей данных. Мы собираемся использовать Wordpress и Woo-commerce в качестве источника данных, поэтому мы построим наши модели, чтобы они соответствовали этим данным из API остальных продуктов, которые вы можете проверить в документации.

Продукт

Нам нужна модель продукта! Каждый продукт обладает следующими свойствами:

title, id, created_at, updated_at, updated_at, type, status, downloadable, virtual, permalink, sku, price, regular_price, sale_price, price_html, taxable, tax_status, tax_class, managing_stock, stock_quantity, ...., description, short_description, ...featured_src

пропустил перечисление нескольких свойств и заменил их на… для простоты мы будем использовать только следующие свойства из остальных api:

id ,title, price,featured_src

Давайте создадим модель MobX State Tree (MST):

ignite generate model product

Это создаст папку app/models/product/, содержащую несколько файлов:

product.ts
product.test.ts
index.ts

Мы пока не будем писать модульные тесты, поэтому сосредоточимся на product.ts

Этот файл состоит из нескольких частей. Во-первых, это ProductModel, который является сердцем этого файла. Это определение модели MST. Каждый экземпляр модели имеет свойства, как обычный объект JS, но также имеет представления (вычисленные значения) и действия.

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

Сначала мы сосредоточимся на свойствах, поэтому давайте добавим свойства, которые мы хотим, чтобы каждый Product имел:

Давайте немного распакуем это.

У нас есть id, то есть types.identifierNumber. Это версия первичного ключа MST. Он должен быть уникальным и позволять вам делать некоторые полезные вещи, например ссылаться на экземпляр модели только по его идентификатору. Подробнее об идентификаторах можно прочитать здесь.

Затем у нас есть некоторые строковые свойства: title, price и featured_src. Это все текстовые значения произвольной формы.

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

Магазин продуктов

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

ignite generate model product-store

СОВЕТ IGNITE 🎉: если вы запускаете приложения так же часто, как и мы, вы можете сокращать generate до g, например ignite g model <model-name>

Этот файл очень похож на product.ts, когда мы его впервые сгенерировали, но мы собираемся добавить другие свойства. На данный момент у него есть только один: массив типа ProductModel. Это будет массив экземпляров MST. Мы можем решить, что нам понадобятся дополнительные свойства позже, но этого будет достаточно для начала.

Подключение API

Хорошо, у нас есть несколько моделей, описывающих форму данных, которые нам нужны. А теперь давайте получим некоторые данные.

Служба API

Bowser поставляется с сервисом API, готовым к настройке, так что давайте настроим его.

если вы пойдете по тропинке:

app/services/api/api-config.ts

Здесь вы меняете URL-адрес, чтобы указать на свой rest API WordPress, поскольку woo-commerce требует, чтобы вы предоставили:

consumer_key and consumer_secret

Мы установим все это в файле .env, чтобы все было в центре:

Мы меняем API_URL, чтобы он указывал на наш веб-сайт (настройка веб-сайта woo-commerce выходит за рамки этого руководства). Затем копируем consumer_key и consumer_secret, которые мы генерируем, чтобы подключиться к woo-commerce, вам нужно будет это сделать, это также выходит за рамки данного руководства, вы можете погуглить, есть масса руководств по этой теме.

теперь перейдите в app / services / api / api-config.ts и измените следующую строку:

url: API_URL || "https://jsonplaceholder.typicode.com",

to

url: API_URL,

У вас получится такой файл:

Теперь последний шаг, который нам нужен в этом файле, - это добавить конечную точку API woo-commerce к API_URL, изменив ее на:

url: API_URL + "/wc-api/v2",

Итак, теперь ваш файл будет таким:

Теперь перейдите в app / services / api / api.types.ts

и измените его на следующее:

Затем, наконец, после того, как getUser добавил getProducts, я сохранил getUser, так как он может понадобиться в будущем в качестве справки:

Вот что мы сделали:

  • Мы обновили базовый URL в app/services/api/api-config.ts
  • Мы сохранили примеры getUsers и getUser в app/services/api/api.ts и добавили getProducts
  • Обновлены типы возвращаемых функций для использования ProductSnapshot. Снимки - это сериализованная версия моделей MST без всех динамических функций, таких как представления и действия. Вы можете рассматривать снимки как неизменяемую, простую версию JS-объекта вашей модели MST.

Получение данных

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

Пришло время сделать наш первый MST action.

Но сначала давайте добавим кое-что к нашей модели Product Store.

Обратите внимание, что мы добавили строку .extend(withEnvironment). Расширения - это удобный способ поделиться часто используемыми шаблонами в MST. В этом случае он добавляет представление к модели с именем environment, которое вызывает функцию getEnv MST и возвращает содержимое нашей среды (расположенной в app/models/environment.ts). Прочтите документацию, чтобы узнать больше о getEnv и внедрении зависимостей в MST.

А теперь вернемся к нашим действиям.

Мы добавили два действия:

  • saveProducts принимает массив моментальных снимков и превращает их в экземпляры модели, а затем сохраняет их в массив products.
  • getProducts вызывает метод API для получения массива снимков из API, а затем передает их saveProducts

Причина использования двух блоков .action связана со временем добавления действий к self. Чтобы вызвать действие saveProducts на себе, нам нужно было уже определить его в другом блоке .action. См. Документацию для получения дополнительной информации об этой тонкой ловушке.

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