Shopify Опыт разработки плагинов

Node.js

предисловие

    В связи с потребностями компании разработаныShopifyПлагин приложения записывает его сам. Кратко представитьShopify, это канадский разработчик программного обеспечения для электронной коммерции, основанный Тобиасом Люком со штаб-квартирой в Оттаве, столице Канады, который предоставляет сервисное программное обеспечение.ShopifyЯвляетсяSaaSСистема корзины покупок в этой области подходит для трансграничной электронной коммерции для создания независимой станции Пользователи могут заплатить определенную плату за создание собственного интернет-магазина с использованием различных тем / шаблонов.

     Поскольку документы на официальном сайте за границей тоже на английском языке, это кажется немного сложным (Маленькие школьники ограниченно владеют английским языком 🤣🤣). Но после этого должен быть китайский.Сейчас на многих страницах китайский.

Вилка должна быть рекомендована для официальныхReactизnext.jsФреймворки рендеринга на стороне сервера иnode.jsИспользовать в качестве внутреннего языкаGraphQLразработка. как никогда не связывалсяGraphQLЯ быстро добавил волну знаний. Позже я споткнулся на всем пути и, наконец, теперь я понимаю общую идею. В конце концов, я все еще используюnodeВ качестве основной программы входа убедитесь, что подключаемый модуль приложения получает соответствующиеaccess_tokenи адрес магазина. какие еще запросыShopifyинтерфейс не работаетGraphQLвместо этого используетсяResfulApiПусть работают серверные рабочие, а затем я запрашиваю внутренний интерфейс для выполнения ряда операций. (Ознакомившись с ним в конце, все проверки оставлены для внутренних операций, и я могу использовать различные фреймворки на внешнем интерфейсе вместо того, чтобы просто использоватьnext.js).

Зарегистрируйтесь для получения предварительных условий разработки

  1. СоздайтеShopifyучетная запись разработчика
    Как показано вdevelopers.shopify.com/Аккаунт, связанный с регистрацией веб-сайта.
  2. в связанныхpartnersНа странице создается магазин (для последующей разработки приложения) и приложение
    1. При создании приложений есть пользовательские приложения и общедоступные приложения, как показано на рисунке:
      Как правило, я считаю, что все мы создаем общедоступные приложения, и приложения, которые я разработал до сих пор, также относятся к общедоступным типам.URLи соответствующие редиректыURLЭто должно быть написано, потому что я не зарегистрировал доменное имя или что-то еще, поэтому я использовал его в это время.ngrokПроникновение в интранет также используется при официальном внедрении разработки. Здесь мы заполняемURLбудем использовать с вамиngrokВыставленный адрес соответствует, но используйтеnodeизkoaВо фреймворке есть специальное промежуточное ПО, которое также используется официально, после доменного имени добавляются адреса редиректа.shopify/authНапример: URL-адрес:https://30aca829.ngrok.io, URL-адрес перенаправления:https://30aca829.ngrok.io/shopify/auth/(Компьютер перезагружается и снова выставляется, этот адрес нужно заполнить заново, а потомkoaПромежуточное ПО перейдет кhttps://30aca829.ngrok.io/shopify/auth/Выполните соответствующие операции проверки. (Это у черного входа). Код загрузится в последовательности, и потом мы его не будем использоватьkoaВ качестве адреса входа вы можете заполнить все, что хотите.)
    2. Создание завершено (очень важно получить соответствующий ключ!! Очень важно!! Как разработчику прочитать данные и запросить официальнуюapiиспользовать)
      Эти шаги являются почти предпосылкой.После успешной регистрации заполните ее, а затем последует ряд операций с кодом.

Написание программ среды разработки

  1. Создайте каталог проекта (пример-приложение) и используйтеnpmИнициализировать каталог проекта

    npm init -y

  2. Установить связанные зависимости

    npm install --save react react-dom next

  3. потому что он используетnext.jsПоэтому, если вы не знакомы с ним, вам нужно посмотреть официальную документацию.nextjs.frontendx.cn/

    Создать файлpagesи создайте новый нижеindex.js

    const Index = () => (
  <div>
    <p>Sample app using React and Next.js</p>
  </div>
);

