研发实战:Moziila分享混合现实编辑器MrEd的开发经验和教训

  • 时间:
  • 浏览:0

(映维网 2019年08月12日)MrEd是Moziila日前发布的有有另一一5个实验性混合现实编辑器,并旨在探索MR故事在线编辑的不可能 性。日前Mozilla团队的Josh Marinacci分享了没这么人 在开发过程中的经验教训。下面是映维网的具体派发:

当没这么人 开使构建MrEd时,没这么人 认为这会成为某种生活传统的Web服务。潜在用户访问网站,创建帐户,可是我都可不上能 在网站构建体验并将其保存到服务器。没这么人 就让开发过曾经的软件,统统对相关要求十分熟悉。但当没这么人 开使实际构建MrEd时,没这么人 意识到这一挑战的所处。

首先,MrEd的目标人群是学生,其中大多数是年轻人。我曾在有2个夏天辅导过孩子们,我知道没这么人 通常这么电子邮件地址,即使有,追踪学生行为所处隐私和法律方面的问题报告 。另外,没这么人 知道这是有有另一一5个终究会开使的实验,但没这么人 不希望学生一蹶不振 对没这么人 刚学到的工具的访问权限。

经过一番思考后,没这么人 认为Glitch不可能 是有有另一一5个答案。它支持匿名使用,并允许你轻松地进行利用。它内置了有有另一一5个不错的CDN,非常适合托管模型和3200度图像。不可能 都可不上能托管编辑器和文档,Glitch将成为实验完成后继续所处的的完美平台。

Glitch的缺点是,它的大多数高级功能都这么文档介绍。经过几滴 研究,没这么人 想出了如何修改Glitch来处理一系列的问题报告 ,而没这么人 现在希望向你分享没这么人 的处理方案。

1. Glitch与Git Repo

Glitch的编辑器非常适合编辑有有另一一5个小项目,但不适用于构建大型软件。没这么人 从一开使就知道没这么人 时需在本地机器编辑并将代码存储在GitHub repo中。问题报告 是如何将代码导入Glitch?没这么人 发现,Glitch支持从现有的Git repo中创建有有另一一5个新项目。这非常棒。

没这么人 现在都可不上能 创建有有另一一5个编辑器,并按照没这么人 喜欢的最好的方式设置项目,在Git中保存,可是我在时需时创建有有另一一5个新的Glitch。没这么人 专门构建了有有另一一5个名为mred-base-glitch的新repo,并在readme中记录了具体的步骤。

2. 集成React

MrEd是用React开发,统统接下来的挑战是如何将React应用任务管理器变成Glitch。在开发期间,没这么人 使用hotreloading dev服务器在本地运行应用任务管理器。但最终,没这么人 时需都可不上能 托管在任何位置的静态文件。不可能 没这么人 的应用任务管理器是使用create-react-app进行开发,统统没这么人 都可不上能 使用npm run build构建静态版本。问题报告 是,为了计算最终的URL引用,它要求你在package.json中设置hostname属性。这不适合没这么人 ,不可能 Glitch都可不上能 重命名为任何一切。处理方案是将主机名设置为“.”,曾经所有URL全部还会 相对的。

接下来没这么人 希望隐藏编辑器。在Glitch中,用户都可不上能 编辑器左侧发现有有另一一5个文件列表。尽管显示asset和脚本这么那先 问题报告 ,但没这么人 希望隐藏生成的React代码。事实证明,不可能 它以“.”开头,Glitch将隐藏任何目录。可是我,在没这么人 的基础repo中,没这么人 将代码放满去public/.mred。

最后的挑战是,如何在现有Glitch中更新编辑器,一齐不需要覆盖用户创建的asset和文档。

没这么人 全部还会 将所有一切都放满去同有有另一一5个git repo中,没这么人 创建了有有另一一5个repo:mred只含有在React中构建编辑器的代码;mred-base-glitch则含有默认文档和行为。第5个repo将第有有另一一5个repo集成为git子模块。编辑器的编译版本同样存放满去mred repo中。曾经,编辑器的源代码和编译版本都都可不上能 在git中进行版本控制。

