文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

Thimble 是Mozilla的在线代码编辑器,可以在学习 HTML, CSS & JavaScript 的同时更加容易的进行创建和发布内容操作. 点击这里可以在线使用 https://thimble.mozilla.org (或者访问我们的临时服务器 https://bramble.mofostaging.net ).

你可以在wiki 中阅读Thimble的主要功能, 或者 直接观看视频.

Thimble 使用了一个牛逼的 Brackets 代码编辑器的修改版本更新在浏览器中运行。 可以在 这里 阅读它的原理.

Thimble 需要使用“新版”的浏览器(指不能使用ie6等过期货吧),我们建议使用火狐或Chrome浏览器.

第 1 段(可获 1.34 积分)

安装

Thimble 在本地运行比较麻烦一点,因为它需要安装一些其他的依赖服务. 为了运行 Thimble, 你需要以下内容. 以下是关于安装他们的一个简短的指南. 请查看每一项的README文件获取更多内容.

你将用到以下这些

  • Bramble
  • Thimble
  • Webmaker ID server
  • Webmaker Login Server
  • PostgreSQL Database
  • Webmaker Publishing Server

安装剩下的部分

注意:Windows环境中使用copy代替cp命令

Bramble

第 2 段(可获 1.7 积分)

Thimble

id.webmaker.org

login.webmaker.org

  • 拷贝 https://github.com/mozilla/login.webmaker.org
  • 运行 npm install 安装依赖项
  • 运行 cp env.sample .env 命令创建一个环境文件
  • 运行 npm start 启动服务器
  • 注意: login.webmaker.org 需要使用4.x 版本的node,因为其他依赖项使用4.x或更高的node版本. 我们建议安装 NVM 用来允许使用多种不同版本的node.
第 3 段(可获 1.7 积分)

PostgreSQL

  • 使用 Homebrew 套件管理器 安装Postgres
    • 获取 Homebrew - http://brew.sh/
    • 安装完成 Homebrew 之后运行命令 brew install postgresql 安装 PostgreSQL 
  • 运行命令 initdb -D /usr/local/var/postgres 初始化 PostreSQL
    • 如果已经初始化, 运行 rm -rf /usr/local/var/postgres 删除之
  • 运行 postgres -D /usr/local/var/postgres 命令启动 PostgreSQL 服务器
  • 运行 createdb publish 命令创建发布数据库

publish.webmaker.org

  • 这一步假设你已经完成了上面的安装PostgreSQL的步骤,包括创建发布数据库的步骤.
  • 拷贝 https://github.com/mozilla/publish.webmaker.org
  • 运行 npm install 安装依赖项
  • 运行命令 npm run env
  • 运行 npm install knex -g 命令安装  knex
  • 运行 npm run knex 命令启动knex并选择之前创建的发布服务器
  • 运行 npm start 命令启动服务器
第 4 段(可获 1.14 积分)

准备发布

做本地发布,需要进行下面的步骤...

1. 让ID 服务器识别发布服务器

  • 运行 createdb webmaker_oauth_test 命令建立一个测试库
  • 在 id.webmaker.org 文件夹中

    • 运行命令 node scripts/create-tables.js
    • 编辑 scripts/test-data.sql 文件,将内容替换为:

        INSERT INTO clients VALUES
          ( 'test',
            'test',
            '["password", "authorization_code"]'::jsonb,
            '["code", "token"]'::jsonb,
            'http://localhost:3500/callback' )
    • 运行命令 node scripts/test-data.js

      • 如果成功会看到一条INSERT 0的消息

2. 设置本地数据文件夹

我们不是要发布到亚马逊云,而是发布到本地文件夹. 执行以下步骤进行安装.

  • 运行命令 npm install -g http-server && mkdir -p /tmp/mox/test && cd /tmp/mox/test && http-server -p 8001
  • 运行命令 cd /tmp/mox/test && http-server -p 8001 启动服务器
  • 在 publish.webmaker.org 文件夹中
    • 打开 .env 文件
    • 设置 PUBLIC_PROJECT_ENDPOINT="localhost:8001"
    • 重启发布服务器
第 5 段(可获 1.33 积分)

3. 登 录

要做本地发布,还需要一个账号.

  • 打开 http://localhost:3000/account
  • 点击 Join Webmaker 并完成流程, 可以使用一个假的邮件地址
  • 创建完成之后点击 Set permanent password instead
    • 点击这个可以让账户验证忽略电子邮件地址项
  • 返回  Thimble 并使用新账号登录

剩余部分

下面的命令列表让可以每一部分运行起来.

  • Thimble npm start
  • Bramble npm start
  • PostgreSQL Database postgres -D /usr/local/var/postgres
  • Webmaker ID server npm start
  • Webmaker Login Server npm start
  • Webmaker Publishing Server npm start
  • Local publish folder cd /tmp/mox/test && http-server -p 8001
第 6 段(可获 1.09 积分)

开发选项

我们使用grunt工具来发现JS, HTML and CSS 的潜在问题, 安装命令十分简单:

npm install -g grunt-cli

完成后,提交代码之前运行 grunt 就ok了.

构建前端

运行命令 grunt requirejs:dist 重新构建前端夹 dist/ 如果你已经等不及了的话 (不过这种情况只出现在生产环境). 查看 Gruntfile.js 获取更多信息.

本地化

请参考 Wiki  关于使用本地化Thimble程序的信息.

本地化社区

我们的本地化社区 是很牛逼的! 他们非常努力翻译Thimble,为了能够扩大我们的全球影响力,吸引更多的其他语言的用户使用。. 怎么感谢他们都不够!

第 7 段(可获 1.43 积分)

使CloudFront无效

要使产生的CloudFront分发无效,请确保你在env文件中设置了正确的凭证。 然后运行 node invalidate.js。或者,如果你可以访问部署的heroku,可以使用 heroku run npm run invalidate运行一次性动态无效。

并发

Thimble使用 throng 模块利用Node's Cluster API 实现并发。指定要启动的服务器进程数,请将WEB_CONCURRENCY设置为正整数值。

第 8 段(可获 0.85 积分)

文章评论