开发者学堂课程【低代码认证-第三章:行程卡相关课程:3.2 行程卡识别应用实践(二)】学习笔记与课程紧密联系,让用户快速学习知识
课程地址:https://developer.aliyun.com/learning/course/1009/detail/15062
3.2 行程卡识别应用实践(二)
三、行程卡识别的 Fass 连接器表单页面的流程梳理
我们会在表单当中配置行程卡识别连接器数据源。
在数据面板当中添加一个连接器数据源。然后去选择到我们的这个相关的行程卡的一个连接器,配置执行动作。配置完成之后我们在行程卡的这个截图上传组件当中,去绑定上传动作。
绑定完成之后,我们在弹出的这个面板当中。去调用我们刚才配置的连接器数据并书写逻辑。这就是我们整个页面数据调用流程。下面我们进行实操演练。
首先来看一下效果显示,在这个应用当中,我们创建了一个通信行程卡的信息登记表单,表单包含行程卡截图上传,图片上传组件,下方验证结果,这一个分组。这里面我们的这些内容都是打我们这个上传一张图片之后,它可以自动地去填写到这里面去的。现在我们来上传一张无效的行程卡时,上传成功后它就会弹窗提醒我们就是无效的行程卡,请重新上传使用今天的行程卡。
现在再来上传一张有效的行程卡。上传成功后看下方的这个分组分组内展示,包括更新的时间,停产的状态,是否有风险等等这些信息,这个时候返回的这些信息,在当前页面展示的实现。
这个功能是上传一张图片,然后识别图片里面的内容,返回文字,所以需要识别图片内容的接口,这里使用的是阿里云的通用文字识别接口。下面我们来打开阿里云。登录成功之后,可以在这边去搜索一个产品。去找到云市场。这里我们是已经购买了通用文字识别的这个服务,然后在我们的就从已购买的服务当中可以去获得我们的 Appcode 。
这个后续我们会用到我们的 Appcode 的。如何去进行一个购买,我们就可以来到这个阿里云的首页。在首页当中我们可以去搜索,在这里我们去搜索我们的通用文字识别,这里我已经做好了,我们点击它然后这个就是我们会用到的这里可以通过0.01元去进行一个购买,打开。然后用作我们这个识别的一个使用,大家也可以进行一个购买,购买完成之后就可以在以购买服务当中,去找到我们所需的 APP code 。我们来看一下这个接口,往下滑动它是有一个这个 API 接口,然后他的请求方式是 post 请求,他返回的类型是 JSON 类型。这个 API 调用的就是我们刚才所说的去哪里去找到我们 APP code ,还有他的一个信息认证等等。
下面就是他的一个请求的参数。下方的这个 body 。这就是我们请求参数所需要的格式,它是一个 JSON 的一个格式。然后后续我们会进行一个使用,然后再看一下下方的请求,示例我们来讲解我们的 java 实例,
因为在云 id 开发当中,我们使用 Java 来去进行讲解。可以看到这里是有一些它的一个相关的一个示例代码的一个书写,我们这里需要去更改的是我们这个
Appcode 更改成自己的。还有就是我们的 bodys 。 bodys 我们需要去先将它转换成一个 JSON 的格式然后放在里面,需要去更改的。如果调用成功的话,下方就是它一个正常的一个返回示例。包括说它的一个版本角度,它的一个文字的一个内容。 word 里就是一个内容,里面包括2017,它返回的只有2017,还有它的一个图片的这个位置等等。
失败的返回示例,包括这个400的错误代码,401等等,下面我们就通过一个简易的行程卡识别实践,来学会 Fass 连接器配置,为复杂的行程卡识别应用实践打下基础。我们返回到我们的钉钉宜搭当中。在这里去找到平台管理。然后进入到连接器工厂当中。我们去创建一个连接器。这里我们选 Fass 连接器,然后去给它命名。这边我们命名为简易行程卡。然后点击确定。
现在就到了这个连接器的基本信息页面。我们可以去上传图标或者是去书写我们连接器的介绍,当然这里不是必填的,我们直接点击下一步。进入到操作室里面,我们去给这个操作起一个名称。我们起名为简易行程卡识别。然后下方可以看到,这里可以定义 request body ,也就是可以传递给后端的数据,这就需要将我们这个上传图片的链接给到后端,然后进行一个处理。
所以写入 json 格式,并且上传一个参数。我们这里起一个这个参数是 tourcodeurl 。
后续根据我们上传的图片进行传入链接。所以说我在表单的动作面板当中去调用这个连接器去书写里面的 body ,所以在这里我们只是预测了这个 body 传递的这个参数。
1 {
2“tourCodeUrl”:””
3 }
预设完成之后我们来解析这个 body 。我们知道它是一个图片链接,在钉钉宜搭上传的图片都是需要登录才可以看到的,但是通用文字识别的这个接口是需要可以直接访问的图片链接,所以在这里需要将我们的这个字段类型先设置成图片的组件。
然后设置必填。在属性配置里将它的数据转换改成获取临时可访问的图片链接。然后点击确定,这个可以保证图片会转化为一分钟内可以直接访问图片链接,后端可以接收到我们的图片进行处理。这里设置完成之后,可以看一下下方的response body。可以去预设后端返回的数据格式,同样的是以json的格式贴入进去进行解析。我们这边不需要,所以我们不去进行一个配置。现在就全部配置完成我们点击保存。保存后会出现前往原 ID 开发的按钮,我们点击这个按钮。它就会进行与云资源的校验。
完成后会打开一个标签页。浏览器对于新开的页面有可能会有拦截。我们可以再次点击一下直接打开拦截的链接,进入到我的id编辑页面当中。左侧就是 Id 的编辑页,我们要找到的并且要写代码,就在这个 src 下面。
这里是自动提供了一个默认的类。可以直接书写需要的逻辑代码。这里的入口函数它有两个入参我们重点关注第一个入参。然后下班它是有 get 宜搭的 context 属性。这个属性里面有宜搭服务端的上下文。上面有两个变量,一个是 user ,一个是 corp . User id 是当前登录人的钉钉用户 id 。
Corp id 是企业 ID 。这个是调用 fass 连接器传的入参。
在这个 getinputs 进行取得。将多余的代码删掉,现在可以看到留下的只有4行代码。在这里可以去书写相关的一个逻辑代码。因为代码比较多,所以在这里可以先去创建一个 demo 一个方法。创建的是一个 json 格式。然后我们起名为 demo 。然后这里面我们可以定义她传入一个路径。
Private JSONObject demo(String URL)
回到阿里云通用文字识别的这个文档当中。下方我们去复制它的一个请求示例。
粘贴过来这里面需要更改我的 APP code 。然后我们的 APP code 可以找到我们之前购买服务当中的APP code将它复制过来。现在还有一些报错是因为没有导入对应的一些包,我们可以点击上方的这个快速修复。然后去 import 导入一下。这里我们导入的是阿帕奇的这个包。这个 httputill 我们可以直接引入,我们在这里是有提供这个的。你可以直接将它导入进来。
然后它这里面其实是没有这个第三个参数将它删除掉。现在再来看一下,上方这个报错是因为我们没有去设置我们 return 。我们在这边去 return 一下值。
这里我们可以在 return 之前先去定义一下。然后将它放进来看的是一个 json 格式,所以可以转换一下。
然后我们来看一下我们这个 bodys 。 bodys 我们是一个固定的,我们现在需要将我们的这个接口当中的 body 。
将它定义并且传入进去。可以看到这里是一个 json 的一个格式,所以我们在这边要先去定义一个 json 格式。这种方式去定义一个 Json object 。然后我们将它的名称改成 Json body 。
然后返回到我们的接口当中。将请求参数复制过来是一个典型的格式,我们需要让他处理一下。要通过不同的方法将我们这些内容去,不知道刚才创建的这个 object 里面。这里使用 json 。
然后将我以这种方式去复制到我们刚才创建的这个 Json body 里面,依次来去进行一个处理。
这里我们将识别结果中每一行的置信度更改为 true 。然后是我们是否需要重行返回功能我们也是更改为 tru e。下方是否需要分段功能改为需要。其他的都改为 first 。
现在就已经全部完成,这里的 ul 需要将它的这个图片完整的 ul 传入这里。最后需要去重新定义一下。
现在就可以调用这个方法,在这之前我们还需要去获取传来的图片链接,我们 getinput 是获取到的连接器的一个入参,么我们就可以在这里通过。 Input 点 get 然后去获取到连接器工厂里的入参。前面我们可以通过 string 的方式将他强转一下。
写完之后再 return ,这里就可以直出一个 demo , url ,现在我们就配置完成了,然后我们快捷保存一下。
我们找到 GIT ,在这里去取一个名称并且推送。这里是推送到了源端的仓库。点击 yes 。最后来进行线上的一个部署。在这里找到线上环境点击部署,点击继续部署。部署完成后就可以连接器数据源或者是集成自动化当中进行使用了。
我们钉钉宜搭当中去创建一个应用。在这里选择创建空白应用起名为简易行程卡。点击确定新建一个普通表单。这里可以命名它为行程卡表单。在这里我们需要的是一个图片上传组件。拖动过来然后我们用一个多行文本组件用来查看返回的这个数据。
在这个多行文本组件去进行一个展示。现在两个组件已经被传成了,我们现在需要去调用连接器工厂当中刚才创建的这个联系,所以我们在这里可以选择数据源。添加一个连接器数据源。这和远程数据源也是同样的。可以去给他起名称描述自动加载等等一些设置。我们在这边去给他起名。完成后我们来关闭它的自动加载。然后在这里去选择连接器。
刚才我们起名为简易行程卡。所以找到连接器。点击确定。选择执行动作。选完之后下方就有他执行的动作参数。这里就是我们刚才去定义的这个入参。下方是有它的一个数据处理,这里是默认已经去书写好了。点击保存。
现在我们是关闭了他的增加载的,我们是希望我的图片上传的时候可以去触发我们连接器,然后进行文字识别。现在我们就找到我们的图片上传在高集当中进行上传成功的动作设置点击确定。
这里要去调用连接器数据源。首先我们来看一下。我们的这个file,value 分别是哪些值?在这里我们去上传一张图片。
现在这个就是我们的 file 。所有的下方的这个 downloadurl 就是我们所需要的图片链接地址。获取出来。定义一个 tourCodeUrl 去接收 download url 。现在就获取了它的链接地址,接下来我们要去传入参数,所以我们先去定义这个参数。通过这样的方式现将我们这个参数转换成字符串格式。
这里我们可以这样书写,可以直接复制出来。然后这里面的这个预设,我就可以让他粘贴这里。接下来就可以调用并传入。这里的调用同样可以通过 this.datasourcemap 。然后这个是连接器数据源名称。 load 里面我们要传入的是它的一个参数,在这里面我们是要通过 inputs 这种方式进行一个传入。然后我们来定义它返回的 content 。可以直接将他通过一些方法复制到多行文本当中。
现在已经完成来保存预览。来看一下我们的简易行程卡实践。
可以看到这个成功之后,多行文本当中已经出现了行程卡当中相关内容的值。就证明了 fass 连接器成功了,并且已经执行了我们这个通用文字识别的这个口。
并且图片当中相关的文字结果返回到我们页面当中,这样一个简易的识别就已经完成了。
如果想要实现最开始看到的这个复杂的行程卡识别,我们可以扫码去获取到相关的后端代码,然后粘贴到我们的 fass 连接器当中。扫描的二维码可以在 ppt 当中直接获取。
包括行程卡识别 util 类和调用阿里云市场高精度 ocr api 示例。
来看一下行程卡识别系统实践的课程总结,通过对行程卡识别应用背景的了解和需求分析,确定系统所需要的业务逻辑,通过云开发平台编辑代码,使钉钉宜搭连接器更加贴合自身业务。
行程卡识别系统全流程回顾如下。首先我们会创建一个行程卡基础表单。然后去进行连接器的设计。在云 ID 开发平台上中去配置,最后返回到动作面板中进行调用。最后是我们的连接器调用的效果演示。
现在来做一下课后练习题, FaaS 自定义连接器可以在哪里进行调用?
A 数据源面板
B 连接器节点
C 服务回调
D .钉钉宜搭大屏。
答案是 AB 。