每当你让你在现有Glitch中更新编辑器,我能 转到Glitch控制台并运行git子模块init和git子模块更新。可是我,我能 通过刷新Glitch UI进行更新。尽管这是有有另一一5个手动步骤,但学生们都可不上能 通过老师指导轻松完成。

3. 加载文档

编辑器是有有另一一5个静态React应用任务管理器,托管在用户的Glitch中,但它时需在某个位置保所处编辑器中创建的文档。Glitch这么提供用于以编程最好的方式加载和保存文档的API,但任何Glitch都都可不上能 安装NodeJS服务器,统统没这么人 用express创建了有有另一一5个简单的文档服务器。doc服务器扫描文档和脚本目录并生成用于编辑器的JSON API。

对于启动页面,没这么人 希望用户在打开编辑器就让查看当前项目的列表。就某种生活点而言,doc服务器在“/”位置具有路由,后者返回含有作为链接的列表的网页。对于需可是我absolute的URL,服务器使用Glitch提供的魔术变量来选用主机名:process.env.PROJECT_DOMAIN。

相较于比脚本和文档,asset有点棘手。编辑器时需有有另一一5个可用asset列表,但没这么人 不都可不上能只扫描asset目录,不可能 asset实际上并未存储在你的Glitch中。相反,它们储所处Glitch的CDN中。可是我,Glitch确实有有有另一一5个名为.glitch-assets的隐藏文件,它将所有asset列为JSON文档,包括mime类型。

没这么人 发现学生让你使用诸如如GLB和WAV等不被Glitch识别的文件。你仍而且能 将那先 文件上传到CDN,但.glitch-assets文件不需要列出正确的mime类型,统统没这么人 的文档服务器为它们计算了新的mime类型。

在Glitch中使用有有另一一5个小型文档服务器为没这么人 提供了非常大的灵活性。这绝对是设计方面的胜利。

4. 用户认证

曾经挑战是用户认证。Glitch具有用户的改变,不允许一名用户在未经许可的情况表下编辑某人的Glitch。但某种生活用户系统不作为API公开。没这么人 的代码无法知道与编辑器交互的人是全部还会 Glitch的所有者。有传闻称未来Glitch将提供曾经的功能,但现在没这么人 用密码文件先行创建了曾经有有另一一5个功能。

事实证明,Glitch都可不上能 拥有有有另一一5个名为.env的特殊文件,并用于存储密码和这一安全环境变量。某种生活文件都可不上能 通过Glitch中运行的代码读取,但在再次利用时不需要qq克隆好友 ,统统不可能 这么人要使用你的Glitch,没这么人 将无法知晓你的密码。没这么人 要求学生在制作完成后立即设置密码。可是我,doc服务器将使用密码验证与编辑器的通信。

5. 未来功能

没这么人 设法修改Glitch以满足没这么人 的需求,而没这么人 发现效果不错。当然,没这么人 希望在就让加进去去一系列的功能。

官方文档:没这么人 后面 所做的几乎所有事情全部还会 在支持论坛进行了几滴 研究后所得出,并得到了Glitch工作人员的帮助。除了基本项目开发之外,官方这么不多的介绍文档。不可能 除常见问题报告 解答之外还有有有另一一5个官方文档网站,那就太好了。

真正的身份验证API:使用.env文件是有有另一一5个非常棒,但不可能 编辑器某种生活都可不上能 正确响应用户则更棒。不可能 用户未登录,则都可不上能 显示体验的仅播放视图。不可能 用户已登录但全部还会 Glitch的所有者,它都可不上能 显示Remix按钮。

某种生活以编程最好的方式填充asset的最好的方式。当从GitHubqqqq克隆好友 时,你在Glitch中看后的所有内容都来自于基础的git repo,除asset之外。要创建含有预设asset列表的Glitch,你时需通过可视界面手动上传文件。这么这一最好的方式将asset存储在git repo中或以编程最好的方式上传它们。