初学者尝试用Laravel开发Shopify应用 | 文件创建

2 年 ago
韵, 科
2 minutes

首先

因为正在从事Shopify业务，所以我是MomoNa，每天都在学习中度过。
由于才开始学习Shopify两周，还有很多不懂的地方，但我打算总结我作为一个初学者学到的知识。
如果有错误或误解之处，请指正。

本次我们将介绍使用Laravel开发Shopify应用的文件创建(fileCreate)。

行动环境

Catalina 是苹果操作系统的一个版本；PHP 版本是 7.4.27；Laravel 框架版本是 8.76.2。

环境建立

由于其他人已经详细整理了有关Shopify注册方法等的内容，我将省略这部分。您可以在官方网站上确认流程。

 

在Laravel开发中，我参考了以下网站。

 

在几乎找不到使用Laravel整理信息的人中，这非常有帮助。谢谢你。

如果您计划进行环境构建，建议您在网站上参考并进行**应用程序创建**，这样可以更容易理解步骤。

如果是在应用程序安装后的情况下。

由於需要更改應用程式的權限和確認存取權杖，建議從應用程式商店中將應用程式刪除一次。
即使在應用程式商店中刪除了該應用程式，您不用擔心，由合作夥伴所創建的應用程式仍然存在。

公式参考指南

关于文件创建，以下网站是官方内容。

 

这次我们将参考官方参考资料来进行描述的进展。

授予权限

首先，我们要设置可以创建file的权限。
位置在AuthorizeController的scopes中。

$scopes = 'read_products,write_products,read_script_tags,write_script_tags';

读取 → 読取
写入 → 書寫

只需一种选项，原文为: “今回必要な権限は公式リファレンスのfileCreateを見ると一番上に載っています。”

中文释义：需要的权限可以在官方参考文件的fileCreate部分中的第一个上面找到。

Paraphrase：所需权限可在官方参考文件的fileCreate部分的顶部找到。

スクリーンショット 2021-12-27 17.35.22.png

需要write_files。
在上述的scopes范围中添加write_files。

添加权限后，通过/authorize进行应用程序安装。

变异·查询

顺便提一下，在”fileCreate”旁边的”mutation”可以理解为一种属性。
还有一个叫做”query”的东西，分别简单解释一下

突变→可以更改（创建、更新、删除等）Shopify内的信息.
查询→输出并确认Shopify内的信息.

我对这种情况的解释是，当使用fileCreate时，请在mutation中进行描述。

GraphQL管理API

在这里谈一下API方面的事情。
这次的fileCreate也是属于GraphQL的API。

当在使用 Shopify 的信息时，GraphQL 是用于 API 的工具。虽然还有另一种 API 为 REST Admin API，但 Shopify 显然更倾向于 GraphQL。

尽管描述方法类似于PHP，但我仍然不太理解。

公式的Shopify博客中也有关于GraphQL的解释，我只是参考了一下。

 

GraphQL 应用程序

您也可以通过以下URL将GraphQL应用程序安装到商店端。

 

スクリーンショット 2021-12-28 11.49.17.png

在商店URL中，填写要安装应用程序的商店URL。
下面列出的Admin API和Storefront API是选择授予哪种权限的地方。

然而，这个应用没有所需文件权限……。所以，请尝试使用它来确认内容和产品等的描述。我认为最好还是在商店应用管理中进行确认并安装。

因为对GraphQL的写法等方面都没有完全理解，所以希望即使在fileCreate这种情况下也能直接写下来进行确认，我进行了各种调查。

在那里发现的是一个名为postman的网站。
我在这里进行GraphQL的描述确认。

邮递员

 

这个网站需要注册账号，不过你可以使用Google账号来注册，非常简单。

如果成功注册了账户，就打开主页。

尽管我在用英语写了很多东西，但首先要点击位于”Start with something new”框内的”Create New”。

スクリーンショット 2021-12-28 12.22.16.png

此处虽然有各种写着的内容，但是因为可以不选择而继续前进，所以我先点击右上角的叉号按钮关闭。

スクリーンショット 2021-12-28 12.29.00.png

点击下一个按钮

スクリーンショット 2021-12-28 12.30.28.png

