在阿里云云开发平台使用Imgcook，让你5分钟上线一个垃圾识别应用

咱们能够在阿里云云开发平台，使用 imgcook 智能生成一个垃圾识别应用，直接部署上线啦。先看效果：javascript

下面跟着咱们开始体验阿里云云开发平台联合Imgcook的魅力吧~~html

Quick Start

本示例演示了基于 ImgCook 智能生成页面的能力
本示例演示了基于 OSS 浏览器端文件直传的能力
本示例演示了基于 Python 语言开发调用阿里云视觉智能服务的能力

建立应用

登陆阿里云Serverless云开发平台，进入应用列表，点击「建立新应用」，选择「实验室」，勾选「AIoT」，在「解决方案」中，选择「智能生成页面智能识别图片方案」，点击下一步，按照提示完成应用的建立前端
应用建立完成后，等待代码仓库完成初始化，代码仓库初始化完成后，能够看到「开发部署」入口，点击打开 CloudIDEjava

下载测试用的 Sketch 设计稿

在打开 CloudIDE 的同时，下载本示例的垃圾分类设计稿.sketch 文件到您本地。 **json

打开 ImgCook 插件

在 CloudIDE 左侧文件列表空白处点鼠标右键，在右键菜单中选择「Open With imgcook studio」小程序

上传 Sketch 设计稿智能生成代码

在打开的 ImgCook 插件中，点击「导入」。后端

以后在弹出的界面，点击「选择一个文件」，把刚刚下载的垃圾分类设计稿.sketch 上传上去。api

Sketch设计稿上传完成后，选中刚上传的文件，点击「导出」，开始根据设计稿智能识别并生成页面代码。跨域

设计稿导出成功后，代码也就被智能生成出来了，在 ImgCook 的工做界面会展现出来由代码生成的可视化UI效果。浏览器

添加页面交互逻辑，绑定后端API

接下来咱们要作的是完成用户交互操做。首先，点击生成UI界面上的【+】图片，在右侧「高级属性」面板，将「id」属性值设置为 image。

接下来分别点击「名称」「类型」右侧的【…】，设置 id 为 name 和 category。

点击「选择图片」，在右边的事件中添加 onClick 事件。

点击「onClick」后，在弹出的输入框，输入如下代码做为处理函数

function onClick(e) {
function select(handler) {
  var input = document.createElement('input');
  input.type = 'file';
  input.onchange = function() {
    var files = Array.from(input.files);
    handler(null, files[0]);
  };
  input.click();
}
select((err, file) => {
  const filename = (new Date().getTime()) + '_' + file.name
  const freader = new FileReader();
  freader.readAsDataURL(file);
  freader.onload = () => {
    const img = document.getElementById('image');
    img.src = freader.result;
  };
  fetch('/policy', {
      method: 'post'
    })
    .then((res) => res.json())
    .then((policy) => {
      console.log(policy);
      const formData = new FormData();
      formData.append('Filename', filename);
      formData.append(
        'key',
        policy.dir + '/' + filename
      );
      formData.append('OSSAccessKeyId', policy.accessid);
      formData.append('policy', policy.policy);
      formData.append('Signature', policy.signature);
      formData.append('success_action_status', '200');
      formData.append('file', file);
      return fetch(policy.host, {
        method: 'post',
        body: formData
      }).then(() => policy);
    })
    .then((policy) => {
      const imageUrl = [policy.host, policy.dir, filename].join('/');
      return fetch(`/algo`, {
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        body: `imageUrl=${imageUrl}`
      });
    })
    .then((res) => res.json())
    .then(({ Data }) => {
      if (!Data) {
        alert('没法识别该图片');
        return;
      }
      const {
        Category,
        Rubbish
      } = Data.Elements[0];
      document.getElementById('name').innerText = Rubbish || '未识别';
      document.getElementById('category').innerText = Category || '未识别';
      console.log(data);
    });
});
}
复制代码

保存项目，导出代码

配置完成后，保存项目。接下来咱们要把配置好的页面导出成最终的代码。首先要把当前项目保存下来，点击「保存」，「所属团队」选择本身在云开发平台所在的团队，「所属项目」选择当前应用的名称，输入一个模块名称，而后点「建立」。

