10分钟开发一款"一键二次元化"AI小程序

1. 创建人像卡通化应用

登录云开发平台。通过以下链接 https://workbench.aliyun.com/application 登录 阿里云-云开发平台 ，使用您自己的阿里云账号登录。如果还没有阿里云账号，请进行注册或者使用支付宝等账号进行登录。

2、打开应用列表 https://workbench.aliyun.com/application，如之前未使用过该开发平台，首次使用需要创建自己的团队。这时候填写自己的团队名以及选择规模即可，然后同意云开发平台协议即可进入应用列表界面。

创建应用。点击应用列表界面上的“创建应用”，开发语言先选择“Java”，然后在计算服务中选择“FC” 应用的小程序人像卡通化的示例模板，如图所示。点击“下一步”后输入应用的名称和介绍完成创建。

创建应用。点击应用列表界面上的“创建应用”，开发语言先选择“Java”，然后在计算服务中选择“FC” 应用的小程序人像卡通化的示例模板，如图所示。点击“下一步”后输入应用的名称和介绍完成创建。

填写基础应用信息。确保选择所属的产品region在上海区域。

记录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桶名称，点击确定，配置完成。

3. 后端服务开发部署

点击 开发部署，打卡线上CloudIDE，等待加载完成出现开发界面。
点击CloudIDE左侧第一个Tab调出部署插件，点击下方的部署按钮进行一键部署。部署完成后生成一个免费的临时域名，记录下该临时域名，后面会用到。
Tips：域名失效后可以获取重新获取免费域名。免费域名只有30分钟有效时间。如果在小程序开发过程中超过30分钟，请点击应用卡片图标查看应用信息，在绑定域名下方点击刷新重新获取一个免费域名。

4. 小程序前端开发

克隆代码到本地。在应用卡片界面，我们可以看到两个代码仓库，一个是后端代码（也就是Cloud IDE里面的），另一个是前端代码，点击应用卡片上的前端仓库地址，出现完整的代码仓库配置，点击代码仓库链接进入Codeup页面，需要通过 git 将前端代码克隆本地进行调试。

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

阿里云高校计划，陪伴两千多所高校在校生云上实践、云上成长。在这里你可以领用免费的cpu资源，还可以参加免费训练营，实践提高：https://developer.aliyun.com/adc/student/