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

  • 时间:
  • 浏览:2
  • 来源:5分排列3APP官网_五分排列3APP下载_5分排列3APP下载官网

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

当大伙儿开始了了英文构建MrEd时,大伙儿认为这会成为三种传统的Web服务。潜在用户访问网站,创建帐户,一点还时需在网站构建体验并将其保存到服务器。大伙儿愿意 开发过另另一四个多多多的软件,一点一点对相关要求十分熟悉。但当大伙儿开始了了英文实际构建MrEd时,大伙儿意识到一点挑战的占据 。

首先,MrEd的目标人群是学生,其中大多数是年轻人。我曾在多少夏天辅导过孩子们,我知道大伙通常没法电子邮件地址,即使有,追踪学生行为占据 隐私和法律方面的你你这种的现象。另外,大伙儿知道这是另一四个多多多终究会开始了了英文的实验,但大伙儿不希望学生抛妻弃子对大伙刚学到的工具的访问权限。

经过一番思考后,大伙儿认为Glitch一点是另一四个多多多答案。它支持匿名使用,并允许你轻松地进行利用。它内置了另一四个多多多不错的CDN,非常适合托管模型和3400度图像。一点还都可否托管编辑器和文档,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则蕴含默认文档和行为。第3个repo将第另一四个多多多repo集成为git子模块。编辑器的编译版本同样存放入mred repo中。另另一四个多多多,编辑器的源代码和编译版本都还时需在git中进行版本控制。

每当你愿意 在现有Glitch中更新编辑器,让他转到Glitch控制台并运行git子模块init和git子模块更新。一点,让他通过刷新Glitch UI进行更新。尽管这是另一四个多多多手动步骤,但学生们还时需通过老师指导轻松完成。

3. 加载文档

编辑器是另一四个多多多静态React应用线程池,托管在用户的Glitch中,但它时需在某个位置保占据 编辑器中创建的文档。Glitch没法提供用于以编程最好的土办法加载和保存文档的API,但任何Glitch都还时需安装NodeJS服务器,一点一点大伙儿用express创建了另一四个多多多简单的文档服务器。doc服务器扫描文档和脚本目录并生成用于编辑器的JSON API。

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

相较于比脚本和文档,asset有点棘手。编辑器时需另一四个多多多可用asset列表,但大伙儿没法只扫描asset目录,一点asset实际上并未存储在你的Glitch中。相反,它们储占据 Glitch的CDN中。一点,Glitch我我觉得有另一四个多多多名为.glitch-assets的隐藏文件,它将所有asset列为JSON文档,包括mime类型。

大伙儿发现学生愿意 使用诸如如GLB和WAV等不被Glitch识别的文件。你仍然还时需将你你这种文件上传到CDN,但.glitch-assets文件无需列出正确的mime类型,一点一点大伙儿的文档服务器为它们计算了新的mime类型。

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

4. 用户认证

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

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

5. 未来功能

大伙儿设法修改Glitch以满足大伙儿的需求,而大伙儿发现效果不错。当然,大伙儿希望在愿意 加进一系列的功能。

官方文档:大伙儿上方所做的几乎所有事情全是在支持论坛进行了少量研究后所得出,并得到了Glitch工作人员的帮助。除了基本项目开发之外,官方没法不要 的介绍文档。一点除常见你你这种的现象解答之外还有另一四个多多多官方文档网站,那就太好了。

真正的身份验证API:使用.env文件是另一四个多多多非常棒,但一点编辑器三种还时需正确响应用户则更棒。一点用户未登录,则还时需显示体验的仅播放视图。一点用户已登录但全是Glitch的所有者,它还时需显示Remix按钮。

三种以编程最好的土办法填充asset的最好的土办法。当从GitHub好友克隆时,你在Glitch中看多的所有内容都来自于基础的git repo,除asset之外。要创建蕴含预设asset列表的Glitch,你时需通过可视界面手动上传文件。没法一点最好的土办法将asset存储在git repo中或以编程最好的土办法上传它们。