В этом руководстве мы собираемся создать полное приложение Ionic 2 с бэкендом WooCommerce, предназначенное для людей, которым нужно мобильное приложение Android/iOS для своего магазина на основе WooCommerce.

Мы собираемся использовать Ionic 2 для внешнего интерфейса и WordPress + WooCommerce для внутреннего интерфейса.

Требования к учебнику

Этот учебник требует, чтобы у вас было

  • Локальная установка WordPress с установленным и настроенным WooCommerce.
  • Или размещенный магазин WooCommerce, который вы можете протестировать с помощью .
  • Node.js и Ionic CLI установлены на вашем компьютере для разработки.
  • Некоторый опыт работы с Ionic 2 .

Мы не будем рассказывать, как установить WordPress и как добавить плагин WooCommerce, так как вы можете найти множество руководств в Интернете, которые уже показывают это.

Настройка WooCommerce API?

WooCommerce — это бесплатный плагин WordPress, который позволяет вам создать веб-сайт электронной коммерции на основе WordPress.

WooCommerce предоставляет API, который мы можем использовать через любой код на стороне клиента, в данном случае наше приложение Ionic 2, но прежде чем мы сможем это сделать, давайте настроим WooCommerce, чтобы позволить аутентифицированным клиентам использовать API.

В основном, что нам нужно сделать, это:

  • Включение постоянных ссылок WordPress
  • Включение WooCommerce API
  • Генерация ключей API

Сначала вам нужно включить постоянные ссылки WordPress через Администратор -> Настройки › Постоянные ссылки.

Затем вы включаете WooCommerce API, перейдя на вкладку WooCommerce › Настройки › API, затем установите флажок «Включить REST API».

Выберите вкладку API

Включить API

И, наконец, сгенерируйте ключи API, которые контролируют доступ к вашему веб-сайту WooCommerce с любого клиента.

Итак, перейдите в WooCommerce > Настройки > API > Ключи/приложения.

Нажмите Добавить ключевую ссылку/кнопку .

Затем заполните данные для генерации ключей, которые

  • Описание ключей API.
  • Пользователь WordPress, для которого вы хотите сгенерировать ключи
  • Разрешения (чтение, запись или доступ для чтения/записи)

Затем нажмите «Сгенерировать ключи».

Вы должны получить два ключа, Consumer Key и Consumer Secret, которые вам нужно скопировать и сохранить где-нибудь, потому что они понадобятся нам в нашем приложении Ionic 2.

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

Создание проекта Ionic 2

Давайте начнем наше путешествие с создания нового проекта Ionic 2 на основе шаблона бокового меню, поэтому откройте свой терминал в системе Linux/MAC или командную строку в Windows и введите:

ionic start ionic2-woocommerce sidemenu --v2 cd ionic2-woocommerce ionic serve

Мы собираемся использовать woocommerce-api, который является официальным модулем Node.js для WooCommerce API, но поскольку этот модуль использует специальные модули Node.js, недоступные в веб-просмотре Cordova, мы не можем использовать его напрямую с Ionic 2.

Преобразование модуля Node.js в библиотеку браузера

Решение состоит в том, чтобы использовать Browserify для связывания модуля со всеми его зависимостями в одном файле JavaScript, поэтому нам не понадобятся никакие внешние зависимости Node.js, которые недоступны внутри веб-представления Cordova (безголового браузера), используемого Ionic 2.

Browserify — это модуль Node.js, который можно установить из NPM с помощью

npm install -g browserify

Затем создайте проект Node.js с

mkdir woocommerce-api cd woocommerce-api npm init

Просто ответьте на все вопросы и нажмите Enter, чтобы NPM сгенерировал package.json.

Далее нам нужно установить модуль woocommerce-api из npm с помощью

npm install woocommerce-api --save

Следующее, что нужно сделать, это создать файл main.js внутри нашего проекта Node.js.

Затем скопируйте этот код

var WooCommerceAPI = window.WooCommerceAPI || {}; // Augment the object with modules that need to be exported. // You only need to require the top-level modules, browserify // will look for any dependencies and bundle them inside one file. WooCommerceAPI.WooCommerceAPI = require('woocommerce-api'); // Add to the global namespace window.WooCommerceAPI = WooCommerceAPI;

