Rails 展示一下自己的第一个 Rails 作品 - ITFun.tv

canonpd · 2018年03月22日 · 最后由 nuanshuidai 回复于 2018年05月03日 · 4223 次阅读

先发一下网址了:ITFun.tv

我的开发之路

我自己最初以前一直是写PHP前端的,现在武汉,自己开了一家PHP和前端的培训公司,基本就靠这两个为生。

后来觉得PHP写腻了,又换Python玩了挺长一段时间,当时主要使用的是Web.py,可惜的是Aaron Swartz不在后,这框架就前景堪忧了。其他的Django之类的又觉得太难用,SQLAlchemy也感觉非常复杂。

对Ruby一直很感兴趣,觉得语法上很多和Python相似的地方。于是就花时间学习了下。不学还好,学了后,我连Python看都不想看了。。。。于是现在它被我彻底打入冷宫了。

目前平常工作,在办公室就是PHP,回家后自己搞就是Ruby了。虽然要靠PHP吃饭,然而Ruby却更是我心头好。

至于Elixir我也尝试过,目前还感觉不是太完善,缺的轮子太多。就不多发表意见了。

对我来说: 写PHP,是吃饭的家伙,如鱼得水,随心所欲。 写Python,感觉就像是有个高效、简练的秘书帮我办事。 写Ruby,感觉是找了个最贴心的的小情人。

ITFun.tv是干嘛的?

ITFun.tv是我正式用Ruby On Rails开发的第一个比较完整的项目(以前的一些小练习就不算了)。这里对开发中所使用的一些技术和大家探讨一下,欢迎老手吐槽,新手借鉴。

因为我自己是在武汉搞PHP前端培训的嘛,于是想搞一个在线教育的平台。学生或者其他同学,可以通过它来在线学习一些知识。里面现在放的都是我自己录制的一些课程视频。目前能看的主要是Mac OSLaravel框架Workerman的一些课程,其他一些课程再陆续录制推出了。

上面自己做的课程中的配图,感觉Laravel基本就是各种模仿Rails,而且是模仿的最像的一个,于是Laravel我也用的挺舒服的,主要教学生也都是这个框架了。于是我就搞了这么一套课程。把RailsLaravel都介绍了一下。

使用的技术

1、UI设计

很多人第一眼看到,会觉得整站风格感觉很还不错。但是不好意思,我个人并不会做设计,我只觉得自己审美还算可以。。。设计是我到处抄的,不过各种功能代码都是自己写的了。

站点使用了Turbolinks,虽然开发时候,碰到了各种难以解决的奇怪js问题,不过多次调试下,最终还是完美解决了。 带来最大的好处,一个是整站无刷新了,体验好。再一个因为自带缓存的能力,所以页面加载速度非常快。 第一个需要注意的是,把以前jQuery天天写的

$(function(){

})

改成

$(document).on("turbolinks:load", function () {

})

另一个需要注意的是,整合部分jQuery插件的时候,可能还是会出现问题。那么你可以尝试head标签里加上如下代码,这个问题一般插件的Readme里都有相关说明。

<meta name="turbolinks-cache-control" content="no-cache">

3、缓存

缓存,主要参考了huacnleeCache 在 Ruby China 里面的应用

我觉得此文非常有学习价值,学习后我给前台大量加上了Fragment Cache,目前我自己测试的,基本ITFun.tv的每个页面响应时间都在30~50ms之间。

4、图片、视频

这些静态资源全部统一放在了七牛云上。项目后台的上传图片,使用的是carrierwave + carrierwave-qiniu开发的。基本没什么需要注意的,看Github的文档照着搞就行了。

视频上传,因为比较大,于是我直接在七牛后台上传了。

5、用户模块

用户的登录注册,使用了devise

异步发邮件使用了devise-async + sidekiq

第三方的QQGithub登录,使用的是omniauth-qqomniauth-github

6、markdown

课程的资料部分都是用了的是markdown书写,使用的是redcarpet + pygments.rb这两个gem。

7、省市区三级联动

用户修改资料部分,有一个省市区的选择,我使用了china_city,他的数据来自于淘宝。能精确到每一个街道,使用简单方便,非常推荐了。

8、表单

表单部分,全部都是simple_form了,这个没啥好说的了。

9、进度条

不同页面跳转,顶部出现的红色进度条,用的是nprogress-rails。文档里都给好调用方式了,直接拿过来用就行。

10、点赞、关注、购买课程