如果能够打开到这个程度，就可以参考下面的网站继续进行。

スクリーンショット 2021-12-28 12.35.14.png

 

非常易懂和有幫助的發佈，非常感謝。

當設定完成後，我們來撰寫實際的程式碼吧。

编码编写

在公式的文件创建文件中，您可以找到下面的代码示例。

//Mutation
mutation fileCreate($files: [FileCreateInput!]!) {
  fileCreate(files: $files) {
    files {
      # File fields
    }
    userErrors {
      field
      message
    }
  }
}

//Variables
{
  "files": {
    "alt": "",
    "contentType": "",
    "originalSource": ""
  }
}

这个部分，我在描述的方式上不知道如何继续。

我认为只有在示例代码的编写方式中明确区分了Mutation和Variables的项目中，这种方式才适用，所以我认为它在这次的Laravel开发中可能不太适用。
是否有方法可以使用这种编码方式在Laravel上运行呢……
如果有，请告诉我。

正确的陈述。

由于各种困惑，我先给出正确的描述。

public function file()
{
$file_create = Http::withHeaders([
            'X-Shopify-Access-Token' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***'
        ])
            ->accept('application/graphql')
            ->post('https://yourshop.myshopify.com/admin/api/2021-10/graphql.json', [
                'query' => <<<Query

                mutation {
                    fileCreate(
                    files: {
                        alt: "test",
                        contentType: FILE,
                        originalSource: "https://code.jquery.com/jquery-3.6.0.min.js"
                    }) {
                    files {
                        alt
                        createdAt
                        fileStatus
                    }
                    userErrors {
                        field
                        message
                    }
                    }
                }

        
        
                Query
            ]);

return view ('/file');
    }

路由器设置

Route::get('/file', 'App\Http\Controllers\AuthorizeController@file');

制作刀之过程

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>file-create 完了</h2>
</body>
</html>

一直走到正确的答案。

因为不知道如何描述，所以向前辈寻求了帮助。

$file_create = Http::withHeaders([
            'X-Shopify-Access-Token' => '***ACCESS-TOKEN-FOR-THIRD-PARTY-APP***'
        ])
            ->accept('application/graphql')
            ->post('https://yourshop.myshopify.com/admin/api/2021-10/graphtql.json', [
                'query' => <<<Query

        ///GraphQL記述
        
                Query
            ]);

我在这里考虑了什么，把query部分全部改成了mutation。
我想query是用来输出和写入的，所以改成了mutation呢……。

我用了一段时间这段代码，所以遇到了一连串的错误。当然嘛。

GraphQL的描述

我一直想独立完成GraphQL的编写工作，但是由于之前的代码问题，我无论如何都无法使其正常运行。

所以，我再次受到前辈的照顾。

mutation {
	fileCreate(
    files: {
      alt: "test",
      contentType: FILE,
      originalSource: "test.js"
    }) {
    files {
      alt
      createdAt
      fileStatus
    }
    userErrors {
      field
      message
    }
  }
}

根据fileCreate公式参考文档的描述，我现在对将Mutation和Variables合并成一个描述有一点了解。

在“test.js”这部分发生了错误。
由于需要通过URL进行描述，因此无法直接插入数据。（无法指定为〇〇.jpg）

在尝试了各种方法后，发现在合作伙伴页面的设定＞文件处直接上传文件，可以通过该链接使用fileCreate。

スクリーンショット 2021-12-27 18.46.55.png

我已经使用了Jquery文件，原始链接为”https://code.jquery.com/jquery-3.6.0.min.js”。

我终于解决了Mutation错误派对的描述问题，因为在这一点我还遇到了错误。

文件创建已完成

顺便一提，如果能够正确地创建文件，您可以在上述包含名为000012 JPG的照片的位置中找到新的文件。

最终/最后

迷失在迷失中，最后发现是写错了。
GraphQL的写法参考资料只有官方文档，这次真的很困难。
非常感谢前辈的帮助。

因为我还没有完全理解GraphQL的语法，所以需要重新复习。
总体上，我认为我能理解其流程，希望对那些遇到问题的人有所帮助。

✖
广告
将在 10 秒后关闭
bannerAds