• 课程介绍
  • 学习目标
  • 课程详情
  • 这套教程我们会使用 react+redux 来实现 一个 AI 标注系统的案例.。在项目中,我们会使用 react-redux 这个库在 react 和 redux 之间建立连接。 我们预留了路由的代码,给大家一个让路由结合进来的思路。我们也会讲解我们的目录规范 和一个叫 ducks 的代码规范, 它是专门针对 redux 的,使用这套规范来写 redux 代码会让我们更好的管理 redux 的代码。
  • 能够更熟练使用 react 和 redux 的组合以及更多解决问题的思路和技巧;更加熟悉开发的流程和思路.除此之外我们还会使用到更多东西辅助我们的开发,望大家能够学习愉快。
  • 如今前端行业,众人沸腾追捧的热点,当属各类工程化开发的框架实践。

    这种现象也体现在当下众多招聘公司的面试要求中,使得前端开发者们不得不重视。因此,在今天之前,我们已经分别出了两套框架的视频教程:

    详见:http://2017.miaov.com


    React 和 Redux 都可以作为一个独立的库使用, 但是如何让它俩结合起来?许多人都很好奇,也非常渴望看到这类的教程,因此,本套课程正此目的而来。


    项目起源

    在 react 框架被众人追捧的大环境下,有一家提供物联网解决方案的科技公司,他们正在做一些人工智能相关的产品。这个产品诞生出一个需求:在他们产品的摄像头拍摄到画面时,他们需要让自己的机器人识别出画面中的物体。

    而机器人能够识别图像之前,你需要训练它,你需要给机器人足够多的图像采集样本。采集样本的方式,就需要一套定制的坐标点标注系统,所以他们找到我们,希望我们能给他们开发一套定制的标注系统。

    在这样一套系统中,前端要做的工作,就是在图像上做好标注,在任意图像中产生对应一系列点坐标的数据,这些点的数据就是数据样本。当前端把这些数据发送到后端服务器之后,后端服务器会利用这些数据去优化他们的识别算法,从而不断提高机器人识别图片物体的能力。产生数据样本就是我们前端要做的工作。

    给图像做标注涉及到非常多的状态管理和状态变化,而且还要管理好标注后产生的数据。 那利用到 redux 来做状态管理是再好不过了。所以在技术选型的时候我们使用了 react + redux。

    于是当我们开发完这套系统后,基于这套项目的前端实现,录制完成本套视频,用来讲解 react + redux 如何结合起来使用。期待这套来自于实战项目的视频教程,应用在理论实战教学中,会给大家带来帮助。

    本套视频教程的核心,讲的是标注系统前端部分最核心的内容,也就是跟标注相关的一系列数据交互、图形绘制、状态管理等内容。


    技术栈

    在这套教程中,我们会使用 react-redux 这个库在 react 和 redux 之间建立连接。

    react-router 和 react-router-redux,我们预留了路由的代码,虽然是一个单视图应用,并不涉及到路由切换,但我们出于教学目的,也会配置好路由的基础代码,给大家一个让路由结合进来的思路。

    我们还会讲解目录规范,这个项目案例是单视图应用,所以这是一个适用于单视图的目录规范。如果是多视图的应用,那么你也可以在这套目录规范的基础上进行改造即可。一套好的代码划分规范是项目开发的起点。

    除此之外,我们还会讲解关于一个叫 ducks 的代码规范,它是专门针对 redux 的,使用这套规范来写 redux 代码会让我们更好的管理 redux 的代码。

    当然,在调试方面,我们会借助 redux DevTools 这个插件监视状态的变化。方便我们做调试。

    既然是实战案例,讲的最多的就是代码应用上的技巧和思路。接下来,我们就一起进入到课程里面,进入到我们的学习当中去~


    视频目录

    1、课程介绍 >>免费试看
    2、项目介绍与学前基础 >>免费试看
    3、项目环境配置介绍 
    4、测试一下项目环境配置 
    5、项目基础代码 
    6、从新组织项目基础代码 
    7、准备静态结构 
    8、Konva 导学 1 
    9、Konva 导学 2
    10、Konva 导学 3 
    11、加载图片的 redux 代码 
    12、加载图片的实现
    13、点击缩略图切换图片
    14、点击左右按钮切换图片
    15、Redux DevTools
    16、初步绘制一张图片
    17、确定绘制图片的比例与位置
    18、重构拆分绘制图片的代码
    19、图层数据的管理逻辑
    20、第一次添加图层
    21、画几个点的 redux 代码
    22、画几个点的 action 发起
    23、把点映射到页面
    24、闭合一根线
    25、标注浮层
    26、标注浮层的位置
    27、让标注浮层可完成
    28、编辑浮层-让边界可 hover
    29、编辑浮层-让图层可选中
    30、编辑浮层-让浮层出现
    31、在标注浮层 undo
    32、删除一个浮层
    33、取消浮层编辑
    34、移动点-可移动点的提示
    35、移动点-点是怎么移动的
    36、移动点-限制范围
    37、移动点-已完成标注层的点可移动
    38、移动标注层-改变所有点的数据
    39、移动标注层-正确移动线
    40、(作业) 标注层移动后移动点的 bug
    41、绘制矩形-切换标注模式
    42、绘制矩形-画出一个矩形
    43、绘制矩形-调整矩形
    44、图层管理面板
    45、未完成的警告提示
    46、添加点的警告提示
    47、让矩形移动后点仍可编辑
    48、画布的放大缩小
    49、让标注层跟随画布缩放
    50、隔离不同图层组的缩放
    51-53、完善编辑完成操作
    54、(作业) undo 功能

     

    课程费用:

    活动价:¥199.00239.00      VIP价:¥168.00



    售前咨询:

    QQ:2852509866、2852509867、2852509868
    微信号:miaov-class
    TEL:010-57269690
    在线时间:周一至周五 9:30 - 18:00

    想要了解妙味课堂最新消息?长按二维码关注吧!

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

翟宏杰

主讲教师:翟宏杰

讲师介绍:全职讲师,妙味课堂《react最佳入门》、《redux 精品先导课程》、《webpack实用性基础教程》、《AI 训练系统:react+redux 实战视频教程》录制者 react 重度使用者,使用 react+react-router+redux 开发项目若干 知晓 react+react-router+redux 技术栈的开发流程 "妙味 React+redux 高阶实战项目周末班" 全职讲师 乐于传授实际开发经验、布道 react 项目开发技巧 对学员态度积极热忱、态度坚韧,擅长细致耐心的帮助学员彻底弄明白技术难点…

相关课程

  • React最佳入门

    ¥228.00
    当前热度:35363
  • React 移动端企业级数据交互实战

    ¥258.00
    当前热度:7801
  • React+redux 高阶实战项目

    ¥1,888.00
    当前热度:4131
“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部