10分钟开发一款"一键二次元化"AI小程序-阿里云开发者社区

开发者社区> 云开发平台> 正文
登录阅读全文

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

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

1. 创建人像卡通化应用


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

image


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


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

FA282499-4AEF-4904-AF2B-17C03878C15D.png

  1. 填写基础应用信息。确保选择所属的产品region在上海区域。86D93C22-8EF1-4BFA-9FB3-CA5B1393114C.png

E4B27782-7702-48D7-95DA-128574EEE971.png

  1. 开通云服务。查看应用依赖的云服务的开通情况,未开通的服务右键点击立即开通,在新标签打开所有服务开通页,根据提示开通。开通后应用卡片环境管理后面的小图标会变成绿色的已开通对勾形状,完成应用的创建。

截屏2021-01-05 下午4.11.56.png


  1. 云服务资源访问授权。如果您还没有登录过进行过授权,需要您点击一下云开发平台页面左下角的授权图标,进行授权提醒:应用上线后会直接调用相关的云服务,开始按量计费,如果不需要保留相关的应用,请在活动结束后及时下线应用!


2. 应用配置

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

  1. 登录Ram控制台(https://ram.console.aliyun.com/users)选择创建用户 ,选择编程访问

7250FA08-0DA4-41D7-9640-D1D2D5A1AAC6.png

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

FE2AFDD9-6B4B-457B-9137-6D29D0252321.png

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

50FE6148-CF97-4626-AD3D-E37C415888D1.png


在左侧列表里找到并双击添加 AliyunOSSFullAccessAliyunVIAPIFullAccess 权限

B993839F-29FD-4CB0-B29D-3F3E97E14710.png

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

917DEB4C-C3F2-4974-8FED-A24989A4AB7C.png


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

截屏2021-01-05 下午4.51.15.png

3. 后端服务开发部署

  1. 点击 开发部署打卡线上CloudIDE,等待加载完成出现开发界面。
    0BC6A568-25E0-4086-81CE-26E2CEA46888.png
  2. 点击CloudIDE左侧第一个Tab调出部署插件,点击下方的部署按钮进行一键部署。部署完成后生成一个免费的临时域名,记录下该临时域名,后面会用到。

609A1427-BA22-4122-B35D-A9B17E7BA737.png

部署完成后访问临时域名,如果出现如下界面,说明部署成功,记录该临时域名。

6BD30039-1F36-400B-9DD1-F0DA8666F0A4.png

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

image.png

4. 小程序前端开发


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

截屏2021-01-05 下午5.11.02.png

在Codeup页面上克隆下载代码压缩包到本地,在本机进行解压缩,后面会用到。

653305F1-15C6-404D-9101-7AC6E40407AB.png


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


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

358E68C4-44A9-428E-80FD-43CF1A077761.png

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

8F8762AF-3C0A-41B0-982B-C21B87456180.png

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

截屏2021-01-05 下午5.25.29的副本.png

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

image.png  image.png 


7. 手机预览和调试(高阶步骤可以不做)

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

b. 在支付宝开放平台输入小程序名点击创建,创建完成后自动跳转到小程序详情页面,按照下图依次点击,添加后端服务白名单,在弹出框里输入云开发平台生成的后端服务域名,添加成功后回到小程序IDE界面。5B46528C-68C3-43CD-859C-093A27864274.png

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

4B500A23-6326-4A71-A4B1-179D7C59F0D0.png

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

image.png image.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云开发平台
使用钉钉扫一扫加入圈子
+ 订阅

云开发平台是面向开发者打造的一站式、全云端的开发平台,打开浏览器就可以开发、调试、上线,所测即所得,并结合无服务器的模式重新定义云原生时代的研发工作方法论。

官方博客
云开发平台官网