阿里云趣味视觉AI训练营学习笔记Day 5

---

学习目标

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

---

学习内容

1. 创建人像卡通化应用
2. 应用配置
3. 后端服务开发部署
4. 小程序前端开发

---

前言

本场景基于云开发平台10分钟完成一个完整的AI小程序的开发，无需购买服务器进行小程序的开发和创新。通过AI小程序的开发实战，让大家可以快速利用现成的AI智能视觉和云开发的能力提高开发效率，在低代码的情况下也可以开发出有意思、可传播的应用。

---

一、创建人像卡通化应用

1.登录云开发平台
网址：https://workbench.aliyun.com/application

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

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

4.填写基础应用信息。确保选择所属的产品region在上海区域。
5.开通云服务。查看应用依赖的云服务的开通情况，未开通的服务右键点击立即开通，在新标签打开所有服务开通页，根据提示开通。开通后应用卡片环境管理后面的小图标会变成绿色的已开通对勾形状，完成应用的创建。

---

二、应用配置

由于要使用 OSS 和 阿里云视觉智能开放平台，要配置一下 OSS 和 AK(AccessKey ID)、SK(AccessKey Secret)
1.登录Ram控制台( https://ram.console.aliyun.com/users)选择创建用户 ，选择编程访问（这里需要手机验证码）

2.记录AK和SK的值。创建完成后复制 AccessKey ID 和 AccessKey Secret记录下来，后面要用到。

3.为用户添加权限。点击添加权限赋予刚才创建的用户存储OSS 和视觉智能平台权限。

在左侧列表里找到并双击添加 AliyunOSSFullAccess 和 AliyunVIAPIFullAccess 权限

4.创建OSS Bucket桶。进入Bucket列表https://oss.console.aliyun.com/bucket点击创建Bucket，弹出框弹出是否开通版本控制选择不开通。填写Bucket名称，区域要和应用的区域相同。创建完后把 Bucket名称 记下来，后面会用到。

5.回到云开发平台应用界面，找到刚才创建应用卡片，点击 应用配置出现具体的配置项，分别填入刚才创建用户的 AccessKey ID 和 AccessKey Secret，以及Bucket桶名称，点击确定，配置完成。

---

三、后端服务开发部署

1.点击 在线开发部署，打卡线上CloudIDE，等待加载完成出现开发界面。

2.点击CloudIDE左侧第一个Tab调出部署插件，点击下方的部署按钮进行一键部署。部署完成后生成一个免费的临时域名，记录下该临时域名，后面会用到。


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

---

四、小程序前端开发

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


2.安装小程序IDE客户端。点击链接在支付宝官网上下载小程序IDE的客户端并进行安装。
链接: https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html

3.打开前端代码项目。安装完成后启动小程序IDE客户端，找到前端代码解压缩后文件夹的路径打开项目。

4.开前端代码项目打开后找到appconfig.js文件，将develop 后面的网址改成上面后端服务应用部署成功后生成的免费域名。

5.在小程序IDE的右上角，选择一种机型重新编译一下即可, 点击AI小程序界面的开始就可以进行头像动漫化测试。

6.运行测试。点击小程序界面的下方开始进行试用。上传一张个人头像或者照片，进行动漫化处理。

---

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