为了方便你完成接下来的挑战项目,这里推荐一个基于浏览器的在线开发环境 c9.io 。使用在线开发环境,你就不必在自己电脑上安装 Node.js 和 MongoDB 了,这样可以为你节省大把的时间来做练习。
打开 c9.io 主页后,点击右上角的 Github 图标,通过关联你的 Github 帐号来创建一个 c9.io 帐号。注意,最后一步需要填写你的邮箱地址。(整个过程可以参考上边的演示录像)。
你没有必要自己造轮子去完成接下来的挑战,这里推荐使用集成了 MongoDB,Express 和 Node.js 的轻量级 JavaScript 全栈框架 Clementine.js 。如果有兴趣,请参考 Clementine.js 的完整教程一步一步构建自己的应用开发环境,这里我们只需要克隆它的源码到 c9.io 的开发环境就好了。
登录 c9.io 后,你需要创建一个新的 Workspace,模板选择 blank 即可,克隆地址填: https://github.com/johnstonbl01/clementinejs-fcc.git
, 最后点击屏幕下方的 "Create workspace" 按钮,完成创建开发环境。(整个过程可以参考上边的演示录像)。
创建完毕后自动进入新建的 Workspace ,点击左侧导航栏右上角的齿轮图标,选择显示隐藏文件("show hidden files")。(整个过程可以参考上边的演示录像)。
打开刚刚新建的 .env 文件,把下边的代码粘帖进去,并保存:GITHUB_KEY=
。(整个过程可以参考上边的演示录像)。
GITHUB_SECRET=
MONGO_URI=mongodb://localhost:27017/clementinejs
PORT=8080
APP_URL=http://localhost:8080/
点击标题栏上菜单 windows , 在下拉菜单中选择 share, 之后在弹出的窗口中点击 Application 右边的链接, 在弹出选项中选择 open 。此时会打开一个新的页面,注意这个页面就是你在 c9.io 中新建的 App 的主页,复制这个 App 的主页地址,下一步骤会用到。(整个过程可以参考上边的演示录像)。
登录 Github ,进入你的 Profile 页面,在左侧列表中选择 OAuth applications ,之后在右边选择 Developer application 来创建一个鉴权 App 。 Application name 可以自己取, Homepage URL 填入上一步创建的 App 的主页地址。 Authorization callback URL 也填入相同的地址,并在后边加上相对路径:auth/github/callback
。最后点击最下边的注册应用(Register Application)。(整个过程可以参考上边的演示录像)。
在 Github 上的鉴权 App 已经创建完成,此时会显示 Client ID 和 Client Secret 。把 Client ID 和 Client Secret 分别赋给 .env 文件中的 GITHUB_KEY 和 GITHUB_SECRET。并把上文提到的 APP 地址赋给 APP_URL 。(整个过程可以参考上边的演示录像)。
依赖包安装完毕,在命令行窗口中启动应用:node server.js
。回到前面打开的 App 主页并刷新,你应该可以看到 Clementine.js 的 logo,点击 "sign in" 并确认 Github 的鉴权请求。