export default Index;

    Добавить связанную команду запуска, чтобы открытьpackage.jsonдобавление файла

    {
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

    Запустите среду разработки

    npm run dev

    Здесь следует создатьnext.jsпроект, а затем пристыковался кShopify

  4. использоватьngrokразоблачить себя3000порт, потому чтоnext.jsПо умолчанию для запуска3000порт

    ngrok http 3000

    Затем добавьте его в настройки созданного вами приложения.对应的url(придется использоватьhttps) просто заполните вышеurl

  5. использоватьnodeизkoaдля отображения страницы

    1. Создайтеenvфайл переменной среды и запись в приложение, созданное вышеKEY

      SHOPIFY_API_KEY='YOUR API KEY FROM SHOPIFY PARTNERS DASHBOARD'
SHOPIFY_API_SECRET_KEY='YOUR API SECRET KEY FROM SHOPIFY PARTNERS DASHBOARD'

    2. Связанные с установкойShopifyпроверкаkoaпромежуточное ПО

      npm install --save koa @shopify/koa-shopify-auth dotenv koa-session isomorphic-fetch

    3. Создайтеserver.jsНапишите соответствующий проверочный код

      require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');

dotenv.config();
// graphql的相关中间件
const { default: graphQLProxy } = require('@shopify/koa-shopify-graphql-proxy'); 
const { ApiVersion } = require('@shopify/koa-shopify-graphql-proxy');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env; // 环境变量里读取 api-key与api-secret-key
app.prepare().then(() => {
  const server = new Koa();
  server.use(session(server));
  server.keys = [SHOPIFY_API_SECRET_KEY];

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY, 
      scopes: ['read_products', 'write_products'], //填写相关应用api相关请求的权限
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session; // 通过session拿取相关商店地址以及请求api需要的accessToken
        ctx.cookies.set('shopOrigin', shop, { httpOnly: false }); 
        ctx.redirect('/'); // 重定向到index首页
      },
    }),
  );

  server.use(verifyRequest());
  server.use(async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    return
  });
  server.use(graphQLProxy({version: ApiVersion.October19})) // 这里填写相关api的版本

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`); // 监听端口
  });
});

    4. Исправлятьpackage.jsonфайл с помощью нашегоserver.jsначать проект

      {
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "start": "NODE_ENV=production node server.js",
    "build": "next build",
  }
}

      Теперь запускаем проект и используемngrokОткрытое доменное имя можно увидеть

      Вот доменное имяshopЗаполните адрес нашего магазина, например, мой собственный:

      https://e44132cd.ngrok.io/auth/inline?shop=jetbn.myshopify.com

      После того, как все заполненоenterСтраница автоматически перескакивает.

      Отобразилась последняя страница:

Попробуйте другие фреймворки

     используется до и послеReactизnext.jsЯ разработал два или три приложения. Я чувствую, что это слишком хлопотно для разработки. Ему всегда нужно проникать в интранет, а отображаемые страницы всеShopifyНа собственной платформе, и до сих пор очень медленно реагируют после разработки и написания кода. По этой причине я начал метаться и искать другие решения, чтобы посмотреть, смогу ли я перейти к нему после того, как сам его разработал, и пусть проверкаShopifyСерия операций для нашего внутреннего брата. В конце концов, мой выбор внешнего интерфейсаVueИ верификация ставится на бекенд, чтобы я как обычно развивалсяVueпункт такой же.

Ниже представлен мой чистый интерфейсShopifyОперация проверки используетvue. (Предпосылка заключается в том, что интранет проникает в элементы, но это не требуется для разработки)

  1. Добавить маршрут установки приложения

     {
    path: '/shopify/install',
    beforeEnter(to, _from, next) {
      if (to.query.shop) {  //要在域名后添加开发的商店地址
          const shop = to.query.shop,
          scopes = 'read_orders,read_products,write_products', // api权限
          // 重定向地址就是在创建应用的时候填写的第二个（重定向URL可以自己随意写了），我这里是域名加/shopify/auth
          redirect_uri = 'https://' + process.env.VUE_APP_ROOT_URL + '/shopify/auth', 
          // 拼接安装应用地址需要SHOPIFY_API_KEY我填写在我的.env文件中了
          install_url =
                'http://' + shop + '/admin/oauth/authorize?client_id=' +
                process.env.VUE_APP_SHOPIFY_API_KEY +
                '&scope=' + scopes + '&redirect_uri=' + redirect_uri
        // 本地跳转安装地址
        window.location = install_url
      } else {
        next({ path: '/error' })
      }
    }
  },

  2. Маршрут проверки перенаправления

      {
    path: '/shopify/auth',
    beforeEnter(to, _from, next) {
    // 通过回调的url获取相关的参数
      const shop = to.query.shop,
        hmac = to.query.hmac,
        code = to.query.code
    // 使用SHOPIFY_API_SECRET_KEY验证 并且之后拿取access_token（这步没写）
      if (shop && hmac && code) {
        const map = Object.assign({}, to.query)
        delete map['signature']
        delete map['hmac']
        const message = querystring.stringify(map)
        const encrypted =
          crypto.createHmac('sha256', process.env.VUE_APP_SHOPIFY_API_SECRET_KEY)
                .update(message)
                .digest('hex')
        // const providedHmac =  Buffer.from(hmac, 'utf-8')
        // const generatedHash = Buffer.from(encrypted, 'utf-8')

        let hashEquals = false

        try {
          // later: Auth fails with `crypto.timingSafeEqual`
          // hashEquals = crypto.timingSafeEqual(generatedHash, providedHmac)
          hashEquals = hmac === encrypted
        } catch (e) {
          hashEquals = false
        }

        if (!hashEquals) {
          next({ path: '/error' })
        } else {
          next('/')
        }
      } else {
        next({ path: '/error' })
      }
    }
  }

    VueЭта родственная схема проверки также взята изGithubРыбачил выше, специально записал. Забыли конкретный адрес, можете сами поискать, если нужно. 🤣

Суммировать

    经过一段时间的熟悉，自己也算又掌握一项新东西了。 НачалоShopifyРазработка приложений для плагинов - это действительно огромная яма.Хотя есть процессы официальной документации, они все на английском и основная конструкция всяapiвсе используютGraphQLПотом я сам перепробовал всякие операции таймаута, и забросил до окончания запроса.ResfulApi. Затем я столкнулся с проблемой и не смог найти ее в этой книге.Я думал, что это слишком сложно для меня, поэтому мне пришлось стиснуть зубы и найти ее в официальной документации.В конце концов, это были взлеты и падения и, наконец, я знаком с этим.

     После этого я обнаружил, что уровень английского слишком важен. Хотя основное содержание документов разработки можно понять, все они сомнительны, а потом переведены. (различные неточности), а потом начинайте заполнять на английском языке. 🤞

     Напоследок ставлю несколькоShopifyЧасто используемые адреса официальных документов для разработки:

    Партнеры Shopify (создание приложения просмотра приложения):vue-composition-api-rfc.netlify.com

    Shopify Developers (официальная документация по разработке):developers.shopify.com(создать справочную документацию)

    Shopify Polaris (официальная структура пользовательского интерфейса):developers.shopify.com

Категории