公开课锦集

  • Vue.js实现Web微信
  • 从零开始做一个命令行聊天机器人
  • 手把手教你实现 Vue
  • MongoDB 101, 手把手教你入门NoSQL数据库

Vue.js实现Web微信

(公开课已经结束, 可在 https://jirengu.com/app/album/90 观看直播)

今天,Hope老师就带大家使用Vue.js实现一个在 web 运行的微信!

老师介绍

HOPE:5年H5开发经验,擅长webApp,混合开发,项目管理。目前任职于某大数据公司,负责前端平台架构和混合开发。

课程主题

《 前端实战:Vue.js实现微信界面 》

内容大纲

  1. 熟悉Vuejs的基本语法
  2. 掌握手机下的网页开发调试方法
  3. 认识Vuejs手机UI组件库Mint-ui
  4. 认识和使用iconfont矢量图标
  5. 使用Mint-ui完成微信主界面

预习资料和源码

直播时间

2017年8月6日(周日)晚上8点

免费报名参加

关注“饥人谷前端”微信公众号,回复“vue”,获取免费参加公开课直播名额哦~

从零开始做一个命令行聊天机器人

(已结束,在 https://jirengu.com/app/album/88 观看录屏)

在饥人谷的24h自习室QQ群里,大家总是喜欢在学习之余调戏QQ小冰,小冰每次都能跟大家聊得很嗨,还能唱歌,玩猜字游戏等等。
这么聪明伶俐,随叫随到的萌妹子QQ小冰其实是图灵的聊天机器人。

图灵机器人是以语义技术为核心驱动力的人工智能公司,致力于“让机器理解世界”,产品服务包括机器人开放平台、机器人OS和场景方案。通过图灵机器人,开发者和厂商能够以高效的方式创建专属的聊天机器人、客服机器人、领域对话问答机器人、儿童/服务机器人等。

本期饥人谷公开课,Michael老师将带大家来完成一个命令行聊天机器人,一起来打造一个属于自己的机器人吧!

老师介绍

Michael:多年海外留学经验,本科和硕士分别毕业于英国诺丁汉大学和牛津大学,毕业后就职于亚马逊伦敦研发中心,目前已回国,就职于网易。

课程主题

《 前端实战:从零开始做一个命令行聊天机器人》

内容大纲

  • 一窥网络请求(request)

  • 怎么使用第3方api

  • 使用node官方模块进行命令行交互

  • 结合图灵api造一个可玩的机器人

  • 开源成果, npm上发布机器人

源码地址

https://github.com/n0ruSh/turing-robot

直播时

2017年7月29日(周六)晚上8点

免费报名参加

关注“饥人谷前端”微信公众号,回复“机器人”,获取免费参加公开课直播名额哦~

手把手教你实现 Vue

(公开课已结束, 可在 https://jirengu.com/app/album/86 观看录屏回放)

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

如果你想了解学习Vue.js这个前端框架,一定不要错过本次公开课咯~

讲师

Tony,毕业于武汉大学,曾任职于南方电网,自由创业者,现为珠海某科技科技公司前端leader, 擅长前端常见 MVVM 框架(Vue)、前端工程化(npm、webpack 2、babel)、前端常见工具(RAP、Mockjs)、CSS预处理器(SASS、PostCSS)等。

本次公开课分两次进行:

一、《Vue.js前端框架开发初体验》

录屏回放https://jirengu.com/app/album/86

todomvc之添加和删除,涉及知识点:

  • Vue示例
  • 模板语法
  • 条件渲染
  • 列表渲染
  • 事件处理器
  • 表单控件
    前置内容 :chrome插件vue devtools、git、node
二、《前端进阶实战:实现一个vue解析dom模板》

录屏回放: 视频

涉及知识点:

  • 解析数据
  • 数据和事件与dom的绑定

直播时间:2017-07-23(周日)晚上20:00

免费参与:微信关注“饥人谷前端”公众号,回复“解析”即可免费报名参与本次公开课哦~

MongoDB 101, 手把手教你入门NoSQL数据库

(课程已结束, 视频地址:https://jirengu.com/app/album/84 )

MongoDB,humongous(巨大的) DB,世界上最大(?),最流行的NoSQL数据库之一。

被广泛应用于海量存储的分布式系统之中,以其灵活的文档存储方式和高效的读写征服了一大批码农。

连隔壁老王家都在用,要是2017年你还没听过或者没用过MongoDB,可就不应该啦!

本期公开课,让我们跟杨恪老师一起来学习MongoDB吧!

讲师

杨恪毕业于南京大学,全栈(溢出)工程师,曾受邀到复旦大学做过移动开发后端服务设计的分享,现任某百万用户APP后端负责人。

通过本次课程,你将会学到:

  • MongoDB的八卦
  • MongoDB的基础技巧比如CRUD操作
  • MongoDB的进阶技巧比如聚合(aggregation)
  • MongoDB深入原理的性能指南
  • MongoDB的分布式系统搭建
  • MongoDB从删库到跑路的最短路径Dijkstra算法

直播时间

2017-07-13(周四)晚上20:00~22:00

免费参与

微信关注“饥人谷”公众号,回复“数据库”即可报名免费参加

饥人谷新班预告

饥人谷Node.JS全栈班7月开班,由杨恪老师带班,课程大纲http://blog.jirengu.com/?p=540

课程咨询:

青青:2054185664

墨凌:3175576796

夏夏:1678333634

微信小程序开发:各地实时天气预报

(直播已结束, 代码地址: https://github.com/jirengu/weixin-weather )

微信小程序于2017年1月9日凌晨上线,于是掀起一股小程序热潮。

其原因在于App开发和推广成本居高不下,前者支出在于人力,后者则是近年来流量费用的水涨船高,微信“小程序”有望降低两项门槛。

微信小程序作为轻型应用,它的特点是小而快,微信小程序目的主要还是解决小应用的问题,重点在于灵活、快捷、用完即走。

另一方面,微信“小程序”的确有望为一些高频应用提供新的选择。

本期公开课,若愚老师带你实现一个天气预报小程序~

讲师

若愚,北航计算机硕士,曾任职于百度LBS搜索研发部、阿里巴巴B2B技术部,开发过百度地图、阿里巴巴中文站等产品,擅长CSS3、HTML5、nodejs。

直播时间

2017-07-12(周三)晚上20:00

免费参与

微信关注“饥人谷”公众号,回复“小程序”即可免费报名参加本次公开课哦~

饥人谷新班预告

饥人谷前端直播14班7月中旬开班,由若愚老师带班,开班前预报名有100元优惠哦~课程大纲和班级介绍:http://blog.jirengu.com/?p=574

课程咨询QQ:

班主任-青青:2054185664

班主任-墨凌:3175576796

班主任-夏夏:1678333634

手把手教你实现Node.js Express框架

(课程已结束, 在 https://jirengu.com/app/album/83 观看直播录屏)

刚接触 js 的同学在学到 ajax 的时候经常会懵掉,归根结底就是对所谓的“后台”、“服务器”这些概念没有任何概念。课程中我讲过 Express 做后台,甚至写了个简单易用的 mock 工具 server-mock 来方便同学模拟数据,但经常会出现类似下面的对话:

同学:“你推荐的框架和工具我用了,用的也很爽,可是框架工具的外衣下到底发生了什么?除了 mock 数据,我还想做 HTTP 的缓存控制的测试、想做白屏和 FOUC的效果重现测试、想做静态资源加载顺序的测试、想做跨域的测试… ,如果我不明白里面后台到底发生了什么还不如叫我去死…”

我:”多用多练,学到后面你自然就懂了,不甘心你可以先看看 Express 的源码”

同学:“我用都还没用熟练… 杀了我吧…”

如果想追根溯源,看源码真的是唯一途径,无奈源码实在是太枯燥,为了功能的完善流行的框架引入太多和主线流程不先关的东西。即使偶尔能找到一些不错的源码解析的文章,也是又臭又硬,完全不适合缺少经验的初学者。所以之前答应同学近期安排一次好懂有用的直播公开课,专门讲解服务器和后端框架,尽量让不管是前端小白还是前端老鸟都有收获。

直播内容

本次直播课涉及的内容如下:

  • step0. 我们先使用 Nodejs 的入门知识搭建一个服务器
  • step1. 对搭建的服务器功能进行扩展,使之成为一个能用的静态服务器
  • step2. 继续扩展,让我们的静态服务器能解析路由,把服务器变成一个支持静态目录和动态路由的“网站”
  • step3. 模拟 Node.js 的后端框架 Express的使用方法,实现一个包含静态目录设置、中间件处理、路由匹配的迷你 Express 框架
  • step4. 完善这个框架

适合的对象

不需要你有万行代码的编写经验、不需要你精通/掌握/熟悉 Node.js,你只需要

  • 有一些 js 使用经验,有一点 nodejs的使用经验,即可理解1、2、3对应的内容。
  • 如果你有一点后端基础,有一点Express 框架的使用经验,那么你就能理解4、5对应的内容。

我能学到什么

  • 你会对服务器、对后端框架有一个清晰的认识
  • 平时搭个静态服务器或者 Mock 数据不再需要使用别人的东西
  • 会对 HTTP 有更深入的认识
  • 中间件、异步有一定认识
  • 装 13利器,以后简历里可以写自己不使用任何第三方模块,实现一个类 Express 的后端框架

课程安排

直播时间: 本周三(7月5日)晚上8点30

**参与方式:加 QQ 群:617043164 ,入群申请:饥人谷Node框架。

也可以在微信搜索小程序『饥人谷』,上课的时候如果不方便看电脑可在手机微信小程序上观看直播

关于我

我是若愚,曾经在百度、阿里巴巴做前端开发,后创业加入饥人谷做前端老师。亲手培养了近300名同学

一些同学去了Facebook、大众点评、美团、头条、金山、百度、阿里(外包)、华为(外包)
一些同学在小公司当技术 leader
一些同学去国外做菠菜网站拿着让人”震惊”的待遇
一些同学自己做外包当老板收入甚至远超老师
当然还有一些同学,令人悲伤的中途退课转了行

他们来自五湖四海各行各业,海龟、名校高材生、火车司机、航海员、旅游软件销售、全职妈妈、装配厂工人、方便面制造师、中科院研究所员工、美工、产品、后端、机械/化工/传媒/英语/新闻从业者….,但最终殊(误)途(入)同(歧)归(途)

直播剧透

以下是公开课课堂上涉及的代码,有兴趣参加公开课的同学可以提前阅读、理解、复制、允许代码,Github 的链接直播课堂上放出。课堂上会进行一步步讲解,任何疑问都可在直播课和老师直接互动。

step0: 创建一个服务器

index.js

var http = require('http')

var server = http.createServer(function(request, response){
  //response.setHeader('Content-Type', 'text/html')
  //response.setHeader('X-Powered-By',  'Jirengu')
  response.end('hello world')
})

console.log('open http://localhost:8080')
server.listen(8080)
step1:搭建静态服务器
var http = require('http')
var path = require('path')
var fs = require('fs')
var url = require('url')

function staticRoot(staticPath, req, res){

  var pathObj = url.parse(req.url, true)
  var filePath = path.resolve(staticPath, pathObj.pathname.substr(1))
  var fileContent = fs.readFileSync(filePath,'binary')

  res.writeHead(200, 'Ok')
  res.write(fileContent, 'binary')
  res.end()
}

var server = http.createServer(function(req, res){
  staticRoot(path.resolve(__dirname, 'static'), req, res)
})

server.listen(8080)
console.log('visit http://localhost:8080' )


step2: 解析路由

var http = require('http') var path = require('path') var fs = require('fs') var url = require('url') var routes = { '/a': function(req, res){ res.end('match /a, query is:' + JSON.stringify(req.query)) }, '/b': function(req, res){ res.end('match /b') }, '/a/c.js': function(req, res){ res.end('match /a/c.js') }, '/search': function(req, res){ res.end('username='+req.body.username+',password='+req.body.password) } } var server = http.createServer(function(req, res){ routePath(req, res) }) server.listen(8080) console.log('visit http://localhost:8080' ) function routePath(req, res){ var pathObj = url.parse(req.url, true) var handleFn = routes[pathObj.pathname] if(handleFn){ req.query = pathObj.query var body = '' req.on('data', function(chunk){ body += chunk }).on('end', function(){ req.body = parseBody(body) handleFn(req, res) }) }else { staticRoot(path.resolve(__dirname, 'static'), req, res) } } function staticRoot(staticPath, req, res){ var pathObj = url.parse(req.url, true) var filePath = path.resolve(staticPath, pathObj.pathname.substr(1)) fs.readFile(filePath,'binary', function(err, content){ if(err){ res.writeHead('404', 'haha Not Found') return res.end() } res.writeHead(200, 'Ok') res.write(content, 'binary') res.end() }) } function parseBody(body){ var obj = {} body.split('&').forEach(function(str){ obj[str.split('=')[0]] = str.split('=')[1] }) return obj }
step3:Express 雏形

文件目录结构

bin
  - www
lib
  - express.js
app.js

可通过 node bin/www 命令启动服务器

bin/www

var app = require('../app')
var http = require('http')

http.createServer(app).listen(8080)
console.log('open http://localhost:8080')

app.js


var express = require('./lib/express') var path = require('path') var app = express() app.use(function(req, res, next) { console.log('middleware 1') next() }) app.use(function(req, res, next) { console.log('middleware 12') next() }) app.use('/hello', function(req, res){ console.log('/hello..') res.send('hello world') }) app.use('/getWeather', function(req, res){ res.send({url:'/getWeather', city: req.query.city}) }) app.use(function(req, res){ res.send(404, 'haha Not Found') }) module.exports = app

lib/express.js

var url = require('url')


function express() {

  var tasks = []

  var app = function(req, res){
    makeQuery(req)
    makeResponse(res)
        //post 的解析未实现

    var i = 0

    function next() {
      var task = tasks[i++]
      if(!task) {
        return
      }

      //如果是普通的中间件 或者 是路由中间件  
      if(task.routePath === null || url.parse(req.url, true).pathname === task.routePath){
        task.middleWare(req, res, next)
      }else{
        //如果说路由未匹配上的中间件,直接下一个
        next()
      }
    }

    next()
  }

  app.use = function(routePath, middleWare){
    if(typeof routePath === 'function') {
      middleWare = routePath
      routePath = null
    }

    tasks.push({
      routePath: routePath,
      middleWare: middleWare
    })
  }


  return app

}

express.static = function(path){

  return function(req, res){
            //未实现
  }
}

module.exports = express

function makeQuery(req){
  var pathObj = url.parse(req.url, true)
  req.query = pathObj.query
}

function makeResponse(res){
  res.send = function(toSend){
    if(typeof toSend === 'string'){
      res.end(toSend)
    }
    if(typeof toSend === 'object'){
      res.end(JSON.stringify(toSend))
    }
    if(typeof toSend === 'number'){
      res.writeHead(toSend, arguments[1])
      res.end()
    }
  }
}


step4: 框架完善

文件目录结构

bin
  - www
lib
  - express.js
  - body-parser.js
app.js

可通过 node bin/www 命令启动服务器

bin/www

var app = require('../app')
var http = require('http')

http.createServer(app).listen(8080)
console.log('open http://localhost:8080')

app.js


var express = require('./lib/express') var path = require('path') var bodyParser = require('./lib/body-parser') var app = express() //新增 bodyParser 中间件 app.use(bodyParser) //新增 express.static 方法设置静态目录 app.use(express.static(path.join(__dirname, 'static'))) app.use(function(req, res, next) { console.log('middleware 1') next() }) app.use(function(req, res, next) { console.log('middleware 12') next() }) app.use('/hello', function(req, res){ console.log('/hello..') res.send('hello world') }) app.use('/getWeather', function(req, res){ res.send({url:'/getWeather', city: req.query.city}) }) app.use('/search', function(req, res){ res.send(req.body) }) app.use(function(req, res){ res.send(404, 'haha Not Found') }) module.exports = app

lib/express.js

var url = require('url')
var fs = require('fs')
var path = require('path')


function express() {

  var tasks = []

  var app = function(req, res){

    makeQuery(req)
    makeResponse(res)
    console.log(tasks)

    var i = 0

    function next() {
      var task = tasks[i++]
      if(!task) {
        return
      }
      if(task.routePath === null || url.parse(req.url, true).pathname === task.routePath){
        task.middleWare(req, res, next)
      }else{
        next()
      }
    }

    next()
  }

  app.use = function(routePath, middleWare){
    if(typeof routePath === 'function') {
      middleWare = routePath
      routePath = null
    }

    tasks.push({
      routePath: routePath,
      middleWare: middleWare
    })
  }


  return app

}

express.static = function(staticPath){

  return function(req, res, next){
    var pathObj = url.parse(req.url, true)
    var filePath = path.resolve(staticPath, pathObj.pathname.substr(1))
    console.log(filePath)
    fs.readFile(filePath,'binary', function(err, content){
      if(err){
        next()
      }else {
        res.writeHead(200, 'Ok')
        res.write(content, 'binary')
        res.end()         
      }
    })
  }
}

module.exports = express


function makeQuery(req){
  var pathObj = url.parse(req.url, true)
  req.query = pathObj.query
}

function makeResponse(res){
  res.send = function(toSend){
    if(typeof toSend === 'string'){
      res.end(toSend)
    }
    if(typeof toSend === 'object'){
      res.end(JSON.stringify(toSend))
    }
    if(typeof toSend === 'number'){
      res.writeHead(toSend, arguments[1])
      res.end()
    }
  }
}

lib/body-parser.js


function bodyParser(req, res, next){ var body = '' req.on('data', function(chunk){ body += chunk }).on('end', function(){ req.body = parseBody(body) next() }) } function parseBody(body){ var obj = {} body.split('&').forEach(function(str){ obj[str.split('=')[0]] = str.split('=')[1] }) return obj } module.exports = bodyParser

发表评论

电子邮件地址不会被公开。