大发一分彩 首页 > 学霸

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

2019-08-13 06:20 weila

来源:映维网 作者 黄颜

MrEd是Moziila日前发布的一个实验性混合现实编辑器,并旨在探索MR故事在线编辑的可能性。日前Mozilla团队的Josh Marinacci分享了他们在开发过程中的经验教训。下面是映维网的具体整理:

当我们开始构建MrEd时,我们认为这会成为一种传统的Web服务。潜在用户访问网站,创建帐户,然后可以在网站构建体验并将其保存到服务器。我们以前开发过这样的软件,所以对相关要求十分熟悉。但当我们开始实际构建MrEd时,我们意识到其他挑战的存在。

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

经过一番思考后,我们认为Glitch可能是一个答案。它支持匿名使用,并允许你轻松地进行利用。它内置了一个不错的CDN,非常适合托管模型和360度图像。如果能够托管编辑器和文档,Glitch将成为实验完成后继续存在的的完美平台。

Glitch的缺点是,它的大多数高级功能都没有文档介绍。经过大量研究,我们想出了如何修改Glitch来解决一系列的问题,而我们现在希望向你分享我们的解决方案。

1. Glitch与Git Repo

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

我们现在可以创建一个编辑器,并按照我们喜欢的方式设置项目,在Git中保存,然后在需要时创建一个新的Glitch。我们专门构建了一个名为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中,用户可以编辑器左侧发现一个文件列表。尽管显示asset和脚本没有什么问题,但我们希望隐藏生成的React代码。事实证明,如果它以“.”开头,Glitch将隐藏任何目录。因此,在我们的基础repo中,我们将代码放到public/.mred。

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

我们不是将所有一切都放到同一个git repo中,我们创建了两个repo:mred只包含在React中构建编辑器的代码;mred-base-glitch则包含默认文档和行为。第二个repo将第一个repo集成为git子模块。编辑器的编译版本同样存放在mred repo中。这样,编辑器的源代码和编译版本都可以在git中进行版本控制。

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

3. 加载文档

编辑器是一个静态React应用程序,托管在用户的Glitch中,但它需要在某个位置保存在编辑器中创建的文档。Glitch没有提供用于以编程方式加载和保存文档的API,但任何Glitch都可以安装NodeJS服务器,所以我们用express创建了一个简单的文档服务器。doc服务器扫描文档和脚本目录并生成用于编辑器的JSON API。