这些功能,统一使用了huacnlee发布的 action-store,用起来真是非常方便啊,凡是这种类似的需求,你都可以用这个。强列推荐!

11、数据分页

不用说了,就是它kaminari

12、系统的配置信息

参考了homeland的源码,发现了这么个好东西,还是huacnlee发布的rails-settings-cached

13、数据可视化(个人中心)

使用了d3_rails + c3-rails,这个我觉得没有百度的echarts用起来容易,我改这个的时候很花费了一点时间。

14、验证码

地球人都在用的,依然是huacnlee发布的rucaptcha

15、支付

课程、会员的购买支付,我用了chloereialipay + dotenv-rails

16、聊天

课程的实时聊天、推送信息功能也开发了,调试的还有一点bug,暂时还没有正式发布。使用的是Action Cabel

其中@多个用户,用到了bulk_insert,批量插入数据库。

通知信息的提示,使用的是 notifications

17、移动端

我选择的方案是,同一个地址,PC访问就是PC的界面,手机访问就是手机的界面。并没有去搞另一个叫m.itfun.tv的url。采用的技术是Action Pack Variants

application_controller中,加上如下代码,判断设备的类型。

before_action :detect_browser

def detect_browser
    case request.user_agent
      when /iPad/i
        request.variant = :tablet
      when /iPhone/i
        request.variant = :mobile
      when /Android/i && /mobile/i
        request.variant = :mobile
      when /Android/i
        request.variant = :tablet
      when /Windows Phone/i
        request.variant = :mobile
      else
        request.variant = :desktop
    end
end

控制器部分部分,你可以设定不同设备,输出不同的数据,例如下面的@new_courses。如果不写这个,那公共部分的数据就都会发送给view,例如@course

#当前课程
@course = Course.includes(:photo).includes(:tags).find(params[:id])

#最新课程
@new_courses = Course.includes(:photo).published.recent

respond_to do |format|
  format.html.desktop do
    @new_courses = @new_courses.limit(20)
  end

  format.html.mobile do
    @new_courses = @new_courses.limit(3)
  end
end

view部分,也会自动加载不同的html

app/views/courses/show.html.erb
app/views/courses/show.html+mobile.erb

18、视频播放

用的就是video.js啊,他的一些定制功能开发我暂时还没时间处理。目前能播放就行了。

项目用到的技术大概就上面这些了,欢迎大家和我讨论。 也希望上面的介绍能对Rails新同学有一些帮助。 项目里如果哪里感觉不合理,也欢迎提建议给我。

共收到 62 条回复

good job

看了下,很不错啊!

好想自己也能写一个出来玩玩啊😂

tjylovezdq 回复

谢谢😃

pengyaxiong 回复

推荐你多参考homeland的源码,我很多时候碰到问题了,不知道如何解决。我就去homeland里,找有没有相似的功能。如果有,就看这些管理员大牛是如何实现的。学会了,我就用在自己的项目里了。

嗯,讲的很不错。一直想学 Ruby,楼主能指导一下么

canonpd 回复

谢谢,楼主的分享。希望能多多发帖,让我们了解更多有意思的技术😍 😍 😍

啥时候才能像楼主这样厉害

@huacnlee @Rei 如果我这个做的行,不知能否收录到ruby china的库站中。如果不行,我就再继续努力了。

holyzq 回复

rails文档是必修的了,书的话我推荐 Rails 5敏捷开发可以看看。然后还是研究 homeland的源码吧。这个对我帮助最大。

hehuihui123 回复

我也是 Ruby 新手,大家一起学习😄

视频防盗链 防下载 怎么做的咧

pengxuxu 回复

目前这个功能,只是简单的使用了7牛提供的功能

好棒!有时间得好好学学ruby。

wfqqfq 回复

绝对值得学习

homeland标记了,谢谢楼主分享

zhumaokele 回复

就是ruby china这个项目,官方的源码

有很多技术点啊,谢谢楼主的干货啊

634019392 回复

希望能合大家多讨论交流开发技术

一开始我也是看ruby-China的代码学习的

武汉的,顶一下

wootaw 回复

😄 老乡,武汉用Ruby的公司太少了,一共3~4家,还包括我们在内。

牛x,顶一下

写的不错,绘声绘色!顶一下!

能静下心来做一个完整的项目真不错。

hgyswx 回复

谢谢,我还得继续学习,ruby的水平还是不太够

way19921021 回复