Итак, что делает этот код?

Сначала мы создали объект JavaScript, затем потребовали woocommerce-api и прикрепили его к нашему объекту, а затем экспортировали объект в глобальное пространство имен (окно), чтобы он стал доступен глобально после того, как мы преобразовали наш main.js в библиотеку браузера с помощью browserify.

Теперь нам нужно вызвать browserify из CLI, чтобы преобразовать main.js вместе с необходимыми модулями в библиотеку браузера.

Откройте свой терминал, перейдите в проект Node.js и введите:

browserify main.js -o woocommerce-api.js

Подождите, пока команда вернется, вы должны найти файл woocommerce-api.js в вашей текущей папке.

Теперь мы можем включить API-библиотеку woocommerce в наш проект Ionic 2 с помощью тега script, как и любую библиотеку на основе браузера.

Возьмите файл woocommerce-api.js и скопируйте его в папку с ресурсами вашего проекта Ionic 2, затем включите его в Ionic 2 index.html с помощью

<script src="assets/woocommerce-api.js"> </script>

Если вы обнаружите какие-либо ошибки с woocommerce-api.js, обязательно включите прокладку es6, поскольку модуль использует функции ES6, которые могут быть недоступны в Cordova webview.

Я использовал эту прокладку отсюда

<script src="assets/es6-shim.min.js"> </script>

Ionic 2 уже включает прокладку ES6, но использует рабочий процесс на основе Webpack с Gulp, который генерирует окончательный пакет build/main.js, содержащий все исходные файлы проекта, а также любые прокладки для поддержки ES6, поэтому вам нужно либо добавить свою библиотеку woocommerce-api.js. к рабочему процессу Ionic 2, чтобы его можно было связать с main.js или просто включить woocommerce-api.js и es6-shim.js перед main.js

Вы также можете попробовать использовать Crosswalk, который заменяет старый системный браузер, используемый Cordova, на последнюю версию браузера, которая поддерживает функции ES6, поэтому вам не нужно включать какие-либо прокладки. Я не пробовал, но вы можете проверить это, если хотите .

Теперь мы готовы использовать API woocommerce внутри нашего проекта Ionic 2. Но у нас все еще есть несколько проблем.

Ionic 2 основан на TypeScript, поэтому как включить API-библиотеку JavaScript woocommerce в проект TypeScript?

Поскольку у нас нет типов для woocommerce-api.js, нам просто нужно добавить эту строку

declare var WooCommerceAPI: any;

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

Ionic 2 Политика одинакового происхождения и CORS

Если вы тестируете свое приложение Ionic 2 локально с помощью команды Ionic serve (локальный сервер) или даже если вы используете устройство с синхронизацией в реальном времени (-livereload), вы обнаружите проблемы, связанные с той же политикой происхождения, когда вы подключаетесь к сервер WordPress.

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

Итак, как вы можете решить эту проблему при разработке приложения Ionic 2, которое подключается к серверу WooCommerce?

У вас есть много вариантов, либо на стороне Ionic 2, либо на сервере WordPress:

  • Тестирование только на реальном мобильном устройстве, но без включенной live-синхронизации (без — livereload ).
  • Использование прокси Ionic 2.
  • Изменение заголовков CORS на сервере, чтобы разрешить подключение всех доменов (или выбранных доменов).

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

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

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

Настройка CORS с помощью Apache

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

Вам нужно сделать две вещи:

Сначала включите модуль Apache mod_headers. Откройте командную строку и введите

Затем перезапустите службу apache с помощью:

sudo service apache2 restart

Откройте .htaccess и добавьте

<IfModule mod_headers.c> Header add Access-Control-Allow-Origin: "*" Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT" Header add Access-Control-Allow-Headers: "Content-Type" </IfModule>

Затем сохраните файл .htaccess.

Вывод

Это конец этой первой части нашего руководства. В следующей части мы собираемся создать фактический Ionic 2, который подключается к веб-сайту WordPress + WooCommerce, извлекает такие вещи, как категории, продукты и заказы, и отображает их в вашем мобильном приложении. пользователи .

Поделиться в Twitter Поделиться в Facebook Поделиться в Google+

Первоначально опубликовано на www.techiediaries.com.