达摩院特别版·趣味视觉AI训练营--Class5-10分钟开发一款“一键二次元化“AI小程序-CSDN博客

登录云开发平台。通过以下链接 https://workbench.aliyun.com/application 登录 阿里云-云开发平台 ，使用您自己的阿里云账号登录。如果还没有阿里云账号，请进行注册或者使用支付宝等账号进行登录。
打开应用列表 https://workbench.aliyun.com/application，如之前未使用过该开发平台，首次使用需要创建自己的团队。这时候填写自己的团队名以及选择规模即可，然后同意云开发平台协议即可进入应用列表界面。
创建应用。
填写基础应用信息。
云服务资源访问授权。

由于要使用 OSS 和阿里云视觉智能开放平台，要配置一下 OSS 和 AK(AccessKey ID)、SK(AccessKey Secret)

登录Ram控制台(https://ram.console.aliyun.com/users)选择创建用户 ，选择编程访问
记录AK和SK的值。创建完成后复制 AccessKey ID 和 AccessKey Secret记录下来，后面要用到
为用户添加权限。点击添加权限赋予刚才创建的用户存储OSS 和视觉智能平台权限。在左侧列表里找到并双击添加 AliyunOSSFullAccess 和 AliyunVIAPIFullAccess 权限
**创建OSS Bucket桶。**进入Bucket列表（https://oss.console.aliyun.com/bucket）点击创建Bucket，弹出框弹出是否开通版本控制选择不开通。填写Bucket名称，区域要和应用的区域相同。创建完后把 Bucket名称 记下来，后面会用到。
回到云开发平台应用界面，找到刚才创建应用卡片，点击 应用配置出现具体的配置项，分别填入刚才创建用户的 AccessKey ID 和 AccessKey Secret，以及Bucket桶名称，点击确定，配置完成。

由于要使用 OSS 和阿里云视觉智能开放平台，要配置一下 OSS 和 AK(AccessKey ID)、SK(AccessKey Secret)

在这里插入图片描述

点击 开发部署，打卡线上CloudIDE，等待加载完成出现开发界面。
点击CloudIDE左侧第一个Tab调出部署插件，点击下方的部署按钮进行一键部署。部署完成后生成一个免费的临时域名，记录下该临时域名，后面会用到。部署完成后访问临时域名，如果出现如下界面，说明部署成功，记录该临时域名。

Tips：域名失效后可以获取重新获取免费域名。免费域名只有30分钟有效时间。如果在小程序开发过程中超过30分钟，请点击应用卡片图标查看应用信息，在绑定域名下方点击刷新重新获取一个免费域名。

**克隆代码到本地。**在应用卡片界面，我们可以看到两个代码仓库，一个是后端代码（也就是Cloud IDE里面的），另一个是前端代码，点击应用卡片上的前端仓库地址，出现完整的代码仓库配置，点击代码仓库链接进入Codeup页面，需要通过 git 将前端代码克隆本地进行调试。在Codeup页面上克隆下载代码压缩包到本地，在本机进行解压缩，后面会用到。
**安装小程序IDE客户端。**点击链接在支付宝官网上下载小程序IDE的客户端并进行安装。https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html
**打开前端代码项目。安装完成后启动小程序IDE客户端，**找到前端代码解压缩后文件夹的路径打开项目。
开前端代码项目打开后找到appconfig.js文件，将develop 后面的网址改成上面后端服务应用部署成功后生成的免费域名。
在小程序IDE的右上角，选择一种机型重新编译一下即可, 点击AI小程序界面的开始就可以进行头像动漫化测试
**运行测试。**点击小程序界面的下方开始进行试用。上传一张个人头像或者照片，进行动漫化处理。
手机预览和调试（高阶步骤可以不做）

a. 在小程序IDE右上角，点击模拟器上方**真机调试或者预览-即可打包自动映射到当前登录用户支付宝客户端-界面加载卡通动漫画小程序，初次点击真机调试或者预览需要支付宝扫码授权登录。登录后提示账号还未创建小程序，点击从PC创建**。

b. 在支付宝开放平台输入小程序名点击创建，创建完成后自动跳转到小程序详情页面，按照下图依次点击，**添加**后端服务白名单，在弹出框里输入云开发平台生成的后端服务域名，添加成功后回到小程序IDE界面。

c. 回到小程序IDE的界面，已经自动绑定了小程序。再次点击**真机调试或者预览会出现下方弹窗，弹窗内点击进行编译并推送到手机**。

d. 保证手机支付宝在前台运行，小程序会自动显示在手机支付宝界面上。用户首次点击开始制作时会访问获取当前用户会员基础信息，点击允许后跳转到制作页面添加和上传图片。若是想更换当前图片文件即可点击右上方更换图标进行更新。

在这里插入图片描述