在阿里云云開發平臺使用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文件瀏覽器直傳方案