В этом руководстве мы собираемся создать полное приложение 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.