Если вы никогда не использовали 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. В следующий раз, во второй части, мы будем использовать наши данные, подключив пользовательский интерфейс к списку наших продуктов!