Cosmic JS только что выпустила новое функциональное расширение, которое позволяет каждому встраивать собственное приложение в Cosmic CMS!
В этом руководстве мы рассмотрим некоторые шаги, необходимые для создания расширения Amazon Product Search Extension.
TL;DR
Просмотреть полную базу кода на GitHub
Установить расширение в сегмент в сегменте› Расширения ›Обзор расширений
Просмотреть документацию по расширению для получения дополнительной информации о создании расширения
Расширение, которое мы строим
Мы создаем простое расширение, которое позволяет вам выполнять поиск в каталоге продуктов Amazon и добавлять объекты в корзину с названиями продуктов, описанием, изображением и партнерской ссылкой.
Это довольно простое приложение, созданное с использованием реакции, и мы не будем вдаваться в подробности о частях, которые не имеют прямого отношения к новому API-интерфейсу Cosmic JS Extensions.
Получение доступа к Cosmic API в вашем расширении
Cosmic JS встраивает расширения в виде <iframe> в свой интерфейс CMS, расширению дается URL-адрес со строкой запроса, предоставляющей всю информацию, необходимую вашему приложению для доступа к соответствующему сегменту, например:
Извлечь эти переменные очень просто, и даже проще, используя такую библиотеку, как qs:
import qs from "qs";const { bucket_slug, read_key, write_key, } = qs.parse(window.location.search.slice(1, Infinity));console.log({ bucket_slug, read_key, write_key, });
Эти ключи затем можно использовать для выполнения вызовов API в сегменте, в котором вы в настоящее время используете расширение в:
fetch(
`https://api.cosmicjs.com/v1/${bucket_slug}/object/amazon-credentials${
read_key
? "?read_key=" + read_key
: ""
}`,
opts,
);В нашем приложении мы используем эти ключи для добавления нового объекта для найденных нами продуктов Amazon.
extension.json
Один файл, который должен быть включен в ваше расширение, - это файл extension.json. Это сообщает Cosmic важные метаданные о вашем приложении, такие как его имя, значок, отображаемое изображение, а также объекты и типы объектов по умолчанию, которые должны быть созданы при первой установке расширения. extension.json для нашего приложения выглядит следующим образом:
{
"title": "Amazon Product Search",
"font_awesome_class": "fa-shopping-basket",
"image_url": "http://fla.fg-a.com/shopping-cart/shopping-cart-black-3.png",
"objects": [
{
"title": "Amazon Credentials",
"slug": "amazon-credentials",
"type": "amazon-credentials",
"metafields": [
{
"key": "amz-key",
"title": "Key",
"type": "text",
"value": ""
},
{
"key": "amz-secret",
"title": "Secret",
"type": "text",
"value": ""
},
{
"key": "amz-tag",
"title": "Tag",
"type": "text",
"value": ""
}
]
}
],
"object_types": [
{
"title": "Amazon Products",
"slug": "amazon-items",
"singular": "Amazon Product",
"metafields":[
{"key":"image_url","type":"text","value":"","title":"image_url","parent":false,"children":null},
{"key":"affiliate_link","type":"text","value":"","title":"affiliate_link","parent":false,"children":null}
]
}
]
}Поле title - это имя, которое ваше расширение будет отображать внутри Cosmic. Поле font_awesome_class должно быть действительным именем значка Font Awesome. Поле image_url - это отображаемое изображение, которое будет отображаться с вашим расширением.
У вас также есть место для указания списка объектов, которые будут созданы при установке вашего расширения. Здесь мы подробно описали объект, который будет хранить наши учетные данные Amazon Product Search. Это означает, что Cosmic позаботится о сохранении этой информации для нас!
Развертывание и непрерывная интеграция
Загрузить расширение в Cosmic очень просто, вам просто нужно взять папку, содержащую ваш extension.jsonfile и index.html файл (и любые другие ресурсы, которые вам нужны), заархивировать и загрузить.
Наша папка сборки выглядит так:
build
├── extension.json
├── index.html
└── static
└── js
└── main.a651cd8a.jsВы можете загрузить свой zip-файл через Cosmic JS CMS или используя остальные API.
Мы используем Bitbucket для размещения нашего кода, который имеет встроенную службу CI под названием Pipelines. Вы можете настроить конвейеры для запуска при каждой фиксации в ветке master репозитория git и для загрузки новейшей версии вашего приложения на серверы Cosmic.
Мы настроим наш Bitbucket Pipeline следующим образом:
image: codogo/pipelines-universal:latestpipelines: branches: master: - step: script: - yarn install - yarn run lint - yarn run build - ./uploadNewExtension.sh
Где uploadNewExtension.sh содержит:
#!/bin/bash# $BUCKET_SLUG, $READ_KEY, and $WRITE_KEY are environment variablesEXTENSION_NAME="${EXTENSION_NAME:-Amazon Product Search}"echo "geting previous version extension id..." PREVIOUS_EXTENSION_ID="$( curl --progress-bar "https://api.cosmicjs.com/v1/extensions-2?hide_metafields=true&read_key=foo" | jq -r ".bucket.extensions | map(select(.title == \"$EXTENSION_NAME\" )) | .[0].id" )" # jq is a neat little program for extracting data from json, it is available here: https://jqplay.org/if [ "$PREVIOUS_EXTENSION_ID" == "null" ] ; then echo "There is no '$EXTENSION_NAME' extension on cosmic to delete" else echo "Found id for '$EXTENSION_NAME': $PREVIOUS_EXTENSION_ID" echo "deleting old extension..." curl --progress-bar -X DELETE "https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions/$PREVIOUS_EXTENSION_ID" -d "{\"write_key\":\"$WRITE_KEY\"}" -H "Content-type: application/json" > /dev/null fiecho "upload new version of extension..." curl --progress-bar --url "https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions" --header "content-type: multipart/form-data" --form "write_key=$WRITE_KEY" --form "zip=@./build.zip" > /dev/null
Этот скрипт удалит все ранее загруженные версии нашего расширения, затем возьмет наше заархивированное расширение и загрузит его в нашу корзину.
Резюме
В этом руководстве мы познакомились с тем, как Cosmic JS размещает и интегрируется с вашим расширением, а также объяснили, как загрузить ваше расширение с помощью непрерывной интеграции Bitbucket. Если вы что-то узнали, поделитесь этой статьей!
Если вы делаете расширение или что-то еще, с Cosmic JS, свяжитесь с нашим Slack или Twitter, мы будем рады видеть, что вы делаете.
Этот пост был написан Codogo, отмеченным наградами цифровым агентством, стремящимся создавать потрясающие цифровые впечатления.
Эта статья изначально была опубликована в Блоге Cosmic JS.
Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!