接下来选择要导出怎样的代码格式，好比，是小程序，仍是H5，这里咱们选择「H5 开发规范（动态）」，选择后，点击右边的「X」关闭选择面板。

如今咱们就要准备导出代码了，先在 CloudIDE 左侧文件列表建立一个文件夹「imgcook」，而后在 ImgCook 操做面板，点击「导出」，选择咱们刚刚建立好的「imgcook」文件加，点「肯定」导出代码。

代码导出成功后，打开 CloudIDE 左侧文件列表「imgcook」目录，能够看到经过 ImgCook 智能生成的代码。咱们点击打开「index.html」文件，修改一下它的标题，输入一个合适的内容，好比“垃圾分类扫码识别”。

添加环境变量，部署验证效果

至此，咱们经过 ImgCook 智能生成的代码都准备好了，如今离验证整个项目还差最后一步，咱们为此应用输入测试用的图片上传和图片智能识别的环境变量，复制如下代码。

AKID=LTAI4G1j3U8ue1yT3g6Tg1TG
AKSK=WB8Ev6zMHoKQnUSLp8V4zP7xeAgbWC
REGION=cn-shanghai
OSSBUCKET=wb-case-showroom
OSSDIR=photo
复制代码

在云开发平台应用列表，找到咱们建立的应用，在应用卡片上点击「应用配置」，点击「批量添加环境变量」，将上面复制的代码粘贴进来，保存便可。

如今咱们能够部署查看效果了，回到 CloudIDE，点击左侧「WB」插件，点击「部署」，等待部署完成。

点击平台分配的临时免费测试域名，就能够查看线上效果了。

在本身的业务中正式使用该方案的事项

开通服务

须要去这里开通阿里云视觉智能 viapi_imagerecog_public_cn/图像识别服务

打开此连接查看更多阿里云视觉智能开放能力 **

utils/oss_upload.py 中的 AKID、AKSK、OSSBUCKET、OSSDIR 须要替换为本身的 OSS 帐号相关变量，推荐建立子帐号进行受权，本示例中采用环境变量来配置这些敏感信息而不直接 hardcode 在代码中，参见下面「测试用环境变量」
algo.py 中的 AKID、AKSK 须要替换为本身的变量，该 AKSK 须要可以调用阿里云视觉智能图像识别服务，建议新建子帐号，对子帐号进行受权，受权策略以下：使用RAM Policy控制访问权限
因为图片是前端直传 OSS，OSS 须要打开跨域设置，设置过程参考这位同窗的分享：阿里云OSS设置跨域访问

使用安全的子帐号受权策略

不要用主帐号 AK/SK 信息在本身的应用里直接使用，能够建立一个子帐号，为它授予指定的 OSS Bucket 读写权限和阿里云视觉智能服务的访问权限。能够将如下受权策略直接复制过去便可。最后使用这个子帐号的 AK/SK 在应用中使用。

{
    "Version": "1",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "viapi-imageenhan:*",
            "Resource": "acs:viapi-imageenhan:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "viapi-imagerecog:*",
            "Resource": "acs:viapi-imagerecog:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "viapi-imageseg:*",
            "Resource": "acs:viapi-imageseg:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "viapi-imageaudit:*",
            "Resource": "acs:viapi-imageaudit:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "viapi-ocr:*",
            "Resource": "acs:viapi-ocr:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "viapi-facebody:*",
            "Resource": "acs:viapi-facebody:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "viapi-objectdet:*",
            "Resource": "acs:viapi-objectdet:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "viapi-goodstech:*",
            "Resource": "acs:viapi-goodstech:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": "oss:*",
            "Resource": [
                "acs:oss:*:*:wb-case-showroom",
                "acs:oss:*:*:wb-case-showroom/*"
            ]
        }
    ]
}
复制代码

环境变量替换成本身的真实内容

AKID=你本身的可控的AccessKeyID信息
AKSK=你本身的可控的AccessKeySecret信息
REGION=你的OSS所在的Region
OSSBUCKET=你的OSS Bucket
OSSDIR=你的OSS Bucket 里用来上传文件的目录
复制代码

更多上传的配置细节参见：OSS文件浏览器直传方案