把用到的技术分享出来,其他朋友做到相同模块的时候希望能有所帮助

lanzhiheng 回复

慢慢搞,嘿嘿。先做个大概,再不断完善,开发新的功能。希望能成为下一个慕课网

canonpd 回复

这项目有点意思。

@canonpd 发现一个小bug 在https://itfun.tv/users/password/new页面,home图标的链接错了,你应该是借鉴的这个网站的设计。

qqerqqer 回复

好的谢谢,我马上修改调整

qqerqqer 回复

己经处理,谢谢🙏

听了一节 Laravel 的入门课,课程做的很赞。网站的细节也做的很好。

gingerhot 回复

谢谢。我又写了第二篇文章了,打算挑起语言大战。欢迎阅读。

gingerhot 回复

https://ruby-china.org/topics/35326 地址在这里,欢迎评论

PHP、Java、Python、Ruby到底应该学哪一个?

不错!!!

同在武汉

jakit 回复

都是老乡😄

同在武汉,支持一下

quakexx 回复

感谢老乡🙏😄

楼主,代码有计划开源不?

lihuazhang 回复

商业项目,企业自己使用的。抱歉,目前没有开源的想法。

canonpd 回复

您好,看到您的项目也用到了video.js 和 Turbolinks,请问您怎么解决这篇帖子https://ruby-china.org/topics/35321中我出现的问题呢?

maxchen 回复

我用video.js的时候也碰到了一些问题。不过我到处查阅一些资料后,主要github和google,加上了如下代码,目前没有发现有什么问题。你可以试试。

before_load = ->
  for player in document.getElementsByClassName 'video-js'
    video = videojs(player)
    video.dispose()

change = ->
  for player in document.getElementsByClassName 'video-js'
    video = videojs(player)

$(document).on('turbolinks:load', change)
$(document).on('turbolinks:before-visit', before_load)
canonpd 回复

嗯,谢谢您!我试试您这个,您这个是不是参考了这里https://github.com/seanbehan/videojs_rails呢?

Rei 浏览器 F5 刷新和点链接刷新有什么区别呢? 中提及了此贴 03月27日 01:34

随便编个笑话。

旁边的新人开发者小王看了LZ的帖子刷刷刷下了几个wordpress的插件,一个小时以后我看到了LZ一样的网站。

产品经理看了LZ文章的前几段,和营业商量了一下,说,我们最近用小鹅通挺好的。

maxchen 回复

对,应该就是这个。不过我没用gem,直接在video.js的官网下载的最新版本。 这个gem太老了一点。

canonpd PHP、Java、Python、Ruby 到底应该学哪一个? 中提及了此贴 03月27日 09:59

赞一个,不过武汉的公司ruby的确很少,所以我去魔都了😇

babyhai 回复

确实就那么几家,朋友搞ruby的想回武汉,帝都房子毕竟买不起,还是要考虑现实问题。 然而我却不敢让他回来,工作问题真的不好搞。

是的 ,武汉如果有,我肯定会考虑会武汉的 你的网站我刚刚看了下,前端样式还有些问题

babyhai 回复

这里怎么了?是说下面的框盖住了心吗?如果是说这个问题,那这个地方本来就是想这样设计的哦。 确实目前还是不推荐回武汉,武汉搞工作净是PHP和Java。

哦 好吧 从用户的角度 这里可能 不太建议这么设计

嘿嘿,调这个还花了我点功夫。就是故意的。感谢你的反馈,我再问问其他用户,如果大家都对这点感觉有疑问,我改改。😅

感谢分享

感谢分享。

框盖住心那个我感觉还好吧,刚开始看着挺正常的,看楼上这么说之后,试了一下这样感觉可能更好。不过萝卜青菜各有所爱吧

楼主666

搞php培训的 用 rails 写了个官网~ 觉得有点黑色幽默啊 哈哈哈

好巧,同在武汉,也叫东哥。😂

mingyuan0715 回复

虽然是教php的,然而扛不住我对ruby的喜爱。 最初一版我用elixir写的,结果烂尾了。phoenix太不完善了,各种缺轮子。换rails后一路顺畅。

yangdong77 回复

哈哈,老乡好多

mingyuan0715 回复

其实我以前还有过Python官网,web.py写的,不过也是搞php和前端培训。。。当然PHP官网也是有的了。😀 喜欢什么就用什么写,随性

现在做实体培训班还能活下去吗?

waytohigh [该话题已被删除] 中提及了此贴 06月04日 14:53
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册